@charset "utf-8";

.mo {display: none;}
.main {overflow: hidden;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 960px; position: relative; }
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: none;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 7.5%, rgba(0, 0, 0, 0.00) 21.46%), linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop video {width: 100%; height: 100%; object-fit: cover;}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 280px; right: 15px; font-size: 60px; line-height: 1.2; color: #fff; font-weight: 700; max-width: 605px;  width: 100%; opacity: 0; transition: all 1.2s ease .1s; margin-left: auto;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 440px; right: 15px; font-size: 22px; line-height: 1.6; color: #ccc; font-weight: 600; max-width: 605px; width: 100%; opacity: 0; transition: all 1.2s ease .5s; margin-left: auto;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 320px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 485px; opacity: 1;}

.scroll {position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); padding-bottom: 58px; font-size: 16px; font-weight: 600; line-height: 1.8; color: #fff; font-family: 'Montserrat';}
.scroll::before {position: absolute; content: ''; width: 3px; height: 50px; background-color: rgba(255,255,255, .6); bottom: 0; left: 50%; transform: translateX(-50%);}
.scroll::after {position: absolute; content: '';width: 3px; height: 15px; background-color: #CDA243; bottom: 37px; left: 50%; transform: translateX(-50%); animation: upDown 1s linear infinite;}


@keyframes upDown {
    0% {
      height: 15px;
	  bottom: 37px;
    }
  
  
    60% {
      height: 25px;
	  bottom: 0;
    }
	
	100% {
      height: 15px;
	  bottom: 37;
    }
}


/* sec2 */
.sec2 {padding: 220px 0 200px;}
.sec2 .item {display: flex; align-items: center; gap: 83px;}
.sec2 .item ~ .item {margin-top: 200px;}
.sec2 .item .txt {width: 1%; flex: 1 1 auto;}
.sec2 .item .txt dl {display: flex; gap: 17px; align-items: center;}
.sec2 .item .txt dl dt {position: relative; max-width: 100px; width: 100%; font-size: 26px; font-weight: 600; color: #CDA243; line-height: 1.6;}
.sec2 .item .txt dl dt::after {position: absolute; content: ''; width: 53px; height: 1px; background-color: #CDA243; top: 50%; right: 0; transform: translateY(-50%);}
.sec2 .item .txt dl dd {font-size: 22px; color: #999; font-weight: 600; line-height: 1.6;}
.sec2 .item .txt h4 {font-size: 44px; font-weight: 700; line-height: 1.5; color: #000; margin-top: 40px;}
.sec2 .item .txt p {font-size: 24px; color: #555; font-weight: 400; line-height: 1.8; margin-top: 20px;}
.sec2 .item .img {position: relative; max-width: 750px; width: 100%;}
.sec2 .item .img span {display: block; width: 176px; height: 109px; position: absolute;}
.sec2 .item .img > img {box-shadow: 20px 60px 60px 0 rgba(0, 0, 0, 0.10);}
.sec2 .item:nth-of-type(1) .img > img {border-radius: 0 0 260px 0;}
.sec2 .item:nth-of-type(1) .img span {bottom: 0; right: 0;}
.sec2 .item:nth-of-type(2) {flex-direction: row-reverse;}
.sec2 .item:nth-of-type(2) .img > img {border-radius: 260px 0 0 0;}
.sec2 .item:nth-of-type(2) .img span {top: 0; left: 0;}
.sec2 .item:nth-of-type(3) .img > img {border-radius: 0 260px 0 0;}
.sec2 .item:nth-of-type(3) .img span {top: 0; right: 0;}
.sec2 .more {display: block; max-width: 370px; width: 100%; font-size: 22px; font-weight: 600; color: #fff; line-height: 78px; padding: 0 64px; background: url(../images/main/ico_arrow.png) calc(100% - 64px) 50% no-repeat; background-size: auto; border: 1px solid #CDA243; border-radius: 50px; margin: 160px auto 0; transition: all .2s linear; background-color: #CDA243;}
.sec2 .more:hover {background-image: url(../images/main/ico_arrow_on.png); background-color: #fff; border-color: #999; color: #666;}

.section-header h4 {position: relative; padding-top: 40px; font-size: 46px; font-weight: 700; line-height: 1.6; color: #000;}
.section-header h4::before {position: absolute; content: ''; width: 142px; height: 2px; background-color: #CDA243; top: 0; left: 0;}
.section-header p {font-size: 24px; color: #555; font-weight: 400; line-height: 1.8; margin-top: 20px;}

.sec3 {padding: 240px 0 145px; width: 100%; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover; overflow: hidden;}
.sec3 .inner {display: flex; gap: 40px; align-items: center; margin-left: 225px; padding-left: 15px;}
.sec3 .inner .section-header {padding-bottom: 120px; max-width: 480px; width: 100%;}
.sec3 .inner .section-header .control {margin-top: 50px; display: flex; align-items: center; gap: 14px;}
.sec3 .inner .section-header .control .btns {width: 38px; height: 38px; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear; cursor: pointer;}
.sec3 .inner .section-header .control .btn-prev {background-image: url(../images/main/ico_prev.png);}
.sec3 .inner .section-header .control .btn-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.sec3 .inner .section-header .control .btn-next {background-image: url(../images/main/ico_next.png);}
.sec3 .inner .section-header .control .btn-next:hover {background-image: url(../images/main/ico_next_on.png);}
.sec3 .inner .portfolio {width: 1%; flex: 1 1 auto;}
.sec3 .inner .portfolio .swiper {width: 100%; padding: 30px 0 120px 30px;}
.sec3 .inner .portfolio .swiper-slide {box-shadow: 20px 60px 60px 0 rgba(0, 0, 0, 0.10); transition: all .3s linear;}
.sec3 .inner .portfolio .swiper-slide-active {transform: translateY(-30px);}
.sec3 .inner .portfolio .swiper-slide-active a {border-radius: 100px 0 0 0;}
.sec3 .inner .portfolio .swiper-slide a {display: block; width: 100%; height: 100%; overflow: hidden; transition: all .3s linear;}
.sec3 .inner .portfolio .swiper-slide .pic {position: relative; height: 0; padding-bottom: 58.48%; overflow: hidden;}
.sec3 .inner .portfolio .swiper-slide .pic img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; height: 100% !important; max-width: 100%; min-height: 100%; object-fit: cover; transition: all .3s linear;}
.sec3 .inner .portfolio .swiper-slide:hover a .pic img {transform:translateY(-50%) scale(1.05);}
.sec3 .inner .portfolio .swiper-slide .txt {background-color: #fff; padding: 30px;}
.sec3 .inner .portfolio .swiper-slide .txt h5 {font-size: 24px; color: #222; font-weight: 700; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sec3 .inner .portfolio .swiper-slide .txt p {font-size: 18px; color: #666; font-weight: 400; line-height: 1.6; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; min-height: 58px; margin-top: 8px;}

.sec4 {position: relative; padding: 200px 0 215px; width: 100%;}
.sec4::before {position: absolute; content: ''; width: 867px; height: 673px; background: url(../images/main/bg_ico.png) 50% 50% no-repeat; background-size: auto; bottom: 0; left: 0; z-index: -1;}
.sec4 .shop {display: flex; gap: 150px;}
.sec4 .section-header {text-align: center; max-width: 490px; width: 100%; padding-top: 105px;}
.sec4 .section-header h4::before {left: 50%; transform: translateX(-50%);}
.sec4 .section-header a {display: block; max-width: 320px; width: 100%; font-size: 22px; font-weight: 600; color: #666; line-height: 66px; padding: 0 50px; background: url(../images/main/ico_arrow_on.png) calc(100% - 50px) 50% no-repeat; background-size: auto; border: 1px solid #666; border-radius: 50px; margin: 50px auto 0; transition: all .2s linear; background-color: #fff; text-align: left;}
.sec4 .section-header a:hover {background-image: url(../images/main/ico_arrow.png); background-color: #CDA243; color: #fff; border-color: #CDA243;}
.sec4 .img-box {width: 1%; flex: 1 1 auto; position: relative; height: 505px;}
.sec4 .img-box figure {position: absolute; box-shadow: 20px 60px 60px 0 rgba(0, 0, 0, 0.10);}
.sec4 .img-box figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec4 .img-box figure:nth-of-type(1) {top: 0; left: 40px;}
.sec4 .img-box figure:nth-of-type(2) {top: 110px; /* right: 0; */ left: 510px;}
.sec4 .img-box figure:nth-of-type(3) {bottom: 0; left: 180px;}
.sec4 .img-box.mo {display: none; height: auto;}
.sec4 .img-box.mo figure {box-shadow: none; width: 100%; position: static;}

.sec5 {width: 100%; padding: 168px 0; background: url(../images/main/bg_sec5.jpg) 50% 50% no-repeat; background-size: cover;}
.sec5 h4 {font-size: 40px; color: #fff; font-weight: 700; line-height: 1.6; text-align: center;}
.sec5 p {font-size: 20px; color: #ccc; margin-top: 24px; text-align: center; font-weight: 400; line-height: 1.6;}
.sec5 a {display: block; max-width: 280px; width: 100%; font-size: 22px; font-weight: 600; color: #666; line-height: 66px; padding: 0 50px; background: url(../images/main/ico_arrow_on.png) calc(100% - 50px) 50% no-repeat; background-size: auto; border: 1px solid #fff; border-radius: 50px; margin: 50px auto 0; transition: all .2s linear; background-color: #fff;}
.sec5 a:hover {background-color: #CDA243; color: #fff; background-image: url(../images/main/ico_arrow.png); border-color: #CDA243;}