@charset "UTF-8";

/* common, reset ==============================================================================================*/
.form-control{height: 40px;}
body.on{right:70%;}

/* header ==============================================================================================*/
header{position: fixed; left:0; width: 100%; transition: 0.5s; height: 50px;}
body.on header{transform: translateX(-70%);}
/*
header h1{padding-top: 5px;}
header h1 a img{width: 150px;}
*/
header #logo {padding-top: 5px;}
header #logo a img{width: 40px;}
header .btn-group{display: block; position: absolute; right:10px; top:10px;}
header .btn-group button{}
header .btn-group #btn-menu{display: block;}
header nav.gnb-nav{
  position: fixed; top: 0; right: -70%; width: 70%;
  padding: 0; height: 100%;
  background: #fff;
  transition: 0.5s; text-align: left;
  overflow-y: auto;
}
body.on header nav.gnb-nav{box-shadow: 0 0 2px #000;}
header nav ul li a:hover, header nav ul li a:focus{color:#00bcd4;}
header nav .depth1{display: block;}
header nav .depth1 > li{float: none; padding: 0;}
header nav .depth1 > li > a{height: 40px; line-height: 40px; padding-left: 10px;}
header nav .depth1 > li > a::after{display: none;}
header nav .depth1 > li.on > a{border-left:4px solid #00bcd4; border-bottom:1px solid #00bcd4;}
header nav .depth2-wrap{
  position: relative; top: 0; border:none; border-bottom:1px solid #00bcd4;
  background: none; padding: 10px 0; height:auto; background: #f4f4f4;}
header nav .depth2-wrap h2{display: none;}

header nav .depth2{margin: 0; height: auto; border: 0; }
header nav .depth2 > li{float: none; width: auto; margin: 0; display: block;}
header nav .depth2 > li > a{font-size: 16px; color: #777;}
header nav .depth2 > li > a i{display: none;}
header nav .depth3{display: block; position: static; border-top: 1px solid #ccc; padding-top: 5px; padding-left: 0; height: auto; border-left:0;}
header nav .depth3 li a{color:#777;}
header .form-search{top:50px;}
header .form-search .center{margin: 10px;}
header .form-search .form-group{margin-right: 40px;}
header .form-search .form-group input[type=text]{width: 100%;}
header .form-search button{width: 40px; height: 40px;}

/* contents ==============================================================================================*/
.contents{margin-top: 50px;}
.main-ad .main-slide{float: none; width: 100%; height: auto;}
.main-ad .main-slide .swiper-slide .wrap{padding: 20px;}
.main-ad .main-slide .swiper-slide .wrap .title{font-size: 20px;}
.main-ad .main-slide .swiper-slide .wrap .title::after{margin: 20px 0;}
.main-ad .main-slide .swiper-slide .wrap p{font-size: 14px; padding-bottom:20px;}

.main-control{position: relative; bottom:0; height: 30px; margin-bottom: 10px;}
.main-control .btn-group{padding-right: 10px}
.main-control .swiper-pagination{left:10px; transform: none;}
.sub-view{display: none;}

.quick-nav nav ul li{float: left; width:50%;}
.quick-nav nav ul li a i{font-size: 40px;}
.quick-nav nav ul li a span{font-size: 12px;}

.board{margin: 0 auto; padding: 10px;}
.board .row{margin: 0;}
.board .col{float: none; width: 100%;}
.board nav{margin: 0;}
.board .tab-nav > li > a{padding: 0 10px; font-size: 12px; line-height: 35px; height: 35px;}
.board .tab-contents{top:35px;}
.board .tab-contents li{position: relative; font-size: 14px;}
.board .tab-contents li a,
.board .tab-contents li span{font-size: 12px;}
.board .more{right:5px; top:10px;}

.video{margin: 0;}

.card-view h2{text-align: left; padding-left: 10px;}
.card-view .sub-title{text-align: left; padding-left: 10px;}
.card-view .btn-group{top:0;right: 10px;}
.card-view .card-list{margin: 0 auto;}
.card-view .card-list ul li{width: 95%;}
.card-view .card-list ul li a{margin: 5px;}
.card-view .card-list ul li a:hover{transform:none;}
.card-view .fa-angle-left,
.card-view .fa-angle-right{display: none;}

.banner{padding: 10px;}
.banner h2{top:0; font-size: 14px;}
.banner button{left:70px; top:4px;}
.banner .wrap{height: 20px;}
.banner .wrap ul li a{height: 20px;}

/* sub page ==============================================================================================*/
.left-nav{display: none;}
.contents-box{min-height: auto; margin-left:0; border-left:0;padding: 10px;}
.contents-box h3{text-align: center; font-size: 24px; margin-bottom: 10px;}

.breadcrumb{position: relative; right:0; top:0;}

.search-form{padding: 10px;}
.search-form .form-group{float: none !important; margin-bottom:10px;}
.search-form .form-group:last-child{margin-bottom: 0;}
.search-form .form-group [type=text]{width: 100%;}
.search-form .form-group button{width: 40px; height: 40px;}

.category ul li{width:100%; text-align: left;}
.category .count{text-align: center; margin: 0 10px 10px 0;width: 50px; height: 50px; line-height: 50px; font-size: 20px;}
.category .category-name{display: inline-block; text-align: left; color:#777; padding: 0;}

.table-style1 .text-left a{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.table-style2 th, .table-style3 td{font-size: 12px;}
.table-style2 .col{float: none;width: 100%;}
.table-style2 .col .form-group{margin-bottom: 5px; padding-right:0;}
.table-style2 .col:last-child .form-group{margin-bottom: 0;}

/* footer ==============================================================================================*/
footer{text-align: center;font-size: 11px;}
footer nav{float: none;}
footer address{margin: 20px 0;}

.sns{position: static; padding: 20px 0 0;}
.sns > ul > li{margin: 0 5px;}

/* popup ==============================================================================================*/
.popup{ width: 100%; height: 100%; top:0; left:0; transform: none; border:none;}