@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* common, reset ==============================================================================================*/
*{margin: 0; padding: 0;}
body{position: relative; right:0; transition: right 0.5s; font-family: "Roboto", Arial, sans-serif; font-size: 16px;}
a{text-decoration: none; color:#777;}
a:hover{color:#00BCD4; text-decoration: none;}
li{list-style: none;}
button{border:none; background: none; cursor: pointer; outline: none;}
table{width: 100%;}
table, th, td{border-collapse: collapse;padding: 5px;}
textarea{display: block;border: 0;border-bottom: 1px solid #ccc;width: 100%; height: 100px; resize: none;}

.center{position: relative; max-width: 1200px; margin: auto;}
.blind{position: absolute; left:-9999px; width: 0; overflow: hidden;}
.form-control{height: 30px; border:0; border-bottom:1px solid #ccc; padding: 0 10px; box-sizing: border-box;}
.btn-primary{color: #fff; background: #00BCD4;}
.bg-wrap{content: ''; position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 10; background: rgba(0,0,0,0.5);}
.text-left{text-align: left !important;}
.fl-right{float: right !important;}
.mb20{margin-bottom: 20px;}

/* header ==============================================================================================*/
header{position: relative; top: 0; z-index: 100; height:80px; background: #fff; border-bottom:1px solid #ccc;}
header > .center{padding: 0 20px;}
/*
header h1{position: absolute; padding-top: 13px;z-index: 1;}
header h1 a img{width: 200px;}
*/
header #logo {position: absolute; padding-top: 13px;z-index: 1;}
/*header #logo a img{width: 200px;}*/
header .btn-group{display: block; position: absolute; right:20px; top:27px;z-index: 1;}
header .btn-group button{float: left; margin-left: 10px; font-size: 1.5em; width: 30px; height: 30px; color:#1c82b7;}
header .btn-group #btn-menu{display: none;}

header nav.gnb-nav{
	position: relative; 
	/*left: 60px;*/ 
	padding-top: 28px; 
	text-align: center;
}
header nav .depth1::after{
	content: ''; 
	display: block; 
	clear: both;
}
header nav .depth1{display: inline-block;}
header nav .depth1 > li{
	float: left; 
	padding: 0 20px;
}
header nav .depth1 > li > a{display: block; height: 52px; line-height: 30px; font-weight: bold; color:#777;}
header nav .depth1 > li > a:hover,
header nav .depth1 > li > a:focus{color:#00bcd4;}
header nav .depth1 > li.active > a{color:#00bcd4;}
header nav .depth1 > li > a::after{content: ''; display: block; background: #00bcd4; height: 4px; transition: 0.5s; width: 0;}
header nav .depth1 > li.on > a::after,
header nav .depth1 > li.active > a::after{width: 100%;}
/*
header nav .depth2-wrap{
  display: none; position: absolute; left: 0; width: 100%; height: 150px; top: 80px;
  text-align: left; padding: 20px 0;
  background: #00bcd4 url(../newimg/menu-bg.png) center right no-repeat;
}
*/
header nav .depth2-wrap{
  display: none; position: absolute; left: 0; width: 100%; height: 150px; top: 80px;
  text-align: left; padding: 0px 0;
  background: #00bcd4 url(../newimg/menu-bg.png) center right no-repeat;
}
header nav .depth2-wrap h2{position: absolute; width: 250px; color:#fff; text-align:right;}
header nav .depth2-wrap h2 span{border-bottom:4px solid #fff; padding-bottom: 5px; margin-right: 20px; font-size:1.1rem}
header nav .depth2{
  position: relative;
  height: 150px;
  margin-left: 250px;
  border-left: 1px solid #fff;
  padding-left: 20px;
}
header nav .depth2 > li{float: left;width: 200px; margin-right:20px;}
header nav .depth2 > li:last-child{margin: 0;}
header nav .depth2 > li > a{display: block; font-weight: bold; font-size: 16px; color:#fff; line-height: 30px;}
header nav .depth2 > li > a:hover{color:#173974;}
header nav .depth3 li{padding-bottom: 10px;}
header nav .depth3 li a{font-size: 14px; color:#fff;}
header nav .depth3 li a:hover{color:#173974;}
header nav .depth3 li a::before{content: '-'; padding-right: 5px;}
header .form-search{display: none; position: absolute; top:80px; width: 100%; right:0; background: #e8e8e8;}
header .form-search.on{display: block;}
header .form-search .center{margin: 20px auto;}
header .form-search .form-group{margin-right: 40px;}
header .form-search .form-group input[type=text]{height: 40px; width: 100%;}
header .form-search button{position: absolute; right:0; top:0; width: 40px; height: 40px;}

/* contents ==============================================================================================*/
.contents{overflow: hidden;}
/* main-ad */
.main-ad{overflow: hidden;background: #1c82b7; color:#fff;}
.main-ad .main-slide{position: relative;float: left; width: 50%; height: 600px;}
.main-ad .main-slide .swiper-container{margin: 0;}
.main-ad .main-slide .swiper-slide{opacity: 0 !important;}
.main-ad .main-slide .swiper-slide-active{opacity: 1 !important;}
.main-ad .main-slide .swiper-slide .wrap{padding: 100px 30px 0 20px;}
.main-ad .main-slide .swiper-slide .wrap .title{display: block; font-size: 30px; font-weight: bold; }
.main-ad .main-slide .swiper-slide .wrap .title::after{content: ''; display:block; width: 100px; height: 5px; background: #fff; margin: 30px 0;}
.main-ad .main-slide .swiper-slide .wrap p{font-size: 16px; padding-bottom:50px;}
.main-ad .main-slide .swiper-slide .wrap a{display: inline-block; transition: 0.3s; padding:10px; border:2px solid #fff; color:#fff; background: rgba(255, 255, 255, 0.3);}
.main-ad .main-slide .swiper-slide .wrap a:hover{background: #fff; color:#1c82b7;}
.main-ad .main-slide .swiper-slide .wrap a i{margin-left: 10px;}
.main-ad .main-slide .swiper-slide img{transition: 0.5s; width: 100%;transform: translateY(50%);}
.main-ad .main-slide .swiper-slide-next img{transform: translateY(50%) scale(1.7);}
.main-control{position: absolute; bottom:20px; width: 100%;}
.main-control .btn-group{float: right; padding-right: 20px;}
.main-control button{width: 30px; height: 30px; font-size: 20px; color:#fff;}
.main-control .swiper-pagination{bottom:5px; left:50%; transform: translateX(-50%);}
.main-control .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 5px; opacity: 1; background: none; border-radius: 5px; border:2px solid #fff; box-sizing: border-box;}
.main-control .swiper-pagination-bullet-active{background: #00bcd4; width: 30px; border:0;}

/* sub-view */
.sub-view{float: right; width: 50%; height: 700px;}
.sub-view ul{overflow: hidden;}
.sub-view ul li{float: left; width: 33.33%;  text-align: center;}
.sub-view ul li a{display: block; height: 100px; color:#fff; border-right:1px solid #fff;}
.sub-view ul li a span{display: block; padding: 20px;}
.sub-view .photo-view{position: relative;transform: translateY(-50%);top: 50%;}
.sub-view .photo-view img{display: block; width: 100%; box-shadow: 0 0 15px 5px rgba(4, 14, 20, 0.3);}

/* quick-nav */
.quick-nav{background: #00bcd4;}
.quick-nav nav ul{overflow: hidden;}
.quick-nav nav ul li{float: left; width:12.5%;}
.quick-nav nav ul li a{display: block; text-align: center;padding: 20px 0; transition: 0.5s;}
.quick-nav nav ul li a:hover{background: #fff;}
.quick-nav nav ul li a:hover i{transform: scale(1.2); color:#00bcd4;}
.quick-nav nav ul li a:hover span{color:#00bcd4;}
.quick-nav nav ul li a i{transition: 0.5s; font-size: 50px; color:#fff;}
.quick-nav nav ul li a span{display: block; color:#fff;padding-top: 20px; font-size: 14px;}

/* board */
.board{margin: 20px auto;}
.board .row{overflow: hidden; margin-bottom: 20px;}
.board .col{float: left; width: 50%;}
.board nav{position: relative; margin: 0 20px; height: 180px; }
.board .tab-nav > li{float: left;}
.board .tab-nav > li > a{display: block; padding: 0 20px; color:#777; line-height: 40px; height: 40px; box-sizing: border-box;}
.board .tab-nav > li > a.on{background: #1c82b7; color:#fff;}
.board .tab-nav > li > a.on + .tab-contents{display: block;}
.board .tab-contents{
  display: none; position: absolute; top:40px; left:0; width: 100%;
  border-top: 1px solid #e8e8e8; padding: 10px; box-sizing: border-box;
}
.board .tab-contents li{position: relative; font-size: 14px;}
.board .tab-contents li a{
  display: block; margin-right: 90px; line-height: 24px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color:#999;
}
.board .tab-contents li a::before{content: '-'; padding-right: 5px;}
.board .tab-contents li a:hover{color:#333;text-decoration: underline;}
.board .tab-contents li span{position: absolute; top: 2px; right:0; width: 85px; text-align: right; color:#999;}
.board .more{position: absolute; right:0; top:10px; font-size: 12px; color: #777;}
.board .more i{padding-left: 5px;}

/* video */
.video{position: relative; margin: 0 20px; height: 360px;}
.video .swiper-container{height: 340px;}
.video .swiper-pagination{left:50%; transform: translateX(-50%);}
.video .swiper-pagination .swiper-pagination-bullet{margin: 0 5px; width: 10px;height: 10px;}
.video iframe{width: 100%; height: 100%; border:0;}

/* card view */
.card-view{background: #f1f1f5; padding: 30px 0;}
.card-view.card1{background: #fff;}
.card-view h2{ display: inline-block; padding: 0 10px 5px 30px; font-size: 25px; color:#777;}
.card-view .sub-title{ display: inline-block; color:#999; font-size: 14px;}
.card-view .btn-group{position: absolute; right:30px; top:10px;}
.card-view .btn-group button{float: left; font-size: 20px;color:#777; width: 30px; height: 30px;}
.card-view .fa-angle-left{position: absolute; top:50%; transform: translateY(-50%); left:0; font-size: 40px;color:#777;}
.card-view .fa-angle-right{position: absolute; top:50%; transform: translateY(-50%); right:0; font-size: 40px;color:#777;}
.card-view .card-list{margin: 0 20px;}
.card-view .card-list ul{overflow: hidden;}
.card-view .card-list ul.swiper-wrapper{overflow: visible;}
.card-view .card-list ul.swiper-wrapper li:nth-child(odd) a{background: #e8e8e8; color:#333;}
.card-view .card-list ul.swiper-wrapper li:nth-child(even) a{background: #1c82b7; color:#fff;}
.card-view.card2 .card-list ul.swiper-wrapper li:nth-child(odd) a{background: #1c82b7; color:#fff;}
.card-view.card2 .card-list ul.swiper-wrapper li:nth-child(even) a{background: #e8e8e8; color:#333;}
.card-view .card-list ul.swiper-wrapper li a:hover{ border:5px solid transparent;}
.card-view .card-list ul li{float: left; width: 25%;}
.card-view .card-list ul li a{position: relative; transition: 0.5s; display: block; margin: 10px; padding: 10px; border:5px solid transparent; background: #fff; box-sizing: border-box;}
.card-view .card-list ul li a:hover{border:5px solid #777;color:#777; transform: scale(1.05);}
.card-view .card-list ul li a b.title{display: block; padding-bottom: 20px;}
.card-view .card-list ul li a p{padding-bottom: 40px; font-size: 14px;}
.card-view .card-list ul li a .date{display: block; text-align: right; position: absolute; right:10px; bottom:10px;}
.card-view .card-list ul li a .date .new{display: inline-block; margin-right: 5px;width: 20px; height: 20px; line-height: 20px; text-align: center; background: #E91E63; color:#fff;}
.card-view .card-list ul li a dl{}
.card-view .card-list ul li a dl dt{font-weight: bold; padding-bottom: 20px;}
.card-view .card-list ul li a dl dd{font-size: 14px;}

/* banner */
.banner{background: #fff; padding: 20px; border-top: 4px solid #e8e8e8; }
.banner h2{position: absolute; left:0; top:3px; font-size: 15px;}
.banner button{position: absolute; left:75px; top:7px;}
.banner .wrap{overflow: hidden; height: 25px; margin-left:100px;}
.banner .wrap ul{position: relative; width: 2000px;}
.banner .wrap ul li{float: left;}
.banner .wrap ul li a{display: block; height: 25px; margin-right:20px;}
.banner .wrap ul li a img{height: 100%;}

/* sub page ==============================================================================================*/
.top-banner{position: relative; background: url(../newimg/main-bg2.jpg) center fixed; background-size: cover;}
.top-banner span{text-align: center; display: block; padding: 30px 20px; color:#fff; font-weight: bold; font-size: 20px; text-shadow: 0 0 5px #2e80a2;}

.left-nav{position: absolute; left:0; top:0; width: 200px;}
.left-nav h2{padding: 10px; margin-bottom: 20px;font-size: 20px; background: #00bcd4; color:#fff;}
.left-nav .depth2{}
.left-nav .depth2 > li{ margin-bottom: 10px;}
.left-nav .depth2 > li > a{display: block; line-height: 30px; padding-left: 5px; border-left:5px solid transparent;}
.left-nav .depth2 > li > a.on{border-left:5px solid #00bcd4;}
.left-nav .depth3{padding-left: 15px;}
.left-nav .depth3 li{}
.left-nav .depth3 li a{font-size: 14px; color:#777; line-height: 24px;}
.left-nav .depth3 li a.on, .left-nav .depth3 li a:hover{color:#00bcd4;}
.left-nav .depth3 li a::before{content: '-'; padding-right: 5px;}

.contents-box{min-height: 500px; margin-left:200px; border-left:1px solid #ccc; box-sizing: border-box; padding: 20px;}
.contents-box h3{color: #00bcd4; font-size: 30px; padding-bottom: 20px;}
.contents-box h4{color:#00bcd4; font-size: 20px; padding-bottom: 10px;}

.breadcrumb{position: absolute; right:20px; top:20px; text-align: right;}
.breadcrumb li{display: inline-block;}
.breadcrumb>li+li:before{padding-left:5px;color: #ccc;content: "/\00a0";}
.breadcrumb li a{font-size: 12px;}
.breadcrumb li a.on{color:#00bcd4;}

.search-form{margin-top:20px; padding: 20px; background: #f4f4f4;border-top:1px solid #ccc;border-bottom:1px solid #ccc; overflow: hidden;}
.search-form .form-group{position: relative; float: left;}
.search-form .form-group [type=text]{float: left; padding-right: 40px; font-size: 16px;}
.search-form .form-group button{position: absolute; right:0; top:0; width: 30px; height: 30px;}

.total{position: relative;font-size: 14px; color:#777;}
.total span{font-weight: bold; color:#000;}
.total .more{position: absolute; right:0; bottom:0; background: #999; color:#fff; padding: 5px;}
.total .more:hover{background: #00bcd4;}
.total .more i{padding-left: 5px;}

.box1{padding: 20px 0;}
.scrollx{overflow-x: auto;}
.nowrap{white-space: nowrap;}
.break{white-space: normal;}
.scrollx th, .scrollx td{white-space: nowrap;}
.info{background: #f4f4f4; padding: 10px; margin-bottom: 20px;font-size: 14px; border:1px solid #ccc; color:#777;}

.category ul{overflow: hidden;}
.category ul li{float: left; width:25%; text-align: center;}
.category .count{display: inline-block; width: 80px; height: 80px; line-height: 80px; border-radius: 50%;color:#fff; background:#00bcd4; font-size: 30px;}
.category .category-name{display: block; color:#777; font-size: 12px; padding: 20px;}

.table-style1 th, .table-style1 td{text-align: center; font-size: 14px; padding: 15px 5px;}
.table-style1 th{border-bottom:2px solid #ccc; color:#333;}
.table-style1 td{border-bottom:1px solid #ccc; color:#777;}

.table-style2{border-top:1px solid #ccc;}
.table-style2 th, .table-style2 td{text-align: left; font-size: 14px; padding: 10px 5px;}
.table-style2 th{background: #f4f4f4; border-bottom:1px solid #ccc; color:#333;}
.table-style2 td{border-bottom:1px solid #ccc; color:#777;}
.table-style2 td p{padding: 10px 0;}
.table-style2 td ul li{line-height: 25px;}
.table-style2 td [type=text]{width: 100%;}
.table-style2 td label{white-space: nowrap;}
.table-style2 td [type=radio], .table-style2 td span{vertical-align: middle; padding: 0 10px 0 5px;}
.table-style2 .col{float: left;width: 33.33%;}
.table-style2 .col .form-group{padding-right: 10px;}
.table-style2 .col:last-child .form-group{padding-right: 0;}

.contents-box .btn-group{overflow: hidden; margin-top: 20px;}
.contents-box .btn-group button{float: left; padding: 10px 20px;}

.pagination{text-align: center; margin-top: 20px;}
.pagination ul{display: inline-block;}
.pagination ul li{float: left;}
.pagination ul li a{display: block; padding: 5px 8px; color:#777;}
.pagination ul li a.on,
.pagination ul li a:hover{background: #00bcd4; color:#fff;}

.contents-box .tab{position: relative;}
.contents-box .tab::after{content: ''; display: block; overflow: hidden;}
.contents-box .tab-nav{ overflow: hidden;}
.contents-box .tab-nav > li{float: left;}
.contents-box .tab-nav > li > a{display: block; padding: 0 10px; color:#777; line-height: 40px; height: 40px; box-sizing: border-box;}
.contents-box .tab-nav > li > a.on{background: #1c82b7; color:#fff;}
.contents-box .tab-nav > li > a.on + .tab-contents{display: block;}
.contents-box .tab-contents{}
.contents-box .tab-contents .tab-content{display: none; border-top: 1px solid #e8e8e8; padding: 10px; box-sizing: border-box;}

/* footer ==============================================================================================*/
footer{background: #333; font-size: 14px; padding: 20px;}
footer nav{overflow: hidden; float: right;}
footer nav ul{display: inline-block;}
footer nav ul li{float: left; margin-right:10px;}
footer nav ul li:last-child{margin-right: 0;}
footer nav ul li a{color:#ccc; padding-right: 10px; border-right:1px solid #ccc;}
footer nav ul li a:hover{color:#00bcd4;}
footer nav ul li:last-child a{border:0; padding: 0;}
footer address{margin-bottom: 20px; font-style: normal;}
footer address ul li{color:#777;}
footer address ul li span{white-space: nowrap;}
footer small{color:#777;}

.sns{position: absolute; right:0; top:40px;}
.sns > ul{text-align: center;}
.sns > ul > li{display: inline-block; position: relative; margin-left:10px;}
.sns ul li i{font-size: 30px;}
.sns .facebook-list{
  display: none;
  border: 2px solid #777;
  position: absolute; bottom: 45px; width: 145px;
  left: 50%; transform: translateX(-50%);
  background: #fff; text-align: left; padding: 10px; z-index: 100;
}
.sns .facebook-list::after{
  content: ''; position: absolute; bottom:-10px; left: 50%; transform: translateX(-50%);
  border-top:10px solid #777; border-right:10px solid transparent; border-left:10px solid transparent; border-bottom: 0;
}
.sns .facebook-list li{line-height: 30px; font-size: 14px;}
.icon{background: url(../newimg/sns.png) no-repeat; background-size: 137px 30px; display: inline-block; width: 30px; height: 30px;}
.icon-youtube{background-position: 0 0;}
.icon-facebook{background-position: -35px 0;}
.icon-blog{background-position: -70px 0;}
.icon-instagram{background-position: -106px 0;}

/* popup ==============================================================================================*/
.popup-wrap{position: fixed; width: 100%; height: 100%; top:0; left:0; background: rgba(0,0,0,0.5); z-index: 1000;}
.popup{
  position: fixed; width: 700px; height: 700px; top:50%; left:50%; transform: translate(-50%, -50%);
  background: #fff; box-shadow: 0 0px 20px #333; font-size: 14px;
}
.popup .popup-header{position: relative; height: 50px;border-bottom: 1px solid #ccc; margin: 0 10px;}
.popup .popup-header h2{line-height: 50px; font-size: 16px;}
.popup .popup-header .popup-close{position: absolute; top:15px; right:0; font-size: 20px;}
.popup .popup-body{overflow-y: auto; padding: 10px; box-sizing: border-box; background: #fff;}
.popup .popup-body p{padding: 10px; text-align: justify;}