@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) {
}

/**************메인*************/
/*********header*********/
#header{ border-bottom: 1px solid #dedede;}
#header .header_top{ float: right; margin-top: 10px;}
#header .header_top ul li{ float: left; padding: 0 5px; line-height: 10px; border-right: 1px solid #cccccc;}
#header .header_top ul li a{ font-size: 10px; color: #6b6b6b;}
#header .header_top ul li:last-of-type{ border-right: 0;}
#header .m_open{ display: none;}
#header h1{ float: left; }
#header h1 img{ max-height: 38px;}

#main_gnb{ float: right; margin-top: 15px;}
#main_gnb .m_menu{ float: left; position: relative; min-width: 120px;}
#main_gnb .m_menu>a{ font-size: 17px; display: block; width: 100%; *height: 100%; font-weight: bold; text-align: center; padding-bottom: 25px;}
#main_gnb .s_menu{position: absolute; top: 50px; left: 0; width: 100%; background: white; z-index: 99; text-align: center; box-sizing: border-box; border: 1px solid #dedede; display: none; border-top: 0;}
#main_gnb .s_menu li{ padding: 7px 0; box-sizing: border-box;}
#main_gnb .s_menu li a{ display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 0 5px;}
#main_gnb .s_menu li:hover{ background: #f2f2f2;}


/*****main visua 메인비쥬얼*****/
.main_visual{ position: relative;}
/******가로 슬라이더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; padding: 50px 0;}

/****************m_con1********************/
.m_con1{ margin-bottom: 50px;}
.m_con1 .con1{ float: left; width: 35%; float: left; height:530px; background: url(http://coconutz.kr/themes/mong01/images/main/pro_1.png) no-repeat center center; background-size: cover;}
.m_con1 .con1 a{ display: block; width: 100%; height: 100%;}
.m_con1 .con2{ float: left; width: 30%; float: left; height: 530px;box-sizing: border-box; padding: 0 5px;}
.m_con1 .con2>div{ height: 33.3333%; position: relative;}
.m_con1 .con2>div a{ display: block; width: 100%; height: 100%;}
.m_con1 .con2 .con2-1{ background: url(http://coconutz.kr/themes/mong01/images/main/pro_2.png) no-repeat center center; background-size: cover;}
.m_con1 .con2 .con2-2>div{ position: absolute; top: 50%; left: 0; text-align: center; width: 100%; transform: translateY(-50%);}
.m_con1 .con2 .con2-2 b{ font-size: 30px; font-weight: 200; letter-spacing: -1px;}
.m_con1 .con2 .con2-2 a{ display: block; width: 80%; max-width: 120px; height: 25px; line-height: 25px; box-sizing: border-box; border: 2px solid #323232; text-align: center; margin:  0 auto; margin-top: 10px; font-size: 12px;}
.m_con1 .con2 .con2-3{ background: url(http://coconutz.kr/themes/mong01/images/main/pro_2.png) no-repeat center center; background-size: cover;}
.m_con1 .con3{ float: left; width: 35%; float: left; height:530px; background: url(http://coconutz.kr/themes/mong01/images/main/pro_4.png) no-repeat center center; background-size: cover;}
.m_con1 .con3 a{ display: block; width: 100%; height: 100%;}


/****************m_con2********************/
.m_con2{ margin-bottom: 50px;}

.bn1_slider {position:relative; width:100%; height:380px;}
.bn1_slider .bn1_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:10px; width:auto; text-align:center; right: 10px;}
.slide_dots button {display:inline-block; width:10px; height:10px; margin:3px; padding:0; border:none; background:#fff; opacity:0.8; cursor:pointer; border-radius: 15px;}
.slide_dots button.active {opacity:1; background: #cccccc;}

.m_con2 .banner1 a{ display: block; width: 100%; height: 100%;}

/*******************m_con3*******************/
.m_con3{ margin-bottom: 50px;}
.m_con3 .banner2{ height: 190px; width: 98%; float: left; background: url(http://coconutz.kr/themes/mong01/images/main/banner_2.png) no-repeat center center; background-size: cover;}
.m_con3 .banner2 a{ display: block; width: 100%; height: 100%;}
.m_con3 .banner3{ height: 190px; width: 98%; float: right; background: url(http://coconutz.kr/themes/mong01/images/main/banner_3.png) no-repeat center center; background-size: cover;}
.m_con3 .banner3 a{ display: block; width: 100%; height: 100%;}

/************m_con4*****************/

/*****m_board*****/
.m_board{ height: 200px; box-sizing: border-box; border: 3px solid #ececec; width: 98%; float: left; padding: 25px;}
.m_title{ font-size: 18px; font-weight: normal;display: block;}
.m_board .m_title{ margin-bottom: 3px;}
.m_board .m_title a{ float: right; margin-top: -3px;}
.m_board  ul li{ line-height: 30px;}
.m_board  ul li a{ display: block;  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #9a9a9a; font-size: 12px;}
.m_board  ul li span{ }

/*********quick*********/
.quick{height: 200px; box-sizing: border-box; border: 3px solid #ececec; width: 98%; margin: 0 auto;}
.quick ul{ height: 100%;}
.quick ul li{ width: 50%; float: left; box-sizing: border-box; height: 50%; position: relative;}
.quick ul li:nth-of-type(1),.quick ul li:nth-of-type(2){ border-bottom: 1px solid #ececec;}
.quick ul li:nth-of-type(1),.quick ul li:nth-of-type(3){ border-right: 1px solid #ececec;}
.quick ul li a{ display: block; width: 100%; height: 100%;}
.quick ul li img{ position: absolute; top: 15px; left: 50%; transform: translateX(-50%);}
.quick ul li span{ position: absolute; bottom: 10px; width: 100%; display:block; text-align: center;}

/********cs_info*******/
.cs_info{ height: 200px; box-sizing: border-box; border: 3px solid #ececec; width: 98%; float: right; padding: 25px;}
.cs_info p{ font-size: 40px; letter-spacing: -1px; font-weight: bold; margin: 10px 0;}
.cs_info span{ display: block; font-size: 13px;}


/***********footer**********/
#footer{ background: #e1e1e1; 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: #666; padding: 0 10px; font-size: 12px;}
#footer .f_nav li{ line-height: 12px; border-right: 1px solid #666; 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:1200px) {
    .all_wrap{ position: relative;}
    /**header**/
    .blind{ display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; background:rgba(0,0,0,0.7); z-index: 99; display: none;}
    #header h1{ margin-left: 2.5%; margin-bottom: 20px;}
    #header .container{ width: 100%;}
    #header{ width: 100%; overflow: hidden;}
    #header .m_open{ display: block; position: absolute; top: 28px; right: 2.5%; font-size: 25px;}
     #main_gnb{display:block;position:fixed;z-index:9999;top:0;bottom:0;width:250px;height:100%;border-left:1px solid #f2f2f2;background:white;box-sizing:border-box; overflow-y: scroll; right:-250px; margin-top: 0;}
    #main_gnb a{display:block;width:100%;height:100%;line-height:40px;}
     #main_gnb .lang_small{overflow:hidden;}
    #main_gnb .lang_small li{float: left; width: 50%; box-sizing: border-box; padding: 10px;}
    #main_gnb .lang_small li a{ display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #0668b4; border-radius: 20px; text-align: center; font-size: 13px; line-height: 30px;}
    #main_gnb .m_menu{border-bottom:1px solid #f2f2f2; float: none; }
    #main_gnb .m_menu>a{display:block;font-size:14px;font-weight:bold;line-height:50px; box-sizing: border-box; padding-left: 20px; padding-bottom: 0; text-align: left;}
    #main_gnb .s_menu{display:none;border-top:1px solid #f2f2f2; position: static; border: 0;}
    #main_gnb .s_menu li{ padding: 0;}
    #main_gnb .s_menu li a{text-indent:40px; background: #f2f2f2; font-size: 13px; text-align: left;}

    /*****main_visual*****/
    .slide_viewer{ height: 400px;}
    /**main_content*/
    .m_board, .quick, .cs_info{ float:none; clear: both; width: 100%;}
    .m_board, .quick{ margin-bottom: 30px;}
}

@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 #cccccc; margin-bottom: 10px;}
    #footer .info_area2{ float: none; width: 100%; text-align: center;}
    /**main_content*/
    .m_con1 .con1, .m_con1 .con2, .m_con1 .con3{ height: 430px;}
    .m_con1 .con2 .con2-2 b{ font-size: 21px;}
    .bn1_slider {height:280px;}
}

@media all and (max-width:768px) {
    #header .container{ padding: 0;}
    #header .m_open{ position: static; float: right; margin-right: 2.5%; margin-top: 10px;}
    #header .header_top{ float: none; overflow: hidden; text-align: center;background: #f2f2f2; margin-top: 0; margin-bottom: 10px;}
    #header .header_top ul{ float: none; text-align: center;}
    #header .header_top ul li{ float: none; display: inline-block;margin: 10px 0;}


    /*main_content*/
    .main_content{ padding: 30px 0;}
    .m_con1, .m_con2, .m_con3{ margin-bottom: 30px;}
    .m_con1 .con3{ display: none;}
    .m_con1 .con1, .m_con1 .con2{ width: 50%; padding: 0;}
    .bn1_slider{ height: 190px;}

}
@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) {
    .slide_viewer{ height: 300px;}
    .m_con2{ margin-bottom: 13px;}
    .m_con3 .banner2, .m_con3 .banner3{ float: none; width: 100%;}
    .m_con3 .banner2{ margin-bottom: 13px;}
     .cs_info{ text-align: center;}
}



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

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


/*sub_title*/
.sub_title{ box-sizing: border-box; padding-bottom: 10px; margin-bottom: 20px; overflow: hidden;}
.sub_title b{ font-size: 32px; color: #888888; display: block; font-weight: lighter;}
.sub_title span{ font-size: 25px; color: #888888; font-size: bold;}
.sub_title  .title_wrap{ float: left;}
.sub_title .sub_road{ float: right; margin-top: 55px;}
.sub_title .sub_road li{ float: left; padding: 0 2px;}
.sub_title .sub_road li a{ font-size: 11px;}

/*sub_nav*/
.sub_nav{ overflow: hidden; position: relative; margin-bottom: 40px;}
.sub_nav ul{border-bottom: 0; float: left; border-right: 0;}
.sub_nav ul li{ float: left; width: 100px; height: 40px; text-align: center; line-height: 40px; border-right: 1px solid #dedede; border-top: 1px solid #dedede;}
.sub_nav ul li:first-of-type{ border-left: 1px solid #dedede;}
.sub_nav ul li a{ display: block; width: 100%; height: 100%; background: #f2f2f2;}
.sub_nav .line{position: absolute;width: 100%; height: 1px; border-bottom: 1px solid #4c4c4c; bottom: 0; left: 0;}
.sub_nav ul li.on{ position: relative; z-index: 99; border-left: 1px solid #4c4c4c; border-top: 1px solid #4c4c4c; border-right: 1px solid #4c4c4c;}
.sub_nav ul li.on li{ border-right: 0;}
.sub_nav ul li.on a{ background: white; border-bottom: 1px solid white; font-weight:bold;
}

/*sub_content*/

.sub_wrap{ min-height: 600px; padding-bottom: 50px;}

/*****sub1-1******/
.sub1-1 img{ float: left; margin-right: 20px;}
.sub1-1 p{ box-sizing: border-box; }


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

@media all and (max-width:768px) {
    .sub_wrap{ width: 100%;}
    .sub_title b{ font-size: 25px;}
    .sub_nav .line{ display: none;}
    .sub_nav ul{ text-align: center;}
    .sub_nav ul li{ float: none; display: inline-block; border: 1px solid
    #dedede; margin-bottom: 10px;}
    .sub_nav ul li.on{ border-bottom: 1px solid #4c4c4c;}
}