/* layout */
#contents {width: 100%;position: relative;overflow: hidden;}
.container {width: 1200px;margin: 0 auto;position: relative;z-index: 9999;}

#section1 {width: 100%;height: 170vh;position: relative;background:url(../img/sec1-bg.jpg) no-repeat center center;}
#section2 {width: 100%;height: 800px;background: #fff;position: relative;}
#section3 {width: 100%;height: 1400px;background: #351813;position: relative;background: url(../img/sec3-bg.jpg) no-repeat center center; background-attachment: fixed;}
#section4 {width: 100%;}
#section5 {width: 100%;height: 1900px;position: relative;}
#section6 {width: 100%;height: 900px;background: #000;}
#footer {width: 100%;height: 150px;}



/* dot */
.dot-wrap {position: fixed;top: 50%;left: 5%;transform: translateY(-50%);z-index: 10000;}
.dot-wrap li a {position: relative;border:1px solid #000; transform: rotate(-45deg);margin-top: 10px;position: relative;padding: 5px;display: inline-block;}
.dot-wrap li.on a {background: #ccc;border:1px solid #000; transform: rotate(-45deg);margin-top: 10px;position: relative;padding: 5px;display: inline-block}

/* nav */
.nav {width: 445px;height: 208px;position: absolute;top: 0;left: 0;z-index: 100;}
.nav:before {content:"";width: 100%;height: 100%;background: #fff;position: absolute;top: 0;left: -223px;transform: skew(-65deg);z-index: 101;}
.nav .nav-wrap {position: absolute;z-index: 105;top: 30px;left: 80px;}
.nav .nav-wrap a {padding:10px 20px;}
.nav .nav-wrap a .nav-txt {font-size: 10px;text-transform: uppercase;font-family: 'Anton', sans-serif;letter-spacing: 2px;}
.nav .nav-wrap a .nav-bar {width: 26px;height: 3px;background: #000;position: relative;transition: all .3s ease-in;}
.nav-wrap a .nav-bar:after {content:"";width: 32px;height: 3px;background: #000;position: absolute;top: 10px;left: 0;}
.nav-wrap a:hover .nav-bar {width: 32px;}

/* style-wrap */
.style-wrap {position: absolute;top: 80px;right: 77px;z-index: 500;}
.style-wrap .style {color: #666;font-family: 'Anton', sans-serif;float: right;text-transform: uppercase;}
.style-wrap .style .style-w {width: 30px;height: 30px;border:1px solid #666;display:inline-block;text-align: center;line-height: 32px;margin-top: 4px;}
.style-wrap .style .style-w.style-c {border-color: #fff;color: #fff;}

/* section1 */
.sec1 {position: relative;height: 100vh;}
.sec1 .main-logo {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); text-align: center;}
.sec1 .main-logo svg {fill:#fff;}
.sec1 .main-logo p {stroke-dasharray:200;stroke-dashoffset:200; animation:animation1 4s 1 linear; text-align: center;animation-fill-mode: forwards;}
@keyframes animation1 {
                  0% {stroke : #FFF; stroke-dashoffset:200;}
                  100% {stroke : #FFF; stroke-dashoffset: 0;}
                }

.sec1 .main-mouse {position: absolute; left:50%; bottom:30%; transform: translate(-50%,-30%); animation: mouse-ani 2s infinite linear; }
.sec1 .main-mouse img {width: 20px;}

@keyframes mouse-ani {
  0% {bottom:30%; }
  50% {bottom:32%;}
  100% {bottom:30%;}
}

/* section1:after */
#section1:after {content: "";width: 100%;height: 900px;background: #fff;position: absolute;bottom: -450px;left: 0;transform: skew(0,-25deg);z-index: 1000;}

/* section2 */
.sec2 {position: relative;}

.sec2-txt1 {font-size: 400px;font-family: 'Rajdhani', sans-serif; position: absolute;top: -450px;left: -150px;text-transform: uppercase;font-weight: 700;opacity: 0.05;}

.sec2 .sec2-txt-wrap {}
.sec2 .s2txt1 {font-size: 82px; text-transform: uppercase;font-family: 'Anton', sans-serif;letter-spacing: 3px;line-height: 80px;text-align: right; position: absolute;top: -300px;right: 30px;opacity: 0; transform: translateX(70%);transition: all 1s ease-in-out;}
.sec2 .s2txt2 {font-size: 62px;text-transform: uppercase;font-family: 'Gruppo', sans-serif;line-height: 54px;position: absolute;top: 0px;left: 0;opacity: 0; transform: translateX(-160px);transition: all 1s ease-in-out;}

.sec2 .s2txt1.show {opacity: 1;transform: translateX(0px);}
.sec2 .s2txt1.txt1-1.show {opacity: 1;transform: translateX(0px);}
.sec2 .s2txt2.show {opacity: 1;transform: translateX(0px);}

.sec2-box-wrap {width: 100%;}
.sec2-box-wrap .s2box{width: 370px; height: 270px; background:#fff; box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.1); float: left; margin-bottom: 20px; margin-right: 30px; transition: all .3s ease;cursor:pointer;opacity: 0;}
.sec2-box-wrap .s2box:first-child{margin-left: 800px;}
.sec2-box-wrap .s2box:nth-child(5) {margin-left: 400px;}

.sec2-box-wrap .s2box:first-child {transform:scale(0.5,0.5);transition: all .5s ease 0s;}
.sec2-box-wrap .s2box:nth-child(2) {transform:scale(0.5,0.5);transition: all .5s ease .3s;}
.sec2-box-wrap .s2box:nth-child(3) {transform:scale(0.5,0.5);transition: all .5s ease .6s;}
.sec2-box-wrap .s2box:nth-child(4) {transform:scale(0.5,0.5);transition: all .5s ease .9s;}
.sec2-box-wrap .s2box:nth-child(5) {transform:scale(0.5,0.5);transition: all .5s ease 1.2s;}
.sec2-box-wrap .s2box:nth-child(6) {transform:scale(0.5,0.5);transition: all .5s ease 1.5s;}


.sec2-box-wrap .s2box.show {opacity: 1;transform:scale(1,1);}

.s2box .box-front {display: block;transition: all 1s ease;}
.s2box .box-front .ftxt1 {font-size: 18px;font-weight: 600;font-family: 'Rajdhani', sans-serif;text-transform: uppercase;padding-left: 70px;padding-top: 45px;}
.s2box .box-front .ftxt2 {font-size: 18px;font-family: 'Gruppo', sans-serif;font-weight: 300;color: #666; letter-spacing: -1px; line-height: 25px;padding-left: 70px;padding-top: 20px;padding-right: 40px;}

.s2box .box-back {display: none;width: 100%;height: 100%;background:#000;color: #fff;font-family: 'Rajdhani', sans-serif;text-transform: uppercase; transition: all 1s ease-in-out;}
.s2box .box-back .btxt1 {font-size: 28px;padding-top: 50px;padding-left: 30px;}
.s2box .box-back .btxt2 {padding-left: 250px;padding-top: 60px;}
.s2box .box-back .btxt2 a {font-size: 14px;color: #fff;border:1px solid #fff;padding: 12px 32px;font-family: 'Rajdhani', sans-serif;font-weight: 400;text-transform: uppercase;}

.s2box:hover .box-front {display: none;}
.s2box:hover .box-back {display: block;}

/* #section2:after*/
#section2:after {content: "";position: absolute; bottom: -450px;left: 0;width: 100%;height: 850px;transform: skew(0,20deg); background: #fff;z-index: 600;}

/* section3:before */
#section3:before {content:"";position: absolute;bottom: -550px;left: 0;width: 100%;height: 1000px;transform: skew(0,-25deg); background: #f6f8f9;z-index: 500;}
#section3:after {content: "portfolio";color: #000;position: absolute;bottom: -400px;left: 50%;transform: translateX(-50%);font-size: 400px;z-index: 600;text-transform: uppercase;font-family: 'Rajdhani', sans-serif;font-weight: 700;opacity: 0.08;}

/* section3 */
.s3txt1 {font-size: 400px;font-family: 'Rajdhani', sans-serif; text-align: right;text-transform: uppercase;font-weight: bold;opacity: 0.05;}
.s3txt2 {position: absolute;top: 250px;right: 50px;font-size: 100px;text-align: right;font-family: 'Anton', sans-serif;line-height: 100px;transform: translateX(300px);transition:all .5s ease;opacity: 0;}
.s3txt3 {position: absolute;top: 330px;left: 50%;transform: translateX(-50%);font-size: 72px;font-family: 'Anton', sans-serif;text-transform: uppercase;display: none;transition:all .3s ease;}

.s3txt2.show {opacity: 1;transform: translateX(0px);}

.sec3 {position: relative;}
.sec3 .s3box-wrap{width: 600px;}
.s3box-wrap .s3box {width: 270px;height: 270px;background:rgba(0,0,0,0.8);float: left;margin-left: 5px;margin-top: 5px; transition:all .3s ease 0s;}
.s3box-wrap .s3box:nth-child(1) {opacity: 0;transform: translateY(500px);transition:all .3s ease 0s;}
.s3box-wrap .s3box:nth-child(2) {clear: both;opacity: 0;transform: translateY(500px);transition:all .3s ease 0.2s;}
.s3box-wrap .s3box:nth-child(3) {opacity: 0;transform: translateY(500px);transition:all .3s ease 0.5s;}
.s3box-wrap .s3box:nth-child(4) {clear: both;margin-left: 280px;opacity: 0;transform: translateY(500px);transition:all .3s ease 0.7s;}

.s3box-wrap .s3box:nth-child(1).show {opacity: 1;transform: translateY(0px);}
.s3box-wrap .s3box:nth-child(2).show {opacity: 1;transform: translateY(0px);}
.s3box-wrap .s3box:nth-child(3).show {opacity: 1;transform: translateY(0px);}
.s3box-wrap .s3box:nth-child(4).show {opacity: 1;transform: translateY(0px);}

.s3box-wrap .s3box .s3box-txt1 {font-size: 92px;font-family: 'Rajdhani', sans-serif; color: #fff;font-weight: 700;text-align: center;padding-top: 25px;}
.s3box-wrap .s3box .s3box-txt2 {font-size: 32px;font-family: 'Rajdhani', sans-serif; color: #fff;font-weight: 400;line-height: 0px;text-align: center;}

/* section4 */
.sec4 {}
.sec4 .s4txt1 {font-size: 72px;font-family: 'Anton', sans-serif;margin-top: 450px;text-transform: uppercase;transform: translateX(-100px);transition: all .5s ease-in-out;opacity:0;}
.sec4 .s4txt2 {font-size: 16px;font-family: 'Rajdhani', sans-serif;font-weight: 700;line-height: 18px;margin-top: 65px;text-transform: uppercase;transform: translateX(-100px);transition: all .5s ease-in-out;opacity: 0;}
.sec4 .s4txt1.show {opacity: 1;transform: translateX(0px);}
.sec4 .s4txt2.show {opacity: 1;transform: translateX(0px);}

.sec4-box-wrap{position:relative;height:1500px;width: 100%;}
.sec4-box-wrap .sec4-box{position:absolute;width:370px;height:607px;background:#000;transform:skew(0, -25deg);overflow:hidden;transition:all .3s ease;opacity: 0;}
.sec4-box-wrap .sec4-box:first-child{top: 75px;left: 0; transform:scale(0.5,0.5);transition: all .5s ease 0s;}
.sec4-box-wrap .sec4-box:nth-child(2){top: -20px;left: 416px;transform:scale(0.5,0.5);transition: all .5s ease 0.5s;}
.sec4-box-wrap .sec4-box:nth-child(3){top: -450px;right: 0;transform:scale(0.5,0.5);transition: all .5s ease 1s;}
.sec4-box-wrap .sec4-box:nth-child(4){top: 720px;left: 0;transform:scale(0.5,0.5);transition: all .5s ease 1.5s;}
.sec4-box-wrap .sec4-box:nth-child(5){top: 620px;left: 416px;transform:scale(0.5,0.5);transition: all .5s ease 2s;}
.sec4-box-wrap .sec4-box:nth-child(6){top: 190px;right: 0;transform:scale(0.5,0.5);transition: all .5s ease 2.5s;}

.sec4-box-wrap .sec4-box.show {opacity: 1;transform:scale(1,1);transform:skew(0, -25deg);}

.sec4-box-wrap .sec4-box:hover .sec4-image-wrap{opacity:0.2;}
.sec4-box-wrap .sec4-box:hover .sec4-txt-wrap .sec4-box-txt1,  .sec4-box-wrap .sec4-box.active .sec4-txt-wrap .sec4-box-txt2,  .sec4-box-wrap .sec4-box:hover .sec4-txt-wrap a{opacity:1;}
.sec4-box-wrap .sec4-box:hover .sec4-txt-wrap a:before{width:171px;}

.sec4-box-wrap .sec4-box img{position:absolute;top:-86px;}
.sec4-box-wrap .sec4-box .sec4-box-in{transform:skew(0, 25deg);}
.sec4-box-wrap .sec4-box .sec4-txt-wrap{position:relative;z-index:3;}
.sec4-box-wrap .sec4-box .sec4-txt-wrap .sec4-box-txt1{padding-top:164px;padding-left:71px;font-size:42px;line-height:44px;color:#fff;opacity:0;transition:all .3s ease;font-family: 'Rajdhani', sans-serif;text-transform: uppercase;}
.sec4-box-wrap .sec4-box .sec4-txt-wrap a{float:right;text-decoration:none;color:black;background:white;text-align:right;font-size:16px;margin-top:60px;padding: 14px 22px;position:relative;opacity:0;transition:all .3s ease .6s;font-family: 'Rajdhani', sans-serif;text-transform: uppercase;}
.sec4-box-wrap .sec4-box .sec4-txt-wrap a:before{content:'';width:171px;width:0;height:2px;background:white;position:absolute;top:0;transition:all .3s;right:70px;transition-delay:.9s;}
.sec4-box-wrap .sec4-box .sec4-image-wrap{position:absolute;top:0;left:0;opacity:1;transition:all .3s ease;}

/* section5 */
#section5:before {content:'';width: 100%;height: 878px;background: #000;transform: skew(0,-25deg);position: absolute;top: 0;left: 0;}
#section5:after {content: '';width: 100%;height: 898px;background: #f6f8f9;transform: skew(0,-25deg);position: absolute;bottom: -450px;left: 0;}

/* section5 */
.sec5 {}
.sec5 .s5txt1 {font-size: 72px;text-align: right;font-family: 'Anton', sans-serif;color: #fff;text-transform: uppercase;transform: translateX(200px);transition: all .5s ease;opacity: 0;}
.sec5 .s5txt2 {width: 600px;font-size: 92px;color: #fff;font-family: 'Wire One', sans-serif;margin-top: 200px;line-height: 82px;letter-spacing: 3px;transform: translateX(-200px);transition: all .5s ease;opacity: 0;}

.sec5 .s5txt1.show {transform: translateX(0px);opacity: 1;}
.sec5 .s5txt2.show {transform: translateX(0px);opacity: 1;}

.sec5-box-wrap {width: 100%;margin: 0 auto;margin-top: -250px;}
.sec5-box-wrap .s5box {float: left;box-sizing: border-box;margin-top: -6px;margin-left: 20px;transition: all .3s ease-in-out;transform: translateY(300px);opacity: 0;}

.sec5-box-wrap .s5box.show {transform: translateY(0px);opacity: 1;}

.sec5-box-wrap .s5box:first-child {margin-left: 900px;transition: all .3s ease-in-out 0s;}
.sec5-box-wrap .s5box img {filter: grayscale(100%);transition:all .5s ease-in-out;}
.sec5-box-wrap .s5box:nth-child(2) {clear:both;margin-left: 630px;transition: all .3s ease-in-out 0.3s;}
.sec5-box-wrap .s5box:nth-child(3) {width: 270px;height: 270px;background: #000;margin-left: 0;transition: all .3s ease-in-out 0.6s;}
.sec5-box-wrap .s5box:nth-child(3) p {color: #fff;font-size: 32px; text-transform: uppercase;font-family: 'Wire One', sans-serif;letter-spacing: 3px;padding: 72px 72px 0 72px;text-align: center;}
.sec5-box-wrap .s5box:nth-child(3) a {color: #fff;font-size: 24px;border: 1px solid #fff;padding: 6px 20px;font-family: 'Wire One', sans-serif;margin-left: 100px;}
.sec5-box-wrap .s5box:nth-child(4) {clear:both;transition: all .3s ease-in-out 0.9s;}
.sec5-box-wrap .s5box:nth-child(5) {margin-left: 0;transition: all .3s ease-in-out 1.2s;}
.sec5-box-wrap .s5box:nth-child(6) {margin-left: 0;transition: all .3s ease-in-out 1.5s;}
.sec5-box-wrap .s5box:nth-child(7) {width: 270px;height: 270px;margin-left: 0;transition: all .3s ease-in-out 1.8s;}
.sec5-box-wrap .s5box:nth-child(8) {width: 540px;height: 268px;margin-left: 0;font-size: 54px;text-align: center;padding-top: 80px;font-family: 'Rajdhani', sans-serif;text-transform: uppercase;font-weight: 500;transition: all .3s ease-in-out 2.1s;}
.sec5-box-wrap .s5box:nth-child(9) {margin-left: 0;transition: all .3s ease-in-out 2.4s;}
.sec5-box-wrap .s5box:nth-child(10) {margin-left: 380px;transition: all .3s ease-in-out 2.7s;}
.sec5-box-wrap .s5box:nth-child(11) {width: 540px;height: 270px;background: #000;margin-left: 0;color: #fff;font-size: 36px;font-family: 'Wire One', sans-serif;text-align: center;padding-top: 95px;transition: all .3s ease-in-out 3s;}

.sec5-box-wrap .s5box:hover img {filter: grayscale(0%);}

.sec5-twrap {text-align: center;margin-top: 100px;opacity: 0;transition: all .5s ease;transform: scale(0);}
.sec5-twrap .s5txt3 {font-size: 16px;font-family: 'Rajdhani', sans-serif;font-weight: 700;}
.sec5-twrap .s5txt4 {font-size: 72px;font-family: 'Wire One', sans-serif;text-transform: uppercase;letter-spacing: 3px;}
.sec5-twrap .s5txt5 {font-size: 22px;font-family: 'Wire One', sans-serif;letter-spacing: 3px;}
.sec5-twrap.show {opacity: 1;transform: scale(1);animation: twrap 2s 10 ease-in-out;animation-fill-mode: forwards;}
@keyframes twrap {
  0% {transform:scale(0);}
  50% {transform:scale(1);}
  100% {transform:scale(0);}
}

/* section6 */
.sec6 {}
.sec6 .s6txt1 {font-size: 72px;font-size: 72px;text-align: right;font-family: 'Anton', sans-serif;color: #fff;padding-top: 380px;}
.sec6 .s6txt2 {text-align: right;font-size: 64px;font-family: 'Wire One', sans-serif;color: #fff;line-height: 64px;padding-top: 50px;}
.sec6 .s6txt2:after {content: ''; width: 2px;height: 50px;background: #fff;position: absolute;bottom: 205px;right: -10px;animation: cursor 1s infinite ease-in-out;}
@keyframes cursor {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

.cbox-wrap {width: 320px;height: 500px;background: #fff;margin-top: -300px;margin-left: 20px;box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.1);padding-left: 50px;}
.cbox-wrap .ctxt1 {font-size: 42px;font-family: 'Rajdhani', sans-serif;padding-top: 70px;}
.cbox-wrap .ctxt2 {font-size: 32px;font-family: 'Rajdhani', sans-serif;padding-bottom: 50px;border-bottom:1px solid #ddd;}
.cbox-wrap .mail {padding-top: 70px;font-size: 12px;font-family: 'Anton', sans-serif;}
.cbox-wrap em {color: #b89841;}
.cbox-wrap .tel {padding-top: 20px;font-size: 12px;font-family: 'Anton', sans-serif;}

/* footer */
.footer {text-align: center;padding-top: 50px;}
.footer svg {width: 65px;height: auto;}
/* ====================================================================================================================================== */

/* media */
@media (max-width:1250px){
  /* layout */
  .container {width: 100%;}
  .row {padding: 0 15px;}
  /* section2 */
  .sec2 .s2txt1 {left: 50%;transform: translateX(-50%);}
  .sec2 .s2txt2 {text-align: center;font-size: 32px;line-height: 32px;top: -100px;left: 50%;transform: translateX(-50%);}

  .sec2 .s2txt1.show {text-align: center; transform: translateX(-50%);}
  .sec2 .s2txt2.show {text-align: center;font-size: 32px;top: -100px;transform: translateX(-50%);}

  .sec2-box-wrap {width: 900px;margin: 0 auto;}
  .sec2-box-wrap .s2box:first-child{margin-left: 65px;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 65px;}
  .sec2-box-wrap .s2box:nth-child(5) {margin-left: 65px;}

  /* section4 */
  .sec4-box-wrap .sec4-box {margin-top: 10px;}
  .sec4-box-wrap .sec4-box:nth-child(2) {left:390px}
  .sec4-box-wrap .sec4-box:nth-child(3) {right: 16px;}
  .sec4-box-wrap .sec4-box:nth-child(5) {left:390px}
  .sec4-box-wrap .sec4-box:nth-child(6) {right: 16px;}

  /* section5 */
  .sec5-box-wrap {width: 900px;}
  .sec5-box-wrap .s5box:first-child {margin-left: 630px;}
  .sec5-box-wrap .s5box:nth-child(2) {margin-left: 360px;}
  .sec5-box-wrap .s5box:nth-child(3) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(4) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(5) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(6) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(7) {display: none;}
  .sec5-box-wrap .s5box:nth-child(8) {display: none;}
  .sec5-box-wrap .s5box:nth-child(9) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(10) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(11) {margin-left: 360px;}

}
@media (max-width:1200px){
  /* section3 */
  .s3txt2 {top: 150px;}
  /* section4 */
  .sec4-box-wrap{height:2000px;}
  .sec4-box-wrap .sec4-box {margin-top: -10px;}
  .sec4-box-wrap .sec4-box:nth-child(1) {top: 30px;left: 150px;}
  .sec4-box-wrap .sec4-box:nth-child(2) {top: -150px;left: 550px;}
  .sec4-box-wrap .sec4-box:nth-child(3) {top: 660px;left: 150px;}
  .sec4-box-wrap .sec4-box:nth-child(4) {top: 480px;left: 550px;}
  .sec4-box-wrap .sec4-box:nth-child(5) {top: 1290px;left: 150px;}
  .sec4-box-wrap .sec4-box:nth-child(6) {top: 1110px;left: 550px;}
}
@media (max-width:1024px){
  /* section4 */
  .sec4 .s4txt2 {padding-bottom: 60px;}
  .sec4-box-wrap .sec4-box {margin-top: -30px;}
  .sec4-box-wrap .sec4-box:nth-child(1) {left: 100px;}
  .sec4-box-wrap .sec4-box:nth-child(2) {left: 500px;}
  .sec4-box-wrap .sec4-box:nth-child(3) {left: 100px;}
  .sec4-box-wrap .sec4-box:nth-child(4) {left: 500px;}
  .sec4-box-wrap .sec4-box:nth-child(5) {left: 100px;}
  .sec4-box-wrap .sec4-box:nth-child(6) {left: 500px;}
}
@media (max-width:960px){
  /* section2 */
  .sec2-box-wrap {width: 600px;}
  .sec2-box-wrap .s2box {float: none;margin-left: 120px;}
  .sec2-box-wrap .s2box:first-child{margin-left: 120px;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 120px;}
  .sec2-box-wrap .s2box:nth-child(5) {display: none;}
  .sec2-box-wrap .s2box:nth-child(6) {display: none;}

  /* section3 */
  .s3txt1 {font-size: 300px;text-align: center;}
  .s3txt2 {display: none;}
  .s3txt3 {display: block;top: -135px;}

  .sec3 .s3box-wrap {margin: 0 auto;}
  .s3box-wrap .s3box:nth-child(1) {margin-left: 28px;}
  .s3box-wrap .s3box:nth-child(2) {clear: none;}
  .s3box-wrap .s3box:nth-child(3) {margin-left: 28px;}
  .s3box-wrap .s3box:nth-child(4) {clear: none;margin-left: 5px;}

  /* section4 */
  .sec4-box-wrap .sec4-box {margin-top: -20px;}
  .sec4-box-wrap .sec4-box:nth-child(1) {left: 60px;}
  .sec4-box-wrap .sec4-box:nth-child(2) {left: 460px;}
  .sec4-box-wrap .sec4-box:nth-child(3) {left: 60px;}
  .sec4-box-wrap .sec4-box:nth-child(4) {left: 460px;}
  .sec4-box-wrap .sec4-box:nth-child(5) {left: 60px;}
  .sec4-box-wrap .sec4-box:nth-child(6) {left: 460px;}

  /* section5 */
  .sec5 .s5txt1 {text-align: center;}
  .sec5 .s5txt2 {display: none;}

  .sec5-box-wrap {width: 600px; margin-top: 0;}
  .sec5-box-wrap .s5box:first-child {margin-left: 30px;}
  .sec5-box-wrap .s5box:nth-child(2) {clear:none;margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(3) {margin-left: 30px;}
  .sec5-box-wrap .s5box:nth-child(4) {display: none;}
  .sec5-box-wrap .s5box:nth-child(5) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(6) {margin-left: 30px;}
  .sec5-box-wrap .s5box:nth-child(8) {margin-left: 30px;display: block;}
  .sec5-box-wrap .s5box:nth-child(9) {margin-left: 30px;}
  .sec5-box-wrap .s5box:nth-child(10) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(11) {margin-left: 30px;}

}
@media (max-width:920px){
  /* section4 */
  .sec4-box-wrap .sec4-box:nth-child(1) {left: 30px;}
  .sec4-box-wrap .sec4-box:nth-child(2) {left: 430px;}
  .sec4-box-wrap .sec4-box:nth-child(3) {left: 30px;}
  .sec4-box-wrap .sec4-box:nth-child(4) {left: 430px;}
  .sec4-box-wrap .sec4-box:nth-child(5) {left: 30px;}
  .sec4-box-wrap .sec4-box:nth-child(6) {left: 430px;}

  /* section6 */
  .sec6 .s6txt1 {padding-top: 150px;text-align: center;color: #000;}
  .sec6 .s6txt2 {display: none;}
  .cbox-wrap {margin:0 auto;margin-top: 30px;}
}
@media (max-width:870px){
  .sec2 .s2txt1.show {text-align: center;}
  .sec2 .s2txt2.show {text-align: center;}

  /* section3 */
  #section3:after {bottom: -200px;}
  /* section4 */
  #section4 {margin-top: -600px;}
  .sec4 .s4txt1 {text-align: center;}
  .sec4 .s4txt2 {text-align: center;margin-top: 20px;}
  .sec4-box-wrap{height:2650px;}
  .sec4-box-wrap .sec4-box img{top: -300px;}
  .sec4-box-wrap .sec4-box {position: initial;height: 400px;margin-top: 20px;margin-left: 20%;}
  .sec4-box-wrap .sec4-box .sec4-txt-wrap .sec4-box-txt1 {padding-top: 130px;}
  .sec4-box-wrap .sec4-box .sec4-txt-wrap a {margin-top: 20px;}
}
@media (max-width:760px){
  .sec2 .s2txt1 {font-size: 64px;top: -250px;}
}
@media (max-width:680px){
  /* style */
  .style-wrap {display: none;}

  /* section3 */
  .s3txt1 {display: none;}
  .s3txt3 {top: 330px;}
  .sec3 .s3box-wrap {padding-top: 450px;}

  /* section4 */
  .sec4 .sec4-txt1 {font-size: 42px;margin-top: 400px;}
  .sec4 .sec4-txt2 {margin-top: 30px;}
  .sec4-box-wrap .sec4-box {margin-left: 15%;}
}
@media (max-width:640px){
  /* section2 */
  .sec2 .s2txt1.show {width: 300px;margin: 0 auto;}
  .sec2 .s2txt2.show {font-size: 30px;width: 300px;margin: 0 auto;}
  .sec2-txt-wrap {}
  .sec2-txt1 {font-size: 200px;left: -70px;}

  .sec2-box-wrap {width: 400px;}
  .sec2-box-wrap .s2box {margin-left: 15px;}
  .sec2-box-wrap .s2box:first-child{margin-left: 15px;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 15px;}

  /* section3 */
  #section3:after {bottom: -620px;}
  .sec3 .s3box-wrap {width: 300px;}
  .s3box-wrap .s3box {float: none;margin-left: 15px;}
  .s3box-wrap .s3box:nth-child(1) {margin-left: 15px;}
  .s3box-wrap .s3box:nth-child(3) {margin-left: 15px;}
  .s3box-wrap .s3box:nth-child(4) {margin-left: 15px;}

  /* section4 */
  .sec4-box-wrap .sec4-box {margin-left: 12%;}
  #section4 {margin-top: -100px;}

  /* section5 */
  .sec5-box-wrap {width: 300px; margin-top: 0;}
  .sec5-box-wrap .s5box:first-child {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(2) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(3) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(4) {display: none;}
  .sec5-box-wrap .s5box:nth-child(5) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(6) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(8) {display: none;}
  .sec5-box-wrap .s5box:nth-child(9) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(10) {margin-left: 15px;}
  .sec5-box-wrap .s5box:nth-child(11) {display: none;}

  /* section6 */
  #section6 {height: 1100px;}
  .sec6 .s6txt1 {padding-top: 400px;text-align: center;color: #fff;}
  .cbox-wrap {margin:0 auto;margin-top: 30px;}
}
@media (max-width:540px){
  /* nav */
  .nav {width: 330px;}
  .nav .nav-wrap {left: 50px;}
  @keyframes mouse-ani {
    0% {bottom:20%; }
    50% {bottom:23%;}
    100% {bottom:20%;}
  }
  .sec2 .s2txt1.show {left: 50%;transform: translateX(-50%) !important;}
  .sec2 .s2txt2.show {left: 50%;transform: translateX(-50%) !important;}

  /* section4 */
  .sec4-box-wrap .sec4-box {margin-left: 10%;}
  .sec4 .s4txt1 {font-size: 64px;}

}

@media (max-width:460px) {
  /* dot */
  .dot-wrap {display: none;}
  /* section2 */
  .sec2 .s2txt1.show {font-size: 54px;transform: translateX(-60%);line-height: 54px;}
  .sec2 .s2txt2.show {font-size: 24px;transform: translateX(-50%);font-size: 24px;margin-top: 0;}

  .sec2-box-wrap {width: 100%;}
  .sec2-box-wrap .s2box {margin-left: 15px;width: 100%;max-width: 370px;}
  .sec2-box-wrap .s2box:first-child{margin-left: 15px;width: 100%;max-width: 370px;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 15px;width: 100%;max-width: 370px;}

  .s2box .box-back .btxt2 {padding-left: 230px;}

  /* section3 */
  .s3txt3 {font-size: 54px;margin-top: 25px;}

  /* section4 */
  .sec4 .s4txt2 {margin-top: 20px;}
  .sec4-box-wrap .sec4-box {margin-left: 0;width: 100%;max-width: 370px;}
  .sec4 .s4txt1 {font-size: 54px;}
  .sec4-box-wrap .sec4-box .sec4-txt-wrap .sec4-box-txt1 {padding-left: 20px;}

  /* section5 */
  .sec5 .s5txt1 {font-size: 54px;}

  /* section6 */
  .sec6 .s6txt1 {font-size: 54px;}
  .cbox-wrap {width: 100%;max-width: 369px;box-sizing: border-box;}

}
@media (max-width:430px) {
  /* section2 */

  .sec2-box-wrap {width: 100%;}
  .sec2-box-wrap .s2box {margin-left: 0;}
  .sec2-box-wrap .s2box:first-child{margin-left: 0;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 0;}




}
@media (max-width:350px){
  /* nav */
  .nav {width: 220px;}
  .nav .nav-wrap {top:10px;left: 10px;}

  /* section2 */
  .sec2 .s2txt1.show {font-size: 42px;}
  .sec2 .s2txt2.show {font-size: 22px;margin-top: 0;}

  .sec2-txt1 {font-size: 150px;left: -70px;}

  .sec2-box-wrap .s2box {margin-left: 0;width: 100%;max-width: 370px;}
  .sec2-box-wrap .s2box:first-child{margin-left: 0;}
  .sec2-box-wrap .s2box:nth-child(3) {margin-left: 0;}

  .s2box .box-front .ftxt1 {text-align: center;padding-left: 0;padding-top: 30px;}
  .s2box .box-front .ftxt2 {text-align: center;padding-left: 20px;}

  .s2box .box-back .btxt2 {padding-left: 150px;}
  .sec2-box-wrap .s2box:nth-child(4) .box-back .btxt2 {padding-top: 20px;}

  /* section3 */
  .sec3 .s3box-wrap {width: 100%;}
  .s3box-wrap .s3box {width: 100%; max-width: 270px;margin-left: 0;}
  .s3box-wrap .s3box:nth-child(1) {margin-left: 0;}
  .s3box-wrap .s3box:nth-child(3) {margin-left: 0;}
  .s3box-wrap .s3box:nth-child(4) {margin-left: 0;}

  /* section4 */
  .sec4 .sec4-txt2 {display: none;}

  .sec4 .s4txt1 {font-size: 42px;}

  /* section5 */
  .sec5-box-wrap {width: 100%; max-width: 270px;}
  .sec5-box-wrap .s5box {width: 100%; max-width:270px;margin-left: 0;}
  .sec5-box-wrap .s5box:first-child {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(2) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(3) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(5) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(6) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(9) {margin-left: 0;}
  .sec5-box-wrap .s5box:nth-child(10) {margin-left: 0;}

  /* section6 */
  .cbox-wrap .ctxt1 {font-size: 36px;}
}