@charset "UTF-8";
/* Reset */
*{margin:0;padding:0;} 
body{font-family:'Noto Sans KR',sans-serif;margin:0;font-weight:400;font-size:15px;color:#333;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none}
dl,ul,ol,menu,li{list-style: none}
fieldset,img{border: none}
input,select,textarea,button{vertical-align: middle}
table{border-collapse: collapse; border-spacing: 0}
button{border-radius: 0; -webkit-border-radius:0;-webkit-appearance:none;border: 0;background:transparent;cursor: pointer}
a{color:#333;word-wrap:break-word;text-decoration: none}
a:hover,a:active{text-decoration: none}
/* 공통 */
.hide{display:block;position:absolute;width:0;height:0;text-indent:-9999999px;overflow:hidden;}
.pc-hide{display:none !important;}
.clear:after{content: ""; display: block; clear: both}
/* layout */
.res-width-wrap{max-width: 1200px; margin:0 auto; padding-left: 35px; padding-right: 35px;} /* 공통 레이아웃 최대넓이 관리 */
.header-wrap{position: relative; max-width: 1600px; height: 116px; margin:0 auto; background-color: #fff; border-bottom: 1px solid #dedede;}
.header-top-wrap{background-color: #f7f7f7; height: 24px; padding-top: 11px}
.foot-wrap{padding: 22px 0; width: 100%; background-color: #222; font-size: 14px; color: #888; text-align: center}
/* header : header-wrap */
.header-top-box ul{float:right;}
.header-top-box li{position:relative;float:left;margin:0 18px 0 0;padding:0 19px 0 0;}
.header-top-box li:after{content:"";position:absolute;top:6px;right:0;width:1px;height:11px;border-right:1px solid #8b8080;}
.header-top-box li:last-of-type{margin:0;padding:0;}
.header-top-box li:last-of-type:after{display:none;}
.header-top-box li a{font-size:13px;color:#8b8080;}
.header-wrap .header-box{position: relative; height: 63px; padding-top: 35px}
.textlogo{display: block; float: left; height: 44px}
.textlogo img{vertical-align: top}
.gnb{float: right}
.gnb-bg{display: none; background-color: #f9f9f9; position: absolute; top:117px; left: 0; width: 100%; height: 220px; z-index: 10; box-shadow: 0px 6px 6px rgba(0,0,0,0.1)}
.gnb .gnb-subbox{display: none}
.gnb.on .gnb-subbox{display: block}
.gnb-subbox.on:before{content: " "; display: block; position: absolute; top:0; left: 50%; margin-left: -50px; width: 100px; height: 5px; background-color:#0c6f07}
.gnb > ul > li{float: left; margin-left:25px; padding: 0 5px; position: relative; line-height: 44px; height: 44px; font-size: 18px; color: #333; font-weight: 400;}
.gnb > ul > li:first-child{margin-left: 0}
.gnb > ul > li:last-child{padding-right: 0}
.gnb-subbox{display: none; position: absolute; top:80px; left:0; z-index: 10; padding:30px 0 0 0; width:100%;}
.gnb-subbox li{margin-bottom: 15px; font-size: 15px; line-height: 1; text-align: center;}
.gnb-subbox li a{display: inline-block; font-weight: 400}
.gnb-subbox li a:hover{color: #0c6f07}
.slideMenu{display: none}
.btn-menu{display: none}
/* main */
.main-bg-wrap{background:url(/_res/aposho/img/main/bg_main.png) top center repeat-x}
.main-visual-wrap{background: url(/_res/aposho/img/main/bg_visual.gif) top center no-repeat}
.main-content-wrap{padding-top:50px; padding-bottom: 55px; overflow: hidden;}
.main-lnk-wrap{padding-bottom: 72px}
/* main-visual : main-visual-wrap */
.main-visual-box{position: relative; height: 409px;  background: url(/_res/aposho/img/main/bg_main_visual.png) 50% 35px no-repeat}
.main-visual-box p{position: absolute; top:113px; left: 35px; overflow: hidden; height: 116px; width: 390px; text-indent: -9999999px; background: url(/_res/aposho/img/main/txt_visual.png) no-repeat}
/* About APOSHO : main-content-wrap */
.main-content-wrap h2{font-size: 24px; font-weight: 700; border-bottom: 1px solid #333; display: inline-block}
.main-content-box{float: left; width: 56%;}
.main-img-box{float: left; width: 44%; text-align: right}
.main-img-box img{float: right; width: 92%; max-width: 488px;}
.main-content-wrap .main-about-bf{margin: 18px 0; font-size: 21px; font-weight: 300; width: 89%;} 
.main-content-wrap .main-about-sf{font-size: 18px; font-weight: 200; margin-bottom: 20px; width: 100%;} 
.main-content-wrap a{position: relative; font-size: 17px; font-weight: 500; color: #027126}
.main-content-wrap a:after{content: ""; position: absolute; top:13px; right: -36px; display: block; width: 32px; height: 2px; background-color:#027126}
/* TAB & LINK : main-lnk-wrap */
.main-board-box{width: 72.917%; height: 280px; float: left; position: relative;}
.main-lnk-box{float: left; width: 27.083%}
/* TAB : main-tab-wrap */
.main-tab-wrap{margin-right:16px; height: 100%; position: relative; border: 1px #f4f4f4 solid;  box-sizing:border-box}
.main-tab-head{border-bottom: 1px solid #f4f4f4}
.main-tab-box{float: left;}
.main-tab-box h2{height: 20px; line-height: 20px; font-size: 20px; color: #969696;  padding:25px 0 25px 16px}
.main-tab-box:first-child h2:after{content: " "; display: inline-block; width: 2px; height: 15px; background:#969696; margin-left: 16px; position: relative; top:1px}
.main-tab-box h2 a{color: #969696; vertical-align: top}
.main-tab-box .tab-body{display: none}
.main-tab-box.active .tab-body{display: block}
.main-tab-box.active h2 a{color: #333}
.main-tab-box .tab-body{position: absolute; top:71px; left: 0; width: 100%; height: 207px; overflow: hidden;}
.main-tab-box .tab-body li{float: left; display: block; width:25%; height: 207px; border-right: 1px solid #f4f4f4; margin-right: -1px}
.main-tab-box .tab-body li a{display: block; height: 100%; padding: 0 14px; background: url(/_res/aposho/img/main/bg_more.png) 14px 86% no-repeat}
.main-tab-box .tab-body li a:hover{background: url(/_res/aposho/img/main/bg_more_on.png) 14px 86% no-repeat;}
.main-tab-box .main-board-ctl{position:absolute; bottom: -1px; right: -1px;  height: 38px;}
.main-tab-box .main-board-ctl button{float: left; display: block; text-indent: -99999px; width:39px; height:38px;}
.main-board-ctl .btn-pre{background: url(/_res/aposho/img/main/btn_pre.png) no-repeat 50% 50%; background-size:cover;}
.main-board-ctl .btn-next{background: url(/_res/aposho/img/main/btn_next.png) no-repeat 50% 50%; background-size:cover;}
.main-tab-box .tab-body h3{font-size: 18px; line-height: 1.2; height: 45px; padding-top: 21px; margin-bottom: 9px; width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; word-wrap: break-word}
.main-tab-box .tab-body p{font-size:14px; font-weight: 200; color: #555; line-height: 1.4; height: 40px; overflow: hidden;  margin-bottom: 4px; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; word-wrap: break-word}
.main-tab-box .tab-body span{font-weight: 200; font-size:14px; color: #555}
.mo-board-link{display: none}
/* LINK : main-lnk-box */
.main-lnk-box li{width:100%; height: 90px; margin-bottom: 5px}
.main-lnk-box li a{display: block; text-indent: 90px; width: 100%; height: 90px; font-size: 18px; line-height: 90px; font-weight: 700; color: #444; letter-spacing: -1px; background-position: 33px 50%; background-repeat:no-repeat }
.main-link-box1 div{background: url(/_res/aposho/img/main/bg_main_lnk1.png) top right no-repeat;}
.main-link-box2 div{background: url(/_res/aposho/img/main/bg_main_lnk2.png) top right no-repeat;}
.main-link-box3 div{background: url(/_res/aposho/img/main/bg_main_lnk3.png) top right no-repeat;}
.main-link-box1 a{background-image: url(/_res/aposho/img/main/icon_con1.png)}
.main-link-box2 a{background-image: url(/_res/aposho/img/main/icon_con2.png)}
.main-link-box3 a{background-image: url(/_res/aposho/img/main/icon_con3.png)}
/* sub */
.sub-bg-wrap{background:url(/_res/aposho/img/main/bg_main.png) top center repeat-x}
.sub-header-wrap{position: relative; max-width: 1600px; height: 116px; margin:0 auto; background-color: #fff; border-bottom: 1px solid #dedede; }
.sub-visual-wrap{padding: 94px 0}
.sub-wrap{position: relative; min-height:285px}
.sub-content-wrap{/*width: 76.25%;*/width:calc(100% - 250px); min-height: 287px;}
.lnb{position: absolute; top:60px; right:0; width:240px}
/* header : header-wrap */
.sub-header-wrap .header-box{padding-top:19px; padding-bottom: 19px; line-height: 44px}
/* sub-visual */
.sub-visual-wrap{background-size:cover; background-repeat:no-repeat; max-width:1600px; margin:auto}
.sub-about .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_about.jpg)}
.sub-apocon .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_apocon.jpg)}
.sub-event .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_event.jpg)}
.sub-doc .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_doc.jpg)}
.sub-member .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_members.jpg)}
.sub-forum .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_forum.jpg)}
.sub-login .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/sub_login.jpg)}
.sub-visual-box {color: #fff; font-weight: 200px; letter-spacing: -1px; text-align: center; font-size:15px}
.sub-visual-box h2{padding-bottom:4px; font-weight: 500; font-size: 40px}
.sub-visual-box ul{text-align: center}
.sub-visual-box li{display: inline-block}
.sub-visual-box li:before{content: ">"; display:inline-block; padding:0 10px}
.sub-visual-box li:first-of-type:before{display:none}
/* sub-wrap */
.sub-container .sub-wrap{padding-top:60px; padding-bottom:90px}
.sub-content-wrap h2{font-weight: 500; font-size: 32px; letter-spacing: -1px}

.sub-content-wrap .title::after{content: ""; display: block; margin:30px 0 29px 0; width:62px; height: 5px; background-color:#64c549 }
.sub-content-tab{padding-bottom:35px}
.sub-content-full h2{text-align: center; padding-bottom:30px}
/* lnb */
.lnb li{height: 47px; line-height: 47px; }
.lnb li a{display: block; font-size: 17px; letter-spacing: -1px; text-indent: 20px; border-top: 1px solid #ccc}
.lnb li:last-of-type a{border-bottom: 1px solid #ccc}
.lnb .on,.lnb a:hover{background-color: #0c6f07; color: #fff}
@media screen and (max-width:99999px) {
    .main-tab-wrap,.main-lnk-box div{box-shadow: 0px 6px 6px rgba(0,0,0,0.1)}
} 
@media screen and (max-width:1200px) {
    .gnb > ul > li,.main-lnk-box li a,.main-tab-box .tab-body h3{font-size: 17px}
    .res-width-wrap{width: calc(100% - 60px); padding-right:0; padding-left: 0}
    .main-tab-box .tab-body h3{height: 44px;}   
    .main-lnk-box li a{background-position: 25px 50%; text-indent:80px}
	
	.main-tab-box .main-board-ctl{height:31px;}
	.main-tab-box .main-board-ctl button{width:30px; height:30px;}
}
@media screen and (max-width:1160px) {
    .gnb > ul > li{font-size: 16px}
    .gnb-subbox li{font-size: 15px}
    .main-tab-box{font-size: 15px}
}

/* 햄버거 메뉴 시작 */
@media screen and (max-width:1024px) {
    /* header-wrap */
    .header-wrap{height: 47px}
    .header-wrap .header-box{height: 35px; padding-top: 12px}
    .header-top-wrap{display: none}
    /* .header-box */
    .textlogo{height: 22px}
    .textlogo img{width: auto; height: 22px}
    .gnb{display: none;}
    .slideMenu{position: absolute; top:0; left: -30px; z-index: 999; background:#fff; width: 76.563%; max-width: 300px; box-shadow: 5px 0px 15px rgba(56,56,56,0.5)} /* width:245px; */
    .slideMenu.active{display: block;}
    .btn-menu{display: block; position: absolute; top: 18px; right: 0; width: 20px; height: 11.5px; text-indent: -9999999px; background: url(/_res/aposho/img/main/btn_mo_menu.png) no-repeat; background-size: 20px 11.5px}
    /* m-gnb */
    .m-gnb-top{position: relative; padding:12px 0 12px 15px}
    .m-gnb-top a img{width: auto; height: 22px; vertical-align: top}
    .m-gnb-top .btn-menu-close{position: absolute; top:16.5px; right: 14px; width: 14px; height: 14px; text-indent: -9999999px; background:url(/_res/aposho/img/main/btn_mo_close.png) no-repeat; background-size: 14px 14px}
    .m-gnb-middle{border-top: 1px solid #e0dfdf}
    .m-gnb-middle .util{position: relative; height: 30px; overflow: hidden; text-align: center; line-height: 30px; font-size: 13px}
    .m-gnb-middle ul:after{content: " "; display: block; position: absolute; top:0; left: 50%; width: 1px; height: 30px; background: #e0dfdf}
    .m-gnb-middle li{float: left; width: 50%; display: block; height: 30px;}
    .m-gnb-content li{border-bottom: 1px solid #e0dfdf}
    .m-gnb-content > ul{border-bottom: 1px solid #e0dfdf; border-top: 1px solid #e0dfdf} 
    .m-gnb-content ul li a{display: inline-block; width: 100%; height: 100%; text-indent: 15px; height: 38px; line-height: 38px; font-size: 15px; background-color: #f7f7f7}
    .m-gnb-content ul .on>a{background:url(/_res/aposho/img/main/btn_mo_up.png) 95% 50% no-repeat; background-color:#0c6f07; background-size:16px auto; color: #fff;}
    .m-gnb-content > ul > li > a{background:url(/_res/aposho/img/main/btn_mo_down.png) 95% 50% no-repeat; background-size:16px auto; background-color: #f7f7f7}
    .m-gnb-content .on{border:none}
    .m-gnb-content ul li:last-of-type{border-bottom: none}
    .m-gnb-content .m-gnb-subbox a{background-color: #fff; color: #333; font-size: 13px}
    .m-gnb-content .on .m-gnb-subbox{display: block; border-bottom: 1px solid #e0dfdf}
    .m-gnb-content .m-gnb-subbox a:hover{color: #0c6f07;}
    .m-gnb-subbox{display: none;}
	.m-gnb-bottom{border-bottom: 1px solid #e0dfdf; height: 34px; text-align: center; line-height: 34px; font-size: 13px}
    /* main-visual-box */
    .main-visual-box{ height: 300px; background: url(/_res/aposho/img/main/bg_main_visual.png) bottom right no-repeat; background-size: 60% auto;}
    .main-visual-box p{top:80px; background-size: 80% auto;}
    /* main-visual-box */
    .main-visual-box{ height: 300px; background: url(/_res/aposho/img/main/bg_main_visual.png) bottom right no-repeat; background-size: 60% auto;}
    .main-visual-box p{top:80px; background-size: 80% auto;}
    /* main-content */
    .main-content-wrap .main-about-bf{font-size: 16px; margin: 16px 0}
    .main-content-wrap .main-about-sf{font-size: 14px; margin-bottom: 16px;}
    .main-content-wrap a{font-size: 14px}
    .main-content-wrap a:after{top: 11px; right: -20px; width: 15px; height: 1px;}
    /* main-lnk-wrap */
    .main-lnk-wrap{min-height: 200px; padding-bottom: 50px;}
    .main-board-box{width: 100%; float: none; overflow: hidden;}
    .main-content-wrap h2,.main-tab-box h2{font-size:18px}
    .main-tab-box h2{height: 18px; line-height: 18px}
    .main-tab-box .tab-body{top:68px; height: 211px}
    .main-tab-box .tab-body li{height: 211px}
    /* LINK : main-lnk-box */
    .main-lnk-box{float: none; width: 100%; height: auto; padding-top: 30px;}
    .main-lnk-box div{background-color: #73c857; background-size: 100% 100%}
    .main-lnk-box li{height: 55px;}
    .main-lnk-box li a{background-position: 30px 50%; text-indent: 80px; background-size: 30px auto; height: 55px; line-height: 55px; font-size: 16px}
    /* sub-nav */
    .lnb{display: none}
    .sub-content-wrap{width: 100%}
    .sub-visual-wrap{background-position:center center}
    /* sub-visual */
    .sub-bg-wrap{background: none}
    .sub-visual-wrap{padding: 76px 0}
    .sub-visual-box h2{font-size:30px }
    .sub-content-wrap h2::after{margin:20px 0 20px 0}
    .sub-content-wrap h2{font-size: 22px}
}

@media screen and (max-width:768px) {
    /* main-visual-box */
    .main-visual-box p{top:50px; background-size: 70% auto}
    .main-img-box{display: none}
     /* main-content */
    .main-content-box{float: none; width: 100%;}
    .main-content-wrap{padding-top: 38px; padding-bottom: 28px}
    .main-content-wrap .main-about-bf{width: 80%}
    .main-board-box{height: 270px}
    .main-tab-box h2{padding: 20px 0 20px 16px}
    .main-tab-box .tab-body{top:58px; height: 211px;}
    .main-tab-box .tab-body li{height: 211px; width: 33.33%}
    /* sub-visual */
    .sub-visual-wrap{padding: 73px 0}
    .sub-about .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_about.jpg)}
    .sub-apocon .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_apocon.jpg)}
    .sub-event .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_event.jpg)}
    .sub-doc .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_doc.jpg)}
    .sub-member .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_members.jpg)}
    .sub-forum .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_forum.jpg)}
    .sub-login .sub-visual-wrap{background-image: url(/_res/aposho/img/sub/mo_login.jpg)}
    .sub-visual-box h2{font-size:30px }
    .sub-content-wrap h2::after{margin:20px 0 20px 0}
    .sub-content-wrap h2{font-size: 22px}	
}

@media screen and (max-width:640px) {
	.main-tab-box .main-board-ctl{height:26px;}
	.main-tab-box .main-board-ctl button{width:25px; height:25px;}
}

@media screen and (max-width:576px) {
    .res-width-wrap{width: calc(100% - 30px)} 
    .slideMenu{left: -15px}
    .main-tab-box .tab-body li a{background-size: auto 10px; background-position: 14px 90%}
    .main-visual-box p{left: 17.5px}
    .main-content-wrap .main-about-bf{width: 90%}
    /* sub */
    .sub-container .sub-wrap{padding-top: 40px; padding-bottom: 70px;}
}

/* 모바일 최소폰트 14px */
@media screen and (max-width:420px) {
    .foot-wrap{font-size: 11px}
    .foot-box p{display: inline-block; width: 70%}
    .main-bg-wrap{background: none}
    /* main-visual : main-visual-wrap */
    .main-visual-box{height: 210px; background: url(/_res/aposho/img/main/bg_main_visual.png) 90% 110% no-repeat; background-size: 234.5px auto;}
    .main-visual-box p{top:30px; width: 195px; height: 58px; background-size: 195px 58px}
    /* About APOSHO : main-content-wrap */
    .main-content-wrap h2{font-size:17px}
    .main-content-wrap .main-about-bf{font-size: 15px; width: 100%;}
    .main-content-wrap .main-about-sf{font-size: 14px}
    .main-content-wrap a{font-size: 13px}
    .main-content-wrap a:after{top: 10px; right: -18px}
     /* TAB : main-tab-wrap */
    .main-tab-wrap{margin: 0;}
    .main-board-box{height: 175px;}
    .main-tab-title{height: 16px; line-height: 16px; padding: 14px 0 14px 10px; font-size: 15px}
    .main-tab-title a{height: 15px}
    .main-tab-title.main-tab-b a{left: 155px;}
    .main-tab-title.main-tab-b a:before{width: 1px; top:0; left: -13px;}
    .main-tab-area li{width: 50%; height: 122px; padding-top: 8px;}
    .main-tab-area li:nth-child(3),.main-tab-area li:nth-child(4){display: none;}
    .main-tab-area h3{font-size: 12px; height: 30px; width: 85%;}
    .main-tab-area p{font-size: 11px; height: 28px; margin-bottom: 0; line-height: 1.2}
    .main-tab-area span{font-size: 10px}
    .main-tab-area li a{background-size:21px 8px; padding: 0 10px}
    .main-tab-area li a:hover{background-size: 47.5px 8px;}
    .main-tab-area ul{height:130px ; }
    .main-tab-wrap .main-board-ctl{display: none}
    /*.mo-board-link{display: block; position: absolute; top:0; right: 0; height: 20px; padding: 12px 10px 12px}*/
	.mo-board-link{display: none}
    /*.mo-board-link a{display:inline-block; height: 20px;}*/
    /*.mo-board-link img{width:auto; height: 100%; vertical-align: top}*/
    .main-board-box::after{content: ""; display: block; clear: both }
    .main-lnk-wrap{padding-bottom: 30px;}
    .foot-wrap{font-size: 11px}
    .foot-box p{display: inline-block; width: 70%;}
    .main-board-box{height: 200px}
    .main-tab-box h2{padding: 15px 0 15px 10px; font-size: 16px; height: 16px; line-height: 16px}
    .main-tab-box:first-child h2:after{height: 14px; top: 2px; width:1px}
    .main-tab-box .tab-body h3{font-size: 15px; height: 36px; padding-top: 15px}
    .main-tab-box .tab-body{top:0; height: 153px; padding-top: 46px}
    .main-tab-box .tab-body li{width: 50%; height: 153px}
    .main-tab-box .tab-body li a{padding: 0 10px; background-size: 20px auto; background-position: 10px 90%}
	.main-tab-box .tab-body li a:hover{background-size: 50px auto; background-position: 10px 90%}
    .main-tab-box .tab-body p{font-size: 13px; line-height: 1.2; height: 33px}
    .main-tab-box .tab-body span{font-size: 13px}
    /* sub-visual */
	.sub-visual-box{font-size: 14px}
    .sub-visual-box h2{font-size:24px }
    .sub-content-wrap h2::after{margin:10px 0 20px 0; height: 3px;}
    .sub-content-wrap h2{font-size: 18px; line-height: 1}
}

@media screen and (max-width:350px) {
	.main-tab-box h2{font-size: 14px;}
	
	.Board_pager .Pageing li{margin: 0 6px 10px -4px;}
	.Board_pager .Pageing li.last-pager{margin:0 0 10px -4px;}
	.Board_button ul li{width:125px; margin-left:0; margin:0 5px;}
	
}