/* 검색엔진 고려한 숨기기, 로고, 제목, 링크 등, 버튼은 aria-label과 title */
.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 0; }

.wrapper{width:1400px; margin:0 auto;}
body *{box-sizing:border-box;}

/* animation effect */
.fadeup{position:relative;opacity:0;top:130px;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.fadeup-in{position:relative;opacity:1;top:0;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.slideup-in{position:relative; top:0; transition:all 0.7s ease-out 0s;}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}

/* header */
#header{z-index:90; width:100%; height:90px; background:#fff; text-align:center; transition:0.5s ease-out;}
#header .wrapper{position:relative; }
#header.color_header{background:#fff;}
#header h1{position:absolute; top:22px; left:0;}
#header h1 a{display:block; height:42px; aspect-ratio: 277/42; background:url(../images/common/logo.svg) no-repeat 50% 50%;background-size:100%; font-size:0px;}

*[lang="en"] #header h1 a{display:block; height:42px; aspect-ratio: 261/42; background:url(../images/common/logo_en.svg) no-repeat 50% 50%;background-size:100%; font-size:0px;}

#header nav{display:inline-block;}
#header nav .menu{display:inline-block;}
#header .menu ul.gnb{overflow:hidden;}
#header .menu ul.gnb:after{content:''; display:block; clear:both;}
#header .menu ul.gnb > li ul{position:relative;}
#header .menu ul.gnb > li ul:hover{background:#f8f8f8; transition:all 0.3s ease-out 0s;}
#header .menu ul.gnb > li ul:hover a{color:#333; transition:all 0.3s ease-out 0s;}
#header .menu ul.gnb > li ul:before{content: ''; position:absolute;  left:0; top:0; z-index: 6; width:0%; height:2px; background:#f6851e; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s;}
#header .menu ul.gnb > li ul:hover:before{width:100%}
#header .menu ul.gnb > li{float:left; text-align:center;}
#header .menu ul.gnb > li > a{position:relative; display:block; line-height:90px; height:90px; padding:0 50px; font-size:18px; font-weight:600; color:#111;}

#header .menu .sub_menu > li a:hover{color:#f6851e;}
#header.color_header .menu ul.gnb > li:hover > a{color:#f6851e;}
#header .menu .sub_menu{display:none; position:relative; top:0; z-index:999; width:100%; height:220px;}
#header .menu .sub_menu:hover{}
#header .menu .sub_menu > li{width:100%; margin:0; text-align:center;}
#header .menu .sub_menu > li a{display:block; padding:6px 0; font-weight:300; font-size:15px; color:#888; transition:all 0.3s ease-out 0s;}
#header .menu .sub_menu > li a:hover{transition:all 0.3s ease-out 0s;}
#header .menu .sub_menu > li a:hover{color:#fff;}
#header .menu .sub_menu > li:first-child{padding-top:15px;}
#header .menu .sub_menu > li:last-child{}

#header .gnb_bg{z-index: 90; display:none; position:absolute; overflow:hidden; top:90px; width:100%; height:220px; background:#fff; border-top:1px solid #ececec; box-shadow:3px 53px 25px 0px rgba(0, 0, 0, 0.05);}

#header .area_util{position: absolute; top:31px; right:100px; z-index:9;}
#header .area_util ul{display: block; width:auto; height: 38px; background-color: rgba(255,255,255,0.12); border-radius: 30px;}
#header .area_util ul li{position:relative; float:left;}
#header .area_util ul li a{position:relative; padding:0 22px; font-size:14px; font-weight:700; color:#555; transition:all 0.3s ease-out 0s;}
#header .area_util ul li a:after{content:""; position:absolute; opacity:0.2; top:2px; left:0; width:1px; height:11px; background:#555;}
#header .area_util ul li:first-child a:after{background:none !important;}

*[lang="en"] #header .menu ul.gnb > li > a{padding:0 40px;}
*[lang="en"] #header .area_util{right:50px;}

/* 모바일 */
.btn_menu{position:absolute; z-index:90; width:50px; height:90px; right:0; top:0;}
.btn_menu span{display:block; margin:0 auto; width:25px; height:2px; background:#333; text-align:center;}
.btn_menu span:nth-child(1){margin-top:36px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.m_gnb{overflow-y:auto; right:-100%; position:fixed; top:0px; background:#fff; z-index:999; transition: all 0.5s ease-out 0s;}
.m_gnb_bg{float:left; width:40%; height:100%; background:#fff url("../images/main/menu_bg.jpg") no-repeat 100%; background-size:cover;}
.m_gnb .area_util{z-index:99;}
.m_gnb .area_util a{padding-left:50px;}
.m_gnb > .gnb_menu{box-sizing:border-box; float:left; width:100%; padding:100px 0 0 60px; border-right:1px solid #ededed;}
.m_gnb > .gnb_menu > ul > li > a{display:block; position:relative; padding:16px 0; color:#444; font-size:22px; transition:all 0.3s ease 0s; text-align:left;}
.m_gnb > .gnb_menu > ul > li > a:hover{color:#023664}
.m_gnb > .gnb_menu > ul > li > a::before,
.m_gnb > .gnb_menu > ul > li > a::after {content: '';position: absolute;top: 50%; left:70%; margin: -1px 0 0 -5px; width: 10px; height: 2px; background-color: #000; -webkit-transition: -webkit-transform .6s;  transition: -webkit-transform .6s;  -o-transition: transform .6s;  transition: transform .6s;  transition: transform .6s, -webkit-transform .6s;}
.m_gnb > .gnb_menu > ul > li > a:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
.m_gnb > .gnb_menu > ul > li > a::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.m_gnb > .gnb_menu > ul > li > a.active{color:#023664;}
.m_gnb > .gnb_menu > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > .gnb_menu > ul > li > ul{display:none; padding-bottom:20px;}
.m_gnb > .gnb_menu > ul > li > ul > li:first-child a{padding-top:0}
.m_gnb > .gnb_menu > ul > li > ul > li > a{display:block; padding:12px 0 0 20px; text-align:left; font-size:16px; color:#333; font-weight:300;}
.m_gnb.active .lang_select{margin-bottom:30px; text-align:left;}
.m_gnb.active .lang_select a{position:relative; padding-right:15px; color:#555;}
.m_gnb.active .lang_select a.active{color:#023664; font-weight:bold;}
.m_gnb.active .lang_select a:first-child:before{content:''; display:block; position:absolute; right:5px; top:8px; width:3px; height:3px; background:#999;}


.m_gnb .gnb_link{position:absolute; bottom:0; left:0; width:100%;}
.m_gnb .gnb_link a{display:block;float:left; width:50%; padding:15px 0; background: #f6f6f6; border-top:1px solid #ddd;}
.m_gnb .gnb_link a:nth-of-type(2){border-left:1px solid #ddd;}
.m_gnb .gnb_link a:nth-of-type(3){width:100%; background:#333; color:#fff;}
.m_gnb .gnb_link p{margin-top:30px; font-size:12px;}

.m_gnb .btn_close{opacity:0; display:block; position:absolute; top:0px; right:0; width:85px; height:85px; background:#023664; font-size:0px;}
.m_gnb.active{ display:block; right:0; width:480px; height:100%; transition:all 0.5s ease-out 0s;}
.m_gnb.active .btn_close{opacity:1; right:0;}
.m_gnb_top{box-sizing:border-box; background:#f9f9f9;}
.m_gnb_top p{background:#ddd;}

.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:40px; left:35px;  width:20px; height:2px; background:#fff; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:40px; left:35px; width:20px; height:2px; background:#fff; bottom: 9px; transform:rotate(-45deg);}

.cover.active{background: rgba(0,0,0,0.4); position:fixed; width:100%; height:100%; left:0; top:0; z-index: 99;}

/* footer */
#footer{padding:80px 0; background:#f2f2f2;}
#footer .wrapper{position:relative;}
#footer .flogo{position:absolute; top:0; left:0; display:block; height:42px; aspect-ratio: 277/42; background:url(../images/common/logo.svg) no-repeat 50% 50%;background-size:100%; font-size:0px}
#footer address{padding-left:334px;}
#footer address .menu{display:flex; margin-bottom:20px;}
#footer address .menu li{margin-right:20px;}
#footer address .menu li a{font-weight:600; color:#111;}
#footer address span{line-height:2; padding-right:35px;}
#footer address p{margin-top:40px;}
#footer .btn_top{position:absolute; box-sizing:border-box; right:0; top:0; width:50px; height:50px; padding-top:25px; background:#555 url(../../images/main/img_top.png) no-repeat center; color:#ddd; font-size:0; text-align:center;}

#footer dl, #footer .address-item dd, .info-block{ display: flex; flex-wrap: wrap; gap: 0 2ch; }
#footer dt{ font-weight: 700; }
#footer .d-item{ display: flex; flex-wrap: wrap; gap: 0 1ch; }
#footer .address-item{ flex-direction: column; flex: 1 100%; }

*[lang="en"] #footer .flogo{height:42px; aspect-ratio: 261/42; background:url(../images/common/logo_en.svg) no-repeat 50% 50%; background-size:100%; font-size:0px}

@media screen and (max-width:1440px){
	#header .wrapper{width:100%;}
	.wrapper{width:96%;}

	#header h1{left:10px;}
}

@media screen and (max-width:1279px){
	#header .area_util{right:50px;}
	#header .menu ul.gnb > li > a{padding:0 30px;}

	#footer{padding:60px 0;}
	#footer address br{display:none;}
	#footer address span{display:inline-block; padding-right:15px;}
	#footer .flogo{position:static; height: 30px;}
	#footer address{margin-top:20px; padding-left:0}
	#footer .btn_top{top:-60px;}
	#footer address p{margin-top:10px; font-size:12px; color:#999}
	#footer .btn_top{top:-80px;}

}

@media screen and (max-width:1024px){
	#header nav{display:none;}
	.area_quick{display:none;}
}

@media screen and (max-width:767px){
	body, p, li, a {
		font-size: 14px;
		font-family: Montserrat, Sans-serif;
	}
	
	#header{height:70px;}
	#header h1{top:20px;}
	#header h1 a{height:30px;}
	*[lang="en"] #header h1 a{height:30px;}

	*[lang="en"] #footer .flogo{height:30px}

	#header .area_util{display:none;}
	.btn_menu{height:70px;}
	.btn_menu span{width:19px;}
	.btn_menu span:nth-child(1){margin-top:29px;}
	.btn_menu span:nth-child(3),
	.btn_menu span:nth-child(2){margin-top:4px;}
	.m_gnb.active{width:100%;}
	.m_gnb > .gnb_menu{padding:55px 0 0 30px;}
	.m_gnb .btn_close{width:60px; height:60px;}
	.m_gnb .btn_close:before{content: '';display:block;position:absolute;top: 30px;left: 20px;width:19px;height:2px;background:#fff;transform:rotate(45deg);}
	.m_gnb .btn_close:after{content: '';display:block;position:absolute;top: 30px;left: 20px;width:19px;height:2px;background:#fff;bottom: 9px;transform:rotate(-45deg);}

	.m_gnb > .gnb_menu > ul > li > a{padding:0 0 10px 0 ; font-size:16px;}
	.m_gnb > .gnb_menu > ul > li > ul > li > a{padding: 5px 0; font-size:13px;}
	.m_gnb > .gnb_menu > ul > li > ul{padding-bottom:15px;}
	.m_gnb > .gnb_menu > ul > li > a::before, .m_gnb > .gnb_menu > ul > li > a::after{top:13px;}
	.m_gnb .gnb_link a{font-size:12px;}
}