@charset "utf-8";
html, body { scroll-behavior:smooth; }
a{text-decoration:underline; color:#2b8cf0;}
img{border:0; max-width:100%;vertical-align: middle;}
.details {width: 1200px;margin: 0 auto;}
.colour-words {background-image: linear-gradient(45deg,#f21ea1,#ff8697,#fff49e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;color: transparent;}
main {background-color: #221f1f;;}
.fe765f {color: #fe765f;}
.ffda47 {color: #ffda47;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

nav

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
header {height: 75px;position: fixed;top: 0;background-color:rgba(34,31,31,.8);left: 0;right: 0;z-index: 999;}
.top-nav {display: flex;justify-content: space-between;align-items: center;height: 75px;width: 1200px;margin: 0 auto;}
.top-nav a{display: inline-block;}
.top-nav ul{display: flex;justify-content: center;align-items: center;}
.top-nav ul li {margin: 0 30px;}
.top-nav ul li a{text-decoration: none;color: #ffffff;font-size: 15px;}
.top-nav ul li a:hover{color: #2eb7f5;}
.mobile_nav {display: none;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main01

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main01 {background: url("../images/vlogger-challenge/bg1.jpg")no-repeat top center; height: 1092px; text-align: center; padding-top: 150px;background-size: contain;}
.main01 h1 {font-size: 45px; line-height: 56px; font-weight: 600; color: #ffffff;}
.main01 .subhead {font-size: 31px; line-height: 36px; color: #f7f7f7;margin: 15px 0;}
.main01 p {font-size: 17px; line-height: 32px; color: #cccccc;width: 750px;margin: 0 auto;}
.main01 .wave {width: 230px; height: 230px; position:relative;margin: 0 auto;}
.main01 .wave img{position:absolute; z-index:9;top: 50%; left: 50%; transform: translate(-50%, -50%);cursor: pointer;}
.main01 .wave .wave-box{position:absolute; width:500px; height:500px;top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main01 .wave .wave-box span{width:500px; height:500px; background-color:rgba(252,47,77, .1); position:absolute; border-radius:50%;opacity:0;top: 0; left: 0; border: 1px solid #c51726;}
.main01 .wave .wave-box span.wave1{animation:wave 4s cubic-bezier(.5,.27,.2,.91) 1s infinite; -webkit-animation:wave 4s cubic-bezier(.5,.27,.2,.91) 1s infinite;}
.main01 .wave .wave-box span.wave2{animation:wave 4s cubic-bezier(.5,.27,.2,.91) 3s infinite; -webkit-animation:wave 4s cubic-bezier(.5,.27,.2,.91) 3s infinite;}
.main01 .wave .wave-box span.wave3{animation:wave 4s cubic-bezier(.5,.27,.2,.91) 5s infinite; -webkit-animation:wave 4s cubic-bezier(.5,.27,.2,.91) 5s infinite;}
@keyframes wave{ 0%{transform:scale(0); opacity:0} 30%{opacity:1} 50%{opacity:0.3} 80%{opacity:0.1} 100%{transform:scale(1); opacity:0} }
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main02

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main02 {margin-top: -650px; text-align: center;padding: 80px 0;overflow: hidden;}
.main02 .gradient {padding: 50px 0;background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(34,31,31,.8)),color-stop(70%, #221f1f));background-image: linear-gradient(-180deg,rgba(34,31,31,.8) 0%,#221f1f 70%);}
.main02 .asd {background: #221f1f;}
.main02 h2 {font-size: 45px; line-height: 56px; font-weight: 600;}
.main02 h2 {font-size: 45px; line-height: 56px; font-weight: 600;}
.main02 ul.axis {display: flex; justify-content: center; align-items: center;margin-top: 50px;}
.main02 ul.axis li{width: 150px;}
.main02 ul.axis li .icon-box{width: 128px; height: 128px; border: 1px solid #cacaca; border-radius: 50%; line-height: 128px;margin: 0 auto;}
.main02 ul.axis li .icon-box.animation{animation: animloader51 .8s linear alternate;border-style: dashed;border-color: #fc2f4d;}
@-webkit-keyframes animloader51 {
    0% {
        border-color: #fc2f4d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }
    25% {
        border-color: #fc2f4d #fc2f4d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }
    50% {
        border-color: #fc2f4d #fc2f4d #fc2f4d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }
    75% {
        border-color: #fc2f4d #fc2f4d #fc2f4d #fc2f4d rgba(255, 255, 255, 0);
    }
    100% {
        border-color: #fc2f4d #fc2f4d #fc2f4d #fc2f4d #fc2f4d;
    }
}
@keyframes animloader51 {
    0% {
        border-color: #fc2f4d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }
    33% {
        border-color: #fc2f4d #fc2f4d rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
    }
    66% {
        border-color: #fc2f4d #fc2f4d #fc2f4d rgba(255, 255, 255, 0);
    }
    100% {
        border-color: #fc2f4d #fc2f4d #fc2f4d #fc2f4d;
    }
}
.main02 ul.axis li p{font-size: 15px;line-height: 24px;color: #c0c0c0;min-height: 50px;margin-top: 20px;}
.main02 ul.axis li span{font-size: 15px;line-height: 24px;color: #eb2e49;}
.main02 ul.axis .line{width: 150px;height: 1px;border-top: 1px dashed #cacaca;transform: translateY(-50px);position: relative;}
.main02 ul.axis .advance::after{content: '';display: inline-block;border: 9px solid transparent;border-left-color: #eb2e49;border-left-width: 12px;position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);}

.main02 .topic {position: relative;padding-top: 60px;}
.main02 .topic::before {content: '';display: inline-block;width: 961px;height: 768px;background: url("../images/vlogger-challenge/bg2.png")no-repeat center;position: absolute;top: 0;right: -300px;z-index: 0;}

.main02 ul.theme {display: flex; justify-content: flex-start; align-items: flex-start;flex-wrap: wrap; width: 1180px;}
.main02 ul.theme li {transition: -webkit-transform .5s ease;transition: transform .5s ease;transition: transform .5s ease,-webkit-transform .3s ease; overflow: hidden;position: relative;}
.main02 ul.theme li img{width: 100%;height: 100%;transition: all .3s ease;}
.main02 ul.theme li:hover img{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
.main02 ul.theme li span.tag{display: inline-block;position: absolute;right: 0;bottom: 0;background-color:rgba(215,51,71, .9); color: #ffffff;padding: 12px 35px;font-size: 21px;}
.main02 ul.theme li:nth-of-type(1) {width: 240px;height: 265px;}
.main02 ul.theme li:nth-of-type(2) {width: 410px;height: 265px;}
.main02 ul.theme li:nth-of-type(3) {width: 276px;height: 265px;}
.main02 ul.theme li:nth-of-type(4) {width: 252px;}
.main02 ul.theme li:nth-of-type(5) {width: 240px;height: 265px;}
.main02 ul.theme li:nth-of-type(6) {width: 410px;height: 404px;}
.main02 ul.theme li:nth-of-type(7) {width: 276px;height: 326px;}
.main02 ul.theme li:nth-of-type(8) {width: 252px;height: 308px;position: relative;top: -120px;}

.main02 .channel {color: #ffffff;padding-top: 20px;}
.main02 .channel::after {content: '';display: inline-block;border: 10px solid transparent;border-top-color: #ffffff;border-top-width: 15px;}
.main02 .channel h3 {font-size: 75px;font-weight: 600;line-height: 1;}
.main02 .channel p {font-size: 21px;line-height: 32px;margin: 50px 0 30px;}

.main02 .faq {text-align: left;color: #adadad;margin-top: 80px;}
.main02 .faq ul li{ border-bottom: 1px solid #353333;padding: 30px 0;}
/* .main02 .faq ul li:last-of-type{ border-bottom: none;} */
.main02 .faq h4 {font-size: 21px;line-height: 32px;color: #ffffff;position: relative;cursor: pointer;}
.main02 .faq h4::after {content: '';display: inline-block;width: 17px;height: 17px;background: url("../images/vlogger-challenge/add.png")no-repeat center;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.main02 .faq h4.active::after {background: url("../images/vlogger-challenge/min.png")no-repeat center;}
.main02 .faq h4>span{color: #ff5b01;}
.main02 .faq p{display: none;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main03

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main03 {padding: 100px 0 50px; background-color: #ffffff; text-align: center;}
.main03 h2 {font-size: 37px;font-weight: 600;line-height: 48px;color: #383737;}
.main03 ul {display: flex; justify-content: space-around; align-items: center;margin: 100px 0 30px;}
.main03 ul li {width: 350px; height: 220px; border: 1px solid #c3c3c3; border-radius: 5px;position: relative;box-sizing: border-box;padding: 80px 30px 50px;}
.main03 ul li span{display: inline-block;width: 96px;height: 96px;border-radius: 50%;color: #ffffff;position: absolute;top: -48px;left: 50%;transform: translateX(-50%);font-size: 17px;}
.main03 ul li span.step1{background-color: #fe775f;}
.main03 ul li span.step2{background-color: #aa80ea;}
.main03 ul li span.step3{background-color: #60a3ff;}
.main03 ul li i{display: block;font-style: normal;font-size: 37px;line-height: 48px;margin-top: 10px;}
.main03 ul li p{font-size: 17px;line-height: 26px;}


.main03 .link-email input{display: inline-block; width: 310px;height: 50px;line-height: 50px;background-color: #f0f4f5;color: #77787e;border: none;outline: none;padding: 0 10px;font-size: 17px;border-radius: 5px;margin: 15px;}
.main03 .link-email button{display: block;width: 330px;height: 70px;line-height: 70px;border: none;border-radius: 10px;background: linear-gradient(90deg, #f64869, #ff795e);font-size: 21px;font-weight: 600;color: #ffffff;margin: 30px auto;cursor: pointer;}

.main03 .submission{display: none;}
.main03 .submission h4{font-size: 27px;line-height: 40px;color: #ff765f;margin-bottom: 30px;}
.main03 .submission p{font-size: 17px;line-height: 26px;color: #2f2f2f;width: 700px;margin: 0 auto;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main04

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main04 {background: url("../images/vlogger-challenge/bg4.jpg")no-repeat center;text-align: center;padding: 100px 0 50px;background-size: cover;}
.main04 h2 {font-size: 37px;font-weight: 600;line-height: 48px;color: #383737;}
.main04 p {font-size: 15px;line-height: 24px;color: #726c66;padding: 10px 0;}
.main04 ul {display: flex; justify-content: space-around; align-items: center;margin: 100px 0 30px;flex-wrap: wrap;}
.main04 ul li {height: 310px;box-sizing: border-box;position: relative;}
.main04 ul li:nth-of-type(1) {width: 495px;border-top-left-radius: 30px;background-color: #ffffff;color: #464646;padding: 50px 30px;}
.main04 ul li:nth-of-type(2) {width: 675px;border-bottom-right-radius: 30px;background-color: #ff765f;color: #ffffff;padding: 50px 60px;}

.main04 ul li .prize-title{font-size: 27px;line-height: 40px;position: absolute;top: -80px;}
.main04 ul li .prize-title span{font-size: 150px;line-height: 1;margin-right: 10px;}
.main04 ul li .prize-box {border: 2px solid #434343;font-size: 27px;line-height: 40px;margin: 30px 0;padding: 30px 0;}
.main04 ul li .prize-explain {font-size: 17px;line-height: 26px;text-align: left;padding-left: 20px;}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main05

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main05 {padding: 100px 0 50px; background-color: #ffffff; text-align: center;}
.main05 h2 {font-size: 37px;font-weight: 600;line-height: 48px;color: #383737;}
.main05 ul {display: flex; justify-content: space-around; align-items: center;margin: 70px auto 30px;transition: all .3s ease;flex-wrap: wrap;width: 1200px;}
.main05 ul li {width: 311px;height: 300px;border-radius: 5px;background-color: #ffffff;  -webkit-box-shadow:0 0 10px #cbccd2;-moz-box-shadow:0 0 10px #cbccd2;box-shadow:0 0 10px #cbccd2;cursor: pointer;margin: 30px 10px;}
.main05 ul li:hover {-webkit-box-shadow:0 0 10px #77787e;-moz-box-shadow:0 0 10px #77787e;box-shadow:0 0 10px #77787e;}
.main05 ul li:nth-of-type(even) {position: relative;top: -30px;}
.main05 ul li .cover-plan{width: 311px;height: 177px;}
.main05 ul li p{text-align: left;padding: 30px 15px;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

popu

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.popu { width: 780px;height: 405px;margin: 0 auto;display: none;}
.popu .close{position: absolute;right: 0;top: -30px;cursor: pointer;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

mailto-after

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.mailto-after {text-align: left; border: 1px solid #333; padding: 50px; width: 85%;margin: 80px auto;}
.mailto-after h4 {font-weight: 600; font-size: 21px;margin: 20px 0 10px;}
.mailto-after input.option-radio+label {cursor: pointer; font-size: 17px;}
.mailto-after input.option-radio {cursor: pointer;}
.mailto-after .submit-apply {text-align: center;margin-top: 50px;}
.mailto-after .submit-apply input {display: inline-block;width: 310px;height: 50px;line-height: 50px;background-color: #f0f4f5;color: #77787e;border: none;outline: none;padding: 0 10px;font-size: 17px;vertical-align: top;}
.mailto-after .submit-apply button {display: inline-block;width: 250px;height: 50px;line-height: 50px;border: none;background: linear-gradient(90deg, #f64869, #ff795e);font-size: 21px;font-weight: 600;color: #ffffff;
    cursor: pointer;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.mailto-scroll {color: inherit; text-decoration: none;}

@media (max-width:979px) {
.details {width: 100%;padding: 0 15px;box-sizing: border-box;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

nav

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
header { background-color: #1f222a;}
.top-nav { flex-wrap: wrap;width: 100%;}
.top-nav ul{flex-wrap: wrap;width: 100%;padding-bottom: 10px;background-color: #1f222a;display: none;}
.top-nav ul li {margin: 0;padding: 0 10px;box-sizing: border-box;width: 100%;}
.top-nav ul li a{padding: 10px 0;border-bottom: 1px solid #fff;display: block;}
.top-nav .mobile_nav {float: right;color: #fff;display: block;}
.logo-mobile {padding: 10px;box-sizing: border-box;display: flex;justify-content: space-between;width: 100%;align-items: center;height: 75px;}
.logo-mobile img {max-width: 100%;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main01

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main01 {height: auto;padding: 100px 0 30px;background-size: cover;}
.main01 h1 {font-size: 1.51rem;line-height: 2.1rem;}
.main01 .subhead {font-size: 1.2rem;line-height: 1.8rem;}
.main01 p {width: 100%; font-size: 1.0625rem;line-height: 1.625rem;text-align: justify;}
.main01 .wave .wave-box{width: 230px;height: 230px;}
.main01 .wave .wave-box span{width: 230px;height: 230px;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main02

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main02 { margin-top: 0;padding: 0;}
.main02 h2 {font-size: 1.51rem;line-height: 2.1rem;}
.main02 ul.axis {flex-wrap: wrap;margin-top: 30px;}
.main02 ul.axis li{margin: 10px;}
.main02 ul.axis .line{display: none !important;}
.main02 .topic {padding: 0;padding: 0;margin: 0;}
.main02 .topic::before {display: none;}
.main02 ul.theme {width: 100%;flex-wrap: wrap;}
.main02 ul.theme li {margin: 10px auto;}
.main02 ul.theme li:nth-of-type(1) {order:2;}
.main02 ul.theme li:nth-of-type(2) {order:1;height: auto;}
.main02 ul.theme li:nth-of-type(3) {order:3;width: 240px;height: 265px;}
.main02 ul.theme li:nth-of-type(4) {order:8;display: none;}
.main02 ul.theme li:nth-of-type(5) {order:7;display: none;}
.main02 ul.theme li:nth-of-type(6) {order:4;width: 240px;height: 265px;}
.main02 ul.theme li:nth-of-type(7) {order:5;width: 240px;height: 265px;}
.main02 ul.theme li:nth-of-type(8) {order:6;width: 240px;height: 265px;top: 0;}
.main02 .channel p {margin: 15px 0;}
.main02 .faq {margin-top: 30px;}
.main02 .faq ul li{padding: 10px 0;}
.main02 .faq h4 {font-size: 1.1rem;line-height: 1.7rem;}
.main02 .faq p{font-size: 0.9375rem;line-height: 1.5rem; }
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main03

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main03 { padding: 30px 0;}
.main03 h2 {font-size: 1.3425rem;line-height: 2rem;}
.main03 ul {margin: 0;flex-wrap: wrap;}
.main03 ul li {margin-top: 80px;}
.main03 ul li p{font-size: 1.0625rem;line-height: 1.625rem;}
.main03 .link-email input{margin: 15px 0;}
.main03 .link-email button{margin: 10px auto;}
.main03 .submission h4{margin-bottom: 15px; font-size: 1.2rem;line-height: 1.8rem;}
.main03 .submission p{width: 100%; font-size: 0.9375rem;line-height: 1.5rem;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main04

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main04 {padding: 30px 0;}
.main04 h2 {font-size: 1.3425rem;line-height: 2rem;}
.main04 p {font-size: 0.9375rem;line-height: 1.5rem;}
.main04 ul {margin: 30px 0;}
.main04 ul li {height: auto;}
.main04 ul li:nth-of-type(1) {max-width: 100%;padding: 30px 10px;}
.main04 ul li:nth-of-type(2) {max-width: 100%;padding: 30px 10px;margin-top: 30px;}
.main04 ul li .prize-title{top: 0;}
.main04 ul li .prize-title span{font-size: 50px;}
.main04 ul li .prize-box {font-size: 1.2rem;line-height: 1.8rem;}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

main05

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main05 {padding: 30px 0;}
.main05 h2 {font-size: 1.3425rem;line-height: 2rem;}
.main05 ul {justify-content: space-around; margin: 30px 0 0;width: 100%;}
.main05 ul li {margin: 15px;}
.main05 ul li:nth-of-type(even) {top: 0;}
.main05 ul li p{font-size: 0.9375rem;line-height: 1.5rem;}
}
@media (max-width:767px) {
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

popu

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.popu {width: calc(100% - 30px);padding-bottom: 56.25%;height: 0;position: relative;transform: translateY(-50%);}
.popu .close{top: -50px;}
.popu iframe{width: 100%;height: 100%;background-color: aquamarine;position: absolute;}}

@media (max-width:479px) {
    
}