@charset "utf-8";

/*
 * File   : main.css
 * Author :
 * Dependency :
 * Creat Date : 2018-07-18
 * Last Update :
 * Ver : 1.0.0
 *
 * SUMMARY:
 * 1)
 */


 /* ************************************** *
  * Common
  * ************************************** */
.section .cont h2{padding-bottom:10px;font-size:30px;color:#222;}

/* ************************************** *
 * Main Visual
 * ************************************** */
/* 190125 주석
.main-visual{position:relative;;height:325px;background-color:#fff;z-index:1;}
.main-visual .main-slide{overflow:hidden;position:absolute;top:0;right:0;width:1324px;height:325px;background-color:#fff;}
.main-visual .main-slide img.bg{width:auto;height:100%;margin-left:auto;}
.main-visual .slide-paginator button{bottom:158px;background-color:transparent;box-shadow:none !important;}
.main-visual .slide-content{position:absolute;top:60px;/*right:78px;*//*left:750px;; width:500px; z-index:1;}
.main-visual .slide-content .tit{padding-bottom:12px;font-size:45px;color:#333;font-weight:100;line-height:1.1;letter-spacing:-0.085em;}
.main-visual .slide-content .desc{font-size:20px;color:#333;font-weight:100;letter-spacing:-0.0425em;}
.main-visual .slide-content .desc strong{font-weight:600;}
.main-visual .slide-content .btn.outline{margin-top:30px;}
.main-visual:before{
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9999px;
    height: 100%;
    z-index: -1;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    }
    */
    
.main-visual{position:relative; height:230px; background-color:#e5e5e5;z-index:1;}
.main-visual .main-slide{overflow:hidden;position:absolute;top:0;right:0;width:1324px;height:230px;background-color:#e5e5e5;}
.main-visual .main-slide img.bg{width:auto;height:100%;margin-left:auto;}
.main-visual .slide-paginator button{bottom:133.5px;background-color:transparent;box-shadow:none !important;}
.main-visual .slide-content{position:absolute; top:60px;/*right:78px;*/left:760px; width:100% !important; z-index:1;}

.main-visual .slide-content .tit{padding-bottom:12px;font-size:45px;color:#333;font-weight:100;line-height:1.1;letter-spacing:-0.085em;}
.main-visual .slide-content .desc{font-size:20px;color:#333;font-weight:100;letter-spacing:-0.04em;}
.main-visual .slide-content .desc strong{font-weight:600;}
.main-visual .slide-content .btn.outline{margin-top:30px;}
.main-visual:before{
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9999px;
    height: 100%;
    z-index: -1;
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
    }

    
    
/* ************************************** *
 * Slider
 * ************************************** */

.slide .btn{float:left;display:block;min-width:150px;height:44px;background-color:#888888;padding:0 65px 0 30px;border-radius:100px;font-size:18px;color:#fff;line-height:44px;letter-spacing:-0.085em;-webkit-transition: transform .2s, box-shadow .2s;-o-transition: transform .2s, box-shadow .2s;transition: transform .2s, box-shadow .2s;}
.slide .btn.outline{background-color:rgba(255,255,255,.27);border:1px solid #cfcfcf;color:#e6000f;background-image:url('../images/obj/ico-sl-arr.png');background-position:center right 30px;background-repeat:no-repeat;line-height:42px;-webkit-box-shadow:none;box-shadow:none;-webkit-transition: transform .2s, box-shadow .2s;-o-transition: transform .2s, box-shadow .2s;transition: transform .2s, box-shadow .2s;}
.slide .btn.outline:hover, .slide .btn.outline:focus{-webkit-transform: translateY(-1px);-ms-transform: translateY(-1px);transform: translateY(-1px);-webkit-box-shadow: 0 2px 15px 2px rgba(0,0,0,0.12);box-shadow: 0 2px 15px 2px rgba(0,0,0,0.12);}
.slide .btn .ico-sl-arr{display:block;margin-left:12px;font-size:0;text-indent:-9999px;}


/* ************************************** *
 * Section 1
 * ************************************** */

.slide-type1{height:322px;}
.slide-type1 .slide img.bg{width:950px;height:322px;}
.slide-type1 .slide-paginator button{position:absolute;bottom:132px;}
.slide-type1 .btn.outline{position:absolute;left:128px;bottom:78px;}

 /* ************************************** *
  * Apps
  * ************************************** */

.apps{position:relative;padding-top:40px;padding-bottom:15px;text-align:center;}
.apps:after{content:'';display:block;clear:both;}
.apps p{font-size:16px;color:#666;}
.app-list{overflow:hidden;margin-top:32px;padding-left:44px;padding-right:44px;}
.app-list li{float:left;width:25%;height:86px;}
.app-list li a:hover, .app-list li a:focus{opacity:.8;}

.row .apps{border-left:1px solid #e5e5e5;}
.row .apps:first-child{border-color:transparent}


/* 충전메인 개편 (2020-09-01 손나래) */
.chrMain:after{content:'';display:block;clear:both;}
.chrMain > li{position:relative;float:left;width:33.333%;padding:25px 0;text-align:center;}
/* .chrMain > li:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background-image:url('../images/layout/pattern-dotted.png');background-position:left bottom;background-repeat:repeat-x;}
.chrMain > li:nth-child(4n-3), .chrMain > li:nth-child(4n-2), .chrMain > li:nth-child(4n-1){background-image:url('../images/layout/pattern-dotted-vtc.png');background-position:right top;background-repeat:repeat-y;}
 */

.chrMain > li{height:375px; border-right:1px solid #eaeaea;}

.chrMain > li:nth-child(-n+3) {border-bottom:1px solid #eaeaea;}
.chrMain > li:nth-child(3n){border-right:0}
.chrMain > li.empty:before{content:'';position:absolute;top:80px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:100px;background-color:#e5e5e5;}
.chrMain > li img{height:35px; width:auto}

.section .cont .chrMain > li h2{margin:25px auto; width:calc(100% - 60px);font-size:22px;color:#555555; border-bottom:1px solid #191919; padding-bottom:25px}
.section .cont .chrMain > li a{display:inline-block;padding:6px;font-size:16px;color:#666;line-height:1.2;}
.section .cont .chrMain > li a:hover, .chrMain > li a:focus{color:#000; text-decoration:underline;}

.section .cont .chrMain > li span.mark{position:absolute; width:45px; left:-46px;border-radius:50px;color:#fff; background:#E40E1A; padding:2px 0; box-sizing:border-box;display:inline-block; font-size:12px;}
.section .cont .chrMain > li span.cashUp:after{content:"";display:inline-block;width:8px;height:11px; background:url(../images/cashcharge/ico-up.png) center center no-repeat; background-size:100%; margin-left:2px}
.section .cont .chrMain > li span.cashBack{width:70px; left:-71px;}
/* .section .cont .chrMain > li.mark{border-radius:50px; color:#fff; background:#E40E1A; padding:2px 8px; box-sizing:border-box; margin-right:3px; display:inline-block; font-size:12px;}
.section .cont .chrMain > li.cashUp:after{content:"";display:inline-block;width:8px;height:11px; background:url(../images/cashcharge/ico-up.png) center center no-repeat; background-size:100%; margin-left:2px}
 */
.section .cont .chrMain > li{display:flex; align-items:center; flex-direction:column}
.section .cont .chrMain > li ul li {line-height:1.8}
.section .cont .chrMain > li ul li a{position:relative;}

/* 충전메인 상단 */
.chrMain.top > li{cursor:pointer;height: 192px; border:1px solid transparent; justify-content:center; position:relative;}
.section .cont .chrMain.top > li h2{ width:auto; display:flex; align-items:center; position:relative; border-bottom:0; padding-bottom:0; margin:25px auto 0;}
.section .cont .chrMain.top > li span.mark {top:4px; left:-50px}
.chrMain.top > li:hover, .chrMain.top > li:focus{border:1px solid #e6000f;background-image:url('../images/layout/viewmore-bg.png');background-position:right top;background-repeat:no-repeat;}
.chrMain.top > li:after{content:""; height:192px; width:1px; position:absolute; top:0; left:0; background-image: url('../images/layout/pattern-dotted-vtc.png');background-position: left bottom;background-repeat: repeat-y;}
.chrMain.top > li:first-child:after{background:none}

/* 충전 - 네이버페이 추가 (2022-06-21 이나연)*/
.chrMain > li {height:415px;}