#wrap {}

/* ======================================= main start ====================== */
#wrap main {}
#wrap main .fab {
    width: 59px; height: 58px; line-height: 1.2;
    background-color: #fff;
    border-radius: 50px;
    position: fixed; right: 20px; bottom: 40px; z-index: 999;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
}
#wrap main .fab em {
    font-weight: 700; color: #5188C1;
}
/* ---------------------------------------1. hero bnr----------------------- */
#wrap main .hero_bnr {
/*     background-image: url(../images/common/hero_bnr1.jpg); height: 100vh; 
    background-size: cover; background-position: center;
    position: relative; */
}
#wrap main .hero_bnr .swiper-wrapper {}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide {}
#wrap main .hero_bnr .swiper-wrapper .slide1 {
    background-image: url(../images/common/hero_bnr1.jpg); height: 100vh; 
    background-size: cover; background-position: center;
    position: relative;
}#wrap main .hero_bnr .swiper-wrapper .slide2 {
    background-image: url(../images/common/hero_bnr2.jpg); height: 100vh; 
    background-size: cover; background-position: center;
    position: relative;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text {
    position: absolute; left: 100px; top: 330px;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text > * {color: #fff;}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text p:first-child {
    font-size: 1.25rem; font-weight: 700;
    margin-bottom: 11px;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text p {
    font-size: 1.75rem; font-weight: 500;
    padding-left: 2px;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text h1 {
    font-size: 2.63rem; font-weight: 700;
    line-height: 1.5;
    margin-bottom: 9px;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text h2 {
    font-size: 2.38rem; font-weight: 200;
    margin-bottom: 58px;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text  .go_shop {border-bottom: 1px solid #fff;}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide .text  .go_shop img {}
#wrap main .hero_bnr .bar {
    width: 500px; left: 50%; transform: translateX(-50%); bottom: 15px; height: 3px; background-color: transparent;
}
#wrap main .hero_bnr .swiper-scrollbar-drag {background-color: #fff;}
#wrap main .hero_bnr .next {}
#wrap main .hero_bnr .next svg {color: #fff;}
/* ---------------------------------------1. hero bnr----------------------- */

/* ---------------------------------------2. new----------------------- */
#wrap main .content1 {
    padding: 100px 0;
    display: flex; flex-flow: row nowrap;
}
#wrap main .content1 .left_photo {
    width: 890px; position: relative; z-index: 2;
}
#wrap main .content1 .left_photo img {width: 100%;}
#wrap main .content1 .right_info {
    display: flex; flex-flow: column nowrap; text-align: center;
    margin: 0 auto;
}
#wrap main .content1 .right_info .text {
    position: relative; z-index: 111;
}
#wrap main .content1 .right_info .text li {}
#wrap main .content1 .right_info .text li p {}
#wrap main .content1 .right_info .text li:nth-child(1) {
    background-color: #B4DAF7; padding: 2px 10px; width: max-content; margin: 6px  auto;

}
#wrap main .content1 .right_info .text li:nth-child(1) p {
    font-weight: 500; line-height: 1.2;
}
#wrap main .content1 .right_info .text li:nth-child(2) p {
    font-size: 1.63rem; font-weight: 500;
    margin-bottom: 6px;
}
#wrap main .content1 .right_info .text li:nth-child(3) p {
    line-height: 1.35;
    font-size: 1.19rem; font-weight: 200;
    margin-bottom: 11px;
}
#wrap main .content1 .right_info .text li:nth-child(4) p {
    font-size: 0.69rem; color: #848484;
}
#wrap main .content1 .right_info .item_info {
    display: flex; flex-flow: row nowrap; gap: 30px;
}
#wrap main .content1 .right_info .item_info .item {}
#wrap main .content1 .right_info .item_info .item:hover img {
    scale: 1.07; transition: 0.3s;
}
#wrap main .content1 .right_info .item_info .item img {
    width: 100%; position: relative; z-index: 1;
}
#wrap main .content1 .right_info .item_info .item h1 {
    margin: 6px 0 9px; font-weight: 500;
    position: relative; z-index: 10;
}
#wrap main .content1 .right_info .item_info .item p {
    font-weight: 300; color: #515151;
    margin-bottom: 57px;
}
#wrap main .content1 .right_info .buy_btn {
    border: 1px solid #a3a3a3;
    padding: 6px 15px; display: inline-block;
    width: max-content; margin: 0 auto;
    color: #1D1D1D; font-weight: 300; font-size: 0.88rem;
}
/* ---------------------------------------2. new end----------------------- */

/* ---------------------------------------3. best start----------------------- */
#wrap main .best_sellers {position: relative;}
#wrap main .best_sellers h1 {
    padding: 100px 0 0; font-weight: 300; font-size: 2.25rem; 
    margin-bottom: 15px; text-align: center;
}
#wrap main .best_sellers > p {
    margin-bottom: 49px;
    font-weight: 300; text-align: center;
}
#wrap main .best_sellers .best {width:100%;}
#wrap main .best_sellers .best .swiper-wrapper {}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide {}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a {}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a img {width: 100%; margin-bottom: 6px;}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a h2 {margin-bottom: 4px;}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a > p {
    font-weight: 300; font-size: 0.75rem; color: #515151;
    margin-bottom: 8px;
}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price {
    display: flex; flex-flow: row nowrap; gap: 6px; margin-bottom: 110px;
}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li {}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li p {font-size: 0.94rem;}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li:nth-child(1) p {
    color: #34A5DE; font-weight: 600;
}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li:nth-child(2) p {
    font-weight: 500;
}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li:nth-child(3) p {
    color: #A1A1A1; font-weight: 300; text-decoration: line-through; 
}
#wrap main .best_sellers .best .swiper-wrapper .swiper-slide a .price li p {}
#wrap main .best_sellers .show_btn {
    display: flex; flex-flow: row nowrap; justify-content: center;
    margin-bottom: 104px;
}
#wrap main .best_sellers .bar {
    width: 485px; left: 50%; 
    transform: translateX(-50%); bottom: 10%;
}
#wrap main .best_sellers .swiper-scrollbar-drag {
    height: 2px; background-color: #404040;
}
#wrap main .best_sellers .swiper-scrollbar-horizontal {
    height: 2px; background-color: #eaeaea;
}
#wrap main .best_sellers .prev {left: -3px;}
#wrap main .best_sellers .next {right: -3px;}
#wrap main .best_sellers .prev,
#wrap main .best_sellers .next {transform: scale(0.7); top: 50%;}
#wrap main .best_sellers .prev svg,
#wrap main .best_sellers .next svg {color: #000;}
/* ---------------------------------------3. best End----------------------- */

/* ---------------------------------------4. advertise start----------------------- */
#wrap main .advertise {padding-bottom: 150px;}
#wrap main .advertise .advertise_bnr {}
#wrap main .advertise .advertise_bnr .swiper-wrapper {}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide {
    background-size: cover; height: 496px; background-position: center;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box {
    padding: 48px 87px 0;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box li:nth-child(1) p {
    background-color: #50815D; color: #fff; display: inline-block;
    padding: 4px 12px; font-size: 0.94rem; font-weight: 500;
    margin-bottom: 6px;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box li h1 {
    font-size: 2rem; font-weight: 500;
    margin-bottom: 10px;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box li h2 {
    color: #848484; font-size: 0.81rem;
    margin-bottom: 15px; 
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box li:nth-child(4) p {
    font-weight: 300; line-height: 1.4; font-size: 1.06rem;
    margin-bottom: 28px;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide1 .text_box li:nth-child(4) p em,
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide4 .text_box li:nth-child(4) p em {
    color: #50815D;font-weight: 600;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box .bg {}
#wrap main .advertise .advertise_bnr .swiper-wrapper .swiper-slide .text_box .more_btn {
    margin-bottom: 31px; border: 1px solid #5C5C5C; color: #333;
}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide1 {background-image: url(../images/common/best_bg1.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide2 {background-image: url(../images/common/best_bg2.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide2 .text_box li:nth-child(1) p {background-color: #CD8A91;}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide3 {background-image: url(../images/common/best_bg3.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide3 .text_box li:nth-child(1) p {background-color: #F3BB23;}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide4 {background-image: url(../images/common/best_bg1.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide5 {background-image: url(../images/common/best_bg2.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide5 .text_box li:nth-child(1) p {background-color: #CD8A91;}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide6 {background-image: url(../images/common/best_bg3.jpg);}
#wrap main .advertise .advertise_bnr .swiper-wrapper .slide6 .text_box li:nth-child(1) p {background-color: #F3BB23;}
/* ---------------------------------------4. advertise End----------------------- */
/* ---------------------------------------5. solution Start----------------------- */
#wrap main .Solution {text-align: center;}
#wrap main .Solution h1 {
    font-size: 2.25rem; font-weight: 300;
    margin-bottom: 15px;
}
#wrap main .Solution p {
    font-weight: 300; 
    margin-bottom: 60px;
}
#wrap main .Solution .type_box {
    display: flex; flex-flow:row nowrap; justify-content: center; gap: 18px;
    padding-bottom: 50px;
}
#wrap main .Solution .type_box li {}
#wrap main .Solution .type_box li:hover a {
    background-color: #333; transition: 0.25s; color: #fff;
}
#wrap main .Solution .type_box li a {
    border: 1px solid #C2C2C2;
    display: block; background-color: #fff;
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 0.94rem; color: #242424;
}
#wrap main .Solution .type_box li a.active {
    background-color: #333; transition: 0.25s; color: #fff;
}
#wrap main .Solution .solution_container {
    display: flex; flex-flow: row nowrap; padding: 50px 196px 30px; gap: 50px;
}
#wrap main .Solution .solution_container.pore {display: none;}
#wrap main .Solution .solution_container .left_wrap {}
#wrap main .Solution .solution_container .left_wrap .left_img {
    width: 614px; height: 573px; overflow: hidden; 
    border-radius: 1px;
}
#wrap main .Solution .solution_container .left_wrap .left_img img {width: 100%;}
#wrap main .Solution .solution_container .right_wrap {
    display: flex; flex-flow: column nowrap; justify-content: flex-end;
    /* height: 500px; */
}
#wrap main .Solution .solution_container .right_wrap .text_box {}
#wrap main .Solution .solution_container.pore .right_wrap .text_box dt {
    background-color: #704A33;
}
#wrap main .Solution .solution_container .right_wrap .text_box dt {
    font-size: 0.94rem; font-weight: 500; background-color: #CD8A91; display: inline-block;
    padding: 2px 10px; color: #fff; margin-bottom: 8px;
}
#wrap main .Solution .solution_container .right_wrap .text_box dd {}
#wrap main .Solution .solution_container .right_wrap .text_box dd:nth-child(2) {
    font-size: 1.63rem; font-weight: 500; margin-bottom: 6px;
}
#wrap main .Solution .solution_container .right_wrap .text_box dd:nth-child(3) {
    font-size: 1.19rem; font-weight: 200; line-height: 1.5; margin-bottom: 6px;
}
#wrap main .Solution .solution_container.pore .right_wrap .text_box dd:nth-child(4) {color: #704A33;}
#wrap main .Solution .solution_container .right_wrap .text_box dd:nth-child(4) {
    font-size: 1.19rem; font-weight: 500; color: #E46976; margin-bottom: 10px;
}
#wrap main .Solution .solution_container .right_wrap .item_box {
    margin-top: 60px; position: relative;
}
#wrap main .Solution .solution_container .right_wrap .item_box .solution_swiper2,
#wrap main .Solution .solution_container .right_wrap .item_box .swiper {width: 864px;} 
#wrap main .Solution .solution_container .right_wrap .item_box .solution_swiper .swiper-wrapper {}
#wrap main .Solution .solution_container .right_wrap .item_box .solution_swiper .swiper-wrapper .swiper-slide {}
#wrap main .Solution .solution_container .right_wrap .item_box .solution_swiper .swiper-wrapper .swiper-slide a {
    display: inline-block; 
}
#wrap main .Solution .solution_container .right_wrap .item_box .swiper .swiper-wrapper .swiper-slide a img {
    width: 100%; margin-bottom: 6px;
}
#wrap main .Solution .solution_container .right_wrap .item_box .swiper .swiper-wrapper .swiper-slide a h1 {
    font-size: 1rem; font-weight: 400;
}
#wrap main .Solution .solution_container .right_wrap .item_box .swiper .swiper-wrapper .swiper-slide a p {
    font-size: 0.75rem; font-weight: 300; color: #515151;
}
#wrap main .Solution .solution_container .right_wrap .item_box .prev {
    display: block; transform: scale(-1);
    left: -40px; top: 40%;
}
#wrap main .Solution .solution_container .right_wrap .item_box .next {
    display: block;
    right: -40px; top: 40%;
}
#wrap main .Solution .solution_container .right_wrap .item_box .prev svg,
#wrap main .Solution .solution_container .right_wrap .item_box .next svg {
    transform: scale(0.6); color: #111;
}
#wrap main .Solution  .show_btn {margin-bottom: 120px;}
/* ---------------------------------------5. solution End----------------------- */

/* ---------------------------------------6. video Start----------------------- */
#wrap main .video_wrap .advertise_video {
    width:100%; margin-bottom: 120px; max-height: 600px;object-fit: cover;} 
/* ---------------------------------------6. video End----------------------- */

/* ---------------------------------------7. inside Start----------------------- */
#wrap main .inside_hanyul {
    text-align: center; margin-bottom: 150px;
}
#wrap main .inside_hanyul .title {
    font-size: 2.25rem; font-weight: 300; margin-bottom: 20px;
}
#wrap main .inside_hanyul p {
    font-weight: 300; 
}
#wrap main .inside_hanyul .show_btn {
    margin-bottom: 60px; transform: translateX(730px);
}
#wrap main .inside_hanyul .bnr_container {position: relative; width: 100%; padding: 0 188px;}
#wrap main .inside_hanyul .bnr_container .inside_wrap {
    width: 100%;
}
#wrap main .inside_hanyul .bnr_container .inside_wrap .swiper-wrapper {}
#wrap main .inside_hanyul .bnr_container .inside_wrap .swiper-wrapper .swiper-slide {}
#wrap main .inside_hanyul .bnr_container .inside_wrap .swiper-wrapper .swiper-slide img {width: 100%;}
#wrap main .inside_hanyul .bnr_container .prev {
    left: 120px; transform: scale(-1);
}
#wrap main .inside_hanyul .bnr_container .next {right: 120px;}
#wrap main .inside_hanyul .bnr_container .prev svg,
#wrap main .inside_hanyul .bnr_container .next svg {
    transform: scale(0.6); color: #111;
}
#wrap main .inside_hanyul .bnr_container .swiper-pagination {bottom:-30px;}
#wrap main .inside_hanyul .bnr_container .swiper-pagination .swiper-pagination-bullet-active {background: #4A4A4A;}
/* ---------------------------------------7. inside End----------------------- */
/* ---------------------------------------8. instagram Start----------------------- */
#wrap main .instagram {text-align: center;}
#wrap main .instagram .title {
    font-size: 2.25rem; font-weight: 300; margin-bottom: 27px;
}
#wrap main .instagram p {
    font-weight: 300; margin-bottom: 12px;
}
#wrap main .instagram > a {
    font-size: 0.88rem; font-weight: 400; color: #434343; margin-bottom: 50px; display: block;
}
#wrap main .instagram .img_container {
    display: flex; flex-flow: row nowrap; gap: 5px; margin-bottom: 5px;
}
#wrap main .instagram .img_container a {
    width:calc(100% / 7);
}
#wrap main .instagram .img_container a:hover img {
    scale: 1.04; transition: 0.3s;
}
#wrap main .instagram .img_container a img {width: 100%;}
/* ---------------------------------------8. instagram End----------------------- */
/* ---------------------------------------9. brandstory Strat----------------------- */
#wrap main .brand_story {
    text-align: center; padding: 150px 0;
}
#wrap main .brand_story p {
    font-size: 1.88rem; font-weight: 400; line-height: 1.6; margin-bottom: 45px;
}
#wrap main .brand_story .brand_btn {
    padding: 10px 37px; border: 1px solid #a3a3a3; font-size: 0.88rem; color: #1D1D1D; font-weight: 500;
}
#wrap main .brand_story .brand_btn:hover {background-color: #333; transition: 0.25s; color: #fff;}
/* ---------------------------------------9. brandstory End----------------------- */
/* =======================================footer start====================== */
#wrap footer {
    padding: 47px 150px 97px;
    background: #333333;
}
#wrap footer .footer_contents {
    display: flex; flex-flow: row nowrap; justify-content: space-between; 
}
#wrap footer .footer_contents .footer_left {}
#wrap footer .footer_contents .footer_left p {
    font-size: 0.81rem; font-weight: 500; margin-bottom: 20px; color: #fff;
}
#wrap footer .footer_contents .footer_left .business_regist_info {}
#wrap footer .footer_contents .footer_left .business_regist_info li {
    font-size: 0.81rem; margin-bottom: 8px;
    color: #DFDFDF;
}
#wrap footer .footer_contents .footer_left .business_regist_info li:last-child {
    margin-bottom: 0; font-size: 0.88rem; font-weight: 700; margin-top: 10px;
    color: #fff;
}
#wrap footer .footer_contents .footer_left .business_regist_info li:last-child span {
    font-size: 0.81rem; font-weight: 500;
    color: #DFDFDF;
}
#wrap footer .footer_contents .footer_right {
    display: flex; flex-flow: row nowrap; text-align: end;
}
#wrap footer .footer_contents .footer_right .category {width: 190px;}
#wrap footer .footer_contents .footer_right .category .title a {
    font-size: 0.88rem; color: #fff; font-weight: 500; 
    margin-bottom: 20px; display: block;
}
#wrap footer .footer_contents .footer_right .category .title a span {color: #fff; display: none;} 
#wrap footer .footer_contents .footer_right .category dd a {
    font-size: 0.88rem; font-weight: 300; color: #C3C3C3;
    margin-bottom: 16px; display: block;
}
#wrap footer > p {
    text-align: center; font-size: 0.63rem; color: #fff; font-weight: 300;
    transform: translateY(90px);
}