@charset "utf-8";

/* =======================================================================================================================
 * AUTHOR : 이정민
 * LAST UPDATE : 2025.08.12
 * STYLE CSS
 * ======================================================================================================================= */

 /* ---------------------------------------------------------------------------------------
    01. Common Using Class
--------------------------------------------------------------------------------------- */
/* ----------------------
 * Mobile Keypad
 * ----------------------
 */
 div.nppfs-keypad{
	position:fixed !important;
	top:auto !important;
	bottom:0 !important;
    left:2px !important;
}


/* ----------------------
 * visible
 * ----------------------
 */
.hide{overflow:hidden;position:absolute;left:3rem;top:2rem;width:0.1rem;height:0.1rem;font-size:0;letter-spacing:1.0rem;opacity:0}
.lock{overflow: hidden;}


/* ----------------------
 * align
 * ----------------------
 */
.alignr{text-align:right !important}
.alignl{text-align:left !important}
.alignc{text-align:center !important}


/* ----------------------
 * padding
 * ----------------------
 */
.pd0{padding:0 !important}
.pt12{padding-top:1.2rem !important}
.pt16{padding-top:1.6rem !important}
.pt24{padding-top:2.4rem !important}
.pt32{padding-top:3.2rem !important}
.pt84{padding-top:8.4rem !important}
.pb0{padding-bottom:0 !important}
.pb16{padding-bottom:1.6rem !important}
.pb24{padding-bottom:2.4rem !important}
.pb32{padding-bottom:3.2rem !important}


/* ----------------------
 * margin
 * ----------------------
 */
 .mt0{margin-top:0 !important}
.mt10{margin-top:1rem !important}
.mt12{margin-top:1.2rem !important}
.mt16{margin-top:1.6rem !important}
.mt24{margin-top:2.4rem !important}
.mt32{margin-top:3.2rem !important}
.mt40{margin-top:4rem !important}
.mt56{margin-top:5.6rem !important}
.mb10{margin-bottom:1rem !important}
.mb16{margin-bottom:1.6rem !important}
.mb24{margin-bottom:2.4rem !important}
.mb32{margin-bottom:3.2rem !important}
.mb40{margin-bottom:4rem !important}


/* ----------------------
 * font size
 * ----------------------
 */
.fs-b1{font-size:var(--font-size-b1);}
.fs-h5{font-size:var(--font-size-h5);}


/* ----------------------
 * font weight
 * ----------------------
 */
.fw-semibold{font-weight:var(--font-weight-semibold);}


/* ----------------------
 * align
 * ----------------------
 */
.ta-l{text-align:left !important;}


/* ----------------------
 * color
 * ----------------------
 */
.col-blue-primary{color:#0871F3 !important}
.col-modegno-700{color:var(--modeGrayNonOpaque-700);}
.col-red-critical{color:#CC1E24 !important}


/* ----------------------
 * background
 * ----------------------
 */
.w-color-bg-gradient6{background:var(--w-color-bg-gradient6) !important;}


/* ----------------------
 * keyframes
 * ----------------------
 */
 @keyframes blink-effect {
    50% {
      opacity: 0;
    }
}
@keyframes scroll-motion {
	0% {
        opacity:1;
        bottom:0;
      }
      50% {
        opacity:0;
        bottom:-1.3rem;
      }
      100% {
        opacity:1;
        bottom:0;
      }
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes floatInAndBounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(50px);
    }
    100% {
      transform: translateY(0);
    }
}
@keyframes floatInAndBounce2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0);
    }
}
@keyframes floatInAndBounce3 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
}
@keyframes hand-left {
	0% {
        transform:rotate(0deg) scale(1);
      }
      50% {
        transform:rotate(45deg) scale(0.7);
      }
      100% {
        transform:rotate(0deg) scale(1);
      }
}
@keyframes hand-right {
	0% {
        transform:rotate(0deg) scale(1);
      }
      50% {
        transform:rotate(-45deg) scale(0.7);
      }
      100% {
        transform:rotate(0deg) scale(1);
      }
}
@keyframes coinFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px);
    }
    100% {
        transform: translateY(0);
    }
}




/* ---------------------------------------------------------------------------------------
    02. Layout
--------------------------------------------------------------------------------------- */
#wrap{
    position:relative;
    overflow-x:hidden;
}
#wrap #container{
    position:relative;
    width:100%;
    max-width:102.4rem;
    margin:0 auto;
    padding:5.2rem 2rem 4.8rem 2rem;
}


/* ----------------------
 * header
 * ----------------------
 */
 /* skip nav */
#skipNav{
    position: absolute;
    width: 100%;
    top: 0;left: 0;
}
#skipNav a{
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 50px;
    transform: translateY(-100%);
}
#skipNav a:focus,
#skipNav a:active{
    transform: translateY(0);
}

#header{
    flex:0 0 auto;
    position:fixed;
    z-index:1030;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:5.2rem;
    background:transparent;
}
#header.active{
    background-color:rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#header .inr{
    position:relative;
    min-height:5.2rem;
    max-width:102.4rem;
    padding:1.4rem;
    margin:0 auto;
}
#header .logo{
    display:inline-block;
    position:absolute;
    left:1.4rem;
    top:50%;
    margin-top:-1.2rem;
    width:11.3rem;
    height:2.8rem;
    background:url('/img/mw/teenteen/img_teenteenLogo.png') no-repeat left top;
    background-size:11.3rem;
}
#header .btn-allmenu{
    display:inline-block;
    position:absolute;
    right:1.4rem;
    top:50%;
    margin-top:-1.2rem;
    width:2.4rem;
    height:2.4rem;
}
#header .btn-allmenu > span{
    display:inline-block;
    position:relative;
    width:2.4rem;
    height:2.4rem;
}
#header .btn-allmenu > span::before{
    display:block;
    position:absolute;
    left:50%;
    top:0.7rem;
    width:1.8rem;
    height:0.2rem;
    margin-left:-0.9rem;
    border-radius:0.4rem;
    background:var(--modeGrayNonOpaque-800);
    content:'';
    transition:all 0.2s;
}
#header .btn-allmenu > span::after{
    display:block;
    position:absolute;
    left:50%;
    bottom:0.7rem;
    width:1.8rem;
    height:0.2rem;
    margin-left:-0.9rem;
    border-radius:0.4rem;
    background:var(--modeGrayNonOpaque-800);
    content:'';
    transition:all 0.2s;
}
#header .btn-allmenu.active > span::before{
    top:1.2rem;
    transform:rotate(45deg);
}
#header .btn-allmenu.active > span::after{
    bottom:1rem;
    transform:rotate(-45deg);
}
#header .btn.primary{
    position:absolute;
    right:5rem;
    top:50%;
    margin-top:-1.4rem;
}


/* ----------------------
 * All Menu
 * ----------------------
 */
 .allmenu{
    display:none;
    position:fixed;
    left:0;
    right:0;
    top:5.2rem;
    background-color:rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:1030;
}
.allmenu .menu-list{
    max-width:102.4rem;
    margin:0 auto;
}
.allmenu .menu-list .item a{
    display:inline-block;
    width:100%;
    padding:1.6rem 2rem;
    font-size:1.6rem;
    line-height:120%;
    color:#0B0F13;
}
.allmenu .menu-list .item a:hover,
.allmenu .menu-list .item a:focus{
    background:#E5F4FF;
}


/* ----------------------
 * footer
 * ----------------------
 */
#footer{
    position:relative;
    width:100%;
    background:var(--modeGrayNonOpaque-200);
}
#footer .inr{
    max-width:102.4rem;
    margin:0 auto;
    padding:3.2rem 2rem 14rem;
}
#footer .w-logo{
    height:2.2rem;
    background:url('/img/mw/teenteen/img_wooriLogo.png') no-repeat left center;
    background-size:9.2rem;
}
#footer .list{
    padding-top:2.4rem;
}
#footer .list li,
#footer .list a{
    font-size:var(--font-size-d1);
    font-weight:var(--font-weight-regular);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}
#footer .list a:hover,
#footer .list a:focus{
    text-decoration:underline;
}
#footer .list li a.call{
    padding-left:2rem;
    background:url('/img/mw/teenteen/ico_call.png') no-repeat left center;
    background-size:1.4rem;
}
#footer .list li a.mail{
    padding-left:2rem;
    background:url('/img/mw/teenteen/ico_mail.png') no-repeat left center;
    background-size:1.4rem;
}
#footer .list .title{
    padding-bottom:1.2rem;
    font-size:var(--font-size-d1);
    font-weight:var(--font-weight-medium);
    color:var(--modeGrayNonOpaque-700);
    line-height:var(--line-height-adjust);
}
#footer .list.policy a:last-child{
    padding-left:1.2rem;
}
#footer .list.link{
    display:flex;
    flex-flow:wrap;
}
#footer .list.link a{
    display:inline-block;
    margin-right:1rem;
    width:2.4rem;
    height:2.4rem;
    background:url('/img/mw/teenteen/ico_youtube.png') no-repeat left top;
    background-size:2.4rem;
}
#footer .list.link a.insta{
    background-image:url('/img/mw/teenteen/ico_insta.png');
}
#footer .list.link a.copy{
    background-image:url('/img/mw/teenteen/ico_copy.png');
}




/* ---------------------------------------------------------------------------------------
    03. Main Page
--------------------------------------------------------------------------------------- */
/* CTA Button */
#wrap.main .btn-group.bottom{
    background:#fff;
    background:linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
#wrap.main .btn-group.bottom.hidden {
    opacity: 0;
    transform: translateY(40px);
}
#wrap.main .btn-group.bottom .inr{
    padding-bottom:7rem;
}
/* layout */
#wrap.main #container{
    padding:0;
}
#wrap.main .section{
    padding:6rem 0;
    text-align:center;
}
#wrap.main .section .title-wrap{
    padding:0 0 3.2rem 2rem;
    text-align:left;
}
#wrap.main .section .title-wrap .title{
    font-size:3rem;
    line-height:var(--line-height-base);
    font-weight:var(--font-weight-regular);
}
#wrap.main .section .title-wrap .sub-title{
    padding-top:1.6rem;
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-regular);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-700);
}
#wrap.main .divider{
    width:100%;
    height:.8rem;
    background:#F8F9FA;
}
#wrap.main .section .txt{
    margin-top:3.2rem;
    font-size:var(--font-size-d1);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-600);
}

/* visual */
#wrap.main .section.visual{
    display:flex;
    flex-flow:column;
	position:relative;
    min-height:100vh;
    width:100%;
	padding:5.2rem 0 4rem 0;
    background:var(--w-color-bg-gradient6);
}
#wrap.main .section.visual .title-wrap{
    width:100%;
    padding:5.6rem 0 0 2rem;
}
#wrap.main .section.visual .title-wrap .sub-title{
    padding-top:0;
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-medium);
    color:#0871F3;
}
#wrap.main .section.visual .video-wrap{
	margin-top:auto;
	margin-bottom:auto;
}
#wrap.main .section.visual .video-wrap img{
    width:100% !important;
    max-width:32rem;
}
#wrap.main .section.visual .btn-scrollDown{
    position:relative;
}
#wrap.main .section.visual .btn-scrollDown span{
	display:inline-block;
    position:absolute;
    left:50%;
	bottom:0;
	margin-left:-2.2rem;
    width:4.4rem;
    height:4.4rem;
	font-size:0;
    background:url('/img/mw/teenteen/ico_scrolldown.png') no-repeat center;
    background-size:4.4rem;
    animation: scroll-motion 1.5s infinite;
    animation-delay: 1.5s;
}

/* intro */
#wrap.main .section.intro{
    background:#ECF1F6;
}
#wrap.main .section.intro .bubble-wrap{
    max-width:50rem;
    margin:0 auto;
    padding:0 2rem;
}
#wrap.main .section.intro .bubble-list li{
    padding-right:1.2rem;
    text-align:right;
}
#wrap.main .section.intro .bubble-list li + li{
    margin-top:.8rem;
}
#wrap.main .section.intro .bubble-list li > span{
    position:relative;
    display:inline-block;
    padding:1.2rem 2rem;
    border-radius:1.6rem;
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    background:#fff;
}
#wrap.main .section.intro .bubble-list.question li:first-child span::after{
    position:absolute;
    right:-1.2rem;
    top:1rem;
    width:1.75rem;
    height:1.8rem;
    background:url('/img/mw/teenteen/img_bubble_tail1.png') no-repeat center;
    background-size:contain;
    content:'';
}
#wrap.main .section.intro .bubble-list.answer{
    margin-top:2.4rem;
}
#wrap.main .section.intro .bubble-list.answer li{
    padding-left:5.2rem;
    padding-right:0;
    text-align:left;
}
#wrap.main .section.intro .bubble-list.answer li:first-child{
    background:url('/img/mw/teenteen/img_main_intro.png') no-repeat left top;
    background-size:4rem;
}
#wrap.main .section.intro .bubble-list.answer li:first-child span::after{
    position:absolute;
    left:-1.2rem;
    top:1rem;
    width:1.75rem;
    height:1.8rem;
    background:url('/img/mw/teenteen/img_bubble_tail2.png') no-repeat center;
    background-size:contain;
    content:'';
}
#wrap.main .section.intro .bubble-list.answer li > span{
    background:var(--blue-500);
    color:#fff;
}

/* event */
#wrap.main .section.event .event-swiper{
    margin:0 2rem;
}
#wrap.main .section.event .banner-wrap{
    display:block;
    position:relative;
    height:32rem;
    padding:2.4rem;
    border-radius:1.6rem;
    background:#FFEBF2;
    cursor:pointer;
}
/*
#wrap.main .section.event .banner-wrap .img-wrap{
    padding:3rem 0;
}
*/
#wrap.main .section.event .banner-wrap img{
    height:20.2rem;
    max-height:100%;
    width:auto;
}
#wrap.main .section.event .banner-wrap p{
    text-align:left;
}
#wrap.main .section.event .banner-wrap .d-day{
    position:absolute;
    top:2.4rem;
    right:2.4rem;
    display:inline-block;
    height:1.8rem;
    padding:.3rem .6rem;
    font-size:var(--font-size-d3);
    font-weight:var(--font-weight-semibold);
    border:solid 1px var(--blue-500);
    border-radius:2.4rem;
    color:#0871F3;
    background:#fff;
}
#wrap.main .section.event .banner-wrap .title{
    padding-right:5rem;
    font-size:var(--font-size-h4);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-adjust);
}
#wrap.main .section.event .banner-wrap .date{
    font-size:var(--font-size-d2);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}
#wrap.main .section.event .banner-wrap.yellow{
    background:#FFF4D1;
}
#wrap.main .section.event .banner-wrap.green{
    background:#DFF7EF;
}
/* event swiper */
.cs-indicator{
    position:absolute;
    bottom:2.4rem;
    right:2.4rem;
    z-index:1;
}
.cs-indicator .inr{
    display:flex;
    align-items:center;
    gap:.4rem;
    position:relative;
}
.cs-indicator .inr .cs-box{
    position:relative;
    display:flex;
    align-items:center;
    padding:.4rem .8rem;
    background:rgba(2, 12, 21, 0.72);
    z-index:1;
    border-radius:2.4rem;
}
.cs-indicator .swiper-button-next,
.cs-indicator .swiper-button-prev{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    margin:0;
    width:1.2rem;
    height:1.2rem;
}
.cs-indicator .swiper-button-next:after, .cs-indicator .swiper-button-prev:after{
    font-size:0;
}
.cs-indicator .swiper-button-prev{
    width:1.2rem;
    height:1.2rem;
    background:url('/img/mw/teenteen/ico_indicator_prev.png') no-repeat center;
    background-size:1.2rem;
}
.cs-indicator .swiper-button-next{
    width:1.2rem;
    height:1.2rem;
    background:url('/img/mw/teenteen/ico_indicator_next.png') no-repeat center;
    background-size:1.2rem;
}
.cs-indicator .swiper-pagination{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:auto;
    padding:0 .8rem;
    font-size:var(--font-size-d3);
    line-height:var(--line-height-base);
    color:rgba(255, 255, 255, .8);
}
.cs-indicator .swiper-pagination > .swiper-pagination-current{
    font-weight:var(--font-weight-medium);
    color:#fff;
}
.cs-indicator .btn-autoplay{
    width:2rem;
    height:2rem;
    background:url('/img/mw/teenteen/ico_play.png') no-repeat center;
    background-size:2rem;
}
.cs-indicator .btn-autoplay.pause{
    background-image:url('/img/mw/teenteen/ico_pause.png');
}

/* card design */
#wrap.main .section.card{
    padding:6rem 0 4rem 0;
    background:#ECF1F6;
}
.main-card-wrap{
    padding-top:.9rem;
}
.main-card-swiper {
    width: 100%;
    max-width:63rem;
    margin:0 auto;
    padding-bottom:2rem;
    overflow:hidden;
}
.main-card-swiper .swiper-wrapper{
    align-items:flex-end;
}
.main-card-swiper .swiper-slide {
    width:22.4rem;
    height: 34.7rem;
    text-align: center;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.main-card-swiper .img-card {
    width:22rem;
    height: 34.7rem;
    border-radius:2rem;
    transition:
    width 0.5s ease-in-out,
    height 0.5s ease-in-out,
    transform 0.5s ease-in-out,
    box-shadow 0.4s ease-in-out;
    box-shadow:8px 11px 19px #DBE7F2;
}
.main-card-swiper .img-card .card {
    width:100%;
    height: 100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    transition: background-size 0.3s ease-in-out;
}
.main-card-swiper .img-card.qwer1 .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer1.png');
}
.main-card-swiper .img-card.qwer2 .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer2.png');
}
.main-card-swiper .img-card.qwer3 .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer3.png');
}
.main-card-swiper .img-card.black .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_black.png');
}
.main-card-swiper .img-card.silver .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_silver.png');
}
.main-card-swiper .img-card.blue .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_blue.png');
}
.main-card-swiper .img-card.cubic .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_cubic.png');
}
.main-card-swiper .img-card.pink .card{
    background-image:url('/img/mw/teenteen/img_teenteencard_pink.png');
}
.swiper-slide:not(.swiper-slide-active) .img-card {
    width: 18rem;
    height: 28.4rem;
    box-shadow:none;
}
.swiper-slide:not(.swiper-slide-active) .img-card .card {
    background-size:cover;
}

/* trans */
#wrap.main .section.trans{
    padding-top:0;
    background:#ECF1F6;
}
#wrap.main .section.trans #lottie-trans{
    width:36rem;
    height:25.6rem;
    margin:0 auto;
}

/* use */
#wrap.main .section.use{
    padding-bottom:0;
}
#wrap.main .section.use .use-item-wrap .use-item {
    margin: 0 2rem;
    padding: 5rem 1.6rem;
    background: #E7F5FF;
    border-radius: 1.6rem;
}
#wrap.main .section.use .use-item-wrap .use-item + .use-item{
    margin-top:2rem;
}
#wrap.main .section.use .use-item .title-wrap{
    padding:0 0 2.4rem 0;
    text-align:center;
}
#wrap.main .section.use .use-item .title-wrap .title{
    font-size:var(--font-size-h3);
    font-weight:var(--font-weight-bold);
}
#wrap.main .section.use .use-item .title-wrap .title em{
    font-style:normal;
    color:#0871F3;
}
#wrap.main .section.use .img-wrap{
    position:relative;
    margin:0 auto;
}
#wrap.main .section.use .use-item-wrap .use-item .txt{
    margin-top:0;
    padding-top:2rem;
    font-size:var(--font-size-d1);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-600);
}
#wrap.main .section.use .use-item.conven{
    padding-bottom:2rem;
}
#wrap.main .section.use .use-item.conven .img-wrap{
    width:28rem;
    height:21.5rem;
}
#wrap.main .section.use .use-item.conven .img-shop{
    margin-top:3.7rem;
    width:16.7rem;
    animation: fadeIn 6s ease forwards;
}
#wrap.main .section.use .use-item.conven .img-car{
    position:absolute;
    left:0;
    top:4.4rem;
    width:6.4rem;
    animation: floatInAndBounce 3s ease-in-out infinite;
}
#wrap.main .section.use .use-item.conven .img-ice{
    position:absolute;
    right:2.3rem;
    top:-1rem;
    width:5.6rem;
    animation: floatInAndBounce2 3s ease-in-out infinite;
}
#wrap.main .section.use .use-item.conven .img-food{
    position:absolute;
    right:0;
    top:9rem;
    width:6.4rem;
    animation: floatInAndBounce3 3s ease-in-out infinite;
}
#wrap.main .section.use .use-item.conven .lottie-wrap{
    width:27.8rem;
    margin:0 auto;
    padding-top:2rem;
}
#wrap.main .section.use .use-item.safe{
    background:rgba(227, 247, 241, 1);
}
#wrap.main .section.use .use-item.safe .lottie-wrap{
    width:21rem;
    margin:0 auto;
    padding-top:5rem; 
}
#wrap.main .section.use .use-item.safe img{
    width:21.1rem;
    animation: fadeIn 4s ease-in-out infinite;
}
#wrap.main .section.use .use-item.safe #lottie-safe{
    width:21.1rem;
    height:22rem;
    margin:0 auto;
}
#wrap.main .section.use .use-item.with{
    background:rgba(255, 245, 213, 1);
}
#wrap.main .section.use .use-item.with .img-wrap{
    width:22.2rem;
    height:18.6rem;
}
#wrap.main .section.use .use-item.with .img-handLeft{
    position:absolute;
    left:0;
    bottom:0;
    width:9.1rem;
    animation: hand-left 4s ease-in-out infinite;
}
#wrap.main .section.use .use-item.with .img-handRight{
    position:absolute;
    right:0;
    bottom:0;
    width:9.1rem;
    animation: hand-right 4s ease-in-out infinite;
}
#wrap.main .section.use .use-item.with .img-coin{
    position:absolute;
    top:0;
    left:50%;
    width:12.4rem;
    margin-left:-6.2rem;
    animation: coinFloat 4s ease-in-out infinite;
    z-index:1;
}
#wrap.main .section.use .bubble{
    position:absolute;
    left:0;
    top:0;
    padding:1.2rem 2rem;
    border-radius:2.2rem;
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    text-align:center;
    background:var(--orange-500);
    color:#fff;
}
#wrap.main .section.use .bubble.blue{
    left:14.5rem;
    background-color:var(--deepblue-500);
}
#wrap.main .section.use .bubble.green{
    left:14.5rem;
    background-color:var(--green-500);
}
#wrap.main .section.use .bubble:nth-child(1){
    left:1.2rem;
    top:6.3rem;
}
#wrap.main .section.use .bubble:nth-child(2){
    left:14.5rem;
}
#wrap.main .section.use .bubble:nth-child(3){
    left:auto;
    right:3rem;
    top:5rem;
}

/* video */
#wrap.main .section.video .video-wrap {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
#wrap.main .section.video .video-wrap iframe,
#wrap.main .section.video .video-wrap object,
#wrap.main .section.video .video-wrap embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#wrap.main .section.video .btn-group{
    padding:0 2rem;
    margin-top:2.4rem;
}

/* app download */
#wrap.main .section.download{
    padding-top:3.2rem;
    padding-bottom:0;
}
#wrap.main .section.download .txt{
    margin-top:2rem;
    font-size:var(--font-size-d1);
}
#wrap.main .section.download .tab-list.type1 li > span{
    line-height:1;
}
#wrap.main .section.download .swiper-slide{
    padding:3.2rem 0 6rem 0;
    background:linear-gradient(180deg, rgba(237, 239, 255, 0) 5%, rgba(237, 239, 255, 1) 32%, rgba(242, 255, 249, 1) 100%);
}
#wrap.main .section.download .title-wrap{
    padding:0 2rem 2rem;
}
#wrap.main .section.download .title-wrap .title{
    padding:1.8rem 0;
    font-size:2.4rem;
    background:url('/img/mw/teenteen/img_main_download.png') no-repeat right center;
    background-size:10.2rem;
}
#wrap.main .section.download .title-wrap .sub-title{
    padding-top:0;
    font-size:var(--font-size-b2);
}
#wrap.main .section.download .swiper-slide:last-child .title-wrap .title{
    background-image:url('/img/mw/teenteen/img_main_download2.png');
}
#wrap.main .section.download .img-wrap{
    margin:0 auto;
    text-align:center;
}
#wrap.main .section.download .img-wrap img{
    width:26rem;
}
#wrap.main .section.download .btn{
    width:auto;
    height:4rem;
    margin-top:2rem;
    padding:0.8rem 1.6rem;
    font-size:var(--font-size-b1);
    border-radius:2rem;
    color:#fff;
    background-color:rgb(39, 102, 169);
}
#wrap.main .section.download .btn em{
    padding-right:1.6rem;
    background:url('/img/mw/teenteen/arr_right_white.png') no-repeat right center;
    background-size:1.6rem;
}
#wrap.main .section.download .btn.download em{
    padding-right:2.1rem;
    background-image:url('/img/mw/teenteen/ico_download.png');
}

/* service info */
#wrap.main .section.service{
    padding:0;
    text-align:left;
}
.section.service .tit{
    position:relative;
    height:5.3rem;
    padding:1.6rem 2rem;
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-base);
}
.section.service .tit::after{
    position:absolute;
    right:2rem;
    top:2rem;
    width:2rem;
    height:2rem;
    background:url('/img/mw/teenteen/arr_more.png') no-repeat center;
    background-size:2rem;
    content:'';
    transition:all .2s;
}
.section.service .tit.active::after{
    transform:rotate(180deg);
}
.section.service .list{
    position:relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.section.service .tit.active + .list{
    max-height: 1000px;
}
.section.service .list::before{
    position:absolute;
    top:0;
    left:2rem;
    width:calc(100% - 4rem);
    height:1px;
    background:var(--modeGrayNonOpaque-100);
    content:'';
}
.section.service .list li:first-child{
    padding-top:1.6rem;
}
.section.service .list li:last-child{
    padding-bottom:1.6rem;
}
.section.service .list li{
    padding:0 2rem;
    font-size:var(--font-size-b2);
    line-height:var(--line-height-base);
    word-break:keep-all;
    color:var(--modeGrayNonOpaque-600);
}
.section.service .list li + li{
    padding-top:1rem;
}
.section.service .list li span{
    display:inline-block;
    position:relative;
    padding-left:1.7rem;
}
.section.service .list li span::before{
    position:absolute;
    left:.65rem;
    top:.8rem;
    width:.4rem;
    height:.4rem;
    background:var(--modeGrayNonOpaque-600);
    border-radius:50%;
    content:'';
}

/* responsive */
@media all and (min-width:1024px){
    #wrap.main .section .title-wrap{
        padding-left:0;
        text-align:center;
    }
    #wrap.main .section.event .custom-carousel .carousel-slides{
        gap:2.4rem;
    }
    #wrap.main .section.event .custom-carousel .carousel-slides .slide {
        flex:1 1 auto;

    }
    #wrap.main .section.use .use-item-wrap{
        display:flex;
    }
    #wrap.main .section.use .use-item-wrap .use-item{
        flex:1 1 0;
        margin:0 1.2rem;
    }
    #wrap.main .section.use .use-item-wrap .use-item + .use-item{
        margin-top:0;
    }
    #wrap.main .section.event .swiper-slide{
        flex:1 auto;
    }
    .cs-indicator {
        display: none;
    }
    #wrap.main .section.download .title-wrap .title{
        padding-bottom:0;
        background:none !important;
    }
    #wrap.main .section.download .tab-box .tab-list.type1{
        width:100%;
        margin-left:0;
        padding:0;
    }
}




/* ---------------------------------------------------------------------------------------
    04. Sub Pages
--------------------------------------------------------------------------------------- */

/* ----------------------
 * common
 * ----------------------
 */
 /* 이미지 컨테이너 */
.img-container{
    text-align:center;
}
.img-container img{
    max-width:36rem;
    width:100%;
}

/* 검색 결과(지도, 직원 검색) */
.result-box{
    position:relative;
    padding-top:.8rem;
}
.result-box .title-wrap{
    padding:0 0 1.2rem 0;
    text-align:center;
}
.result-box .title-wrap > *{
    word-break:keep-all;
}
.result-box .title{
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base);
}
.result-box .sub-title{
    padding-top:.2rem;
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}
.result-box .result-list .list-item{
    padding:1.6rem 3.6rem 1.6rem 0;
    cursor:pointer;
    background:url('/img/mw/teenteen/arr_right2.png') no-repeat right center;
    background-size:2rem;
}
.result-box .result-list .list-item .tit{
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base); 
}
.result-box .result-list .list-item .txt{
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base); 
}
.result-box .result-list .list-item .txt.type2{
    color:var(--modeGrayNonOpaque-500);
}
.result-box .result-list .list-item .keyword{
    color:#0871F3 !important;
}

/* 지도검색 */
.grid-list{
    display:flex;
    flex-flow:wrap;
    justify-content:left;
    gap:.8rem;
}
.grid-list .item{
    width:calc(33.333% - .6rem);
    min-height:4.8rem;
    padding:1.4rem .4rem;
    background:#F1F3F5;
    border:solid 2px #F1F3F5;
    border-radius:.6rem;
}
.grid-list span{
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-adjust);
}
.grid-list > .item.active,
.grid-list > .item:focus{
    border-color:var(--blue-500);
}

/* 지도검색 - 지역 선택 네비게이션 */
.location-list{
    display:flex;
    gap:.4rem;
    padding:2.4rem 0;
}
.location-list li{
    padding-right:2rem;
    background:url('/img/mw/teenteen/arr_right.png') no-repeat right center;
    background-size:1.6rem;
}
.location-list li:last-child{
    padding-right:0;
    background:none;
}
.location-list li > span{
    font-size:var(--font-size-h5);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-adjust);
    color:var(--modeGrayNonOpaque-500);
    cursor:pointer;
}
.location-list li.active > span{
    color:#0871F3;
    text-decoration:underline;
}
.location-list li.selected > span{
    color:var(--modeGrayNonOpaque-800);
}

/* 직원검색 : 이름검색 결과 리스트 */
.selname-list .list-item{
    display:block;
    padding:1.6rem 0;
}
.selname-list .list-item input[type="radio"]{
    left:auto;
    right:0;
}
.selname-list .list-item label{
    display:block;
    padding-left:0;
    padding-right:3.4rem;
}
.selname-list .list-item input[type="radio"] ~ label:before{
    left:auto;
    right:0;
    top:50%;
    margin-top:-1.2rem;
}
.selname-list .list-item label .txt{
    display:block;
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}
.selname-list .list-item label .txt.name{
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    color:var(--modeGrayNonOpaque-800);
}

/* 직원검색 : 직원 선택 바텀시트 */
.depart-area{
    padding:0 0 1.6rem 2.8rem;
    background:url('/img/mw/teenteen/img_depart.png') no-repeat left top;
    background-size:2.4rem;
}
.depart-area .title{
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base);
    color:#0871F3;
}
.depart-area .sub-title{
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}

/* 카드 디자인 선택 */
.card-swiper {
    width: 100%;
    max-width:36rem;
    overflow:visible;
}
.card-swiper .swiper-slide {
    width:17.7rem;
    height: 28rem;
    text-align: center;
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}
.card-swiper .img-card {
    display: inline-grid;
    width:100%;
    height:100%;
    transition: transform 0.3s;
    transform: perspective(800px) rotateY(0deg);
    transform-style: preserve-3d;
}
.card-swiper .img-card.on{
    transform: perspective(800px) rotateY(180deg);
}
.card-swiper .img-card .card {
    grid-area: 1 / 1 / 1 / 1;
    width:100%;
    height: 100%;
    background:#222;
    backface-visibility: hidden;
    overflow:hidden;
    border-radius:1rem;
    box-shadow:4px 6px 16px #C1D2E1;
}
.card-swiper .img-card .card.back{
    width:100%;
    height: 100%;
    background:gray;
    transform: rotateY(180deg);
}
.card-swiper .img-card.qwer1 .card {
    background:url('/img/mw/teenteen/img_teenteencard_qwer1.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.qwer1 .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer1_back.png');
}
.card-swiper .img-card.qwer2 .card {
    background:url('/img/mw/teenteen/img_teenteencard_qwer2.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.qwer2 .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer2_back.png');
}
.card-swiper .img-card.qwer3 .card {
    background:url('/img/mw/teenteen/img_teenteencard_qwer3.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.qwer3 .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer3_back.png');
}
.card-swiper .img-card.black .card {
    background:url('/img/mw/teenteen/img_teenteencard_black.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.black .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_black_back.png');
}
.card-swiper .img-card.silver .card {
    background:url('/img/mw/teenteen/img_teenteencard_silver.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.silver .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_silver_back.png');
}
.card-swiper .img-card.blue .card {
    background:url('/img/mw/teenteen/img_teenteencard_blue.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.blue .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_blue_back.png');
}
.card-swiper .img-card.cubic .card {
    background:url('/img/mw/teenteen/img_teenteencard_cubic.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.cubic .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_cubic_back.png');
}
.card-swiper .img-card.pink .card {
    background:url('/img/mw/teenteen/img_teenteencard_pink.png') no-repeat center;
    background-size:cover;
}
.card-swiper .img-card.pink .card.back {
    background-image:url('/img/mw/teenteen/img_teenteencard_pink_back.png');
}
.card-swiper .swiper-slide.swiper-slide-active{
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
}
.card-swiper .swiper-slide.swiper-slide-next,
.card-swiper .swiper-slide.swiper-slide-prev {
    opacity: 0.3 !important;
    visibility: visible;
    pointer-events: auto;
}
.card-swiper .swiper-slide.swiper-slide-prev .img-card {
    transform: rotate(-15deg);
}
.card-swiper .swiper-slide.swiper-slide-next .img-card {
    transform: rotate(15deg);
}

.card-swiper .swiper-pagination{
    bottom:-3.2rem !important;
}
.card-swiper .swiper-pagination-bullet{
    vertical-align:middle;
    width:.6rem;
    height:.6rem;
    margin:0 .3rem !important;
    background:rgba(119, 134, 151, .24);
    opacity:1;
}
.card-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width:1.6rem;
    border-radius:.8rem;
    background:var(--modeGrayNonOpaque-700);
}
.ico-click-ani{
    margin-bottom:3rem;
    text-align:center;
}
.ico-click-ani span{
    display:inline-block;
    position:relative;
    padding:.4rem 1.6rem;
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base);
    border-radius:2.4rem;
    color:#fff;
    background:rgba(2, 12, 21, 0.72);
    animation:blink-effect 2s ease-in-out infinite;
}
.ico-click-ani span::after{
   position:absolute;
   left:50%;
   bottom:-.8rem;
   width:0;
   height:0;
   margin-left:-.4rem;
   border-top: .8rem solid rgba(2, 12, 21, 0.72);
   border-left: .8rem solid transparent;
   border-right: .8rem solid transparent;
   content:'';
}


/* ----------------------
 * 카드신청
 * ----------------------
 */
/*  간편결제 등록 */
.grid-pay{
    display:flex;
    flex-flow:wrap;
    justify-content:space-between;
    gap:.8rem;
}
.grid-pay > *{
    width:calc(33.333% - .6rem);
    height:9rem;
    padding:1.2rem 0;
    border-radius:1.2rem;
    background:rgba(155, 132, 149, 0.05);
}
.grid-pay span{
    display:inline-block;
    width:100%;
    padding:4rem .4rem 0;
    font-size:var(--font-size-d1);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    background:url('/img/mw/teenteen/img_paybook.png') no-repeat center top;
    background-size:3.2rem;
}
.grid-pay .paybook span{
    background-image:url('/img/mw/teenteen/img_paybook.png');
}
.grid-pay .kakao span{
    background-image:url('/img/mw/teenteen/img_kakao.png');
}
.grid-pay .toss span{
    background-image:url('/img/mw/teenteen/img_toss.png');
}
.grid-pay .payco span{
    background-image:url('/img/mw/teenteen/img_payco.png');
}
.grid-pay .ssg span{
    background-image:url('/img/mw/teenteen/img_ssg.png');
}
.grid-pay .lpay span{
    background-image:url('/img/mw/teenteen/img_lpay.png');
}
.grid-pay .samsung span{
    background-image:url('/img/mw/teenteen/img_samsung.png');
}
.grid-pay > *:focus,
.grid-pay > .active{
    border:solid 2px var(--blue-500);
}

/* 정보 확인 */
.card-info{
    margin:1.6rem 0 3.2rem 0;
    text-align:center;
}
.card-info .card-box{
    width:12.5rem;
    height:20rem;
    margin:0 auto .8rem;
    background:url('/img/mw/teenteen/img_teenteencard_qwer1.png') no-repeat left center;
    background-size:12.5rem;
}
.card-info .card-box.qwer2{
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer2.png');
}
.card-info .card-box.qwer3{
    background-image:url('/img/mw/teenteen/img_teenteencard_qwer3.png');
}
.card-info .card-box.black{
    background-image:url('/img/mw/teenteen/img_teenteencard_black.png');
}
.card-info .card-box.silver{
    background-image:url('/img/mw/teenteen/img_teenteencard_silver.png');
}
.card-info .card-box.blue{
    background-image:url('/img/mw/teenteen/img_teenteencard_blue.png');
}
.card-info .card-box.cubic{
    background-image:url('/img/mw/teenteen/img_teenteencard_cubic.png');
}
.card-info .card-box.pink{
    background-image:url('/img/mw/teenteen/img_teenteencard_pink.png');
}

/* 카드신청 완료 - 배너 */
.banner-wrap{
    width:100%;
    padding:0 1.6rem;
    justify-content:center;
    border-radius:1rem;
}
.banner-wrap.fixed{
    position:fixed;
    bottom:18rem;
    left:0;
    right:0;
}
.banner-wrap a{
    display:block;
}
.banner-wrap img{
    width:100%;
    max-height:12rem;
}


/* ----------------------
 * 부모동의
 * ----------------------
 */
/* 친권 확인 절차 */
.parent-list li{
    position:relative;
    padding:1.6rem 0 1.6rem 5.6rem;
    background:url('/img/mw/teenteen/img_parent1.png') no-repeat left center;
    background-size:4rem;
}
.parent-list li::after{
    position:absolute;
    bottom:-1.2rem;
    left:1.8rem;
    width:.2rem;
    height:2.6rem;
    background:url('/img/mw/teenteen/bg_parent.png') no-repeat left top;
    background-size:.2rem;
    content:'';
}
.parent-list li:nth-child(2){
    background-image:url('/img/mw/teenteen/img_parent2.png');
}
.parent-list li:nth-child(3){
    background-image:url('/img/mw/teenteen/img_parent3.png');
}
.parent-list li:nth-child(4){
    background-image:url('/img/mw/teenteen/img_parent4.png');
}
.parent-list li:last-child::after{
    display:none;
}
.parent-list li .title{
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base);
}
.parent-list li .txt{
    font-size:var(--font-size-b2);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-500);
}


/* ----------------------
 * 자주묻는 질문
 * ----------------------
 */
.question-list .list-item .title{
    position:relative;
    padding:1.6rem 3rem 1.6rem 0;
    border-bottom:solid 1px #F1F3F5;
}
.question-list .list-item .title::after{
    position:absolute;
    right:0;
    top:1.8rem;
    width:2rem;
    height:2rem;
    background:url('/img/mw/teenteen/arr_acrd.png') no-repeat left top;
    background-size:2rem;
    transform:rotate(180deg);
    content:'';
}
.question-list .list-item .title p{
    padding-left:2.4rem;
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-semibold);
    line-height:var(--line-height-base);
    background:url('/img/mw/teenteen/ico_question.png') no-repeat left top;
    background-size:2rem;
}
.question-list .list-item .cont{
    display:none;
    background:#F8F9FA;
    width:calc(100% + 4rem);
    max-height: 0;
    margin-left:-2rem;
    padding:1.6rem 2rem 3.2rem;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.question-list .list-item .cont p{
    padding-left:2.4rem;
    font-size:var(--font-size-b1);
    line-height:var(--line-height-base);
    color:var(--modeGrayNonOpaque-600);
}
.question-list .list-item.active .title{
    border-bottom:0;
}
.question-list .list-item.active .title::after{
    transform:rotate(0deg);
}
.question-list .list-item.active .cont{
    display:block;
    max-height: 50rem;
}


/* ----------------------
 * 이벤트
 * ----------------------
 */
.event-list li + li{
    margin-top:1.2rem;
}
.event-list li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:48rem;
    min-height:12rem;
    margin:0 auto;
    padding:1.6rem 2.4rem 2rem;
    text-align:center;
    border-radius:1.6rem;
    overflow:hidden;
    background:#FFEBF2;
}
.event-list li.yellow > a{
    background:#FFF4D1;
}
.event-list li.green > a{
    background:#DFF7EF;
}
.event-list li .event-info{
    height:calc(100% - 7rem);
    text-align:left;
}
.event-list li .event-info .d-day{
    display:inline-block;
    margin-bottom:.8rem;
    padding:.3rem .6rem;
    font-size:var(--font-size-d3);
    font-weight:var(--font-weight-semibold);
    color:var(--blue-600);
    border:solid 1px var(--blue-500);
    border-radius:2.4rem;
    background:#fff;
}
.event-list li .event-info .title{
    display:-webkit-box;
    padding-right:1rem;
    margin-bottom:.4rem;
    font-size:var(--font-size-h6);
    font-weight:var(--font-weight-semibold);
    color:var(--modeGrayNonOpaque-800);
    line-height:var(--line-height-base);
    word-break:keep-all;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
}
.event-list li .event-info .date{
    font-size:var(--font-size-d1);
    font-weight:var(--font-weight-medium);
    color:var(--modeGrayNonOpaque-500);
    line-height:var(--line-height-base);
    word-break:keep-all;
}
.event-list li .event-img{
    width:7rem;
    height:100%;
}
.event-detail{
    margin-top:2.4rem;
}
.event-detail .event-title{
    padding:1.6rem 0;
    border-top:solid 1px var(--modeGrayNonOpaque-700);
    border-bottom:solid 1px var(--modeGrayNonOpaque-300);   
}
.event-detail .event-title p{
    word-break:keep-all;
    line-height:var(--line-height-base);
}
.event-detail .event-title .title{
    font-size:var(--font-size-b1);
    font-weight:var(--font-weight-bold);
}
.event-detail .event-title .date{
    padding-top:1rem;
    font-size:var(--font-size-d1);
    line-height:var(--line-height-adjust);
}
.event-detail .event-content{
    padding:1.6rem 0;
}
.event-detail .event-content .img-container img{
    max-width:48rem;
}