@charset "UTF-8";

.inner{position: relative;}
.inner2{margin:0 20px;}
.wifi-contents{width:100%; margin:0 auto;}
.wifi-contents .content{width:100%;}
.wrapper.wifi{padding-top:0;}

/*헤더*/
header{width:100%; margin:0 auto; text-align:center;}
header h1{font-weight: bold; font-size: 50px; line-height: 54px; color: #333333; padding:20px 0;}
header .wifi-menu{overflow:hidden; background-color: #F8F8F8; border-top:1px solid #ddd;}
header .wifi-menu li{float:left; width:calc(100%/3);}
header .wifi-menu li a{display:block; font-size: 26px; line-height: 38px; color: #666666; padding:20px 0;}
header .wifi-menu li:nth-child(1) a{width:180px; height:56px; line-height:56px; font-weight: bold; font-size: 20px; color: #FFFFFF; border-radius: 10px; margin:12px auto 0;padding:0 0 0 36px; background:url(../image/main/fa-solid_wifi.png) no-repeat 15px center #0070BD;}

/*비디오영역*/
.wifi-video{display: block; overflow: hidden; position: relative; width: 100%; height: 230px; margin: 0 auto; background:#000;}
.wifi-video img{width:100%;}
.wifi-video video{display: block; position: relative; width: 100%; height: auto; /* padding-bottom: 56.25%; */ max-width: 2560px; pointer-events: none;}

/*게시판*/
.wifi-board{position: relative; margin:30px 0 39px;}
.wifi-board .wifi-tab-btn{width: 50%; height: 56px; font-size: 16px; display: block; position: absolute; top: 0; left: 0; text-align: center; background: #fff; color: #000; line-height: 54px; border-bottom:2px solid #2D2B6F;}
.wifi-board .wifi-tab-btn.nth-2{left:50%;}
.wifi-board .wifi-tab-btn.on{background: #2D2B6F; color: #fff; border: 1px solid #2D2B6F;}
.wifi-board ul{}
.wifi-board ul li ul{display:none; padding-top:56px;}
.wifi-board ul li ul.on{display:block;}
.wifi-board ul li ul li{border-bottom:1px solid #ddd;}
.wifi-board ul li a{display: block; clear: both; position: relative; width: 100%; height: 58px; line-height: 58px;}
.wifi-board ul li a span.one-line{float:left; overflow: hidden; width: calc(100% - 100px); font-weight: 400; color: #333; white-space: nowrap; text-overflow: ellipsis;}
.wifi-board ul li a span.date{float: right; width: 75px; width: 90px; text-align: right; font-size: 15px; color: #666; padding-right: 2px;}

.wifi-list{}
.wifi-list ul{overflow:hidden;text-align:center;margin: 0 10px;}
.wifi-list ul li{width: 31.3%;/* float: left; */float: left;}
.wifi-list ul li a{display:block; background:url(../image/main/uil_wifi-router.png) no-repeat center 9px #c75e56; font-weight: 500; font-size: 16px; line-height: 23px; color: #FFFFFF; padding:59px 0 10px; border-radius: 10px;
}
.wifi-list ul li:nth-child(2){margin: 0 3%;}
.wifi-list ul li:nth-child(2) a{background:url(../image/main/uil_coronavirus.png) no-repeat center 9px #7387CA;}
.wifi-list ul li:nth-child(3) a{background:url(../image/main/tabler_route.png) no-repeat center 9px #75A6B0;}

/*슬라이드 배너*/
.wp-slide-wrap{margin-top:30px;}
.wp-slide-wrap .wp-slide-button {display:block;overflow:hidden;position:absolute; top:50%;margin-top:-18px; width:30px; height:36px; z-index:50;}
.wp-slide-wrap .wp-slide-button > button { display:block;overflow:hidden;position:relative;width:30px;height:36px;background-color:rgba(0, 0, 0, 0.5); background-repeat:no-repeat;background-position:50% 50%;background-size:8px auto;}
.wp-slide-wrap .wp-slide-button > button > span{display:block;overflow:hidden;position:absolute;left:-999999999999px;}
.wp-slide-wrap .wp-slide-button > button:hover,
.wp-slide-wrap .wp-slide-button > button:focus {background-color:rgba(0, 0, 0, 0.9);}
.wp-slide-wrap .wp-slide-button.wp-slide-prev {left:20px;}
.wp-slide-wrap .wp-slide-button.wp-slide-next {right:20px;}
.wp-slide-wrap .wp-slide-button .owl-prev {background-image:url(../image/slider-arrow-left.png);}
.wp-slide-wrap .wp-slide-button .owl-next {background-image:url(../image/slider-arrow-right.png);}
.wp-slide-wrap .count-wrap {background:rgba(0, 0, 0, .8); width:80px; height:36px; right:56px; bottom:0; font-size:12px; color:#1e9fd5; line-height:35px; position:absolute; z-index:50; text-align:center;}
.wp-slide-wrap .count-wrap > .current {color:#fff; font-weight:bold; margin-right:3px;}
.wp-slide-wrap .count-wrap > .total {color:#1e9fd5; font-weight:bold; margin-left:3px;}
.wp-slide-wrap .play-button-wrap {position:absolute; bottom:0; right:20px; width:36px; height:36px; background:rgba(0, 0, 0, .8); z-index:50;}
.wp-slide-wrap .play-button-wrap > button { display:block;overflow:hidden;float:left;position:relative;width:36px;height:36px;background-repeat:no-repeat;background-position:50% 50%;background-size:8px auto;}
.wp-slide-wrap .play-button-wrap > button > span{display:block;overflow:hidden;position:absolute;left:-999999999999px;}
.wp-slide-wrap .play-button-wrap > button:focus {outline:1px solid #a6c8ff;}
.wp-slide-wrap .play-button-wrap > .play {background-image:url(../image/icon-play.png); }
.wp-slide-wrap .play-button-wrap > .stop {background-image:url(../image/icon-pause.png);background-size:10px auto;}
.wp-slide-wrap .owl-dots{display:none;}

/*푸터*/
.footer-wrap{padding:15px 0;}
.footer-address .address,
.footer-address .copyright,
.footer-mark{float:none; position: static; display: block; overflow: hidden; position: relative; width: 100%; margin: 0 0 10px 0; text-align: center; line-height: 1.5;}
.footer-mark li{display: inline-block; float: none; margin: 0 10px; text-align: center;}

.wrapper.wifi .wp-slide-wrap{margin:0 20px;}

@media only screen and (max-width:768px){
    .wp-slide-wrap,
    .wp-slide-wrap .main-event-slide .item img { height:100%;}
}

@media only screen and (max-width:640px){
    .wifi-video{height:100%;}
}

@media only screen and (max-width:565px){
    header h1{font-size:45px;}
    header .wifi-menu li a{font-size:22px;}
    header .wifi-menu li:nth-child(1) a{font-size:18px;}
}

@media only screen and (max-width:480px){
    .wp-slide-wrap,
    /* .wp-slide-wrap .main-event-slide .item img { height:320px;} */

    header h1{font-size:35px;}
    header .wifi-menu{padding:0 5px;}
    header .wifi-menu li{float:none; display:inline-block;}
    header .wifi-menu li:nth-child(2){width:22%;}
    header .wifi-menu li:nth-child(3){width:42%;}
    header .wifi-menu li a{font-size:18px;}
    header .wifi-menu li:nth-child(1) a{width:100%; font-size:14px; padding: 0 0 0 20px; background-size:20px; background-position:5px center;}
    
}