@charset "utf-8";

.mo {display: none;}

/* m-visual */
.m-visual {padding: 0; position: relative;}
.m-visual .visual {width: 100%; height: 703px; position: relative; border-radius: 60px;}
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide {overflow: hidden;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease; transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1);}

.m-visual .visual .visual-pagination {position: absolute; bottom: 40px; right: 40px; display: block; z-index: 2; width: 14px; top: initial; left: initial;}
.m-visual .visual .visual-pagination .swiper-pagination-bullet {position: relative; width: 14px; height: 14px; border-radius: 50%; background-color: rgba(68, 68, 68, 0.60); opacity: 1; margin: 0; display: block; transition: all .2s linear;}
.m-visual .visual .visual-pagination .swiper-pagination-bullet ~ .swiper-pagination-bullet {margin-top: 14px !important;}
.m-visual .visual .visual-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {height: 37px; background-color: #F5CC2D; border-radius: 50px;}

.m-visual .visual .visual-pagination .swiper-pagination-bullet::before {position: absolute; font-size: 16px; width: 115px; text-align: right; font-weight: 400; line-height: 1.6; color: rgba(68, 68, 68, 0.60); top: 50%; left: -130px; transform: translateY(-50%);}
.m-visual .visual .visual-pagination .swiper-pagination-bullet-active::before {color: #F5CC2D; font-weight: 600;}
.m-visual .visual .visual-pagination .swiper-pagination-bullet:nth-of-type(1)::before {content:'Design';}
.m-visual .visual .visual-pagination .swiper-pagination-bullet:nth-of-type(2)::before {content:'Goods';}
.m-visual .visual .visual-pagination .swiper-pagination-bullet:nth-of-type(3)::before {content:'Editorial & Print';}

.controls {position: absolute; max-width: 1664px; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; display: flex; justify-content: space-between; align-items: center;}
.controls .btns {width: 80px; height: 80px; border-radius: 50%; background: url() 50% 50% no-repeat; background-size: auto; background-color: #fff; box-shadow: 0 0 14.286px rgba(0, 0, 0, 0.10); transition: all .2s linear; cursor: pointer;}
.controls .btns.visual-prev {background-image: url(../images/main/ico_prev.png);}
.controls .btns.visual-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.controls .btns.visual-next {background-image: url(../images/main/ico_next.png);}
.controls .btns.visual-next:hover {background-image: url(../images/main/ico_next_on.png);}

/* sec2 */
.sec2 {padding-top: 100px;}
.sec2 .flow-wrap {position: relative; overflow: hidden; white-space: nowrap; z-index: -1;}
.sec2 .flow-wrap .flow {display: inline-flex; animation: scrollText 40s linear infinite; will-change: transform;}
.sec2 .flow-wrap .flow h2 {display: inline-block; padding-right: 50px; font-size: 210px; color: #f6f6f6; font-weight: 700; line-height: normal;}
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
.sec2 .map {position: relative; margin-top: 16px; width: 100%; background-color: #d6ece9; padding: 65px 96px 85px; border-radius: 20px;}
.sec2 .map h5 {font-size: 36px; color: #303030; font-weight: 700; line-height: 1.6;}
.sec2 .map p {margin-top: 20px; color: #303030; font-size: 20px; font-weight: 400; line-height: 1.6;}
.sec2 .map a {margin-top: 40px; max-width: 373px; width: 100%; padding: 0 34px; display: block; font-size: 18px; color: #303030; font-weight: 700; line-height: 54px; background: url(../images/main/ico_arrow.png) calc(100% - 34px) 50% no-repeat; background-size: auto; background-color: #fff; border-radius: 100px; transition: all .2s linear; border: 1px solid #fff;}
.sec2 .map a:hover {border-color: #6FA72E; background-image: url(../images/main/ico_arrow_on.png);}
.sec2 .map figure {position: absolute; bottom: -62px; right: 70px; z-index: 2;}

/* sec3 */
.sec3 {padding: 160px 0 250px;}
.sec3 .section-header {text-align: center;}
.sec3 h3 {position: relative; display: inline-block; font-size: 100px; font-weight: 700; line-height: 1.2; color: #303030; padding-right: 82px; font-family: 'Montserrat';}
.sec3 h3 > i {color: #F5CC2D; font-style: normal;}
.sec3 h3 > span {position: absolute; bottom: 0; right: 0;}
.sec3 h3 > span > img {display: block; max-width: 100%; margin: 0 auto;}

.sec3 .works {display: flex; gap: 80px; width: 100%; margin-top: 50px;}
.sec3 .works .img-wrap {max-width: 716px; width: 100%;}
.sec3 .works .img-wrap figure {width: 100%;}
.sec3 .works .img-wrap figure img {display: block; max-width: 100%; margin: 0 auto;}
.sec3 .works .list {width: 1%; flex: 1 1 auto;}
.sec3 .works .list .box {position: relative; display: flex; height: 95px; align-items: center; gap: 20px; justify-content: space-between; padding: 0 20px; cursor: pointer;}
.sec3 .works .list .box::before {position: absolute; content: ''; width: 100%; height: 1px; background-color: #999; top: 0; right: 0; transition: all .2s linear;}
.sec3 .works .list .box:last-child {border-bottom: 1px solid #999;}
.sec3 .works .list .box dl {display: flex; gap: 10px;}
.sec3 .works .list .box dl dt {font-size: 14px; color: #ccc; font-weight: 600; line-height: 1.6; transition: all .2s linear;}
.sec3 .works .list .box dl dd {font-size: 24px; color: #ccc; font-weight: 600; line-height: 1.6; transition: all .2s linear;}
.sec3 .works .list .box a {opacity: 0; transition: all .2s linear;}
.sec3 .works .list .box a > img {display: block; max-width: 100%; margin: 0 auto;}

.sec3 .works .list .box.on {background-color: #F8F8F8;}
.sec3 .works .list .box.on::before {width: calc(100% + 70px); height: 4px; background-color: #000;}
.sec3 .works .list .box.on dl dt {color: #000;}
.sec3 .works .list .box.on dl dd {color: #000;}
.sec3 .works .list .box.on a {opacity: 1;}