@charset "utf-8";

#contents{position: relative; width: 90%; max-width: 1440px; margin: 200px auto;}

#topBanner0{background-image: url(../img/topbanner0.png); } /* 소개 연역 */
#topBanner1{background-image: url(../img/topbanner1.png); } /* 요금, 이용 */
#topBanner2{background-image: url(../img/topbanner2.png); } /* 제휴 */
#topBanner3{background-image: url(../img/topbanner3.png); } /* 경로, 취급점 */
#topBanner4{background-image: url(../img/topbanner4.png); } /* 경로, 취급점 */

.topBanner{position: relative; background-size: cover; background-position: center; z-index: 1;}
.topBanner .top_inner{position: relative; width: 90%; max-width: 1440px; height: 450px;margin: 0 auto;}



.topBanner .lnb{position: absolute; left: 0; transform: translateX(2%); bottom: 30px; display: flex; }
.topBanner .lnb>li{margin-right: 30px; position: relative;}
.topBanner .lnb>li .img_box{transition-duration: 0.3s;}
.topBanner .lnb>li .select_btn{background: none; border: none; color: #fff; font-size: 16px;display: flex; align-items: center; justify-content: space-between; width: 100%;}
.topBanner .lnb li.pick a{color: #333; font-weight: 500;}
.topBanner .lnb>li::after{content: ''; position: absolute; width: 1px; height: 20px; background-color: #fff; right: -15px; top: 0;}
.topBanner .lnb>li:last-child:after{display: none;}

.topBanner .lnb>li:nth-child(1)~li{width: 150px;}

.topBanner .lnb>li>ul{position: absolute; left: 0;top: 30px; background-color: #FFAA45; width: 150px; padding: 10px; box-sizing: border-box; border-radius: 5px; display: none;}
.topBanner .lnb>li>ul>li a{line-height: 30px; color: #ffffffb2;}
.topBanner .lnb>li>ul>li:hover a{color: #444; font-weight: 500;}


@media screen and (min-width:1441px) {
    .topBanner .top_title{position: absolute; left: 0; top: 70%; transform: translate(2%,-50%); color: #fff; font-size: 3vw;font-weight: 500; transition-duration: 0.8s; opacity: 0;}
}

@media screen and (min-width:1201px) and (max-width:1440px) {
    .topBanner .top_title{position: absolute; left: 0; top: 70%; transform: translate(2%,-50%); color: #fff; font-size: 3.2vw;font-weight: 500; transition-duration: 0.8s; opacity: 0;}
}

@media screen and (min-width:801px) and (max-width:1200px) {
    .topBanner .top_title{position: absolute; left: 0; top: 70%; transform: translate(2%,-50%); color: #fff; font-size: 3.6vw;font-weight: 500; transition-duration: 0.8s; opacity: 0;}
}

@media screen and (min-width:601px) and (max-width:800px) {
    .topBanner .top_title{position: absolute; left: 0; top: 70%; transform: translate(2%,-50%); color: #fff; font-size: 4.5vw;font-weight: 500; transition-duration: 0.8s; opacity: 0;}
}

@media screen and (max-width:600px) {
    .topBanner .top_title{position: absolute; left: 0; top: 70%; transform: translate(2%,-50%); color: #fff; font-size: 8vw;font-weight: 500; transition-duration: 0.8s; opacity: 0;}

    .topBanner .lnb>li{margin-right: 20px; position: relative;}
    .topBanner .lnb>li:nth-child(1)~li{width: 115px;}
    .topBanner .lnb>li>ul{position: absolute; left: 0;top: 30px; background-color: #FFAA45; width: 115px; padding: 10px; box-sizing: border-box; border-radius: 5px; display: none;}
}