/* =============================================== main */
#wrap main {}
/* ================================================ hero_bnr */
#wrap main .hero_wrap {}
#wrap main .hero_wrap .hero_bnr {
    height:calc(100vh - 35px);
}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper {}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .swiper-slide {background-size: cover; background-position: center;}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .swiper-slide a {display: block; height:100%;}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .swiper-slide a .hero_txt{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .swiper-slide a .hero_txt p {color: #fff; font-weight: 500; line-height: 1.2; text-align: right;}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .swiper-slide a .hero_txt h1 {color: #fff; font-size: 2.38rem; font-weight: 700; line-height: 1.3; text-align: center;}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .slide1 {background-image: url(../images/hero_bnr1_.jpg);}
#wrap main .hero_wrap .hero_bnr .swiper-wrapper .slide2 {background-image: url(../images/hero_bnr2_.jpg);}
#wrap main .hero_wrap .hero_bnr .pg {bottom:38px; top:auto; width:calc(100% - 500px); left:50%; transform: translateX(-50%); background-color: rgba(255,255,255,0.4); height:2px;}
#wrap main .hero_wrap .hero_bnr .pg .swiper-pagination-progressbar-fill {background-color: rgba(0, 45, 112,0.5);}
/* ============================================================================================================= 공통(new~location) */
#wrap main .container {margin: 200px 120px 0 120px;}
#wrap main .container .title_wrap {
    margin: 0 0 20px ;
    display: flex; justify-content: space-between;
}
#wrap main .container .title {font-size: 2.5rem; margin: 0 0 20px; font-family: 'Escoredream','pretendard',sans-serif; font-weight: 600;}
#wrap main .container .all_view {font-size: 0.94rem; display: flex; align-items: center; gap:15px;}
#wrap main .container .all_view img {width:16px;}
#wrap main .container .contents_wrap {}
#wrap main .container .contents_wrap .product {}
#wrap main .container .contents_wrap .product a {overflow: hidden;}
#wrap main .container .contents_wrap .product a:hover img {transform: scale(1.2);}
#wrap main .container .contents_wrap .product a img {width: 100%; height: 100%; object-fit: cover;}
#wrap main .container .contents_wrap .product .product_txt {}
#wrap main .container .contents_wrap .product .product_txt h1 {font-size: 0.94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#wrap main .container .contents_wrap .product .product_txt > p {font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#wrap main .container .contents_wrap .product .product_txt .price_wrap {font-size: 1rem; display: flex; gap:10px; align-items: center;}
#wrap main .container .contents_wrap .product .product_txt .price_wrap .sale {color: #002D72; font-weight: 500;}
#wrap main .container .contents_wrap .product .product_txt .price_wrap .cost {font-size: 0.75rem; color:#c3c3c3;}
#wrap main .container .contents_wrap .product .product_txt .price_wrap .pay {font-weight: 500;}
#wrap main .container .contents_wrap .product .product_txt .out_stock {
    font-size: 0.94rem; color:#fff; background-color: #c3c3c3; padding: 3px 10px; width: max-content; border-radius: 5px;
}
/* ======================================================================================== new */
#wrap main .new {margin: 150px 120px 0;}
#wrap main .new .title_wrap {}
#wrap main .new .title_wrap .title {margin: 0;}
#wrap main .new .title_wrap .all_view {}
#wrap main .new .title_wrap .all_view img {}
#wrap main .new .new_bnr {
    display: block; margin: 0 0 35px 0;
    max-width: 1680px; height: 500px;
    position: relative;
}
#wrap main .new .new_bnr video {width: 100%; height: 100%; object-fit: cover;}
#wrap main .new .new_bnr .new_txt {position: absolute; left: 50px; bottom:50px;}
#wrap main .new .new_bnr .new_txt > * {color: #fff;}
#wrap main .new .new_bnr .new_txt h1 {font-size: 2.38rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px;}
#wrap main .new .new_bnr .new_txt p {font-weight: 500;}
#wrap main .new .contents_wrap {
    display: flex;
    max-width: 1680px;
    gap: 60px;
}
#wrap main .new .contents_wrap .product {display: flex; flex-flow: column nowrap; position: relative; flex:1; min-width: 0;}
#wrap main .new .contents_wrap .product:not(:last-child)::after {
    content: ''; background-color: #d9d9d9;
    width: 1px; height: 100%; display: block;
    position: absolute; right:-30px; top:0;
}
#wrap main .new .contents_wrap .product a {
    display: block; height: 300px;
    margin: 0 0 30px;}
/* #wrap main .new .contents_wrap .product a img {object-fit: contain;} */
#wrap main .new .contents_wrap .product .product_txt {display: flex; flex-flow: row wrap; justify-content: space-between;}
#wrap main .new .contents_wrap .product .product_txt h1 {width:100%; margin-bottom: 15px;}
#wrap main .new .contents_wrap .product .product_txt p:nth-child(2) {width: 100px;}
#wrap main .new .contents_wrap .product .product_txt p {}
#wrap main .new .contents_wrap .product .product_txt .price_wrap {}
#wrap main .new .contents_wrap .product .product_txt .price_wrap .sale {}
#wrap main .new .contents_wrap .product .product_txt .price_wrap .cost {}
#wrap main .new .contents_wrap .product .product_txt .price_wrap .pay {}
#wrap main .new .contents_wrap .product1 {}
#wrap main .new .contents_wrap .product2 {}
#wrap main .new .contents_wrap .product3 {}
/* ======================================================================================== best */
#wrap main .best {position: relative;}
#wrap main .best .title {}
#wrap main .best .contents_wrap {}
#wrap main .best .contents_wrap .best_list {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .slide1 {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .best_img {margin: 0 0 55px;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .best_img a {display:block; height: 430px; margin: 0 0 20px; }
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .best_img a img {height:100%; width:100%; object-fit: cover;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .best_img p {font-weight: 500; line-height: 1.5;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product {
    display: grid;
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    gap:20px;
    margin: 0 0 60px;
    position: relative;
    border: #f00;
}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product:not(:last-child)::after {
    content: ''; width: 100%; height: 1px; background-color: #d9d9d9;
    position: absolute; left:0; bottom:-30px;
}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product1 {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product a {height:190px;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product a img {width: 100%; height: 100%; object-fit: cover;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt {position: relative;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt h1 {
    width: 100%; margin-bottom: 10px;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt p {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt .price_wrap {
    justify-content: flex-end; position: absolute; bottom:0; width:100%;}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt .price_wrap .sale {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt .price_wrap .cost {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt .price_wrap .pay {}
#wrap main .best .contents_wrap .best_list .swiper-wrapper .swiper-slide .product .product_txt .out_stock {position: absolute; bottom:0; right: 0;}
#wrap main .best .contents_wrap .prev {
    top:40px; bottom:auto;
    right: 61px; left:auto;
    width:16px; height: 16px;
}
#wrap main .best .contents_wrap .prev svg,
#wrap main .best .contents_wrap .next svg {color:#000;}
#wrap main .best .contents_wrap .next {
    top:40px; bottom:auto;
    right: 10px; left:auto;
    width:16px; height: 16px;
}
#wrap main .best .contents_wrap .best_pg {
    top:15.5px; bottom:auto;
    width: max-content;
    right: 36px; left: auto;
}
/* =========================================================================== brand */
#wrap main .brand {margin: 200px 0;}
#wrap main .brand .title {margin: 0 120px 20px;}
#wrap main .brand .brand_bnr {display: block; width:100%; height: 447px; position: relative;}
#wrap main .brand .brand_bnr video {width: 100%; height: 100%; object-fit: cover;}
#wrap main .brand .brand_bnr .brand_txt {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
#wrap main .brand .brand_bnr .brand_txt > * {color: #fff; text-align: center;}
#wrap main .brand .brand_bnr .brand_txt h1 {font-size: 1.75rem; font-weight: 600; font-family: 'Escoredream', 'pretendard', sans-serif;;}
#wrap main .brand .brand_bnr .brand_txt p {font-size: 1.25rem; font-weight: 500;}
/* ================================================================== stylr library */
#wrap main .style {margin: 200px 0;}
#wrap main .style .title {margin: 0 120px 20px;}
#wrap main .style .style_bg {
    min-height: 839px; padding: 59px 50px;
    background-image: url(../images/style_blur.jpg); background-attachment: fixed;
    background-position: center; background-size: cover;
    position: relative;
    display: flex; gap:5%; justify-content: center; align-items: center;
}
#wrap main .style .style_bg::before {
    content: ''; display: block; width: 100%; height: 100%;
    background: rgba(0,0,0,0.25);
    position: absolute; left:0; top:0; z-index: 100;
}
#wrap main .style .style_bg .left_photo {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: 736px;
    height: 600px;
    background-image: url(../images/style_box.jpg);
    background-position: center; background-size: cover;
}
#wrap main .style .style_bg .left_photo,
#wrap main .style .style_bg .style_right {position: relative; z-index: 200;}
#wrap main .style .style_bg .style_right {display: flex; flex-flow: column nowrap; justify-content: flex-end; gap:78px; min-width: 0; flex:1.2; height: 600px;}
#wrap main .style .style_bg .style_right .style_txt {}
#wrap main .style .style_bg .style_right .style_txt > * {color:#fff; }
#wrap main .style .style_bg .style_right .style_txt .style_title {font-size: 1.63rem; font-weight: 500; line-height: 1.5;}
#wrap main .style .style_bg .style_right .style_txt h1 {color:#fff; font-size: 1.75rem; font-weight: 600; line-height: 1.5; margin: 0 0 50px; font-family: 'Escoredream', 'pretendard', sans-serif;}
#wrap main .style .style_bg .style_right .style_txt p:nth-child(3) {font-size: 1.25rem; margin: 0 0 50px;}
#wrap main .style .style_bg .style_right .style_txt .find_style {width: max-content; color:#fff; font-weight: 500; display: flex; align-items: center; gap:20px; position: relative;}
#wrap main .style .style_bg .style_right .style_txt .find_style::after {
    content:''; display: block; width:0; height: 1px; background-color: #fff;
    position: absolute; left:0; bottom:-5px;
    transition: width 0.3s;
}
#wrap main .style .style_bg .style_right .style_txt .find_style:hover::after {width: 100%;}
#wrap main .style .style_bg .style_right .style_txt .find_style img {width: 16px;}
#wrap main .style .style_bg .style_right .style_list {width:100%; max-width: 848px; height:256px;}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper {transition-timing-function: linear}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .swiper-slide {background-size: cover; background-position: center;}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .swiper-slide a {}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .slide1 {background-image: url(../images/natural_s.jpg);}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .slide2 {background-image: url(../images/clayard.jpg);}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .slide3 {background-image: url(../images/clayard.jpg);}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .slide4 {background-image: url(../images/natural_s.jpg);}
#wrap main .style .style_bg .style_right .style_list .swiper-wrapper .slide5 {background-image: url(../images/clayard.jpg);}
/* ================================================================================================== discover */
#wrap main .discover {}
#wrap main .discover .title_wrap {}
#wrap main .discover .title_wrap .title {}
#wrap main .discover .title_wrap .all_view {}
#wrap main .discover .title_wrap .all_view img {}
#wrap main .discover .contents_wrap {position: relative;}
#wrap main .discover .contents_wrap .discover_list {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide {display: flex; gap:40px;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left {width: 50%; display: flex; flex-flow: column nowrap;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left .top_photo {margin-bottom: 20px; flex:1;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left .top_photo img {width: 100%; height: 100%; object-fit: cover;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left h2 {font-size: 1.25rem; font-weight: 500; line-height: 1.5; margin-bottom: 10px;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left p:last-child {font-size: 0.94rem;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left h2,
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_left p:last-child {text-align: center;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right {
    width: 50%;
    display: grid; gap:30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product a {display: block; height: 294px; margin-bottom: 20px;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product a img {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt h1 {width: 100%; margin-bottom: 10px;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt p {width:30%;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt .price_wrap {width:max-content;}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt .price_wrap .sale {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt .price_wrap .cost {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product .product_txt .price_wrap .pay {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product1 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product2 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product3 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .swiper-slide .contents_right .product4 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .slide1 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .slide2 {}
#wrap main .discover .contents_wrap .discover_list .swiper-wrapper .slide3 {}
#wrap main .discover .contents_wrap .pg {
    top:auto; bottom:-20px; width: 100%; height: 1px;
}
#wrap main .discover .contents_wrap .pg .swiper-pagination-progressbar-fill {background: #002D72;}
/* ================================================================================================== location */
#wrap main .location {}
#wrap main .location .title {}
#wrap main .location .contents {display: flex; flex-flow: row nowrap; gap:40px;}
#wrap main .location .contents .contents_left {width:50%;}
#wrap main .location .contents .contents_left .map_list {
    display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;
    margin-bottom: 100px; position: relative;}
#wrap main .location .contents .contents_left .map_list::after {
    content: ''; display: block; width: 100%; height: 1px; background-color: #d9d9d9;
    position: absolute; left:0; bottom: -50px;
}
#wrap main .location .contents .contents_left .map_list .list_left {}
#wrap main .location .contents .contents_left .map_list .list_left h1 {font-weight: 500; line-height: 1.5; margin-bottom: 10px;}
#wrap main .location .contents .contents_left .map_list .list_left p {font-size: 0.75rem;}
#wrap main .location .contents .contents_left .map_list .list_left p:nth-child(2) {margin-bottom: 10px; display: flex; gap:5px; align-items: center;}
#wrap main .location .contents .contents_left .map_list .list_left p:nth-child(2) img {width: 16px; height: 16px;}
#wrap main .location .contents .contents_left .map_list .list_left .list_left .visitor {}
#wrap main .location .contents .contents_left .map_list .show_loc {display: flex; align-items: center; gap:15px; padding: 5px 10px; border:1px solid #002D72;}
#wrap main .location .contents .contents_left .map_list .show_loc img {width: 16px; height: 16px;}
#wrap main .location .contents .contents_left .map_list .show_loc.active {background-color: #002D72; color:#fff;}
#wrap main .location .contents .contents_left .map_list .show_loc.active img {filter: invert();}
#wrap main .location .contents .contents_left .list1 {}
#wrap main .location .contents .contents_left .list2 {}
#wrap main .location .contents .contents_left .list3 {}
#wrap main .location .contents .contents_right {width:50%;}
#wrap main .location .contents .contents_right iframe {width: 100%;}