@charset "utf-8";

.mo {display: none;}

/* m-visual */
.m-visual {padding: 0; height: 905px; position: relative; padding-top: 135px;}
.m-visual::before {position: absolute; content: ''; width: 517px; height: 1070px; background: url(../images/main/bg.png) 50% 50% no-repeat; background-size: auto; top: 0; right: 0; z-index: -1;}
.m-visual .container {width: 100%;display: flex;}
.swiper-box {width: 100%; height: 100%; max-width: 1180px; display: flex; gap: 16px;}
.swiper-box .swiper {width: 100%; max-width: 582px; height: 770px;}
.swiper-box .swiper .swiper-wrapper {transition-timing-function: ease-in-out !important;}
.swiper-box .swiper .swiper-slide .backdrop {width: 100%; height: 100%; background: url() 50% 50% no-repeat; background-size: cover;}
.swiper-box .swiper.left-visual .slide01  .backdrop {background-image: url(../images/main/1-01.jpg)}
.swiper-box .swiper.left-visual .slide02  .backdrop {background-image: url(../images/main/2-01.jpg)}
.swiper-box .swiper.left-visual .slide03  .backdrop {background-image: url(../images/main/3-01.jpg)}
.swiper-box .swiper.left-visual .slide04  .backdrop {background-image: url(../images/main/4-01.jpg)}
.swiper-box .swiper.left-visual .slide05  .backdrop {background-image: url(../images/main/5-01.jpg)}
.swiper-box .swiper.right-visual .slide01  .backdrop {background-image: url(../images/main/1-02.jpg);}
.swiper-box .swiper.right-visual .slide02  .backdrop {background-image: url(../images/main/2-02.jpg);}
.swiper-box .swiper.right-visual .slide03  .backdrop {background-image: url(../images/main/3-02.jpg);}
.swiper-box .swiper.right-visual .slide04  .backdrop {background-image: url(../images/main/4-02.jpg);}
.swiper-box .swiper.right-visual .slide05  .backdrop {background-image: url(../images/main/5-02.jpg);}

.swiper-box .swiper {position: relative;}
.swiper-box .swiper::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: #eee8e0; z-index: 2; transition: all 1s ease-out;}
.swiper-box .swiper.show::after {height: 0;}

.slogan {max-width: 600px; width: 100%; padding-top: 90px; padding-left: 40px; position: relative;}
.slogan h2 {position: relative; font-size: 77px; line-height: 1.2; color: #4f3e25; font-weight: 300; padding-bottom: 70px; letter-spacing: -2.5px;}
.slogan h2::after {position: absolute; content: ''; max-width: 435px; width: 100%; bottom: 0; left: 0; height: 1px; background-color: #4f3e25;}
.slogan p {font-size: 19px; font-weight: 500; color: #4f3e25; line-height: 1.632; padding-top: 60px; letter-spacing: -.8px;}

.controls {position: absolute; max-width: 600px; width: 100%; height: 16px; bottom: 20px; left: 40px; display: flex; align-items: center;}
.controls .paging {width: 70px; display: flex; align-items: center; margin-right: 15px;}
.controls .paging .visual-pagination {text-align: center; color: #4f3e25;font-family: 'Pretendard';font-size: 0; font-weight: 500;}
.controls .paging .visual-pagination > span {position: relative; font-size: 16px; padding-left: 10px;}
.controls .paging .visual-pagination > span::before {position: absolute; content: '0'; font-size: 16px; top: 2px; left: 0; color: #4f3e25;}
.controls .paging .visual-pagination > span:first-child {padding-right: 25px;}
.controls .paging .visual-pagination > span:first-child::after {position: absolute; content: ''; width: 2px; height: 13px; background-color: #4f3e25; top: 50%; right: 11px; transform: translateY(-50%);}
.controls .btn-area {width: 290px; height: 100%; display: flex; align-items: center; justify-content: space-between;}
.controls .btn-area .progress-bar {position: relative; width: 270px; height: 6px; background-color: #c6c6c6; position: relative; border-radius: 5px; overflow: hidden;}
.controls .btn-area .progress-bar svg {position: absolute; --progress: 0; top: 0; left: 0; width: 100%; stroke-width: 4px; stroke: #4f3e25; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100;}

.controls .btn-area .btn-controls {width: 9px; height: 13px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto;}
.controls .btn-area .btn-controls.play {background-image: url(../images/main/ico_play_.png); width: 12px; height: 14px;}

/* sec2 */
.sec2 {margin-top: 200px; padding-bottom: 250px;}
.section-header h3 {font-size: 77px; font-weight: 300; color: #4f3e25; letter-spacing: -2.8px;}
.section-header p {font-size: 19px; font-weight: 500; color: #4f3e25; padding-top: 15px; line-height: 1.6; letter-spacing: -.8px;}
.grid-box {margin-top: 30px; width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(11, 1fr); /* gap:28px 29px; */ gap: 1.5vw; min-height: 2815px;}
.grid-img {position: relative; overflow: hidden; cursor: pointer;}
.grid-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; transition: all .3s linear;}
.grid-img img:nth-of-type(2) {opacity: 0; z-index: 1; transition: all .3s linear;}
.grid-img:hover img {z-index: 0;}
.grid-img:hover img:nth-of-type(2) {opacity: 1; z-index: 2;}
.grid01 {grid-column: 1/5; grid-row: 1/3;}
.grid02 {grid-column: 5/8; grid-row: 1/3;}
.grid03 {grid-column: 1/3; grid-row: 3/5;}
.grid04 {grid-column: 3/6; grid-row: 3/5;}
.grid05 {grid-column: 6/8; grid-row: 3/6;}
.grid06 {grid-column: 1/4; grid-row: 5/9;}
.grid07 {grid-column: 4/6; grid-row: 5/8;}
.grid08 {grid-column: 6/8; grid-row: 6/8;}
.grid09 {grid-column: 4/8; grid-row: 8/10;}
.grid10 {grid-column: 1/4; grid-row: 9/12;}
.grid11 {grid-column: 4/6; grid-row: 10/12;}
.grid12 {grid-column: 6/8; grid-row: 10/12;}


.pop-up {position: fixed; width: 100%; height: 100%; z-index: 1000; top: 0; left: 0; display: none; background-color: rgba(0,0,0, .5);}
.pop-up .inner { padding:15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pop-up .inner .close {display: block; max-width: 56px; width: 100%; position: absolute; top: 0px; right: -85px;}
.pop-up .inner .close img {display: block; max-width: 100%; margin: 0 auto;}
.pop-up .inner .pop-img {width: 100%;}
.pop-up .inner .pop-img img {display: block; margin: 0 auto; max-width: 100%;}