/* BASIC css start */
.prd-review{
    color: #ef987f;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    display: block;
    font-weight: bold;
    font-size: 12px;
    padding-top: 2px;}



/* 섹션 공통 */
section{margin-bottom:100px; width:100%; max-width: 850px; min-width: 320px; margin: 0 auto; margin-bottom: 60px;}
section .sec_inner{width:100%; margin: 0 auto; padding:0 3%}
section h2{font-family: 'Roboto','Noto Sans KR', sans-serif;font-size: 23px; font-weight: 600;text-align: center; margin-bottom:30px; letter-spacing:-0.8px; color:#1a1818;}


/* sec1 */
#sec1{position: relative;}
#sec1 .swiper{width: 100%;}
#sec1 .swiper-wrapper{width: 100%; }
#sec1 .swiper-slide{ width: 100%; }
#sec1 .swiper-slide img{width:100%;}

#sec1 .swiper-pagination-bullet{background-color:#fff !important; opacity:1 !important}
#sec1 .swiper-pagination-bullet-active{background-color:#000 !important; }


/* sec2 */
#sec2{}
#sec2 h2{font-size:23px !important; letter-spacing:-0.8px; color:#1a1818;}
#sec2 .sec2_cont{width: 100%;}
#sec2 .sec2_cont ul{width: 100%;}
#sec2 .sec2_cont ul li{ height: auto;_ width: 75%;}
#sec2 .sec2_cont ul li>div{width: 100%;}
#sec2 .sec2_cont ul li .img_sec{}
#sec2 .sec2_cont ul li .img_sec a{display: block; width: 100%;/*
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;*/}
#sec2 .sec2_cont ul li .img_sec a img{width: 100%;}
#sec2 .sec2_cont ul li .info_sec{padding:25px 0px 1px; text-align: center; opacity: 0;transition:  opacity 1.3s,margin-top .5s; margin-top: 10px;}
#sec2 .sec2_cont ul li .info_sec.show{opacity: 1; margin-top: 0px;}
#sec2 .sec2_cont ul li .info_sec h3{font-family:'Roboto', 'Noto Sans KR', sans-serif; font-size: 15px; color: #000; margin-bottom: 13px; font-weight: 600;}
#sec2 .sec2_cont ul li .info_sec p{font-family: 'Roboto','Noto Sans KR', sans-serif;font-weight: 400; font-size: 13px; color:#606060; line-height: 1.6; letter-spacing:-.5s}


/* sec3 */
#sec3{}
#sec3 ul{}
#sec3 ul li{}
#sec3 ul li a{display: block; width: 100%;}
#sec3 ul li a img{width: 100%;}


/* sec4 */
#sec4 .swiper-pagination-bullet{background-color:#000 !important;}
#sec4 .item_list1 .info{position:relative;height:150px;}
#sec4 .item_list1 .rank{
    position: absolute;

    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #000;
    color: #fff;}
#sec4 .item_list1 .rank.red{
    background: red;}

#sec4 .item_list1 .info .prdname {
    font-size: 11.7px;
}



/* sec5 */
#sec5{}
#sec5 h2{}
#sec5 .sec5_cont{width: 100%;}
#sec5 .sec5_cont .swiper{}
#sec5 .sec5_cont .swiper ul{width: 100%;}
#sec5 .sec5_cont .swiper ul li{ }
#sec5 .swiper_btn_prev{position: absolute; top: 50%; transform: translateY(-50%); left: 3%;z-index: 9;cursor: pointer;}
#sec5 .swiper_btn_prev img,#sec5 .swiper_btn_next img{transform: scale(.66)}
#sec5 .swiper_btn_next{position: absolute; top: 50%; transform: translateY(-50%); right: 3%;z-index: 9; cursor: pointer;}


#sec5 .box {position: relative; height: 0px; padding-bottom: 56.25%; text-align: left;}
#sec5 .box  iframe {position: absolute; width:100%; height:100%} 
 

/* sec6 */
#sec6{}
#sec6 .item_cont {font-size:0}
#sec6 .item_list2{
    float: unset;
    display: inline-block;
    vertical-align: top;}


/* sec7 */
#sec7{
    margin-bottom: 130px !important;}
#sec7 h2{}
#sec7 .sec7_ban{width: 100%;}
#sec7 .sec7_ban ul{width: 100%;}
#sec7 .sec7_ban ul li{width: 100%;}
#sec7 .sec7_ban ul li a{display: block;width: 100%;}
#sec7 .sec7_ban ul li a img{width: 100%;}
#sec7 .swiper-pagination-bullet{background-color:#000 !important}


/* sec8 */
#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner h2{}
#sec8 .sec8_cont{ width: 100%;}
#sec8 .sec8_cont>div{ width: 100%;}
#sec8 .sec8_cont .sec8_L{}
#sec8 .sec8_cont .sec8_L .swiper{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a{display: block;width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a img{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_prev{ position:absolute; top:50%; left: 3%;transform: translateY(-50%); z-index:4; cursor:pointer}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_next{position:absolute; top:50%; right: 3%;transform: translateY(-50%); z-index:4; cursor:pointer}
#sec8 .swiper_btn_prev img,#sec8 .swiper_btn_next img{transform: scale(.66)}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination{}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination-bullet{background-color:#fff !important;}
#sec8 .sec8_cont .sec8_R{margin-top:50px}
#sec8 .sec8_cont .sec8_R ul{display:flex; flex-wrap:wrap; width:100%}
#sec8 .sec8_cont .sec8_R ul li{}



/* sec9*/
#sec9{}
#sec9 .sec9_ban{width: 100%;}
#sec9 .sec9_ban ul{width: 100%;}
#sec9 .sec9_ban ul li{width: 100%;}
#sec9 .sec9_ban ul li a{display: block;width: 100%;}
#sec9 .sec9_ban ul li a img{width: 100%;}
#sec9 .swiper .swiper-pagination-bullet{background-color:#fff !important;}


/* sec10 */
#sec10 .swiper-pagination-bullet{background-color:#000 !important;}
#sec10 .prd-review{
    color: #ef987f;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    display: block;
    font-weight: bold;
    margin-bottom: -5px !IMPORTANT;
    padding-top: 4px;}


/* sec11 */
#sec11{background-color: #000; padding:40px 0 50px}
#sec11 ul{width: 100%; }
#sec11 ul li{width:75%}
#sec11 ul li .photo{width:100%}
#sec11 ul li .photo a{display:block; width:100%}
#sec11 ul li .photo a img{width:100%}
#sec11 ul li .text{padding-top: 17px;opacity:0 ; transition: opacity 1s}
#sec11 ul li .text.show{padding-top: 17px;opacity:1}
#sec11 ul li .text h3{ font-family: 'Roboto','Noto Sans KR',sans-serif; font-size: 12px; font-weight: 700;color: #fff;}
#sec11 ul li .text p{margin: 4px 0 16px;font-family: 'Roboto','Noto Sans KR', sans-serif; font-size: 9px;color: #939393;}
#sec11 ul li .text .view{ font-family: 'Roboto', 'Noto Sans KR',sans-serif; font-size: 9px; font-weight: 500; color: #686868; text-decoration: underline;}


/* sec12 */
#sec12{}
#sec12 .sec_inner{}
#sec12 .sec_inner>div{margin-bottom:30px}
#sec12 .sec_inner>div h2{text-align: left;position: relative;margin-bottom:20px !important}
#sec12 .sec_inner>div h2 a{font-size: 11px; position: absolute; right: 0; top: 50%;font-family: 'Roboto', 'Noto Sans KR',sans-serif; transform: translateY(-50%);font-weight:500}
#sec12 .sec_inner>div h2 a span{display:inline-block;)}
#sec12 .sec_inner>div h2 a span img{transform:scale(.7) translateY(3.6px); transform-origin:bottom; }
#sec12 .sec_inner>div ul{}


/* sec13 */
#sec13{}
#sec13 h2{}
#sec13 .sec13_cate{}
#sec13 .sec13_cate ul{text-align: center;display:flex; justify-content:space-between; padding:0 3%}
#sec13 .sec13_cate ul li{display: inline-block;}
#sec13 .sec13_cate ul li a{border-bottom: 2px solid #fff;  font-family: 'Roboto', 'Noto Sans KR',sans-serif; color:#bfbfbf; font-size: 11.6px; font-weight: 700; letter-spacing: -.3px; transition: color .5s, border-color .3s}
#sec13 .sec13_cate ul li.on>a{border-color:#000 !important; color: #000 !important;}
#sec13 .sec13_prd{margin-top:25px;}
#sec13 .sec13_prd>div{display: none;}
#sec13 .sec13_prd>div.show{display: block;}
#sec13 .sec13_prd>div .swiper{}
#sec13 .sec13_prd>div .swiper ul{}
#sec13 .sec13_prd>div .swiper ul li{height:350px}
#sec13 .sec13_prd>div .swiper ul li a{display: block;width: 100%;height:100%; overflow:hidden}
#sec13 .sec13_prd>div .swiper ul li a img{width: 100%; }
#sec13 .swiper_btn_prev img,#sec13 .swiper_btn_next img{transform: scale(.66)}
#sec13 .swiper_btn_prev{position: absolute; top: 50%; transform: translateY(-50%); left: 3%;z-index: 10;cursor: pointer;}
#sec13 .swiper_btn_next{position: absolute; top: 50%; transform: translateY(-50%); right: 3%;z-index: 10; cursor: pointer;}



.swiper-01 { /*position: absolute; width: 60%; height: 60%; top: 50%; right: 5%; transform: translateY(-50%); margin: 0; */}
#sec13 .swiper-container { width: 100%; height: 100%; }
#sec13 .swiper-slide { text-align: center; font-size: 18px; background: #fff; /*display: flex; justify-content: center; align-items: center;  width: auto;*/ }
#sec13 .swiper-slide img{width:100%}
#sec13 .swiper-pagination { 
    white-space: pre;
    overflow-x: auto;
    position: unset;/*
    display: flex;
    justify-content: space-between;*/}
#sec13 .swiper-pagination-bullet {
    width: auto;
    background: transparent;
    opacity: 1;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
    height: auto;
    margin-bottom: 20px;
    white-space: initial;
}

#sec13 .swiper-pagination-bullet-active span{
    font-weight: bold !important;
    border-color: #000 !important;
    color: #000 !important;}
    
#sec13 .swiper-pagination-bullet span{
    font-size: 13px;
    border-bottom: 2px solid rgb(255, 255, 255);
    font-family: Roboto, 'Noto Sans KR', sans-serif;
    color: rgb(191, 191, 191);
    font-weight: 700;
    letter-spacing: -0.3px;
    transition: color 0.5s ease 0s, border-color 0.3s ease 0s;
    display: block;
    width: 100%;}
#sec13 .swiper-pagination-bullet-active:before { content: ""; display: none; position: absolute; border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid pink; transition: all .5 ease-in-out; }





/* sec14 */
#sec14{margin-bottom:100px}
#sec14 .sec_inner{}
#sec14 .sec14_L{}
#sec14 .sec14_L h2{text-align: left !important;line-height:1.1; margin-bottom:0 !important}
#sec14 .sec14_L p{font-family: 'Roboto', 'Noto Sans KR',sans-serif; font-size: 12px;color: #000; font-weight: 400; margin-top: 10px;}
#sec14 .sec14_R{margin-top:30px}


















/* BASIC css end */