@charset "utf-8";

section.main{}



/* VISUAL */

.main .visual{}

.main .visual .slide_wrap{overflow: hidden; height: 30.000em;}

.main .visual .slide_wrap > ul{position: relative; height: 100%;}

.main .visual .slide_wrap > ul .slick-list{height: 100%;}

.main .visual .slide_wrap > ul .slick-list .slick-track{height: 100%;}

.main .visual .slide_wrap > ul li{height: 100%; position: relative;}

.main .visual .slide_wrap > ul li .img{height: 100%; position: relative; overflow: hidden; background-color: #ececec;}

.main .visual .slide_wrap > ul li .img img{max-width: none; position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%);}

.main .visual .slide_wrap > ul li .txt{position: absolute; top: 55%; left: 50%; max-width: 1280px; width: 100%; transform: translateX(-50%) translateY(-50%);}

.main .visual .slide_wrap > ul li .txt > div{max-width: 27.778em;}

.main .visual .slide_wrap > ul li .txt .tit{font-size: 2.778em; font-weight: 200; color: #333; line-height: 1em; word-break: keep-all;}

.main .visual .slide_wrap > ul li .txt .desc{font-size: 1em; font-weight: 400; color: #444; line-height: 1.444em; word-break: keep-all; margin-top:1.667em; margin-bottom: 2.778em;}

.main .visual .slide_wrap > ul li .txt a{display: block; font-size: 1em; font-weight: 300; color: #fff; padding:0.889em 0 0.944em; width: 10.556em; background-color: #87b940; text-align: center; border-radius: 1.667em;}

.main .visual .slide_wrap .slick-dots{max-width: 1280px; margin: 0 auto; text-align: left; position: absolute;top: 3.889em; left: 50%; transform: translateX(-50%); width: 100%;}

.main .visual .slide_wrap .slick-dots li{height: auto; width: auto; margin: 0 1em 0 0; display: inline-block;}

.main .visual .slide_wrap .slick-dots li.slick-active{}

.main .visual .slide_wrap .slick-dots li button{width: 0.556em; height: 0.556em; padding:0; background-color: #58585a; font-size: 1em; border-radius: 100%; display: block; line-height: 0; color: transparent;}

.main .visual .slide_wrap .slick-dots li.slick-active button{background-color: #87b940;}

.main .visual .slide_wrap .slick-dots li button:before{display: none;}



/* STATISTICS */

.main .stats{height: 16.667em; position: relative; background-color: #fff;}

.main .stats .count_wrap{}

.main .stats .count_wrap ul{}

.main .stats .count_wrap ul:after{content: ""; display: block; clear: both;}

.main .stats .count_wrap li{width: 33.3333%; float: left; text-align: center;}

/* .main .stats .count_wrap li{width: 25%; float: left; text-align: center;} */

.main .stats .count_wrap li > div{}

.main .stats .count_wrap li .img{}

.main .stats .count_wrap li .img img{}

.main .stats .count_wrap li:nth-child(1) .img img{width: 1.111em;}

.main .stats .count_wrap li:nth-child(2) .img img{width: 0.778em;}

.main .stats .count_wrap li:nth-child(3) .img img{width: 1.778em;}

.main .stats .count_wrap li:nth-child(4) .img img{width: 1.778em;}

.main .stats .count_wrap li .count{margin-top: 0.333em; margin-bottom: 0.722em;}

.main .stats .count_wrap li .count .num{color: #87b940; font-size: 3.222em; font-weight: 500;}

.main .stats .count_wrap li .count .unit{color: #b2b2b2; font-size: 0.778em; font-weight: 300;}

.main .stats .count_wrap li .txt{color: #666; font-size: 0.778em; font-weight: 300;}

.main .motion_y{position: absolute; bottom:0; left: 0; width: 100%; opacity: 0; transition: all 1s; transform: translateY(0);}

.main .motion_y.on{bottom: 50%; transform: translateY(50%); opacity: 1;}



/* PRODUCTS */

.main .motion_multi{height: 100%; position: relative;}

.main .motion_multi:before{content: ""; position: absolute; display: block; width: 0; height: 100%; transition: all 1s;top: 0; left: 0;}

.main .motion_multi.on:before{width: 100%;}

.main .motion_multi .inner{height: 100%; position: relative;}

.main .motion_multi .img{position: absolute; bottom: -20%; right: 0; transition: all 1s 1s; opacity: 0;}

.main .motion_multi.on .img{bottom:0; opacity: 1;}

.main .products .motion_multi .img{bottom: -30%;}

.main .products .motion_multi.on .img{bottom: 25px;}

.main .motion_multi .img img{}

.main .motion_multi .txt{position: absolute; top: 40%; left: 0; width: 100%; font-size: 2.667em; font-weight: 200; color: #222; line-height: 1.042em; transition: all 1s .3s; opacity: 0;}

.main .motion_multi.on .txt{top:20%; opacity: 1;}

.main .motion_multi .btn{position: absolute; bottom: 0; left: 0; width: 100%; transition: all 1s .5s; opacity: 0;}

.main .motion_multi.on .btn{bottom:20%; opacity: 1;}

.main .motion_multi .btn a{font-size: 1em; font-weight: 400; color: #565656; display: inline-block; padding:0.833em 1.444em 0.889em; box-sizing: border-box; border:1px solid #676767; border-radius:1.667em;}



.main .products{height: 33.333em; position: relative; overflow: hidden;}

.main .products .motion_multi:before{background-color: #f8f8f8;}

/* .main .products .motion_multi .img{right: -6.667em;} */

.main .products .motion_multi .txt{max-width: 8.333em;}



/* STORY and TECHNOLOGY */

.main .storytech{height: 33.333em; overflow: hidden;}

.main .storytech:after{content: ""; display: block; clear: both;}

.main .storytech .motion_multi .img{right: auto; left: 50%; bottom: auto; top: 40%;}

.main .storytech .motion_multi.on .img{right: auto; bottom: auto; top: 20%;}

.main .storytech .story{float: left; width: 50%; height: 100%;}

.main .storytech .story.motion_multi:before{background-color: #ececec;}

.main .storytech .story.motion_multi > .inner{float: right; width: 100%; max-width: 640px;}

.main .storytech .tech{float: right; width: 50%; height: 100%;}

.main .storytech .tech.motion_multi:before{background-color: #dedede;}

.main .storytech .tech.motion_multi > .inner{float: left; width: 100%; max-width: 640px;}

/* .main .storytech .tech.motion_multi .img{right: -11.667em; bottom: -40%;} */

/* .main .storytech .tech.motion_multi.on .img{bottom:-6.278em;} */

.main .storytech .motion_multi .txt{font-size: 2.333em; line-height: 1.190em; max-width: 7.619em;}

.main .storytech .tech.motion_multi .txt{padding-left: 10%; box-sizing: border-box;}

.main .storytech .tech.motion_multi .btn{padding-left: 10%; box-sizing: border-box;}



.main .storytech .tech.motion_multi:before{transition: all 1s .3s;}

.main .storytech .tech.motion_multi .txt{transition: all 1s .6s;}

.main .storytech .tech.motion_multi .btn{transition: all 1s .8s;}

.main .storytech .tech.motion_multi .img{transition: all 1s 1.3s;}



/* VIDEO */

.main .video{height: 24.444em; position: relative; overflow: hidden;}

.main .video .iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: all 2s;}

.main .video .iframe.on{opacity: 1;}

.main .video .iframe iframe{width: 100%; height: 100%;}

.main .video .iframe video{width: 100%; height: 100%; object-fit: cover;}

.main .video .video_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 2s; background-color: rgba(75, 75, 75, 0.35);}

.main .video .video_bg.on{opacity: 1;}

.main .video .motion_y{}

.main .video .motion_y .tit{font-size: 2.333em; font-weight: 200; color: #fff; text-align: center; line-height: 1.190em; max-width: 11.905em; margin:0 auto; word-break: keep-all;}



/* ABOUT DORCO */

.main .about{height: 44.444em; overflow: hidden; position: relative;}

.main .about .motion_y.txt{text-align: center;bottom: auto; top: 50%; transform: translateY(-50%); transition:all 1s .3s}

.main .about .motion_y.txt.on{top: 12%; transform: none;}

.main .about .motion_y.txt .tit{font-size: 2.333em; font-weight: 300; color: #222; line-height: 1.190em;}

.main .about .motion_y.txt .desc{font-size: 1em; font-weight: 400; color: #444; line-height: 1.444em; margin:1.667em 0; word-break: keep-all;}

.main .about .motion_y.txt > a{font-size: 1em; font-weight: 300; color: #87b940;}

.main .about .motion_y.txt > a:hover{text-decoration: underline;}

.main .about .motion_y.img{bottom:-20%; text-align: center; transition: all 1s .5s}

.main .about .motion_y.img.on{bottom:0; transform: none;}

.main .about .motion_y.img img{max-width: 100%;}