@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; overflow-x: hidden;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.f-inner {	width:1760px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1280px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1759px) {	
	.f-inner {width:94%;}
}
@media all and (max-width:1399px) {	
	.inner {width:94%;}
}
@media all and (max-width:1279px) {	
	.s-inner {width:94%;}
}


/* header */
#header{height: 100px; width: 100%; position: fixed; top: 0; left: 0; z-index: 99; border-bottom: 1px solid rgba(255,255,255,0.1);}
#header #logo{position: absolute; left: 60px; top: 50%; transform: translateY(-50%);}
#header #logo a{display: block; width: 231px; height: 38px; background: url(/images/common/logo_on.webp) no-repeat center center / contain;}
#header .pcGnb{}
#header .pcGnb > ul{display: flex; justify-content: center; align-items: center; gap:50px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 18px; font-weight: 500; color: #fff; line-height: 100px;}
#header .pcGnb > ul > li:hover > div > a{color: #1b4075 !important;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #1b4075; text-align: center; width: 182px; left: 50%; transform: translateX(-50%); padding: 10px 0;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; color: #ffffff; display: block; line-height: 44px;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
#header .r_cont{position: absolute; right: 60px; top: 50%; transform: translateY(-50%);}
#header .r_cont .call{color: #fff;}
#header .r_cont .call p{font-size: 17px; font-weight: 700; font-weight: 500;}
#header .r_cont .call p span{font-weight: 700;}


#header:hover{background-color: #fff; border-bottom: 1px solid #eee;}
#header:hover #logo a{background: url(/images/common/logo.webp) no-repeat center center / contain;}
#header:hover .pcGnb > ul > li > div > a{color: #222;}
#header:hover .r_cont .call{color: #1b4075;}

#header.on{background-color: #fff; border-bottom: 1px solid #eee;}
#header.on #logo a{background: url(/images/common/logo.webp) no-repeat center center / contain;}
#header.on .pcGnb > ul > li > div > a{color: #222;}
#header.on .r_cont .call{color: #1b4075;}

#header .hd_mbx { display: none; }
#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:380px; padding: 90px 0;background: rgba(40,40,40, 0.95); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);-ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:4em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem; font-weight:500;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0.5em 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.8rem; color:#4b4b4b;padding:0 2em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}

#gnb_mo > ul > li > div.on { background: #1b4075; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn {	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }


.menuToggle { position: absolute; width:70px; height:70px; cursor:pointer; z-index:101; border-right: 1px solid rgba(255,255,255,0.1); right: 0;}
.menuToggle span { display:block; width:28px; height:2px; border-radius:3px; background:#fff; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
#header.on .menuToggle span { background: #222;}
#header.ons .menuToggle span { background: #222;}
.menuToggle span.t { margin-top: -10px; }
.menuToggle span.m { margin-top:-1px; width: 18px; }
.menuToggle span.b { margin-top: 8px; }

.menuToggle.m_on span { background: #fff !important; }
.menuToggle.m_on span.t { transform:rotate(45deg); margin-top: 0;  }
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b { transform:rotate(-45deg); margin-top: 0; }

@media all and (max-width:1600px){
    #header #logo{left: 2%;}
	#header .pcGnb > ul{gap:40px;}
	#header .r_cont{right: 2%;}
}
@media all and (max-width:1400px){
    #header{height: 70px;}
    #header .hd_mbx { display: block; }
	#header #logo a{width: 200px;}
	#header .pcGnb{display: none;}
    #header .r_cont{right: 80px;}
	#header .r_cont .call p{font-size: 16px;}
}
@media all and (max-width:768px){
    #header{height: 60px;}
	#header #logo{left: 3%;}
	#header #logo a{width: 180px;}
	#header .r_cont{right: 3%;}
	#header .r_cont .call{display: none;}
    .menuToggle {width:60px; height:60px;}
}



/* footer */
#footer{padding: 60px 0; border-top: 1px solid #f2f2f2;}
#footer .s-inner{}
#footer .s-inner .top{display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #e8e8e8;}
#footer .s-inner .top .l_cont{display: flex; gap:60px;}
#footer .s-inner .top .l_cont .f_logo{}
#footer .s-inner .top .l_cont .f_logo img{}
#footer .s-inner .top .l_cont .info_box{}
#footer .s-inner .top .l_cont .info_box h3{font-size: 20px; color: #1b4075; font-weight: 600; }
#footer .s-inner .top .l_cont .info_box .info{}
#footer .s-inner .top .l_cont .info_box .info p{display: inline-block; font-size: 16px; color: #666; font-weight: 300; margin-top: 15px; margin-right: 30px;}
#footer .s-inner .top .l_cont .info_box .info p span{font-weight: 500;}
#footer .s-inner .top .l_cont .info_box .copy{font-size: 16px; color: #666666; opacity: 0.7; margin-top: 30px;}
#footer .s-inner .top .r_cont{}
#footer .s-inner .top .r_cont .icon{display: flex; flex-direction: column; gap:10px;}
#footer .s-inner .top .r_cont .icon li{}
#footer .s-inner .top .r_cont .icon li a{}
#footer .s-inner .top .r_cont .icon li a img{}
#footer .s-inner .bottom{display: flex; justify-content: space-between; align-items: center;}
#footer .s-inner .bottom .l_cont{}
#footer .s-inner .bottom .l_cont p{font-size: 16px; color: #666666; opacity: 0.5;}
#footer .s-inner .bottom .r_cont{}
#footer .s-inner .bottom .r_cont ul{display: flex; gap:25px;}
#footer .s-inner .bottom .r_cont ul li{}
#footer .s-inner .bottom .r_cont ul li a{font-size: 16px; color: #666666;}
#footer .s-inner .bottom .r_cont ul li a b{font-weight: 600; color: #222222;}

@media all and (max-width:1280px){
	#footer{padding: 50px 0;}
	#footer .s-inner .top{margin-bottom: 35px; padding-bottom: 35px;}
	#footer .s-inner .top .l_cont{gap:50px;}
	#footer .s-inner .top .l_cont .f_logo img{max-width: 180px;}
	#footer .s-inner .top .l_cont .info_box h3{font-size: 19px;}
	#footer .s-inner .top .l_cont .info_box .info p{margin-top: 12px; margin-right: 25px; font-size: 15px;}
	#footer .s-inner .top .l_cont .info_box .copy{margin-top: 25px; font-size: 15px;}
	#footer .s-inner .bottom .r_cont ul li a{font-size: 15px;}
	#footer .s-inner .bottom .l_cont p{font-size: 15px;}
}
@media all and (max-width:1024px){
	#footer .s-inner .top .l_cont{gap:40px;}
	#footer .s-inner .top .l_cont .f_logo img{max-width: 164px;}
	#footer .s-inner .top .l_cont .info_box h3{font-size: 18px;}
	#footer .s-inner .top .l_cont .info_box .info p{margin-top: 10px; margin-right: 20px;}
	#footer .s-inner .top .l_cont .info_box .copy{margin-top: 20px;}
}
@media all and (max-width:768px){
	#footer{padding: 40px 0;}
	#footer .s-inner .top{flex-direction: column-reverse; margin-bottom: 30px; padding-bottom: 30px;}
	#footer .s-inner .top .l_cont{flex-direction: column; align-items: center; gap:30px;}
	#footer .s-inner .top .l_cont .f_logo img{max-width: 156px;}
	#footer .s-inner .top .l_cont .info_box{text-align: center;}
	#footer .s-inner .top .l_cont .info_box h3{font-size: 17px;}
	#footer .s-inner .top .l_cont .info_box .info p{margin-top: 8px; margin-right: 0; margin-left: 8px; margin-right: 8px; font-size: 14px;}
	#footer .s-inner .top .l_cont .info_box .copy{margin-top: 16px; font-size: 14px;}
	#footer .s-inner .top .r_cont{margin-bottom: 30px;}
	#footer .s-inner .top .r_cont .icon{flex-direction: row; justify-content: center;}
	#footer .s-inner .bottom{flex-direction: column-reverse; gap:30px;}
	#footer .s-inner .bottom .r_cont ul li a{font-size: 14px;}
	#footer .s-inner .bottom .l_cont p{font-size: 14px;}
}
@media all and (max-width:500px){
	#footer .s-inner .top{margin-bottom: 25px; padding-bottom: 25px;}
	#footer .s-inner .bottom{gap:25px;}
}


#Quick { position: fixed; width: 85px; top: 50%; right:20px; z-index:99; transform: translateY(-50%);}
#Quick ul {padding:20px 10px;  border-radius:40px; background:rgba(255,255,255,0.95); border:1px solid #f9f9f9;  box-shadow:3px 3px 5px rgba(85,85,85,0.1);  }
#Quick ul li {  text-align:center;margin-top:0.7em;}
#Quick ul li:first-child{margin-top: 0;}
#Quick ul li:last-child {}
#Quick ul li a { display: block;}
#Quick ul li a p { font-size:1.4rem; font-weight:600; color:#686868}
#Quick ul li a img {width:100%;}
#Quick ul li a:hover p {color:#222}

@media all and (max-width:1140px) {
	#Quick {  width: 64px; }
	#Quick ul {padding:8px}
	#Quick ul li a p {display:none}
}
@media all and (max-width:976px) {
  #Quick { width: 100%; top: auto; bottom: 0; transform: translateY(0%); right: 0;}
  #Quick ul li a img{width: 40px;}
  #Quick ul {padding:5px; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; background-color: #fff;}
  #Quick ul li{width: 50%;}
  #Quick ul li a p {display:block; font-size: 1.3rem; margin-top: 5px;}
  #Quick ul li a p br{display:none}
}