@charset "UTF-8";

/****공통****/
.min-height{ min-height: 0 !important;}
.padding0{padding: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: 940px;}
.clearfix{ clear: both;}
.row{ margin: 0;}
@media all and (max-width:768px) {
	.main_visual{padding-top:37px;}
	.carousel-indicators li{width:6px;height:6px;}
	.carousel-indicators .active{width:8px;height:8px;}
}





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

/*******메인헤더*******/
#main_header{position: absolute; top: 0; width: 100%; z-index: 99;}
#main_header .container{ position: relative;}
#main_header h1{ float: left; margin-top: 17px;}
#main_header .header_nav{ float: right; margin-top: 20px; box-sizing: border-box; padding: 12px 0px; background: #331d10; overflow: hidden;}
#main_header .header_nav li{ float: left; padding: 0 10px; line-height: 11px; border-right: 1px solid white;}
#main_header .header_nav li:last-of-type{ border-right: 0;}
#main_header .header_nav li a{ color: white; font-size: 11px;}


/*****main visua 메인비쥬얼*****/
.main_visual{  overflow: hidden;}
/*메인 슬라이더 fade slider with button*/
.m_slider {position:relative; width:100%; height:600px;}
.m_slider .m_slide {display:none; position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; font-size:100px; text-align:center; line-height:300px;}
/* slide dots */
.slide_dots {position:absolute; z-index:5; bottom:0; width:auto; text-align:center; right: 10px;}
.slide_dots button {display:inline-block; width:15px; height:15px; margin:3px; padding:0; border:none; background:#68401c; opacity:0.5; cursor:pointer; border-radius: 15px;}
.slide_dots button.active {opacity:1;}

/*********메인 네비게이션 main_nabigation********/
.m_nav_wrap{ height: 170px; background: url(http://coconutz.kr/themes/mong00/images/main/m_bg.png) no-repeat center center; background-size: cover; position: absolute; width: 100%;}
 .m_open{ display: none;}
#main_gnb .m_menu{ position: relative; float: left; width: 12.5%; text-align: center; height: 50px; line-height: 50px;}
#main_gnb .m_menu>a{ display: block; width: 100%; height: 100%;  color: white; font-size: 18px; font-weight: bold;}
#main_gnb .s_menu{ display: none; position: absolute; top: 50px; background: #68401c; 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%;}


/*****************메인 컨텐츠 main_content*****************/
.main_content { margin-top: 55px;}
.main_content_bg{ background: #f1f1f1;}

/****************m_con1********************/

/********banner1*********/
/******가로 슬라이더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: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*************/
/*fade 슬라이더*/
#fade_slider {position:relative; width:100%;height:245px; margin:0; padding:0; overflow:hidden;list-style-type:none;}
#fade_slider li {width: 100%; position:absolute; height: 245px;}
#fade_slider li a{ display: block; width: 100%; height: 100%;}

/*********quick1********/
.quick1{ overflow: hidden;  background: white;}
.quick1 ul li{float: left; width: 50%;height: 235px; box-sizing: border-box; border-right: 1px solid #d9d9d9;}
.quick1 ul li a{ display: block; width: 100%; height: 100%;}
.quick1 ul li b{ font-size:15px; color: #a7a7a7; display: block; text-align: center; margin-top: 30px; margin-bottom: 30px;}
.quick1 ul li img{ max-width: 100%; max-height: 76px; display: block; margin: 0 auto; margin-bottom: 30px;}
.quick1 ul li p{ text-align: center; color: #a7a7a7;}

/****************m_con2********************/
/*****m_board*****/
.m_board{ height: 235px; background: white;}
.m_board .img_area{ height: 235px;}
.m_board  .txt_area{ box-sizing: border-box; padding: 10px; }
.m_board .board_title{ display: block; font-size: 14px; padding: 20px 0; color: #9a9a9a;}
.m_board  .txt_area li{ line-height: 25px;}
.m_board  .txt_area li a{ display: block;  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #9a9a9a; font-size: 12px;}
.m_board  .txt_area li span{ }

.m_board1 .img_area{ background: url(http://coconutz.kr/themes/mong00/images/main/m_board1.png) no-repeat right center; background-size: cover;}
.m_board2 .img_area{ background: url(http://coconutz.kr/themes/mong00/images/main/m_board2.png) no-repeat left center; background-size: cover;}

/*******banner3*********/
/***세로슬라이더***/

/* 슬라이더 전체영역 */
#ver_sliderWrap { overflow:hidden; position:relative; width:100%; height:235px; }
/* 슬라이더 */
#ver_slider { }
#ver_sliderList { overflow:hidden; width:100%; height: 300%;}
#ver_sliderList li { width:100%; height:235px;background-size : cover;background-repeat : no-repeat;background-position : center center;}
#ver_sliderList li a { display: block; width: 100%; height: 100%;}

/* 슬라이더 버튼 */
#ver_sliderBtn { position:absolute; top: 0; left:0;
            width:100%; display: none;}
#ver_sliderBtn a { position:absolute; top:90px;color:#fff; font-size:30px; }
#ver_sliderBtn .btnLeft { left:10px; }
#ver_sliderBtn .btnRight { right:10px; }

/*******************m_con3*******************/

/*******banner4*****/
/******가로 슬라이더2*******/
.slider2 {max-width:940px; margin:0 auto;}
.slide_viewer2 {position:relative; height:235px; overflow:hidden;}
.slide_group2 {position:relative; width:100%; height:100%;}
.slide2 {display:none; position:absolute; width:100%; height:100%;}
.slide2:first-child {display:block;}

.slide_buttons2 {position:absolute; left:10px;text-align:center; bottom: 0;}
a.slide_btn2 {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_btn2.active, .slide_btn2:hover {color:#666666; cursor:pointer;}

/************m_con4*****************/
.m_con4{  box-sizing:  border-box; padding: 20px; background: url(http://coconutz.kr/themes/mong00/images/main/m_bg.png) no-repeat center center; background-size: 1900px; color: white; font-weight: bold;}

/**************m_con5***************/
.m_con5{ margin-bottom: 50px;}
    .m_con5 .quick2 li{ background: white;}
.m_con5 .quick2 li img{ display: block;
 width: 100%; max-width: 100%;}
 .m_con5 .quick2 li a{ display: block; width: 100%; *height: 100%;}
 .m_con5 .quick2 li .txt_area{ box-sizing: border-box; padding: 20px;}
  .m_con5 .quick2 li .txt_area b{  margin-bottom: 20px; display: block;}
.m_con5 .quick2 li .txt_area b span{ border-top: 1px solid #cccccc; padding-top: 7px; font-size: 14px; color: #9a9a9a;}
.m_con5 .quick2 li .txt_area p{ font-size: 13px; color: #9a9a9a;}

/***********footer**********/
#footer{ background: #5f5f5f; position: relative; }
#footer .container{ position: relative; padding-bottom: 50px;}
#footer .f_nav{padding: 30px 0; float: right;}
#footer .f_nav ul{ display: inline-block;}
#footer .f_nav li a{ color: white; padding: 0 10px; font-size: 12px;}
#footer .f_nav li{ line-height: 12px; border-right: 1px solid white; float: left;}
#footer .f_nav li:last-of-type{ border-right: 0;}
#footer .logo_area{ position: absolute; top:0;left: 0; bottom: 0;}
#footer .logo_area img{ position: absolute; top: 50%; transform: translateY(-50%);}
#footer .info_area1{ box-sizing: border-box; margin-left: 200px; max-width: 400px; float: left;}
#footer li{ font-size: 12px; color: #9a9a9a; margin-bottom: 3px;}
#footer .info_area2{ float: right; font-size: 12px; color: #9a9a9a;}
#footer .info_area2 b{font-size: 15px; font-weight: normal;}
#footer .info_area2 b span{ font-size: 20px; font-weight: bold;}

/*태블릿, 모바일*/

@media all and (max-width:1024px) {
    #footer .f_nav{ float: none; text-align: center;}
    #footer .logo_area, #footer .logo_area img{ position: static; transform: translate(0);}
    #footer .logo_area img{ display: block; margin: 0 auto; margin-bottom: 30px;}
    #footer .info_area1{ float: none; width: 100%; max-width: 500px; margin: 0 auto; text-align: center; padding-bottom:10px; border-bottom: 1px solid #9a9a9a; margin-bottom: 10px;}
    #footer .info_area2{ float: none; width: 100%; text-align: center;}
}
@media all and (max-width:768px) {
    .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;}
    /*gnb*/
    #main_header .header_nav li{ margin: 5px 0;}
    .m_nav_wrap{top: 0; background: none; left: -250px; bottom: 0; height: 100%; width: 250px; background: white; z-index: 9999; overflow-y: scroll; position: fixed; box-shadow: 1px 3px 7px rgba(0,0,0,0.8);}
    #main_header h1{ float: none; text-align: center; margin-top: 60px;}
    #main_header .header_nav{ float: none; position: absolute; top: 0px; left: 0; width: 100%; text-align: center; background: rgba(0,0,0,0.8); margin-top: 0;}
    #main_header .header_nav ul{ display: inline-block;}
    #main_header .header_nav{ padding: 5px 0;}
     .m_open{ display: block; position: absolute; top:60px; left: 2.5%; font-size: 30px; color: white; z-index: 99;}
      .m_open span{  color: white; text-shadow: 3px 3px 5px rgba(0,0,0,0.2);}

     #main_gnb{padding: 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/mong00/images/main/nav_arrow.png) no-repeat 200px center; color: #4c4c4c;}
     #main_gnb .s_menu li a{ color: #4c4c4c;}
    /*main_visual*/
    .m_slider{ height: 400px;}
    /*main_content*/
    .main_content{ margin-top: 0px;}
    /*배너1*/
    .slide_viewer{ height: 380px;}
    /**배너2*/
    #fade_slider, #fade_slider li{height: 190px;}
    /*quick1*/
    .quick1 ul li{ height: 190px; position: relative;}
    .quick1 ul li img{ position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); height: 60px;}
    .quick1 ul li b{ margin: 10px 0;}
    .quick1 ul li p{ text-align: center; width: 100%; position: absolute; left: 0; bottom: 10px;}
    /*m_board*/
    .m_board .img_area{ display: none;}
    .m_board .txt_area{ width: 100%; float: none;}
    /*배너3*/
    #ver_sliderBtn{ display: block;}
    /*quick2*/
    .m_con5 .quick2 li{ width: 50%;}
}
@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:500px) {
    /*배너1*/
    .slide_viewer{ height: 280px;}
    /*m_con2*/
    .m_con2{ border-top: 1px solid #d9d9d9;}
    /*m_board*/
    .m_board{ height: 215px;}
    .m_board .board_title{ padding: 10px 0;}
    /*배너3*/
    #fade_slider, #fade_slider li{ height: 235px;}
    /*quick2*/
    .m_con5 .quick2 li{ width: 50%;float: left;}
}



/**************서브*************/
.sub_header{ position: static !important; padding-bottom: 10px;}
.sub_nav_wrap{ height: 50px; background: #68401C; position: static;}

.sub_nav_wrap .m_menu.on>a{ color: #ffff00 !important;}
.sub_nav_wrap #main_gnb  .m_menu.on .s_menu{ display: block;}
.sub_nav_wrap .m_menu.on .s_menu .on a{ color: #ffff00 !important;}

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

/*********left_menu********/
.left_menu{ float: left; width: 100%; max-width: 200px; overflow: hidden; box-sizing: border-box; padding-left: 20px;}

.left_nav, .left_cs, .left_msg{ width: 100%; box-sizing: border-box; border: 1px solid #e9e9e9; padding: 11px; margin-bottom: 20px;}
.left_nav .left_nav_title{ margin-bottom: 10px;}
.left_nav .left_nav_title b{ display: block; font-size: 18px; font-weight: bold; color: #68401c;}
.left_nav .left_nav_title span{display: block; font-size: 10px; color: #68401c;}
.left_nav ul{ border-top: 1px solid #e9e9e9;}
.left_nav ul li{ padding: 8px 10px; box-sizing: border-box; border-bottom: 1px solid #e9e9e9;}
.left_nav ul li a{ font-size: 13px; line-height: 15px; display: block; width: 100%; *height: 100%;}
.left_nav ul li.on{ background: #68401c;}
.left_nav ul li.on a{ color: white;}
.left_nav ul li:hover{ background: #68401c;}
.left_nav ul li:hover a{ color: white;}

.left_title{ display: block; font-size: 12px; color: #666666; margin-bottom: 0px;}

.left_cs img{vertical-align: middle;}
.left_cs span{ font-size: 24px; color: #ff8a00; font-weight: bold;}

.left_msg{ overflow: hidden;}
.left_msg>img{ max-width: 100%;}
.left_msg textarea{ border: 0; height: 60px; background: #f4f4f4; width: 100%; font-size: 10px; box-sizing: border-box; padding:5px;}
.left_msg .msg_wrap>div{ margin-top: 10px;float: left;}
.left_msg .msg_wrap div div{ clear: both; overflow: hidden; }
.left_msg label{ float: left; width: 40px; font-size: 11px;}
.left_msg .msg_wrap>div input{float: left; width: 70px; border: 1px solid #eaeaea; color: #333; font-size: 12px; height: 17px; line-height: 17px;}
.left_msg .left_submit{ float: right; width: 42px; height: 37px; margin-top: 10px; border: 0; font-size: 10px; background: #2c1a10; color: white; padding: 0;}

/*sub_title*/
.sub_title{ box-sizing: border-box; margin-left: 230px; padding-bottom: 10px; border-bottom: 1px solid #dedede; margin-bottom: 20px;}
.sub_title b{ font-size: 22px; color: #888888;}
.sub_title .sub_road{ float: right; margin-top: 5px;}
.sub_title .sub_road li{ float: left; padding: 0 2px;}
.sub_title .sub_road li a{ font-size: 11px;}
/*sub_content*/
.sub_content{ box-sizing: border-box; margin-left: 230px; overflow: hidden; padding-bottom: 50px;}
/*sub1-1 content*/
.sub1-1 img{ float: left; margin-right: 10px;}
.sub1-1 p{ box-sizing: border-box; font-size: 12px; line-height: 22px;}
.sub1-1  b{ float: right;}
.sub1-1  b span{ font-size: 22px;}

.sub_wrap{ min-height: 600px;}

@media all and (max-width:1024px) {
    .sub_wrap{ width: 95%; margin: 0 auto;}
}

@media all and (max-width:768px) {

    .sub_wrap{ width: 100%;}

    .sub_nav_wrap{ height: 100vh; position: fixed; background: white;}
    .sub_m_open span{ color: #4c4c4c !important;}
    .sub_nav_wrap .m_menu.on>a{ color: #4c4c4c !important;}
    .sub_nav_wrap #main_gnb  .m_menu.on .s_menu{ display: none;}
    .sub_nav_wrap .m_menu.on .s_menu .on a{ color: #4c4c4c !important;;}
        /*******sub_visual*******/
    .sub_visual{ margin-top: 10px;}
        /*******left_menu*******/
    .left_menu{ float: none; width: 100%; padding: 0; max-width: 100%;}

    .left_nav{ display: none;}
    .left_cs{ text-align: center;}
    .left_title{ text-align: center;}
    .left_msg .msg_wrap{ max-width: 250px; margin: 0 auto;}
    .left_msg img{ display:block; margin: 10px auto;}
    .left_msg textarea{ max-width: 250px; margin: 0 auto; display: block;}
    .left_msg .msg_wrap> div{}
    .left_msg .msg_wrap > div input{ width: 160px;}
    /*********sub_title, sub_content******/
    .sub_title, .sub_content{ margin-left: 0;}
}