/*********************************/
/* 공통 */
/*********************************/

:root {
  --inner: 83%;
  --inner2: 1580;
  --point: #2350A5;
  --base-ratio: 0.75;
  --base-size: 1600;
  --base-percent: 100vw;
}

.blind { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; clip: rect(0 0 0 0); } 

main .inner {margin: 0 auto; width: var(--inner);}
footer .inner {margin: 0 auto; width: var(--inner);}

@media (max-width: 1280px) {
  :root {
    --inner: 95%;
  }
}

.inner {width: 83%; margin:0 auto;}

@media (max-width: 1280px) {
  .inner {width: 95%;}
}


/* 텍스트 효과 */
main section.scroll .txtbox h2 span,
main section.scroll .txtbox p span {transform: translateY(0); }
main section.scroll .txtbox a.morebtn {opacity: 1;}

/*********************************/
/* 헤더 */
/*********************************/

.adm_btn {display: block; position: absolute; top: 50%; right: 0%; transform: translateY(-50%); padding: 5px 15px; background: #003B88; border-radius: 25px; color: #fff; font-size: 14px;}

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


header .inner {margin: 0 auto; width: var(--inner);}
#hd {position:fixed; z-index: 1; width: 100%; height: 74px; background-color: #fff;}
#hd .inner {margin:0 auto; width: var(--inner);}
div#hd_wrapper {display: flex; align-items: center; height: 100%;}
#hd .hd_group {display: flex; align-items: center;}

#hd #logo {margin-right: 260px;}
#hd #gnb_1dul {display: flex;}
#hd #gnb_1dul > li {position:relative; width: 150px; text-align: center;}
#hd #gnb_1dul > li > a {display: block; height: 100%; padding: 27px 0; font-size: 20px; font-weight: bold;}
#hd .gnb_2dul {position:absolute; width: 120%; text-align: left;}

#hd .gnb_2dul .gnb_2dli a {display: block; padding: 1em;}
#hd .gnb_2dul .gnb_2dli a:hover {color: var(--point);}

#hd_wrapper .gnb_2dul { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; margin-top: 20px; transition: 0.5s; background-color: #fffffff2; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem; box-shadow: 0 2px 14px 7px #0000000f;} 
#hd_wrapper .gnb_1dli:hover .gnb_2dul {visibility: visible;opacity: 1;margin-top: 0px;} 

.three.col {display: none; margin: 1% 0 1% 1.6%;}
.hamburger .line{ width: 30px; height: 3px; background-color: #333; display: block; margin: 6px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.hamburger:hover{cursor: pointer;}

#hamburger-1.is-active .line:nth-child(2){opacity: 0;}
#hamburger-1.is-active .line:nth-child(1){-webkit-transform: translateY(11px) rotate(45deg); -ms-transform: translateY(11px) rotate(45deg); -o-transform: translateY(11px) rotate(45deg); transform: translateY(11px) rotate(45deg);}
#hamburger-1.is-active .line:nth-child(3){-webkit-transform: translateY(-11px) rotate(-45deg); -ms-transform: translateY(-11px) rotate(-45deg); -o-transform: translateY(-11px) rotate(-45deg); transform: translateY(-11px) rotate(-45deg);}

@media screen and (max-width:1400px) {
  #hd .hd_group {justify-content: space-between;}
  #hd #logo {margin-right: 0;}
}

@media screen and (max-width:1280px) {
  .three.col {display: block;}
  .gnb_wrap {display: none;}
}

#gnb_all {position: fixed; top: 0px; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 1000; display: none; padding: 0 4.6%; overflow: auto;}
#gnb_all .gnb_all_hd {position:relative; height: 90px; display: flex; justify-content: space-between; align-items: center; } 
/* #gnb_all .gnb_all_wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 80vh; }  */
/* #gnb_all .gnb_al_ul {display: flex; width: 100%; }  */
#gnb_all .gnb_al_li {border-bottom:1px solid #ccc;} 
#gnb_all .gnb_al_li.active svg {transform: rotate(180deg);}
#gnb_all .gnb_al_li:hover .gnb_al_a { color: var(--point); transition: color 0.3s;  /* 추가 */} 
/* #gnb_all .gnb_al_ul > li+li { border-left: 1px solid #ccc; }  */
#gnb_all .gnb_al_a { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; font-size: clamp(25px, calc( 36 / var(--inner2) * 100vw ), 36px); font-family: 'Pretendard-Bold'; align-items: center; font-weight: 700;} 
/* #gnb_all .gnb_al_a svg { display: none; }  */
#gnb_all .gnb_al_sub_a { display: block; padding: 10px; color: #999; font-size: clamp(20px, calc( 26 / var(--inner2) * 100vw ), 26px); font-weight: 700; line-height: 1.2; transition: color 0.3s;  /* 추가 */} 
#gnb_all .gnb_al_sub_a:hover { color: #000; } 

#gnb_all .m_depth2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
#gnb_all.on {display: block;}

#gnb_all .gnb_al_li.active .gnb_al_a {
  color: var(--point);
}

.btn_close {cursor: pointer;}
.btn_close span { width: 30px; height: 3px; background-color: #333; display: block; margin: 8px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.btn_close span:nth-child(1){-webkit-transform: translateY(4px) rotate(45deg); -ms-transform: translateY(4px) rotate(45deg); -o-transform: translateY(4px) rotate(45deg); transform: translateY(4px) rotate(45deg);}
.btn_close span:nth-child(2){-webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg);}

/* @media screen and (max-width:768px) {
  #gnb_all .gnb_al_ul {flex-wrap: wrap; justify-content: center; row-gap: 40px;}
  #gnb_all .gnb_al_li {width: 33%; height: auto;}
  #gnb_all .gnb_al_ul > li+li {border: none;}
  #gnb_all .gnb_al_sub_a {padding: 5px;}
} */

/*********************************/
/* 메인-vis */
/*********************************/
/* main {padding-top: 74px;} */
main .vis {height: calc(100vh - 80px);}
main .vis .swiper {width: 100%; height: 100%;}
main .vis .vis_swiper .swiper-slide {position:relative;}
/* main .vis .vis_swiper .swiper-slide:nth-child(1) {background: url(../img/bg_vis01.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide:nth-child(2) {background: url(../img/bg_vis02.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide:nth-child(3) {background: url(../img/bg_vis03.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide:nth-child(4) {background: url(../img/bg_vis04.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide:nth-child(5) {background: url(../img/bg_vis05.png) no-repeat center;} */

main .vis .vis_swiper .swiper-slide .inner {margin:0 auto; width: var(--inner);}
main .vis .vis_swiper .swiper-slide .txtbox {position:absolute; bottom: 80px; padding-right: 20px;}
main .vis .vis_swiper .swiper-slide .txtbox h2 {margin-bottom: 25px; font-size: clamp(30px, calc(58 / var(--inner2) * 100vw),58px); font-weight: bold; line-height: 1.3; color: #fff; font-family: 'Pretendard-Bold';}
main .vis .vis_swiper .swiper-slide .txtbox p {font-size: clamp(14px, calc(16 / var(--inner2) * 100vw), 16px); line-height: 1.5; color: #fff;}

main .vis .swiper-slide-active .txtbox h2 span,
main .vis .swiper-slide-active .txtbox p span { transform: translateY(0); } 

main .vis .vis_swiper .swiper-slide.swiper-slide_01 {background: url(../img/bg_vis01.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide.swiper-slide_02 {background: url(../img/bg_vis02.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide.swiper-slide_03 {background: url(../img/bg_vis03.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide.swiper-slide_04 {background: url(../img/bg_vis04.png) no-repeat center;}
main .vis .vis_swiper .swiper-slide.swiper-slide_05 {background: url(../img/bg_vis05.png) no-repeat center;}

main .vis .vis_swiper .swiper-slide.swiper-slide_01 .txtbox h2 {font-size: clamp(30px, calc(73 / var(--inner2) * 100vw),73px);}
main .vis .vis_swiper .swiper-slide.swiper-slide_01 .txtbox p {font-size: clamp(14px, calc(32 / var(--inner2) * 100vw),32px);}

main .txtbox h2, main .txtbox p {overflow: hidden;} 
main .txtbox h2 span, 
main .txtbox p span { display: block; transform: translateY(100%); transition: 0.5s; transition-delay: 0.5s; } 
main .txtbox p span { transition-delay: 0.7s; } 

main .txtbox h2 br.mo,
main .txtbox p br.mo {display: none;}

@media screen and (max-width:768px) 
{
  main .vis {height: 600px;}
  main .txtbox h2 br.mo {display: block;}
  main .vis .vis_swiper .swiper-slide.swiper-slide_01 {background: url(../img/bg_vis01_m.png) no-repeat center bottom; background-size: cover;}
  main .vis .vis_swiper .swiper-slide.swiper-slide_02 {background: url(../img/bg_vis02_m.png) no-repeat center; background-size: cover;}
  main .vis .vis_swiper .swiper-slide.swiper-slide_03 {background: url(../img/bg_vis03_m.png) no-repeat center; background-size: cover;}
  main .vis .vis_swiper .swiper-slide.swiper-slide_04 {background: url(../img/bg_vis04_m.png) no-repeat center; background-size: cover;}
  main .vis .vis_swiper .swiper-slide.swiper-slide_05 {background: url(../img/bg_vis05_m.png) no-repeat center; background-size: cover;}
  main .vis .vis_swiper .swiper-slide .txtbox {bottom: 50px;}
  main .txtbox p span br {display: none;}

}

@media screen and (max-width:375px) 
{
  main .txtbox p br.mo {display: block;}
}

/*********************************/
/* 메인-business */
/*********************************/
main .business {padding: 60px 0; background-color: #F4F4F4;}


main .business .txtbox {text-align: center;}
main .business .txtbox h2 {margin-bottom: 25px; font-size: clamp(24px, calc(38 / var(--inner2) * 100vw), 38px); font-weight: 700;}
main .business .txtbox p {margin-bottom: 60px; font-size: clamp(18px, calc(22 / var(--inner2) * 100vw), 22px); color: #999;}

main .business .list {display: flex; gap:20px; justify-content: center; flex-wrap: wrap; opacity: 0; transition:  opacity 0.5s 0.7s; }
main .business .list .item {width: 23%; border-radius: 50px; background-color: #fff; text-align: center; transition: transform ease 0.5s;  padding:20px 0; color: #000; font-size: clamp(18px, calc(22 / var(--inner2) * 100vw), 22px);}
main .business .list .item a {display: block;}
main .business .list .item .iconbox {margin: 0 auto; margin-bottom: 10px; width: 170px; aspect-ratio: 1/1;}
main .business .list .item .iconbox img {width: 100%; height: 100%; object-fit: contain;}
main .business .list .item  p {font-size: clamp(16px, calc(22 / var(--inner2) * 100vw), 22px); font-weight: bold;}


main .business .list .item:hover {transform: translateY(-10px);}

main .business.scroll .list {opacity: 1;}

@media screen and (max-width:1400px) 
{
    main .business .list .item {width: 31.333%;}
}

@media screen and (max-width:840px) 
{
    main .business .list .item {width: 48%;}
}

@media screen and (max-width:768px) 
{
    main .business .list .item {width: 45%; padding: 30px 0;}
    main .business .list .item .iconbox {width: 85px; margin-bottom: 25px;}
}

@media screen and (max-width:375px) 
{
  main .business .list {gap: 10px;}
  main .business .list .item .iconbox {width: 65px; margin-bottom: 15px;}
}

/*********************************/
/* 메인-openin3d */
/*********************************/
main .video_bg {position: relative; width: 100%; height: 100vh; overflow: hidden;}
/* main .video_bg video {position: absolute; top: 50%; left: 50%; max-width: 100%; height: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: -1; filter: brightness(0.6);} */
main .video_bg video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.6);
}

main .openin3d .inner {height: 100%;}
main .openin3d .flexbox {display: flex;  justify-content: center;   align-items: center; height: 100%;}
main .openin3d .txtbox {color: #fff; text-align: center;}

main .openin3d .txtbox h2 {margin-bottom: 25px; font-size: clamp(24px, calc(38 / var(--inner2) * 100vw), 38px);}
main .openin3d .txtbox p {margin-bottom: 34px; font-size: clamp(18px, calc(22 / var(--inner2) * 100vw), 22px);}
main .openin3d .txtbox a.morebtn {display: block; padding: 16px 23px; border-radius: 25px; background-color: #fff; font-size: 14px; opacity: 0; transition: opacity 0.5s 1s, background-color 0.5s;;}

main .openin3d .txtbox a.morebtn:hover {background-color: #2350A5; color: #fff;}

/*********************************/
/* 메인-case */
/*********************************/
main .case {padding: 60px 0;}
main .case02 {margin-top: 60px;}
main .case .txtbox h2 {margin-bottom: 43px; font-size: clamp(24px, calc(38 / var(--inner2) * 100vw), 38px); line-height: 1.5;}
main .case .list {opacity: 0; transition: opacity 0.5s 0.7s;}
main .case.scroll .list {opacity: 1;} 

main .case .list .item {display: grid; grid-template-columns: repeat(8, 8fr); gap: 30px; }
main .case .list .item .item_box .imgbox {text-align: center;}
main .case .list .item .item_box .imgbox img {max-width: 100%;}
main .case .list .item .item_box p {margin-top: 20px; font-size: clamp(15px, calc(22 / var(--inner2) * 100vw), 22px); font-weight: 700; text-align: center; word-break: break-all; white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}

@media screen and (max-width:1280px) 
{
  main .case .list .item {grid-template-columns: repeat(4, 4fr);}
}

@media screen and (max-width:768px) 
{
  main .case .list .item {grid-template-columns: repeat(2, 2fr);}
}

/* main .case .list {display: flex; gap: 20px; opacity: 0; transition: opacity 0.5s 0.7s;}
main .case .list .item:first-of-type {width: 540px; height: 540px; background: url(../img/bg_case.jpg) no-repeat center; background-size: cover; border-radius: 50px; overflow: hidden;}
main .case .list .item:first-of-type a {display: flex; align-items: end; width: 100%; height: 100%; padding: 0 0 45px 50px;}
main .case .list .item:first-of-type .subtxtbox {color: #fff;}
main .case .list .item:first-of-type .subtxtbox span {display: block; margin-bottom: 10px; opacity: 0.8; font-size: 16px;}
main .case .list .item:first-of-type .subtxtbox h3 {font-size: clamp(20px, calc(28 / var(--inner2) * 100vw), 28px);}

main .case .list .item:last-of-type {display: flex; align-items: center; justify-content: center; gap: 15px; padding: 160px 40px; background-color: #F4F4F4; border-radius: 50px;}
main .case .list .item:last-of-type .item_box {text-align: center;}
main .case .list .item:last-of-type .item_box .imgbox img {width: 100%; height: 100%; object-fit: cover;}
main .case .list .item:last-of-type p {margin-top: 30px; font-size: clamp(16px, calc(22 / var(--inner2) * 100vw), 22px); font-weight: bold;}

main .case.scroll .list {opacity: 1;} 


@media screen and (max-width:1580px) 
{
  main .case .list {flex-direction: column; gap: 30px;}
  main .case .list .item:first-of-type {width: 100%; height: 300px;}
}

@media screen and (max-width:1280px) 
{
  main .case .list .item:last-of-type {flex-wrap: wrap; gap: 30px; padding: 100px 40px;}
}

@media screen and (max-width:768px) 
{
  main .case .list .item:last-of-type {gap: 30px; padding: 40px;}
  main .case .list .item:last-of-type .item_box {width: 47%;}
  main .case .list .item:last-of-type p {margin-top: 20px;}
}

@media screen and (max-width:500px) 
{
  main .case .list .item:last-of-type {flex-direction: column;}
  main .case .list .item:last-of-type .item_box {width: 80%;}
} */

/*********************************/
/* 메인-customer */
/*********************************/
main .customer {background: url(../img/bg_notice.jpg) no-repeat; background-size: cover; padding: 60px 0;}
main .customer .txtbox h2 {margin-bottom: 80px; font-size: clamp(24px, calc(48 / var(--inner2) * 100vw), 48px);}

main .customer .list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; opacity: 0; transition: all 0.5s 0.7s;}

main .customer .list .item.bg {min-width: 0; padding:40px 40px 45px; background-color: #fff; border-radius: 50px;}
main .customer .list .item.bg .subtxtbox {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}
main .customer .list .item.bg .subtxtbox h3 { font-size: clamp(20px, calc(28 / var(--inner2) * 100vw), 28px);}
main .customer .list .item.bg .subtxtbox p { font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px);}

main .customer .list .board_list li {border-bottom: 1px solid #ccc; font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px); }
main .customer .list .board_list li:last-child {border-bottom: none;}
main .customer .list .board_list li a {display: block; padding: 20px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; color: #333;}
main .customer .list .board_list li a:hover {color: var(--point);}

main .customer .list .item.grid {display: grid; gap: 20px;}
main .customer .list .item .item_box {border-radius: 50px; }
main .customer .list .item .item_box a {display: block; height: 100%; color: #fff;}
main .customer .list .item .item_box:first-of-type {background:url(../img/bg_download_new.png) no-repeat right; background-size: cover;}
main .customer .list .item .item_box:last-of-type {background:url(../img/bg_callcenter.jpg) no-repeat right; background-size: cover;}

main .customer .list .item .item_box .subtxtbox {padding: 40px 0 0 40px;}
main .customer .list .item .item_box .subtxtbox h3 {margin-bottom: 20px; font-size: clamp(20px, calc(28 / var(--inner2) * 100vw), 28px); line-height: 1.4;}
main .customer .list .item .item_box .subtxtbox p {opacity: 0.8; font-size: clamp(14px, calc(16 / var(--inner2) * 100vw), 16px); line-height: 1.4;}

main .customer.scroll .list {opacity: 1;}

@media screen and (max-width:1400px) 
{
  main .customer .list {grid-template-columns: repeat(2,2fr);}
  main .customer .list .item.grid {grid-column: 1 / -1; grid-template-columns: repeat(2,2fr);}
  main .customer .list .item .item_box .subtxtbox {padding:40px 0 80px 40px;}
}

@media screen and (max-width:768px) 
{
  main .customer .list {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width:640px) 
{
  main .customer .list .item.grid {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width:425px) 
{
  main .customer .list .board_list li a {white-space: pre-wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.4;}
}


@media screen and (max-width:768px) 
{
    /* main .business,
    main .case,
    main .customer {padding: 100px 0 100px;} */
    main .openin3d {height: 85vh;}
}

/*********************************/
/* 메인-footer */
/*********************************/
footer .banner {padding: 35px 0;}
footer .banner .inner  {display: flex; align-items: center; gap: 30px;}
/* footer .banner .inner .swiper {display: flex; align-items: center; gap: 30px;} */
footer .banner .inner .swiper a {display: block; text-align: center;}
footer .control_bar {display: flex; gap: 5px;}
footer .control_bar > div {display: flex; justify-content: center; align-items: center; width: 28px !important; height: 28px !important; text-align: center; line-height: 28px; border: 1px solid #ddd;}
footer .control_bar > div.pause {cursor: pointer;}
footer .control_bar > div:hover {background-color: #2350A5; border: none;}
footer .control_bar > div:hover svg path {fill: #fff;}
footer .control_bar svg path {fill: #555;}
footer .control_bar .swiper-button-next svg, 
footer .control_bar .swiper-button-prev svg {width: 8px;}

footer .play_btn {display: none;}

footer .pause.on .pause_btn {display: none;}
footer .pause.on .play_btn {display: block;}

footer .banner .swiper-button-next, 
footer .banner .swiper-button-prev {position:  relative !important; left: 0 !important; right: 0 !important; width: 10px; height: auto; margin-top: 0;}
footer .banner .swiper-button-next:after, 
footer .banner .swiper-button-prev:after {display: none;}


footer .bot {padding: 35px 0 40px; background-color: #fff; color: #666; border-top: 1px solid #ccc;}
footer .bot {color: #fff;}
footer .bot .inner .flex {display: flex; gap: 60px; border-bottom: 1px solid #ccc;}
footer .bot .bot_top {display: flex; justify-content: space-between;}
footer .bot .bot_top .policy {display: flex; gap: 40px;}
footer .bot .bot_top .policy button {background-color: transparent; border: none; font-size: clamp(12px, calc(16 / var(--inner2) * 100vw), 16px); color: #fff; cursor: pointer;}
footer .bot .bot_bot .company_info { padding-bottom: 30px;}
footer .bot .bot_bot .item {display: flex; align-items: center; margin-bottom: 18px;}
footer .bot .bot_bot .item:last-of-type {margin-bottom: 0;}
footer .bot .bot_bot .item p {width: 90px; flex-shrink: 0; color: #333; font-weight: 700; font-size: 16px;}
footer .bot .bot_bot address {color: #666; font-style: normal;}
footer .bot .bot_bot address li {font-size: 14px; line-height: 1.5;}
footer .bot .bot_bot address li a { color: #666;}

footer .bot .copy {margin-top: 20px; font-size: 15px; color: #999; line-height: 1.5;}


@media screen and (max-width:1500px) 
{
  footer .bot .bot_bot .company_info {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width:1024px) 
{
  footer .bot .inner .flex {flex-direction: column; gap: 20px;}
}

@media screen and (max-width:768px) 
{
  footer .bot .bot_top {flex-direction: column; gap: 20px;}
}

@media screen and (max-width:425px) 
{
  footer .bot .bot_bot .item {flex-direction: column; align-items: baseline; gap: 10px;}
  footer .bot .bot_bot .item p {width: auto;}
}

.termsPopupBg { display: none; width: 100%; height: 100%; background: #00000085; position: fixed; top: 0; left: 0; z-index: 1003; backdrop-filter: blur(15px); } 
.termsPopupBg h2 { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center; padding: 30px 0 20px; } 
.termsPopup.on { height: inherit; max-height: calc(100% - 150px); opacity: 1; z-index: 30; } 
.termsPopup { width: 90%; height: 0; padding: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: top 0.3s ease, opacity 0.3s ease; color: #fff; z-index: 10; } 
.termsPopupBg .close { position: relative; width: 18px; height: 18px; border: none; text-indent: -9999px; position: absolute; top: 30px; right: 30px; z-index: 100; background: none; cursor: pointer;} 
.termsPopupBg .close::after,.termsPopupBg .close::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #fff; transform: translateY(-50%) rotate(45deg); } 
.termsPopupBg .close::before { transform: translateY(-50%) rotate(-45deg); } 
.termsPopup > .terms-wrap >.terms-box { height: 40vh; overflow-y: auto; margin-top: 20px; } 
.termsPopup > .terms-wrap >.terms-box::-webkit-scrollbar { width: 10px; border-radius: 10px; } 
.termsPopup > .terms-wrap >.terms-box::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); /*스크롤바 뒷 배경 색상*/ } 
.termsPopup > .terms-wrap >.terms-box::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.473); /* 스크롤바 색상 */
 border-radius: 10px; } 
.termsPopup .terms-wrap .terms-tit { font-size: clamp(30px, calc( 60 / var(--inner2) * 100vw ), 60px); font-weight: 700; text-align: center; } 
.termsPopup .terms-wrap .terms-cont { margin-top: 30px; } 
.termsInfoPopup .terms-cont-01 {background: #00000059;text-align: center;padding: 30px 10px;border-radius: 50px;}

.termsPopup .terms-wrap .terms-cont h6 { font-weight: bold; margin-bottom: 10px; font-size: clamp(14px, calc( 20 / var(--inner2) * 100vw ), 20px); line-height: 1.5;} 
.termsPopup .terms-wrap .terms-cont.terms-cont-01 h6 { margin: 0; } 
.termsPopup .terms-wrap .terms-cont .flexRight { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 50px; } 
.termsPopup .terms-wrap .terms-cont .flexRight span a { text-decoration: underline; color: blue; } 
.termsInfoPopup .terms-cont-01 { background: #00000059; text-align: center; padding: 30px 10px; border-radius: 50px; } 
.termsPopup .terms-wrap .terms-cont .terms-tit-sub,
.terms-ul li {font-size: clamp(13px, calc( 20 / var(--inner2) * 100vw ), 14px);}
.terms-cont .terms-tit-sub {line-height: 1.5;}
.terms-ul li {line-height: 1.5;}

.termsPopup a {color: #fff;}

@media screen and (max-width:768px) 
{
  .termsPopup {padding: 0px;}
}