/****************************************
# 로딩d
****************************************/
.loading_con{position:fixed; width:100%; height:100%; z-index: 1000000;}
.loading_con .back{background:rgba(0,0,0,0.15); width:100%; height:100%; position:fixed; left:0; top:0;}
.loading_con .snippet{position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);}
.loading_con .dot-pulse {position: relative; left: -9999px; width: 12px; height: 12px; border-radius: 15px; background-color: #f1516c; color: #f1516c; box-shadow: 9999px 0 0 -5px; animation: dot-pulse 1.5s infinite linear; animation-delay: 0.25s;}
.loading_con .dot-pulse::before, .dot-pulse::after {content: ""; display: inline-block; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 15px; background-color: #f1516c; color: #f1516c;}
.loading_con .dot-pulse::before {box-shadow: 9984px 0 0 -7px; animation: dot-pulse-before 1.5s infinite linear; animation-delay: 0s; left:-5px;}
.loading_con .dot-pulse::after {box-shadow: 10014px 0 0 -7px; animation: dot-pulse-after 1.5s infinite linear; animation-delay: 0.5s; right:-5px;}
@keyframes dot-pulse-before {
    0% {
        box-shadow: 9984px 0 0 -7px;
    }
    30% {
        box-shadow: 9984px 0 0 2px;
    }
    60%, 100% {
        box-shadow: 9984px 0 0 -7px;
    }
}
@keyframes dot-pulse {
    0% {
    box-shadow: 9999px 0 0 -7px;
    }
    30% {
    box-shadow: 9999px 0 0 2px;
    }
    60%, 100% {
    box-shadow: 9999px 0 0 -7px;
    }
}
@keyframes dot-pulse-after {
    0% {
    box-shadow: 10014px 0 0 -7px;
    }
    30% {
    box-shadow: 10014px 0 0 2px;
    }
    60%, 100% {
    box-shadow: 10014px 0 0 -7px;
    }
}

/****************************************
# common
**************************************/
/* style */
.m-br {display:block;}

.blind {position:absolute; left:-9999px; width:1px; height:1px; margin:-1px; font-size:0; line-height:0; clip:rect(0 0 0 0);}
.visib-hidden {visibility:hidden;}
.d-block {display:block !important;}

/* 정렬 */
.d-flex {display:flex;}
.d-flex-wrap {flex-wrap:wrap;}
.d-flex-center {justify-content: center; align-items:center;}
.d-flex-align-center {align-items:center;}
.d-flex-align-end {align-items: end;}
.tal {text-align:left !important;}
.tac {text-align:center !important;}
.tar {text-align:right !important;}

/* margin */
.mgt0 {margin-top:0 !important;}
.mgt3 {margin-top:3px !important;}
.mgt5 {margin-top:5px !important;}
.mgt10 {margin-top:10px !important;}
.mgt15 {margin-top:15px !important;}
.mgt20 {margin-top:20px !important;;}
.mgt25 {margin-top:25px !important;}
.mgt30 {margin-top:30px !important;}
.mgt35 {margin-top:45px !important;;}
.mgt40 {margin-top:40px !important;}
.mgt45 {margin-top:45px !important;}
.mgt50 {margin-top:50px !important;}
.mgt60 {margin-top:60px !important;}
.mgt70 {margin-top:70px !important;;}
.mgt80 {margin-top:80px !important;;}
.mgt-3 {margin-top:-3px !important;}
.mgt-5 {margin-top:-5px !important;}
.mgt-10 {margin-top:-10px !important;}
.mgt-15 {margin-top:-15px !important;}
.mgt-20 {margin-top:-20px !important;}
.mgt-25 {margin-top:-25px !important;}
.mgt-30 {margin-top:-30px !important;}

.mgr0 {margin-right:0 !important;}
.mgr3 {margin-right:3px !important;}
.mgr5 {margin-right:5px !important;}
.mgr10 {margin-right:10px !important;}
.mgr15 {margin-right:15px !important;}
.mgr20 {margin-right:20px !important;}
.mgr25 {margin-right:25px !important;}
.mgr30 {margin-right:30px !important;}
.mgr35 {margin-right:35px !important;}
.mgr40 {margin-right:40px !important;}
.mgr45 {margin-right:45px !important;}
.mgr50 {margin-right:50px !important;}
.mgr60 {margin-right:60px !important;}
.mgr70 {margin-right:70px !important;}
.mgr-3 {margin-right:-3px !important;}
.mgr-5 {margin-right:-5px !important;}
.mgr-10 {margin-right:-10px !important;}
.mgr-15 {margin-right:-15px !important;}
.mgr-20 {margin-right:-20px !important;}
.mgr-25 {margin-right:-25px !important;}
.mgr-30 {margin-right:-30px !important;}

.mgb0 {margin-bottom:0 !important;}
.mgb3 {margin-bottom:3px !important;}
.mgb5 {margin-bottom:5px !important;}
.mgb10 {margin-bottom:10px !important;}
.mgb15 {margin-bottom:15px !important;}
.mgb20 {margin-bottom:20px !important;}
.mgb25 {margin-bottom:25px !important;}
.mgb30 {margin-bottom:30px !important;}
.mgb35 {margin-bottom:35px !important;}
.mgb40 {margin-bottom:40px !important;}
.mgb45 {margin-bottom:45px !important;}
.mgb50 {margin-bottom:50px !important;}
.mgb60 {margin-bottom:60px !important;}
.mgb70 {margin-bottom:70px !important;}
.mgb80 {margin-bottom:80px !important;}
.mgb-3 {margin-bottom:-3px !important;}
.mgb-5 {margin-bottom:-5px !important;}
.mgb-10 {margin-bottom:-10px !important;}
.mgb-15 {margin-bottom:-15px !important;}
.mgb-20 {margin-bottom:-20px !important;}
.mgb-25 {margin-bottom:-25px !important;}
.mgb-30 {margin-bottom:-30px !important;}

.mgl0 {margin-left:0 !important;}
.mgl3 {margin-left:3px !important;}
.mgl5 {margin-left:5px !important;}
.mgl10 {margin-left:10px !important;}
.mgl15 {margin-left:15px !important;}
.mgl20 {margin-left:20px !important;}
.mgl25 {margin-left:25px !important;}
.mgl30 {margin-left:30px !important;}
.mgl35 {margin-left:35px !important;}
.mgl40 {margin-left:40px !important;}
.mgl45 {margin-left:45px !important;}
.mgl50 {margin-left:50px !important;}
.mgl60 {margin-left:60px !important;}
.mgl70 {margin-left:70px !important;}
.mgl-3 {margin-left:-3px !important;}
.mgl-5 {margin-left:-5px !important;}
.mgl-10 {margin-left:-10px !important;}
.mgl-15 {margin-left:-15px !important;}
.mgl-20 {margin-left:-20px !important;}
.mgl-25 {margin-left:-25px !important;}
.mgl-30 {margin-left:-30px !important;}


/* padding */
.pd0  {padding:0px !important;}
.pdt0 {padding-top:0px !important;}
.pdt5 {padding-top:5px !important;}
.pdt10 {padding-top:10px !important;}
.pdt15 {padding-top:15px !important;}
.pdt20 {padding-top:20px !important;}
.pdt25 {padding-top:25px !important;}
.pdt30 {padding-top:30px !important;}
.pdt35 {padding-top:35px !important;}
.pdt40 {padding-top:40px !important;}

.pdr0 {padding-right:0px !important;}
.pdr5 {padding-right:5px !important;}
.pdr10 {padding-right:10px !important;}
.pdr15 {padding-right:15px !important;}
.pdr20 {padding-right:20px !important;}
.pdr25 {padding-right:25px !important;}
.pdr30 {padding-right:30px !important;}
.pdr35 {padding-right:35px !important;}
.pdr40 {padding-right:40px !important;}

.pdb0 {padding-bottom:0px !important;}
.pdb5 {padding-bottom:5px !important;}
.pdb10 {padding-bottom:10px !important;}
.pdb15 {padding-bottom:15px !important;}
.pdb20 {padding-bottom:20px !important;}
.pdb25 {padding-bottom:25px !important;}
.pdb30 {padding-bottom:30px !important;}
.pdb35 {padding-bottom:35px !important;}
.pdb40 {padding-bottom:40px !important;}
.pdb50 {padding-bottom:50px !important;}
.pdb60 {padding-bottom:60px !important;}
.pdb100 {padding-bottom:100px !important;}
.pdb120 {padding-bottom:120px !important;}


/* border */
.rounded-1 {border-radius:3px;}
.rounded-2 {border-radius:6px;}
.rounded-3 {border-radius:12px;}
.rounded-4 {border-radius:16px;}

.split {border-top:8px solid #f0f0f0}

/* font */
.fw-normal {font-weight:normal;}
.fw-bold {font-weight:bold;}
.fw-bolder {font-weight:bolder;}

/* color */
.color-prmy {color:var(--color-main) !important;}
.color-link {color:var(--color-blue) !important;}
.color-point {color:var(--color-blue) !important;}
.color-red {color:var(--color-red) !important;}
.color-blue2 {color:var(--color-blue2) !important;}
.color-black {color:var(--color-black) !important;}
.color-green {color:var(--color-green) !important;}

.bg-color-bray {background-color:var(--color-gray-light) !important;}

.flex {display:flex;}
.flex-1 {flex: 1;}
.flex-center {align-items:center;}
.flex-justify-start {justify-content: flex-start !important;}
.flex-justify-center {justify-content: center !important;}
.flex-justify-end {justify-content:flex-end !important;}
.flex-wrap {flex-wrap: wrap;}


/* layout */
body {background-color:var(--body-color);}
.wrap {max-width:620px; margin:0 auto; background-color:var(--color-white); border-left: 1px solid var(--color-gray-brighter); border-right: 1px solid var(--color-gray-brighter);}
.container {position:relative; padding:25px 0 60px;}
.inner {padding:0 20px;} 

.header-title {margin-bottom:20px;}
.header-title.bottom-space {margin-bottom:40px;}
.h3-title {font-weight:700; font-size:20px;}
.h3-desc {font-weight:400; font-size:16px; margin-top:8px; color:var(--font-color3);}


/* title */
.comm-sect {padding:50px 0 60px;}
.comm-sect + .comm-sect {margin-top:0;}
.comm-sect .sect-title {margin-bottom:30px; font-size:26px; font-weight:700; text-align:center;}
.comm-sect .sect-desc {display:flex; align-items:flex-end; padding-bottom:12px;}
.comm-sect .sect-desc .text {flex:1; font-weight:600; font-size:18px;}
.comm-sect .sect-desc .text > strong {color:var(--color-main); font-weight: 600;}
.comm-sect .sect-desc .btn-arrow-detail {margin-left:auto;}
.comm-sect .btn-more {position:relative; font-size:14px; font-weight:400; color:var(--font-color3);}
.comm-sect .btn-more::after {content:""; display:inline-block; width:7px; height:7px; margin-left:3px; border-top:1px solid var(--font-color3); border-right:1px solid var(--font-color3); transform: rotate(45deg);}

/* tab */
.tabs {display:flex; position:relative; width:100%; margin:0; padding:4px; gap:4px; background-color:var(--color-gray-brighter1); border-radius:14px;}
.tabs li {flex:1; width:auto; padding:0;}
.tabs li a {display:block; margin: 0 auto; text-align: center;}
.tabs li a > span {display:flex; align-items: center; justify-content:center; height:36px; padding:0 8px; text-align:center; font-size:14.5px; font-weight:600; background-color:transparent; color:var(--font-color3); border:0; border-radius:10px;}
.tabs li.active a  > span {background-color:var(--color-white); color:var(--font-color1); box-shadow:0 1px 3px rgba(0, 0, 0, .12);}
.tab-content {display:none;}
.tab-content.active {display:block;}

.tab-menu {position:relative; margin-bottom: 20px;}
.tab-menu .tab-list {display: flex; width: 100%;}
.tab-menu .tab-list li {position: relative; width: 100%; height: 46px;}
.tab-menu .tab-list li::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--color-gray-light);}
.tab-menu .tab-list li a {position: relative; display: table; width: 100%; height: 100%; font-weight: 600; color: var(--font-color3);}
.tab-menu .tab-list li a span {display: table-cell; padding: 0 10px;; text-align: center; vertical-align: middle; font-size: 16px; word-break:break-word;}
.tab-menu .tab-list li.active a::before {content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background-color: var(--color-main);}
.tab-menu .tab-list li.active a span {font-weight: 600; color: var(--color-main);}

.tab-menu.type02 {}
.tab-menu.type02 .tab-list li {height: 42px; background-color: var(--color-gray-brighter1); border-radius: 12px 12px 0 0; overflow: hidden;}
.tab-menu.type02 .tab-list li::before {height: 1px; background-color: var(--color-black);}
.tab-menu.type02 .tab-list li.active a {color: var(--color-black); background-color: var(--color-black); color: var(--color-white);}
.tab-menu.type02 .tab-list li.active a::before {display: none;}
.tab-menu.type02 .tab-list li.active a span {color: var(--color-white);}

.tab-menu .tab-scroll {display:flex; width: 100%; border-bottom:2px solid var(--color-gray-light);}
.tab-menu .tab-scroll.fixed {z-index:9; position:fixed; top:60px; max-width: 620px; background-color:var(--color-white);}
.tab-menu .tab-scroll.fixed .active-line {bottom:-1px;}
.tab-menu .tab-scroll .list {position: relative; width: 100%; height: 56px;}
.tab-menu .tab-scroll .list a {position: relative; display: table; width: 100%; height: 100%; font-weight: 600; color: var(--font-color3);}
.tab-menu .tab-scroll .list a span {display: table-cell; padding: 0 15px;; text-align: center; vertical-align: middle; font-size: 15px; word-break:break-word;}
.tab-menu .tab-scroll .list.active a {color: var(--color-main);}
.tab-menu .tab-scroll .active-line {display:inline-block; position: absolute; left: 0; bottom: 0; width: calc(100% / 4); height: 4px; background-color:var(--color-main);}


.tab-menu .tab-list.tab3 {flex-wrap: wrap;}
.tab-menu .tab-list.tab3 li {width: calc(100% / 3);}

.tab-panel {display: none;}
.tab-panel.active {display: block;}

.tab-panel-scroll {display:block; padding-top:50px;}

.tab-menu-round {margin: 0 auto 30px;}
.tab-menu-round > .tab-list {display:grid; grid-template-columns: repeat(auto-fit, minmax(20%, auto)); width:100%; margin-right:0; padding:5px; background:var(--color-gray-brighter1); border-radius: 10px;}
.tab-menu-round > .tab-list li {display:flex; align-items: center; justify-content:center; border:none; width:100%; height: 100%; box-sizing:border-box; text-align: center; border-radius: 10px;}
.tab-menu-round > .tab-list li::before {display: none;}
.tab-menu-round > .tab-list li + li {margin: 0;}
.tab-menu-round > .tab-list li a {position: relative; width: 100%; height: 100%; padding: 8px 10px; font-weight: 400; font-size:15px; color:var(--font-color2); border-radius: 10px;}
.tab-menu-round > .tab-list li.active a {background: var(--color-white); font-weight: 700; color:var(--color-black); box-shadow:0px 0px 5px 1px rgba(0, 0, 0, 0.05);}


/* form */
.form-box {}
.form-box + .form-box{margin-top: 20px;}
.form-box .lable-title {margin-bottom: 6px; font-weight: 500;}
.form-box .lable-title .required {display: inline-block; margin-right: 6px; color: var(--color-main);}
.form-box .form-col {display: flex; margin: 0 -6px;}
.form-box .form-col li {width: 100%; padding:0 6px;}

.form-box .form-addr {display: flex; flex-wrap: wrap;}
.form-box .form-addr .zipcode {width: 50%;}
.form-box .form-addr .btns {width: 50%;}
.form-box .form-addr .addr {width: 100%; margin-top: 6px;}

.forget-info {text-align: center; margin-top: 30px; margin-bottom: 30px;}
.forget-info .text {font-weight: 600; color: var(--font-color2);}
.forget-info .btn-group {margin-top: 10px;}


/* agree-sect */
.all-agree {margin-bottom: 16px; padding: 10px 20px; border-radius: 12px; background-color: var(--color-gray-brighter1);}
.all-agree label {font-weight: 600; color: var(--color-main);}
.agree-box {margin-top: 20px;}
.agree-box .sub-title {margin-bottom: 12px; font-weight: 700; color: var(--font-color1);}
.agree-box .sub-title > span {font-size: 15px;}
.agree-box .check-list li {display: flex; flex-wrap: wrap; position: relative; color: var(--font-color2);}
.agree-box .check-list li + li {margin-top: 6px;}
.agree-box .check-list li label {width: calc(100% - 25px);}
.agree-box .check-list li .btn-view {position: relative; width: 25px; height:25px;}
.agree-box .check-list li .btn-view::after {content:""; display:block; position:absolute; left:50%; top:50%; width:6px; height:6px; border-top:2px solid var(--font-color4); border-right:2px solid var(--font-color4); transform:translate(-50%, -50%) rotate(45deg);}
.agree-box .check-list li .reminder-detail {overflow-y: scroll; width: 100%; height: 260px; margin-top: 10px; background-color: var(--color-gray-brighter2);}

/* banner */
.swiper {position:relative; overflow:hidden; width:100%; height:auto; margin:0 auto 20px;}
.swiper-wrapper {z-index:auto; overflow:visible; width:100%; height:auto;}
.swiper-wrapper .swiper-slide {text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
.swiper-wrapper .swiper-slide img {display:block; width:100%; object-fit:cover;}
.swiper-pagination .swiper-pagination-bullet-active {width:24px; border-radius: 12px; background-color:var(--color-black);}
.swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 3px !important;}
.swiper-pagination-bullet-active {background-color: var(--color-black);}

.swiper .pagination {height:26px; z-index:10; display:flex; justify-content:center; align-items: center; position:absolute; left:initial; right:10px; bottom:10px; padding:0 12px; font-weight:400; font-size:14px; color:var(--color-white); background-color:rgba(0,0,0,.45); border: 1px solid #898989; border-radius:25px;}
.swiper-button-next, 
.swiper-button-prev {position:relative; left:initial; top:initial; right:initial; bottom:initial; margin:0; height:10px; width:10px;}
.swiper-button-prev {margin-right:8px; background-image:url('../img/icon/icon_prev.png'); background-repeat:no-repeat; background-position: center;}
.swiper-button-next {margin-left:8px; background-image:url('../img/icon/icon_next.png'); background-repeat:no-repeat; background-position: center;}
.swiper-button-next:after, .swiper-button-prev:after {display:none;}
.swiper-pagination {z-index:9; position:relative; width:auto; height:auto; bottom:-1px; font-size:11px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--color-black);}
.swiper-control {display:flex; justify-content:center; align-items:center; width:16px; height:16px; margin-right:8px;}
.swiper-control .btn-control {cursor:pointer; width:12px; height:12px;}
.swiper-control .btn-play {display:none; background-image:url('../img/icon/icon_stop.png'); background-repeat:no-repeat; background-position: center;}
.swiper-control .btn-stop {background-image:url('../img/icon/icon_play.png'); background-repeat:no-repeat; background-position: center;}
.swiper-control.big-arrow .swiper-button-prev,
.swiper-control.big-arrow .swiper-button-next {position:absolute; top:50%; width:48px; height:48px; margin:0; font-size:0; transform: translateY(-80%);}
.swiper-control.big-arrow .swiper-button-prev {left:0; background-image:url('../img/icon/icon_prev2.png'); background-repeat:no-repeat; background-position: center;}
.swiper-control.big-arrow .swiper-button-next {right:0; background-image:url('../img/icon/icon_next2.png'); background-repeat:no-repeat; background-position: center;}

.def-swiper {margin-bottom:0; padding-bottom:20px;}
.def-swiper .swiper-slide {display:flex; flex-wrap:wrap;}
.def-swiper .swiper-pagination {position:absolute; top:inherit; bottom:0;}
.def-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--color-black);}
.def-swiper .swiper-button-prev,
.def-swiper .swiper-button-next {position:absolute; top:50%; width:48px; height:48px; margin:0; transform: translateY(-80%); border-radius: 50%;}
.def-swiper .swiper-button-prev {left:0; background-image:url('../img/icon/icon_prev2.png'); background-repeat:no-repeat; background-position: center;}
.def-swiper .swiper-button-next {right:0; background-image:url('../img/icon/icon_next2.png'); background-repeat:no-repeat; background-position: center;}

/* button */
.area-btn {display: flex;}
.btn-util {position: relative;}
.btn-util .icon-def {position: relative; display: inline-block; width:38px; height:38px;  overflow: hidden; font-size: 0; line-height: 0; background-repeat: no-repeat; background-size:28px; background-position: center;}
.btn-util .icon-lang {width:24px; height:24px; background-image: url(../img/icon/icon_language_point.svg); background-size:20px;}
.btn-util .icon-menu {background-image: url(../img/icon/icon_menu.svg);}
.btn-util .icon-close {background-image: url(../img/icon/icon_close.svg);}

.btn-arrow-detail {position:relative; display:block; padding-right: 10px; font-weight:500; font-size:15px; color:var(--font-color3); text-align:center; z-index: 1;}
.btn-arrow-detail::after {content:""; position: absolute; top: 50%; right: 0; display:inline-block; width:6px; height:6px; margin:0 0 0 4px; border-top:2px solid var(--font-color3); border-right:2px solid var(--font-color3); transform:translateY(-50%) rotate(45deg);}

/* button[class ^= "btn"] span {display:table; width:100%; padding: 0 15px; font-size:15px; word-break:keep-all; border-radius:6px; text-align:center;}
button[class ^= "btn"].btn-xs {height: 34px;}
button[class ^= "btn"].btn-xs > span {font-weight: 500; font-size: 14px;}
button[class ^= "btn"].btn-s {height: 40px; font-size: 15px;}
button[class ^= "btn"].btn-s > span {font-size: 15px;} */

.btn-group {display:flex; flex-wrap:wrap;}
.btn-group + .btn-group {margin-top:12px;}
.btn-group .btn {display:table; width:100%; height:52px; padding: 0 10px; font-size:16px; word-break:keep-all; border-radius:6px; text-align:center;}
.btn-group .btn span {display:table-cell; vertical-align:middle;}
.btn-group .btn span > em {display:block; font-size:13px;}
.btn-group .btn-full {width:100%; background-color:var(--color-main); color:var(--color-white);}
.btn-group .btn-full + .btn-full,
.btn-group .btn-full + .btn,
.btn-group .btn-full + .btn + .btn {margin-top:12px}
.btn-group .btn-half {width:calc(50% - 6px);}
.btn-group .btn-half:nth-child(1) {margin-right:6px; background-color:var(--color-gray-light); color:var(--color-black);}
.btn-group .btn-half:nth-child(2) {margin-left:6px; background-color:var(--color-main); color:var(--color-white);}
.btn-group .btn.btn-black {background-color: var(--color-black) !important; color: var(--color-white) !important;}
.btn-group .btn.btn-round-arrow {border-radius:30px !important; border: 1px solid var(--color-gray-light); color: var(--font-color2);}
.btn-group .btn.btn-round-arrow span {position: relative; padding-right: 10px; font-size: 15px;}
.btn-group .btn.btn-round-arrow span::after {content:""; display:block; position:absolute; right:0; top:50%; width:4px; height:4px; border-top:2px solid var(--color-black); border-right:2px solid var(--color-black); transform:translateY(-50%) rotate(45deg);}
.btn-group .btn.btn-auto {width: auto; padding:  0 30px;}

.btn-full {width:100%;}
.btn-auto {width:auto; padding:  0 16px;}
.btn-main {background-color:var(--color-main) !important; color:var(--color-white) !important;}
.btn-black {background-color:var(--color-black) !important; color:var(--color-white) !important;}
.btn-darkgray {background-color:var(--color-gray-light) !important; color:var(--font-color2) !important;}
.btn-gray {background-color:var(--color-gray-brighter) !important; color:var(--font-color1) !important;}
.btn-skyblue {background-color:var(--color-data-bg) !important; color:var(--color-data) !important;}

.btn {display: inline-flex; justify-content: center; align-items: center; padding: 5px 0; border-radius: 6px; font-weight: 500; font-size:14px;}
.btn span {width:auto; padding: 0 15px; font-size:inherit; word-break:keep-all; border-radius:6px; text-align:center;}
.btn-def {display:table; width:100%; height:56px; padding: 0 15px; font-size:15px; word-break:keep-all; border-radius:6px; text-align:center;}
.btn-xs {height: 34px;}
.btn-xs > span {font-weight: 500; font-size: 14px;}
.btn-s {height: 40px; font-size: 15px;}
.btn-s > span {font-size: 15px;}

.btn.btn-line {border:1px solid var(--color-main); color:var(--color-main);}
.btn.btn-line.btn-black {border:1px solid var(--color-black) !important;; color:var(--color-black) !important;; background-color:var(--color-white) !important;;}
.btn.btn-line.btn-gray {border:1px solid var(--color-gray-brighter) !important;; color:var(--font-color2) !important;; background-color:var(--color-white) !important;;}


/* 공지 */
.notice-box {}
.notice-box.bg {padding:20px; border-radius:6px; background-color:var(--color-lightpink1);}
.notice-box.bg2 {padding:20px; border-radius:6px; background-color:var(--color-gray-brighter4); border: 1px solid var(--color-gray-brighter);}
.notice-box .notice-title {font-size:16px; font-weight:700; margin-bottom:12px}
.notice-box.bg li {color:var(--color-main);}
.notice-box ul li {position:relative; text-align:left; font-size:16px; color: var(--font-color2);}
.notice-box ul li + li {margin-top:6px;}
.notice-box ul ul {margin-top:6px;}
.notice-box .dot-list {position:relative;}
.notice-box .dot-list li {position:relative; padding-left:12px; font-size:15px; color:var(--font-color2);}
.notice-box .dot-list li::before {content:""; display:inline-block; position:absolute; top:10px; left:0; width:3px; height:3px; background-color:var(--font-color2);}
.notice-box .num-list {counter-reset:num 0;}
.notice-box .num-list li {padding-left:20px;}
.notice-box .num-list li:before {content:counter(num)"."; counter-increment:num 1; position:absolute; left:0; top:0;}
.notice-box .scroll-table {width:100%; overflow:auto;}
.notice-box .scroll-table table {width:100% !important;}
.notice-box .scroll-table p {margin-top:4px; font-weight:400; font-size:16px; color:var(--font-color2); line-height:1.4;}
.notice-box .scroll-table + ul {margin-top:8px}
.notice-box table {width:100% !important; margin-top:5px;}
.notice-box table th,
.notice-box table td {font-size:14px; border:1px solid #ddd; line-height:1.4;}
.notice-box table th {padding:6px 10px; font-weight:600; background-color:#e9e9e9; color:#000; text-align:center;}
.notice-box table td {padding:8px 10px; text-align:center; color:var(--font-color2);}

/* accordion */
.accordion-list li {}
.accordion-list .header {z-index:auto; display:flex; align-items:center; position:relative;}
.accordion-list .header::after {content:''; display:block; position:absolute; right:5px; top:50%; width:10px; height:10px; margin-top:-4px; border-bottom:3px solid var(--color-black); border-right:3px solid var(--color-black); transform:translateY(-50%) rotate(45deg); transition: all .1s;}
.accordion-list .header .title {cursor:pointer; flex:1; font-size:20px; font-weight:700; color: var(--font-color1);}
.accordion-list .content {display:none;}
.accordion-list li.on .header::after {transform:translateY(-50%) rotate(-135deg);}
.accordion-list li.on .content::after {border-color:#000; transform:translateY(50%) rotate(135deg);}

/* table */
.table-type01 + .table-type01 {margin-top: 30px;}
.table-type01 .title {font-weight: 600; font-size: 16px; margin-bottom: 8px;}
.table-type01 {width:100%;}
.table-type01 th,
.table-type01 td {padding:8px 10px; font-size:14px; border:1px solid var(--color-gray-light); line-height:1.4;}
.table-type01 th {font-weight:600; background-color:var(--color-gray-brighter); color:var(--color-black);}
.table-type01 td {text-align:center; color:var(--font-color2); background: var(--color-white);}
.table-type01 table + p {margin-top: 6px; color: var(--font-color3);}
.table-type01 td button,
.table-type01 td button > span {font-size: 15px;}

/* view table */
.selected-table {position: relative;}
.selected-table .title {position: relative;}
.selected-table .title > .btn-delete {position: relative; width: 28px; height: 28px; margin-left: auto;}
.selected-table .title > .btn-delete::after {content: ""; position: absolute; left:50%; top: 50%; display: block; width: 24px; height: 24px; background-image: url(../img/icon/icon_close.svg); transform: translate(-50%, -50%);}
.selected-table .item {display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 12px; font-size: 15px;}
.selected-table .item:last-of-type {border-bottom: 1px solid var(--color-gray-light);}
.selected-table .item dt {width: 120px; color: var(--font-color3); font-weight: 400;}
.selected-table .item dd {flex: 1; text-align: right;}
.selected-table .item dd.text {width: 100%; flex: auto; margin-top: 5px; font-size: 14px; text-align: left;}
.selected-table .total-item dt,
.selected-table .total-item dd,
.selected-table .total-item dd .item_price {font-weight: 500; color: #000;}

/*  */
.line-box {width:100%;}
.line-box + .line-box {margin-top: 30px;}
.line-box .title {font-weight: 600; font-size: 18px; margin-bottom: 8px;}
.line-box .line-cont {padding: 20px; border-radius: 12px; border: 1px solid var(--color-gray-light);}
.line-box .line-cont dl {display: flex; font-weight: 400; font-size: 16px;}
.line-box .line-cont dl + dl {margin-top: 8px;}
.line-box .line-cont dl dt {color: var(--font-color2); margin-right: 16px;}
.line-box .line-cont dl dd {flex: 1; font-weight: 500; color: var(--color-black); text-align: right;}
.line-box .qr-area {margin-top: 20px; padding-top: 15px; text-align: center; border-top: 1px solid #ddd;}
.line-box .qr-area .text {margin-bottom: 10px; font-weight: 500; color: var(--font-color2);}
.line-box .qr-area .qr-code {width: 120px; margin: 0 auto;}
.line-box .qr-area .qr-code2 {width: 90px; margin: 0 auto;}

.line-col2 .col {width:calc(50% - 10px); margin-left:10px;}


/****************************************
# header/footer
****************************************/
/* header */
.header {z-index:10; position: sticky; top:0; left:0; right:0; width:100%; height:60px; background-color:var(--color-white);}
.header .header-wrap {display:flex; align-items: center; width:100%; height:100%;}
.header .logo a {width:110px; height:auto;}
.header .language {position:relative; min-width:86px; margin-left:8px; padding:0 5px; border:1px solid var(--color-main); border-radius:30px;}
.header .language .btn-lang {display:flex; justify-content: center; align-items: center; flex-wrap:wrap; }
.header .language .btn-lang .text-lang {position:relative; margin-left:3px; font-weight:800; font-size:16px; color:var(--color-main);}
.header .language .btn-lang .text-lang::after {content:""; display:inline-block; position:absolute; left:100%; top: 50%; width:12px; height:19px; margin-left:4px; transform: translateY(-50%); background:url(../img/icon/icon_arrow_down.svg) no-repeat center 25%;}
.header .language .select-lang {display:none; position:absolute; left:0; top: 110%; width:100%; padding:5px 0; border-radius:6px; background-color:var(--color-main); color:var(--color-white);}
.header .language .select-lang.active {display:block; width: max-content;}
.header .language .select-lang li a {width:100%; height:100%; padding:4px 10px; font-weight:300; font-size:16px;}
.header .menu {flex:1; position:absolute; top:50%; right:12px; transform: translateY(-50%);}

.gnb-wrap {display:none; position:fixed; top:0; left:50%; right:0; bottom:0; width:100%; max-width:620px; height:100%; background-color:var(--color-white); transform: translateX(-50%);}
.gnb-wrap .btn-close {width:100%; height:60px; margin-left:12px; text-align: right;}
.gnb-wrap .gnb-list {margin-top:20px;}
.gnb-wrap .gnb-list > li {margin-bottom:20px}
.gnb-wrap .gnb-list > li > a {position:relative; display:block; width:100%; padding-right:30px; font-size:20px; font-weight:700; line-height: 1.4; word-break: keep-all;}
.gnb-wrap .gnb-list > li > a::after {content:""; display:block; position:absolute; right:0; top:50%; width:8px; height:8px; border-top:2px solid var(--color-black); border-right:2px solid var(--color-black); transform:translateY(-50%) rotate(45deg);}
.gnb-wrap .gnb-list ul {padding-left: 10px;}
.gnb-wrap .gnb-list ul > li {margin-top: 12px; color: var(--font-color2);}
.gnb-wrap .gnb-list ul > li a {position:relative; display:block; width:100%; font-size: 18px;}


/* footer */
.footer {color:var(--font-color4); background-color:var(--color-gray-brighter);}
.footer .footer-wrap {padding:40px 0 40px; font-size:13px; font-weight:400;}
.footer-menu {display: flex; flex-wrap: wrap; width: 100%;}
.footer-menu li {margin-right: 15px; margin-bottom: 5px; color:var(--font-color3);}
.footer-menu li a strong {font-weight:700; color:var(--font-color2);}
.footer-info {margin-top: 15px; border-top:1px solid var(--color-gray-light);}
.footer-info .mark {display: block; margin:30px 0 auto; text-align: center;}
.footer-info .mark .icon-isms {width: 60px;}
.footer-info .info_list {padding-top: 15px;}
.footer-info .info_list li {margin-bottom:4px; color:var(--font-color3);}
.footer .copyright {margin-top:20px;}

/* 통신사별 커버리지 */
.hyper-list {width:100%;}
.hyper-list li + li {margin-top: 10px;}
.hyper-list li div {display:flex; align-items:center; padding:20px; border: 1px solid #e2e2e2; border-radius: 12px; align-items: center; justify-content: space-between;}
.hyper-list li div > .title {font-weight:600; font-size:16px;}
.hyper-list li div a{font-size: 14px;}



/****************************************
# main
****************************************/
/* main banner */
.main-sect .swiper {margin-bottom: 0; padding-bottom:0;}
.main-sect .def-swiper .swiper-pagination {position:absolute; bottom: 30px;}
.main-sect .def-swiper .swiper-button-prev {left: 10px;}
.main-sect .def-swiper .swiper-button-next {right: 10px;}

/* 소개 */
.intro-sect {overflow: hidden;}
.intro-visual {position:relative; width:100%; height:0; padding-top:100%; background-color:var(--color-white); background-size: contain;}
.intro-visual::before {content:""; display:block; position: absolute; left:-10%; top:0; width:90%; height:100%; background:url(../img/banner/main_intro_visual1.png) no-repeat 0 top; background-size: cover; transform-origin: right bottom;}
.intro-visual::after {content:""; display:block; position: absolute; right:-16%; top:12%; width:65%; height:100%; background:url(../img/banner/main_intro_visual2.png) no-repeat 0 top; background-size: contain; transform-origin: right top;}
.intro-visual .content {z-index:1; position:absolute; bottom:0; left:0;}
.intro-visual .content .text2 {margin-top:20px;}
.intro-visual .content .text p {color:var(--font-color5); font-size:16px; font-weight:500; line-height:1.6;}

.introd-sect {text-align: center;}
.introd-sect .introd-title {margin-bottom: 60px; font-weight: 800; font-size: 26px; line-height: 1.5;}
.introd-sect .introd-title img {width:auto; height:24px; vertical-align: baseline;}
.introd-benefit {display: flex; flex-wrap: wrap;}
.introd-benefit li {width: 100%; margin-top: 40px;}
.introd-benefit li:first-child {margin-top: 0;}
.introd-benefit li .icon-img {display: inline-block; max-width: 120px; margin-bottom: 10px;}
.introd-benefit li .title {color: var(--font-color1); font-size: 20px; font-weight: 600;}
.introd-benefit li .desc {margin-top: 10px; color: var(--font-color3); font-size: 16px; line-height: 1.5;}


/* 기타 */
.card-sect {padding:0;}
.card-sect .card-item {border-radius:12px; background-color:var(--color-gray-brighter2);}
.card-sect .card-item + .card-item {margin-top:16px;} 
.card-sect .card-box {position:relative; width:100%;padding:32px 120px 32px 30px;}
.card-sect .card-box .desc {font-weight:500; font-size:14px;}
.card-sect .card-box .title {font-weight:800; font-size:22px; margin-top:8px;}
.card-sect .card-box .bg-img {position:absolute; top:52%; right:25px; width:80px; height:80px; display:inline-block; transform: translateY(-50%);}
.card-sect .card-box.faq .bg-img::after {content:""; display:block; width:100%; height:100%; background:url(../img/icon/img_faq.png) no-repeat center; background-size: contain;}
.card-sect .card-box.cs .bg-img {width:80px; height:80px;}
.card-sect .card-box.cs .bg-img::after {content:""; display:block; width:100%; height:100%; background:url(../img/icon/img_cs.png) no-repeat center; background-size: contain;}

/****************************************
# 단기유심
****************************************/
.travel-sect {background-color:var(--color-skyblue2);}


/****************************************
# 요금제
****************************************/
.paln-sect .inner {padding:0 24px;}
.paln-sect .sect-title {margin-bottom:20px;}
.paln-sect .sect-desc {margin-top:40px;}
.plan-list {cursor:pointer; overflow:hidden; width:100%; padding:22px 22px 0; text-align:left; border-radius:18px; border: 1px solid var(--color-gray-light); background-color:var(--color-white); box-shadow:0 5px 10px 0 rgba(0, 0, 0, .06);}
.plan-list > a {width:100%;}
.plan-list + .plan-list {margin-top:10px;}
.plan-list .top-box {display:flex; flex-wrap:wrap; margin-bottom:17px;}
.plan-list .top-box .badge-box {display: flex; flex-wrap: wrap; gap: 5px; width:100%;}
.plan-list .top-box .name > span{font-weight: 700;}
.plan-list .top-box .name,
.plan-list .top-box .name {flex:1; margin-top: 8px; font-size:15px; font-weight:600; color: var(--font-color3); word-break:break-word;}
.plan-list .automatic {margin:20px 0 10px 0; padding:6px 15px; font-size:15px; font-weight:400; text-align:center; font-weight:500; color:var(--badge-discount); background-color:var(--color-gray-brighter1); border-radius:20px}

.plan-list .badge-box .badge {display:inline-block; padding:3px 10px; font-size:11.5px; font-weight:600; border-radius:20px;}
.plan-list .badge-box .badge.pay_type1 {background-color: var(--color-prepaid-bg); color:var(--color-prepaid);}
.plan-list .badge-box .badge.pay_type2 {background-color: var(--color-postpaid-bg); color:var(--color-postpaid);} 
.plan-list .badge-box .badge.mno-skt {background-color:var(--color-skt-bg); color:var(--color-skt);}
.plan-list .badge-box .badge.mno-lgt {background-color:var(--color-lgt-bg); color:var(--color-lgt);}
.plan-list .badge-box .badge.mno-kt {background-color:var(--color-kt-bg); color:var(--color-kt);}
.plan-list .badge-box .badge.condition {background-color:var(--badge-condition); border:1px solid var(--badge-condition); color:var(--color-white);}
.plan-list .badge-box .badge.period,
.plan-list .badge-box .badge.combine {color:var(--color-lifetime); background-color:var(--color-lifetime-bg);}
.plan-list .badge-box .badge.autopay {color:var(--color-autopay); background-color:var(--color-autopay-bg);}
.plan-list .badge-box .badge.combine {color:var(--color-lifetime); background-color:var(--color-lifetime-bg);}
.plan-list .badge-box .badge.data {color:var(--color-data); background-color:var(--color-data-bg);}
.plan-list .badge-box .badge.speed {color:var(--color-speed); background-color:var(--color-speed-bg);}
.plan-list .badge-box .badge.network,
.plan-list .badge-box .badge.youth,
.plan-list .badge-box .badge.contract {color:var(--color-status); background-color:var(--color-status-bg);}

.plan-list .spec-box {display:flex; flex-wrap:wrap; width:100%; padding-bottom:20px;}
.plan-list .spec-box .tethering,
.plan-list .spec-box .additional {position:relative; display:block; margin-left: 2px; padding-left:10px; font-weight:400; font-size:13px; color:var(--font-color2);}
.plan-list .spec-box .qos::before,
.plan-list .spec-box .tethering::before,
.plan-list .spec-box .additional::before {content:" +"; position:absolute; left:0; top:1px; font-size:13px; color:var(--font-color2);}
.plan-list .spec-box .tethering {width: 100%;}
.plan-list .spec-box .tethering .free {font-weight:400; font-size:14px; color:var(--font-color2);}
.plan-list .spec-box .data {display:flex; align-items:baseline; flex-wrap:wrap; position:relative; width:100%; margin-bottom:14px; font-size:22px;}
.plan-list .spec-box .data .free {display:inline-block; font-weight:800; line-height:1.05; letter-spacing:-.042em; color:var(--font-color1);}
.plan-list .spec-box .data .qos {position:relative; display:block; margin-left: 9px; padding-left:0; font-weight:500; font-size:12.5px; color:var(--font-color3);}
.plan-list .spec-box .data .qos::before {content:none;}
.plan-list .spec-box .call {display: flex; position:relative; margin-bottom:6px; padding-left:24px;}
.plan-list .spec-box .call:before {content:""; display:inline-block; position:absolute; left:0; top:2px; width:12px; height:12px; background:url(../img/icon/icon-plan-call.svg) no-repeat center; background-size:contain;}
.plan-list .spec-box .call .free {font-weight:400; font-size:14px; color:var(--font-color2);}
.plan-list .spec-box .sms {position:relative; width: 100%; margin-bottom:6px; padding-left:24px;}
.plan-list .spec-box .sms:before {content:""; display:inline-block; position:absolute; left:0; top:3px; width:13px; height:13px; background:url(../img/icon/icon-plan-sms.svg) no-repeat center; background-size:contain;}
.plan-list .spec-box .sms .free {font-weight:400; font-size:14px; color:var(--font-color2);}

.plan-list .spec-box .tetheringSharing {position:relative; width: 100%; margin-bottom:6px; padding-left:24px;}
.plan-list .spec-box .tetheringSharing:before {content:""; display:inline-block; position:absolute; left:0; top:3px; width:13px; height:13px; background:url(../img/icon/icon-plan-sharing.svg) no-repeat center; background-size:contain;}
.plan-list .spec-box .tetheringSharing .free {font-weight:400; font-size:14px; color:var(--font-color2);}

.plan-list .bottom {display: flex; align-items: center; margin:0 -22px; padding:12px 22px; background-color:var(--color-gray-brighter3); border-top:1px solid #eaeaea;}
/* 정상가(취소선)와 할인가를 한 줄에 나란히 — 숫자 밑선을 맞추려고 baseline 정렬한다 */
.plan-list .bottom .price-box {flex: 1; display:flex; flex-wrap:wrap; align-items: baseline; margin-right: 10px;}
.plan-list .bottom .price-box .basic-price {position:relative; display:inline-block; margin-right: 5px; padding:0 3px; font-size:12px; color:var(--font-color3);}
.plan-list .bottom .price-box .basic-price::after {content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background-color:var(--font-color3);}
.plan-list .bottom .price-box .current-price {width: auto; font-size:24px; font-weight:800; letter-spacing:-.035em; color:var(--font-color1);}
.plan-list .bottom .price-box .current-price .text {display:inline-block; margin-left: 3px; font-weight:600; font-size:12.5px; color:var(--font-color3);}
.plan-list .bottom .price-box .orgin-price {width:100%; font-size:16px; color:var(--font-color3); text-align:right;}
.plan-list .bottom .price-box .orgin-price + .orgin-price {margin-top:4px;}
.plan-list .bottom .lable {width: 100%; margin-top: 2px;}
/* 회색 .bottom 위에 회색 배지는 묻힌다. 배지 색은 .badge.autopay 와 같은 토큰을 쓰고,
   파스텔 배경만으로는 바탕과 명도가 비슷해 같은 색 테두리로 경계를 세운다. */
.plan-list .bottom .lable > .autopay {display: inline-block; padding: 3px 10px; font-weight: 600; font-size: 12px; color: var(--color-autopay); background-color: var(--color-autopay-bg); border: 1px solid var(--color-autopay); border-radius: 20px;}
.plan-list .bottom .btn-join {color: var(--color-white); background-color: var(--color-main); border-radius: 20px;}

.paln-swiper {margin-bottom:0; padding-bottom:20px;}
.paln-swiper .swiper-slide {display:flex; flex-wrap:wrap; width:100%;}
.paln-swiper .swiper-slide + .swiper-slide {margin-top:0;}
.paln-swiper .swiper-slide a { width:100%;}
.paln-swiper .swiper-pagination {position:absolute; top:inherit; bottom:0; height: 2px;}
.paln-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:var(--color-black);}
.paln-swiper .swiper-button-prev,
.paln-swiper .swiper-button-next {position:absolute; top:50%; width:48px; height:48px; margin:0; transform: translateY(-80%);}
.paln-swiper .swiper-button-prev {left:0; background-image:url('../img/icon/icon_prev2.png'); background-repeat:no-repeat; background-position: center;}
.paln-swiper .swiper-button-next {right:0; background-image:url('../img/icon/icon_next2.png'); background-repeat:no-repeat; background-position: center;}

/* 요금제 리스트 */
.plan-menu {margin-top:30px;}
.plan-menu .plan-item {width:100%; height:100%;}
.plan-menu .plan-list {border:1px solid var(--color-gray-light);}
.plan-menu .sect-desc {display:flex; align-items:flex-end; padding-bottom:12px;}
.plan-menu .sect-desc .text {flex:1; font-weight:600; font-size:16px;}
.plan-menu .sect-desc .text > strong {color:var(--color-main);}
.plan-menu .btn-more {position:relative; font-size:14px; font-weight:400; color:var(--font-color3);}
.plan-menu .btn-more::after {content:""; display:inline-block; width:7px; height:7px; margin-left:3px; border-top:1px solid var(--font-color3); border-right:1px solid var(--font-color3); transform: rotate(45deg);}

#listWrap .plan-item {width:100%;}
#listWrap .plan-list {}

.sortWrap {position:relative; width:100%; margin-top:20px;}
.sortWrap .count {margin-bottom:10px; font-size:14px; font-weight:400; color:var(--font-color3);}
.sortWrap .sort-select {position:absolute; right:0; top:0; }
.sortWrap .sort-select .sort-btn {position:relative; width:100%; padding-right:25px; font-weight:400; font-size:14px; text-align:right; color:var(--font-color3);}
.sortWrap .sort-select .sort-btn::after {content:""; position:absolute; top:40%; right:0; width:8px; height:8px; margin-left:4px; border-style:solid; border-width:2px 0 0 2px; border-color:var(--font-color4); transform:translate(-50%, -50%) rotate(-135deg);}
.sortWrap .sort-select .sort-option {display:none; z-index:10; position:relative; margin-top:6px; padding:5px 0; background-color:var(--color-white); border:1px solid var(--color-gray-light); border-radius:6px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);}
.sortWrap .sort-select .sort-option li {position:relative; padding:4px 10px;}
.sortWrap .sort-select .sort-option li a {display:block;}
.sortWrap .sort-select .sort-option li span {display:block; color:var(--font-color3); font-weight:400; font-size:14px;}
.sortWrap .sort-select .sort-option.active {display:block;}
.sortWrap .sort-select .sort-option li.active span,
.sortWrap .sort-mno li.active span  {color:var(--color-main);}


/* 요금제 상세페이지 */
#detailWrap {z-index:1; position:relative; background-color:var(--color-white); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06); border-radius:0 0 16px 16px;}
#eventWrap {padding:20px 16px 0; background-color:var(--color-white);}
#eventWrap + #reminderWrap {padding-top:0;}
#reminderWrap {overflow:hidden; padding:20px 16px 22px; background-color:var(--color-white);}

.plan-detail .inner {position:relative; padding:28px 22px 0;}
.plan-detail .btn-icon {position:absolute; top:30px; right:20px;}
.plan-detail .btn-icon .icon-share { width:26px; height:26px; background:url(../img/icon/icon_share.png?20240619) no-repeat; background-size:contain;}
.plan-detail .detail .badge-box {display:flex; flex-wrap:wrap; gap:5px;}
.plan-detail .detail .badge-box .badge {display:inline-block; padding:3px 10px; font-size:11.5px; font-weight:600; border-radius:20px;}
/* .plan-detail .detail .badge-box .badge.contract {border:1px solid #f77ea4; color:#ff558a; background-color:#fff;} */
.plan-detail .detail .badge-box .badge.mno-skt {background-color:var(--color-skt); color:var(--color-white); border:1px solid var(--color-skt);}
.plan-detail .detail .badge-box .badge.mno-lgt {background-color:var(--color-lgt-bg); color:var(--color-lgt);}
.plan-detail .detail .badge-box .badge.mno-kt {background-color:var(--color-kt); color:var(--color-white); border:1px solid var(--color-kt);}
.plan-detail .detail .badge-box .badge.condition {background-color:var(--badge-condition); color:var(--color-white); border:1px solid var(--badge-condition);}
.plan-detail .detail .badge-box .badge.pay_type1{background-color: var(--color-main); color: #fff; padding: 3px 10px;}
.plan-detail .detail .badge-box .badge.pay_type2{background-color: var(--color-postpaid-bg); color: var(--color-postpaid); padding: 3px 10px;}
.plan-detail .detail .badge-box .badge + .badge {margin-left:0;}
.plan-detail .detail .badge-box .badge.period,
.plan-detail .detail .badge-box .badge.combine {color:var(--color-white); background-color:var(--badge-discount); border:1px solid var(--badge-discount);}
.plan-detail .detail .badge-box .badge.recom {color:var(--color-white); background:linear-gradient(to right, #42d7b3, #2461eb);}
.plan-detail .detail .badge-box .badge.network,
.plan-detail .detail .badge-box .badge.youth,
.plan-detail .detail .badge-box .badge.contract {color:var(--color-status); background-color:var(--color-status-bg);}
.plan-detail .detail .name {margin:13px 0 0; font-weight:800; font-size:21px; letter-spacing:-.03em; color:var(--font-color1);}
.plan-detail .detail .spec-box {display:flex; flex-wrap:wrap; margin-top:18px; padding:18px 20px 16px; background-color:var(--color-gray-brighter3); border-radius:12px 12px 0 0;}
/* 아래 .addition-box 는 부가 안내(QoS·테더링·추가통화 등)가 있을 때만 렌더된다.
   없을 때는 .spec-box 가 마지막이라 하단 모서리도 둥글려야 한다. */
.plan-detail .detail .spec-box:last-child {padding-bottom:18px; border-radius:12px;}
.plan-detail .detail .spec-box > div {display: flex; align-items:center; text-align:left; margin-right:16px;}
.plan-detail .detail .spec-box > div:last-child {margin-right:0;}
.plan-detail .detail .spec-box .free {display:inline-block; vertical-align:middle; color:var(--font-color1); font-weight:500; font-size:16px; word-break:keep-all;}
.plan-detail .detail .spec-box .icon-comm {position:relative; display:inline-block; width:26px; height:26px; margin-right:6px; vertical-align:middle;}
.plan-detail .detail .spec-box .icon-comm::after {content:""; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.plan-detail .detail .spec-box .data {position:relative; width:100%; margin:0 0 12px;}
.plan-detail .detail .spec-box .data .free {font-size:24px; font-weight:800; letter-spacing:-.035em; line-height:1.1;}
.plan-detail .detail .spec-box .data .icon-comm {width:22px; height:22px; margin-right:8px;}
.plan-detail .detail .spec-box .data .icon-comm::after {width:15px; height:15px; background:url(../img/icon/icon-plan-data.svg) no-repeat center; background-size: contain;}
.plan-detail .detail .spec-box .call {position:relative;}
.plan-detail .detail .spec-box .call .icon-comm::after {width:14px; height:14px; background:url(../img/icon/icon-plan-call.svg) no-repeat center; background-size: contain;}
.plan-detail .detail .spec-box .sms {position:relative;}
.plan-detail .detail .spec-box .call .free,
.plan-detail .detail .spec-box .sms .free {font-size:14.5px; font-weight:500; color:var(--font-color2);}
.plan-detail .detail .spec-box .call .icon-comm,
.plan-detail .detail .spec-box .sms .icon-comm {width:20px; height:20px; margin-right:5px;}
.plan-detail .detail .spec-box .sms .icon-comm::after {width:15px; height:15px; background:url(../img/icon/icon-plan-sms.svg) no-repeat center; background-size: contain;}
.plan-detail .detail .addition-box {margin-top:0; padding:0 20px 18px; background-color:var(--color-gray-brighter3); border-radius:0 0 12px 12px;}
.plan-detail .detail .addition-box p {position:relative; padding-left:11px; font-size:14px; line-height:1.5; color:var(--font-color2);}
.plan-detail .detail .addition-box p::before {content:""; display:block; position:absolute; left:0; top:9px; width:3px; height:3px; background-color:var(--font-color2); border-radius:50%;}
.plan-detail .detail .addition-box p + p {margin-top:7px;}

.plan-detail .price-box {padding:18px 0; background-color:var(--color-white);}
.plan-detail .price-box .point {color:#da2d50}
.plan-detail .price-box dl {display:flex; width:100%; color:#555555;}
.plan-detail .price-box dl + dl {margin-top:4px;}
.plan-detail .price-box dl dt {text-align:left; font-weight:500; font-size:13px;}
.plan-detail .price-box dl dd {flex:1 auto; font-weight:500; font-size:14px; text-align:right;}
.plan-detail .price-box dl dt.icon-low {}
.plan-detail .price-box dl dt.icon-low::before {content:""; display:inline-block; width:6px; height:5px; margin:0 5px 2px 0; border-bottom:1px solid #555; border-left:1px solid #555;}
.plan-detail .price-box .current-price {align-items: baseline; color:#292929; text-align:center;}
.plan-detail .price-box .current-price dt {font-size:15px; font-weight:600; color:var(--font-color3);}
.plan-detail .price-box .current-price dd {font-size:30px; font-weight:800; letter-spacing:-.035em; color:var(--font-color1); font-variant-numeric:tabular-nums;}
.plan-detail .price-box .current-price dd .text {font-size:13px; font-weight:600; color:var(--font-color3);}
.plan-detail .price-box .current-price .btn-toggle {cursor:pointer}
.plan-detail .price-box .current-price .btn-toggle .icon-arrow {position:relative; width:24px; height:24px;}
.plan-detail .price-box .current-price .btn-toggle .icon-arrow::after {content:""; position:absolute; top:45%; left:50%; width:7px; height:7px; border:1px solid; border-width:1px 0 0 1px; border-color:var(--color-black); transform:translate(-50%, -50%) rotate(-135deg);}
.plan-detail .price-box .current-price .btn-toggle.active .icon-arrow::after {top:55%; transform:translate(-50%, -50%) rotate(45deg);}
.plan-detail .price-box .orgin-price {margin-top:3px; text-align:right; color:var(--font-color3);}
.plan-detail .price-box .detail-price {opacity:0; display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--color-gray-brighter1); transition:.2s;}
.plan-detail .price-box .detail-price.active {opacity:1; display:block;}
.plan-detail .btn-group {z-index:10; position:fixed; bottom:0; left:50%; width:100%; max-width:620px; padding:0; transform:translateX(-50%); border-top:1px solid var(--color-gray-brighter1); box-shadow:0 -2px 10px rgba(0, 0, 0, .05);}
.plan-detail .btn-group .btn {font-weight:600; font-size:17px; border-radius:0;}
/* 마크업의 btn-black 이 !important 로 검정을 강제하므로 같은 방식으로 브랜드 컬러를 덮는다 */
.plan-detail .btn-group .btn.btn-black {background-color:var(--color-main) !important; color:var(--color-white) !important;}
.plan-info-box {padding:16px 20px; font-weight:400; font-size:14px; line-height:1.4; border-top:1px solid var(--color-gray-brighter1); color:var(--color-main); word-break:break-word;}

.reminder-detail {position:relative; padding:0;}
.reminder-detail + .reminder-detail {margin-top:0;}
/* 유의사항 강조 — 마크업의 key-point 훅에 대응 */
.reminder-detail.key-point {margin-bottom:18px; padding:18px 18px 20px; background-color:var(--color-main-bg); border-radius:12px;}
.reminder-detail.key-point .content .cont-title {position:relative; margin-bottom:12px; padding-left:22px; font-size:16px; color:var(--color-main);}
.reminder-detail.key-point .content .cont-title::before {content:"!"; position:absolute; left:0; top:50%; display:flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:11px; font-weight:800; color:var(--color-white); background-color:var(--color-main); border-radius:50%; transform:translateY(-50%);}
.reminder-detail.key-point .content ul li {font-size:14px;}
.reminder-detail .content {padding-bottom:26px;}
.reminder-detail .content:last-child {padding-bottom:0;}
.reminder-detail .content + .content {margin-top:0; padding-top:26px; border-top:1px solid var(--color-gray-brighter1);}
.reminder-detail .content .cont-title {margin-bottom:13px; font-weight:700; font-size:17px; color:var(--font-color1);}
.reminder-detail .content .cont-sub-title {margin-bottom:6px; font-weight:600; font-size:16px; color:var(--font-color1);}
.reminder-detail .content ul + .cont-sub-title {margin-top:24px;}
.reminder-detail .content ul {width:100%}
.reminder-detail .content ul li {position:relative; padding-left:12px; font-weight:400; font-size:14.5px; color:var(--font-color2); line-height:1.5; word-break:keep-all; overflow-wrap:break-word;}
.reminder-detail .content ul li + li {margin-top:8px}
.reminder-detail .content ul li span {font-weight:400;}
.reminder-detail .content ul li > ul {margin-top:4px}
.reminder-detail .content  .text-list li {padding-left: 20px;}
.reminder-detail .content  .text-list li > span {position: absolute; left: 0;}
.reminder-detail .content .num-list {counter-reset: num 0;}
.reminder-detail .content .num-list > li {padding-left:24px;}
.reminder-detail .content .num-list > li:before {content:counter(num)"."; counter-increment:num 1; position:absolute; left:0; top:0;}
.reminder-detail .content .desc-list li {padding-left:12px !important;}
.reminder-detail .content .desc-list li::before {content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--font-color2);}
.reminder-detail .content table {margin-top:0;}
.reminder-detail .content table th,
.reminder-detail .content table td {font-size:14px; border:1px solid #ddd; line-height:1.4;}
.reminder-detail .content table th {padding:6px 10px; font-weight:600; background-color:#e9e9e9; color:#000;}
.reminder-detail .content table td {padding:6px 10px; text-align:center; color:var(--font-color2); background-color:var(--color-white); }
.reminder-detail .content table + ul,
.reminder-detail .content table + p {margin-top:4px; font-size:15px;}
.reminder-detail .content .cont-text {margin-top:6px; font-weight:400; font-size:15px; color:var(--font-color2); font-weight:400;}
.reminder-detail .content .scroll-table {width:100%; overflow:auto;}
.reminder-detail .content .scroll-table table {width:620px !important;}
.reminder-detail .content .scroll-table p {margin-top:4px; font-weight:400; font-size:14px; color:var(--font-color3); line-height:1.4;}
.reminder-detail .content .scroll-table + ul {margin-top:8px}
.reminder-detail .content .benefit-list li {position:relative; margin-top:0; padding-left:0; text-align:left;}
.reminder-detail .content .benefit-list li .cont-box {display:flex; flex-wrap:wrap; align-items: end; padding:20px; border:1px solid #e3e3e3; border-radius:12px;}
.reminder-detail .content .benefit-list li .cont-box .title {width:100%; margin-bottom:4px; font-weight:700; font-size:16px; color:var(--color-black);}
.reminder-detail .content .benefit-list li .cont-box .title span{font-size:0.8em; color:#777; font-weight: normal;}
.reminder-detail .content .benefit-list li .cont-box .desc {flex:1; font-weight:400; font-size:15px; color:#686868;}
.reminder-detail .content .benefit-list li .cont-box .btn-link,
.reminder-detail .content .giftbox-list li .cont-box .btn-link {position:relative; display:block;font-weight:500; font-size:13px; color:#232323;}
.reminder-detail .content .benefit-list li .cont-box .btn-link::after,
.reminder-detail .content .giftbox-list li .cont-box .btn-link::after {content:""; display:inline-block; width:6px; height:6px; margin:0 0 2px 4px; border-top:1px solid #232323; border-right:1px solid #232323; transform:rotate(45deg);}
.reminder-detail .content .benefit-list li .cont-box.icon-iptv::before {content:""; display:inline-block; width:34px; height:34px; margin-bottom:12px; background:url(../images/icon/icon-benefit-iptv.png) no-repeat center; background-size: contain;}
.reminder-detail .content .benefit-list li .cont-box.icon-udoc::before {content:""; display:inline-block; width:90px; height:19px; margin-bottom: 12px; background:url(../images/icon/premium_logo.png) no-repeat center; background-size: contain;}
.reminder-detail .content .benefit-list li .cont-box.icon-tving::before {content:""; display:inline-block; width:90px; height:19px; margin-bottom: 12px; background:url(../images/icon/tving_logo.png) no-repeat center; background-size: contain;}
.reminder-detail .content.benefit-content,
.reminder-detail .content.notice-content {padding:20px; background-color:#f7f7f7; border-radius:12px;}
.reminder-detail .content.benefit-content .cont-title,
.reminder-detail .content.notice-content .cont-title {font-size:18px !important;}
.reminder-detail .content.benefit-content .cont-title::before {content:""; display:inline-block; width:18px; height:18px; margin:0 5px -3px 0; background:url(../images/icon/icon-key-point.png) no-repeat; background-size:contain;}
.reminder-detail .content.benefit-content .cont-title.no-icon::before {display:none;}
.reminder-detail .content.benefit-content .row2 {margin-top:20px; padding-top:20px; border-top:1px solid #ddd;}
.reminder-detail .content.notice-content {background-color:#eff5fb !important;}
.reminder-detail .content.gift-content {overflow: hidden; position:relative;}
.reminder-detail .content.gift-content .img-gift {width:100%}
.reminder-detail .content.gift-content .img-text {position:absolute; bottom:0; padding:20px;}
.reminder-detail .content.gift-content .img-text .cont-sub-title {padding-bottom:12px; font-size:20px; border-bottom:1px solid #000;}
.reminder-detail .content.gift-content.gift-LPZ0002872 * {color:#fff !important;}
.reminder-detail .content.gift-content.gift-LPZ0002872 .img-text .cont-sub-title,
.reminder-detail .content.gift-content.gift-LPZ0002816 .img-text .cont-sub-title {border-bottom:1px solid #fff}

.benefit-swiper {padding-bottom:12px;}
.benefit-swiper .swiper-pagination {top:auto; bottom:0;}
.benefit-swiper .swiper-pagination-progressbar {overflow:hidden; height:3px; background-color:#e5e5e5; border-radius:10px;}
.benefit-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:#000;}

.giftbox-wrap {padding-bottom:15px;}
.giftbox-wrap .giftbox-list figure img {width:100%;}
.giftbox-wrap .giftbox-list .gift-cont {margin-top:16px;}
.giftbox-wrap .giftbox-list .gift-cont dt {font-size:18px; color:#000; font-weight:600;}
.giftbox-wrap .giftbox-list .gift-cont dd {margin-top:4px;}
.giftbox-wrap .giftbox-list .btn-link {margin-top:10px;}
.giftbox-wrap .giftbox-list-1 li {width:100%; padding-left:0 !important;}
.giftbox-swiper .swiper-slide {margin-top:0 !important; padding-left:0 !important;}
.giftbox-swiper .swiper-pagination {top:auto; bottom:-0;}
.giftbox-swiper .swiper-pagination-progressbar {overflow:hidden; height:3px; background-color:#e5e5e5; border-radius:10px;}
.giftbox-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color:#000;}


/* SNS 공유 */
#shareLayer .modal-inbox {min-height:230px;}
#shareLayer .share-list {display:flex; justify-content:center; margin-top:15px;}
#shareLayer .share-list li {width:33.33%; text-align: center;}
#shareLayer .share-list li button {display: flex; flex-wrap: wrap; justify-content: center; position:relative; width: 100%;}
#shareLayer .share-list li button::before {content:""; display:block; width:60px; height:60px; margin-bottom:16px; border-radius:50%;}
#shareLayer .share-list li span {position:relative; display: block; width: 100%; font-weight:600; font-size:16px; color:var(--font-color2);}
#shareLayer .share-list li .icon-kakao::before {background:url(../img/icon/icon-kakao.svg); background-size: contain;}
#shareLayer .share-list li .icon-facebook::before {background:url(../img/icon/icon-facebook.svg); background-size: contain;}
#shareLayer .share-list li .icon-url::before {background:url(../img/icon/icon-url.svg); background-size: contain;}


/****************************************
# 단기유심
****************************************/
#reservationWrap .title {display: flex; align-items: flex-end; margin-bottom:20px; padding-bottom: 8px; font-weight: 600; font-size: 18px; color: var(--color-black); border-bottom: 1px solid var(--color-black);}
#reservationWrap .title.no-border {border-bottom: 0; margin-bottom: 0; padding-bottom: 4px;}
#reservationWrap .title .remark {margin-left: auto; font-size: 14px; text-align: right; color: var(--color-main);}
#reservationWrap + #tabWrap {margin-top: 40px;}
#reservationWrap article {}
#reservationWrap article + article {margin-top:50px;}

/* 부호 */
.refer {position: relative; margin-top: 6px; padding-left: 20px; font-weight: 400; color: var(--font-color2); font-size: 14px;}
.refer::before {content: "※"; display: inline-block; position: absolute; left: 0; top: 0; font-size: 20px;; line-height: 1;}
.star {position: relative; margin-top: 6px; padding-left: 12px; font-weight: 400; color: var(--font-color2); font-size: 14px;}
.star::before {content: "*"; display: inline-block; position: absolute; left: 0; top: 2px; font-size: 18px;; line-height: 1;}


/* 요금제 정보 */
.plan-info {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 30px;}
.plan-info .name {width: 100%; font-weight: 700; font-size: 20px;}
.plan-info .name > span  {font-weight: 700;}
.plan-info .price {font-weight: 700; font-size: 20px; color: var(--color-main);}

/* 옵션 */
.options .option-item + .option-item {margin-top: 30px;}
.options .option-item .option-title {font-weight: 600; margin-bottom: 8px; font-size: 16px;}

/* 일수 */
.date-swiper {padding-bottom: 30px;}
.date-swiper .swiper-wrapper {width: 100% !important; height:465px !important; margin-left: auto; margin-right: auto;}
.date-swiper .swiper-slide {display: flex; justify-content: center; width: 50% !important; align-items: center; text-align: center; font-size: 18px; background: #fff;}
.date-swiper .date-label {width: 100%; height: 100%;}
.date-swiper .date-label p {width: 100%;}
.date-swiper .date-label .day {font-weight: 300; color: var(--font-color1); font-size: 15px;}}
.date-swiper .date-label .price {font-weight: 800; color: var(--color-main); font-size: 17px;}
.date-swiper .date-label .vat {font-weight: 300; color: var(--font-color3); font-size: 13px; word-break:break-all;}
.date-swiper .date-label .spec {font-weight: 300; color: var(--font-color3); font-size: 13px;}
.date-swiper .date-label .spec > span {color: var(--color-main);}

.data-box .data-list{display:flex; flex-wrap: wrap;}
.data-box .data-list li{width: calc(100%/3 - 7px); margin:0 10px 10px 0;}
.data-box .data-list li:nth-child(3n){margin-right: 0}
.data-box .data-list li label{background:var(--color-gray-brighter2); width: 100%; height: 100%; border-radius: 6px; padding:15px; text-align: center;}
.data-box .data-list li p {width: 100%;}
.data-box .data-list li .day {font-weight: 500; color: var(--font-color1); font-size: 15px;}
.data-box .data-list li .base {text-decoration: line-through; font-size: 13px; margin-top: 3px;}
.data-box .data-list li .price {font-weight: 700; color: var(--color-main); font-size: 17px;}
.data-box .data-list li .vat {font-weight: 300; color: var(--font-color3); font-size: 12px; word-break:break-all;}
.data-box .data-list li .spec {font-weight: 300; color: var(--font-color3); font-size: 14px; margin-top: 3px;}
.data-box .data-list li .spec > span {color: var(--color-main);}
.data-box .data-list li input[type="checkbox"]:checked + label {position: relative; color: var(--color-main); background: var(--color-lightpink1);}
.data-box .data-list li  input[type="checkbox"]:checked + label:after {content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; top: 0; left: 0; border:2px solid var(--color-main); border-radius: 6px; transform: rotate(0deg);}
.data-box .data-list li input[type="radio"]:checked + label {position: relative; color: var(--color-main); background: var(--color-lightpink1);}
.data-box .data-list li  input[type="radio"]:checked + label:after {content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; top: 0; left: 0; border:2px solid var(--color-main); border-radius: 6px; transform: rotate(0deg);}
.data-box .data-list li  input[type="radio"]:checked .price {color: var(--color-main);}

/* Total */
.total-sect {padding: 20px; border-radius: 12px; background: var(--color-lightpink1); border: 1px solid var(--color-main);}
.total-sect .title {font-weight: 600; font-size: 16px}
.total-sect .desc {color: var(--font-color3); font-size: 15px;}
.total-sect .price {margin-top: 10px; text-align: right; font-weight: 700; font-size: 20px; color: var(--color-main);}
.total-sect .price > span {font-weight:inherit;}


/* location */
.location-sect {}
.location-sect .title {font-weight: 600; font-size: 18px; margin-bottom: 8px;}
.location-sect .location-info {margin-top: 10px;}
.location-sect .content {margin-top: 10px;}
.location-sect .content .map-name {font-size: 18px; font-weight: 500; margin-bottom: 8px; color: var(--font-color3);}
.location-sect .content ul li {color: var(--font-color3);}

.sim-location {border: 1px solid #ddd; border-radius: 6px; padding: 20px;}
.sim-location + .sim-location {margin-top: 20px;}
.sim-location .info {line-height: 1.5; text-align: center;}
.sim-location .info .map-name {font-weight: 600; font-weight: 17px ; margin-bottom: 5px;}
.sim-location .info .time {color: var(--color-blue2);}
.sim-location .map{margin-top: 10px;}

/* eSIM 이용 방법 */
.guide-swiper {padding: 30px 30px 60px;}
.guide-swiper .swiper-wrapper {width: 100% !important; margin-left: auto; margin-right: auto;}
.guide-swiper .swiper-slide {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; font-size: 18px;}
.guide-swiper .swiper-slide .step { font-weight: 500; color: var(--color-main); width: 100%;}
.guide-swiper .swiper-slide .guide-img {width: 159px; padding: 20px 0;}
.guide-swiper .swiper-slide .desc {width: 100%;}
.guide-swiper .swiper-pagination {bottom: 20px;}
.guide-swiper .swiper-button-prev {left: 20px;}
.guide-swiper .swiper-button-next {right: 20px;}

/* 상세내용 */
.content-area {padding-bottom: 60px;}
.content-area .title {font-weight:700; font-size: 20px; margin-bottom: 12px;}
.content-area .sub-title {font-weight:500; font-size: 16px; margin-bottom: 6px; color: var(--font-color1);}
.content-area .title-btn {}
.content-area .title-btn .btn-def {margin-bottom:20px;}
.content-area .item {position: relative;}
.content-area .item.bg {padding: 16px; background-color: var(--color-gray-brighter4); border-radius: 12px;}
.content-area .content-title {font-size: 18px; color: var(--badge-condition); margin-bottom: 6px;}
.content-area ul li {position:relative; font-weight:400; font-size:16px; color:var(--font-color2); line-height:1.5; word-break:break-all;}
.content-area ul li + li {margin-top:6px}
.content-area ul li > ul {margin-top:4px}
.content-area .num-list {counter-reset: num 0;}
.content-area .num-list li {padding-left:23px;}
.content-area .num-list li:before {content:counter(num)"."; counter-increment:num 1; position:absolute; left:0; top:0;}
.content-area .desc-list > li {padding-left:12px !important;}
.content-area .desc-list > li::before {content:""; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--color-black);}
.content-area .dot-list > li {padding-left:12px !important;}
.content-area .dot-list > li::before {content:""; position:absolute; left:0; top:9px; width:3px; height:3px; background:var(--color-black); border-radius: 50%;}
.content-area .text {margin: 20px 0 6px;}
.content-area ul + .sub-title {margin-top:16px} 
.content-area table + ul {margin-top:6px}

.content-area .service-steps {display: flex; margin:0 -10px;}
.content-area .service-steps + .service-steps {margin-top:20px} 
.content-area .service-steps .service-item {width: 100%; height: 100%; padding:0 10px;; text-align: center;}
.content-area .service-steps .service-item .step-top {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px; color: var(--color-skyblue2);  background-color: var(--color-darkblack); border-radius: 12px 12px 0 0;}
.content-area .service-steps .service-item .type {width: 100%;  line-height: 1.2; word-break: break-word;}
.content-area .service-steps .service-item .type > span {font-size: 13px; color: var(--color-point);}
.content-area .service-steps .service-item .way {width: 100%; padding-top: 5px; background-color: var(--color-darkblack);}
.content-area .service-steps .service-item .step-list {display: flex; flex-direction: column; height: 100%; background-color: var(--color-lightpurple2); border-radius: 0 0 12px 12px;}
.content-area .service-steps .service-item .step-list li {position: relative; padding: 20px 0;}
.content-area .service-steps .service-item .step-list li::after {content: ""; position: absolute; bottom: 0; right: 50%; width:6px; height:6px; border-top:2px solid var(--color-black); border-right:2px solid var(--color-black); transform:translateY(50%) rotate(135deg);}
.content-area .service-steps .service-item .step-list li:last-child::after {display: none;}
.content-area .service-steps .service-item .step-list li .img {}
.content-area .service-steps .service-item .step-list li .number {color: var(--color-main);}
.content-area .service-steps .service-item .step-list li .desc {margin-top:6px; line-height: 1.4;}
.content-area .service-steps .service-item.self .step-list {background-color: var(--color-gray-brighter1);}
.content-area .service-steps .service-item.self .step-list li {height: 33.33%;}
.content-area .service-steps .service-item.visit .step-list {background-color: var(--color-gray-brighter2);}
.content-area .service-steps .service-item.visit .step-list li {height: 25%;}

.content-area .qna-list {}
.content-area .qna-list dt {padding-bottom:8px; font-weight: 600; color: var(--color-main);}
.content-area .qna-list dd {margin-bottom: 30px; font-weight: 400;}
.content-area .qna-list dd:last-child {margin-bottom: 0;}

.advantage-list {}
.advantage-list li {display: flex; align-items: center; position: relative; padding: 20px; border:1px solid var(--color-gray-light); border-radius: 12px;}
.advantage-list .icon {flex-shrink: 0; width: 64px; height: 64px; margin-right: 20px; background-size: contain; background-repeat: no-repeat;}
.advantage-list .icon.icon-advtg01 {background-image: url("https://ksimcard.co.kr/assets/img/icon/img_advantage01.png");}
.advantage-list .icon.icon-advtg02 {background-image: url("https://ksimcard.co.kr/assets/img/icon/img_advantage02.png");}
.advantage-list .icon.icon-advtg03 {background-image: url("https://ksimcard.co.kr/assets/img/icon/img_advantage03.png");}
.advantage-list .desc {font-size:16px; font-weight: 300; color: var(--font-color1);}
.advantage-list .desc > strong {font-weight:600;}

.step-wrap {padding-bottom:20px;}
.step-wrap li {position: relative; padding:20px; text-align:center; border:1px solid var(--color-gray-light); border-radius: 12px;}
.step-wrap li .number {width:100%; color:var(--color-main); font-size:20px; font-weight:500;x}
.step-wrap li .img {width:100%; max-width:156px; margin:10px auto 20px; font-size:18px;}
.step-wrap li .text {width:100%; font-size:16px; word-break: break-all;}

/*  이심 타입에 따른 안내 문구 노출- 250421 */
.content-type {display: none; margin-top: 20px; padding-bottom: 0;}
.content-type.active {display: block;}

/****************************************
# 완료
****************************************/
.comp-sect {text-align: center; margin-bottom: 30px;}
.comp-sect .icon {max-width: 120px; margin: 0 auto 20px;}
.comp-sect .app-title {font-weight: 700; font-size: 21px;}
.comp-sect .title {font-weight: 500; font-size: 18px;}
.comp-sect .title span {font-weight: inherit;}
.comp-sect .res-id {margin-top: 20px; font-size: 21px; font-weight: 700;}
.comp-sect .desc {margin-top: 20px; font-size: 16px; line-height: 1.5; color: #444;}


/****************************************
# cs
****************************************/
/* faq */
.faq-list li {border-top:1px solid var(--color-gray-light);}
.faq-list li:last-child {border-bottom:1px solid var(--color-gray-light);}
.faq-list .question {display:flex; align-items:center; position:relative; padding:20px 25px 20px 5px;}
.faq-list .question::after {content:''; display:block; position:absolute; right:5px; top:50%; width:8px; height:8px; margin-top:-4px; border-bottom:2px solid var(--color-black); border-right:2px solid var(--color-black); transform:translateY(-50%) rotate(45deg);}
.faq-list .question .title {cursor:pointer; flex:1; font-size:16px; font-weight:600;}
.faq-list .answer {display:none; padding:0 5px 20px;}
.faq-list .answer p {color:var(--font-color2); font-weight:400; font-size:15px; line-height:1.5;}
.faq-list .answer dl {padding-top:20px;}
.faq-list .answer dl dt {display:inline-block; padding:1px 10px; font-size:13px; font-weight:500; color:var(--font-color1); border-radius:20px; background-color:var(--color-gray-light);}
.faq-list .answer dl dd {margin-top:5px; font-weight:400; font-size:15px; color:var(--font-color2); line-height:1.5;}
.faq-list li.on .question::after {border-color:#000; transform:translateY(50%) rotate(-135deg);}


/* 고객지원센터 */
.category-list li {width:50%;}
.category-list li .item {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; padding:20px; border-radius:12px; background-color:var(--color-gray-brighter2);}
.category-list li .item .icon {display:block; width: 100%; text-align: center;}
.category-list li .item .title {margin-top:10px; font-weight:600; font-size:16px;}

.cs-info + .cs-info {margin-top:50px;}
.cs-info .title {margin-bottom:12px; font-weight:700; font-size:18px;}
.cs-info .title-vn {display: inline-block; position: relative; padding-left: 35px;}
.cs-info .title-vn::before {content: ""; display: inline-block; position: absolute; top: 2px; left: 0; width: 30px; height: 20px; background:url(../img/icon/icon_country_vn.svg) no-repeat; background-size: contain;}

.eyagi-cs {padding: 20px; text-align: center; border-radius: 8px; background-color: var(--color-gray-brighter2);}
.eyagi-cs .title {margin-bottom:6px; font-weight: 700; font-size: 18px;}
.eyagi-cs .desc {font-weight: 400; font-size: 15px; color: var(--font-color2);}
.eyagi-cs .btn-group {justify-content: center; margin: 10px auto;}

.cs-info .mvno-box {padding: 20px; border-radius: 8px; border: 1px solid var(--color-gray-brighter);}
.cs-info .mvno-box .list li {display: flex;}
.cs-info .mvno-box .list li + li {margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-gray-brighter1);}
.cs-info .mvno-box .list li .label {margin: 0 4px; padding: 2px 5px; font-size: 13px; font-weight: 500; background-color: var(--color-speed-bg); border-radius: 6px; color: var(--color-speed);}
.cs-info .mvno-box .list li .name {}
.cs-info .mvno-box .list li .name .label {color: var(--font-color2); background-color: var(--color-gray-brighter1);}
.cs-info .mvno-box .list li .contact {flex: 1; text-align: right;}
.cs-info .mvno-box .list li .contact a {font-weight: 600;}
.cs-info .time-box {padding:12px 20px; text-align:center;  border-radius: 8px; border: 1px solid var(--color-gray-brighter);}
.cs-info .time-box .time {font-weight:400; font-size:16px;}
.cs-info .time-box .time > strong {font-weight:800; font-size:20px; color:var(--color-main);}
.cs-info .time-box .sub {font-weight:400; font-size:15px; color:var(--font-color2);}

.cs-info .counsel-item {display: flex; width: 100%; gap: 10px; border-radius: 8px;}
.cs-info .counsel-item .icon-cs {width: 38px; height: 38px;}
.cs-info .counsel-item .text-cs {font-size: 15px;}
.cs-info .counsel-item .text-cs .label {display: inline-block; height: 24px; line-height: 24px; padding:0 8px; font-size: 13px;  border-radius: 3px; color: var(--color-white); background-color: var(--color-blue2);}
.cs-info .counsel-item .id {margin-top: 10px; font-size: 14px;}
.cs-info .counsel-item .btn > span {font-weight: 500;}

.cs-info .sns-list li {width: 100%; padding:24px 20px; text-align: center; border-radius: 8px; border:1px solid var(--color-gray-brighter); box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.04);}
.cs-info .sns-list li .icon-cs {margin: 0 auto;}
.cs-info .sns-list li .btn {margin-top: 8px;}

.cs-info .call-box { margin-top: 10px; padding:20px; border:1px solid var(--color-gray-brighter); box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.04);}
.cs-info .call-box .icon-cs {margin-right: 10px;}
.cs-info .call-box .number {flex: 1; display: flex; align-items: center;}
.cs-info .call-box .number .id {margin-top: 0;}
.cs-info .call-box .btn {text-align: right;}

/* guide */
.guide-desc {margin-bottom:40px;}
.guide-desc .text {font-weight:400; font-size:16px; color:var(--color-main);}
.guide-desc .text + .text {margin-top:6px;}

.guide-box {}
.guide-box + .guide-box {margin-top:40px;}
.guide-box .title {font-weight:700; font-size:24px;}
.guide-box .refer {font-weight:400; font-size:16px; color:var(--font-color6);}
.guide-box .link {font-weight:700; font-size:16px; color:var(--font-color2);}
.guide-box .info {font-weight:300; font-size:16px; color:var(--font-color3); line-height:1.5;}

.certified-wrap {margin-top:40px; padding:40px 0; background-color:var(--color-skyblue2);}
.certified-list .icon-certi {position:relative; padding-left:20px; font-weight:200; border-radius:16px; color:var(--color-white); background-color:var(--color-darkblack);}
.certified-list .icon-certi::before {content:""; display:block; width:36px; height:36px; position:absolute; top:50%; transform: translateY(-50%);}
.certified-list .icon-certi-kakao::before {background:url(../img/icon/icon_certi_kakao.png); background-size: cover;}
.certified-list .icon-certi-pass::before {background:url(../img/icon/icon_certi_pass.png); background-size: cover;}  
.certified-list .icon-certi-toss::before {background:url(../img/icon/icon_certi_toss.png); background-size: cover;}
.certified-list .icon-certi-card::before {background:url(../img/icon/icon_certi_card.png); background-size:cover;}
.certified-list .icon-certi + .icon-certi {margin-top:12px;}
.certified-list .icon-certi a {position:relative; width:100%; padding:20px 20px 20px 50px;}
.certified-list .icon-certi a::after {content:""; display:block; position:absolute; right:20px; top:50%; width:8px; height:8px; border-top:2px solid var(--color-white); border-right:2px solid var(--color-white); transform:translateY(-50%) rotate(45deg);}


/* 가이드 */
.guide-sect {overflow:hidden; position:relative;}
.guide-sect .swiper {overflow:visible; margin:0 auto;}
.guide-sect .swiper .swiper-wrapper {align-items:center; padding-top:40px;}
.guide-sect .swiper .content-box {display:flex; flex-wrap:wrap; justify-content:center; position:relative; margin-top:10px;}
.guide-sect .swiper .content-box .img-guide {width:100%;}
.guide-sect .swiper .content-box .text {width:100%; padding:0 20px;}
.guide-sect .swiper .content-box .text .desc {margin-bottom:20px; font-weight:400; font-size:16px; word-break: keep-all;}
.guide-sect .swiper .content-box .img-guide {width:100%; max-width:320px;}
.guide-sect .swiper .content-box .img-guide img {width:100%;}
.guide-sect .pagination {position:absolute; top:0; left:50%; width:100%; color:var(--color-white); background-color:transparent; transform: translateX(-50%);}

.point-box {position:relative;}
.point-box ul li {display:flex; align-items: center; box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);padding:20px 24px;border-radius:12px;}
.point-box ul li + li {margin-top:12px;}
.point-box ul li .img {width:74px; height:74px; margin-right:10px;}
.point-box ul li .text {flex:1;}
.point-box ul li .text .title {font-weight:600; font-size:18px;}
.point-box ul li .text .desc {margin-top:8px; font-weight:400; font-size:14px; color:var(--font-color3); word-break: keep-all;}


/****************************************
# 모달
****************************************/
.modal-popup {display:none; z-index:100000; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; padding:0 20px; transform:translateZ(0); background:rgba(0,0,0,.7); box-sizing:border-box;}
.modal-popup .modal-inbox {display:flex; flex-direction:column; position:relative; top:50%; width:100%; max-width:860px; min-height:auto; max-height:85vh; margin:0 auto; border-radius:12px; background-color:#fff; transform:translateY(-50%); overflow: hidden;}
.modal-popup .modal-inbox .close {z-index:1; position:absolute; top:50%; right:20px; font-size:0; width:16px; height:16px; text-indent:-9999px; transform:translateY(-50%); background:url('../img/icon/btn_pop_close.png') no-repeat center center;}
.modal-popup .modal-top {position:relative;}
.modal-popup .modal-top .title {padding:24px 20px; font-weight:600; font-size:18px;}
.modal-popup .modal-top .title > span {font-weight:inherit;}
.modal-popup .modal-content {overflow-y:auto; position:relative; height:100%; padding:0 20px;}
.modal-popup .modal-content .content-title {margin: 20px 0 30px; text-align: center; font-weight: 300; font-size: 18px;}
.modal-popup .modal-content .content-box {margin-bottom:20px;}
.modal-popup .modal-content .content-box .inform-text {margin-top: 3px; font-weight:500; font-size:16px; line-height:1.5;}
.modal-popup .modal-content .content-box .inform-text:first-child {margin-top: 0;}
.modal-popup .modal-content .content-box .inform-text.last {margin-top:15px; color:var(--font-color2);}
.modal-popup .modal-content:last-child {padding-bottom:20px;}
.modal-popup .modal-content .content {position:relative;}
.modal-popup .modal-content .content + .content {margin-top:40px;}
.modal-popup .modal-content .content .cont-title {margin-bottom:8px; font-weight:500; font-size:16px;}
.modal-popup .modal-content .content ul {width:100%}
.modal-popup .modal-content .content ul li {position:relative; padding-left:12px; font-weight:400; font-size:14px; color:var(--font-color2); line-height:1.4; word-break:break-all;}
.modal-popup .modal-content .content ul li + li {margin-top:8px}
.modal-popup .modal-content .content ul li > ul {margin-top:4px}
.modal-popup .modal-content .content .num-list {counter-reset: num 0;}
.modal-popup .modal-content .content .num-list > li {padding-left:24px;}
.modal-popup .modal-content .content .num-list > li:before {content:counter(num)"."; counter-increment:num 1; position:absolute; left:0; top:0;}
.modal-popup .modal-content .content .desc-list li {padding-left:12px !important;}
.modal-popup .modal-content .content .desc-list li::before {content:""; position:absolute; left:0; top:8px; width:6px; height:1px; background:var(--font-color2);}
.modal-popup .modal-content .content table th,
.modal-popup .modal-content .content table td {font-size:14px;}
.modal-popup .modal-content .content table td {font-weight:400; color:var(--font-color2);}
.modal-popup .modal-content .content table + ul {margin-top:4px;}
.modal-popup .modal-content .content .scroll-table {width:100%; overflow:auto;}
.modal-popup .modal-content .content .scroll-table table {width:620px !important;}
.modal-popup .modal-content .content .scroll-table p {margin-top:4px; font-weight:400; font-size:14px; color:var(--font-color2); line-height:1.4;}
.modal-popup .modal-content .content .scroll-table + ul {margin-top:8px}
.modal-popup .modal-button {display:flex; box-sizing:border-box; padding:20px;}
.modal-popup .modal-button > :not(:first-child) {margin-left:6px;}
.modal-popup .modal-button > :not(:last-child) {margin-right:6px;}
.modal-popup .modal-button.full_button {flex-wrap:wrap;}
.modal-popup .modal-button.full_button .btn_style,
.modal-popup .modal-button.full_button .btn {margin:0}
.modal-popup .modal-button.full_button .btn_style:last-child,
.modal-popup .modal-button.full_button .btn + .btn {margin-top:8px;}
.modal-popup .modal-button .btn-s {height: 46px;}

.modal-popup .query {font-weight:600; font-size:16px; color: var(--color-black);}
.modal-popup .query-select {font-weight:700; font-size:16px; color: var(--color-black);}
.modal-popup .query-desc {font-weight:400; font-size:15px; color: var(--font-color2); margin-top: 6px;}
.modal-popup .query-dl {padding-top: 10px;}
.modal-popup .query-dl dt {font-weight: 600; font-size: 15px; color: var(--font-color1);}
.modal-popup .query-dl dd {font-weight: 400; font-size: 15px; color: var(--font-color2); padding-top: 4px;}
.modal-popup .query-label {margin-top: 20px; padding: 20px; color: var(--color-blue); background-color: var(--color-skyblue); border-radius: 12px;}
.modal-popup .query-label dt {display: inline-block; height: 28px; line-height: 28px; padding: 0 15px; font-size: 15px; background-color: var(--color-blue2); color: var(--color-white); border-radius: 20px;}
.modal-popup .query-label dd {margin-top: 10px; color: var(--font-color1);}

.modal-popup .detail-list {}
.modal-popup .detail-list dl {display: flex; border-top: 1px solid var(--color-gray-light);}
.modal-popup .detail-list dl dt {width: 100px; padding:6px 10px; border-right: 1px solid var(--color-gray-light); background-color: var(--color-gray-brighter4);}
.modal-popup .detail-list dl dd {padding: 10px 20px; }


.mask-slide-info {z-index:111; display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; padding:0 20px; transform:translateZ(0); background:rgba(0,0,0,.6); box-sizing:border-box;}
.mask-slide-info .mask-inner {display:flex; flex-direction:column; justify-content: center; align-items: center; height: 100%; text-align: center;}
.mask-slide-info .bg-img {position:relative; width:260px;}
.mask-slide-info .desc {padding-top:20px; font-size:18px; color:var(--color-white);}


/* 모달 사이즈 */
.modal-popup.modal-wid-320 .modal-inbox {max-width:320px;}
.modal-popup.modal-wid-340 .modal-inbox {max-width:340px;}
.modal-popup.modal-wid-380 .modal-inbox {max-width:380px;}
.modal-popup.modal-wid-420 .modal-inbox {max-width:420px;}
.modal-popup.modal-wid-440 .modal-inbox {max-width:440px;}
.modal-popup.modal-wid-480 .modal-inbox {max-width:480px;}
.modal-popup.modal-wid-520 .modal-inbox {max-width:520px;}
.modal-popup.modal-wid-540 .modal-inbox {max-width:540px;}
.modal-popup.modal-wid-580 .modal-inbox {max-width:580px;}
.modal-popup.modal-wid-620 .modal-inbox {max-width:620px;}
.modal-popup.modal-wid-640 .modal-inbox {max-width:640px;}
.modal-popup.modal-wid-680 .modal-inbox {max-width:680px;}
.modal-popup.modal-wid-720 .modal-inbox {max-width:720px;}
.modal-popup.modal-wid-740 .modal-inbox {max-width:740px;}
.modal-popup.modal-wid-780 .modal-inbox {max-width:780px;}


/* 모달 브랜드 문구 */
.modal-top .operer {text-align: right; margin-left: auto; margin-right: 20px;}
.modal-top .operer .text {margin-bottom: 4px; color: var(--font-color2); font-size: 13px; font-weight: 400;}
.modal-top .operer .logo {width:auto; height: 16px;}
.modal-popup .check-list {display:flex; margin:16px 0 20px;}
.modal-popup .check-list li {width: calc(100%/3); margin-top:0 !important; padding:0 !important; text-align: center;}
.modal-popup .check-list li .icon-img {display: flex; justify-content:center; align-items:center; width:58px; height:58px; margin:0 auto; background-color:var(--color-gray-brighter1); border-radius:50%;}
.modal-popup .check-list li .icon-img img {display:table-cell; width:36px;}
.modal-popup .check-list li p {margin-top:10px; font-weight:400; font-size:16px; color:var(--color-black); word-break:keep-all;}
.modal-popup .brand-desc {margin: 30px 0 10px; padding-top: 20px; color: var(--font-color2); border-top: 1px solid var(--color-gray-brighter1);}
.modal-popup .brand-desc p {line-height: 1.5; font-size: 16px;}
.modal-popup .brand-desc p + p {margin-top: 8px;}
.modal-popup .brand-desc img {width:auto; height: 16px; margin-right: 4px; vertical-align: baseline;}
.modal-popup .brand-desc .brand_img {height: 15px; vertical-align: baseline;}

/* 본인인증 팝업 */
.modal-popup .auth-step .step-list li {display:flex; width:100%; align-items: center;}
.modal-popup .auth-step .step-list li + li {margin-top:8px;}
.modal-popup .auth-step .step-list li .img {width:56px; height:56px; margin:0 auto; border-radius:50%; background:#f7f7f7; display:flex; align-items: center; justify-content: center;}
.modal-popup .auth-step .step-list li .img img {width:32px;}
.modal-popup .auth-step .step-list li .txt {width:100%; margin-left:16px; text-align:left;}
.modal-popup .auth-step .step-list li .txt span {display: block; margin-bottom:2px; font-size:0.85em; color:#f1516c; font-weight: normal;}
.modal-popup .auth-step .step-box {background:#F6F4F4; padding:20px; margin-top:20px;}  
.modal-popup .auth-step .step-box p {word-break: break-word;}

/* 메인팝업 */
.main-popup-sect  {z-index: 1000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 620px; margin: 0 auto; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .6);}
.main-popup-sect .inner {overflow: hidden; position: absolute; bottom: 0; width: 100%; padding:0; background-color: var(--color-white); border-radius: 12px 12px 0 0;}
.main-popup-sect .swiper {padding: 0;}
.main-popup-sect .swiper .swiper-slide a {width: 100%}
.main-popup-sect .swiper-bottom {position: absolute; top: 10px; right: 10px; display: flex;}
.main-popup-sect .swiper-bottom .pagination {position: static; width: max-content; height: 24px;}
.main-popup-sect .swiper-bottom .swiper-control {width: 24px; height: 24px; color:var(--color-white); background-color:rgba(0,0,0,.45);; border-radius:25px}
.main-popup-sect .swiper-pagination-current {padding-right: 4px;}
.main-popup-sect .swiper-pagination-total {padding-left: 4px;}
.main-popup-sect .close-wrap {display: flex; width: 100%; padding:16px 20px;}
.main-popup-sect .close-wrap .btn-close {font-size: 16px; font-weight: 600; color: var(--color-black);}
.main-popup-sect .close-wrap .btn-close.today {margin-right: auto; text-align: left;}


/****************************************
# 퀵메뉴
****************************************/
.quick{position: fixed; width:100%; max-width: 620px; left:50%; bottom: 0; transform: translateX(-50%); text-align: right; z-index: 999;}
.quick .sns{position:absolute; bottom:20px; right: 20px;}
.quick .sns img{max-width:45px;}
.quick.offset .sns{bottom:85px;}


/****************************************
# 이벤트
****************************************/
/* 리스트 */
.event-list {display:flex; flex-wrap:wrap;}
.event-list li {overflow:hidden; border-radius:8px; width:100%; border: 1px solid var(--color-gray-brighter1);}
.event-list li + li {margin-top:16px;}
.event-list li .thumbnail {width:100%;}
.event-list li .content {padding:15px;}
.event-list li .content .title {font-weight:600; font-size:17px; color:var(--color-black); line-height:1.4;}
.event-list li .content .date {margin-top:3px; color:var(--font-color3); font-weight:400; font-size:15px;}

/* 상세페이지 */
.event-view {padding-bottom:60px;}
.event-view .header-box {display:flex; align-items:center; flex-wrap:wrap; margin-bottom:16px; padding:30px 16px 0;}
.event-view .header-box .prog {width:100%;}
.event-view .header-box .prog > span {display:inline-block; margin-bottom:3px; padding:5px 10px 4px; font-weight:300; font-size:13px; background-color:var(--color-black); color:var(--color-white); border-radius:3px;}
.event-view .header-box .prog > span.end {background-color:var(--font-color4);}
.event-view .header-box .prog > span.before {background-color:var(--color-main);}
.event-view .header-box .title {flex:1; width:100%; padding-right:3px; font-weight:700; font-size:18px; color:var(--color-black); line-height:1.4;}
.event-view .header-box .date {width:100%; margin-top:3px; color:var(--font-color3); font-weight:400; font-size:15px;}
.event-view .header-box .btn-icon .icon-share {width:24px; height:24px; background:url(../images/icon/icon_share.png) no-repeat; background-size:contain;}
.event-view .content-box img {display:block; width:100%;}
.event-view .btn-event-list {display: flex; justify-content: center; padding-top: 40px;}

.event-notice {padding:40px 20px 0; text-align:left; word-break: break-word;}
.event-notice h4,
.event-notice > p:first-child {font-size:20px; font-weight: 700; margin-bottom: 15px;}
.event-notice > p {margin-top: 4px; font-weight: 400; line-height: 1.5; font-size:15px; color: var(--font-color2); word-break: break-word;}
.event-notice > p > strong {margin:20px 0 10px 0; font-weight: 600}
.event-notice > p > span {color: inherit !important;}
.event-notice a {color:var(-color-main); text-decoration:underline;}
.event-notice .marker{color:var(-color-main); font-weight: 400}
.event-notice table {margin:10px 7px 0 7px; width: calc(100% - 14px) !important;}
.event-notice table, 
.event-notice table td, 
.event-notice table th {border : 1px solid rgba(255,255,255,0.5); border-collapse : collapse;}
.event-notice table td {padding:7px; font-size: 14px; font-weight: 300}



/****************************************
# 이벤트 리뉴얼
****************************************/
.event-plan {position: relative; padding:10px 20px;}
.event-plan .plan-wrap {cursor: pointer; position: relative; padding:20px; border: 1px solid var(--color-gray-light); border-radius: 10px;}
.event-plan .plan-wrap .plan-item {display: flex; flex-wrap: wrap;}
.event-plan .plan-item .title-box {display:flex; align-items:center; width:100%; margin-bottom:16px;}
.event-plan .plan-item .title-box .badge-point {overflow: visible; position: absolute; width:100%; height:60px; margin-top: -15px;}
.event-plan .plan-item .title-box .badge-point .badge-area {display: flex; justify-content: right;}
.event-plan .plan-item .title-box .badge-point .badge-area img {width:56px; height:56px;}
.event-plan .plan-item .title-box .badge-point + .plan {padding-top:30px}
.event-plan .plan-item .title-box .tag {height: 20px; line-height: 20px; padding:0 6px; margin-right:8px; font-weight: 600; font-size:12px; color:var(--color-white); background-color:var(--text-primary); border-radius:4px; text-align:center;}
.event-plan.lgt .plan-item .title-box .tag {background-color:var(--color-lgt-bg); color: var(--color-lgt);}
.event-plan.skt .plan-item .title-box .tag {background-color:var(--color-skt-bg); color: var(--color-skt);}
.event-plan.kt .plan-item .title-box .tag {background-color:var(--color-kt-bg); color: var(--color-kt);}
.event-plan .plan-item .title-box .name {color:var(--font-color2); font-size:14px;}
.event-plan .plan-item .spec-box {flex: 1; display: flex; flex-wrap: wrap; gap: 6px 8px;}
.event-plan .plan-item .spec-box dl {display: flex; align-items: center;}
.event-plan .plan-item .spec-box dl dt {position: relative; width:18px; height:18px; margin-right: 6px; padding-left: 20px;}
.event-plan .plan-item .spec-box dl dd {font-size: 15px; font-weight: 400; color: var(--font-color2);}
.event-plan .plan-item .spec-box dl.data {width: 100%;}
.event-plan .plan-item .spec-box dl.data dd {font-size: 20px; font-weight: 700; color: var(--font-color1);}
.event-plan .plan-item .spec-box dl.data dt {background:url(../img/icon/icon-plan-data.svg) no-repeat center; background-size: 15px auto;}
.event-plan .plan-item .spec-box dl.call dt {background:url(../img/icon/icon-plan-call.svg) no-repeat center; background-size: 14px auto;}
.event-plan .plan-item .spec-box dl.sms dt {background:url(../img/icon/icon-plan-sms.svg) no-repeat center; background-size: 15px auto;}
.event-plan .plan-item .price-box {text-align:right; width:auto;}
.event-plan .plan-item .price-box .current {font-size:20px; color:var(--color-main); font-weight:800;}
.event-plan .plan-item .price-box .current span {font-size:0.85em; color:inherit; font-weight:400;}
.event-plan .plan-item .price-box .origin {margin-top:2px; color: var(--font-color2); font-size: 14px;}
.event-plan .plan-item .plus-list {width: 100%; margin-top: 10px;}
.event-plan .plan-item .plus-list li {font-size:12px; color:var(--font-color3); position:relative; font-weight:400;}
.event-plan .plan-item .plus-list li:before {display:inline-block; content:"·"; margin-right:5px;}
.event-plan .plan-item .plus-list li + li {margin-top:5px;}
.event-plan .plan-item .plus-list .point {color:var(--color-main);}
.event-plan .event-btn {display: block; width: 100%; margin-top: 15px; text-align: center}
.event-plan .event-btn .btn-join {display: block; width: 100%; height: 40px; line-height: 40px; background-color: var(--event-btn-bg); color: var(--event-btn-text); border: 1px solid var(--event-btn-border); border-radius: 6px;}
.event-plan .event-btn .btn-join span {display: inline; position: relative; padding-right: 15px; font-weight:700; font-size: 14px;}
.event-plan .event-btn .btn-join span::after {content:""; position:absolute; top:50%; right: 0; width:6px; height:6px; font-size: 0; border:1px solid; border-width:1px 0 0 1px; color: inherit; transform: translate(-50%, -50%) rotate(130deg);}
.event-plan .benefit-list {width: 100%; margin-top: 10px;}
.event-plan .benefit-list li {display: flex; }
.event-plan .benefit-list .custom-desc .icon {display: inline-block; width: 20px; height: 20px; margin-top: -2px; margin-right: 8px;}
.event-plan .benefit-list .custom-desc .icon.icon-gift {background: url('../img/event/event-icon-custom.svg') no-repeat; background-size: contain;}
.event-plan .benefit-list .custom-desc .text {font-size: 13px; color: var(--color-blue2);}

.event-plan.soldout .plan-wrap {cursor: auto;}
.event-plan.soldout .plan-wrap::before {z-index: 2; content:"";  position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.5); border-radius: 12px;}
.event-plan.soldout .plan-wrap::after {z-index: 3; content:""; display:block; position:absolute; left:50%; top:50%; width:160px; height:25px; background:url(../img/event/text_soldout.png) no-repeat; background-size: contain; transform: translate(-50%, -50%);}



@media (max-width: 620px) {
    .data-box .data-list li{width: calc(100%/2 - 5px);}
    .data-box .data-list li:nth-child(3n){margin-right: 10px}
    .data-box .data-list li:nth-child(2n){margin-right: 0px}
}
@media (max-width: 400px) {
    .data-box .data-list li .vat {display: block;}
}
@media screen and (min-width:700px)  {
    /****************************************
    # 모달
    ****************************************/
    .modal-popup .modal-top .title {padding:20px; font-weight:700; font-size:18px;}
    .modal-popup .modal-content {overflow-y:auto; position:relative; height:100%; padding:0 20px;}
    .modal-popup .modal-content:last-child {padding-bottom:20px;}
    .modal-popup .notice-box {margin-top:0;}
    .modal-popup .notice-box ul li {font-size:16px;}
}



@media (min-width: 520px) {
    /* layout */
    .inner {padding:0 30px;} 
}




/****************************************
# 신청내역조회
****************************************/
.form-wrap {position: relative;}
.form-wrap + .form-wrap {margin-top: 26px;}
.form-wrap + .btn-group {margin-top: 30px;}
.form-wrap .label {margin-bottom: 8px; font-size:16px; font-weight: 600;}

.radio-box {display: flex; gap: 8px;}
.radio-box li {width: 100%;}

input[type="radio"] + .def-label {padding: 0 20px; justify-content: center;}
input[type="radio"] + .def-label::before {display: none;}
input[type="radio"]:checked + .def-label {color: var(--color-main);}

.input-box {display: flex; flex-wrap: wrap;}
.input-box .cell {flex: 1; position: relative; padding-right: 8px;}
.input-box .btn {width: 100%; height: 46px; margin-top:8px;}
.email-box .cell:first-of-type {padding-right: 3px;}
.email-box .cell:last-of-type {padding-right: 0;}
.email-box .at {flex-grow: 0; line-height: 46px; padding-right: 3px;}
.phone-box.input-box .cell::after {content: "";  position: absolute; right: 2px; top: 50%; width:5px; height:5px; background:url(../img/icon/ico_dash.jpg) no-repeat 0 0; background-size:contain; transform: translate(0, -50%);}
.phone-box.input-box .cell:last-of-type::after {display: none;}

/* 결과 메세지 */
.validation {margin-top:8px; font-weight:400; font-size:15px;}
.validation.fail::before,
.validation.succ::before {content:""; display:inline-block; width:14px; height:11px; margin-right:6px;}
.validation.fail {color:var(--color-red);}
.validation.fail::before {background:url("../img/icon/icon_validation_fail.png") no-repeat center;}
.validation.succ {color:var(--color-blue2);}
.validation.succ::before {background:url("../img/icon/icon_validation_succ.png") no-repeat center;}
.validation.pointmark,
.validation.refermark {color:var(--font-color3); font-weight: 500;}
.validation.pointmark::before {content: "!"; display: inline-block; width: 18px; height: 18px; margin-right: 6px; line-height: 18px;  text-align: center; border-radius: 50%; background-color: #889BB2; color: #fff;}
.validation.refermark::before {content: "※"; display: inline-block; margin-right: 6px; text-align: center; font-size:18px;}

/* 리스트 */
.apply-list .content {overflow:hidden; display: flex; flex-wrap: wrap; position: relative; width:100%; margin-bottom:20px; background:#fff; border-radius: 7px; border:1px solid #d3d3d3;}
.apply-list .content.is-old {padding-bottom:20px;}
.apply-list .content:last-child {margin-bottom:0 !important;}
.apply-list .content .state-box {width:100%; padding:15px 15px 0 15px;}
.apply-list .content .state-box dd.active,
.apply-list .content .state-box dd.active * {font-weight:700; color:var(--color-main); cursor:pointer;}
.apply-list .content .state-box dl {display:flex; width:100%; font-size:15px;}
.apply-list .content .state-box dl + dl {margin-top:8px;}
.apply-list .content .state-box dl dt *,
.apply-list .content .state-box dl dd * {font-size:15px;}
.apply-list .content .state-box dl dt {text-align:left; color:var(--font-color2);}
.apply-list .content .state-box dl dd {flex:1; font-weight:500; text-align:right;}
.apply-list .content .state-box .date {margin-bottom:12px;}
.apply-list .content .state-box .date dt {display:none;}
.apply-list .content .state-box .date dd {text-align:left; font-size:16px; font-weight:800;}
.apply-list .content .state-box .btn-detail {position:relative; display:block; padding-right: 10px; text-align: right; font-weight:500; color:var(--color-main); }
.apply-list .content .state-box .btn-detail::after {content:""; position: absolute; top: 50%; right: 0; display:inline-block; width:6px; height:6px; margin:0 0 0 4px; border-top:2px solid var(--color-main); border-right:2px solid var(--color-main); transform:translateY(-50%) rotate(45deg);}
.apply-list .content .state-box .state-process {display:flex; width:100%; text-align: center; margin:25px 0 10px;}
.apply-list .content .state-box .state-process li {position:relative; width:100%;}
.apply-list .content .state-box .state-process li::before {content:""; display:block; position:absolute; left:50%; top:15px; width:100%; height:1px; background-color:#dfe3ed;}
.apply-list .content .state-box .state-process li:last-child::before {display:none;}
.apply-list .content .state-box .state-process li .order {position:relative; width:28px; height:28px; margin:0 auto; line-height:28px; font-size:13px; color:var(--font-color3); border-radius:50%; background-color:var(--color-gray-brighter);}
.apply-list .content .state-box .state-process li .text {width:100%; margin-top:6px; font-size:15px; color:var(--font-color3);}
.apply-list .content .state-box .state-process li.active .order {color:var(--color-main); background-color:var(--color-main-bg); border: 1px solid var(--color-main);}
.apply-list .content .state-box .state-process li.active .text {font-weight:700; color:var(--color-main);} 
.apply-list .content .btn-box {width:100%; padding:15px 15px 20px;}
.apply-list .content .btn-box .btn {width:100%; text-align: center;}
.apply-list .content .btn-box .btn + .btn {margin-top: 10px;}
.apply-list .content .info-notice-box {display:block; width:100%; margin-top:0; padding:15px; background-color:#f2f4f6;}
.apply-list .content .info-notice-box .info-title {margin-bottom:8px; color:var(--color-black); font-weight:600; font-size:14px;}

/* 번호 페이징 */
.pagination-wrap {padding:30px 0 0; text-align:center; font-size:0;}
.pagination-wrap a,
.pagination-wrap strong {overflow:hidden; display:inline-block; width:20px; height:30px; line-height:30px; font-size:15px;  color: var(--font-color4);}
.pagination-wrap strong {color:var(--color-black); font-weight: 700;}
.pagination-wrap a.pre_end,
.pagination-wrap a.pre,
.pagination-wrap a.next,
.pagination-wrap a.next_end {position:relative; width:30px; height:30px; border:1px solid var(--color-gray-light); border-radius:8px; text-indent:-9999px;}
.pagination-wrap a.pre_end {display:block;}
.pagination-wrap a.pre {margin-right:12px;}
.pagination-wrap a.next {margin-left:12px;}
.pagination-wrap a.pre:after,
.pagination-wrap a.next::after {content:""; display:block; position:absolute; top:50%; left:50%; width:6px; height:6px; border-top:2px solid var(--font-color4); border-left:2px solid var(--font-color4); transform:translate(-40%, -50%) rotate(-45deg);}
.pagination-wrap a.next::after {transform:translate(-50%, -50%) rotate(135deg);}