@charset "utf-8";
.main .content {overflow: hidden;}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_visual {color: #fff; position: relative; overflow: hidden;}
/* swiper */
.main_visual .swiper {height: 680px;}
.main_visual .swiper-slide {background: no-repeat center center / cover; position: relative; cursor: pointer; height: auto;}
.main_visual .swiper-slide .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_visual .swiper-slide .bg img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main_visual .swiper-slide::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
.main_visual .swiper-slide .inner {display: flex; align-items: center; height: 100%;}
/* swiper btn */
.main_visual .swiper-button {position: absolute; top: 0; right: 0; height: 100%; z-index: 1; border-left: 1px solid #fff;}
.main_visual .swiper-button [class*=Btn] {display: flex; align-items: center; justify-content: center; height: 50%;  width: 80px; writing-mode: vertical-lr; font-family: var(--eng-font); font-size: var(--fz-18); letter-spacing: 0.5em; transition: 0.25s;}
.main_visual .swiper-button [class*=Btn] + [class*=Btn] {border-top: 1px solid #fff;}
.main_visual .swiper-button [class*=Btn]:hover {background-color: rgba(255, 255, 255, 0.2);}
/* text */
.main_visual .text {width: 100%; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.main_visual .text h2.eng {font-size: var(--fz-62);}
.main_visual .text p {max-width: 700px; font-size: var(--fz-22); line-height: 1.27em; margin-top: 100px; min-height: 8.9em;}
/* read more */
.main_visual .btn_wrap {margin-top: 100px;}
.main_visual .btn_wrap .more {font-size: var(--fz-18); position: relative; padding-bottom: 5px;}
.main_visual .btn_wrap .more::before {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #fff; transition: 0.35s;}
.main_visual .btn_wrap .more:hover::before {width: 150px;}

@media all and (min-width: 1401) {
    .main_visual .swiper {height: calc(100vh - 280px); max-height: 860px;}
}

@media all and (max-width: 767px) {
    .main_visual .swiper {max-height: 400px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con01 {margin-top: 50px;}
.main .con01 [class^=row] + [class^=row] {margin-top: -240px;}
/*--- row01 ---*/
.main .con01 .row01 {background: url(/img/main_con01_bg.jpg) no-repeat center center / cover; min-height: 670px; padding: 120px 0; box-sizing: border-box;}
.main .con01 .main_tit {max-width: 700px; margin: auto; margin-right: 0;}
.main .con01 .main_tit p {margin-top: 50px;}
/*--- row02 ---*/
.main .con01 ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 25px;}
.main .con01 ul li {width: calc(33.3333% - 17px); cursor: pointer; max-width: 450px;}
.main .con01 ul li .img_box {width: 100%; aspect-ratio: 1/0.97; background-color: #eee; position: relative;}
.main .con01 ul li .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main .con01 ul li .img_box .hover {position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: flex-end; background-color: rgba(22, 34, 40, 0.5); padding: 30px 20px; box-sizing: border-box; opacity: 0; transition: 0.35s;}
.main .con01 ul li .img_box .hover p {writing-mode: vertical-rl; transform: rotate(-180deg); font-family: var(--sub-font); font-size: var(--fz-20); line-height: 2em; color: #fff;}
.main .con01 ul li .txt_box {margin-top: 10px;}
.main .con01 ul li .txt_box h5 {font-weight: 600; font-size: var(--fz-20); line-height: 1.6em;}
/*--- hover ---*/
.main .con01 ul li:hover .img_box .hover {opacity: 1;}
/*--- responsive ---*/
@media all and (max-width: 767px) {
    .main .con01 .row01 {background: unset; padding: 0; min-height: unset;}
    .main .con01 .main_tit {max-width: unset;}
    .main .con01 .main_tit h3 {font-size: var(--fz-25);}
    .main .con01 .main_tit h3 br {display: none;}
    
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con02 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con02 {overflow: hidden;}
.main .con02 .swiper {overflow: visible;}
.main .con02 .swiper-slide {width: calc(20% - 8px); margin-right: 10px;}
.main .con02 .txt_box {padding: 0;}
.main .con02 .txt_box .desc {margin-top: 5px; }
.main .con02 .txt_box .desc p {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.625em;}

.main .con02 .txt_box .text {margin: 0; min-height: unset; display: flex; align-items: center; font-family: var(--num-font); gap: 10px; margin-top: 10px;}
.main .con02 .txt_box .text .left_tit,
.main .con02 .txt_box .text .right_tit {float: unset; width: unset; margin: 0;}
.main .con02 .txt_box .text .right_tit {display: flex; align-items: baseline; gap: 20px;}
.main .con02 .txt_box .text .price {margin: 0; font-weight: 500; font-size: var(--fz-18); letter-spacing: -0.04em; color: #444; font-family: unset;}
.main .con02 .txt_box .text .dc {font-weight: 500; font-size: var(--fz-18); letter-spacing: -0.04em; color: #e10000;}
.main .con02 .txt_box .text .before_price {font-weight: 300; font-size: var(--fz-18); letter-spacing: -0.04em; color: #9b9b9b;}

/* 리뷰 & 뱃지 */
.etc_wrap {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.etc_wrap p {font-weight: 300; font-size: var(--fz-16); color: #0a2a3b; letter-spacing: -0.045em; text-align: right;}
.badge_wrap {display: flex; flex: 1; gap: 4px;}
.badge_wrap i {display: flex; align-items: center; justify-content: center; font-style: normal; border: 1px solid #000; box-sizing: border-box; font-weight: 300; font-size: 11px; color: #222; letter-spacing: -0.045em; padding: 3px 3px;}
.badge_wrap i.new {border-color: #0a2a3b; color: #0a2a3b;}
.badge_wrap i.best {border-color: #006093; color: #006093;}
.badge_wrap i.sale {border-color: #e10000; color: #e10000;}
.badge_wrap i.coupon {border-color: #610b98; color: #610b98;}
.badge_wrap i.event {border-color: #e16f00; color: #e16f00;}

/*--- responsive ---*/
@media all and (max-width: 1200px) {
    .main .con02 .swiper-slide {width: calc(33.3333% - 7px);}
}
@media all and (max-width: 1024px) {
    .main .con02 .swiper-slide {width: calc(50% - 5px);}   
}
@media all and (max-width: 767px) {
    .main .con02 .swiper-slide {width: 100%;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con03 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- layout ---*/
.main .con03 .tabCon_wrap {margin-top: 20px;}
.main .con03 .flex_wrap {display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;}
.main .con03 .flex_wrap .left {width: calc(65% - 10px); align-self: stretch; max-height: 680px; height: auto;}
.main .con03 .flex_wrap .right {width: calc(35% - 10px);}
/*--- left ---*/
.main .con03 .totalBtn {display: block; height: 100%; position: relative;}
.main .con03 .totalBtn img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main .con03 .totalBtn .txt_box {position: absolute; bottom: 0; left: 0; color: #fff; padding: 36px; box-sizing: border-box;}
.main .con03 .totalBtn .txt_box > * {display: inline-block; vertical-align: baseline;}
.main .con03 .totalBtn .txt_box h5 {font-weight: normal; font-family: var(--sub-font); font-size: var(--fz-24); line-height: 1.25em; letter-spacing: 0;}
.main .con03 .totalBtn .txt_box i {filter: invert(1); margin-left: 20px;}
/*--- right ---*/
.main .con03 .item_list {gap: 10px; flex-wrap: wrap;}
.main .con03 .item_list a {width: calc(50% - 5px);}
.main .con03 .item_list .txt_box {padding: 5px; box-sizing: border-box;}
.main .con03 .item_list .title h5 {font-size: var(--fz-18);}
.main .con03 .item_list .title p {font-size: var(--fz-16);  min-height: 1.6em;}
.main .con03 .item_list .price_wrap {display: flex; align-items: first baseline;}
.main .con03 .item_list .price span {font-size: var(--fz-18);}
/*--- responsive ---*/
@media all and (max-width: 1024px) {
    .main .con03 .item_list a {width: calc(50% - 5px);}
    .main .con03 .totalBtn .txt_box {padding: 20px;}
}
@media all and (max-width: 767px) {
    .main .con03 .flex_wrap .left,
    .main .con03 .flex_wrap .right {width: 100%;}
    .main .con03 .tabBtn_wrap .type01 {min-width: 130px; padding: 0 10px; box-sizing: border-box;}



}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con04 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- layout ---*/
.main .con04 .flex_wrap {display: flex; flex-wrap: wrap; max-width: 1200px; margin: auto;}
.main .con04 .flex_wrap a {display: block; width: 50%; aspect-ratio: 1/1; position: relative; transition: 0.25s;}
/*--- common --- */
.main .con04 a img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main .con04 a .txt_box {position: absolute; bottom: 0; left: 0; width: 100%; padding: 50px; box-sizing: border-box;}
.main .con04 a .txt_box h5 {font-weight: 600; font-family: var(--sub-font); font-size: var(--fz-34); letter-spacing: 0; line-height: 1.3em;}
.main .con04 a .txt_box h5 span {color: #666; text-decoration: underline; text-underline-offset: 10px;}
.main .con04 a .txt_box p {font-weight: 300; font-size: var(--fz-16); line-height: 1.625em; color: #666; margin-top: 35px;}
.main .con04 a:nth-child(even) .txt_box {text-align: right;}
/*--- hover ---*/
.main .con04 .flex_wrap a:hover {transform: translateY(65px); box-shadow: 5px 9px 54.28px 4.72px rgba(34, 34, 34, 0.14);}
/*--- responsive ---*/
@media all and (max-width: 1200px) {
    .main .con04 a .txt_box {padding: 10px;}
}
@media all and (max-width: 767px) {
    .main .con04 .flex_wrap a:hover {transform: unset;}
    .main .con04 a .txt_box p {display: none;}

    .main .con04 a .txt_box h5{font-size: 21px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con05 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con05 .item_list {gap: 20px;}
.main .con05 .item_list li {width: calc(50% - 10px); cursor: pointer;}
.main .con05 .item_list li .img_box {aspect-ratio: 1/0.58;}
.main .con05 .item_list li .txt_box {padding: 25px 30px; display: flex; align-items: center;}
.main .con05 .item_list li .txt_box .title {width: 100%;}
.main .con05 .item_list li .txt_box .title h5 {overflow: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main .con05 .item_list li .txt_box .title h5 span {font-size: var(--fz-18); font-weight: 400;}
.main .con05 .item_list li .txt_box .button {width: 110px; display: flex; align-items: center; justify-content: space-between; font-weight: 300; font-family: var(--sub-font); font-size: var(--fz-16); color: #999; cursor: pointer;}
.main .con05 .item_list li .txt_box .button i {display: block; width: 13px; height: 1px; background-color: #999;}

@media all and (max-width: 767px) {
    .main .con05 .item_list li .txt_box {padding: 5px 10px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con06 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con06 {overflow: hidden;}
.main .con06 .m {display: none;}
.main .con06 .video_box {width: 100%; max-width: 1000px; margin: auto; aspect-ratio: 1/0.56;}
.main .con06 .video_box video {width: 100%; height: 100%; object-fit: cover; object-position: center center;}

.main .con06 .swiper-slide {width: 100%; aspect-ratio: 16/9; max-width: 650px; margin-right: 100px; position: relative;}
.main .con06 .swiper-slide video {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.main .con06 .swiper-slide::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8);}
.main .con06 .swiper-slide-active::before {display: none;}
.main .con06 .swiper-initialized .swiper-slide {margin-right: 100px; margin-right: 0;}
.main .con06 .swiper-button-next, 
.main .con06 .swiper-button-prev {color: #0a2a3b;}
.main .con06 .swiper-button-next {right: calc(calc(100% - 750px) / 2); transform: translateX(50%);}
.main .con06 .swiper-button-prev {left: calc(calc(100% - 750px) / 2); transform: translateX(-50%);}

@media all and (max-width: 1200px) {
    .main .con06 .swiper {padding: 0 50px;}
    .main .con06 .swiper-button-next {right: 0; transform: unset;}
    .main .con06 .swiper-button-prev {left: 0; transform: unset;}
}

@media all and (max-width: 767px) {
    .main .con06 .swiper {padding: 0; max-width: unset;}
    .main .con06 .pc {display: none;}
    .main .con06 .m {display: flex;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con07 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con07 {overflow: hidden;}
.main .con07 .swiper {overflow: visible;}
.main .con07 .hide {display: none;}
.main .con07 .item_list a {width: calc(20% - 8px); margin-right: 10px;}
/*--- responsive ---*/
@media all and (max-width: 1024px) {
    .main .con07 .item_list a {width: calc(50% - 5px);}
}
@media all and (max-width: 767px) {
    .main .con07 .item_list a {width: 100%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main con08 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main .con08 {padding: 70px 0; box-sizing: border-box;}
.main .con08 .flex_wrap {display: flex; align-items: center;}
.main .con08 .flex_wrap > * {width: 50%;}
.main .con08 ul {display: flex; justify-content: space-around;}
.main .con08 ul li a > * {display: inline-block; vertical-align: middle;}
.main .con08 ul li i {margin-right: 15px; filter: brightness(0) saturate(100%) invert(12%) sepia(25%) saturate(2100%) hue-rotate(163deg) brightness(95%) contrast(94%);}
.main .con08 ul li span {font-weight: 600; font-size: var(--fz-20); color: #15262f;}

@media all and (max-width: 1024px) {
    .main .con08 ul {flex-direction: column; align-items: center; gap: 30px;}
}

@media all and (max-width: 767px) {
    .main .con08{padding: 40px 0;}
    .main .con08 .main_tit {text-align: center;}
    .main .con08 .flex_wrap {flex-wrap: wrap; gap: 40px;}
    .main .con08 .flex_wrap > * {width: 100%;}
}