.home-wrapper{background:#00a9d4;padding-top:80px;position:relative}.section-rules{display:block;padding-top:30px}.section-rules h2{color:#fff;font-family:VL_SofiaB,sans-serif;font-size:20px;margin:0 0 14px;text-align:center;text-transform:uppercase}.section-rules .message__warning{padding-top:0}.section-rules .message__warning p{color:#fff;font-size:16px;line-height:21px;padding:0 15px;text-align:justify}.label-scroll{height:auto;position:absolute;text-align:left;width:auto}.label-scroll span{display:inline-block;font-family:VL_Sofia,sans-serif;height:auto;text-transform:uppercase;white-space:nowrap;width:auto}.uv-cate .label-scroll{border-top:1px solid #b19d5f;bottom:0;padding:10px 0 0 140px;padding:10px 0 0 200px;right:3%;transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}.uv-cate .label-scroll span{color:#86754f;text-shadow:0 0 24px rgba(0,0,0,.21)}.sunscreen-cate .label-scroll{border-bottom:1px solid #b19d5f;left:3%;padding:0 200px 10px 0;top:140px;transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}.sunscreen-cate .label-scroll span{color:#86754f}.article-relate .label-scroll{border-bottom:1px solid #fff;bottom:260px;left:3%;padding:0 0 10px 200px;transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}.article-relate .label-scroll span{color:#fff}.bg-full{display:block;height:100vh;position:relative;width:100%}.bg{background-attachment:fixed;background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;left:0;position:absolute;top:0;width:100%}.bg.sp{background-position:0;display:none}.intro-banner{display:block;height:calc(100% - 110px);left:0;position:absolute;top:110px;width:100%}.intro-banner:after,.intro-banner:before{content:"";display:inline-block;height:100%;position:relative;vertical-align:middle;width:auto}.intro-left{display:inline-block;height:auto;margin-left:7.5%;max-width:300px;text-align:center;vertical-align:middle;width:40%}.intro-txt{display:inline-block;left:40px;position:relative;text-align:left}.intro-txt h2{color:#fff;font-family:VL_SofiaB;font-size:32px;line-height:1.2;margin-top:30px;text-align:left}.iso-pic{display:inline-block;height:auto;width:auto}.iso-pic.sp{display:none}.iso-pic img{display:block;height:auto;margin:0 auto;max-width:300px;width:auto}.intro-right{height:100%;position:absolute;right:7.5%;text-align:center;top:0;width:auto}.intro-right:after,.intro-right:before{content:"";height:100%;position:relative}.intro-center,.intro-right:after,.intro-right:before{display:inline-block;vertical-align:middle;width:auto}.intro-center{height:auto}.intro-right img{display:block;height:71.5%;margin:0 auto;max-height:420px;width:auto}.hide-pc{display:none}.slider-full{display:block;height:100vh}.banner-box,.slider-full{position:relative;width:100%}.banner-box{height:100%}.item,.item-bg{height:100%;left:0;position:absolute;top:0;width:100%}.item-bg{background-position:50%;background-repeat:no-repeat;background-size:cover}.banner-text{height:100%;left:0;padding:0 0 0 8%;position:absolute;text-align:left;top:0;width:100%;z-index:1}.banner-text:after,.banner-text:before{content:"";display:inline-block;height:100%;vertical-align:middle}.banner-detail{display:inline-block;height:auto;max-width:620px;vertical-align:middle;width:auto}.banner-detail h2{color:#fff;font-family:VL_SofiaB;font-size:40px;line-height:1.2;margin:0 0 10px;opacity:0;text-transform:uppercase}.banner-detail p{color:#fff;font-family:VL_Sofia,sans-serif;font-size:18px;line-height:1.4;margin:0 0 30px;opacity:0}.show .banner-detail h2{animation:toLPer100;animation-duration:1s;animation-fill-mode:forwards}.show .banner-detail p{animation:toLPer100;animation-duration:1.5s;animation-fill-mode:forwards}.banner-detail.flipOut{animation:flipOut;animation-duration:.7s;animation-fill-mode:forwards}.section-video{position:static}.video-box{display:block;height:auto;max-width:900px;position:absolute;right:8%;top:50vh;transform:translate3d(0,-50%,0);width:auto;width:90%;z-index:-1}.video-inr{opacity:0;overflow:hidden}.video-inr,.video-inr:before{height:auto;position:relative;width:100%}.video-inr:before{content:"";display:block;padding-top:56.25%}.video-inr iframe{height:100%;left:0;position:absolute;top:0;width:100%}.video-box h2{color:#039fcf;font-family:VL_SofiaB;font-size:32px;line-height:1.2;margin-top:20px;opacity:0;position:relative;text-align:center;width:100%}.video-box.show{z-index:1}.video-box.show .video-inr{animation:toLPer100;animation-duration:1s;animation-fill-mode:forwards}.video-box.show h2{animation:toLPer100;animation-duration:1.5s;animation-fill-mode:forwards}.video-box .img-ele-1{height:287px;left:-160px;opacity:0;position:absolute;top:-120px;width:auto}.video-box.show .img-ele-1{animation:fadeInRotate;animation-duration:1.25s;animation-fill-mode:forwards}.video-box .img-ele-2{height:237px;opacity:0;position:absolute;right:-45px;top:-100px;width:auto}.video-box.show .img-ele-2{animation:scaleOff;animation-duration:1.5s;animation-fill-mode:forwards}.video-box .img-ele-3{height:169px;opacity:0;position:absolute;right:0;top:100%;width:auto}.video-box.show .img-ele-3{animation:toLPer100;animation-duration:1.5s;animation-fill-mode:forwards}.item-bg-c-t{background-position:center 68px}.swiper-pagination{display:none}@keyframes toLPer100{0%{opacity:0;transform:translate3d(1900px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes flipOut{0%{opacity:1;transform:perspective(400px) rotateX(0deg) scale(1)}to{opacity:0;transform:perspective(400px) rotateX(90deg) scale(.5)}}@keyframes toTS{0%{opacity:0;transform:translate3d(0,30%,0)}to{opacity:1;transform:none}}@keyframes scaleOff{0%{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}@keyframes fadeInRotate{0%{opacity:0;transform:rotate(-20deg) scale(.5)}to{opacity:1;transform:rotate(0deg) scale(1)}}.uv-cate{padding-top:104px}.uv-cate .col-left{margin-bottom:40px;max-width:480px;padding-top:10px;width:35%}.uv-cate .col-right{margin-bottom:-360px;max-width:500px;width:50%;z-index:1}.aqua-cate{font-size:0}.aqua-cate .col-left,.aqua-cate .col-right{vertical-align:middle}.aqua-cate .col-left{width:42%}.aqua-cate .col-right{background-color:#e5f5fb;padding:170px 13% 100px;width:58%}.uv-index{background-color:#fff;padding:100px 0 40px;z-index:1}.uv-index .col-left{padding:0 40px 0 0;width:500px}.uv-index p{margin-bottom:10px}.uv-index .col-right{width:540px}.sunscreen-cate{background-color:#fffbcc;padding:100px 0 160px}.sunscreen-cate .col-left{max-width:500px;width:50%}.sunscreen-cate .col-right{max-width:480px;padding-top:50px;width:35%}.sunscreen-cate h2{color:#86744e;margin-bottom:10px}.sunscreen-cate p{color:#87754f;margin-bottom:36px}.color-note{color:#826440;display:inline-block;font-family:VL_SofiaB;font-size:16px;height:auto;margin-bottom:28px;padding:17px 40px;text-transform:uppercase;width:auto}.color-note,.shortcut{background-color:#fbeb5c}.shortcut-box{display:block;margin:0 auto;max-width:1140px;top:-100px;width:90%}.shortcut-box,.shortcut-item{height:auto;position:relative}.shortcut-item{display:inline-block;margin:0 1%;vertical-align:top;width:47%}.shortcut-item:before{content:"";display:block;height:auto;padding:38% 0 0;position:relative;width:100%}.shortcut-bg{background-position:50%;background-repeat:no-repeat;background-size:cover;display:block}.shortcut-bg,.shortcut-txt{height:100%;left:0;position:absolute;top:0;width:100%}.shortcut-txt:after,.shortcut-txt:before{content:"";height:100%;width:auto}.shortcut-center,.shortcut-txt:after,.shortcut-txt:before{display:inline-block;position:relative;vertical-align:middle}.shortcut-center{height:auto;text-align:center;width:90%}.shortcut-txt h3{color:#1d9ecd;font-family:VL_SofiaB;font-size:32px;line-height:1;margin-bottom:20px}.shortcut-item:nth-child(2) .shortcut-txt h3{color:#fff}.bg-full{backface-visibility:hidden}.bg-full.ani .bg{animation:Banner-scale;animation-duration:20s;animation-iteration-count:infinite}.bg-full.ani .bg.sp{animation:none}.bg-full.ani .bg.hide,.bg-full.ani .bg.sp.hide{animation-play-state:paused}.isIE .bg-full.ani .bg{animation:none!important;animation-delay:0s;animation-duration:0s}.color-note,.explan-icon,.intro-center .box-but,.intro-pic,.iso-pic,.label-scroll,.shortcut-item,.sunscreen-cate .box-but{opacity:0}.ani .intro-txt h2:first-child{animation:moveRight;animation-duration:1.5s}.ani .intro-txt h2:nth-child(2){animation:moveRight;animation-duration:1.7s}.ani .intro-pic{animation:fadeInUp;animation-delay:.1s;animation-duration:1.5s;animation-fill-mode:forwards}.ani .intro-center .box-but{animation:fadeInUp;animation-delay:.3s;animation-duration:1.7s;animation-fill-mode:forwards}.ani .iso-pic{animation:scaleFrom;animation-delay:.7s;animation-duration:1.5s;animation-fill-mode:forwards}.sunscreen-cate .txt.ani .box-but,.sunscreen-cate .txt.ani .color-note,.sunscreen-cate .txt.ani .explan-icon{animation:fadeInUp;animation-delay:.1s;animation-duration:1.5s;animation-fill-mode:forwards}.shortcut-item:first-child.ani{animation:fadeInLeft;animation-duration:1.5s;animation-fill-mode:forwards}.shortcut-item:nth-child(2).ani{animation:fadeInRight;animation-duration:1.5s;animation-fill-mode:forwards}.label-scroll.ani{animation:fadeIn;animation-delay:.2s;animation-duration:1s;animation-fill-mode:forwards}@media screen and (min-width:1030px) and (max-height:700px){.intro-txt h2{font-size:28px;margin-top:15px}.iso-pic img{max-width:260px}}@media screen and (max-width:1700px){.uv-cate .col-right{margin-bottom:-270px}.aqua-cate .col-right{padding:10% 8% 8%}}@media screen and (max-width:1500px){.article-relate .label-scroll,.sunscreen-cate .label-scroll{left:-80px}.uv-cate .label-scroll{right:-80px}.uv-cate .col-right{margin-bottom:-230px}.video-box{max-width:760px}}@media screen and (max-width:1380px){.video-box{max-width:700px}.video-box h2{font-size:22px}.video-box .img-ele-1{height:150px;left:-85px;top:-45px}.video-box .img-ele-2{height:120px;right:-25px;top:-45px}.video-box .img-ele-3{height:100px}}@media screen and (max-width:1300px){.uv-cate .col-left{width:38%}}@media screen and (max-width:1200px){.intro-left{margin-left:3%}.intro-right{right:3%}.uv-cate .col-left{width:42%}.uv-cate .col-right{margin-bottom:-200px}.uv-index .col-left{max-width:380px;padding:0 20px 0 0;width:42%}.uv-index .col-right{width:46%}.video-box{max-width:550px}}@media screen and (max-width:1150px){.uv-cate{padding:60px 0 0}.sunscreen-cate{padding:60px 0 160px}}@media screen and (max-width:1044px){.intro-left{margin-left:2%}.intro-txt h2{font-size:28px;margin-top:25px}.intro-txt{padding:0 40px 0 0}.intro-right{right:0}.intro-center{margin-top:-50px}.intro-right img{max-height:380px}.bg-full.ani .bg{animation:none;animation-duration:0s;animation-iteration-count:unset}.bg{background-attachment:scroll}.uv-cate .col-left{margin-left:7%}.uv-cate .col-right{margin-bottom:-200px}.sunscreen-cate .col-right{width:42%}}@media screen and (max-width:900px){.uv-cate .col-right{margin-bottom:-120px}.sunscreen-cate .col-right{right:5%}.color-note{margin-bottom:18px}.shortcut-item:before{padding:44% 0 0}.shortcut-txt h3{font-size:26px}}@media screen and (max-width:840px){.uv-cate .label-scroll{bottom:140px}.article-relate .label-scroll{bottom:305px}.bg-full{height:calc(100vh - 80px)}.bg{display:none}.bg.sp{display:block}.intro-banner{height:auto;left:auto;position:static;top:auto}.intro-banner:after,.intro-banner:before{display:none}.intro-left{height:auto;margin:auto;max-width:inherit;position:static;width:auto}.intro-txt{left:7%;margin:0;padding:0;position:absolute;top:30px}.intro-txt h2{font-size:34px;margin-bottom:18px;margin-top:0}.intro-right{height:auto;right:0;top:0}.intro-right:after,.intro-right:before,.iso-pic{display:none}.iso-pic.sp{display:block}.iso-pic img{max-width:inherit}.intro-right img,.iso-pic img{height:auto;max-height:inherit}.intro-right img{max-width:300px;width:auto}.intro-center{margin:0}.hide-pc{display:block}.hide-sp,.swiper-button-next,.swiper-button-prev{display:none}.slider-full{height:calc(100vh - 80px)}.banner-text{padding:0;text-align:center}.banner-detail{width:90%}.banner-detail h2{font-size:34px}.banner-detail p{font-size:18px}.swiper-pagination{bottom:30px!important;display:block}.section-video{padding:20px 0 0;position:relative}.video-box{margin:0 auto;max-width:inherit;position:relative;right:auto;top:auto;transform:none;z-index:1}.video-box h2{font-size:24px}.video-box h2,.video-inr{opacity:1}.video-box.show{z-index:1}.video-box.show .video-inr,.video-box.show h2{animation:none;animation-duration:0s}.img-ele-1,.img-ele-2,.img-ele-3{display:none}.uv-cate{padding:0}.uv-cate .col-left{margin:0 auto;max-width:640px;padding:60px 0 20px;width:90%}.uv-cate .col-right{margin:0 auto -200px;max-width:600px;width:90%}.aqua-cate{background-color:#e5f5fb;padding-top:200px}.aqua-cate .col-left{margin:0;max-width:inherit;padding:0;text-align:left;width:100%}.aqua-cate img{display:inline-block;height:auto;max-width:100%;width:auto}.aqua-cate .col-right{margin:0 auto;max-width:640px;padding:60px 0 80px;width:90%}.uv-index{padding:0 0 45px}.uv-index .col-left{margin:0 auto;max-width:640px;padding:60px 0 20px;width:90%}.uv-index .col-right{display:block;margin:0 auto;max-width:580px;width:90%}.sunscreen-cate{padding:0 0 200px}.sunscreen-cate .col-left,.sunscreen-cate .col-right{margin:0 auto;max-width:500px;padding:0;width:90%}.sunscreen-cate .col-right{right:auto}.sunscreen-cate .txt{text-align:left}.sunscreen-cate .btn-detail{text-transform:uppercase}.shortcut-box{max-width:640px;top:-130px;width:90%}.shortcut-item{display:block;margin:0 0 40px;width:100%}.shortcut-item:last-child{margin:0}.shortcut-item:before{padding:39% 0 0}.shortcut-txt h3{font-size:40px;margin-bottom:20px}}@media screen and (max-width:520px){.label-scroll{display:none}.iso-pic.sp{margin:0 auto;max-width:150px}.intro-right img{max-width:160px}.iso-pic.sp img{margin:0 auto;max-width:160px}.intro-right{right:5%}.intro-txt{max-width:180px;top:20px}.intro-txt h2{font-size:20px;margin-bottom:10px}.banner-detail{width:90%}.banner-detail h2{font-size:22px}.banner-detail p{font-size:18px}.banner-detail{margin-top:-80px}.video-box h2{font-size:18px}.uv-cate .col-left{padding:40px 5% 20px}.uv-cate .col-right{padding:0 5%}.aqua-cate .col-right{padding:40px 5%}.uv-index .col-left{padding:40px 5% 20px}.sunscreen-cate{padding:0 0 100px}.sunscreen-cate .col-left{padding:0 5%}.sunscreen-cate .col-right{padding:0 10%}.sunscreen-cate li{font-size:16px}.shortcut-box{top:-50px;width:90%}.shortcut-item{margin-bottom:20px}.shortcut-txt h3{font-size:20px;margin-bottom:10px}}@media screen and (max-width:390px){.banner-detail h2{font-size:20px}.banner-detail p,.video-box h2{font-size:16px}}@media screen and (max-width:370px){.uv-cate .col-left,.uv-index .col-left{padding:40px 0 30px}.aqua-cate .col-right{padding:40px 0}.sunscreen-cate .col-right{padding:0 7%}}@media screen and (max-width:350px){.intro-txt h2{font-size:16px}.intro-right{top:0}.intro-right img,.iso-pic.sp img{max-width:130px}.intro-txt{max-width:140px}}@media screen and (max-width:840px) and (max-height:440px){.bg{display:block}.bg.sp{display:none}.intro-txt{top:20px}.intro-txt h2{font-size:18px;margin-bottom:10px}.iso-pic{bottom:10px;display:block;left:20px;position:absolute}.iso-pic img{margin-left:20px;max-width:150px}.iso-pic.sp{display:none}.intro-right{right:5%;top:10px}.intro-right img{max-width:200px}}@media screen and (max-width:840px) and (max-height:400px){.intro-txt h2{font-size:16px}.btn-decor{margin-top:-10px}.iso-pic.pc{bottom:0}.iso-pic img{max-width:140px}}@media screen and (max-width:840px) and (max-height:380px){.intro-right{top:0}}@media screen and (max-width:840px) and (max-height:370px){.iso-pic img{margin-bottom:-10px;margin-left:10px}}@media screen and (max-width:840px) and (max-height:350px){.iso-pic img{max-width:110px}.intro-right img{max-width:150px}}@media screen and (max-width:767px) and (min-height:450px){.iso-pic.sp{margin:0 auto;max-width:150px}}.item-bg-landscape{display:none}@media screen and (min-width:1381px) and (max-height:900px){.video-box{max-width:700px}.video-box h2{font-size:22px}.video-box .img-ele-1{height:150px;left:-85px;top:-45px}.video-box .img-ele-2{height:120px;right:-25px;top:-45px}.video-box .img-ele-3{height:100px}}@media screen and (min-width:1025px) and (max-height:600px){.video-box{max-width:500px}}@media only screen and (orientation:landscape) and (max-width:840px){.item-bg-landscape{display:block}.item-bg-portrait{display:none}}