@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;}

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



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

/*******헤더*******/
#header{ width: 100%; z-index: 99;}
#header .container{ position: relative;}

#header .header_top ul{ position: absolute; right: 0; top: 10px; z-index: 1;}
#header .header_top ul li{ float: left; line-height: 12px; border-right: 1px solid #dedede; }
#header .header_top ul li:last-of-type{ border-right: 0;}
#header .header_top ul li a{ padding: 0 5px; font-size: 12px;}

#header h1{ float: left; margin: 10px 0;}


/*********메인 네비게이션 main_nabigation********/
 .m_open{ display: none;}
 #main_gnb{ float: right; margin-top: 30px;}
#main_gnb .m_menu{ position: relative; float: left; text-align: center; height: 50px; line-height: 50px;}
#main_gnb .m_menu>a{ display: block; width: 100%; height: 100%; font-size: 17px; font-weight: bold; padding: 0 30px;}
#main_gnb .s_menu{ display: none; position: absolute; top: 50px; background: rgba(0,0,0,0.8); padding: 5px; left: 50%; transform: translateX(-50%); z-index: 99;}
#main_gnb .s_menu.s_2{ width: 100px;}
#main_gnb .s_menu.s_3{ width: 150px;}
#main_gnb .s_menu.s_4{ width: 200px}
#main_gnb .s_menu.s_5{ width: 250px}
#main_gnb .s_menu.s_6{ width: 300px;}
#main_gnb .m_menu:first-of-type .s_menu{left: 0; transform: translate(0); }
#main_gnb .m_menu:last-of-type .s_menu{ left: auto; right: 0; transform: translate(0);}

#main_gnb .s_menu li{ float: left; line-height:20px !important; padding: 0 5.5px; font-size: 13px;}
#main_gnb .s_menu li a{ color: white; display: block; width: 100%; height: 100%;}

.foldstyle #main_gnb .m_menu{ width: 100%;, height: auto; padding: 10px 0;}
.foldstyle #main_gnb .m_menu .s_menu{left: 0; transform: translate(0); width: 100%;}
.foldstyle #main_gnb .s_menu li{ padding: 8px 5.5px; font-size: 12px; width: 100%; border-bottom: 1px solid #ffffff;}
.foldstyle #main_gnb .s_menu li:last-child{ border-bottom: none; }


/*****************메인 컨텐츠 main_content*****************/
.main_content_bg{ padding: 80px 0; background: url(http://coconutz.kr/themes/mong03/images/main/m_bg.png) no-repeat center center; background-size: cover;}

/********m_con1***************/
/******가로슬라이더 *****/
.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; right:10px;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;}

/******banner2, banner3, banner4********/
.m_con1{ clear: both; margin-bottom: 30px;}
.m_con1  .col-lg-4{ box-sizing: border-box; padding-left: 20px; overflow: hidden;}
.m_con1 .banner1, .m_con1 .banner2, .m_con1 .banner3{height: 163px; width:100%;}
.m_con1 .banner1, .m_con1 .banner2{ margin-bottom: 20px;}
.m_con1 .banner1 a, .m_con1 .banner2 a, .m_con1 .banner3 a{ display: block; width: 100%; height: 100%;}
.m_con1 .banner1{ background: url(http://coconutz.kr/themes/mong03/images/main/banner1.png) no-repeat center center; background-size: cover;}
.m_con1 .banner2{ background: url(http://coconutz.kr/themes/mong03/images/main/banner2.png) no-repeat center center; background-size: cover;}
.m_con1 .banner3{ background: url(http://coconutz.kr/themes/mong03/images/main/banner3.png) no-repeat center center; background-size: cover;}

/*******************m_con2*******************/
/**********m_board***********/
.m_board{ box-sizing: border-box; padding: 15px; background: url(http://coconutz.kr/themes/mong03/images/main/m_board_bg.png) no-repeat center center; background-size: cover; position: relative;}
.m_board .tab_menu { margin-bottom: 15px;}
.m_board .tab_menu ul {overflow: hidden;}
.m_board .tab_menu ul li{ height: 15px;box-sizing: border-box;float: left; border-right: 1px solid #dedede;}
.m_board .tab_menu ul li:last-of-type{ border-right: 0;}
.m_board .tab_menu ul li a{display: block;width: 100%; height: 100%;text-align: center;line-height: 15px; font-size: 14px; color: #dedede; padding: 0 10px;}
.m_board .tab_menu ul li.on{}
.m_board .tab_menu ul li.on a{color: white; font-weight: bold;}

.m_board .tab_content{}
.m_board .go_board{ display: block; position: absolute; width: 10px; height: 10px; top: 20px; right: 25px;}
.m_board .tab_content li a{ color: white; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; width: 100%; line-height: 28px; font-size: 12px;}
.tab2, .tab3, .tab4, .tab5, .tab6, .tab7, .tab8{display: none;}

/********banner4, banner5*********/
.m_con2 .col-lg-4:nth-of-type(2){ box-sizing: border-box; padding-left: 20px;}
.m_con2 .col-lg-4:nth-of-type(3){ box-sizing: border-box; padding-left: 20px;}
.banner4, .banner5{ height: 170px; width: 100%; box-sizing: border-box;}
.banner4 a, .banner5 a{ display: block; width: 100%; height: 100%;}
.banner4{ background: url(http://coconutz.kr/themes/mong03/images/main/banner4.png) no-repeat center center; background-size: cover;}
.banner5{ background: url(http://coconutz.kr/themes/mong03/images/main/banner5.png) no-repeat center center; background-size: cover;}


/***********footer**********/
#footer{ background: #282828; padding: 15px 0;}
#footer .container{ position: relative; overflow: hidden;}
#footer .f_nav{ overflow: hidden; margin-bottom: 20px;}
#footer .f_nav ul{ float: right;}
#footer .f_nav ul li{ float: left; line-height: 12px; border-right: 1px solid #fff;}
#footer .f_nav ul li:last-of-type{ border-right: 0;}
#footer .f_nav ul li a{ color: #d0d0d0; font-size: 12px; padding: 0 5px;}
#footer .info_area{ width: 50%;clear:both; float: right; color: #d0d0d0;    }
#footer .info_area li{ font-size: 12px; text-align: right;}
#footer .logo_area{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); max-width: 50%;}


/*태블릿, 모바일*/
@media all and (min-width:768px) {
    .col-lg-8{ width: 66.666666666%; float:left;}
    .col-lg-4{ width: 33.33333333%; float:left;}
    .container{ width: 95%;}
}

@media all and (max-width:1024px) {
    html,body{ width: 100%; overflow-x: hidden;}
    .all_wrap{ position: relative;}
    .blind{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.6); z-index: 999; display: none;}
    #header .header_top{ height:32px; border-bottom: 1px solid #dedede;}
    #header{ height: 110px;}
    #header h1{ height: 80px; float: none; position: relative; margin: 0;}
    #header h1 img{ max-width: 180px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    /*gnb*/
    #header .container{ position: static;}
     .m_open{ display: block; position: absolute; top:52px; right: 2.5%; font-size: 30px; ; z-index: 99;}
      .m_open span{  color: #4c4c4c}

     #main_gnb{padding: 0; position: absolute; right:-250px; top: 0; height: 100%; width: 250px; background: white; z-index: 999; margin-top: 0;}
     #main_gnb .m_menu{ width: 100%; height: auto; }
      #main_gnb .m_menu .s_menu{ display: block; position: static;transform: translate(0); width: 100% !important; background: none; display: none; border-bottom: 1px solid #dedede; background: #dedede;}
      #main_gnb .m_menu .s_menu li{ float: none; width: 100%; text-align: left; line-height: 40px !important;}
     #main_gnb .m_menu>a{ font-weight: normal;font-size: 16px; text-align: left; box-sizing: border-box; padding: 0 10px; border-bottom: 1px solid #dedede; background: url(http://coconutz.kr/themes/mong03/images/main/nav_arrow.png) no-repeat 200px center; color: #4c4c4c;}
     #main_gnb .s_menu li a{ color: #4c4c4c;}

}

@media all and (max-width:768px) {
.main_content_bg{ padding: 40px 0;}
.slide_viewer{ height: 430px;}
.m_con1 .col-lg-4{ padding: 0; margin-top: 20px;}
.m_con1 .banner1, .m_con1 .banner2{ float: left; width: 48%; height: 187px; margin-bottom: 0;}
.m_con1 .banner2{ float: right;}
.m_con1 .banner3{ display: none;}
.banner4, .banner5{ width: 48%;}
.m_con2 .col-lg-4:nth-of-type(2){ padding-left: 0; padding-top: 20px;}
.m_con2 .col-lg-4:nth-of-type(3){ padding-left: 0}
.banner4{ float: left;}
.banner5{ float: right;}

#footer .logo_area{ position: static; transform: translate(0); max-width: 100%; margin-bottom: 30px;}
#footer .logo_area img{ display: block; margin: 0 auto; max-width: 85%;}
#footer .f_nav ul{ float: none; text-align: center;}
#footer .f_nav ul li{ float: none; display: inline-block; margin-bottom: 10px;}
#footer .info_area{ width: 100%; float: none;}
#footer .info_area li{ text-align: center;}

}

@media all and (max-width:500px) {
.slide_viewer{ height: 330px;}
.m_con1{ margin-bottom: 20px;}
.m_con1 .banner1, .m_con1 .banner2{ width: 100%;}
.m_con1 .banner1{ margin-bottom: 20px;}
.banner4, .banner5{ width: 100%; float: none;}
.banner4{ margin-bottom: 20px;}
}




/**************서브*************/

/*******sub_visual*******/
.sub_visual{ width: 100%; height: 215px; background: url(http://coconutz.kr/themes/mong03/images/sub/sub_visual.png) no-repeat center center; background-size: cover;}

/*********sub_nav********/
.sub_nav{ margin: 50px 0;}
.sub_nav ul{ overflow: hidden; width: 100%;}
.sub_nav ul li{ float: left; height: 50px; line-height: 50px; box-sizing: border-box; border: 1px solid #dedede; border-right: 0;}
.sub_nav ul li:last-of-type{ border-right: 1px solid #dedede;}
.sub_nav.sub1_nav ul li{ width: 25%; background: #f2f2f2;}
.sub_nav.sub1_nav ul li a{ display: block; width: 100%; height: 100%; text-align: center;}
.sub_nav ul li.on{ background: #575757;}
.sub_nav ul li.on a{ color: white;}


/*sub_title*/
.sub_title{}
.sub_title b{ font-size: 22px;  display: block; text-align: center;}
.sub_road{margin-top: 5px; margin-bottom: 50px;}
.sub_road ul{ text-align: center;}
.sub_road li{ display: inline; padding: 0 5px;}
.sub_road li a{ font-size: 13px;}
/*sub_content*/
.sub_content{ box-sizing: border-box; overflow: hidden; padding-bottom: 50px;}
/*sub1-1 content*/
.sub1-1 img{ display: block; max-width: 100%; margin: 0 auto;}
.sub_content{ min-height: 600px;}

@media all and (max-width:768px) {
.sub_nav.sub1_nav ul { border-top: 1px solid #dedede;}
.sub_nav.sub1_nav ul li{ width: 50%; border-top: 0; height: 40px; line-height: 40px;}
.sub_nav.sub1_nav ul li:nth-child(even){ border-right: 1px solid #dedede;}
}

.all_wrap > .main_content_bg > .main_content  a { background-size: cover; }