@charset "utf-8";


#header {transition:0.2s; position:fixed; left:0; top:0; width: 100%; height: 120px; padding: 0 50px; box-sizing:border-box; z-index:100; display: flex; align-items:center; justify-content: space-between; background-color:#fff; border-bottom:1px solid #ddd;}
#header .h_logo img {height: 90px;}
#header.on {background-color:#fff;}
#header.on .nav a {color:#000;}
#header.on .h_menu {background-image:url('/img/html/i_menu_open.png');}
.h_menu {display:none; width: 60px; height: 60px; background-image:url('/img/html/i_menu_open.png'); background-position:center; background-repeat:no-repeat;}
.menu_bg {position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba( 0, 0, 0, 0.7 ); display:none; z-index:105;}
.menu_bg .mb_nav {position: fixed; right:0; top:0; height:100%; width: 300px; background-color:#fff;}
.menu_bg .mb_nav ul {padding: 20px;}
.menu_bg .mb_nav li {border-bottom: 1px solid #ddd;}
.menu_bg .mb_nav li a {display:block; padding: 0 20px; font-size: 18px; line-height: 70px; text-transform: uppercase;}

.h_btn {display: flex; width: 300px; height: 70px; background-color:#0167b1; color:#fff; font-size: 18px; font-weight: 700; align-items:center; justify-content:center; border-radius:10px;}
.h_btn br {display:none;}
.h_close {
  position: fixed;
  right: 320px;
  top: 40px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.h_close::before, .h_close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: #fff;
  transform-origin: center;
}
.h_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.h_close::after { transform: translate(-50%, -50%) rotate(-45deg); }


.nav a:hover {text-decoration:underline;}
.nav {}
.nav ul {display: flex; gap: 80px;}
.nav a {font-size: 20px; font-weight: 400; text-transform: uppercase;}

#contents {margin-top: 120px;}


.btn_area {text-align: center;}
.btn {background-color: #797c9a; border-radius: 3px; display: inline-block; color:#fff; font-weight: 300 !important; vertical-align: middle;}
.btn.small {}

.g_list {display: flex; flex-wrap: wrap; gap: 20px;}
.g_list li {flex-basis: calc(33.33% - 13.33px);}
.g_list img {width:100%;}
.gc_img {border-radius: 3px; display: block; overflow: hidden;}
.chk_box {z-index: 10;}
.c_contents #bo_gall .bo_tit {font-size: 20px; line-height: 1.7; margin-bottom: 5px;}
.c_contents #bo_gall .bo_cnt {font-size: 16px; line-height: 1.7; display: block;}
.g_list .gall_date, .g_list .gall_view {font-size: 16px; line-height: 1.7; font-weight: 400;}
.g_list .gall_info {display: flex; gap: 30px;}

.c_top {height: 200px; background-image:url('/img/html/bg.jpg'); background-position:center; background-size: cover; display:flex; align-items:center; justify-content: center; background-color:#f5f5f5;}
.c_top p {font-size: 30px; color:#fff; line-height:1; text-transform: uppercase; font-weight: 700;}
.c_contents {margin:120px 0;}

#footer {border-top: 1px solid #ddd; padding: 50px 0;}
#footer .wrap {text-align:center;}
#footer .f_list {font-size: 16px; color:#787878; line-height: 1.6; display: flex; flex-wrap:wrap; gap: 30px; justify-content:center; margin-top: 30px; margin-bottom: 10px;}
#footer .f_copyright {font-size: 14px; line-height: 1.6; color:#4397d4;}

.f_blog_btn {position:fixed;bottom:80px;right:20px;width:50px;height:50px;z-index:90;background-color:#1ad437; background-image:url('/img/html/i_blog.png'); background-size:80%; background-position:center center; border-radius: 5px; background-repeat:no-repeat;}

.max800 {max-width: 800px; margin:0 auto; width:100%;}

@media (max-width: 1200px) {
	#header {padding: 0 20px;}
	.nav ul {gap: 40px;}
	.h_btn {width: 240px; font-size: 16px; height: 50px; text-align:center; line-height:1.2;}
}


@media (max-width: 1024px) {
	.c_contents #bo_gall .bo_tit {font-size: 16px;}
	.c_contents #bo_gall .bo_cnt {font-size: 14px; line-height: 20px;}
	.gall_date {font-size: 14px;}

}

@media (max-width: 768px) {
	#footer {padding: 30px 0;}
	#footer .f_list {font-size: 14px; gap: 10px; margin-top: 20px;}
	#footer .f_copyright {font-size: 12px;}
	.nav {display:none;}
	.h_menu {display:block;}

	.g_list li {flex-basis: calc(50% - 10px);}
	#bo_gall .gall_box {margin-bottom: 30px !important;}
	.menu_bg .mb_nav > ul > li > a {line-height: 50px;}

	.h_btn {font-size: 14px; width:auto; padding: 0 20px;}
	.h_btn br {display:inherit;} 
}

@media all and (max-width:600px) {
	.g_list li {flex-basis: 100%;}
}