header {position: absolute; top: 0; left: 0; width: 100%; height: auto; padding: 35px 0 0; box-sizing: border-box; background: transparent; transition: all .3s; z-index: 10; overflow: hidden;}
header.on {background: var(--wt);}
header.sub {background: var(--wt) !important;}
header .header-top {display: flex; align-items: center; justify-content: space-between;}
header .header-top .logo {width: 220px; height: auto; cursor: pointer;}
header .header-top .logo:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 220/78; background: url(./../img/logo.png)no-repeat 50% 50%; background-size: cover;}
header.on .header-top .logo:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 220/78; background: url(./../img/logo2.png)no-repeat 50% 50%; background-size: cover;}
header.sub .header-top .logo:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 220/78; background: url(./../img/logo2.png)no-repeat 50% 50% !important; background-size: cover !important;}

header .header-top .sns_link {display: flex; align-items: center; gap: 8px;}
header .header-top .sns_link a {width: 27px; height: auto; border-radius: 100%;}
header .header-top .sns_link a:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/blog.png)no-repeat 50% 50%; background-size: cover;}
header.on .header-top .sns_link a:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/blog2.png)no-repeat 50% 50%; background-size: cover;}
header.sub .header-top .sns_link a:before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/blog2.png)no-repeat 50% 50% !important; background-size: cover !important;}
header .header-top .sns_link a:nth-child(2):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/talk.png)no-repeat 50% 50%; background-size: cover;}
header.on .header-top .sns_link a:nth-child(2):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/talk2.png)no-repeat 50% 50%; background-size: cover;}
header.sub .header-top .sns_link a:nth-child(2):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/talk2.png)no-repeat 50% 50% !important; background-size: cover !important;}
header .header-top .sns_link a:nth-child(3):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/ins.png)no-repeat 50% 50%; background-size: cover;}
header.on .header-top .sns_link a:nth-child(3):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/ins2.png)no-repeat 50% 50%; background-size: cover;}
header.sub .header-top .sns_link a:nth-child(3):before {content: ''; display: block; width: 100%; height: auto; aspect-ratio: 1; background: url(./../img/ins2.png)no-repeat 50% 50% !important; background-size: cover !important;}

header .header-ct {display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto; padding-top: 41px; border-bottom: 1px solid transparent; box-sizing: border-box;}
/* header.on .header-ct {border-color: var(--gray_b7);} */
/* header.sub .header-ct {border-color: var(--gray_b7) !important;} */
header .header-ct nav {}
header .header-ct nav ul {display: flex; align-items: center; gap: 105px;}
header .header-ct nav ul li {}
header .header-ct nav ul li > a {position: relative; display: block; padding-bottom: 27px; font-size: 20px; font-weight: 800; line-height: 1.15; color: var(--wt); transition: all .3s; cursor: context-menu;}
header .header-ct nav ul li > a:before {display: none; position: absolute; bottom: -7px; left: 0; content: ''; width: 100%; height: 4px; background: var(--pr);}
header.sub .header-ct nav ul li.on > a {color: var(--pr) !important;}
header.sub .header-ct nav ul li.on > a:before {display: block;}
header .header-ct nav ul li:hover a {color: var(--pr);}
header.on .header-ct nav ul li a {color: var(--black_01);}
header.sub .header-ct nav ul li a {color: var(--black_01) !important;}

header .header-ct .search-box {position: relative; width: 235px; height: 35px; border-radius: 19px; border: 1px solid transparent; box-sizing: border-box; margin-bottom: 27px; background: rgba(255, 255, 255, 0.29);}
header.on .header-ct .search-box {background: var(--gray_ef);}
header.on .header-ct {position: relative;}
header.on .header-ct::before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; display: block; width: 5000px; height: 1px; background: var(--gray_b7);}
header.sub .header-ct::before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; display: block; width: 5000px; height: 1px; background: var(--gray_b7);}
header.sub .header-ct .search-box {background: var(--gray_ef) !important;}
header .header-ct .search-box input {width: 100%; height: 100%; padding: 0 15px; padding-right: 40px; border-radius: 19px; box-sizing: border-box; font-size: 14px; font-weight: 400; line-height: 1; color: var(--black);}
header .header-ct .search-box .search_btn {position: absolute; top: 50%; right: 12.3px; transform: translateY(-50%); width: 20px; height: auto;}
header .header-ct .search-box .search_btn:before {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 1; background: url(./../img/search_btn.png)no-repeat 50% 50%; background-size: cover;}
header.on .header-ct .search-box .search_btn:before {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 1; background: url(./../img/search_btn2.png)no-repeat 50% 50%; background-size: cover;}
header.sub .header-ct .search-box .search_btn:before {content: ''; display: block; width: 20px; height: auto; aspect-ratio: 1; background: url(./../img/search_btn2.png)no-repeat 50% 50% !important; background-size: cover !important;}

.header-toggle {display: none;}
header .header-bt {display: flex; align-items: flex-start; gap: 113px; padding: 37px 0; box-sizing: border-box;}
header .header-bt .bt_tit {font-size: 25px; font-weight: 800; line-height: 1.12; color: var(--pr); white-space: nowrap;}
header .header-bt .bt_tit span:nth-child(1) {display: block;}
header .header-bt .bt_tit span {display: none;}

header .header-bt .sub_link {display: block; width: 100%;}
header .header-bt .sub_link ul {display: none; flex-flow: column; gap: 13.8px;}
header .header-bt .sub_link ul:nth-child(1) {display: flex;}
header .header-bt .sub_link ul li {width: 291px; height: auto;}
header .header-bt .sub_link ul li a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: auto; padding: 0 7px; padding-left: 0; padding-bottom: 8px; border-bottom: 1px solid var(--black_01); font-size: 18px; font-weight: bold; line-height: 1.17; color: var(--black_01);}
header .header-bt .sub_link ul li a:after {content: ''; display: block; width: 10px; height: auto; aspect-ratio: 1; background: url(./../img/plus.png)no-repeat 50% 50%; background-size: cover;}
header .header-bt .sub_link ul li.active a {border-color: var(--pr); color: var(--pr);}
header .header-bt .sub_link ul li.active a:after {background: url(./../img/plus_2.png)no-repeat 50% 50%; background-size: cover;}
header .header-bt .sub_link ul li a img {}

/* fixed_btn */
.fixed_btn {position: fixed; bottom: 75px; right: 100px; display: flex; flex-flow: column; gap: 15.8px; z-index: 5;}
.fixed_btn a {display: block; width: 56px; height: auto;}
.fixed_btn a.cs_list {animation: heartbeat 1.5s ease-in-out infinite both; width: auto; height: auto; padding: 5px 10px; border-radius: 9px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--wt); white-space: nowrap; text-align: center;}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.fixed_btn a img {width: 100%; height: auto;}

/* dim */
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 4;}