@charset "utf-8";

/*
 * --------------------------------------------------------------------------
 * descript : 서브 콘텐츠
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Park HyeonJeong
 * update	: 2019.01.13
 * --------------------------------------------------------------------------
 */

#sub-container {max-width:1600px; padding-left:40px; padding-right:40px;}
#sub-container:before {content:""; display:block; position:relative; height:75px;}

.sub-container-inner {display:table; table-layout:fixed; position:relative; width:100%;}
.sub-left-group, .sub-contents {display:table-cell; vertical-align:top;}
.sub-left-group {width:350px; font-family:'NanumSquare','Noto Sans KR';}

#sub-visual {padding-bottom:45px;}
#sub-visual h2 {font-size:80px; font-weight:100; color:#d72c33;}

#glamping-tab li {display:block;}
#glamping-tab li + li {padding-top:5px;}
#glamping-tab a {display:inline-block; font-size:30px; font-weight:800; color:#656565; word-break:keep-all; line-height:1.3;}
#glamping-tab li.active a {font-size:60px; color:##d72c33;}
#glamping-tab li.active a em {color:#fff;}

.sub-contents {padding-left:15px; text-align:right;}
.sub-contents > .inner {display:inline-block; width:100%; max-width:1085px; text-align:left;}

@media all and (max-width:1180px){
	.sub-left-group {width:300px;}
	#sub-visual {padding-bottom:35px;}
	#sub-visual h2 {font-size:60px;}
	#glamping-tab a {font-size:20px;}
	#glamping-tab li.active a {font-size:40px;}
}
@media all and (max-width:1000px){
	.sub-left-group {width:200px;}
	#sub-visual {padding-bottom:25px;}
	#sub-visual h2 {font-size:30px;}
	#glamping-tab a {font-size:14px;}
	#glamping-tab li.active a {font-size:25px;}
}
@media all and (max-width:770px){
	#sub-container {padding-left:30px; padding-right:30px;}
	#sub-container:before {height:30px;}
	.sub-container-inner {display:block;}
	.sub-left-group, .sub-contents {display:block;}
	.sub-left-group {width:auto; padding-bottom:40px;}
	.sub-contents {padding-left:0;}
	#sub-visual {padding-bottom:10px;}
	#glamping-tab {overflow:hidden;}
	#glamping-tab li {float:left; width:50%;}
	#glamping-tab li + li {text-align:right;}
}
@media all and (max-width:640px){
	#sub-container {padding-left:10px; padding-right:10px;}
}

.sub-text-content {font-size:16px; font-weight:100; padding-bottom:60px;}
.sub-text-content h3 {font-size:2em; color:#abadaf; font-weight:800; padding-bottom:20px; font-family:'NanumSquare','Noto Sans KR';}
.sub-text-content * + h3 {padding-top:50px;}
.sub-text-content .textbox {line-height:1.6; word-break:keep-all;}
.sub-text-content .textbox p + p {padding-top:12px;}

@media all and (max-width:770px){
	.sub-text-content {font-size:14px;}
	.sub-text-content h3 {font-size:1.5em;}
}

.list-history {padding-top:6px;}
.list-history li {position:relative; padding:17px 0 17px 32px;}
.list-history li:before {content:""; display:block; position:absolute; width:1px; top:0; bottom:0; left:6px; background:#fff;}
.list-history li:after {content:""; display:block; position:absolute; width:14px; height:14px; border-radius:100%; box-sizing:border-box; top:22px; left:0px; background:#231f20; border:2px solid #d72c33;}
.list-history li:first-child {padding-top:13px;}
.list-history li:first-child:after {top:18px;}
.list-history p {position:relative; padding-left:60px; line-height:1.3;}
.list-history strong {display:block; position:absolute; top:0; left:0; font-weight:100; font-size:18px; font-family:'din'; color:#d72c33; padding-right:20px;}

.list-logo-gallery li {width:33.33%; float:left; box-sizing:border-box; padding:1px;}
.list-logo-gallery .obj {background:url(/assets/img/web/sub/bak_partner_logo.png);}
.list-logo-gallery .obj:before {content:""; display:block; position:relative; padding-top:36.49025%; background:no-repeat 50% 50%; background-size:contain; -webkit-transition:all .3s; transition:all .3s;}
.list-logo-gallery .obj[data-logo="삼성생명"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_01.png);}
.list-logo-gallery .obj[data-logo="삼성생명"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_01.png);}
.list-logo-gallery .obj[data-logo="삼성카드"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_02.png);}
.list-logo-gallery .obj[data-logo="삼성카드"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_02.png);}
.list-logo-gallery .obj[data-logo="삼성SRA자산운용"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_03.png);}
.list-logo-gallery .obj[data-logo="삼성SRA자산운용"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_03.png);}
.list-logo-gallery .obj[data-logo="삼성SDI"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_04.png);}
.list-logo-gallery .obj[data-logo="삼성SDI"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_04.png);}
.list-logo-gallery .obj[data-logo="삼성메디슨"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_05.png);}
.list-logo-gallery .obj[data-logo="삼성메디슨"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_05.png);}
.list-logo-gallery .obj[data-logo="아이마켓코리아"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_06.png);}
.list-logo-gallery .obj[data-logo="아이마켓코리아"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_06.png);}
.list-logo-gallery .obj[data-logo="한화테크윈"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_07.png);}
.list-logo-gallery .obj[data-logo="한화테크윈"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_07.png);}
.list-logo-gallery .obj[data-logo="GENSTAR"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_08.png);}
.list-logo-gallery .obj[data-logo="GENSTAR"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_08.png);}
.list-logo-gallery .obj[data-logo="BAYER"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_09.png);}
.list-logo-gallery .obj[data-logo="BAYER"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_09.png);}
.list-logo-gallery .obj[data-logo="THE-K"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_10.png);}
.list-logo-gallery .obj[data-logo="THE-K"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_10.png);}
.list-logo-gallery .obj[data-logo="더탑아이앤아이"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_11.png);}
.list-logo-gallery .obj[data-logo="더탑아이앤아이"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_11.png);}
.list-logo-gallery .obj[data-logo="지에이코리아"]:before {background-image:url(/assets/img/web/sub/img_partner_logo_off_12.png);}
.list-logo-gallery .obj[data-logo="지에이코리아"]:hover:before {background-image:url(/assets/img/web/sub/img_partner_logo_12.png);}

@media all and (max-width:1000px) {
	.list-logo-gallery li {width:50%;}
}
@media all and (max-width:770px) {
	.list-logo-gallery li {width:33.330%;}
}
@media all and (max-width:640px) {
	.list-logo-gallery li {width:50%;}
}

.tab-section {padding-bottom:30px;}
.tab-section .tab {display:table; margin-bottom:5px; table-layout:fixed; width:100%;}
.tab-section .tab a {display:table-cell; position:relative; vertical-align:middle; width:1%; text-align:center; color:#fff; font-family:'din'; font-size:25px; height:40px; background:#414142;}
.tab-section .tab a + a {border-left:2px solid #040303;}
.tab-section .tab a.on {background:#d72c33;}
.tab-section .tab a.on:before {content:""; display:block; position:absolute; bottom:-8px; left:50%; margin-left:-7px; width:15px; height:9px; background:url(/assets/img/web/sub/ico_tab_on.png) no-repeat 50% 0;}
.tab-section .tab-content.on {display:block;}
.tab-section .tab-content {display:none; background:url(/assets/img/web/sub/bak_tab_content.png); overflow:hidden;}
@media all and (max-width:640px) {
	.tab-section .tab a {font-size:20px;}
}

.list-work {display:block; vertical-align:top; width:50%; float:left; min-height:256px; padding:20px 0; text-align:right;}
.list-work li {display:inline-block; max-width:495px; width:100%; padding:2px 20px; box-sizing:border-box; text-align:left; font-size:15px; line-height:1.4; font-weight:100;}
@media all and (max-width:640px) {
	.list-work {width:auto; float:none; min-height:0px;}
}

#board-portfolio .tab a {font-size:22px; font-family:'NanumSquare','Noto Sans KR'; height:65px; padding: 0 10px; word-break:keep-all; box-sizing:border-box;}
#board-portfolio .tab-content {background:none; position:relative; padding-bottom:100px;}
@media all and (max-width:1120px) {
	#board-portfolio .tab a {font-size:18px;}
}
@media all and (max-width:640px) {
	#board-portfolio .tab a {font-size:17px; padding:0 5px;}
}
@media all and (max-width:580px) {
	#board-portfolio .tab a i {display:block; overflow:hidden; height:3px; text-indent:-999px;}
}


#board-portfolio .swiper-container {padding:90px 0 10px;}
#board-portfolio .swiper-controll-box {position:absolute; bottom:20px; left:0; right:0; max-width:540px; margin:40px auto 0; padding:0 40px;}
#board-portfolio .swiper-scrollbar {position:relative; bottom:auto; left:auto; right:auto; width:auto; height:1px; background:#fff;}
#board-portfolio .swiper-scrollbar-drag {height:6px; top:-2px; border-radius:9em; background:#d72c33;}
#board-portfolio .swiper-button-prev {top:-8px; margin-top:0; width:26px; height:10px; background:url(/assets/img/web/sub/btn_swiper_left.png) no-repeat 0 0;}
#board-portfolio .swiper-button-next {top:-8px; margin-top:0; width:26px; height:10px; background:url(/assets/img/web/sub/btn_swiper_right.png) no-repeat 0 0;}
#board-portfolio .swiper-slide {width:auto;}

#board-portfolio .pf-frame {padding:90px 0 40px;}
#board-portfolio .pf-frame ul { margin: 0; padding: 0; height: 163px; list-style: none; opacity:0; overflow:hidden; -webkit-transition:all .5s; transition:all .5s;}
#board-portfolio .pf-frame ul[style] {opacity:1;}
#board-portfolio .pf-frame li { float: left; margin: 0 5px 0 0; padding: 0; width: 275px; height: 100%; }

#board-portfolio .controls-box { position:relative; max-width:540px; margin: 0 auto; padding:0 40px; height: 6px; line-height: 0;}
#board-portfolio .controls-box button {display:block; position:absolute; top:-5px; margin-top:0; width:26px; height:10px; overflow:hidden; text-indent:-999px; cursor:pointer;}
#board-portfolio .controls-box button.prev {left:0; background:url(/assets/img/web/sub/btn_swiper_left.png) no-repeat 0 0;}
#board-portfolio .controls-box button.next {right:0; background:url(/assets/img/web/sub/btn_swiper_right.png) no-repeat 0 0;}

#board-portfolio .scrollbar {position:relative;}
#board-portfolio .scrollbar:before {content:""; position:absolute; display:block; top:2px; bottom:2px; left:0; right:0; background:#fff;}
#board-portfolio .scrollbar .handle { width: 100px; height:6px; top:0px; border-radius:9em; background: #d72c33; cursor: pointer; }
#board-portfolio .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }

#board-portfolio .board-view-detail {display:block; position:relative; width:275px; height:163px; background:no-repeat 50% 50%; background-size:cover;}
#board-portfolio .board-view-detail:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:#000; -webkit-opacity:0; opacity:0;}
#board-portfolio .board-view-detail span {display:none; position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:0; right:0; text-align:center; color:#fff; font-size:15px; z-index:0;}
#board-portfolio .board-view-detail:hover:before {-webkit-opacity:.8; opacity:.8;}
#board-portfolio .board-view-detail:hover span {display:block;}

#pop_portfolio_detail {display:none; position:relative; margin-top:35px; background:#212121; padding:30px 60px;}
#pop_portfolio_detail a {display:block; position:absolute; top:24px; right:24px; width:35px; height:35px; background:url(/assets/img/web/sub/ico_pop_close.png) no-repeat 50% 50%;}
#pop_portfolio_detail .board-viewer {display:table; width:100%; table-layout:fixed;}
#pop_portfolio_detail .board-viewer .info,
#pop_portfolio_detail .board-viewer .pic {display:table-cell; vertical-align:top;}
#pop_portfolio_detail .board-viewer .pic {text-align:right;}
#pop_portfolio_detail .board-viewer .pic ul {display:inline-block; max-width:655px; width:100%;}
#pop_portfolio_detail .board-viewer .pic li {display:block; position:relative; padding:4px; width:50%; float:left; box-sizing:border-box;}
#pop_portfolio_detail .board-viewer .pic .thumb {display:block; position:relative; background:no-repeat 50% 50%; background-size:cover;}
#pop_portfolio_detail .board-viewer .pic .thumb:before {content:""; display:block; position:relative; padding-top:65.83%;}
#pop_portfolio_detail .board-viewer .info {width:240px;}
#pop_portfolio_detail .board-viewer .info:before {content:"PROJECT"; display:block; font-size:22px; padding-top:25px; font-family:'NanumSquare','Noto Sans KR'; font-weight:800;}
#pop_portfolio_detail .board-viewer .info .cate {padding:25px 0; font-size:22px; font-weight:100;}
#pop_portfolio_detail .board-viewer .info .cate:before {content:"/"; padding-right:10px;}
#pop_portfolio_detail .board-viewer .info .title {max-width:260px; font-size:22px; font-weight:100; word-break:keep-all; line-height:1.4; font-family:'NanumSquare','Noto Sans KR';}

@media all and (max-width:1230px){
	#pop_portfolio_detail {padding:50px 30px 30px;}
	#pop_portfolio_detail a {top:10px; right:10px;}
	#pop_portfolio_detail .board-viewer {display:block;}
	#pop_portfolio_detail .board-viewer .info,
	#pop_portfolio_detail .board-viewer .pic {display:block;}
	#pop_portfolio_detail .board-viewer .info {width:auto;}
	#pop_portfolio_detail .board-viewer .pic ul {max-width:100%;}

	#pop_portfolio_detail .board-viewer .info:before {display:inline-block; padding-top:0; vertical-align:middle; padding-right:10px;}
	#pop_portfolio_detail .board-viewer .info .cate {display:inline-block; vertical-align:middle; padding:0; font-size:22px;}
	#pop_portfolio_detail .board-viewer .info .title {max-width:100%; padding: 20px 0;}
}
@media (max-width: 1120px) {
	#pop_portfolio_detail .board-viewer .info:before,
	#pop_portfolio_detail .board-viewer .info .cate,
	#pop_portfolio_detail .board-viewer .info .title {font-size:18px;}
}
@media all and (max-width:640px){
	#pop_portfolio_detail {padding:50px 20px 20px;}
	#pop_portfolio_detail .board-viewer .info:before,
	#pop_portfolio_detail .board-viewer .info .cate,
	#pop_portfolio_detail .board-viewer .info .title {font-size:17px;}
	#pop_portfolio_detail .board-viewer .pic li {width:auto; float:none;}
}