@charset "UTF-8";
.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) 100% -25px 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(../img/main/bg_more.png) 14px 86% no-repeat}
.main-tab-box .tab-body li a:hover{background: url(../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(../img/main/btn_pre.png) no-repeat}
.main-board-ctl .btn-next{background: url(../img/main/btn_next.png) no-repeat}
.main-tab-box .tab-body h3{font-size: 18px; line-height: 1.2; height: 46px; 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}
.main-tab-box .main-board-ctl{position:absolute; bottom: -1px; right: -px;  height: 38px;}
.main-tab-box .main-board-ctl a{display: inline-block; height: 38px;} 
.mo-board-link{display: none}
/* LINK : main-lnk-box */
.main-lnk-box li{width:100%; height: 90px; margin-bottom: 5px}
.main-lnk-box div{width: 100%; height: 100%;  display: table;}
.main-lnk-box li a{display: table-cell; text-indent: 90px; vertical-align: middle; width: 100%; font-size: 18px; font-weight: 700; color: #444; letter-spacing: -1px; background-position: 33px 50%; background-repeat:no-repeat }
.main-link-box1 div{background: url(../img/main/bg_main_lnk1.png) top right no-repeat;}
.main-link-box2 div{background: url(../img/main/bg_main_lnk2.png) top right no-repeat;}
.main-link-box3 div{background: url(../img/main/bg_main_lnk3.png) top right no-repeat;}
.main-link-box1 a{background-image: url(../img/main/icon_con1.png)}
.main-link-box2 a{background-image: url(../img/main/icon_con2.png)}
.main-link-box3 a{background-image: url(../img/main/icon_con3.png)}

@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) {
    .main-tab-box .tab-body h3{height: 44px;}   
    .main-lnk-box li a{background-position: 25px 50%; text-indent:80px}
}

@media screen and (max-width:1160px) {
    .main-tab-box{font-size: 15px}
}

/* 햄버거 메뉴 시작 */
@media screen and (max-width:1024px) {
    /* 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(../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-wrap */
    .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-box{width: 100%; height: 90px; float: none; padding-top: 30px}
    .main-lnk-box ul{display: flex; flex-flow: row wrap}
    .main-lnk-box li{width: 33.33%;}
    .main-lnk-box li a{font-size: 16px}
    .main-lnk-box div{margin: 0 auto; width: 98%;}
    .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}
    /* work */
    .main-lnk-box li a{background-position: 30px 50%; text-indent: 80px; background-size: 30px auto; display: block; height: 55px; line-height: 55px}
    /* LINK : main-lnk-box */
    .main-lnk-box ul{display: block;}
    .main-lnk-box{height: auto; padding-top: 30px;}
    .main-lnk-box div{display: block; height: 55px; background-color: #73c857; background-size: 100% 100%; width: 100%; margin: 0}
    .main-lnk-box li{width: 100%; height: 55px;}
}

@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-wrap */
    .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%}
}

@media screen and (max-width:576px) {
    .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%}
}

/* 모바일 최소폰트 14px */
@media screen and (max-width:420px) {
    .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 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}
}