/* BASIC css start */
/* 섹션 공통 */
section{margin:0px auto 50px;letter-spacing:-0.07em}
section.section_title{padding:50px 0 20px; margin:0px;text-align: center;font-family: 'Noto Sans KR', sans-serif;}
section.section_title > h2{text-align: center; color: #000; font-size: 22px; font-weight: 700; margin-bottom: 10px;}
section.section_title > p.tit{  font-size: 13px; color: #80888f;  font-weight: 400;}
section.section_title > div.sec_titbar{background-color:#a22d1e; width:15%; height:5px;margin:10px auto 0px;}


/* sec1 */
#sec1{position: relative; margin-bottom:0; margin-top:-73px;}
#sec1 .swiper{}
#sec1 .swiper ul{width: 100%;}
#sec1 .swiper ul li{width: 100%;}
#sec1 .swiper ul li a{display: block; width: 100%; position: relative;}
#sec1 .swiper ul li a img{width: 100%; }
#sec1 .swiper ul li a ul.text_cont{position: absolute; top: 25%; left: 50%;transition: left .5s, opacity .6s; transform:translate(-50%,-50%)}
#sec1 .swiper ul li a ul.text_cont li{position: relative;  opacity: 0;font-family: 'Noto Sans KR', sans-serif; color: #fff; line-height: 1.2; text-align:center;top:50px; line-height:1.3}
#sec1 .swiper ul li a ul.text_cont li:nth-child(1){ font-size: 9vw; font-weight: 600; transition: opacity 1s, top .5s;letter-spacing:-0.1em}
#sec1 .swiper ul li a ul.text_cont li:nth-child(2){ font-size: 7vw; font-weight: 300;transition: opacity 1.5s, top .8s;letter-spacing:-0.1em}
#sec1 .swiper ul li a ul.text_cont li:nth-child(3){ font-size: 4vw; margin-top: 7px; transition: opacity 2s, top 1s; line-height:1.6 }
#sec1 .swiper ul li a ul.text_cont.show li{opacity:1; top:0}
#sec1 .swiper_btn_prev{ position:absolute; left:5% !important; top:50%; transform:translateY(-50%); z-index:4; cursor:pointer}
#sec1 .swiper_btn_next{position:absolute; right:5%  !important; top:50%; transform:translateY(-50%);z-index:4; cursor:pointer}
#sec1 .swiper_btn_prev img{transform:scale(.66); transform-origin:left center}
#sec1 .swiper_btn_next img{transform:scale(.66); transform-origin:right center}
#sec1 .swiper-pagination{transform:translateY(-10px)}
#sec1 .swiper-pagination-bullet{background-color:#fff !important; margin:0 6px;}
#sec1 .swiper-pagination-bullet-active{background-color:#fff !important;}

#icon2023{
    display: flex;
    justify-content: space-between;
    padding:15px 10px 30px;
    box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2) inset, 0 10px 10px -10px rgba(0, 0, 0, 0) inset;
}
#icon2023 li{width:33.33%; text-align:center;}

/*리뷰이벤트*/
.slider {
        width: 100%;
        margin: 0px auto 30px;
    }
    
.slider img:hover{
box-shadow: 6px 6px 6px #e6e6e6;

}
.slider img{
box-shadow: 6px 6px 6px #f7f7f7;

}
    .slick-slide {
      margin: 0px 10px;
    }

    .slick-slide img {
      width: 75vw;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: 1;
    }
    
    .slick-active {
      opacity: 1;
    }

    .slick-current {
      opacity: 1;
    }

/*u_zone*/
.u_zone {
    display: flex;
    width: 100%;
    position: relative;
    border-top:1px solid #e6e6e6;
    border-bottom:1px solid #cccccc;
    
}
.u_zone > div > div:nth-child(2){
    top:140px; 
    left:460px; 
    font-size:35px;
    background-color:red;
}

.u_zone > div{
    position: relative;
}


.zone_animated {
    opacity: 0; /* 초기 상태는 안보이게 설정 */
    position: absolute; /* 배경 이미지 위에 위치하게 설정 */
    transition: opacity 1s, transform 2s; /* 투명도 및 위치 변화에 대한 애니메이션 */
}

.u_zone_btn{
    background-image: url('http://uskinmall.img6.kr/2023renewal/202310renew/btn_bg.jpg');
    background-repeat: repeat-x;
    padding:7px 15px;
    font-size:18px;
    text-align:center;
    font-weight:700;
    color:#fff;
    z-index:10;
    position:absolute;
    top:32%;
    left: 50%;
    width:80%;
    transform: translateX(-50%);
    cursor: pointer;
}
.u_zone_btn:hover{
    background-image: url('http://uskinmall.img6.kr/2023renewal/202310renew/btn_bg_hover.jpg');
    background-repeat: repeat-x;
}

@keyframes moveLeftToRight {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes moveRightToLeft {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* sec2 */
#sec2{}

#sec2 ul.uskin_best{
    display: flex;
    flex-wrap: wrap;
    width:100%;
}
#sec2 ul.uskin_best li{
    width:50%;
    padding:10px;
}
#sec2 ul.uskin_best li img.best_img{
    width:100%
}
#sec2 ul.uskin_best li p.prdname{
    font-family: 'Noto Sans KR', sans-serif;
    font-size:15px;
    padding: 10px 0;
    font-weight:500;
}
#sec2 ul.uskin_best li p.prdprice{
    font-family: 'Red Hat Display', sans-serif;
    font-weight:700;
    font-size:12px;
    margin-bottom: 20px;
}
#sec2 ul.uskin_best li p.prdprice strike {
    color:#ccc;
}


.prodInfo {
    margin-top:10px;
    /*
    background:#f7f7f9;
    padding:10px;
    */
}



/* sec5_2 */
#sec5_2{width: 100%;

}
#sec5_2 .sec_inner{position:relative }
#sec5_2 h2{}
#sec5_2 .sec5_2_prd{width: 100%;   position: relative;}
#sec5_2 .sec5_2_prd iframe{}
#sec5_2 .sec5_2_prd .prd_sec{height: 100%; padding:3%}
#sec5_2 .sec5_2_prd .prd_sec ul{height: 100%; width:100%; }
#sec5_2 .sec5_2_prd .prd_sec ul>li{width: 100% !important;border:1px solid #ebebeb;display:flex; height:auto !important }
#sec5_2 .sec5_2_prd .prd_sec ul>li:first-child{margin-bottom:15px}
#sec5_2 .sec5_2_prd .prd_sec ul>li .tumb{float: left; width:35%;}
#sec5_2 .sec5_2_prd .prd_sec ul>li .tumb a{display: block;width: 100%; }
#sec5_2 .sec5_2_prd .prd_sec ul>li .tumb a img{width: 100%; height: 100%; object-fit: cover;}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info{float: left;width: 65%; background-color: #fff;display:flex; justify-content:center; flex-direction:column; padding:10px 15px!important }
#sec5_2 .sec5_2_prd .prd_sec ul>li .info p{margin-bottom:0 !important}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdname{border-bottom:1px solid #ebebeb; font-size:14px; padding-bottom:8px; margin-bottom:8px !important }
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdetc{font-size:13px}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdprice{margin-top:16px}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdprice span{font-size:15px}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdprice .price{font-size:14px}
#sec5_2 .sec5_2_prd .prd_sec ul>li .info .prdprice strike{font-size:13px}
#sec5_2 .swiper-horizontal>.swiper-pagination-bullets, #sec5_2 .swiper-pagination-bullets.swiper-pagination-horizontal, #sec5_2 .swiper-pagination-custom, #sec5_2 .swiper-pagination-fraction{bottom:-25px !important}
#sec5_2 .swiper-pagination-bullet{background-color:#eee !important; opacity:.8 !important }
#sec5_2 .swiper-pagination-bullet-active{background-color:#e4e1dd !important; opacity:1 !important}

.youtube-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    width: 100%;
    background: #000;
}

.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




.list_category1 {
    margin: 0 auto;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
    padding: 40px 10px 20px 10px;
    width:100%;
}

.list_category1 .meta-banner {
    padding:0 5px;
    width:calc(20% - 3px);
    display:inline-block;
}

.list_category1 .meta-banner a {
    display: block;
    text-align: center;
}

.list_category1 .meta-banner a .imgtag {
    margin-bottom: 10px;
    transition: all 0.4s;
}

.list_category1 .meta-banner a .imgtag img {
    border-radius:115px;
    width:100%;
}

.list_category1 .meta-banner a .title {
    font-size: 11px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.32px;
    margin-bottom: 15px;
}

.list_category1 .meta-banner a .imgtag:hover {
    transform: scale(1.1);
}
/* BASIC css end */