@charset "utf-8"; /* ******************* *
* 공통
* ******************* */
.msec-title { margin-bottom: 30px; } 
.msec-title > .title { color: #111; font-family: var(--font-NanumHuman); font-size: 2.0em; font-weight: 600; } 

@media all and (max-width: 768px){
 .msec { margin-bottom: 80px; } 
 .msec-title { margin-bottom: 15px; } 
 }



/* ******************* *
* msec01
* ******************* */
.mquick { } 
.mquick ul { display:grid; grid-template-columns:1.2fr 4fr 1.2fr; grid-template-rows:repeat(6,1fr); } 
.mquick li { position:relative; overflow:hidden; } 
.mquick li img { width:100%; height:100%; object-fit:cover; display:block; } 

.mquick li:nth-child(1) { grid-column:1; grid-row:1/4; } 
.mquick li:nth-child(2) { grid-column:1; grid-row:4/7; } 
.mquick li:nth-child(3) { grid-column:2; grid-row:1/7; } 
.mquick li:nth-child(4) { grid-column:3; grid-row:1/3; } 
.mquick li:nth-child(5) { grid-column:3; grid-row:3/5; } 
.mquick li:nth-child(6) { grid-column:3; grid-row:5/7; } 
@media (max-width:1024px){
 .mquick ul { grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:auto; } 
 .mquick li { grid-column:auto!important; grid-row:auto!important; } 
 }

@media (max-width:768px){
    .mquick ul {display:flex;align-items: stretch;padding:80px 0} 
    .mquick ul li img {aspect-ratio: 360/310;width:100%;}
    .mquick ul li.swiper-slide.swiper-slide-active {transform: scale(1.1);transition:.5s}
    .mquick .swiper-pagination{top: unset !important;bottom: 0;width: 80% !important;left: 50% !important;transform: translateX(-50%);}
    .mquick .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#707070}
}

/* ******************* *
* msec02
* ******************* */

.adm-btns { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; margin-top:10px } 
.adm-btns > a { display: block; padding: 5px 10px; background: #E04545; color: #fff; font-size: 14px; font-weight: 500; } 
.msec02 .list-swiper-wrap { } 
.msec02 .list-swiper-wrap .swiper-slide {height:100vh}
.msec02 .list-swiper-wrap .swiper-slide .img {height:100vh; background-size:cover;background-position:center center}
.msec02 .list-swiper-wrap .swiper-pagination { display:flex; gap:30px; justify-content: center; padding-bottom: 50px; } 
.msec02 .list-swiper-wrap .swiper-pagination-bullet { width:100px!important; height:1px !important; background:#C4C4C4 } 
.msec02 .list-swiper-wrap .swiper-pagination-bullet-active { background:#fff!important } 
@media (max-width:1024px){
   .msec02 .list-swiper-wrap {min-height:500px;}
   .msec02 .list-swiper-wrap img {height:100%!important; width:auto}
}@media (max-width:768px){
   
}


/* 섹션, 래퍼, 슬라이드, 이미지 컨테이너 모두 100vh */
.msec02,
.msec02 .list-swiper-wrap,
.msec02 .list-swiper-cont,
.msec02 .list-swiper-wrap .list-swiper,
.msec02 .list-swiper-wrap .swiper-wrapper,
.msec02 .list-swiper-wrap .swiper-slide,
.msec02 .list-swiper-wrap .img-cont,
.msec02 .list-swiper-wrap .img {
    height: 100vh;
}

/* 비디오는 부모(슬라이드 영역)를 꽉 채우고, 비율 유지 + 잘라내기 */
.msec02 .list-swiper-wrap .bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* 기존 페이지네이션 스타일 유지 */
.msec02 .list-swiper-wrap .swiper-pagination {
    display: flex;
    gap: 30px;
    justify-content: center;
    padding-bottom: 50px;
}

.msec02 .list-swiper-wrap .swiper-pagination-bullet {
    width: 100px !important;
    height: 1px !important;
    background: #C4C4C4;
}

.msec02 .list-swiper-wrap .swiper-pagination-bullet-active {
    background: #fff !important;
}

/* 반응형 */
@media (max-width: 1024px){
    /* 모바일에서도 화면 높이만큼 꽉 차게 두고 싶으면 이대로 두고, 
       너무 크면 min-height로 바꿔도 돼 */
    .msec02,
    .msec02 .list-swiper-wrap,
    .msec02 .list-swiper-cont,
    .msec02 .list-swiper-wrap .list-swiper,
    .msec02 .list-swiper-wrap .swiper-wrapper,
    .msec02 .list-swiper-wrap .swiper-slide,
    .msec02 .list-swiper-wrap .img-cont,
    .msec02 .list-swiper-wrap .img {
        min-height: 500px;
        height: 100vh;
    }
}

@media (max-width: 768px){
    /* 필요하면 여기서 더 줄이기 */
}

/* ******************* *
* msec03
* ******************* */

.msec03 { padding:120px 0 } 
.msec03 .cinner { max-width:1200px ; width:92%} 
.msec03 .info-cont { display: flex; flex-direction: column; align-items: center; } 
.msec03 .cart-layer,
.msec03 .sit_icon_li,
.msec03 .sct_op_btn,
.msec03 .sct_btn { display:none } 
.msec03 .smt_10 .sct_img { width:100%!important } 
.msec03 .smt_10 .sct_ct_wrap { position: relative; display: flex; flex-direction: column; align-items: center; } 
.msec03 .swiper-pagination-progressbar {top:unset!important; bottom:0;width:70%!important; left:50%!important ; transform: translateX(-50%);}
.msec03 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#707070}
.msec03 .swiper {padding-bottom:70px;}
@media (max-width:1024px){
}
@media (max-width:768px){
   
}

/* ******************* *
* msec04
* ******************* */

.msec04 { display: flex; justify-content: space-between; } 
.msec04 .msec04_list { width: 50%; overflow: hidden; } 
.msec04 .msec04_list a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; position: relative; } 
.msec04 .msec04_list a img { transition:.5s } 
.msec04 .msec04_list:hover a img { transform: scale(1.2); transition:.5s } 
.msec04 .msec04_list a span { position: absolute; border-radius: 30px; padding: 10px; color: #fff; border: 1px solid #fff; bottom: 110px; width: 200px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .9em; overflow: hidden; z-index: 10; } 
.msec04 .msec04_list a span:before { width:0; content:''; height:100%; background:#fff; position:absolute; left:0; right:0; top:0; bottom:0; transition:.5s; z-index: -1; } 
.msec04 .msec04_list:hover a span:before { width:100%; transition:.5s } 
.msec04 .msec04_list:hover a span { color:#000 } 
@media (max-width:1024px){
}
@media (max-width:768px){
    .msec04 {flex-direction: column;}
    .msec04 .msec04_list{width:100%}
   
}

/* ******************* *
* msec05
* ******************* */

.msec05 .cinner { border-bottom:1px solid #000; padding-bottom:150px } 
.msec05 .msec-title { display:flex; align-items: center; justify-content: space-between; margin-top:120px } 
.msec05 .sct_10 { display:flex; gap:12px } 
.msec05 .sct_10 .sct_li { width:calc(20% - 10px ) } 
@media (max-width:1024px){
    .msec05 .sct_10 .sct_li {width:calc(50% - 6px)!important}
}
@media (max-width:768px){
   
}
/* ******************* *
* msec06
* ******************* */
.msec06 { padding-top:50px; display:flex; justify-content: space-between; padding-bottom:150px; } 
.msec06 .msec-title { padding-left: 50px; display: flex; flex-direction: column; gap: 450px; } 
.msec06 .msec-title h2 { } 
.msec06 .msec-title a { display: flex; align-items: center; gap: 10px; font-size: 1em; color: #3C3C3C; } 
.msec06 .msec-title a img { } 
.msec06 .list-swiper-wrap { width:calc(100% - 450px) } 
.msec06 .list-swiper { padding-bottom:50px; } 
.msec06 .list-swiper .swiper-pagination { top:unset; bottom:0 } 
.msec06 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#707070 } 
@media (max-width:1024px){
    .msec06 {flex-direction: column;}
    .msec06 .msec-title {width:92%;margin:0 auto;flex-direction: row;align-items: center;justify-content: space-between;gap:0; padding-left:0; margin-bottom:30px;}
    .msec06 .list-swiper-wrap {width:92%; margin:0 auto}
}
@media (max-width:768px){
   
}
/* ******************* *
* msec07
* ******************* */
.msec07 { display: flex; justify-content: space-between;padding-bottom:150px } 
.msec07 >div { display: flex } 
.msec07 .cinner > div { width: 40%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } 
.msec07 .cinner > div.img_wrap { width: 65%; max-width: 1100px; display: flex; flex-direction: row; } 
.msec07 .cinner > div.img_wrap img { } 
.msec07 .cinner > div .link_wrap { position: relative; height: 50%; } 
.msec07 .cinner > div .link_wrap:last-child .like_button { color:#284637 } 
.msec07 .cinner > div .link_wrap a { position: relative; display: block; height:100% } 
.msec07 .cinner > div .link_wrap a img { width:100%; height:100% } 
.msec07 .cinner > div .link_wrap .link_title { position: absolute; left: 65px; top: 64px; color:#fff; } 
.msec07 .cinner > div .link_wrap .link_title h3 { font-size: 1.75em; padding-left: 65px; } 
.msec07 .cinner > div .link_wrap .link_title p { margin-top: 40px; font-size: 1em; } 
.msec07 .cinner > div .link_wrap .like_button { position: absolute; right: 60px; bottom: 60px; display: flex; align-items: center; gap: 10px; color:#fff; } 
.msec07 .cinner > div .link_wrap .like_button span { font-size:1em } 
.msec07 .cinner > div .link_wrap .like_button img { } 
.msec07 .cinner > div .link_wrap:last-child .link_title { color:#284637 } 

@media (max-width:1024px){
   .msec07 >div {flex-direction: column;height: fit-content;}
   .msec07 .cinner > div {width:100%}
   .msec07 .cinner > div.img_wrap {width: 100%;max-width:100%;display:block}
   .msec07 .cinner > div .link_wrap {width: 100%}
   .msec07 .cinner > div .link_wrap .link_title {left:100px; top:90px}
}@media (max-width:768px){
   
}