@charset "utf-8";

.wrap {width:100%; height:100%; margin:0 auto; padding:0; font-family:Nanum Gothic;}
.container {width:100%; max-width:1024px;  }
header {position:fixed; width: inherit; z-index:10; left:0; right:0 }
header:hover { }
header nav .menu_icon {position:absolute; top:0; left:0; z-index:100; background:url('/images/mobilegnc/icon_menu.png') center center no-repeat; background-size:30px; height:45px; width:50px; opacity:0.7; transition: all 0.2s ease 0s;}
header nav .menu_icon:hover, header nav .share_icon:hover {opacity:1; }
header nav .share_icon {position:absolute; top:0; right:0; z-index:100; background:url('/images/mobilegnc/icon_share.png') center center no-repeat; background-size:34px; height:45px; width:50px; opacity:0.7; transition: all 0.2s ease 0s;}
header h2 {z-index:11; height:45px; margin-top:0; font-size:16px; background-color: #64b836; color:#fff; text-align:center; margin-bottom:0; }
header h2 p {padding-top:15px; }
.side_menu {position:absolute; z-index:999; top:0; left:0; width:90px; height:100%; background:rgba(26,38,48,0.6); font-size:0.9em; }
.side_menu ul {position:relative;}
.side_menu li {height:90px; background:rgba(26,38,48,1); border-bottom:1px solid rgba(83,86,90,0.8); opacity:0.6; transition: all 0.2s ease 0s; }
.side_menu li:hover {opacity:1; }
.side_menu li a {height:90px; display:block; padding:60px 0 0 0; text-align:center; color:#fff; }
.side_menu .logo {background:#64b836; border-right:1px solid #4da41e; opacity:1; }
.side_menu .logo:hover {background:#58ae28; }
.side_menu .logo a {background:url('/images/mobilegnc/logo.png') center center no-repeat; background-size:50px; font-size:0; color:rgba(255,255,255,0); }
.side_menu .menu_intro a {background:url('/images/mobilegnc/icon_intro.png') center 23px no-repeat; background-size:26px;  }
.side_menu .menu_story a {background:url('/images/mobilegnc/icon_story.png') center 23px  no-repeat; background-size:26px;  }
.side_menu .menu_notice a {background:url('/images/mobilegnc/icon_notice.png') center 23px  no-repeat; background-size:26px;  }
.side_menu .menu_close a {background:url('/images/mobilegnc/icon_close.png') center center no-repeat; background-size:24px; font-size:0; color:rgba(255,255,255,0);  }
.side_menu .menu_close {background:rgba(26,38,48,0); opacity:0.5;  width:90px; height:90px; position:absolute; bottom:0; z-index:1000; }

/*.main_story div {position:relative; background:url('/images/mobilegnc/main_background.jpg') center top no-repeat; background-size:cover; min-height:500px; height:auto; }*/
.main_story div img {width:100%;}
.main_story div dl {position:absolute; bottom:30px; padding-left:110px; padding-right:10px; color:#fff; letter-spacing:-1px; }
.main_story div dl dt {font-size:1.4em; margin-bottom:10px; }
.main_story div dl dd {font-size:0.9em; line-height:1.52em;  margin-bottom:26px; letter-spacing:0; }
.main_story div dl .more_btn a {padding:8px 60px 8px 15px; border:1px solid rgba(255,255,255,0.6); border-radius:3px; transition: all 0.2s ease 0s;
                                    background:url('/images/mobilegnc/icon_arrow.png') 112px center no-repeat; background-size:16px; opacity:0.7; }
.main_story div dl .more_btn a:link {color:#fff; }
.main_story div dl .more_btn a:hover {border:1px solid rgba(255,255,255,1); opacity:1;  }
.main_story div dl .more_btn a:visited {color:#fff; }

/**** swiper style custom ***/
.swiper-pagination {text-align:right; padding-right:10px; }
.swiper-pagination-bullet-active {background:#fff; }
.swiper-pagination-bullet {width:24px; height:3px; border-radius:0; }
.swiper-pagination-bullet {background:#fff; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin:0 2px; }

.apply_btn {font-weight:bold; display:block; padding:14px; color:#fff; border-radius:3px; background-color: #64b836; opacity:0.8; transition: all 0.2s ease 0s; font-size:1.2em; }
.apply_btn span {background:url('/images/mobilegnc/icon_arrow_window.png') right center no-repeat; background-size:18px; padding-right:30px; }
.apply_btn:hover {opacity:1; }

.board {background:#f1f1f1; letter-spacing:-1px; padding-top:45px; min-height:600px; }
.board img {width:100%; }
.board .cate {color:#64b836;font-size: 1em;}
.board .title {font-size:1.3em; font-weight:bold; }
.board .date {color:#bebebe; font-size:0.9em; }
.board .hit {color:#bebebe; font-size:0.9em;  margin-left:10px; padding-left:20px; background:url('/images/mobilegnc/icon_hit.png') left 3px no-repeat; background-size:16px; }
.board .label {padding:.2em .4em .3em; font-size:50%; vertical-align:middle; }
.board .category {padding:10px; height:40px; }
.board .gallery {background:#fff; margin:15px; padding-bottom:0px; box-shadow:0px 2px 3px #ccc;  }
.board .gallery a {}
.board .gallery img {width:100%;}
.board .gallery .cate {color:#64b836;font-size: 1em; padding-top:20px; }
.board .gallery .title {font-size:1.2em; }
.board .list .title {font-size:1.2em; margin: 0 0 5px; font-weight:normal; letter-spacing:-1px; }
.board .list {border-bottom:1px solid #efefef; background:#fff; padding:14px 12px 10px 15px; }
.board .view {background:#fff; padding:15px;  letter-spacing:-1px; }
.board p {margin:0 0 3px; }

.CONTENT_AREA { }
.CONTENT_AREA img {display: block; margin:0 auto;}
.CONTENT_AREA p {margin:0px; text-align:justify; line-height: 160%; }

.float_btn {position:fixed; bottom:50px; z-index:2; width:100%; }

.float_btn li {width:40px; height:40px; opacity:0.7; transition: all 0.2s ease 0s;  }
.float_btn li:hover {opacity:1;  }
.float_btn .pre {float:left; margin-left:10px; background:url('/images/mobilegnc/float_btn_pre.png') center center no-repeat;background-size:40px; }
.float_btn .top {right: 0; float:right; margin-right:10px;  background:url('/images/mobilegnc/float_btn_top.png') center center no-repeat;background-size:40px; }
.float_btn li a {display:block; width:40px; height:40px;  }

.sns_area {text-align:center; width:180px; height:70px; margin:0 auto; overflow:hidden; }
.sns_area a>span {display:none;}
.sns_area .kakaotalk {background:url('/images/common/icon_kakaotalk.png') center center no-repeat;  background-size:cover; }
.sns_area .kakaostory {background:url('/images/common/icon_kakaostory.png') center center no-repeat;  background-size:cover; }
.sns_area .facebook {background:url('/images/common/icon_facebook.png') center center no-repeat;  background-size:cover; }
.sns_area a {float:left; width:40px; margin:10px; height:40px; border-radius:5px; display:block; opacity:0.9; }
.sns_area a:hover {opacity:1; }


footer {background:#fff; color:#666; text-align:center; padding-top:30px;  }
footer .apply {color:#fff; background-color: #64b836; opacity:0.9; transition: all 0.2s ease 0s; font-size:1.1em; font-weight:bold;  }
footer .apply a {display:block; padding:14px; }
footer .apply a span {background:url('/images/mobilegnc/icon_arrow.png') right center no-repeat; background-size:24px; padding-right:30px; }

footer .apply:hover {opacity:1;  }
footer .apply a:link, footer .apply a:visited {color:#fff; }
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
}

@media (max-width: 568px) {
}

@media (max-width: 416px) {
}

@media (max-width:320px) {
}


/* Orientation-dependent styles for the content of the menu */
.opacity { display: none; z-index: 9000; position: absolute; left:90px;}
.cbp-spmenu-vertical {width: 90px;height: 100%;top: 0;z-index: 10000;}
.cbp-spmenu-vertical li{list-style: none;}
.cbp-spmenu-vertical li > .btn-login{background-color: #292c35;border-radius: 0;margin:10px;border:1px solid #696969;}

/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {left: -90px;}
.cbp-spmenu-right {right: -90px;}
.cbp-spmenu-left.cbp-spmenu-open {left: 0px;}
.cbp-spmenu-right.cbp-spmenu-open {right: 0px;}

/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {top: -150px;}
.cbp-spmenu-bottom {bottom: -150px;}
.cbp-spmenu-top.cbp-spmenu-open {top: 0px;}
.cbp-spmenu-bottom.cbp-spmenu-open {bottom: 0px;}
/* Push classes applied to the body */

.cbp-spmenu-push {overflow-x: hidden;position: relative;left: 0;}
.cbp-spmenu-push-toright {left: 90px;}
.cbp-spmenu-push-toleft {left: -90px;}

/* Transitions */
.cbp-spmenu,.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Example media queries */
@media screen and (max-height: 26.375em){
    .cbp-spmenu-vertical {font-size: 90%;width: 200px;}
    .cbp-spmenu-left,.cbp-spmenu-push-toleft {left: -200px;}
    .cbp-spmenu-right {right: -200px;}
    .cbp-spmenu-push-toright {left: 200px;}
}