@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 CSS
 * date : 2017-07-19
******************************************************** */


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 상단 -------- */
#mainContainer{position:relative;}

/* -------- 메인 비주얼 -------- */
#mainVisual{width:100%; overflow:hidden; padding:13px 0;}
.visual-img{width:100%;}
.visual-item{position:relative;}
.visual-item img{width:100%;}
.visual-item .iframe-wrap {position:relative; padding-top:80%; }
.visual-item iframe {position:absolute; left:0; top:0; width:100%; height:100%;}
.visual-item .visual-img-txt-con{position:absolute; bottom:0px; left:0px; width:92%; padding:20px 4% 23px; color:#fff; background:rgba(0,0,0,0.35)}
.visual-item .visual-img-txt-con strong{display:block; font-size:17px; font-weight:600; line-height:22px; padding-bottom:10px;}
.visual-item .visual-img-txt-con p{line-height:19px; font-size:13px; font-weight:400;}
#mainVisual .item.youtube {position:relative; }
#mainVisual .item.youtube .temp {width:100%; height:100%; position:absolute; left:0; top:0; z-index:9;}
/* VISUAL 화살표 */
#mainVisual .slick-arrow{position:absolute; top:50%; width:40px; height:40px; margin-top:-20px; cursor:pointer; border:0; cursor:pointer; z-index:99; font-size:0; }
#mainVisual .slick-arrow.slick-prev{left:0; background:rgba(0,0,0,.6) url(../images/button/main_visual_prev_btn.png) no-repeat; background-size:100% 100%; }
#mainVisual .slick-arrow.slick-next{right:0; background:rgba(0,0,0,.6) url(../images/button/main_visual_next_btn.png) no-repeat; background-size:100% 100%; }
/* VISUAL 버튼 */
#mainVisual .slick-dots{position:absolute; width:92%;right:4%; bottom:15px; text-align:right;}
#mainVisual .slick-dots li{display:inline-block; margin-left:5px ; }
#mainVisual .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:25px; height:5px; background-color:#fff;
}
#mainVisual .slick-dots li.slick-active button{background-color:#3591d7;}		/* 버튼 active */

/* -------- 메인 상단 -------- */
#mainContent{margin-bottom:26px; min-height:400px;}
#mainBrandCon{background-color:#fff; padding:13px 0 13px; border-bottom:1px solid #ddd;}

/* -------- 메인 중간 배너 -------- */
.main-prd-inner-banner-con{width:100%;}
.main-prd-inner-banner-con img{width:100%;}
.main-prd-inner-banner-con .slick-arrow{position:absolute; top:50%; width:40px; height:40px; margin-top:-20px; cursor:pointer; border:0; cursor:pointer; z-index:99; background-color:rgba(255,255,255,0.15);}
.main-prd-inner-banner-con .slick-arrow i{font-size:40px; color:#fff;}
.main-prd-inner-banner-con .slick-arrow.slick-prev{left:0; }
.main-prd-inner-banner-con .slick-arrow.slick-next{right:0; }
.main-prd-inner-banner-con .slick-dots{position:absolute; width:92%; left:4%; bottom:15px; text-align:center;}
.main-prd-inner-banner-con .slick-dots li{display:inline-block; margin:0 2px ; }
.main-prd-inner-banner-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:25px; height:5px; background-color:#fff;
}
.main-prd-inner-banner-con .slick-dots li.slick-active button{background-color:#3591d7;}

/* -------- 메인 하단 배너 :: 오일정보 -------- */
#mainOilCon{height:75px; background:url(/m/images/main/main_oil_bg.jpg) no-repeat 50%; 50%; background-size:cover; margin-bottom :10px;}
#mainOilCon dl{overflow:hidden; line-height:75px; padding:0 3%; color:#fff;}
#mainOilCon dl strong, #mainOilCon dl span{vertical-align:middle;}
#mainOilCon dl dt{float:left;}
#mainOilCon dl dt strong{font-size:15px; font-weight:600; }
#mainOilCon dl dt span{font-size:10px; color:#999; margin-left:5px;}
#mainOilCon dl dd{float:right;}
#mainOilCon dl dd span{font-size:12px;}
#mainOilCon dl dd strong{font-size:18px; font-weight:400;}