@charset "utf-8";

/*
 * ----------------------------------------
 * 레이아웃 스타일 시트
 * ----------------------------------------
 * 1.0 Quick Menu
 * 2.0 Header
 * 3.0 Container
 * 4.0 Footer
 * 5.0 Sitemap
 * ----------------------------------------
 */
 
body {opacity: 0; transition: opacity .5s ease;}
body.on {opacity: 1;}

#wrap {scroll-behavior: smooth;}

.dcaf-select .select-option {display: none;}

.dcaf-select-01 {display: flex; align-items: center; position: relative; min-width: 207px; height: 31px; border: 1px solid #4A4A4A; border-radius: 5px; padding: 7px 10px 7px 13px;}
.dcaf-select-01 > a {display: block; width: 100%; font-size: 15px; color: #FFF; background: url(../images/svg/icon-select.svg) right center no-repeat; padding-right: 16px;}
.dcaf-select-01 .select-option {position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); width: 100%; border: 1px solid #4A4A4A; border-radius: 5px; background: #1E1E1E; padding: 9px 17px 7px 16px;}
.dcaf-select-01 .select-option > ul {display: flex; gap: 12px; flex-direction: column; max-height: 110px; overflow-y: scroll;}
.dcaf-select-01 .select-option > ul::-webkit-scrollbar {width: 3px;}
.dcaf-select-01 .select-option > ul::-webkit-scrollbar-thumb {background: #FFF;}
.dcaf-select-01 .select-option > ul::-webkit-scrollbar-track {background: #656565;}
.dcaf-select-01 .select-option > ul li {display: flex; align-items: center;}
.dcaf-select-01 .select-option > ul li a {font-size: 15px; color: #878787; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: color .3s;}
.dcaf-select-01 .select-option > ul li a:hover {color: #1ACF89;}

.dcaf-select-02 {display: block; position: relative; width: auto; min-width: 223px; height: 25px;}
.dcaf-select-02 > a {display: flex; align-items: center; font-size: 20px; font-weight: 500; color: #FFF; background: url(../images/svg/icon-select-arrow.svg) right center no-repeat; padding-right: 50px;}
.dcaf-select-02 .select-option {position: absolute; top: 50px; left: -25px; width: 106%; border: 1px solid #1ACF89; background: #FFF; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); z-index: 100; padding: 3px 24px;}
.dcaf-select-02 .select-option li {display: flex; align-items: center; height: 35px;}
.dcaf-select-02 .select-option li a {display: block; color: #000;}
.dcaf-select-02 .select-option li a:hover {font-weight: 500; color: #12A06A;}

/* ----- 1.0 : Quick Menu ----- */
.quick-menu {position: fixed; top: 0; left: 0; width: 100%;}
.quick-menu a {display: grid; place-items: center; width: 100%; height: 0; font-size: 18px; font-weight: 400; color: #FFF; text-align: center; background: #1ACF89; overflow: hidden;}
.quick-menu a:focus {height: 25px;}

/* ----- 2.0 : Header ----- */
#header {display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 164px; background: #FFF; transition: box-shadow .3s; z-index: 1000;}
#header.scroll {box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);}
#header .hd-inner {display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1920px; padding: 0 30px 0 35px; margin: 0 auto;}

#header .hd-inner.hd-top {justify-content: flex-end; padding-top: 12px;}
#header .hd-inner.hd-bottom {position: relative;}

#header .hd-tool {display: flex; gap: 40px;}
#header .hd-tool li {display: flex; align-items: center; height: 30px;}
#header .hd-tool .tool-login a {display: flex; align-items: center; position: relative; transition: color .3s; padding-left: 29px;}
#header .hd-tool .tool-login a:hover {font-weight: 500; color: #38B283;}
#header .hd-tool .tool-login a:after {display: block; content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/svg/icon-profile.svg) center no-repeat; transition: all .3s;}
#header .hd-tool .tool-login a:hover:after {background-image: url(../images/svg/icon-profile-on.svg);}
#header .hd-tool .tool-search {position: relative;}
#header .hd-tool .tool-search > button {display: none; width: 24px; height: 24px; font-size: 0; background: url(../images/svg/icon-search.svg) center no-repeat;}
#header .hd-tool .tool-search .search-box {width: 250px;}
#header .hd-tool .tool-search .search-box input[type="text"] {width: 100%; height: 30px; font-size: 14px; color: #333; border: 1px solid #D2D2D2; border-radius: 100px; padding: 5px 10px;}
#header .hd-tool .tool-search .search-box button {font-size: 0;}
#header .hd-tool .tool-search .search-box .btn-search {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 18px; aspect-ratio: 1 / 1; background: url(../images/svg/icon-search-02.svg) center no-repeat; background-size: contain;}
#header .hd-tool .tool-search .search-box .btn-close {position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 10px; aspect-ratio: 1 / 1; background: url(../images/svg/icon-close.svg) center no-repeat;}

#header .dcaf-ci {width: 240px;}

#header .gnb-back {position: absolute; top: 164px; left: 50%; transform: translateX(-50%); width: 100%; height: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(15px); z-index: 10; transition: height .5s; overflow: hidden;}
#header .gnb-back:after {display: block; content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #1ACF89; opacity: 0; transition: opacity .5s .2s;}
#header .gnb-back:before {display: block; content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #1ACF89; opacity: 0; transition: opacity .5s .2s;}
#header.on .gnb-back {height: 449px;}
#header.on .gnb-back:after {opacity: 1;}
#header.on .gnb-back:before {opacity: 1;}
#header.on .gnb-back img {opacity: 1; transition: opacity .5s .5s;}

#header .gnb {display: flex; gap: 117px;}
#header .gnb > li {position: relative;}
#header .gnb > li.active > a {color: #11AC70;}
#header .gnb > li.on.active > a {color: #000;}
#header .gnb > li > a {position: relative; font-size: 24px; font-weight: 500;}
#header .gnb > li > a:after {display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 216px; height: 49px; border-radius: 5px; background: rgba(56, 178, 131, 0.30); opacity: 0; transition: opacity .4s; z-index: 0;}
#header .gnb > li.on > a:after {opacity: 1;}
#header .gnb > li > .depth2 {display: none; gap: 20px; flex-direction: column; position: absolute; top: 81px; left: 50%; transform: translateX(-50%); width: 216px; height: 448px; border-right: 1px solid #FFF; z-index: 10; overflow: hidden; opacity: 0; padding: 25px 0;}
#header .gnb > li > .depth2.on {display: flex; animation: ani-opacity 1s ease forwards .3s;}
#header .gnb > li > .depth2:after {display: block; content: ""; position: absolute; top: 0; right: 1px; width: calc(100% - 4px); height: 100%; background: #C4E8DA; opacity: 0; transition: opacity .4s; z-index: -1;}
#header .gnb > li:nth-child(1) > .depth2:before {display: block; content: ""; position: absolute; top: 0; left: 1px; width: 1px; height: 100%; background: #FFF;}
#header .gnb > li.on > .depth2:after {opacity: 1;}
#header .gnb > li > .depth2 > li {display: grid; place-items: center; height: 30px;}
#header .gnb > li > .depth2 > li > a {display: block; position: relative; max-width: 90%; font-size: 18px; color: #2D2D2D; text-align: center; letter-spacing: -1px;}
#header .gnb > li.on > .depth2 > li > a {font-weight: 500; transition: color .3s; z-index: 0;}
#header .gnb > li.on > .depth2 > li > a:hover {color: #00995E;}
#header .gnb > li.on > .depth2 > li > a:after {display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 50px; height: 50px; border-radius: 50%; background: #FFF; transition: transform .35s; z-index: -1;}
#header .gnb > li.on > .depth2 > li > a:hover:after {transform: translate(-50%, -50%) scale(1);}

#header .hd-inner.hd-bottom .sitemap {display: block; width: 24px; height: 24px; background: url(../images/svg/icon-sitemap.svg) center no-repeat; transition: background-image .3s, transform .5s ease-out;}
#header .hd-inner.hd-bottom .sitemap:hover {transform: rotate(90deg); /*background-image: url(../images/svg/icon-sitemap-on.svg);*/}

/* ----- 2.0 : Header(main) ----- */
#header.main-header {display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 164px; background: #FFF; transition: box-shadow .3s; z-index: 1000;}
#header.main-header.scroll {box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);}
#header.main-header .hd-inner {display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1920px; padding: 0 30px 0 35px; margin: 0 auto;}

#header.main-header .hd-inner.hd-top {justify-content: center; background:#085122; max-width:initial; height:50px; align-items:center; margin-bottom:20px; padding-top: 0;}
#header.main-header .hd-inner.hd-bottom {position: relative;}

#header.main-header .hd-tool {display: flex; width:100%; padding: 0 calc((100% - 1400px) / 2);  margin: 0 auto; justify-content: space-between; color:#fff; align-items: center; }
#header.main-header .hd-tool a {font-size: 15px; white-space: nowrap;}

#header.main-header .dcaf-ci {width: 240px;}

#header.main-header .gnb-back {position: absolute; top: 164px; left: 50%; transform: translateX(-50%); width: 100%; height: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(15px); z-index: 10; transition: height .5s; overflow: hidden;}
#header.main-header .gnb-back:after {display: block; content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #1ACF89; opacity: 0; transition: opacity .5s .2s;}
#header.main-header .gnb-back:before {display: block; content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #1ACF89; opacity: 0; transition: opacity .5s .2s;}
#header.main-header.on .gnb-back {height: 449px;}
#header.main-header.on .gnb-back:after {opacity: 1;}
#header.main-header.on .gnb-back:before {opacity: 1;}
#header.main-header.on .gnb-back img {opacity: 1; transition: opacity .5s .5s;}

#header.main-header .gnb {display: flex; gap: 117px;}
#header.main-header .gnb > li {position: relative;}
#header.main-header .gnb > li.active > a {color: #11AC70;}
#header.main-header .gnb > li.on.active > a {color: #000;}
#header.main-header .gnb > li > a {position: relative; font-size: 24px; font-weight: 500;}
#header.main-header .gnb > li > a:after {display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 216px; height: 49px; border-radius: 5px; background: rgba(56, 178, 131, 0.30); opacity: 0; transition: opacity .4s; z-index: 0;}
#header.main-header .gnb > li.on > a:after {opacity: 1;}
#header.main-header .gnb > li > .depth2 {display: none; gap: 20px; flex-direction: column; position: absolute; top: 53px; left: 50%; transform: translateX(-50%); width: 216px; height: 448px; border-right: 1px solid #FFF; z-index: 10; overflow: hidden; opacity: 0; padding: 25px 0;}
#header.main-header .gnb > li > .depth2.on {display: flex; animation: ani-opacity 1s ease forwards .3s;}
#header.main-header .gnb > li > .depth2:after {display: block; content: ""; position: absolute; top: 0; right: 1px; width: calc(100% - 4px); height: 100%; background: #C4E8DA; opacity: 0; transition: opacity .4s; z-index: -1;}
#header.main-header .gnb > li:nth-child(1) > .depth2:before {display: block; content: ""; position: absolute; top: 0; left: 1px; width: 1px; height: 100%; background: #FFF;}
#header.main-header .gnb > li.on > .depth2:after {opacity: 1;}
#header.main-header .gnb > li > .depth2 > li {display: grid; place-items: center; height: 30px;}
#header.main-header .gnb > li > .depth2 > li > a {display: block; position: relative; max-width: 90%; font-size: 18px; color: #2D2D2D; text-align: center; letter-spacing: -1px;}
#header.main-header .gnb > li.on > .depth2 > li > a {font-weight: 500; transition: color .3s; z-index: 0;}
#header.main-header .gnb > li.on > .depth2 > li > a:hover {color: #00995E;}
#header.main-header .gnb > li.on > .depth2 > li > a:after {display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 50px; height: 50px; border-radius: 50%; background: #FFF; transition: transform .35s; z-index: -1;}
#header.main-header .gnb > li.on > .depth2 > li > a:hover:after {transform: translate(-50%, -50%) scale(1);}

#header.main-header .hd-inner.hd-bottom .sitemap {display: block; width: 24px; height: 24px; background: url(../images/svg/icon-sitemap.svg) center no-repeat; transition: background-image .3s, transform .5s ease-out;}
#header.main-header .hd-inner.hd-bottom .sitemap:hover {transform: rotate(90deg); /*background-image: url(../images/svg/icon-sitemap-on.svg);*/}

/* ----- 3.0 : Container ----- */
#container {min-height: calc(100vh - 286px); padding-top: 164px;}

/* Right Menu */
#right-menu {position: fixed; top: 60%; right: 20px; transform: translateY(-50%); transition: height .3s; z-index: 10;}
#right-menu a {display: block; position: relative; width: 60px; height: 60px; border-radius: 60px; transition: all .5s ease-out;}
#right-menu a img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#right-menu a p {display: block; width: 0; font-size: 18px; font-weight: 500; color: #FFF; line-height: 60px; overflow: hidden; opacity: 0; transition: all .5s .2s;}
#right-menu ul {display: flex; gap: 10px; flex-direction: column; align-items: flex-end;}
#right-menu ul li a {background: #C4C4C4;}

#right-menu .top {background: #085122 url(../images/svg/icon-top.svg) center no-repeat;}

#right-menu .sns {background: url(../images/svg/icon-quick-sns.svg) center 12px no-repeat, #fff; border: 1px solid #333; background-size: 18px; position: relative; transition: margin-bottom 0.3s ease; transition-delay: 0s; z-index: 1;}
#right-menu .sns span {display: block; text-align: center; margin-top: 33px; font-size: 13px; font-weight: 500;}
#right-menu .sns + ul li {position: absolute; right: 0; top: 0; opacity: 0; pointer-events: none; transition: top 0.3s ease, right 0.3s ease, opacity 0.3s ease;}
#right-menu .sns + ul li a {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);}
#right-menu .sns + ul li:nth-child(1) {transition-delay: 0.2s;}
#right-menu .sns + ul li:nth-child(2) {transition-delay: 0.4s;}
#right-menu .sns + ul li:nth-child(3) {transition-delay: 0.6s;}
#right-menu .sns + ul li:nth-child(4) {transition-delay: 0.8s;}
#right-menu .sns.clicked {margin-bottom: 75px;}
#right-menu .sns.clicked + ul li {opacity: 1; pointer-events: auto;}
#right-menu .sns.clicked + ul li:nth-child(1) {top: -70px; right: 0;}
#right-menu .sns.clicked + ul li:nth-child(2) {top: -32px; right: 66px;}
#right-menu .sns.clicked + ul li:nth-child(3) {top: 40px; right: 62px;}
#right-menu .sns.clicked + ul li:nth-child(4) {top: 70px; right: 0;}
#right-menu .sns + ul li:nth-child(1) a {background: url(../images/svg/icon-quick-facebook.svg) no-repeat center, #0866FF;}
#right-menu .sns + ul li:nth-child(2) a {background: url(../images/svg/icon-quick-blog.svg) no-repeat center 17px, #03C75A;}
#right-menu .sns + ul li:nth-child(3) a {background: url(../images/svg/icon-quick-instagram.svg) no-repeat center, #000;}
#right-menu .sns + ul li:nth-child(4) a {background: url(../images/svg/icon-quick-youtube.svg) no-repeat center, #FF0033;}
#right-menu .sns:not(.clicked) + ul li:nth-child(1),
#right-menu .sns:not(.clicked) + ul li:nth-child(2),
#right-menu .sns:not(.clicked) + ul li:nth-child(3),
#right-menu .sns:not(.clicked) + ul li:nth-child(4) {transition-delay: 0.3s;}
#right-menu .sns:not(.clicked) {transition-delay: 0.7s;}

#right-menu .map {background: #f5f5f5 url(../images/svg/icon-quick-map.svg) center no-repeat;box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20); transition: .3s;}

/* ----- 4.0 : Footer ----- */
.ft-inner {display: flex; justify-content: space-between; width: 100%; padding: 0 calc((100% - 1400px) / 2);}
.ft-top {align-items: center; height: 90px; background: #1A1A1A;}
.ft-bottom {background: #1E1E1E;}
.bt-br-01 {display: none;}

.ft-top ul {display: flex; gap: 79px;}
.ft-top ul li a {color: #FFF;}
.ft-top ul li a.green {color: #2ED8AB;}
.ft-top .web-hidden {display: none;}
.ft-top > a {display: grid; place-items: center; width: 115px; height: 31px; font-size: 18px; color: #FFF; border: 1px solid #2ED8AB; transition: all .3s;}
.ft-top > a:hover {color: #000; background: #2ED8AB;}

.ft-bottom .dcaf-info {display: flex; gap: 16px; flex-direction: column; padding: 46px 0;}
.ft-bottom .dcaf-info p {color: #FFF;}
.ft-bottom .another-dcaf {display: flex; flex-direction: column; justify-content: space-between; padding: 29px 0 46px 0;}
.ft-bottom .another-dcaf > ul {display: flex;}
.ft-bottom .another-dcaf > ul:nth-child(1) {gap: 10px;}
.ft-bottom .another-dcaf > ul:nth-child(2) {gap: 39px; justify-content: flex-end;}

/* ----- 5.0 : Sitemap ----- */
#sitemap-wrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); overflow-x: hidden; overflow-y: scroll; z-index: 1000; padding: 0 calc((100% - 1320px) / 2);}
#sitemap-wrap .sitemap-top {display: flex; justify-content: space-between; align-items: flex-end; position: sticky; top: 0; width: calc(100% + 600px); padding: 37px 70px 0 35px; margin-left: -300px;}
#sitemap-wrap .sitemap-top img {width: 240px;}
#sitemap-wrap .btn-close {display: block; width: 33px; height: 33px; background: url(../images/svg/icon-close.svg) center no-repeat; background-size: contain;}
#sitemap-wrap > ul {display: grid; grid-template-columns: repeat(3, 1fr); min-height: 50%; margin-top: -105px;}
#sitemap-wrap > ul > li {display: flex; gap: 47px; flex-direction: column; align-items: flex-start; border-left: 1px solid #8AE8C3; padding: 150px 0 0 34px;}
#sitemap-wrap > ul > li:nth-child(-n+3) {padding-top: 200px;}
#sitemap-wrap > ul > li:nth-last-child(-n+3) {padding-top: 120px; padding-bottom: 100px;}
#sitemap-wrap > ul > li > p {position: relative; font-size: 38px; font-weight: 500;}
#sitemap-wrap > ul > li > p:after {display: block; content: ""; position: absolute; top: -45px; left: 50%; transform: translate(-50%, 10px); width: 18px; height: 18px; background: #085122; border-radius: 50%; opacity: 0;}
#sitemap-wrap > ul > li.on > p:after {animation: ani-sitemap-dot .8s ease forwards .2s;}
#sitemap-wrap .sitemap-depth2 {display: flex; gap: 20px; flex-direction: column; align-items: flex-start;}
#sitemap-wrap .sitemap-depth2 > li {display: flex; flex-direction: column; align-items: flex-start;}
#sitemap-wrap .sitemap-depth2 > li > div {position: relative;}
#sitemap-wrap .sitemap-depth2 > li > div a {font-size: 20px;}
#sitemap-wrap .sitemap-depth2 > li > div a:hover,
#sitemap-wrap .sitemap-depth2 > li.on > div a {font-weight: 500; color: #38B283;}
#sitemap-wrap .sitemap-depth2 > li > div .btn-sitemap-depth {position: absolute; top: 4px; right: -32px; width: 17px; height: 14px; background: url(../images/svg/icon-sitemap-menu-off.svg) right center no-repeat;}
#sitemap-wrap .sitemap-depth2 > li.on > div .btn-sitemap-depth {background-image: url(../images/svg/icon-sitemap-menu-on.svg);}
#sitemap-wrap .sitemap-depth3 {display: none; padding: 27px 0 7px 0;}
#sitemap-wrap .sitemap-depth3 > li {display: block; margin-bottom: 20px; position: relative; padding-left: 20px;}
#sitemap-wrap .sitemap-depth3 > li:last-child {margin-bottom: 0;}
#sitemap-wrap .sitemap-depth3 > li:after {display: block; content: ""; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); width: 5px; height: 5px; background: #000; border-radius: 50%;}
#sitemap-wrap .sitemap-depth3 > li.on:after {background: #38B283;}
#sitemap-wrap .sitemap-depth3 > li > a {font-size: 18px;}
#sitemap-wrap .sitemap-depth3 > li > a:hover {font-weight: 500; color: #38B283;}