@import url('../../../css/reset.css');

.hgg *,.hgg{
  font-family: 'HGGGothicssi';
  font-weight: 400;
  letter-spacing: -0.1px
}
.hgg .bold *,.hgg .bold{font-weight: 700}
:root{
  --main:#F8F6DE;
  --main3:#0081C5;
  }

.container{    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;}
.container.visible {overflow:visible;}
.flex{display: flex}
.text_center{text-align: center}
.white *{color:#fff}
img{max-width: 100%}

.btn{border-radius: 100px;display: inline-block;width:200px;height: 60px;line-height: 60px;
  font-size: 16px;text-align: center;cursor: pointer;}

/* header */
.header-wrap {
  width: 100%;
  height: 60px;
  z-index: 999;
  transition: all 0.3s;
  position: fixed;
  left: 0px;
  top: 0px;
}
.header-wrap .header{width: 100%;display: flex;align-items: center;justify-content: space-between;height: 60px;
  max-width: 100%;min-width: inherit;padding: 0 16px;transition: all 0.4s;z-index: 2}
.header-wrap .header>*{z-index: 2}
.header-wrap .hd_logo {
  width: 131px;
  height: 30px;
  background:url('/img/common/logo_c.svg') center center / cover no-repeat;
}
.header-wrap .gnb_w{height: 100%;}
.header-wrap .btn_menu{width:30px;height: 30px;border-radius: 100%;background: #3796F4;box-shadow: 0px 0px 4px 0px #00000029;;
display: inline-flex;align-items: center;justify-content: center}
.header-wrap .btn_menu img{width:16px}
.nav .nav_top{padding:0 16px;height: 60px;justify-content: space-between;display: flex;
  background: #F2F2F2;position: relative;align-items: center}
.nav .nav_top .logo{height: 30px;}
.nav .nav_top a{color:#fff;font-size: 12px}
.nav .nav_top a + a::before{display: inline-block;content: '';width:1px;height: 10px;background: #fff;margin: 0 20px}
.nav .lang{background: #F0F0F0;border-bottom: solid 1px #ddd;height: 50px;line-height: 50px;padding: 0 16px}
.nav .lang .lang_list{display: flex;align-items: center;gap:10px;color:#aaa;font-size: 14px}
.nav .lang .lang_list a,.nav .lang .lang_list span{color:#aaa}
.nav .lang .lang_list a.active{color:var(--blue);font-weight: 700}
.nav .nav_btn{width:30px;height: 30px;}
.nav .nav_btn .btn_close {width:30px;height: 30px; display: inline-block;border-radius: 100%;box-shadow: 0px 0px 4px 0px #00000029;
    position: relative;background:#3796F4 url('../../img/common/hd_gnb_close.svg') center center no-repeat;}
.nav_bg{
  display: none;
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
}
.nav {
  display: none;
  background: #fff;
  position: fixed;
  z-index: 9999;
  width: 90%;
  max-width: 340px;
  height: 100%;
  top: 0;
  right:0;
}
.nav>.flex{height: 100%}
#gnb{z-index: 9999;background: #F0F0F0;height: 100%;width:156px}
#gnb>li {
  text-align: center;
  font-size: 14px;
display: block;
height: 60px;
line-height: 60px;
color:#999;
background: #F0F0F0;
border-bottom: solid 1px #dddddd;
position: relative;
}
#gnb>li p{color:inherit;font-weight: 600;letter-spacing: 0;}
#gnb>li.active{background: #fff;color:#2C2C2C}
.nav .sub_menu{
  width:calc(100% - 156px);
  padding-left: 18px
}
.nav .sub_menu_list  {
  display: none;
}
.nav .sub_menu_list li{
  position: relative;
  border-bottom:solid 1px #ddd;
  height: 60px;
  padding:0 10px;
}
.nav .sub_menu_list.active{
  display: block;
}
.nav .sub_menu_list li a::after{
  content: '';
  display: inline-block;
  position: absolute;
  right:16px;
  width: 6px;
  height: 12px;
  background:url('../../img/common/hd_gnb_arrow.svg');
  top: 24px;
}
.nav .sub_menu_list a {
  display: block;
  font-size: 14px;
  line-height: 60px;
  padding-left: 10px;
  letter-spacing: 0;
}
.header-wrap.fixed .header{overflow: visible;}
.header-wrap.fixed .header::before{
  display: inline-block;
  content: '';
  width:100%;
  height:60px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
  left:0;top:0;z-index: 2;
}
.header-wrap.fixed .hd_logo{background-image:url('/img/common/logo_c.svg')}
.header-wrap.fixed .gnb_w{padding: 0;}
.header-wrap.fixed #gnb{background:none;box-shadow: none;height: 100%;backdrop-filter: none;}
.header-wrap.fixed #gnb .main_menu{line-height: 60px}
.header-wrap.fixed #gnb .main_menu>a{color:#2C2C2C}
.header-wrap.hide .gnb_w{opacity: 0}
.header-wrap.hide .header::before{display: none}

.footer{background: #2D3138;width:100%;padding: 50px 0 65px;background-size: cover;z-index: 2;position: relative;}
.footer *{color:#C9C7C5;font-size: 14px}
.footer .container{padding: 0 16px}

.footer .summary_wrap p{font-size: 18px;color:#fff;font-weight: 700;display: flex;align-items: center;gap:14px;line-height: 1}
.footer .summary_wrap .cont{font-size: 14px;color:#C9C7C5;margin-top: 24px}
.footer .summary_wrap>div+div{margin-top: 30px}
.footer .summary_wrap>div:first-child p.cont{font-size: 36px;font-weight: 700;line-height: 1;}
.footer .summary_wrap>div:nth-child(2) p{margin-bottom: 16px}
.footer .summary_wrap>div:nth-child(2) p.cont *{font-size: 14px;font-weight: 500;letter-spacing: 2px}
.footer .summary_wrap>div:nth-child(2) p.cont b{min-width: 50px;margin-right: 30px;display: inline-flex;justify-content: space-between;}

.footer .info_wrap{margin-top: 40px}
.footer .info_wrap .info div{width:100%;line-height: 1;display: flex;}
.footer .info_wrap .info div+div{margin-top: 20px;}
.footer .info_wrap .info div>span:first-of-type{color:#fff;flex:1;font-size: 14px;}
.footer .info_wrap .info div>span:last-of-type{font-weight: 400;flex:2;font-size: 14px}
.footer .info_wrap .sns{display: flex;gap:20px;margin-top: 40px}
.footer .info_wrap .sns a{width:60px;height: 60px;border-radius: 100%;display: inline-flex;align-items: center;justify-content: center;}

.footer .ft_bottom{border-bottom:1px solid #363A3F;position: relative;margin-top: 40px;padding-bottom: 20px;margin-bottom: 30px}
.footer .ft_bottom .container{}
.footer p.copyright{color:rgba(156, 159, 157, 0.68);line-height: 1;padding: 0 16px;}
.footer .ft_bottom .ft_btn{display: flex;align-items: center;justify-content: space-between;}
.footer .ft_bottom .ft_btn a{color:rgba(156, 159, 157, 0.68);font-weight: 300}
.footer .ft_bottom .brand_site{background: var(--main);height: 40px;line-height: 40px;padding: 0 14px;color:#150201;font-weight: 700;border-radius: 300px}
.footer .ft_bottom .brand_site:after{display: inline-block;content: '';background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.219942 5.16L7.55328 11.8267C7.67994 11.94 7.83994 12 7.99994 12C8.15994 12 8.31994 11.94 8.44661 11.8267L15.7799 5.16C15.9866 4.97333 16.0533 4.68 15.9533 4.42667C15.8533 4.16667 15.6066 4 15.3333 4H0.666609C0.393275 4 0.146608 4.16667 0.0466089 4.42667C-0.0533905 4.68 0.0132751 4.97333 0.219942 5.16Z' fill='%23989680'/%3E%3C/svg%3E%0A");width:16px;height: 16px;margin-left: 16px;vertical-align: middle;}

.ft_bottom .brandBtn {width:100%; height:40px; background:#F8F6DE;position:relative; z-index:5; padding:0 14px; border-radius:80px; position:relative; cursor:pointer;}
.ft_bottom .brandBtn:after {display: inline-block;content: '';background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.219942 5.16L7.55328 11.8267C7.67994 11.94 7.83994 12 7.99994 12C8.15994 12 8.31994 11.94 8.44661 11.8267L15.7799 5.16C15.9866 4.97333 16.0533 4.68 15.9533 4.42667C15.8533 4.16667 15.6066 4 15.3333 4H0.666609C0.393275 4 0.146608 4.16667 0.0466089 4.42667C-0.0533905 4.68 0.0132751 4.97333 0.219942 5.16Z' fill='%23989680'/%3E%3C/svg%3E%0A");width:16px;height: 16px;margin-left: 16px;vertical-align: middle;
position:absolute; top:50%; transform:translateY(-50%) rotate(180deg); right:13px;}
.ft_bottom .brandBtn p {
font-weight: 700;
font-size: 14px;
line-height: 40px;
color:#150201
}
.ft_bottom .brandBtn_wrap {position:relative; width:134px;}
.ft_bottom .brandBtnlist_wrap {position:absolute; bottom:0; left:0; border-radius:20px; overflow:hidden; padding-bottom:40px;background:#fff; width:100%; display:none;}
.ft_bottom .brandBtnlist_wrap.active {display:block;}
.ft_bottom .brandBtnlist_wrap li {width:100%;border-top:1px solid #ddd;}
.ft_bottom .brandBtnlist_wrap li:first-child {border-top:0;}
.ft_bottom .brandBtnlist_wrap li a { padding:0 14px;
font-weight: 700 !important;
font-size: 14px;
line-height: 40px;
display:block;
color:#150201 !important
}
.ft_bottom .brandBtnlist_wrap.active {display:block;}
.ft_bottom .brandBtn.active:after {transform:translateY(-50%) rotate(0deg); margin-top:1px;}


.layerPop-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
}

.layerPop-wrap {
  margin: 0 auto;
  max-width: 1280px;
  position: fixed;
  height: 100%;
  top: 100px;
  z-index: 10001;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  display: none;
}

.layerPop-wrap .layerPopTop {
  position: relative;
  top: 0;
  right: 0;
  display: block;
  margin-bottom: 16px;
  display: flex;
align-items: center;
justify-content: end;
}

.layerPop-wrap .layerPopTop .label {
  width: auto;
  color: #D7D7D7;
}

.layerPop-wrap .layerPopTop button {
  background: none;
  cursor: pointer;
  vertical-align: text-bottom;
  margin-left: 10px
}

.layerPop-wrap .layerPopCont {
  display: grid;
  grid-template-columns: repeat(4, auto)
}

.layerPop-wrap .layerPop {
  display: inline-block;
  margin-right: 12px;
  width: 311px;
  box-shadow: rgba(0, 0, 0, 0.1) 5px 10px 2px;
  padding: 0px;
  border-radius:12px;
  overflow: hidden
}

.layerPop-wrap .layerPop>a,
.layerPop-wrap .layerPop>p {
  overflow: hidden;
  display: block;
}

.layerPop-wrap .layerPop .popup-bt {
  background: #edf1f3;
  display: flex;
  overflow: hidden;
}

.layerPop-wrap .layerPop .popup-bt>a {
  width: 50%;
  display: block;
  padding: 10px 0;
  text-align: center;
  font-weight: 500;
  border: solid 1px #dddddd;
  font-size: 14px
}

.layerPop-wrap .layerPop1>a>img {
  width: 100%;height: 100%;object-fit: cover;
}

.ft_popup_wrap{position: fixed;bottom:0;left:50%;transform: translateX(-50%);z-index: 99;width: 100%;}
.ft_popup_wrap .cont{position: relative;}
.ft_popup_wrap .btn_close{position: absolute;right:10px;bottom: calc(35% - 10px);z-index: 2;cursor: pointer;width:20px}

.sub_popup {
	display:none;
	overflow-x: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 999999;
	background: rgba(36 36 36 / 50%)
}
.sub_popup .subPopup_wrap{
	position: absolute;
	background: #fff;
	padding: 15px 15px 20px;
	z-index: 1000;
	width: calc(100% - 32px);
	height:100%;
	border-radius:12px;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}


.sub_popup .subPopupClose {
	text-indent:-9999px;
	overflow:hidden;
	background:transparent;
	cursor:pointer;
	background:url("/mo/img/sub/03/02_subPopupClose.png")no-repeat center;
	width:30px; height:30px;
	background-size:25px;
}



.sub_popup .AgreePop_wrap {height:300px;}
.sub_popup .AgreePop .title {display:flex; justify-content:space-between; align-items:center; padding-bottom:8px;}
.sub_popup .AgreePop .title h3 {
font-family: var(--korean03);
font-weight: 400;
font-style: 80g;
font-size: 15.4px;
leading-trim: NONE;
line-height: 26.95px;
letter-spacing: -0.6px;
}
.sub_popup .AgreePop .agree_wrap {background: #FBFBFB; border: 1px solid var(--stroke, #DDDDDD);
height:230px; overflow-y:auto; border-radius:6px; padding:10px 13px;}
.sub_popup .AgreePop .agree_wrap p {
font-family: var(--korean01);
font-weight: 400;
font-style: 40g;
font-size: 12px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: -0.6px;

}