@charset "utf-8";

@import url("reset.css");
@import url("common.css");
@import url("font.css");

/* 헤더 */
.fx_btn{display: none;}

header{width: 100%; z-index: 10000; position: fixed; top: 0; left: 0; transform: translateY(0); transition: all 0.5s;}
header.bg{background: rgba(0,0,0,0.5);}
header::before{content: ""; position: absolute; top: 90px; left: 0; width: 0%; height: 1px; background: #CDCDCD; transition: all 0.5s;}
header.header_hov::before{width: 100%;}
header::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; z-index: -1; opacity: 0; transition: all 0.5s;}
header.header_hov::after{height: 400px; opacity: 1;}
header.header_hov{background: #fff;}
header .inner{display: flex; justify-content: space-between; align-items: center; height: 90px; padding: 0 100px; transform: translateY(0);}
header .logo{transition: all 0.3s;}
header .logo a{display: block;}
header.header_hov .logo a img{content: url("/resources/img/common/header_logo_bk.svg");}
header .header_util{display: flex; align-items: center; gap: 10px;}
header .header_util .open{padding: 11.5px 20px; border-radius: 60px; background: #035e60; color: #fff; font-size: 14px; font-weight: 700; transition: all 0.3s;}
header .header_util a{ border-radius: 40px; position: relative; padding: 14px 20px; background: #fff; line-height: 100%; transition: all 0.3s;}
header.header_hov .header_util a{background: #004F50;}
header .header_util a span{font-size: 18px; color: #9E8B82; font-weight: 300; transition: all 0.3s;}
header.header_hov .header_util a span{color: #fff;}
header .header_util a span strong{font-weight: bold; font-size: 24px;}

header .inner > .menu_box .menu ul.dep01{display: flex;}
header .inner > .menu_box .menu ul.dep01 > li{position: relative; width: 100px; height: 90px; display: flex; align-items: center; justify-content: center; padding: 0 30px; box-sizing: content-box;}
header .inner > .menu_box .menu ul.dep01 > li::after{content: ""; position: absolute; bottom: -4px; left: 0; right: 0; margin: auto; width: 8px; height: 8px; border-radius: 8px; background: #035e60; opacity: 0; transition: all 0.3s;}
header .inner > .menu_box .menu ul.dep01 > li:hover::after{opacity: 1;}
header .inner > .menu_box .menu ul.dep01 > li > a{font-size: 18px; font-weight: 300; color: #fff;}
header.header_hov .inner > .menu_box .menu ul.dep01 > li > a{color: #222;}
header .inner > .menu_box .menu ul.dep02{position: absolute; top: 90px; width: 100%; height: 300px; display: flex; flex-direction: column; align-items: center; gap: 25px; padding-top: 20px; opacity: 0; visibility: hidden; transition: all 0.3s;}
header.header_hov .inner > .menu_box .menu ul.dep02{opacity: 1; visibility: visible;}
header .inner > .menu_box .menu ul.dep02 > li{text-align: center;}
header .inner > .menu_box .menu ul.dep02 > li > a{font-size: 16px; font-weight: 300; color: #565656; white-space: nowrap; transition: all 0.3s;}
header .inner > .menu_box .menu ul.dep02 > li > a:hover{color: #035e60; font-weight: 700;}

header .inner > .menu_box .header_ad{position: absolute; right: 73px; top: 156px; pointer-events: none; opacity: 0; transition: all 0.3s;}
header.header_hov .inner > .menu_box .header_ad{opacity: 1;}

@media screen and (max-width: 1620px) {
    header .header_util a:hover{width: 40px;}
}
@media screen and (max-width: 1560px){
    header .inner > .menu_box .menu ul.dep01 > li{padding: 0 15px;}
}
@media screen and (max-width: 1400px) {
    header .inner > .menu_box .menu ul.dep01 > li{padding: 0;}
}
@media screen and (max-width: 1250px){
    header .inner > .menu_box .menu ul.dep01 > li > a{font-size: 16px;}
    header .inner > .menu_box .menu ul.dep02{gap: 20px;}
    header .inner > .menu_box .menu ul.dep02 > li > a{font-size: 14px;}
    header .inner > .menu_box .header_ad{right: 15px; top: 180px;}
}
@media screen and (max-width: 1200px){
    header .inner{padding: 0 40px;}
}
@media screen and (max-width: 1075px){
    header .header_util .open{display: none;}
}

/* 헤더 스크롤 */
header.scrollUp{transform: translateY(0); transition: all 0.8s;}
header.scrollDown{transform: translateY(-100%); transition: all 0.5s;}

/* 헤더 블랙모드 */
header.bk .logo a img{content: url('/resources/img/common/header_logo_bk.svg');}
header.bk .header_util .open{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4);}
header.bk .inner > .menu_box .menu ul.dep01 > li > a{color: #222;}
header.bk .header_util a{background: #004F50;}
header.bk .header_util a span{color: #fff;}
header.bk .open_btn span{background: #004F50;}

/* 햄버거 버튼 */
header .open_btn{width: 40px; height: 40px; align-items: center; justify-content: center; position: relative; display: none; cursor: pointer; border: 0;}
header .open_btn span{width: 20px; height: 1px; background: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; transition: all 0.3s;}
header.white .open_btn span{background: #fff;}
header .open_btn span:nth-child(1){transform: translateY(4px);}
header .open_btn span:nth-child(2){transform: translateY(-4px);}



/* 햄버거 버튼 오픈 */
header.on .open_btn span:nth-child(1){transform: translateY(0px) rotate(45deg);}
header.on .open_btn span:nth-child(2){transform: translateY(0px) rotate(-45deg);}
header.on .logo a img{content: url('/resources/img/common/header_logo.svg');}
header.on .open_btn span{background: #fff;}

/* 헤더 모바일 */
header + .mo_menu{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 101; background: #015152; transform: translateX(100%); transition: all 0.5s; display: none; padding: 130px 30px 0;}
header + .mo_menu .depth0{display: flex; flex-direction: column; gap: 20px;}
header + .mo_menu .depth0 > li > a{font-size: 30px; font-weight: 100; color: #fff; line-height: 34px;}
header + .mo_menu .depth1{display: none;}

@media screen and (max-width: 1024px) {
    header .menu_box,
    header .header_util .open{display: none;}
    header + .mo_menu{display: block;}
    header + .mo_menu .dep_scroll{overflow-x: scroll; margin-top: 20px; height: 26px;}
    header + .mo_menu .dep_scroll::-webkit-scrollbar{display: none;}
    /* header + .mo_menu .depth0 > li{height: 40px; overflow: hidden; transition: all 0.3s;}
    header + .mo_menu .depth0 > li.on{height: 75px;} */
    header + .mo_menu .depth0 > li.on > a{font-weight: 500;}
    header + .mo_menu .depth1{display: none; margin-top: 10px;}
    header + .mo_menu .depth1 li{margin-bottom: 10px; padding-left: 10px;}
    header + .mo_menu .depth1 a{font-size: 24px; color: #fff; font-weight: 400; position: relative; margin-bottom: 10px;}
    /* header + .mo_menu .depth1 a::after{content: ""; position: absolute; top: 0; bottom: 0; right: -10px; margin: auto; width: 2px; height: 20px; background: #fff; opacity: 0.3;}
    header + .mo_menu .depth1 li:last-child a::after{display: none;} */


    header .inner{height: 40px; padding: 20px 30px; box-sizing: content-box;}
    header .open_btn{display: block;}
    header .header_util{gap: 6px;}
    header .header_util a{display: none;}

    header.on + .mo_menu{transform: translateX(0);}
    header.on .header_util a{opacity: 0; visibility: hidden;}
}
@media screen and (max-width: 760px) {
  .fx_btn{display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100;}
  .fx_btn ul{display: grid; grid-template-columns: repeat(3, 1fr); background: #015152;}
  .fx_btn ul li{border-right: 1px solid #216C6D;}
  .fx_btn ul li:last-child{border: 0;}
  .fx_btn ul li h3{font-size: 24px; color: #fff; font-weight: bold; line-height: 100%; white-space: nowrap;}
  .fx_btn ul li p{font-size: 16px; color: #fff; font-weight: bold; line-height: 100%; white-space: nowrap;}
  .fx_btn ul li a{padding: 10px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; font-size: 16px; color: #fff; font-weight: bold; width: 100%; height: 100%; line-height: 100%; white-space: nowrap;}
}
@media screen and (max-width: 600px){
    header + .mo_menu .depth0{gap: 35px;}
    header + .mo_menu .depth0 > li > a {font-size: 24px; line-height: 26px;}
}
@media screen and (max-width: 450px) {

}


/*********************************************
    풋터
*********************************************/

.footer_container {
  height: 383px;
  color: #fff;
  background: #000;
  z-index: 99;
  position: relative;
  text-align:center;
}
.footer_container .footer_inner {
  padding-top:66px;
}
.footer_container .btnTop {
  position: absolute;
  right: 52px;
  top: 48px;
  width: 20px;
  padding-top: 45px;
  height: 0;
  overflow: hidden;
  background: url("/resources/img/common/btn_top01.png") 0 0 no-repeat;
  background-size:100% 100%;;
}
.footer_container .logo {
  display: block; width:191px; padding-top: 25px; height: 0; overflow: hidden; background:url('../img/common/logo_xi02.png') 0 0 no-repeat; background-size:100% 100%;; margin:0 auto;
}
.footer_container .contBox {
  margin-top:24px;
  line-height:1.8;
  font-size:13px;
}
.footer_container .contBox ul {
  display: flex;
  justify-content:center;
}
.footer_container .contBox li {
}
.footer_container .contBox li ~ li {
  margin-left: 15px;
}
.footer_container .noticeBox {
  margin-top: 11px;
  color:rgba(255,255,255,0.7);
  font-size:13px;
  font-weight: 300;
  line-height:1.8;
}
.footer_container .copyright {
  margin-top: 22px;
  font-size:12px;
  font-weight: 500;
}
.footer_container .subBox {
  position:absolute;
  right: 104px;
  bottom:69px;
  text-align:right;
}
.footer_container .subBox .info {
  font-size:15px;
  color:rgba(255,255,255,0.5);
}
.footer_container .subBox .info .total {
  display: block;
  font-weight: 700;;
}
.footer_container .subBox .info .total span {
  font-weight: 300;;
}
.footer_container .subBox .info .type {
  display: block;
}
.footer_container .subBox .contact {
  display: block;
  margin-top: 9px;;
  font-size:16px;
  font-weight: 700;;
}
.footer_container .subBox .contact .tel {
  font-size:22px;;
}
.footer_container .subBox .btnTerm {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:175px;
  height:34px;
  background:rgba(216,217,213,0.2);
  color:rgba(255,255,255,0.7);
  font-size:13px;;
  margin-top: 41px;;
}
.footer_container .snsBox {
  margin-top: 20px;
}
.footer_container .snsBox ul {
  display: flex;
  justify-content: center;
  gap:10px
}

/*
	1023 이하 - MOBILE
*/
@media (max-width: 1023px) {
  .footer_container {
    height: 650px;
  }
  .footer_container .footer_inner {
    padding:123px 24px 0;
  }
  .footer_container .btnTop {
    right: auto;
    left:50%;
    margin-left:-10px;
    top: 43px;
    padding-top:40px;
    background-image: url("/resources/img/common/btn_top01.png");;
  }
  .footer_container .logo {
    background-image:url('../img/common/logo_xi02_m.png');
  }
  .footer_container .contBox {
    margin-top:33px;
  }
  .footer_container .contBox ul {
  }
  .footer_container .contBox li {
  }
  .footer_container .contBox li ~ li {
    margin-left: 8px;
  }
  .footer_container .contBox ul.full {
    display: block;
  }
  .footer_container .noticeBox {
    word-break: keep-all;
    font-size:12px;
  }
  .footer_container .copyright {
    margin-top: 13px;
  }
  .footer_container .subBox {
    position:static;
    text-align:center;
    margin-top: 23px;
  }
  .footer_container .subBox .info {
  }
  .footer_container .subBox .info .total {
  }
  .footer_container .subBox .info .total span {
  }
  .footer_container .subBox .info .type {
  }
  .footer_container .subBox .contact {
  }
  .footer_container .subBox .contact .tel {
  }
  .footer_container .subBox .btnTerm {
    margin-top: 21px;
  }



}

@media (max-width: 760px){
  .footer_container{padding-bottom: 70px; box-sizing: content-box;}
}