@charset "UTF-8";

/****공통****/
.min-height{ min-height: 0 !important;}
ul{ padding: 0; margin: 0;}
ul li{list-style: none;}
a{ color: inherit;}
a:link, a:visited, a:hover, a:active{ text-decoration: none; color: inherit;}
h1, .h1, h2, .h2, h3, .h3{ margin: 0;}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{ padding:0;}
p{ margin: 0;}

.container{ padding: 0; max-width: 1100px;}
.clearfix{ clear: both;}
.row{ margin: 0;}
@media all and (max-width:768px) {
    .container{ padding: 0 2.5%;}
}

/**************메인*************/

/*********header*********/
#header{z-index:999;width:100%;height:100px;border-bottom:1px solid #cccccc;box-sizing:border-box;}
#header .header_top{ overflow: hidden; padding: 10px 0; border-bottom: 1px solid #d6d6d6;}
#header .header_top ul{ float: right;}
#header .header_top ul li{ float: left; line-height: 11px; border-right: 1px solid #d6d6d6;}
#header .header_top ul li a{ display: block; padding: 0 5px; font-size: 11px;}

#header h1{position:relative;z-index:99;float:left;margin-top:12px; height: 50px;}
#header h1 img{ max-height: 50px;}
#header #main_gnb{float:right;}
#header #main_gnb>ul{float:left;}
#header #main_gnb .m_menu{position:relative;float:left;width:auto; padding: 0 30px; text-align:center;line-height:63px;}
#header #main_gnb .m_menu>a{position:relative;z-index:999;font-size:17px;}
#header #main_gnb .m_menu>a.visible{color:#4c4c4c;}
#header #main_gnb .m_menu>a.invisible{color:white;}
#header #main_gnb .m_menu .menu_over{position:absolute;z-index:9999;top:54px;left:50%;opacity:0;transform:translateX(-50%);}
#header #main_gnb .m_menu a{display:block;width:100%;height:100%;}
#header #main_gnb .small_line .s_menu li{ line-height: 23px; margin: 7px 0; text-align: left;}
#header #main_gnb .s_menu li{line-height:35px;}
#header #main_gnb .s_menu a{font-size:14px;}
#main_gnb .s_menu a:hover{font-weight:bold;}
#header #main_gnb .s_menu{display:none;position:absolute;z-index:999;top:72px;width:100%; left: 0;height:190px;}

.header_bg{display:none;position:absolute;z-index:999;top:100px;width:100%;height:190px;border-bottom:1px solid #d6d6d6;background:rgba(255,255,255,0.95);}

.blind{display:none;position:absolute;z-index:1000;top:0;left:0;bottom:0;width:100%;background:rgba(0,0,0,0.3);}
.m_open{display:none;}

/*******quick_menu*******/
.quick_menu{ position: absolute; top: 400px; right:-100px; width: 80px; z-index: 99;}
.quick_menu .quick_title{ height: 40px; line-height: 40px; background: #333333; color: white; font-size: 16px; text-align: center;}
.quick_menu ul{ border: 1px solid #d6d6d6; background: white; box-sizing: border-box; border-bottom: 0;}
.quick_menu ul li{border-bottom: 1px solid #d6d6d6;  text-align: center;}
.quick_menu ul li a{ padding: 10px 0; display: block; width: 100%; height: 100%;}

/*****main visua 메인비쥬얼*****/
.main_visual{ position: relative; clear: both;}
/******가로 슬라이더1*******/
.slider {width:100%; margin:0 auto;}
.slide_viewer {position:relative; height:480px; overflow:hidden;}
.slide_group {position:relative; width:100%; height:100%;}
.slide a{ display: block; width: 100%; *height: 100%;}
.image-slide.slide{padding:0;}

.slide_buttons {position:absolute; left:50%; transform: translateX(-50%);;text-align:center; bottom: 0;}
a.slide_btn {margin:0 2px; color:#ffffff; font-size:42px; transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; line-height: 42px;}
.slide_btn.active, .slide_btn:hover {color:#666666; cursor:pointer;}


/*****************메인 컨텐츠 main_content*****************/
.main_content { box-sizing: border-box;}

/******m_con1********/
.m_con1{ padding: 30px 0; background: #f2f2f2;}
.m_con1 ul{ overflow: hidden;}
.m_con1 ul li{ float: left; width: 12.5%;}
.m_con1 ul li a{ display: block; width: 100%; *height: 100%;}
.m_con1 ul li a>div{ width: 90%; margin: 0 auto; box-sizing: border-box; background: white; border-radius: 3px; border: 1px solid #d6d6d6;}
.m_con1 ul li .img_area{ height: 73px; position: relative;}
.m_con1 ul li .img_area img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 100%;}
.m_con1 ul li .txt_area{ height: 60px; text-align: center;}
.m_con1 ul li .txt_area b{ font-size: 17px; font-weight: bold; display: block;}
.m_con1 ul li .txt_area span{ color: #d8d8d8; font-size: 14px;}

/******m_con2********/
.m_con2{ background: #484f5f;}
.m_con2 .txt_area{ padding: 20px 0; text-align: center;}
.m_con2 .txt_area b{ font-size: 23px; color: white; display: block; margin-bottom: 20px;}
.m_con2 .txt_area b span{ color: #fab615;}
.m_con2 .txt_area p{ color: white; font-size: 13px;}
.m_con2 .txt_area ul{ text-align: center; margin-top: 20px;}
.m_con2 .txt_area ul li{ display: inline-block; margin: 0 10px; color: white; font-size: 15px;}
.m_con2 .txt_area ul li span{ color: #fab615;}

/********m_con3**********/
.m_con3{ padding: 50px 0; padding-bottom: 30px;}
.big_title{margin-bottom: 50px;}
.big_title b{ font-size: 30px; display: block; text-align: center;}
.big_title .line{ display: block; width: 50px; height: 1px; border-bottom: 3px solid #484f5f; margin: 0 auto; margin-top: 20px;}
.m_con3 .gall_wrap{ overflow: hidden;}
.m_con3 .gall_wrap ul li{ float: left; width: 25%; margin-bottom: 30px;}
.m_con3 .gall_wrap ul li a{ display: block; width: 100%; *height: 100%;}
.m_con3 .gall_wrap ul li>div{ width: 95%; margin: 0 auto; box-sizing: border-box; border: 1px solid #d6d6d6; border-radius: 3px; overflow: hidden;}
.m_con3 .gall_wrap ul li .img_area{ height: 170px; border-bottom: 1px solid #d6d6d6;}
.m_con3 .gall_wrap ul li .txt_area{ box-sizing: border-box; padding: 10px; text-align: center;}
.m_con3 .gall_wrap ul li p{width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 10px;}
.m_con3 .gall_wrap ul li .date{ display: block; font-size: 12px; color: #c1c1c1;}
.m_con3 .gall_wrap ul li .name{ display: block; font-size: 12px; margin-top: 5px;}

/*********m_con4************/
.m_con4{ background: #5799df; padding: 20px 0;}
.m_con4 img{ display: block; max-width: 90%; margin: 0 auto;}

/************m_con5*************/
.m_con5{ padding: 20px 0; border-top: 1px solid #d6d6d6;}
.m_con5>div>div>div{box-sizing: border-box; padding: 0 10px;}
.m_con5 .col-lg-3{ box-sizing: border-box; *border-right: 1px solid #d6d6d6; height: 180px;}
.m_con5 .col-lg-3:last-of-type{ border-right: 0;}
.m_con5 .m_title{ display: block; font-size: 17px; margin-bottom: 10px;}
.m_con5 .m_title a{ float: right;}
.m_con5 .cs .number{font-size: 40px; color: #4592d6; display: block; margin-bottom: 10px; line-height: 40px;}
.m_con5 .cs ul li{ margin-bottom: 2px; font-size: 12px; color: #9d9d9d;}
.m_con5 .m_board li{ line-height: 25px;}
.m_con5 .m_board li a{ display: block;  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #9a9a9a; font-size: 12px;}
.m_con5 .quick2 ul li{ float: left; width: 50%; margin-bottom: 5px;  text-align: center;}
.m_con5 .quick2 ul li img{ max-width: 95%; display: block; margin: 0 auto;}


/***********footer**********/
#footer{padding: 20px 0;border-top:1px solid #d6d6d6; text-align: center; background: #f2f2f2;}
#footer img{ display: block; margin:0 auto;margin-bottom: 20px;}
#footer {color:#898989;font-size:12px;line-height:23px;}
#footer ul{ display: inline-block; margin-bottom: 10px;}
#footer ul li{ float: left; padding: 0 5px; height: 13px; border-right: 1px solid #cccccc; line-height: 13px;}
#footer ul li:last-of-type{ border-right: 0;}
#footer ul li a{ font-size: 12px;}

/*태블릿, 모바일*/

@media all and (min-width:500px) {
    .col-lg-6{ width: 50%; float: left;}
    .col-lg-3{ width: 25%; float: left;}
}

@media all and (max-width:1200px) {
    .quick_menu{ display: none;}
    body,html{ width: 100%; overflow-x: hidden;}
    /*****main_visual*****/
    .slide_viewer{ height: 400px;}
}

@media all and (max-width:1024px) {
    .all_wrap{ position: relative;}
    /**header**/
    .blind{ position: absolute; top: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.6); width:100%; z-index: 998; display: none;}
    #header{ width: 100%; overflow: hidden;}
    .m_open{ display: block; float: right; margin-top: 18px; font-size: 25px;}
    #header #main_gnb{display:block;position:fixed;z-index:9999;top:0;right:-250px;bottom:0;width:250px;height:100%;border-left:1px solid #f2f2f2;background:white;box-sizing:border-box; overflow-y: scroll;}
     #header #main_gnb>ul{ width: 100%; float: none;}
    #header #main_gnb a{display:block;width:100%;height:100%;line-height:40px;}
    #header #main_gnb .m_menu{border-bottom:1px solid #f2f2f2; float: none; width: 100%; padding: 0;}
    #header #main_gnb .m_menu>a{display:block;font-size:16px;font-weight:bold;text-align:center;line-height:50px;}
    #header #main_gnb .s_menu{display:none;border-top:1px solid #f2f2f2; position: static; height: auto; width: 100%; background: #f2f2f2;}
    #header #main_gnb .small_sub li{float:left;width:25%;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;text-align:center;box-sizing:border-box;}
    #header #main_gnb .small_sub li a{display:block;font-size:13px;}
    #header #main_gnb .small_sub li:last-of-type{border-right:0;}
    /*main_content*/
    .m_con1{ padding-bottom: 15px;}
    .m_con1 ul li{ width: 25%; margin-bottom: 15px;}
}

@media all and (min-width:768px) {
    .container{ width: 95%;}
}
@media all and (max-width:768px) {
    /*main_content*/
    .slide_viewer{ height: 300px;}
    .m_con3{ padding: 30px 0; padding-bottom: 15px;}
    .big_title .line{ margin-top: 10px;}
    .m_con2 .txt_area b{ font-size: 20px;}
    .big_title b{ font-size: 24px;}
    .m_con3 .gall_wrap ul li{ width: 50%;}
    .m_con5>div>div>div{ padding: 10px;}
    .m_con5 .col-lg-3{ width: 50%; float: left; height: 190px;}
    .m_con5 .col-lg-3:nth-of-type(1){ *border-bottom: 1px solid #d6d6d6;}
    .m_con5 .col-lg-3:nth-of-type(2){ *border-bottom: 1px solid #d6d6d6; border-right: 0;}
}
@media all and (max-width:500px) {
    .m_con1 ul li{ width: 50%;}
    .m_con5 .col-lg-3{ width: 100%; height: auto; padding-top: 20px; padding-bottom: 20px;}
    .m_con5 .col-lg-3:nth-of-type(1), .m_con5 .col-lg-3:nth-of-type(3){ border-right: 0; *border-bottom: 1px solid #d6d6d6;}
}



/**************서브*************/
/*subtop_top*/
.sub_top_bg{ height: 250px; border-bottom: 1px solid #cccccc; position: relative;}
.sub_top_bg .wrap{ position: relative; height: 100%;}
.top1{ background: url(http://coconutz.kr/themes/mong02/images/sub/top1.png) no-repeat center center; background-size: cover;}
.subtop_title{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center;}
.subtop_title h2{ font-size: 35px; letter-spacing: -1px;}
.title_black .line{ width: 50px; display: block; margin: 10px auto;; border-bottom: 1px solid #4c4c4c;}
/*subtop_nav*/
.subtop_nav {height:40px; border-bottom:1px solid #cccccc;}
.subtop_nav ul li {float:left; line-height:40px; letter-spacing:-1px;}
.subtop_nav ul li.to_home {width:38px; height:40px; overflow:hidden; border-right:1px solid #cccccc; border-left:1px solid #cccccc; text-align:center;}
.subtop_nav>ul>li:first-of-type i {margin-top:6px; font-size:25px;}
.subtop_nav>ul>li:nth-of-type(2) {width:auto; min-width:138px; height:40px; padding:0 15px; text-align:center; box-sizing:border-box;}
.subtop_nav>ul>li:last-of-type {position:relative; width:auto; min-width:138px; height:40px; text-align:center; box-sizing:border-box;}
.etc_nav>ul>li:last-of-type{ min-width: 150px;}

/********select_box*******/
.subtop_nav #select_box {padding:0 15px; cursor:pointer; box-sizing:border-box; background:url(http://coconutz.kr/themes/mong02/images/sub/subnav_arrow.png) no-repeat right center;}
.subtop_nav #select_box span {display:block; width:100%;  letter-spacing:-1px; }
#select_box ul li {float:none; width:100%; border-bottom:1px solid #cccccc; background:white;}
#select_box ul {position:absolute; left:-1px; width:138px; border:1px solid #cccccc; border-top:0; border-bottom:0;}
#select_box ul li a {display:block; width:100%; height:100%; letter-spacing:-1px;}
#select_box ul li.selected {background:#eeeeee;}
#select_box {position:relative; z-index:800; height:40px; border:1px solid #cccccc; border-top:0; border-bottom:0;}
#select_box span {line-height:40px;}
#select_box ul {display:none;}

/*sub_title*/
#sub_title_area {margin:40px auto;}
#sub_title_area{ margin-bottom: 60px;}
#sub_title_area img{ margin-bottom: 10px;}
#sub_title_area h3 {font-size:30px; font-weight:normal; letter-spacing:-2px; line-height: 30px;}
#sub_title_area span {padding-left:15px; color:#bcbcbc; font-size:15px; letter-spacing:0;}
#sub_title_area{ text-align: center;}

/*sub_content*/
#sub_content {padding-bottom:50px; min-height: 600px;}

@media all and (max-width:1024px) {
    /*공통*/
    .subtop_title{ left: 2.5%;}
    #sub_content .wrap{ box-sizing: border-box; padding: 0 2.5%;}
    .sub_top_bg{ height: 217px;}
    .subtop_title h2{ font-size: 25px;}
}

@media all and (max-width:768px) {
    /*공통*/
    #sub_title_area h3{ font-size: 23px;}
}

.m_con1 ul.center-ul {
	text-align: center;
}
.m_con1 ul.center-ul li {
	float: none;
	display: inline-block;
}
@media (max-width: 500px) {
	.m_con1 ul.center-ul {
		text-align: left;
	}
	.m_con1 ul.center-ul li {
		width: 49%;
	}
}