
body{ overflow-x: hidden;}

.wrapper, .inr{position:relative; max-width:1200px; margin:0 auto; width:100%}

/* header */
#header{position: relative; z-index:99; width:100%; height:100px; transition:0.3s}
#header .inr{height: 100%;}
#header h1{position:absolute; left:0; top:50%; transform: translateY(-50%);}
#header h1 a{display:block; width:225px; height:53px; background:url(../images/common/logo.png) no-repeat center / contain;  font-size:0;}
html[lang="en"] #header .inr{max-width:1400px; width:1400px;}

#header .gnb_wrap {position:relative; transition : all .3s ease; z-index:999}
#header .gnb{position:absolute; right:0px; top:0; display: flex; }
#header .gnb > li{position: relative; }
#header .gnb > li > a {display: block;line-height: 100px;padding: 0 35px;color: #222;font-size: 20px;font-weight: 500;letter-spacing: -.5px}
#header .gnb > li > .sub_menu { position: absolute;overflow: hidden;left: 0;top: 100px;width: 100%;z-index: 999;transition: .4s;height: 0;box-sizing: border-box}
#header .gnb:hover .sub_menu, #header .gnb:hover + .submenu_bg{ height: 220px;}
#header .gnb .sub_menu li:first-child{ padding-top: 0;}
#header .gnb > li:last-child > .sub_menu li{border-right: none;}
#header .gnb .sub_menu.on {display:block;}
#header .gnb .sub_menu:before {content: '';display: block;position: absolute;top: 0;right: 0;width: 1px;height: 180px;background: #dadada}
#header .gnb .sub_menu li {padding-top: 15px}
#header .gnb .sub_menu li a{display: block; text-align: center; color:#333;line-height:1.5;}
#header .gnb .sub_menu li a:hover{ color: #103178; font-weight: 500;}
#header .gnb .sub_menu li:first-child a{border-top:0;}
html[lang="en"] #header .gnb > li > a{padding:0 clamp(10px,1.7vw, 45px);}
html[lang="en"] #header .gnb .sub_menu:before{height:170px;}

.submenu_bg {position: absolute;left: -100%;right: -100%;height: 0;top: 100px;background: #fff;transition: .4s}

#header .area_util{position:absolute; right:0; top:25px;}
#header .area_util span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111; background-size:15px; border-radius:50%; }
#header .area_util div{display:inline-block; color:#fff;}
#header .area_util div a{color:#fff; font-weight:bold; font-size:20px;}

/* mobile-menu */
.mobile_header{background:#008790; color:#333; text-align:center; padding:35px 0 10px 0;}
.btn_menu{position:absolute; z-index:90; width:25px; height:45px; right:20px; top:28px;}
.btn_menu{display:none;}
.btn_menu span{display:block; width:24px; height:2px; background:#333; text-align:center;}
.btn_menu span:nth-child(1){margin-top:14px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb_top h1{float:none; padding:20px; }
.m_area_util{margin-top:40px;overflow:hidden;  padding:20px; box-sizing:border-box; background:#4c4c4c;}
.m_area_util a{display:inline-block; width: 49%; height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; border:1px solid #fff; vertical-align:middle; color:#fff; text-align:center; font-size:14px;}
.m_gnb{overflow-y:auto; position:fixed; top:0px; right:-100%; width:280px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#424242; transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(/images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#efefef; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:20px 25px; font-size:14px; color:#333; }
.m_gnb > ul > li:last-child{ display: none; }

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb > ul{}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform:rotate(-45deg);}

.area_util_m{padding:20px 20px; margin-top:100px; background:#598e35;}
.area_util_m span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111 url(/images/common/icon_call.svg) no-repeat 50%; background-size:15px; border-radius:50%; }
.area_util_m div{display:inline-block; color:#fff;}
.area_util_m div a{color:#fff; font-weight:bold; font-size:17px;}

/* gnbLang */
li:has(.gnbLang){ display: flex; align-items: center; }
.gnbLang{ display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: #3286b7; border-radius: 5em; font-size: 14px; }
.gnbLang a{ color: #fff; }
.gnbLang a:first-child{ order: -1; }
.gnbLang::before{ content: ''; display: inline-block; width: 1px; height: 10px; background: #fff; opacity: .5; }

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

/*banner_contact*/
.banner_cont{position: fixed; right: 0; top:50%; transform: translateY(-50%); z-index:20;border-radius: 20px 0 0 0px;background: #3286b7; width: 50px; }
.banner_cont a{color: #fff; display: block; }
.banner_cont span{display: block;}
.banner_cont span.icon{ width: 50px; height: 60px;text-align: center;line-height: 60px;box-sizing: border-box;}
.banner_cont span img{vertical-align: middle;}
.banner_cont span.txt{ display: flex; align-items: center; justify-content: center; height: 180px; border-top: 1px solid #fff; }
/* .banner_cont span.txt i{display: inline-block;position: absolute;right: -116px;top: 70px;transform: rotate(
-270deg);transform-origin: left top;color: #fff;font-family: 'GmarketSansB'; padding-left: 20px;font-size: 14px;} */
.banner_cont span.txt i{display: inline-block; color: #fff;font-family: 'GmarketSansB'; font-size: 14px; writing-mode: vertical-lr; }
.banner__play{ background: 0; }
.banner__play .icon{ border-top: 1px solid #fff; }

/* video modal */
.videoDialog{ position: fixed; inset: 0; align-items: center; justify-content: center; max-width: unset; max-height: unset; width: auto; height: auto; background: #00000080; border: 0; }
.videoDialog[open]{ display: flex; }
.videoDialog__wrap{ position: relative; width: max-content; height: max-content; }
.videoDialog__video{ max-width: 90vw; max-height: 90vh; }
.videoDialog__cancel{ position: absolute; width: 50px; height: 50px; background: #fff; color: #000; }
.videoDialog__cancel::before,
.videoDialog__cancel::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 30px; height: 3px; background: currentColor; }
.videoDialog__cancel::before{ transform: rotate(45deg); }
.videoDialog__cancel::after{ transform: rotate(-45deg); }
@media(min-width:1280px){
	.videoDialog__video{ max-width: calc(90vw - 50px); }
	.videoDialog__cancel{ left: 100%; top: 0; }
}
@media(max-width:1279px){
	.videoDialog__video{ max-height: calc(90vh - 50px); }
	.videoDialog__cancel{ right: 0; bottom: 100%; }
}

/* footer */
#footer{background-color: #383838; color: #fff; padding: 60px 0;}
#footer .inr{position: relative;}
#footer .address{line-height: 1.8;  }
#footer .address p{opacity: .8;font-family:'Noto Sans KR' !important;}
#footer .address p b{ margin-right: 7px;opacity: 1;}
#footer .address p a{color: #fff; opacity: .8;}
#footer .address p.name{padding-top: 20px;}
#footer .address p.mail,
#footer .address p.tel{display: inline-block}
#footer .address p.mail{margin-right: 20px;}
#footer .address p.copy{padding-top: 10px; opacity: .5;}

/*btn top*/
#footer .btn_top{position: absolute;right: 0; top:-80px;text-align: center; width:50px; height: 50px;background: #83ccb8; background:-webkit-linear-gradient(325deg, #4f9fc3 7%, #9ce1b3 74%);background:-moz-linear-gradient(325deg, #4f9fc3 7%, #9ce1b3 74%);background:linear-gradient(325deg, #4f9fc3 7%, #9ce1b3 74%); text-align: center;}
#footer a.btn_top{color: #fff; font-size: 13px;font-weight: 500;font-family: 'Noto Sans KR';}
#footer .btn_top img{display: block;margin: 14px auto 0;}

@media all and (max-width:1480px){
	html[lang="en"] #header .inr{width:98%;}
}
@media all and (max-width:1280px){
	#header .gnb > li > a{padding:0 25px;}
	.wrapper, .inr{width:98%; margin: 0 auto;}
	html[lang="en"] #header .gnb > li > a{ font-size:18px;}
	html[lang="en"] #header .gnb .sub_menu:before{height:188px;}
}
@media all and (max-width:1080px){
	#header .area_util,
	#header .gnb > li:not(:has(.gnbLang)),
	.banner_cont{display:none;}
	.btn_menu{display:block;}
	#header .gnb{ height: 100px; right: 60px; }
	.submenu_bg{ display: none; }
}

@media(max-width:450px){
	#header h1 a {width: 150px;}
	#header {height: 70px;}
	.btn_menu {top: 10px;}
	#header .gnb{ height: 70px; }
}