@charset "utf-8";

.pop {font-family: "Poppins", sans-serif;}
#main {background-color: #000;}
.main {overflow: hidden;}
.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 970px; position: relative; }
.m-visual .visual .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .backdrop {background-image: url(../images/main/m-visual01.jpg);} 
.m-visual .visual .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .container .main_txt {position: absolute; top: 305px; left: 285px; display: flex; align-items: center;}
.m-visual .visual .container p {font-size: 200px; color: #fff; font-weight: 700; transition: all .6s linear;}
.m-visual .visual .container p.f300 {font-size: 330px; position: relative; padding-right: 215px;}
.m-visual .visual .container p.f300::after {position: absolute; content: '콘텐츠를 자산으로! 셀디와 함께!'; font-size: 21px; color: #fff; font-weight: 500; top: 60px; right: 0;}
.m-visual .visual .container .main_txt .line {position: relative; width: 0; padding-top: 25px; transition: all .6s ease-in;}
.m-visual .visual .container .main_txt .line i {display: block; width: calc(100% - 30px); height: 8px; background-color: #fff; margin-left: 30px;}
.m-visual .visual .container .main_txt span {display: block; position: absolute; /* top: -13px;  left: 54.3%; */ top: -20px; left: 57%; transform: translateX(-50%); font-family: 'Exmouth'; font-size: 344px; color: #ff00a2; line-height: 210px; /* padding: 0 105px 0 45px; */ padding: 0 90px 5px 45px; z-index: 2; transition: all 1.5s linear; clip-path: inset(0 100% 0 0);}
.m-visual .visual .container .main_txt.on .line {width: 380px; margin-right: -60px;}
.m-visual .visual .container .main_txt.on span.show {clip-path: inset(0 0 0 0);}
.m-visual .visual .container .main_txt.on .pink {color: #ff00a2; letter-spacing: -11px;}
.m-visual .visual .container .main_txt.on .f300 {color: #ff00a2; letter-spacing: 0;}
.m-visual .visual .container .sub_txt {position: absolute; top: 590px; left: 285px;}
.m-visual .visual .container .sub_txt p {font-size: 32px; font-weight: 300; color: #fff;}
.m-visual .visual .container .sub_txt > span {display: block; font-size: 49px; color: #cc00ff; font-family: 'Exmouth'; padding-top: 15px; font-weight: 400;}

.section-header {text-align: center;}
.section-header span {display: block; font-size: 30px; font-weight: 500; color: #ac04d6; margin-bottom: 30px;}
.section-header h3 {font-size: 56px; font-weight: 800; color: #000; letter-spacing: -2px;}

/* sec2 */
.sec2 {position: relative; background-color: #000; width: 100%; height: 100%; padding-top: 60px; padding-bottom: 70px;}
.sec2 h3 {display: inline-block; padding: 15px 105px 65px 0; font-size: 67px; font-weight: 800; color: #fff; background: url(../images/main/tit_star.png) 100% 0% no-repeat; background-size: auto; height: 100%;}
.sec2 .w_selldy {padding-top: 90px; width: 100%;}
.sec2 .w_selldy > ul {display: flex; width: calc(100% + 40px); margin: 0 -20px;}
.sec2 .w_selldy > ul li {width: 100%; max-width: 349px; padding: 0 20px; flex-shrink:0!important; transform: rotate(-5deg);}
.sec2 .w_selldy > ul li:nth-of-type(even) {transform: translateY(-60px) rotate(-5deg);}
.sec2 .w_selldy > ul li a {position: relative; display: block; width: 100%;}
.sec2 .w_selldy > ul li a img {display: block; max-width: 100%; margin: 0 auto;}
.sec2 .w_selldy > ul li.video a img {opacity: .8;}
.sec2 .w_selldy > ul li.video a::after {position: absolute; content: ''; width: 68px; height: 68px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/main/ico_play.png) 50% 50% no-repeat; background-size: auto; z-index: 2; opacity: 1;}
/* .sec2 .w_selldy > ul li.video a {display: block; position: relative; overflow: hidden;}
.sec2 .w_selldy > ul li.video a::before {display: block; content: ''; padding-top: 177.02%;}
.sec2 .w_selldy > ul li.video a iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} */

/* sec3 */
.sec3 {background-color: #fff; width: 100%; padding: 100px 0 110px;}
.sec3 .tier {max-width: 790px; width: 100%; margin: 130px auto 0; overflow: visible; cursor: url('../images/main/cursor_.png') 2 2, auto;}
.sec3 .tier .inner > h4 {font-size: 105px; font-weight: 800; color: #000; text-align: center;}
.sec3 .tier .inner dl {display: flex; align-items: center; justify-content: center; gap: 45px; margin-top: 40px;}
.sec3 .tier .inner dl dt {position: relative; font-size: 30px; font-weight: 700; color: #000; padding-left: 45px;}
.sec3 .tier .inner dl dt::before {position: absolute; content:''; width: 33px; height: 32px; background:url()50% 50% no-repeat; background-size: auto; bottom:0; left: 0;}
.sec3 .tier02 .inner dl dt::before {background-image:url(../images/main/ico_op01.png);}
.sec3 .tier03 .inner dl dt::before {background-image:url(../images/main/ico_op02.png);}
.sec3 .tier04 .inner dl dt::before {background-image:url(../images/main/ico_op03.png);}
.sec3 .tier .inner dl dt::after {position: absolute; content: ''; width: 1px; height: 18px; background-color: #b2b2b2; top: 50%; right: -25px; transform: translateY(-50%);}
.sec3 .tier01 .inner dl dt {padding-left: 0;}
.sec3 .tier .inner dl dd {font-size: 17px; color: #ff00a2; font-weight: 700;}
.sec3 .tier .inner > p {font-size: 19px; color: #000; font-weight: 500; text-align: center; line-height: 1.5; margin-top: 25px; letter-spacing: -.8px;}
.sec3 .tier .inner .banner {position: relative; max-width: 650px; width: 100%; margin: 55px auto 0;}
.sec3 .tier .inner .banner ul {width: calc(100% + 15px); margin: 0 -7.5px; display: flex; flex-wrap: wrap; max-height: 159px; overflow: hidden; transition: all .4s ease-out;}
.sec3 .tier .inner .banner.open ul {max-height: 250px;}
.sec3 .tier02 .inner .banner.open ul {max-height: 320px;}
.sec3 .tier03 .inner .banner.open ul {max-height: 500px;}
.sec3 .tier .inner .banner ul li {width: 50%; padding: 0 7.5px;}
.sec3 .tier .inner .banner ul li:nth-of-type(2) ~ li {margin-top: 15px;}
.sec3 .tier .inner .banner ul li p {width: 100%; font-size: 17px; font-weight: 500; color: #000; padding: 22px 0 22px 90px; line-height: 1.5; background: url() 20px 50% no-repeat; background-size: auto; background-color: #e9e9e9; letter-spacing: -0.025em}
.sec3 .tier .inner .banner ul li p > span {font-size: 14px;}
.sec3 .tier01 .inner .banner ul li:nth-of-type(1) p {background-image: url(../images/main/ico_sec301.png);}
.sec3 .tier01 .inner .banner ul li:nth-of-type(2) p {background-image: url(../images/main/ico_sec305.png);}
.sec3 .tier01 .inner .banner ul li:nth-of-type(3) p {background-image: url(../images/main/ico_sec306.png);}
.sec3 .tier01 .inner .banner ul li:nth-of-type(4) p {background-image: url(../images/main/ico_sec303.png);}

.sec3 .tier02 .inner .banner ul li:nth-of-type(1) p {background-image: url(../images/main/ico_sec301.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(2) p {background-image: url(../images/main/ico_sec305.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(3) p {background-image: url(../images/main/ico_sec306.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(4) p {background-image: url(../images/main/ico_sec303.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(5) p {background-image: url(../images/main/ico_sec307.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(6) p {background-image: url(../images/main/ico_sec308.png);}
.sec3 .tier02 .inner .banner ul li:nth-of-type(7) p {background-image: url(../images/main/ico_sec309.png);}

.sec3 .tier03 .inner .banner ul li:nth-of-type(1) p {background-image: url(../images/main/ico_sec301.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(2) p {background-image: url(../images/main/ico_sec305.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(3) p {background-image: url(../images/main/ico_sec306.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(4) p {background-image: url(../images/main/ico_sec303.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(5) p {background-image: url(../images/main/ico_sec307.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(6) p {background-image: url(../images/main/ico_sec308.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(7) p {background-image: url(../images/main/ico_sec309.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(8) p {background-image: url(../images/main/ico_sec310.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(9) p {background-image: url(../images/main/ico_sec311.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(10) p {background-image: url(../images/main/ico_sec304.png);}
.sec3 .tier03 .inner .banner ul li:nth-of-type(11) p {background-image: url(../images/main/ico_sec312.png);}

.sec3 .tier04 .inner .banner ul li:nth-of-type(1) p {background-image: url(../images/main/ico_sec313.png);}
.sec3 .tier04 .inner .banner ul li:nth-of-type(2) p {background-image: url(../images/main/ico_sec314.png);}
.sec3 .tier04 .inner .banner ul li:nth-of-type(3) p {background-image: url(../images/main/ico_sec315.png);}
.sec3 .tier04 .inner .banner ul li:nth-of-type(4) p {background-image: url(../images/main/ico_sec316.png);}
.sec3 .tier04 .inner .banner ul li:nth-of-type(5) p {background-image: url(../images/main/ico_sec317.png);}
.sec3 .tier04 .inner .banner ul li:nth-of-type(6) p {background-image: url(../images/main/ico_sec318.png);}


.sec3 .tier .inner .more {display: block; font-size: 16px; font-weight: 600; max-width: 160px; width: 100%; border-radius: 30px; background-color: #000; text-align: center; color: #fff; line-height: 43px; margin: 30px auto 0; transition: all .2s linear;}
.sec3 .tier .inner .more:hover {background-color: #ac04d6;}
.slick-slide.tier01 .inner .more {display: none;}
.slick-arrow {display: none !important;}
.slick-list {overflow: visible !important;}
.slick-slide {opacity: .15; transition: all .3s linear;}
.slick-slide a {pointer-events : none;}
.slick-center {opacity: 1;}
.slick-center a {pointer-events : auto;}

.sec3 .note {display: none; font-size: 16px; color: #888; text-align: center;}

/* sec4 */
.sec4 {padding: 135px 0 220px; width: 100%; background: url(../images/main/bg_sec4.jpg) 50% 50% no-repeat; background-size: cover;}
.sec4 .section-header span {color: #ff00a2;}
.sec4 .section-header h3 {color: #fff;}
.sec4 .logo-banner {max-width: 1715px; width: 100%; margin-left: auto; margin-top: 110px;}
.sec4 .logo {position: relative; background-color: #fff; border-radius: 50px 0 0 50px; height: 104px;}
.sec4 .logo ul {width: 100%; height: 100%; display: flex; align-items: center;}
.sec4 .logo ul li {max-width: 245px; width: 100%;}
.sec4 .logo ul li.bg_logo {width: 100%; height: 100%; background:url() 50% 50% no-repeat; background-size: cover;}
.sec4 .logo ul li.bg_1 {background-image:url(../images/main/logo27.png);}
.sec4 .logo ul li.bg_2 {background-image:url(../images/main/logo28.png);}
.sec4 .logo ul li img {display: block; max-width: 100%; margin: 0 auto;}
.sec4 .logo ~ .logo {margin-top: 35px;}
.sec4 .logo > small {position: absolute; display: block; text-align: center; font-size: 20px; color: #fff; line-height: 1.4; font-weight: 600; top:50%; right: 150px; transform: translateY(-50%);}

/* sec5 */
.sec5 {width: 100%; background-color: #000; padding-top: 125px;position: relative;}
/* .simply-scroll {height: 338px !important; width: 100% !important; margin-bottom: 0 !important;}
.simply-scroll .simply-scroll-clip {height: 100% !important; width: 100% !important;}
.simply-scroll .simply-scroll-list {height: 100%; display: flex;}
.simply-scroll .simply-scroll-list .thumb_slide {height: 100% !important; width: 190px !important; margin: 0 15px; cursor: pointer;} */
.sec5 .inner{width: 100%; height: 338px; overflow: hidden; white-space: nowrap;}
.thumb_wrap {display: flex; animation: scroll-left 30s linear infinite; width: max-content; height: 100%;}
.thumb_wrap .thumb_slide {display: inline-block; margin: 0 15px; flex: 0 0 auto; white-space:nowrap; cursor:pointer;}
.thumb_slide:hover ~ .thumb_slide, .thumb_slide:hover,  .thumb_wrap:hover {animation-play-state: paused;}
.thumb_wrap .thumb_slide img {max-width: 100%; margin: 0 auto; display: block; width: 100%; height: 100%;}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* .sec5 .design {width: 100%; margin-top: 115px;}
.sec5 .design > .container {position: relative; max-width: 1775px !important; padding-top: 110px;}
.sec5 .design > .container::before {position: absolute; content: 'Selldaily'; top: -30px; left: 15px; font-size: 304px; font-weight: 800; color: rgba(245,245,245, .1); z-index: 1; letter-spacing: -7px;}
.sec5 .design .design_txt {position: relative; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; padding-left: 85px; transition: all 3s linear .15s; padding-bottom: 20px; clip-path:inset(0 100% 0 0);}
.sec5 .design .design_txt h5 {font-size: 155px; font-family: 'Exmouth'; font-weight: 400;}
.sec5 .design .design_txt h5.purple {color: #9000f7;}
.sec5 .design .design_txt h5.green {color: #32d202;}
.sec5 .design .design_txt .gr_line {max-width: 315px; width: 100%; height: 10px; background-image: linear-gradient(to right, #9000f7, #32d202); margin-left: 20px; margin-top: 50px;}

.sec5 .design .design_txt.motion {clip-path: inset(0 0% 0 0);}
 */

/* popup */
.popup_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .85); z-index: 1001; display: none;}
.popup_wrap .popup {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 50px; padding: 0 80px; max-width: 710px; width: 100%;}
.popup_wrap .popup .img {max-width: 432px; width: 100%; position: relative; overflow: hidden;}
.popup_wrap .popup .img img {display: block; max-width: 100%; width: 100%; margin: 0 auto;}
.popup_wrap .popup .img.yt::before {display: block; content: ''; padding-top: 177.02%}
.popup_wrap .popup .img.yt iframe {width: 100%; height: 100% !important; position: absolute; top: 0; left: 0;} 
.popup_wrap .popup .btns .pop_close {width: 66px; height: 66px; border-radius: 50%; background-color: #cc00ff;}
.popup_wrap .popup .btns .pop_close img {display: block; margin: 0 auto;}
.popup_wrap .popup .btns > a {position: relative; display: block; width: 66px; height: 66px; border-radius: 50%; background-color: #ff00a2; margin-top: 20px;}
.popup_wrap .popup .btns > a::after {position: absolute; content: ''; top: 50%; left: 20px; transform: translateY(-50%); width: 118px; height: 23px; background: url(../images/main/ico_more.png) 50% 50% no-repeat; background-size: auto;transition: all .2s linear;}
.popup_wrap .popup .btns > a:hover::after {left: 10px;}