/* BASIC css start */
#content{width:auto;}

/* 섹션공통 */
section{margin-bottom: 85px;}
section .sec_inner{width: 1200px; margin: 0 auto;}
section h2{text-align: center;font-family: 'Roboto Condensed', sans-serif; font-size: 27px; color: #000; font-weight: 800;letter-spacing: -.2px;margin-bottom:7px}
section p.subtit{text-align: center;font-family: 'Noto Sans KR', sans-serif; font-size: 15px;color: #474747; font-weight: 400;    letter-spacing: -.8px;margin-bottom:30px}



#sec1{}
#sec1 .swiper{position: relative;}
#sec1 .swiper>ul{width: 100%;}
#sec1 .swiper>ul>li{width: 100% }
#sec1 .swiper>ul>li a{display: block;width: 100%; overflow: hidden;}
#sec1 .swiper>ul>li a img{width: 100%; object-fit: cover;display: block;}
#sec1 .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{width: 1200px !important; margin: 0 auto !important; left: 50% !important; transform: translateX(-50%);text-align: center; bottom: 0px !important;}
#sec1 .swiper-pagination-bullet{background-color: rgba(0,0,0,.8) !important; border-top: 2px solid rgba(0,0,0,.1); height: auto !important; opacity: 1 !important; border-radius: 0 !important; color: #fff; margin: 0 !important; width: 20% !important; padding: 15px 0; font-family: 'Dotum'; font-size: 11px; position: relative;}
#sec1 .swiper-pagination-bullet::after{content: ''; display: block; position: absolute; width: 1px; height: 14px; background-color: #4d4b4a; right: 0; top: 50%; transform: translateY(-50%);}
#sec1 .swiper-pagination-bullet:last-child::after{display: none;}
#sec1 .swiper-pagination-bullet-active{background-color: rgba(0,0,0,.8) !important; border-top: 2px solid red;}



#sec2{}
#sec2 .sec_inner{display: flex; justify-content: space-between;}
#sec2 .sec_inner>div{}
#sec2 .sec_inner .sec2_L{width: 450px;}
#sec2 .sec_inner .sec2_L a{}
#sec2 .sec_inner .sec2_L a img{}
#sec2 .sec_inner .sec2_R{width: 740px; position: relative;}
#sec2 .sec_inner .sec2_R .swiper{}
#sec2 .sec_inner .sec2_R .swiper ul{}
#sec2 .sec_inner .sec2_R .swiper ul li{}
#sec2 .sec_inner .sec2_R .swiper ul li a{}
#sec2 .sec_inner .sec2_R .swiper ul li a img{}
#sec2 .sec_inner .sec2_R .btn_wrap{position: absolute; background-color: #000; z-index: 10; bottom: -10px; right: 0;  display: flex; padding: 14px; align-items: center;}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper-pagination{width: max-content !important; position: unset; color: #fff;margin-right: 13px !important;font-family: 'Roboto Condensed', sans-serif; font-size: 15px; transform:translateY(2px)}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause{margin: 0 12px;}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause a{display:block}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause a img{display: inline-block;}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause.clicked a{display: block; position: relative;}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause.clicked a::after{content: "▶"; color: #fff; font-size: 12px; display: block; transform: translate(-50%,-54%); position: absolute; top: 50%; left: 50%;}
#sec2 .sec_inner .sec2_R .btn_wrap .swiper_pause.clicked a img{opacity: 0;}
#sec2 .swiper_btn_prev,#sec2 .swiper_btn_next{cursor:pointer} 


/* sec3 */
#sec3{position: relative;}
#sec3 .sec_inner{}
#sec3 .sec_inner h2{}
#sec3 .sec_inner>p{ }
#sec3 .sec_inner .sec3_cate{margin: 30px 0;}
#sec3 .sec_inner .sec3_cate ul{text-align:center; }
#sec3 .sec_inner .sec3_cate ul li{display: inline-block;margin: 0 2px;}
#sec3 .sec_inner .sec3_cate ul li a{font-family:  'Dotum'; color:#8c8c8c; font-size: 12px; display: block; padding: 13px 20px; background-color: #f7f7f7; border: 1px solid #e1e1e1; border-radius: 6px; font-weight: 500;}
#sec3 .sec_inner .sec3_cate ul li.on>a{  background-color: #fff; border-color: #000; color: #000; font-weight:600}
#sec3 .sec3_prd{}
#sec3 .sec3_prd>div{display:none; position:relative;padding-top: 40px;}
#sec3 .sec3_prd>div.show{display: block;}
#sec3 .sec3_prd>div ul{display: flex; flex-wrap: wrap;}
#sec3 .sec3_prd>div ul li{width: 295px; margin-right: 6.6px; margin-bottom: 50px;}
#sec3 .sec3_prd>div ul li:nth-child(4n){margin-right: 0 !important;}


/*sec4*/
#sec4 .sec_inner a{display:block; width:100%}
#sec4 .sec_inner a img{width:100%}


/*sec5*/
#sec5 span.percent{display:none}

/* BASIC css end */