@charset "utf-8";

/* font */
@import url('./fonts.css?ver=1');

/* RESET */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video,input{ margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;font-style:normal; }
body{line-height:1.2;word-break:break-all}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav,ul,li{list-style:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:#333}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #f2f2f2;margin:15px 0 20px;padding:0}
input,select{vertical-align:middle}
html{font-size:13px}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:1px}
img { vertical-align:top; }
html,body{height:100%;background:#f4f4f4}
*{font-family: 'Pretendard', 'Malgun Gothic', sans-serif;word-break:keep-all;word-wrap:break-word;overflow-wrap:anywhere;letter-spacing:-0.02em;color:#5a5a5a;}

.hide {position:absolute; left:-9999px; top:-9999px; font-size:0; line-height:0; height:0; overflow:hidden;}
.fInherit{font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;}
.fw400 {font-weight:400 !important;}
.fw500 {font-weight:500 !important;}
.fw700 {font-weight:700 !important;}
.colorPink {color:#ff446e !important;}

#wrap{width:100%;min-width:1300px;margin:0 auto;} 

    section.taptapo{position:relative;width:1234px;height:900px;margin:0 auto;}

        #visual{position:absolute;left:0;top:0;width:551px;height:825px;}
            #visual .swiper-container{width: 551px;height: 825px;overflow:hidden;}
            #visual .swiper-slide {background-position: center;background-size: cover;border-radius: 22px;box-shadow: 10px 15px 20px #d5d5d5}
            #visual .swiper-slide.card1{background-image:url(/assets/images/pc/taptaporenewel/card1.png);text-indent: -9999px;}
            #visual .swiper-slide.card2{background-image:url(/assets/images/pc/taptaporenewel/card2.png);text-indent: -9999px;}
            #visual .swiper-slide.card3{background-image:url(/assets/images/pc/taptaporenewel/card3.png);text-indent: -9999px;}
            #visual .swiper-slide.card4{background-image:url(/assets/images/pc/taptaporenewel/card4.png);text-indent: -9999px;}
            #visual .swiper-slide.card5{position: relative;z-index: 5;}
            #visual .swiper-slide.card5 a{position: absolute;left:50%;top:50%;margin:-58px 0 0 -58px;z-index: 6;display: block;}
            #visual .swiper-slide.card5 a.btn-sound{top: inherit;bottom: 20px;left: 20px;margin: 0;}
            #visual .swiper-slide.card5 video[poster]{height: 825px;width: 551px;border-radius: 24px;}

            .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{top:27px;left:175px;}
            .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 8px;}

            .swiper-pagination-bullet{width:10px;height:10px;background:#fff;opacity:0.64;}
            .swiper-pagination-bullet-active{width:33px;border-radius:6px;opacity:1}

            .swiper-button-next, .swiper-container-rtl .swiper-button-prev{width:15px;height:31px;background:url(/assets/images/pc/taptaporenewel/next.png) no-repeat left top;}
            .swiper-button-prev, .swiper-container-rtl .swiper-button-next{width:15px;height:31px;background:url(/assets/images/pc/taptaporenewel/next.png) no-repeat left top;transform: rotate(180deg);}

            .swiper-pagination-bullet:nth-child(5){width: 10px;height: 13px;background:url(/assets/images/pc/taptaporenewel/icn_movie.png) no-repeat left top;background-size: 100%;vertical-align: bottom;border-radius: inherit;}
            .swiper-pagination-bullet-active{width:10px;height:10px;}

            .hide{display:none !important;}

            #visual .link{position:absolute;top:323px;left:49px;text-indent: -9999px;display:block;width:146px;height:110px;outline: none;z-index: 1;}

        .eventPanel{position:absolute;right:0;top:0;width:646px;border:1px solid #ccc;border-radius: 22px;box-shadow: 20px 15px 20px #d5d5d5;background-color:#fff;}
            .eventPanel .mainArea{display:flex;justify-content:center;align-items:center;gap:18px;padding:20px 0 14px;}
            .eventPanel .mainArea .cardBox{display:flex;width:204px;justify-content:center;}
            .eventPanel .mainArea .txtBox{display: flex;flex-direction:column;align-items:center;gap:8px;}
            .eventPanel .mainArea .txtBox .txt{font-weight:500;font-size:23px;line-height:1.4;color:#5a5a5a;text-align:center;}
            .eventPanel .mainArea .txtBox .view{display:inline-flex;justify-content:center;align-items:center;gap:10px;width:220px;padding:12px;border:2px solid #ff446e;border-radius:100px;background-color:#fff;font-weight:500;font-size:18px;line-height:1.2;color:#ff446e;}
            .eventPanel .mainArea .txtBox .view::after{content:'';display:inline-block;width:11px;height:16px;background-image:url('/assets/images/pc/taptaporenewel/arw_right_pink.svg');background-position:center center;background-size:100% auto;background-repeat:no-repeat;}
            .eventPanel .benefitsArea{padding:0 23px;}
            .eventPanel .benefitsList{display:flex;gap:12px;justify-content:center;padding:18px 0;border-top:1px solid #e4e4e4;}
            .eventPanel .benefitsItem{font-weight:700;font-size:14px;color:#ff446e;}

        #tab{position:absolute;right:0;top:285px;width:646px;height:413px;border:1px solid #ccc;border-radius:24px;background-color:#fff;box-shadow: 20px 15px 20px #d5d5d5;z-index: 5}
            #tab .tabBtn{display:flex;gap:10px;justify-content:center;padding:0 30px;border-bottom:1px solid #ccc;box-sizing:border-box;}
                #tab .tabBtn a{display:block;position:relative;bottom:-1px;z-index:10;width:83px;height:76px;text-indent: -9999px;background-position:center center;background-repeat:no-repeat;cursor: pointer;}
                #tab .tabBtn a.on {border-bottom:5px solid #ff446e;}
                #tab .tabBtn a::before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;background-position:center center;background-repeat:no-repeat;opacity:1;transition: 1s opacity;}
                #tab .tabBtn a:nth-child(1)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_cup.png);}
                #tab .tabBtn a:nth-child(2)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_bag.png);}
                #tab .tabBtn a:nth-child(3)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_bus.png);}
                #tab .tabBtn a:nth-child(4)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_video.png);}
                #tab .tabBtn a:nth-child(5)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_globe.png);}
                #tab .tabBtn a:nth-child(6)::before{background-image:url(/assets/images/pc/taptaporenewel/ico_bank.png);}
                #tab .tabBtn a.on::before{opacity:0;}
                #tab .tabBtn a::after{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;background-position:center center;background-repeat:no-repeat;opacity:0;transition: 1s opacity;}
                #tab .tabBtn a:nth-child(1)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_cup_on.png);}
                #tab .tabBtn a:nth-child(2)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_bag_on.png);}
                #tab .tabBtn a:nth-child(3)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_bus_on.png);}
                #tab .tabBtn a:nth-child(4)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_video_on.png);}
                #tab .tabBtn a:nth-child(5)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_globe_on.png);}
                #tab .tabBtn a:nth-child(6)::after{background-image:url(/assets/images/pc/taptaporenewel/ico_bank_on.png);}
                #tab .tabBtn a.on::after{opacity: 1;}
                #tab .tabBtn a .ico_event {display:block;position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:47px;height:17px;background-image:url('/assets/images/pc/taptaporenewel/label_event.png');background-position:center center;background-size:100% auto;background-repeat:no-repeat;}

            #tab .tabCon>div{display:none;margin:26px 0 0 30px;clear:both;width:590px;height:275px;overflow-y:scroll;overflow-x:hidden;}
                #tab .tabCon>div.on{display:block;}
                #tab  ::-webkit-scrollbar {width: 8px;border-radius: 8px;background: #e5e5e5;}
                #tab  ::-webkit-scrollbar-track {border-radius: 8px;}
                #tab  ::-webkit-scrollbar-thumb {border-radius: 8px;background: #999;}

                #tab .txtArea { padding-right: 10px;}
                #tab .txtArea .ttlBox {position:relative;padding-bottom:10px;}
                #tab .txtArea .ttlBox::after {content:'';display:block;position:absolute;left:0;top:100%;width:21px;height:2px;background-color:#5a5a5a;}
                #tab .txtArea .ttlBox .ttl {font-weight:700;font-size:22.7px;line-height:30px;color:#ff446e;}
                #tab .txtArea .ttlBox .desc {font-weight:500;font-size:20.3px;line-height:30px;}
                #tab .txtArea .additionBox {display:flex;flex-direction:column;gap:15px;margin-top:28px;}
                #tab .txtArea .additionBox .txt1,
                #tab .txtArea .additionBox .infDt,
                #tab .txtArea .additionBox .infDd {font-weight:500;font-size:15.26px;line-height:23px;}
                #tab .txtArea .additionBox .infDt,
                #tab .txtArea .additionBox .infDd {font-weight:700;color:#787878;}
                #tab .txtArea .additionBox .infDl {display:flex;}
                #tab .txtArea .additionBox .infDl + .infDl {margin-top:-15px;}
                #tab .txtArea .additionBox .txt1 {font-weight:700;}
                #tab .txtArea .additionBox .infDt {white-space:nowrap;}
                #tab .txtArea .additionBox .infDt::after {content:':';display:inline;margin:0 0.3em;font-family:inherit;font-weight:inherit;font-size: inherit;line-height:inherit;letter-spacing:inherit;color:inherit;}
                #tab .txtArea .additionBox .infItem {display:flex;gap:0.35em;position:relative;font-weight:400;font-size:15.26px;line-height:23px;}
                #tab .txtArea .additionBox .infItem::before {content:'·';display:block;font-family:inherit;font-weight:inherit;font-size: inherit;line-height:inherit;letter-spacing:inherit;color:inherit;}

        .botbtn{position:absolute;right:0;top:734px;display:block;width:646px;height:91px;background:url(/assets/images/pc/taptaporenewel/btn_bot.png) no-repeat left top;border-radius: 20px;box-shadow: 20px 15px 20px #d5d5d5;text-indent: -9999px;}

footer{display:flex;justify-content:center;width:100%;min-width:1300px;margin:0 auto;padding:25px 0;text-align:center;background:#7d7d7d}
/* footer .termsArea {text-align:left;}
footer .termsArea .ttl,
footer .termsArea .txt {} */

.d_div {display:flex;gap:.3em;}
.star_list {width:640px;max-width:100%;padding:0 35px;text-align:left;}
.teremsDl {display:flex;}
.teremsDt,
.teremsDd {font-weight:500;font-size:17px;line-height:25px;letter-spacing:-0.09em;color:#fff;}
.teremsDt{white-space:nowrap;}
.teremsDt::after{content:':';display: inline;margin:0 0.2em;font-family:inherit;font-weight: inherit; font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;}
.star_item {display: flex; gap: 0.2em;}
.star_item,
.star_item .txt_box .txt {font-weight:300;font-size:17px;line-height:25px;letter-spacing:-0.09em;color:#fff;}
.star_item::before { content: '-'; display: inline; margin-right: 0em; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit;}
