/* layout */
#contents {}
#section1 {height: 100vh; background:url(../img/section1-bg.jpg) no-repeat; background-size:cover; background-position: center center; position: relative;}
#section1:before {content: ''; width: 100%; height: 100%; position: absolute;left: 0;top: 0;background: rgba(0,0,0,0.3);}
#section2 { background-color: #000;}
#section3 {background:url(../img/sec3-bg.jpg) no-repeat; background-size:cover; background-position: center center; }
#section4 {}
#section5 {padding-top: 150px;background-color: #f3f3f3;}
#section6 {background: #be0000;}

/* container */
.container {width: 1200px; margin: 0 auto;/* background:rgba(0,0,0,0.5);*/}

/* progress bar */
.progress {background-color: #000; color: #be0000; height: 100%; width: 100%; position: fixed; z-index:99999;}
.progress-bar {border-top:2px solid #be0000; position: absolute; top: 50%; width: 0%;}
.progress-bar.progress-complete {border-top-color: #be0000;}
.progress-text {font-size: 14px; position: absolute; top: 50%; text-align: center; width: 100%; margin-top:10px;}

/* nav */
#nav {position: fixed;left: 0;top: 0;width: 100%;height: 70px;background-color:rgba(0,0,0,0); z-index: 1000; transition:all 1s ease;}
#nav.on {background-color:rgba(255,0,0,0.6);}
#nav.on h1 a {color: #fff;}
#nav h1 {font-size: 35px; font-family: 'Oswald', sans-serif; font-weight: 700; }
#nav h1 a {color: #be0000; padding: 3px 10px 10px 20px; display: block; letter-spacing: -2px;}
#nav .navbar {position: absolute; top: 10px; right: 15px; }
#nav .navbar a {display: block; width: 64px;height: 48px; }
#nav .navbar a span { position: absolute; display: block; left: 16px; height: 3px; width: 32px; background-color: #fff;}
#nav .navbar a .bar1 {top: 13px;}
#nav .navbar a .bar2 {top: 21px;}
#nav .navbar a .bar3 {top: 21px;}
#nav .navbar a .bar4 {top: 29px;}

/* dot */
#dot {position: fixed;right: 15px; top: 50%; transform: translateY(-50%);z-index: 1000;}

/* section-tit */
.section-tit {text-align: center;position: relative;}
.section-tit span {font-size: 75px;line-height: 75px;position: relative;z-index: 10; font-family: 'Oswald', sans-serif; letter-spacing: 3px; opacity: 0.6;}
.section-tit:after {content:attr(data-num); position: absolute;left: 0;right: 0;top: -130px;color: #fff;bottom: 0;font-size: 200px;font-weight: 700;font-family: 'Roboto', sans-serif; z-index: 1;}

/* sec1 */
.sec1 {position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%, 0); width: 96%; padding: 0 2%; box-sizing: border-box;}
.sec1 {max-width: 1600px; margin: 0 auto;}
.sec1 .sec1-h2 {color:#fff; font-size: 60px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 60px; padding-bottom: 30px; /*display: none;*/}
.sec1 .sec1-desc {color: #fff; font-size: 14px; font-family: 'Roboto', sans-serif; line-height: 20px;max-width: 500px; position: relative; font-weight: 100;/* display: none;*/}
.sec1 .sec1-desc:before {content:''; width: 350px;height: 2px;background-color:#be0000; position: absolute; top:-12px;left: 0;  }

.sec1-box .sec1-h2 {opacity: 0; transform: translateY(20px);transition: all 1.5s ease-in-out 0.5s;}
.sec1-box .sec1-desc {opacity: 0;  transform: translateY(20px); transition: all 1.5s ease-in-out 1s;}

.sec1-box.show .sec1-h2 {opacity: 1;  transform: translateY(0px);}
.sec1-box.show .sec1-desc {opacity: 1;  transform: translateY(0px);}

/* sec2 */
.sec2 {overflow: hidden;}
.sec2 .left {float: left; width: 33.333%; }
.sec2 .right {float: left; width: 66.666%; background-color: #444;}

/* sec3 */
.sec3 {position: relative; text-transform: uppercase;}
.sec3 h2 {font-size: 130px;color: #888;font-family: 'Roboto', sans-serif;font-weight: 900;letter-spacing: -10px;position: relative;display: inline-block;}
.sec3 h2::after {content: '';width: 3px;height: 90px;background: #e42624;position: absolute;left: 170px;top: 65px}
.sec3 h3 {position: absolute;left: 200px;top: 132px;font-size: 16px;font-family: 'Roboto', sans-serif;color: #444;font-weight: bold;}
.sec3 p {position: absolute;left: 200px;top: 115px;font-size: 13px;color: #666;}
.sec3 .skill {text-align: center;}
.sec3 .skill ul {margin: 0 5%;}
.sec3 .skill ul li {float: left;width: 16.6666%;position: relative;}
.sec3 .skill ul li::after {content: '';width: 2px;height: 60px;background: #6c6c6c;position: absolute;top: 45px;left: 0;}
.sec3 .skill ul li:nth-child(1)::after {display: none;}

.sec3 .skill ul li a {font-size: 85px;font-family: 'Oswald', sans-serif;color: #555;}
.sec3 .skill ul li span {display: block;font-size: 19px;font-family: 'Oswald', sans-serif;color: #6c6c6c;margin-top: -15px;}

.sec3 .skill2 {padding: 100px 0;text-align: center;}
.sec3 .skill2 ul {padding: 10px 180px;}
.sec3 .skill2 ul li {float: left;width: 50%;box-sizing: border-box;position: relative;}

.sec3 .skill2 ul li .count_box {text-align: center;}
.sec3 .skill2 ul li:first-child {padding-right: 0;position: relative;}
.sec3 .skill2 ul li:last-child {padding-left: 0;}

.sec3 .skill2 .pie.left canvas {position: absolute;top: 0;right: 55px;}
.sec3 .skill2 .pie.right canvas {position: absolute;top: 0;left: 55px;}
.sec3 .skill2 ul li:first-child::after {content: '&';font-size: 80px;position: absolute;color: #666;top: 80px;right: -25px;}
.sec3 .skill2 ul li a{font-size: 150px;font-family: 'Comfortaa', cursive;color: #000;letter-spacing: -10px;}
.sec3 .skill2 ul li span {display: block;font-size: 20px;color: #333;font-family: 'Rajdhani', sans-serif;font-weight: 500;margin-top: -50px;letter-spacing: 10px;}




/* sec4 */
.sec4 {text-align: center; padding: 100px 0;}
.sec4 h3 {font-size: 20px; text-transform: uppercase; font-family: 'Oswald', sans-serif; position: relative; margin-bottom: 12%;}
.sec4 h3:before {content: "03"; position: absolute; left: 50%; top: 50%; font-size: 120px; font-family: 'Roboto', sans-serif;  font-weight: 900; color: #000; letter-spacing: -5px; opacity: 0.09; transform: translate(-50%,-50%);}

/* sec5 */
.sec5 {}
.sec5 .codepen {margin-top: 100px;}
.sec5 .codepen .column {background: #fff;box-shadow: 0 20px 60px 0 rgba(0,0,0,0.15);position: relative;z-index: 10;}
.sec5 .codepen .column::after {content:''; width: 0%;position: absolute;left: 0;top: 0;height: 100%;background: #fce0db;transition: all 0.4s ease-in-out;}
.sec5 .codepen .column:hover::after {width: 100%;}
.sec5 .codepen .column a .code-circle {width: 230px;height: 230px;margin: 45px auto;box-shadow: 0 15px 40px 1px rgba(0,0,0,.15); border-radius: 50%;position: relative;z-index: 100;}
.sec5 .codepen .column a .code-title {padding: 5% 15% 10% 15%;position: relative;z-index: 100;font-family: 'Oswald', sans-serif;letter-spacing: 2px;}
.sec5 .codepen .column a .code-title h3 {}
.sec5 .codepen .column a .code-title p {}
.sec5 .codepen .column a .code-number {position: absolute;right: 25px;bottom: 80px;z-index: 100;}
.sec5 .codepen .column a .code-number::after {content: ''; width: 2px;height: 36px;background: #000; position: absolute;bottom: -44px;left: 4px;transition: all 0.3s ease;}

.sec5 .codepen .column {opacity: 0; transition: all 0.5s ease-in;}
.sec5 .codepen .column.show {opacity: 1;}


/* sec6 */
.sec6 {background: #be0000;}
.sec6 .sec6-txt1 {font-size: 20px;color: #fff;text-align: center;padding-top: 200px;font-family: 'Roboto', sans-serif; }
.sec6 .sec6-txt2 {font-size: 70px;color: #fff; text-transform: uppercase; text-align: center;padding-bottom: 200px;font-family: 'Oswald', sans-serif; }
.sec6>p {opacity: 0; transition:all 0.3s ease-in;}
.sec6>p.show {opacity: 1;}

/* footer */
#footer {background: #000;}
.footer p {color: #fff;font-size: 16px;text-align: center;padding: 50px 0;font-family: 'Oswald', sans-serif;font-weight: 100;}

/* column */
.column-wrap {overflow: hidden;}
.column {float: left; box-sizing: border-box;}
.column img {width:100%; display: block;}
.column.one {width: 100%;}
.column.two {width: 50%;}
.column.three {width: 33.3333%}
.column.four {width: 25%}
.column.five {width: 20%;}
.column.six {width: 16.66666%}
.column.eight {width: 12.5%}

/* slbox */
.slbox {position: relative; padding-left: 15px;}
.slbox .sltit {font-size: 120px; font-family: 'Roboto', sans-serif;  font-weight: 900; color: #fff; letter-spacing: -10px; opacity: 0.09; position: absolute; left: 15px; top: 15%;}
.slbox .slsub {color: #fff; font-family: 'Oswald', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 1px;padding: 50% 0; }
.slbox .sldesc {color: #fff; font-family: 'Roboto', sans-serif; font-weight: 100; margin-right: 22%; padding-bottom: 15%;}
.slbox .slbtn { font-family: 'Oswald', sans-serif;  border-bottom:1px solid #4e4e4e; display: block; margin-right: 20%;}
.slbox .slbtn a {color: #fff; text-transform: uppercase;}


/* srbox */
.srbox {overflow: hidden;}
.srbox img {width: 100%; display: block;}
.srbox-img {float: left;width: 50%;}
.srbox-txt {position: relative;float: left; width: 50%;}
.srbox-txt .srbox-wrap {position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);text-align: center; width: 90%;}
.srbox-txt .srbox-wrap .srtit{color: #fff; font-size: 22px; font-family: 'Oswald', sans-serif; font-weight: 700; }
.srbox-txt .srbox-wrap .srdesc {color: #afafaf; font-family: 'Roboto', sans-serif; font-weight: 100; padding-bottom: 15%; font-size: 14px; }
.srbox-txt .srbox-wrap .srbtn {color: #fff; border:1px solid #afafaf; padding: 10px 40px; display: inline-block;}





/* vox-wrap */
.vox-wrap {}
.vox-list {width: 80%; margin-bottom: 12%; background-size: cover; position: relative;}

.vox-list.left {margin-left: 0%;}
.vox-list.right {margin-left: 20%;}

.vox-list.img1 {background: url(../img/sec4-1.jpg) no-repeat; opacity: 0; transform: translateX(-60px);transition: all 0.5s ease-in-out; }
.vox-list.img2 {background: url(../img/sec4-2.jpg) no-repeat; opacity: 0; transform: translateX(60px); transition: all 0.5s ease-in-out;}
.vox-list.img3 {background: url(../img/sec4-3.jpg) no-repeat; opacity: 0; transform: translateX(-60px); transition: all 0.5s ease-in-out;}

.vox-list.img1.show {opacity: 1; transform: translateX(0px);}
.vox-list.img2.show {opacity: 1; transform: translateX(0px);}
.vox-list.img3.show {opacity: 1; transform: translateX(0px);}

.vox-list .vox-list-mask {width: 100%;height: 100%; position: absolute; left: 0; top: 0; z-index: 100; background: rgba(0,0,0,0.55);}

.vox-list .vox-list-num {position: absolute; top: 30px; font-family: 'Oswald', sans-serif; font-weight: 900;font-size: 130px; color: #fff; line-height: 150px; letter-spacing: -5px; z-index: 200; opacity:0; transform: translateY(-20px); transition: all 0.5s ease-in-out 0.2s;}
.vox-list.left .vox-list-num {right: 30px; }
.vox-list.right .vox-list-num {left: 30px;}

.vox-list .vox-list-text {padding:25% 3% 0 3%;position: relative;z-index: 200; }
.vox-list.left .vox-list-text {text-align: left;  }
.vox-list.right .vox-list-text {text-align: right;}

.vox-list .vox-list-text .vl-tit {font-family: 'Oswald', sans-serif; font-size: 65px; font-weight: 700; color: #fff;line-height: 80px; text-transform: uppercase; opacity:0; transform: translateY(-20px); transition: all 0.5s ease-in-out 0.5s;}
.vox-list .vox-list-text .vl-sub {font-size: 14px; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 200; padding-bottom: 1%; font-style: italic;opacity:0; transform: translateY(-20px); transition: all 0.5s ease-in-out 1s; }
.vox-list .vox-list-text .vl-btn {}
.vox-list .vox-list-text .vl-btn a {display: inline-block; padding: 12px 25px; color: #fff; background:linear-gradient(90deg, #be0000 0%, #660303 100%); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6%; opacity:0; transform: translateY(-20px); transition: all 0.5s ease-in-out 1.5s;}

.vox-list.img1.show .vox-list-num {opacity: 1; transform: translateY(0px);}
.vox-list.img1.show .vox-list-text .vl-tit {opacity: 1; transform: translateY(0px);}
.vox-list.img1.show .vox-list-text .vl-sub {opacity: 1; transform: translateY(0px);}
.vox-list.img1.show .vox-list-text .vl-btn a {opacity: 1; transform: translateY(0px);}
.vox-list.img2.show .vox-list-num {opacity: 1; transform: translateY(0px);}
.vox-list.img2.show .vox-list-text .vl-tit {opacity: 1; transform: translateY(0px);}
.vox-list.img2.show .vox-list-text .vl-sub {opacity: 1; transform: translateY(0px);}
.vox-list.img2.show .vox-list-text .vl-btn a {opacity: 1; transform: translateY(0px);}
.vox-list.img3.show .vox-list-num {opacity: 1; transform: translateY(0px);}
.vox-list.img3.show .vox-list-text .vl-tit {opacity: 1; transform: translateY(0px);}
.vox-list.img3.show .vox-list-text .vl-sub {opacity: 1; transform: translateY(0px);}
.vox-list.img3.show .vox-list-text .vl-btn a {opacity: 1; transform: translateY(0px);}

/* mediaquery */
@media (max-width:1210px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    .slbox {padding-left: 15px;}
}

@media (max-width:1224px){
    .sec5 .codepen .column {width: 50%;}
}

@media (max-width: 1210px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    .slbox {padding-left: 15px;}
}

@media (max-width: 960px){
    .vox-list.right {margin-left: 10%;}
    .vox-list.left {margin-left: 10%; }
    .vox-list .vox-list-num { font-size: 130px; line-height: 150px;}
    .vox-list:hover .vox-list-num { top: 12px; }
    .vox-list .vox-list-txt .pl-tit { font-size: 45px; line-height: 60px;}
    .vox-list .vox-list-txt .pl-sub { font-size: 12px; }
}

@media (max-width:800px){
    .sec2 .left {float:none; width: 100%;}
    .sec2 .right {float:none; width: 100%; margin-top: 5%;}
    .slbox {text-align: center;}
    .slbox .sltit { left: 50%;  transform: translateX(-50%); top: -5px;}
    .slbox .slsub {padding: 5% 0; text-align: center; }
    .slbox .sldesc {text-align: center; margin-right: 15px; padding: 0% 5% 5% 5%;}
    .slbox .slbtn { display: inline; margin-right: 15px; }

}

@media (max-width: 768px){
    .vox-list .vox-list-num { display: none; }
    .vox-list.right {text-align: center;}
    .vox-list.left {text-align: center;}
    .vox-list .vox-list-txt { padding-top: 15%;}
    .vox-list .vox-list-txt .pl-btn a { margin-bottom: 15%;}
}


@media (max-width:600px){
    .sec1 .sec1-h2 {font-size: 55px; line-height: 70px; text-align: center;}
    .sec1 .sec1-desc {text-align: center; font-size: 14px; line-height: 20px;}
    .sec1 .sec1-desc:before {width: 30%;left: 50%; transform: translate(-50%);}

    /* sec2 */
    .srbox {position: relative;}
    .srbox .srbox-txt {float: none; width: 100%; position: absolute; left: 0; top: 0; z-index: 500;}
    .srbox .srbox-img {float: none; width: 100%;}

    .srbox-txt .srbox-wrap .srtit {font-size: 18px;}
    .srbox-txt .srbox-wrap .srdesc {font-size: 12px; padding-bottom: 8%;}
    .srbox-txt .srbox-wrap .srbtn {padding: 7px 30px; padding-bottom: 1%;}

    /* sec4 */
    .vox-list { width: 90%; margin-bottom: 10%; margin-left: 5%;}
    .vox-list.left {margin-left: 5%;}
    .vox-list.right {margin-left: 5%;}

    /* sec5 */
    .sec5 .codepen .column {width: 100%;}

    .sec1 .sec1-h3 {font-size: 16px; text-align: center;}
    .sec1 .sec1-h2 {font-size: 55px; line-height: 70px; text-align: center; }
    .sec1 .sec1-h2:before {left:50%; transform: translate3d(-50%,-50%,0); bottom: 30px; }
    .sec1 .sec1-desc {font-size: 14px;  line-height: 20px; text-align: center;  }




}

@media (max-width:530px){
    .sec1 .sec1-h2 {font-size: 40px; line-height: 50px;}
    .sec1 .sec1-desc {font-size: 12px;  line-height: 18px;}
    .sec1 .sec1-desc:before {height: 3px;}
    .sec1 .sec1-h2:before {height: 3px;}
}