@charset "utf-8";
@import url(default-2.0.css);
@import url(layout-2.0.css);

#mainwrap {width:100%; min-width:1200px; min-height:100%;}

/*비주얼*/
#contents {width:100%; min-width:1200px; margin-top:80px;}
#contents .mainVisual{width:100%; height:420px; background:url(/images/user/main/main_visual2.jpg) no-repeat center center; background-size:cover;}
#contents .mainVisual .layout{width:1200px; height:331px; margin:0 auto;}
#contents .mainVisual .main-text-1,#contents .mainVisual .main-text-2,#contents .mainVisual .main-text-3{color:#000; text-align:center}
#contents .mainVisual .main-text-1{font-size:40px; font-weight:800; padding-top:70px;}
#contents .mainVisual .main-text-2{font-size:30px;}
#contents .mainVisual .main-text-3{font-size:16px; padding-top:10px;}

/* 오늘의유가 */
#contents .mainVisual .oll_price{position:absolute; bottom:0}
#contents .mainVisual .oll_price .today, #contents .mainVisual .oll_price .today_info{position:absolute; top:0; z-index:10;}

#contents .mainVisual .oll_price .today{width:219px; border-right:1px solid #ffaa66; background:#ff7200; height:89px; text-align:center}
#contents .mainVisual .oll_price .today h2{display:block; font-size:22px; padding-top:15px; color:#fff;  border-bottom:0; padding-bottom:0;}
#contents .mainVisual .oll_price .today span{font-weight:300; color:#fff}

#contents .mainVisual .oll_price .today_info{margin-left:220px; width:980px;}
#contents .mainVisual .oll_price .today_info .tabM{float:left; width:180px; background:#ff7200;}
#contents .mainVisual .oll_price .today_info .tabM li{height:29px; line-height:29px; border-bottom:1px solid #ffaa66;}
#contents .mainVisual .oll_price .today_info .tabM li:last-child{border-bottom:none}
#contents .mainVisual .oll_price .today_info .tabM a{display:inline-block; width:150px; color:#fff; padding-left:30px; height:29px; font-size:14px}
#contents .mainVisual .oll_price .today_info .tabM a:hover, #contents .mainVisual .oll_price .today_info .tabM a.on{background:#f15500 url(/images/user/main/icon_arr.png) no-repeat 90% center;}

#contents .mainVisual .oll_price .today_info .oilArea{display:inline-block; background:rgba(0, 0, 0, 0.8); width:800px; height:89px; color:#fff}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info dl{float:left; width:340px; padding:15px 30px; }
#contents .mainVisual .oll_price .today_info .oilArea .oil_info dl.left_line{background:url(/images/user/main/line2.png) no-repeat 0 center;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info dt, #contents .mainVisual .oll_price .today_info .oilArea .oil_info dd{float:left; display:inline-block;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info dt{width:132px;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info dd{width:200px; }
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .text-1{font-size:22px}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .text-2{ font-weight:300;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .text-3{font-size:26px;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .text-4{font-size:18px;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .point{display:inline-block; margin-left:19px; font-size:15px; vertical-align:top; padding-top:12px;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info .line{color:#d9d9d9; font-size:10px; padding:0 5px; position:relative; top: -3px;}
#contents .mainVisual .oll_price .today_info .oilArea .oil_info p{font-weight:300;}
#contents .point.up:before{content:'▲'; position:relative;top: -10px;}
#contents .point.down:before{content:'▼'; position:relative;top: -2px;}

/* 컨텐츠레이아웃 */
#contents .layout h2{font-size:20px; color:#333; font-weight:500; border-bottom:2px solid #000; padding-bottom:12px;}
#contents .main-section1{padding:0 0 50px 0; background:url(/images/user/main/main-section1_bg.jpg) no-repeat center center; background-size:cover;}
#contents .main-section1 .layout,#contents .main-section2 .layout{width:1200px; margin:0 auto; overflow:hidden;}
#contents .main-section1 .layout .box{float:left; display:inline-block; width:339px; border-left:1px solid #eaeaea; padding:30px; background-color:#fff; height:400px;}
#contents .main-section1 .layout .box:first-child{border-left:none;}
#contents .main-section2{padding:50px 0; background:url(/images/user/main/main-section2_bg.jpg) no-repeat center center; background-size:cover;}
#contents .main-section2 .layout .box:first-child {float:left;}
#contents .main-section2 .layout .box{float:right; width:calc(50% - 10px);}

/* 시도별평균 */
#contents .main-section1 .layout .box .main_map{background:url(/images/user/main/main_map.png) no-repeat center 20px; width:100%; height:100%}
#contents .main-section1 .layout .box .main_map .up{background:url(/images/user/main/map_01.png) no-repeat 0 0; width:46px; height:40px; text-align:center}
#contents .main-section1 .layout .box .main_map .down{background:url(/images/user/main/map_02.png) no-repeat 0 0; width:46px; height:40px; text-align:center}
#contents .main-section1 .layout .box .main_map span.title{display:block; color:#fff; font-size:11px;cursor:pointer;}
#contents .main-section1 .layout .box .main_map span.price{display:block; font-size:12px; letter-spacing: -0.05em; margin-top:-3px;cursor:pointer;}
#contents .main-section1 .layout .box .main_map .Seoul{position:absolute; margin:58px 0 0 120px}
#contents .main-section1 .layout .box .main_map .Incheon{position:absolute; margin:50px 0 0 74px}
#contents .main-section1 .layout .box .main_map .Gyeonggi{position:absolute; margin:15px 0 0 120px}
#contents .main-section1 .layout .box .main_map .Gangwon{position:absolute; margin:50px 0 0 200px}
#contents .main-section1 .layout .box .main_map .Saison{position:absolute; margin:120px 0 0 130px}
#contents .main-section1 .layout .box .main_map .Chungbug{position:absolute; margin:90px 0 0 175px}
#contents .main-section1 .layout .box .main_map .Chungnam{position:absolute; margin:110px 0 0 84px}
#contents .main-section1 .layout .box .main_map .Daejeon{position:absolute; margin:160px 0 0 145px}
#contents .main-section1 .layout .box .main_map .Jeonbuk{position:absolute; margin:185px 0 0 100px}
#contents .main-section1 .layout .box .main_map .Jeonam{position:absolute; margin:265px 0 0 80px}
#contents .main-section1 .layout .box .main_map .Gwangju{position:absolute; margin:224px 0 0 93px}
#contents .main-section1 .layout .box .main_map .Gyeongbuk{position:absolute; margin:140px 0 0 230px}
#contents .main-section1 .layout .box .main_map .Gyeongnam{position:absolute; margin:230px 0 0 170px}
#contents .main-section1 .layout .box .main_map .Busan{position:absolute; margin:235px 0 0 220px}
#contents .main-section1 .layout .box .main_map .Daegu{position:absolute; margin:180px 0 0 199px}
#contents .main-section1 .layout .box .main_map .Ulsan{position:absolute; margin:200px 0 0 245px}
#contents .main-section1 .layout .box .main_map .Jeju{position:absolute; margin:310px 0 0 95px}
#contents .main-section1 .layout .box .main_map .JeonamGwangju{position:absolute; margin:245px 0 0 93px}

/* 유가추이 */
#contents .main-section1 .layout .box #tabArea{position:relative; margin-top:25px;}
#contents .main-section1 .layout .box #tabArea h2{display:none}
#contents .main-section1 .layout .box #tabArea .tab{display:block; background:#fff; height:30px; line-height:30px; color:#666;}
#contents .main-section1 .layout .box #tabArea .tabM{width:100%; position:relative; overflow:hidden;}
#contents .main-section1 .layout .box #tabArea .tabM ul li{float:left; border:1px solid #666; width:24.6%; border-left:none; text-align:center}
#contents .main-section1 .layout .box #tabArea .tabM ul li:first-child{border-left:1px solid #666;}
#contents .main-section1 .layout .box #tabArea .tabM a:hover, #contents .main-section1 .layout .box #tabArea .tabM a.on{background:#666; color:#fff;}
#contents .main-section1 .layout .box #tabArea .graphArea{margin-top:20px}

/* 우리고장 싼 주유소 Top5 */
#contents .main-section1 .layout .box .select{margin-top:23px}
/*  ▼▼▼▼ 2019.1.1 수정 ▼▼▼▼ */
#contents .main-section1 .layout .box .selectDesign {position:relative; float:left; width:164px; height:34px; border:1px solid #dbdbdb; line-height:34px; height:34px; border-radius:3px; background:#fff;box-sizing: border-box;}
#contents .main-section1 .layout .box .selectDesign+.selectDesign {margin-left:10px;}
#contents .main-section1 .layout .box .selectDesign select{opacity:0; filter: alpha(opacity=0); position:absolute; top:0; right:0; font-size:14px; padding:0 35px 0 15px; cursor:pointer; border:0; border-radius:3px; width:100%; height:100%;}
#contents .main-section1 .layout .box .selectDesign>p:first-child{position:absolute; top:0; right:0; width:100%; height:100%; text-indent:15px; background:url(../../images/user/main/bullet_sele.gif) no-repeat 97% 50%;}
.selectDesign select{-webkit-appearance:none; -moz-appearance:none; ap pearance:none;}
.selectDesign select::-ms-expand {display:none}
/*  ▲▲▲▲ 2019.1.1 수정 ▲▲▲▲ */

/* 국제유가 */
#contents .main-section1 .layout .box .national_box{width:340px; border-top:1px solid #dbdbdb; margin:20px 0 0 -30px; padding:20px 30px}
#contents .main-section1 .layout .box .national_box ul{vertical-align: middle; margin-top:10px;margin-left: auto; margin-right: auto; display: table;}
#contents .main-section1 .layout .box .national_box ul li{width:105px;text-align:center; display:inline-block; height:50px; padding:0 4px}
#contents .main-section1 .layout .box .national_box ul li .txt-1{display:block; font-size:18px; font-weight:800;}
#contents .main-section1 .layout .box .national_box ul li .txt-2{color:#666;}
#contents .main-section1 .layout .box .national_box ul li .point{display:inline-block; vertical-align:top; padding-top:1px; font-size:12px; margin-right:2px;}
#contents .main-section1 .layout .box .national_box ul li:first-child{padding-left:0}
#contents .main-section1 .layout .box .national_box ul li:last-child{padding-right:0}
#contents .main-section1 .layout .box .national_box .title{font-size:22px;}
#contents .main-section1 .layout .box .national_box .date{ margin:0 0 0 6px;}
#contents .main-section1 .layout .box .national_box .unit{float:right; display:inline-block;  color:#999; margin-top:9px}
#contents .main-section1 .layout .box .national_box .line{background:url(/images/user/main/line.png) no-repeat 0 0;}

/* 시도별 최저가 주유소 */
#contents .main-section2 .layout .box-1, #contents .main-section2 .layout .box-2, #contents .main-section2 .layout .box-3{border-radius:10px; background:#fff;}
#contents .main-section2 .layout .box-1{padding:30px; height:400px;}
#contents .main-section2 .layout .box-1 .left, #contents .main-section2 .layout .box-1 .right{float:left; width:255px; margin-top:20px}
#contents .main-section2 .layout .box-1 .right{margin-left:20px}

/* 알림마당 */
#contents .main-section2 .layout .box-2{height:200px;}
#contents .main-section2 .layout .box-2 .left, #contents .main-section2 .layout .box-2 .right{float:left;}
#contents .main-section2 .layout .box-2 .left{width:280px;}
#contents .main-section2 .layout .box-2 .left .control_title{width:280px; background:#a3a3a3; height:42px; border-radius:10px 0 0 0;}
#contents .main-section2 .layout .box-2 .left .bx-wrapper img{ border-radius:0 0 0 10px;}

#contents .main-section2 .layout .box-2 .right{width:250px; padding:30px}
#contents .main-section2 .layout .box-2 .right strong{font-size:20px; font-weight:400}
#contents .main-section2 .layout .box-2 .right span{font-weight:800; margin-right:10px;}
#contents .main-section2 .layout .box-2 .right ul{margin-top:15px}
#contents .main-section2 .layout .box-2 .right ul li a{display:inline-block; width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:26px; color:#666; font-weight:300; font-size:15px}
#contents .main-section2 .layout .box-2 .right .btn_more{position:absolute; right:0; margin-right:25px;top:0;margin-top: 33px;}

/* 스타트업 */
#contents .main-section2 .layout .box-3{height:80px;}
#contents .main-section2 .layout .box-3 .banner_inner {max-width:1200px; height:100%; padding:0 30px;}
#contents .main-section2 .layout .box-3 .banner_left {position: absolute;float:left; width:140px; height:80px;}
#contents .main-section2 .layout .box-3 .banner_left h3 {float:left; margin:20px 10px 0 0; font-size:18px; line-height:20px;text-align:center;}
#contents .main-section2 .layout .box-3 .banner_controller {float:left; margin:33px 0;}
#contents .main-section2 .layout .box-3 .banner_controller .bnr_btn {float:left; width:8px; height:13px; margin:0 3px}
#contents .main-section2 .layout .box-3 .banner_controller .bnr_prev {background: url('/images/user/main/bnr_prev.png') no-repeat 0 0;}
#contents .main-section2 .layout .box-3 .banner_controller .bnr_pause {background: url('/images/user/main/bnr_pause.png') no-repeat 0 0;}
#contents .main-section2 .layout .box-3 .banner_controller .bnr_play {background: url('/images/user/main/bnr_play.png') no-repeat 0 0;}
#contents .main-section2 .layout .box-3 .banner_controller .bnr_next {background: url('/images/user/main/bnr_next.png') no-repeat 0 0;}
#contents .main-section2 .layout .box-3 .slidebanner ul{position:relative; width:1200px; margin-top:8px;}
#contents .main-section2 .layout .box-3 .slidebanner ul li {text-align:center; float:left; position:relative; list-style-type:none; width:130px;padding:0; margin:0 0;}
#contents .main-section2 .layout .box-3 .screen_out {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
#contents .main-section2 .layout .box-3 .bannerlist_area {position: absolute;overflow:hidden; float:left; width:390px;height: 80px;margin-left: 150px;}
#contents .main-section2 .layout .box-3 .banner_list {overflow:hidden; height:64px;left:-130px;}
#contents .main-section2 .layout .box-3 .banner_list li {float:left; margin-left:26px; height:50px;}
#contents .main-section2 .layout .box-3 .banner_list li:first-child {margin-left:0;}

/* 서비스 */
#contents .main-section2 .layout .box-4{height:140px;}
#contents .main-section2 .layout .box-4 div{float:left; border-radius:8px; width:248px; height:100px; padding:20px;}
#contents .main-section2 .layout .box-4 div ul{margin-top:20px}
#contents .main-section2 .layout .box-4 div ul li{display:inline-block; width:49%; vertical-align: middle; padding:10px 0}
#contents .main-section2 .layout .box-4 div ul li span{display:inline-block; color:#fff;  line-height:16px; height:48px; font-weight:300; padding-left:56px; ;}
#contents .main-section2 .layout .box-4 div ul li.ic_01{background:url(/images/user/main/ic_01.png) no-repeat 0 0;}
#contents .main-section2 .layout .box-4 div ul li.ic_02{background:url(/images/user/main/ic_02.png) no-repeat 0 0;}
#contents .main-section2 .layout .box-4 div ul li.ic_03{background:url(/images/user/main/ic_03.png) no-repeat 0 0;}
#contents .main-section2 .layout .box-4 div ul li.ic_04{background:url(/images/user/main/ic_04.png) no-repeat 0 0;}
#contents .main-section2 .layout .box-4 div ul li.ic_02 span{padding-top:2px}
#contents .main-section2 .layout .box-4 div strong{font-size:18px; color:#fff; vertical-align: middle; letter-spacing:-0.05em;}
#contents .main-section2 .layout .box-4 div span.tel{display:inline-block; text-align:right; width:140px; color:#ffde00; float:right; font-size:18px;}
#contents .main-section2 .layout .box-4 div span.small{font-size:13px;}
#contents .main-section2 .layout .box-4 div span.ic_05{background:url(/images/user/main/ic_tel01.png) no-repeat 2px 0;}
#contents .main-section2 .layout .box-4 div span.ic_06{background:url(/images/user/main/ic_tel02.png) no-repeat 2px 0;}
#contents .main-section2 .layout .box-4 .ba01{background:#008de1}
#contents .main-section2 .layout .box-4 .ba02{background:#01787c}

/* 파트너스 */
#contents .main-section2 .layout .box-5{float:left; height:40px; width:1120px; background:#f6f5f3; margin-top:40px; padding:30px 40px; vertical-align: middle; }
#contents .main-section2 .layout .box-5 .ban_inner {max-width:1200px; height:100%;}
#contents .main-section2 .layout .box-5 .ban_left {float:left; width:160px; height:30px;}
#contents .main-section2 .layout .box-5 .ban_left h3 {float:left; font-size:18px; line-height:24px; margin-right:30px}
#contents .main-section2 .layout .box-5 .banlist_area {float:left; width:900px; margin-top:10px}
#contents .main-section2 .layout .box-5 .ban_list li:first-child {margin-left:0;}
#contents .main-section2 .layout .box-5 .ban_list li{text-align:-webkit-center; text-align:center}
#contents .main-section2 .layout .box-5 .ban_list li a{display:block; height:30px; text-align:center;}
#contents .main-section2 .layout .box-5 .ban_list li a img {margin:0 auto !important;}
#contents .main-section2 .layout .box-5 .slideban .controls a{position:absolute; top:-35px; outline:0; width:37px; height:37px; text-indent:-9999px; z-index:9999;}
#contents .main-section2 .layout .box-5 .slideban .controls a.bx-prev{background: url('../../images/user/main/controls.png') no-repeat 0 -37px; margin-left:-60px;} 
#contents .main-section2 .layout .box-5 .slideban .controls a.bx-next{background: url('../../images/user/main/controls.png') no-repeat -37px -37px; right:-60px;} 

/* 퀵메뉴 */
@media all and (min-width:1400px) {#mainwrap .quick{left:50%; margin-left:620px;}
}
#mainwrap .quick{position:fixed; display:block; top:520px; width:80px; background:#fff; right:0; z-index:51}
#mainwrap .quick ul li{text-align:center; border-bottom:1px solid #d0e6f7;}
#mainwrap .quick ul li.menu{height:26px; line-height:26px; font-size:12px; color:#5f6c81; font-weight:800;}
#mainwrap .quick ul li a{display:inline-block; width:80px; color:#fff;  height:85px; line-height:14px; font-size:12px; color:#8d8d8d; }
#mainwrap .quick ul li span.ic_m1, .quick ul li span.ic_m2, .quick ul li span.ic_m3, .quick ul li span.ic_m4, .quick ul li span.ic_m5, .quick ul li span.ic_m6{display:block; width:80px; margin:5px 0 5px 20px;}
#mainwrap .quick ul li a:hover{color:#0083d1;}
#mainwrap .quick ul li span.ic_m1{background:#5f6c81 url('../../images/user/main/quick_01.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li span.ic_m2{background:#5f6c81 url('../../images/user/main/quick_02.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li span.ic_m3{background:#5f6c81 url('../../images/user/main/quick_03.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li span.ic_m4{background:#5f6c81 url('../../images/user/main/quick_04.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li span.ic_m5{background:#5f6c81 url('../../images/user/main/quick_05.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li span.ic_m6{background:#5f6c81 url('../../images/user/main/quick_06.png') no-repeat center center; width:40px; height:40px; border-radius:50px;}
#mainwrap .quick ul li a:hover span.ic_m1 {background:#0083d1 url('../../images/user/main/quick_01.png') no-repeat center center;}
#mainwrap .quick ul li a:hover span.ic_m2 {background:#0083d1 url('../../images/user/main/quick_02.png') no-repeat center center;}
#mainwrap .quick ul li a:hover span.ic_m3 {background:#0083d1 url('../../images/user/main/quick_03.png') no-repeat center center;}
#mainwrap .quick ul li a:hover span.ic_m4 {background:#0083d1 url('../../images/user/main/quick_04.png') no-repeat center center;}
#mainwrap .quick ul li a:hover span.ic_m5 {background:#0083d1 url('../../images/user/main/quick_05.png') no-repeat center center;}
#mainwrap .quick ul li a:hover span.ic_m6 {background:#0083d1 url('../../images/user/main/quick_06.png') no-repeat center center;}
#mainwrap .quick ul li a.top{width:80px; height:30px; border-bottom:none; background: url('../../images/user/main/ic_top.png') no-repeat 0 0}
#mainwrap .quick ul li a.top span{display:inline-block; color:#fff; padding-top:8px; margin-left:-10px}
.quick_bt{background:#5f6c81; text-align:center; width:80px; height:47px; cursor:pointer;}
.quick_bt span{display:inline-block; color:#fff; line-height:47px;}
.quick_ul_block{display:block;}
.quick_ul_none{display:none;}
#frogue-container {right:110px;}
@media all and (min-width:1380px) {
	#mainwrap .quick_bt{display:none;}
	#mainwrap .quick_ul_block{display:block;}
	#mainwrap .quick_ul_none{display:block;}
}

/* 테이블 */
table.tab_type01{clear: both; width:100%; position:relative; display:block;}
table.tab_type01 td {display:table-cell; vertical-align:middle; color:#666; font-weight:300; height:30px; font-size:15px}
table.tab_type01 td.title{color:#000; font-weight:500;}
table.tab_type01 td.center{text-align:center}
table.tab_type01 td a{color:#666; font-weight:300; font-size:15px}
table.tab_type01 td.limit{display: inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
table.tab_type01 td.valign{height:25px; padding-top:5px;}
table.tab_type01 td.valign2{height:28px; padding-top:7px;}
table.tab_type01 td.ralign{text-align:right;}
table.tab_type01 td.ralign2{text-align:right;}
table.bo_line td{border-bottom:1px solid #dbdbdb; height:35px; letter-spacing:-1px;}


/* button reset */
button {display:inline-block; overflow:visible; padding:0; border:0; background:transparent; text-align:center; vertical-align:middle; cursor:pointer;}

.col-1{color:#2aff00}
.col-2{color:#ffde00}
.col-3{color:#ff7200}
.col-4{color:#0083d1}

.ML2{margin-left:2px}
.ML5{margin-left:5px}
.ML10{margin-left:10px}
.ML20{margin-left:20px}
.MT20{margin-top:20px}
.clear{clear:both;}

.w25{width:30px}
.w30{width:35px}
.w40{width:40px}
.w50{width:50px}
.w55{width:55px}
.w80{width:80px}
.w130{width:130px}
.w135{width:130px}
.w155{width:155px}
.w220{width:220px}