/* 2025 common.css */
@charset "utf-8";
@import url(../css/font.css);

[lang="ko"] {word-break: break-all;}
* {margin: 0; padding: 0; box-sizing: border-box; font: inherit; color: inherit; flex-shrink: 0; outline: none;}
html,
body {font-size: 16px; color: #222; height: 100%;}
html,
body,
button,
input,
select,
table,
textarea {font-family: "Pretendard", sans-serif; !important;}
h1,
h2,
h3,
h4,
h5,
h6 {font-size: inherit; line-height: inherit;}
ul,
ol,
dl,
menu,
li {list-style: none;}
a,
a:active,
a:hover {text-decoration: none;}
button {background-color: transparent; border: none;}
blockquote,
q {quotes: none;}
:after,
:before {box-sizing: inherit;}
img,
picture,
video,
canvas,
svg {max-width: 100%;}
fieldset,
img {border: 0;}
iframe {overflow: hidden; margin: 0; border: 0; padding: 0; vertical-align: top;}
address,
em,
i {font-style: normal;}
textarea {-webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: transparent; border: 0; word-wrap: break-word;}
table {border-collapse: collapse; border-spacing: 0;}
td,
th {padding: 0;}
input,
select,
textarea {vertical-align: middle; box-sizing: border-box; border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
input[type="text"]::-ms-clear {display: none;}
.blind {display: none; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden;}
.inner {position: relative; width: 90%; max-width: 1600px; margin: 0 auto;}
.inner[data-layout="lg"] {max-width: 1800px;}
#wrap {padding-top: 100px;}
@media screen and (max-width: 1200px){
  html,
  body {font-size: 14px;}
}/* lg */

@media screen and (max-width: 1024px){
  html,
  body {font-size: 13px;}
}/* md */
@media screen and (max-width: 767px){
  html,
  body {font-size: 12px;}
}/* sm */

/* main header___newHeader.html */
#header {position: fixed; width: 100%; left: 0; top: 0; z-index: 100; transform: translateZ(0); backface-visibility: hidden; will-change: transform;}
#header >.inner {display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: unset; height: 100px; margin: 0 auto;}
#header .logo {display: block; width: 72px; height: 33px; background:url(../images/logo_white.png) no-repeat center/100% auto;}
#header .logo a {display: block; width: 100%; height: 100%;}
#header .btn_menu {width: 32px; height: 32px;  background:url(../images/btn_menu.png) no-repeat center/100% auto;}
#header .btn_menu:hover {scale: 1.2;}
#header.scroll .btn_menu {background:url(../images/black_btn_menu.png)  no-repeat center/100% auto;}
#header.scroll .logo {background:url(../images/logo_black.png) no-repeat center/100% auto;}
#header.open .btn_menu {background:url(../images/btn_menu_close.png) no-repeat center/100% auto;}
#header.open .logo {background:url(../images/logo_white.png) no-repeat center/100% auto;}

/*서브페이지 header___header.html*/
#header.sub .btn_menu {background:url(../images/black_btn_menu.png)  no-repeat center/100% auto;}
#header.sub .logo {background:url(../images/logo_black.png) no-repeat center/100% auto;}
#header.sub.scroll{border-bottom: solid 1px #e9e9e9; background: rgba(255,255,255,0.8);}
#header.sub.open .btn_menu {background:url(../images/btn_menu_close.png) no-repeat center/100% auto;}
#header.sub.open .logo {background:url(../images/logo_white.png) no-repeat center/100% auto;}
#header.sub.open .sub_logo2{display: none;}
#header.sub .sub_right{display: flex; justify-content: space-between; gap: 3vw; align-items: end;}
#header.sub .sub_logo2 a.clab{display:block; height:26px; transition:all 0.6s; width:84px; background:url(../images/clab_logo.png) no-repeat top center;}
#header.sub .sub_logo2 a.clab:hover{background-position:bottom center;}

.gnb {display:table; width:100%; height:100%; position:fixed; left: 0; top:-200%; background-color:#071f1c; transition:all .3s; z-index: 99;}
.gnb.open {top:0;}
.gnb .inner{display: flex; align-items: center; height: 100%; justify-content: space-between;}
.gnb .list>ul{display: inline-flex; flex-direction: column; gap: 1.5rem;}
.gnb .list>ul li {text-align:left; border-bottom: 1px solid #4e4e4e; padding-bottom: 1.5rem;}
.gnb .list>ul li a {display:inline-block; font-size: 4rem; line-height:100%; color:#fff; font-weight:800; letter-spacing: -0.08rem;}
.gnb .list>ul li:hover a {color:#2ad7c5;}


.gnb .info>ul{height: 600px; display: inline-flex; flex-direction: column; justify-content: space-between;}
.gnb .info>ul li{text-align: right; color: #fff;}
.gnb .info .tit_wrap{position: relative;}
.gnb .info .title{font-size: 3rem; font-weight: 800; line-height: 100%; letter-spacing: -0.06rem;}
.gnb .info .remark{display: flex; padding: 1.25rem 1.75rem; justify-content: center; align-items: center; gap: 0.25rem; flex-shrink: 0; border-radius: 517px; background: linear-gradient(90deg, rgba(42, 215, 197, 0.30) 0%, rgba(0, 177, 159, 0.30) 100%); backdrop-filter: blur(5px);
font-size: 1.25rem; font-weight: 700; line-height: 100%; letter-spacing: -0.025rem; position: absolute; top: -49px; right: -4px;}
.gnb .info .txt_wrap,
.gnb .info .adr{display: flex; flex-direction: column;}
.gnb .info .txt_wrap{gap: 2.25rem;}
.gnb .info .adr{gap: 0.75rem; color: #9f9f9f; font-size: 1rem; font-weight: 500; line-height: 140%; letter-spacing: -0.02rem;}
.gnb .btn_wrap{padding: 0.938rem 1.75rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.10); background: radial-gradient(68.93% 55.98% at 50% 122.61%, rgba(38, 212, 194, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%), #242424; backdrop-filter: blur(30px);}
.gnb .dwl{width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 4.375rem;}
.gnb .dwl>p{color: #dadada; font-size: 1.25rem; font-weight: 700; line-height: 140%; letter-spacing: -0.025rem;}
.gnb .btn_dwl{display: inline-flex; flex-direction: column; justify-content: center; align-items: center;}
.gnb .btn_dwl a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; gap: 0.625rem;}
.gnb .btn_dwl i{background: url(../images/gnb_dwl.svg) no-repeat center/100% auto; display: block; width: 27px; height: 27px;}
.gnb .btn_dwl p{text-align: center; color: #fff; font-size: 0.75rem; line-height: 140%; letter-spacing: -0.025rem; font-weight: 700;}
.gnb .btn_wrap:hover{border: 1px solid rgba(0, 141, 127, 0.10); background: radial-gradient(30.09% 145.28% at 50% 116.94%, #49E8D7 0%, #00C2AE 100%); backdrop-filter: blur(30px);}
.gnb .btn_wrap:hover .dwl>p,
.gnb .btn_wrap:hover .btn_dwl p{color: #333;}
.gnb .btn_wrap:hover .btn_dwl i{background: url(../images/gnb_dwl_black.svg) no-repeat center/100% auto;}

@media screen and (max-width:767px) {
  #header >.inner {height: 70px;}
  #header .logo{width: 50px; height: 25px;}
  #header .btn_menu{width: 20px; height: 20px;}

  #header.sub .sub_logo2 a.clab{width: 68px; height: 21px; background: url(../images/clab_logo.png) no-repeat top center/100% auto;}

  .gnb .inner{flex-direction: column; justify-content: flex-start; padding: 6.25rem 0 1.875rem; gap: 2.083rem;}
  .gnb .list{width: 100%; margin-top: 50px;}
  .gnb .list>ul{align-items: stretch; width: 100%; gap: 1.333rem;}
  .gnb .list>ul li{padding-bottom: 1.333rem;}
  .gnb .list>ul li a{font-size: 2.667rem;}

  .gnb .info{width: 100%;}
  .gnb .info>ul{height: auto; display: unset;}
  .gnb .info .tit_wrap,
  .gnb .info .adr{display: none;}
  .gnb .dwl>p{font-size: 1.667rem;}
  .gnb .btn_dwl i{width: 23px; height: 23px;}
  .gnb .btn_dwl p{font-size: 0.833rem;}
}

/* floating banner */
.floating{width: 158px; height: 158px; border-radius: 50%; border: 1px solid #2ad7c5; position: fixed; bottom: 0; right: 0; z-index: 2; margin: 0 5rem 5rem 0; display: flex; justify-content: center; align-items: center; background: url(../images/floating_cw.svg) no-repeat center; transition: opacity 0.3s ease;}
.rotate_txt{width: 134px; height: 120px; animation: rotate 6s linear infinite; transform-origin: 50% 50%;}
@keyframes rotate{
  100% {
    transform: rotate(360deg);
  }
}
.floating.hidden {opacity: 0; visibility: hidden;}

@media screen and (max-width:767px){
  .floating{display: none;}
}

/* pagination */
.pagination {position: fixed; left: 0; top: 50%; margin-left: 5rem; transform: translateY(-50%); z-index: 2;}
.pagination a:not(:last-child) {margin-bottom: 0.625rem;}
.pagination a {display: block; width: 30px; height: 30px; position: relative; background-color: transparent;}
.pagination a::before{content: ""; display: block; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; position: absolute; left: 12px; top: 10px;}
.pagination a.active::after{content: ""; display: block; width: 18px; height: 18px; background-color: transparent; border: 1px solid #fff; position: absolute; top: 4px; left: 6px; border-radius: 50%;}

.pagination.pin a::before{background-color: #333;}
.pagination.pin a::after{border-color: #333;}
@media screen and (max-width: 1200px){
  .pagination {margin-left: 4rem;}
}/* lg */
@media screen and (max-width: 1024px){
  .pagination {margin-left: 3rem;}
}/* md */
@media screen and (max-width: 767px){
  .pagination {margin-right: 2rem; right: 0; bottom: 35px; margin-left: 0; left: unset; top: unset; transform: unset;}
}/* sm */




/* popup */
#popup_all > div {display:table; width:100%; height:100%; position:fixed; left:0px; top:0px; z-index:150;}
#popup_all .bg {width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:#000; opacity:.6;}
#popup_all .out_layer_box {display:table-cell; text-align:center; vertical-align:middle;}
#popup_all .in_layer_box {display:inline-block; position:relative; z-index:10;}

#popup_privacy .in_layer_box {width:800px; height:800px; background-color:#fff; text-align:left; overflow:auto;}
#popup_privacy .title {padding:30px 0 30px 60px; font-size:30px; font-weight:700; color:#fff; background-color:#494949;}
#popup_privacy .cont {padding:30px 60px;}
#popup_privacy .cont .tit_01 {margin-bottom:30px; font-size:24px; color:#494949; font-weight:700;}
#popup_privacy .cont .txt_01 {margin-bottom:30px; padding-bottom:30px; border-bottom:solid 1px #f1f1f1; font-size:15px; line-height:28px; letter-spacing:-0.05em; color:#777;}
#popup_privacy .cont .txt_02 {font-size:15px; line-height:28px; letter-spacing:-0.05em; color:#777;}
#popup_privacy .cont .tit_02 {margin-bottom:15px; font-size:16px; color:#494949; font-weight:700; letter-spacing:-0.02em;}
#popup_privacy .cont .list_01 {margin-bottom:20px; font-size:15px; line-height:32px;}
#popup_privacy .cont .list_01 span {display:inline-block; margin-right:10px; font-size:14px; font-family:'proxima-soft'; font-weight:500;}
#popup_privacy .btn_close {display:inline-block; width:34px; height:34px; position:absolute; right:40px; top:36px; background:url(../../images/common/btn_close_01.png) 0 0 no-repeat;}

@media screen and (max-width:850px){
  #popup_privacy .in_layer_box {width:310px; height:415px;}
  #popup_privacy .title {padding:15px 0 15px 30px; font-size:15px;}
  #popup_privacy .cont {padding:15px 30px;}
  #popup_privacy .cont .tit_01 {margin-bottom:15px; font-size:12px;}
  #popup_privacy .cont .txt_01 {margin-bottom:15px; padding-bottom:15px; font-size:7px; line-height:14px;}
  #popup_privacy .cont .txt_02 {font-size:7px; line-height:14px;}
  #popup_privacy .cont .tit_02 {margin-bottom:7px; font-size:8px;}
  #popup_privacy .cont .list_01 {margin-bottom:10px; font-size:7px; line-height:16px;}
  #popup_privacy .cont .list_01 span {margin-right:5px; font-size:7px;}
  #popup_privacy .btn_close {width:17px; height:17px; right:20px; top:18px; background-size:17px auto;}
}

/*2025 개인정보 수집 이용 약관 팝업*/
#popup_terms{justify-content: center; align-items: center;}
#popup_terms .in_layer_box{background-color: #fff; overflow-y: auto; text-align: left; max-width: 750px; word-break: keep-all;}
#popup_terms .title {padding:30px 0 0 60px; font-size:30px; font-weight:700;}
#popup_terms .cont {padding:30px 60px;}
#popup_terms .guide,
#popup_terms [class^="txt_"],
#popup_terms table td{font-size:15px; line-height:28px; letter-spacing:-0.05em; color:#777;}
#popup_terms [class^="txt_"]{margin-top: 5px;}
#popup_terms [class^="tit_"],
#popup_terms table th{font-size:16px; color:#494949; font-weight:700;}
#popup_terms .terms_list{margin-top: 30px; display: flex; flex-direction: column; gap: 20px;}
#popup_terms table{margin-top: 30px; border: 1px solid #494949; text-align: center;}
#popup_terms table th,
#popup_terms table td{padding: 10px; border: 1px solid #494949;}
#popup_terms thead{background-color: #e4e4e4;}
#popup_terms .btn_wrap{display: flex; justify-content: center; margin-bottom: 30px;}
#popup_terms .btn_close {background-color: #494949; padding: 8px 20px; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 5px;}

@media screen and (max-width:850px){
  #popup_terms .in_layer_box{max-width: 310px; max-height: 450px;}
  #popup_terms .title{padding: 30px 30px 0; font-size:18px;}
  #popup_terms .cont{padding:15px 30px;}
  #popup_terms .guide,
  #popup_terms [class^="txt_"] {margin-top: 3px; font-size: 12px; line-height: 140%;}
  #popup_terms [class^="tit_"] {font-size:14px;}
  #popup_terms .terms_list{margin-top: 15px; gap: 10px;}
  #popup_terms table{margin-top: 15px;}
  #popup_terms table th,
  #popup_terms table td{padding: 5px; font-size:12px;}
  #popup_terms .btn_wrap{margin-bottom: 15px;}
  #popup_terms .btn_close {padding: 6px 12px; font-size: 14px;}
}

/*팝업 오픈시 바디스크롤 잠금*/
body.pop_open{overflow: hidden; /*ios 터치스크롤잠금*/ position: fixed; width: 100%;}

/*공통 alert*/
#popup_all .emailPop .in_layer_box{background-color: #fff; width: 350px; height: 175px; border-radius: 15px; padding: 35px;}
#popup_all .emailPop .cont_wrapper{width: 100%; height: 100%; display: inline-flex; justify-content: center; align-items: center;}
#popup_all .emailPop .cont_wrap{display: inline-flex; flex-direction: column; gap: 25px; justify-content: space-between;}
#popup_all .emailPop .cont p{color: #333; font-weight: 600; font-size: 17px; line-height: 130%;}
#popup_all .emailPop .btn_wrap{display: flex; justify-content: center;}
#popup_all .emailPop .btn_close {background-color: #494949; padding: 6px 15px; display: flex; justify-content: center; align-items: center; color: #fff; border-radius: 5px; font-size: 14px; font-weight: 500;}

@media screen and (max-width: 850px){
  #popup_all .emailPop .in_layer_box{width: 255px; height: 145px; padding: 20px;}
  #popup_all .emailPop .cont_wrap{gap: 20px;}
  #popup_all .emailPop .cont p{font-size: 14px;}
  #popup_all .emailPop .btn_close{font-size: 12px; padding: 6px 13px;}
}