@charset 'UTF-8';

@font-face { font-family: 'Makgeolli'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/Makgeolli.woff') format('woff'); font-weight: normal; font-style: normal; }

html, body{width:100%;height:100%;}

/*banner*/
.mainBanner{position:absolute;top: 167px;right:0;padding: 10px 0 10px 14px;width: 100%;background:#1a5269 url("/images/01_web/main/bg_mainBanner.png")no-repeat 98% 50%;}
.mainBanner a{text-indent:-9999px;color:#fff;line-height:34px; font-size:0px;background:url("/images/01_web/main/bg_bannerTxt.png")no-repeat 0 72%;display:block;height:53px;}
.mainBanner a > span{color:#ffde4f; font-size:00px; font-family:"dokdo", serif;}

/* Container */
.mainVisual{height:300px; background:#34a3d1 url('/images/02_mobile/common/bg_mvisual_1.jpg') no-repeat 50% 0; position:relative;}
.mainArea{position:relative; width:100%; height:100%;}
.mainArea .mainBox{width:95%; position:absolute;top:7px; left:2.5%; margin-left:0;}
.search{position:absolute;left:0%;top: 35px;}
.search form input[type="search"]{position:relative;width:380px;height:40px;line-height:40px;border-radius:30px;color:#000;font-size:1.2em;font-family:'NanumGothic','나눔고딕';padding-left:20px;background:#fff ;border:none;box-shadow : 1px 0 2px #333 inset;}
.search #searchBtn{position:absolute;right:0;top:0;width:60px;height:40px;line-height:40px;background:url('/images/01_web/main/btn_search.png') no-repeat 100% 0;text-indent:-9999em;background-size:auto 40px;}

.monthEvent{float:left; width:50%; text-align: center;}
.monthEvent a{display:block; width:98px; height:50%; margin-bottom:5px;}
.monthEvent a > img {width:100%;}

.weather{float:right; overflow:hidden; width:50%;}
.weather ul{float:left;width:72px;height:72px;overflow:hidden;}
.weather ul li{background:url('/images/01_web/main/ico_weather.png') no-repeat center;width:100%;height:100%;text-indent:-9999em;}
.weather ul li.w1{background:url('/images/01_web/main/ico_weather.png') no-repeat center;background-size:80%;}
.weather ul li.w2{background:url('/images/01_web/main/ico_weather2.png') no-repeat center;background-size:80%;}
.weather ul li.w3{background:url('/images/01_web/main/ico_weather3.png') no-repeat center;background-size:80%;}
.weather ul li.w4{background:url('/images/01_web/main/ico_weather4.png') no-repeat center;background-size:80%;}
.weather ul li.w5{background:url('/images/01_web/main/ico_weather5.png') no-repeat center;background-size:80%;}
.weather ul li.w6{background:url('/images/01_web/main/ico_weather6.png') no-repeat center;background-size:80%;}
.weather ul li.w7{background:url('/images/01_web/main/ico_weather7.png') no-repeat center;background-size:80%;}
.weather .weaterTxt{float:left;padding-top:10px;text-shadow:1px 1px 10px #1882ae;}
.weather .weaterTxt p{color:#fff;}
.weather .weaterTxt span{font-size:2em;color:#fff;}

.eventLayer .event2{position:absolute;width:100%; max-width:430px; height:60%; left:50%; transform:translate(-50%, 0); bottom:0}
.eventLayer .event2 .rollImg{height:100%;}
.eventLayer .event2 ul{height:100%; overflow:hidden;}
<!-- .eventLayer .event2 ul li{height:100%;text-align:center;background:url('/images/02_mobile/main/m_slide1.png') center no-repeat; padding-top:30px; background-size: cover !important; } -->
.eventLayer .event2 ul li{height:100%;text-align:center;background:url('/upload_data/board_data/BBS_0000181/161484165369316.png') center no-repeat; padding-top:30px; background-size: cover !important; }
.eventLayer .event2 ul li.r2{background:url('/images/02_mobile/main/m_slide2.png') center no-repeat;}
.eventLayer .event2 ul li.r3{background:url('/images/02_mobile/main/m_slide3.png') center no-repeat;}
.eventLayer .event2 ul li.r4{background:url('/images/02_mobile/main/m_slide6.png') center no-repeat;}
.eventLayer .event2 ul li.r5{background:url('/images/02_mobile/main/m_slide5.png') center no-repeat;}
.eventLayer .event2 ul li a{width:100%; display: block; height:100%;}

/*메인 퀵메뉴*/
.qTit{text-align:center;font-family:'Makgeolli';font-size:2.500em;color:#4d4d4d; padding-bottom:25px;}
.mainQmenu{width:100%;background:#f9f8f9;overflow:hidden;padding:20px 0 15px;}
.mainQmenu > div > ul{width:100%;overflow:hidden;}
.mainQmenu > div > ul > li{float:left;width:20%;}
.mainQmenu > div > ul > li > a{height:100%;display:block;text-align:center;padding-top:114px;font-size:1.2em;line-height:1.1;}
.mainQmenu > div > ul > li > a.ico1{background:url('/images/02_mobile/main/img_mainQuick6.png') no-repeat center 0;}
.mainQmenu > div > ul > li > a.ico2{background:url('/images/02_mobile/main/img_mainQuick7.png') no-repeat center 0;}
.mainQmenu > div > ul > li > a.ico3{background:url('/images/02_mobile/main/img_mainQuick8.png') no-repeat center 0;}
.mainQmenu > div > ul > li > a.ico4{background:url('/images/02_mobile/main/img_mainQuick9.png') no-repeat center 0;}
.mainQmenu > div > ul > li > a.ico5{background:url('/images/02_mobile/main/img_mainQuick10.png') no-repeat center 0;}


.mainTour{position:relative;padding:0 0 0 0;}
.mainTour .sightsBox{width:100%;margin:0 auto;}
.mainTour .sightsImg{position:relative;/*height:250px;*/height:200px;}
.mainTour .sightsImg ul{/*height:250px;*/overflow:hidden;}
.mainTour .sightsImg ul > li{/*height:100%;*/height:200px;background:#000;}
.mainTour .sightsBox ul > li > div{position:relative;}
.mainTour .sightsImg .desc{position:absolute;bottom:0;width:100%;height:54px;background:url('/images/01_web/main/bg_opacity.png') repeat;color:#fff;line-height:54px;padding-left:20px;font-size:1.5em;}
.mainTour .sightsImg .desc p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.mainTour .sightsCate{width:100%;background:#5e7381;padding:15px;color:#fff;}
.mainTour .sightsCate h3{font-size:1.6em;font-family:'SeoulNamsanL','서울남산체';margin-bottom:10px;}
.mainTour .sightsCate ol{overflow:hidden;}
.mainTour .sightsCate ol > li{width:31%;overflow:hidden;margin:5px 3% 5px 0;float:left;}
.mainTour .sightsCate ol > li:nth-child(3n+3){margin-right:0;}
.mainTour .sightsCate ol > li > a{color:#fff;padding-left:8px;line-height:25px;font-size:1.1em;}
.mainTour .sightsCate ol > li > a:hover{color:#bfffeb;}
.mainTour .sightsCate ol > li > i{float:left;background:#fff;width:23px;height:23px;border-radius:100%;display:block;text-align:center;font-family:'SeoulNamsanL','서울남산체';font-style:normal;font-weight:600;color:#424242;line-height:23px;}
.mainTour .sightsCate ol > li.on > i{background:#5db492;color:#fff;}
.mainTour .sightsCtrl{width:100%;margin:0 auto;}
.mainTour .sightsCtrl > div{position:absolute;bottom:94px;width:70px;right:10px;}
.mainTour .sightsCtrl a{display:inline-block;width:30px;height:30px;font-size:0;text-indent:-9999em;border:1px solid #7e8f9a;background-color:#fff;margin-right:5%;}
.mainTour .sightsCtrl a.prev{background:url('/images/02_mobile/main/ico_scrollLeft.png') no-repeat center; background-size:auto 20px;}
.mainTour .sightsCtrl a.next{background:url('/images/02_mobile/main/ico_scrollRight.png') no-repeat center;background-size:auto 20px;margin:0;}
.mainTour .sightsCtrl a:hover , .mainTour .sightsCtrl a:focus{opacity:1;}
.mainTour .srollBtn{text-align:center;}
.mainTour .srollBtn div{display:inline-block;margin-top:10px;}
.mainTour .srollBtn div a{display:block;width:15px;height:15px;text-indent:-9999em;background:#636f70;border-radius:100%;margin:0 2px;}
.mainTour .srollBtn div a:hover, .srollBtn div a.on{opacity:1;background:#000;}
.mainTour .srollBtn div a.stop{border-radius:0;background:url('/images/01_web/main/btn_srollstop.gif') no-repeat;}


.mainCont{width:100%;padding:20px 10px;background:url('/images/02_mobile/main/bg_patten01.jpg') repeat;}
.mainCont .topArea{overflow:hidden;}
.mainCont .topArea ul.mlist{overflow:hidden;width:100%;float:left;}
.mainCont .topArea ul.mlist li{float:left;text-align:center;width:23%;height:170px;box-shadow:1px 1px 1px 1px #c4c5b5;margin:0 0 15px 1.5%;}
.mainCont .topArea ul.mlist li a {display:block;padding-top:130px;font-weight:600;font-size:1.3em;height:100%;}
.mainCont .topArea ul.mlist li a.cate01{background:url('/images/02_mobile/main/img_mlist1.png') no-repeat 50% 0; background-size:100% 130px;}
.mainCont .topArea ul.mlist li a.cate02{background:url('/images/02_mobile/main/img_mlist2.png') no-repeat 50% 0; background-size:100% 130px;}
.mainCont .topArea ul.mlist li a.cate03{background:url('/images/02_mobile/main/img_mlist3.png') no-repeat 50% 0; background-size:100% 130px;}
.mainCont .topArea ul.mlist li a.cate04{background:url('/images/02_mobile/main/img_mlist4.png') no-repeat 50% 0; background-size:100% 130px;}
.mainCont .topArea ul.mlist li a:hover{text-decoration:none;color:#e03a41;}
.mainCont .topArea ul.mlist li a span{display:block;background-color:#fff;padding:10px 0;}

.mainCont .btmArea{overflow:hidden;width:97%;margin:0 1.9% 0 auto;}
.mainCont .btmArea h3{font-size:1.8em;font-family:'SeoulNamsanL','서울남산체';margin-bottom:10px;}
.mainCont .btmArea .app{float:left;width:250px;height:254px;padding:30px 0 0;background:url('/images/02_mobile/main/bg_app.png') no-repeat;color:#fff;text-align:center;}
.mainCont .btmArea .app h3 span{color:#fbff84;}
.mainCont .btmArea .app > i{background:url('/images/02_mobile/main/img_mobile.png') no-repeat;width:250px;height:99px;display:block;font-size:0;text-indent:-9999em;}
.mainCont .btmArea .app > ul{overflow:hidden;margin-top:30px;}
.mainCont .btmArea .app > ul > li{float:left;text-align:left;width:50%;padding-left:20px;overflow:hidden;}
.mainCont .btmArea .app > ul > li > a{display:block;color:#fff;font-size:0.9em;line-height:20px;line-height:120%;}
.mainCont .btmArea .app > ul > li > a > i{width:40px;height:40px;display:block;background:url('/images/02_mobile/main/ico_app.png') no-repeat;float:left;}
.mainCont .btmArea .app > ul > li > a.ios > i{background-position:-120px 0;}
.mainCont .btmArea .cateBox{float:left;width:100%;background-color:#fff;}
.mainCont .btmArea .cateBox ul{overflow:hidden;width:100%;}
.mainCont .btmArea .cateBox ul:after{clear:both;content:"";display:block;}
.mainCont .btmArea .cateBox ul > li{float:left;width:25%;height:110px;text-align:center;border-left:1px solid #eeeeee;border-top:1px solid #eeeeee;}
.mainCont .btmArea .cateBox ul > li:nth-child{}{border-bottom:none;}
.mainCont .btmArea .cateBox ul > li > a{display:block;padding-top:70px;background:url('/images/02_mobile/main/ico_catebox01.png') no-repeat;background-size:auto 50px !important;}
.mainCont .btmArea .cateBox ul > li > a.ico01{background:url('/images/02_mobile/main/ico_catebox01.png') no-repeat center center;background-size:auto 40px !important;}
.mainCont .btmArea .cateBox ul > li > a.ico02{background:url('/images/02_mobile/main/ico_catebox02.png') no-repeat center center;background-size:auto 40px !important;}
.mainCont .btmArea .cateBox ul > li > a.ico03{background:url('/images/02_mobile/main/ico_catebox03.png') no-repeat center center;}
.mainCont .btmArea .cateBox ul > li > a.ico04{background:url('/images/02_mobile/main/ico_catebox04.png') no-repeat center center;}
.mainCont .btmArea .cateBox ul > li > a.ico05{background:url('/images/02_mobile/main/ico_catebox05.png') no-repeat center center;}
.mainCont .btmArea .cateBox ul > li > a.ico06{background:url('/images/02_mobile/main/ico_catebox06.png') no-repeat center center;}
.mainCont .btmArea .cateBox ul > li > a.ico07{background:url('/images/02_mobile/main/ico_catebox07.png') no-repeat center center;}
.mainCont .btmArea .cateBox ul > li > a.ico08{background:url('/images/02_mobile/main/ico_catebox08.png') no-repeat center center;background-size:auto 40px !important;}
.mainCont .btmArea .cateBox ul > li > a.ico09{background:url('/images/02_mobile/main/ico_catebox09.png') no-repeat center center;background-size:auto 30px !important;}

.brTag{display:none;}


@media only screen and (max-width: 600px){

    /*메인비쥬얼*/
    .mainVisual{background-position:50% 100%;}
    .search form input[type="search"]{width:320px;font-size:1.1em;}
    .weather{padding-left:0;}

    /*1번째 섹션*/
    .mainQmenu > div > ul > li > a.ico1{background-size:auto 70px;}
    .mainQmenu > div > ul > li > a.ico2{background-size:auto 70px;}
    .mainQmenu > div > ul > li > a.ico3{background-size:auto 70px;}
    .mainQmenu > div > ul > li > a.ico4{background-size:auto 70px;}
    .mainQmenu > div > ul > li > a.ico5{background-size:auto 70px;}
    .mainQmenu > div > ul > li > a {font-size:1.1em;padding-top:80px;}

    /*2번째 섹션*/
    .mainTour .sightsImg .desc{font-size:1.2em}
    .mainTour .sightsImg img{/*width:auto;height:250px;*/width:100%;height:200px;}
    .mainTour .sightsCate ol > li{width:45%;}
    .mainTour .sightsCate ol > li:nth-child(3n+3){margin-right:3% !important;}
    .mainTour .sightsCtrl > div{bottom:128px;}
    .brTag{display:block;}

    /*3번째 섹션*/
    .mainCont .topArea ul.mlist li{height:130px;}
    .mainCont .topArea ul.mlist li a{padding-top:90px;background-size:100% 90px !important;}
    .mainCont .btmArea .cateBox ul > li > a{background-size:auto 40px !important;}
    .mainCont .btmArea .cateBox ul > li > a.ico01,
    .mainCont .btmArea .cateBox ul > li > a.ico08{background-size:auto 30px !important;}
    .mainCont .btmArea .cateBox ul > li > a.ico09{background-size:auto 25px !important;}
    .mainCont .btmArea .cateBox ul > li > a.ico02{background-size:auto 30px !important;}

}
@media only screen and (max-width: 400px){

    .search form input[type="search"]{width:300px;}
    .mainQmenu > div > ul > li > a.ico1{background-size:auto 60px;}
    .mainQmenu > div > ul > li > a.ico2{background-size:auto 60px;}
    .mainQmenu > div > ul > li > a.ico3{background-size:auto 60px;}
    .mainQmenu > div > ul > li > a.ico4{background-size:auto 60px;}
    .mainQmenu > div > ul > li > a.ico5{background-size:auto 60px;}
    .mainQmenu > div > ul > li > a {font-size:1.1em;padding-top:70px;}
    .mainCont .btmArea .cateBox ul > li > a{font-size:0.9em}
    .mainCont .btmArea .cateBox ul > li > a.ico01{background-size:auto 45px;}
    .mainCont .btmArea .cateBox ul > li > a.ico02{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico03{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico04{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico05{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico06{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico07{background-size:auto 50px;}
    .mainCont .btmArea .cateBox ul > li > a.ico08{background-size:auto 45px;}
    .mainCont .btmArea .cateBox ul > li > a{font-size:0.8em}
    
    .mainTour .sightsCate ol > li:nth-child(3n){margin-right:3%;}
    .mainTour .sightsCtrl a.prev,.mainTour .sightsCtrl a.next{top:80px;}

}
@media only screen and (max-width: 320px){

    .search form input[type="search"]{width:280px;}

}