.container {max-width: 1400px; width: 100%; height: auto; margin: 0 auto;}
.container2 {max-width: 800px; width: 100%; height: auto; margin: 0 auto;}
.container3 {max-width: 1000px; width: 100%; height: auto; margin: 0 auto;}
.container4 {max-width: 1200px; width: 100%; height: auto; margin: 0 auto;}

/* header */
header {width: 100%; height: auto; padding: 16px 30px; box-sizing: border-box; background: #fff;}
header a {display: flex; align-items: center; justify-content: flex-end;}
header a:first-of-type {justify-content: flex-start;}
header img {width: calc(100% / 1.5);}
header .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}

/* visual */
.visual {display: flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 16/10; background: url(./../img/kv_bg.webp)no-repeat 50% 50%; background-size: cover;}
.visual .img-box {width: 852px; height: auto;}
.visual .img-box img {width: 100%; height: auto;}

/* sec1 */
.sec1 {width: 100%; height: auto; background: #313131;}
.sec1 .container {position: relative;}
.sec1 .img-box {padding: 30px; box-sizing: border-box;}
.sec1 .img-box img {width: 100%; height: auto;}
.sec1 .link {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 1vw; width: calc(100% - 60px); height: calc(100% - 60px);}
.sec1 .link a {width: 100%; height: 100%; cursor: pointer;}
.sec1 .link button {width: 100%; height: 100%; cursor: pointer;}

/* sec2 */
.sec2 {background: #e5e1e1;}

/* sec3 */
.sec3 {width: 100%; height: auto; padding: 163px 0 155px; background: #313131; box-sizing: border-box;}
.sec3 .tit {max-width: 683px; width: 100%; height: auto; margin: 0 auto 114px;}
.sec3 .tit img {width: 100%; height: auto;}
.sec3 .rolling-item {position: relative; width: 800px; height: 604px;}
.sec3 .rolling-item ul {position: absolute; top: 0; left: 0; width: 100%; height: auto;;}
.sec3 .rolling-item ul li {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; opacity: 0.3; transition: all .3s;}
.sec3 .rolling-item ul li.active {opacity: 1; z-index: 3;}
.sec3 .rolling-item ul li.prev {opacity: 0.7; z-index: 2;}
.sec3 .rolling-item ul li.next {opacity: 0.7; z-index: 2;}

/* animation */
.sec3 .rolling-item ul li.prev2 {top: 0; width: 680px;}
.sec3 .rolling-item ul li.prev {top: 100px; width: 750px;}
.sec3 .rolling-item ul li.active {top: 225px; width: 100%;}
.sec3 .rolling-item ul li.next {top: 355px; width: 750px;}
.sec3 .rolling-item ul li.next2 {top: 468px; width: 680px;}
/* //animation */


/* sec4 */
.sec4 {width: 100%; height: auto; padding: 163px 0 110px; background: #FF5700; box-sizing: border-box;}
.sec4 .tit {max-width: 873px; width: 100%; height: auto; margin: 0 auto 114px;}
.sec4 .tit img {width: 100%; height: auto;}
.sec4 .img-box {width: 100%; height: auto;}
.sec4 .img-box img {width: 100%; height: auto;}

/* sec5 */
.sec5 {width: 100%; height: auto; padding: 161px 0 111px;}
.sec5 .tit {max-width: 506px; width: 100%; height: auto; margin: 0 auto 118px;}
.sec5 .tit img {width: 100%; height: auto;}
.sec5 .img-box {width: 100%; height: auto;}
.sec5 .img-box img {width: 100%; height: auto;}

/* sec6 */
.sec6 {width: 100%; height: auto; padding: 163px 0 97px; background: #ECECEC;}
.sec6 .tit {max-width: 487px; width: 100%; height: auto; margin: 0 auto 89px;}
.sec6 .tit img {width: 100%; height: auto;}
.sec6 .img-box {width: 100%; height: auto;}
.sec6 .img-box img {width: 100%; height: auto;}

/* footer */
footer {width: 100%; height: auto; padding: 78px 0 55px; box-sizing: border-box; background: #C7C7C7;}
footer .img-box {width: calc(100% / 1.5); height: auto; margin: 0 auto;}
footer .img-box img {width: 100%; height: auto;}

.headerh {position: absolute; z-index: -9999; left: -9999px;}
.cont_p {position: absolute; z-index: -9999; left: -9999px;}