@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

.p-Part{padding: 16rem 0;}

br.br1280{display: none;}
br.br976{display: none;}
br.br768{display: none;}
br.mo{display: none;}

/* 타블렛 가로 */
@media all and (max-width:1620px) {
    .inner {	width:94%; }
}
@media all and (max-width:1420px) {
    .s-inner {	width:94%; }
    .p-Part{padding: 14rem 0;}
}
@media all and (max-width:1280px) {
    html { font-size: 60% !important; }
    br.br1280{display: block !important;}
    .p-Part{padding: 12rem 0;}
}
@media all and (max-width:976px) {
    html { font-size: 60% !important; }
    br.br976{display: block !important;}
    .p-Part{padding: 10rem 0;}
}
@media all and (max-width:768px) {
    html { font-size: 0.55rem !important; }
    br.br768{display: block !important;}
    .p-Part{padding: 8rem 0;}
}
@media all and (max-width:480px) {
    html { font-size: 2.2vw !important; }
    br.mo{display: block !important;}
}


:root{
    --color1:#0d2140;
    --color2:#2e5da3;
    --color3:#efebe3;
    --color4:#f4f6fb;
}


#header { position:fixed; width:100%; height:100px; z-index:150;}
#header.scroll,
#header.menu_on{background: #fff;}
#header #logo {text-align: center; border-bottom: 1px solid rgba(255,255,255,0.3);}
#header.scroll #logo,
#header.menu_on #logo {border-bottom: 1px solid #eee;}
#header #logo img{ vertical-align:middle;  }
#header #logo img.on{ display:none; }
#header #logo2 { position:absolute; top:0; left: 160px; z-index:89; font-size:0; }
#header #logo2 img{ vertical-align:middle;  }
#header #logo2 img.on{ display:none; }
#header .hd_bx { line-height:100px;   transition: 0.3s;}
/* #header.scroll .hd_bx { line-height:80px;  transition: 0.3s;} */
#header .hd_mbx { display: none; }

.mo-link-bx{display: flex;}


#header .hd_btn { position: absolute; top:0; right: 40px; z-index:89; }



#gnb_pc {position:relative; line-height: 60px; overflow:hidden; width:100%; box-sizing:border-box; color:#fff; text-align:center; transition: max-height 0.3s ease, background 0.4s ease; border-bottom: 1px solid rgba(255,255,255,0.3);z-index: 9999;}
#gnb_pc:before{border-bottom: 1px solid rgba(255,255,255,0.3);}
#gnb_pc .gnb_dp1{display:inline-block; vertical-align:top; text-align:center; }
#gnb_pc .gnb_dp1>div { font-size:2rem; box-sizing:border-box; cursor:pointer; font-weight: 500; padding:0 60px;}
#gnb_pc .gnb_dp1>div>a { display:inline-block; position:relative; color:#fff; }

#gnb_pc .gnb_dp1 .smenu { position: relative; display:none; font-size:1.7rem; padding:30px 0; color:#fff; }
#gnb_pc .gnb_dp1 .smenu li { line-height: 1.35em; margin-bottom: 1em; position: relative; }
#gnb_pc .gnb_dp1 .smenu li a { color:#fff; }

#gnb_pc li.gnb_dp1:hover > div > a { color:var(--color1); }


#header.scroll #logo img.on,
#header.menu_on #logo img.on { display:inline-block; }
#header.scroll #logo img.off,
#header.menu_on #logo img.off { display:none; }
#header.scroll #logo2 img.on,
#header.menu_on #logo2 img.on { display:inline-block; }
#header.scroll #logo2 img.off,
#header.menu_on #logo2 img.off { display:none; }



#header.scroll #gnb_pc{border-bottom: 0;}
#header.scroll #gnb_pc:before{border-bottom: 1px solid #eee;}
#header.menu_on #gnb_pc { background:rgba(13,33,64,0.95);}
#header.scroll #gnb_pc:before,
#header.menu_on #gnb_pc:before {content:""; width:100%; height:60px; background:#fff; position:absolute; top:0; left:0; transition: background 0.3s ease; }

#header.scroll #gnb_pc .gnb_dp1>div > a,
#header.menu_on #gnb_pc .gnb_dp1>div > a { color:#212121; font-weight:600 }

#header.scroll #gnb_pc .gnb_dp1>div > a:hover,
#header.menu_on #gnb_pc .gnb_dp1>div > a:hover { color:#2d5fa5 }

#header.on .select_lang button,
#header.scroll .select_lang button,
#header.menu_on .select_lang button { color:#FFF;   background:#111}
#header.on .select_lang button::before,
#header.scroll .select_lang button::before,
#header.menu_on .select_lang button::before { background: url("/images/common/ico_lang.png") no-repeat center; }




.menuToggle {right: 0; top: 0; border-right: 0px solid rgba(255,255,255,0.1);  position:absolute; cursor:pointer; z-index:9999; box-sizing: border-box; }
.menuToggle span {display:block; width:26px; height:2px; background:#fff; position:absolute; left:50%; margin-left: -13px; transition:all 0.3s}
.menuToggle span.t {top:28px;}
.menuToggle span.m {top:50%; margin-top:-1px;}
.menuToggle span.b {bottom:28px; }

.menuToggle.m_on span {background:#FFF}
.menuToggle.m_on span.t {transform:translateY(8.5px) rotate(45deg)}
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b {transform:translateY(-8.5px) rotate(-45deg)}


#header.scroll .menuToggle span,
#header.menu_on .menuToggle span { background:#222 }
#header.scroll .menuToggle span,
#header.menu_on .menuToggle span { background:#222 }

/* #header.scroll .menuToggle.m_on span,
#header.menu_on .menuToggle.m_on span { background:#FFF } */


#gnb_mo{ position:fixed; height:100%; z-index:999; right:0; top:75px; padding:0; background:rgba(13,33,64,0.95); color:#FFF; width:100%; max-width:380px; box-sizing:border-box; transition:all 0.3s ease; left:auto; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%);}

#gnb_mo .gnb_dp1 div { font-weight:500; font-size:2.0rem; padding:1em; cursor:pointer; border-bottom:1px solid rgba(85,85,85,0.3); }
#gnb_mo .gnb_dp1 > div > a { color:#FFF; }
#gnb_mo .gnb_dp1 > div.on { background: var(--color2); }
#gnb_mo .gnb_dp1 > div.on> a { color:#fff; }

#gnb_mo .smenu {display:none; padding:1em 2em; background: #f5f7fb; }
#gnb_mo .smenu>li br{display:none;}
#gnb_mo .smenu>li>a,
#gnb_mo .smenu>li>span {display:block; padding:0.5em 0; font-size:1.8rem; color:#787878;}
#gnb_mo .smenu>li>a:hover,
#gnb_mo .smenu>li>span:hover{ color:#212121; font-weight:500;}

#gnb_mo .hd_btn { padding: 1.2em 1em; background: #202b39; }

@media all and (max-width:1280px) {
    #gnb_pc {line-height: 50px;}
	#gnb_pc .gnb_dp1>div {font-size: 1.8rem; padding:0 50px;}
    #header.scroll #gnb_pc:before,
    #header.menu_on #gnb_pc:before {height:50px;}

}
@media all and (max-width:1024px) {
    #header #gnb_pc {display:none;}
    #header { height:75px; }
    #header .hd_bx { line-height:75px; }
    #header .hd_btn {  right: 20px; }
    #header #logo { width:100%; text-align:center; text-align: left; padding-left: 2%;}
    #header #logo img { height:40px }

    #header .hd_btn { }
    #header .hd_mbx { display: block; width: 75px; height: 75px; }

    #header.scroll,
    #header.on { height: 75px; line-height: 75px; background:#FFF; border-bottom-color:#dedede;}

    #header.on .hd_bx,
    #header.scroll .hd_bx { line-height: 75px;  }

    #header.on #logo img.on { display: inline-block; }
    #header.on #logo img.off { display: none; }

    #header.on .hd_full span{ background-color:#111; }
    #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); }

}
@media all and (max-width:768px) {
	#header{ height:60px; }

	#header #logo img { height:30px }

	.select_lang button {width:80px; line-height:36px;  }
	.select_lang ul { top: 50px; }

    #gnb_mo { top: 60px; }

    #header .hd_bx { line-height:60px; }
    #header .hd_mbx{ width:60px; height:60px; line-height:60px; }

    #header .naver-btn{right: 140px;}

    #header.on, #header.scroll { height: 60px; }
    #header.on .hd_bx, #header.scroll .hd_bx { line-height: 60px; }
    #header.scroll #gnb_pc .gnb_dp1>div { height:60px; }

    #header.scroll .hd_mbx { width: 60px; }

    .menuToggle span.t {top:20px;}
    .menuToggle span.b {bottom:20px; }
    .menuToggle.m_on span.t {transform:translateY(9px) rotate(45deg)}
    .menuToggle.m_on span.b {transform:translateY(-9px) rotate(-45deg)}

    
}


@media all and (max-width:568px) {
	#header{height:55px; }
	#gnb_mo { top: 55px; }
    
	#header .hd_bx{ line-height:55px; }
	#header .hd_mbx { width:55px; height:55px; line-height:55px;}

	#header.on, #header.scroll { height: 55px; }
	#header.on .hd_bx, #header.scroll .hd_bx { line-height: 55px; }
	#header.on #logo img, #header.scroll #logo img { }
	#header.scroll #gnb_pc .gnb_dp1>div { height:55px; }

	#header.scroll .hd_mbx { width: 55px; }

	.menuToggle span.t {top:17.5px;}
	.menuToggle span.b {bottom:17.5px; }
}

/* footer */
#footer {padding: 7rem 0; text-align: center; background: var(--color1); color: #fff;}
#footer ul{display: flex; flex-wrap: wrap; justify-content: center; font-size: 1.6rem; gap: 0.5rem 3rem; margin-top: 2rem;}
#footer ul li:nth-child(1){width: 100%; justify-content: center;}
#footer ul li{display: flex; gap: 1rem; align-items: center;}
#footer ul li span{font-weight: bold;}
#footer p{font-size: 1.5rem; opacity: 0.5; margin-top: 4rem;}

@media all and (max-width:1280px){
    #footer .logo img{width: 28rem;}
    #footer ul{gap: 0.5rem 2rem;}
}
@media all and (max-width:768px){
    #footer .logo img{width: 25rem;}
    #footer {padding: 5rem 0;}
    #footer ul{font-size: 1.5rem; gap: 0.5rem 1.5rem; }
    #footer ul li{gap: 0.5rem;}
    #footer p{font-size: 1.4rem; margin-top: 3rem;}
}


#q_menu{position: fixed; right: 3rem; top: 50%; transform: translateY(-50%); background: #fff; box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.05); width: 10rem; text-align: center;padding: 3.5rem 0; border-radius: 100px;z-index: 100;}
#q_menu ul{display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;}
#q_menu ul li a{color: #222;}
#q_menu ul li p{font-size: 1.5rem; margin-top: 0.7rem;}

@media all and (max-width:1280px){
    #q_menu{width: 9rem;padding: 2.5rem 0;}
}
@media all and (max-width:768px){
    #q_menu{right: auto; top: auto; left: 0; bottom: 0; transform: translateY(0); border-radius: 0;width: 100%; padding:1.5rem 0;}
    #q_menu ul{flex-direction: inherit; gap: 0;}
    #q_menu ul li{width: calc(100%/5); border-right: 1px solid #eee;}
    #q_menu ul li:last-child{border-right: 0;}
    #q_menu ul li img{width: 3.5rem;}
    #q_menu ul li p{font-size: 1.4rem; margin-top: 0.5rem;}
}