@charset 'utf-8';

/* white */
#hd .inner { }
#hd h1 a { background-image:url('../img/common/logo_gr.png'); }
#hd #nav ul.nav-list li a.idx { color:#202020; }
#hd #nav ul.nav-list li:hover a.idx { color:#008755; }
#hd .language { color:#202020; }
#hd .language .title { color:#202020; }
#hd .language .title span { border: 2px solid #202020; border-top:0; border-left:0; }
#hd #btn_menu span { background-color:#202020; }
.gnb_open #hd #btn_menu span { background-color: #fff; }


/* fullpage */
#fullpage { min-width:1030px; }

/* section */
.section { text-align:center; overflow: hidden; }

/* business_slide_wrap */
.business_slide_wrap { position: relative;width: 100%;height: 100%; display: flex;flex-wrap: wrap; }

/* business_con 
* * * * * * * * * * * * * * * */
.business_con_wrap { position: relative;width: 100%;left: 0;height: 100%; padding: 0 120px 0 120px; display:flex; flex-wrap: wrap; align-items:center; box-sizing:border-box; z-index:9; }
.business_con { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow:hidden; }
.business_con .item { 
	position:relative; width: 100% !important; 
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.business_con .content { position:relative; min-width: 1410px; min-height:680px; margin:0 auto; text-align:center; }

/* design_principle */
.design_principle { }
.design_principle .hd_title { position:relative; margin-bottom:70px; z-index: 2; }
.design_principle .hd_title .num { font-size: 80px;  line-height: 1.1; font-weight: 300; color: #919191; font-family: 'S-CoreDream-1Thin'; }
.design_principle .hd_title .tit { font-size: 46px; line-height: 1.1; font-weight: 700; color: #008755; }

.design_principle .body { position:relative; width:100%; text-align:center; padding-top:50px; z-index:9; }
.design_principle .body:after { position:absolute; left:50%; top:90px; display:block; width:314px; height:1px; transform:translateX(-50%); opacity: 0; background-color:#b2b2b2; content:""; opacity:0; }

.design_principle .body .icon { position:absolute; left:50%; top:0; display:block; width:186px; height:186px; background-repeat:no-repeat; background-position:center; transform:translateX(-50%); background-color:#f7f7f7; border-radius:50%; overflow:hidden; opacity: 0; z-index:9; }
.design_principle .body .ic1 { background-image:url('../img/works_flow/ic_principle01.jpg'); }
.design_principle .body .ic2 { background-image:url('../img/works_flow/ic_principle02.jpg'); }
.design_principle .body .ic3 { background-image:url('../img/works_flow/ic_principle03.jpg'); }
.design_principle .body .ic4 { background-image:url('../img/works_flow/ic_principle04.jpg'); }
.design_principle .body .ic5 { background-image:url('../img/works_flow/ic_principle05.jpg'); }
.design_principle .body .ic6 { background-image:url('../img/works_flow/ic_principle06.jpg'); }

.design_principle .body dl { position:relative; display:inline-block; width:317px; height:335px; background-color:#f7f7f7; vertical-align:top; margin:0 157px; opacity: 0; z-index:1; }
.design_principle .body dl:first-of-type { margin-left:30px; }
.design_principle .body dl:last-of-type { margin-right:30px; }
.design_principle .body dt { background-color:#008755; text-align:center; font-size:32px; height:85px; line-height:85px; text-align:center; color:#fff; font-weight:700; } 
.design_principle .body dt span { } 
.design_principle .body dd { display: flex; -webkit-align-items: center; align-items: center; height:250px; text-align:center; } 
.design_principle .body dd ul { width:100%; } 
.design_principle .body dd li { position:relative; font-size:20px; line-height:1.45; color:#000; font-weight:400; margin-bottom:10px; } 
.design_principle .body dd li p:before { display:inline-block; width:5px; height:5px; background-color:#008755; border-radius:5px; overflow:hidden; vertical-align:middle; content:""; margin-right:7px; margin-top:-4px; }
.design_principle .body dl.customer dt { background-color:#262626; }

.business_con .design_principle .body dl { transform: translate(-150px, 0px);  }
.business_con .design_principle .body dl.customer { transform: translate(150px, 0px); } 

/* active */
.swiper-slide-active .design_principle .body dl,
.swiper-slide-active .design_principle .body dl.customer { transform: translate(0, 0); opacity: 1; transition: all 0.8s ease-in-out; }
.swiper-slide-active .design_principle .body .icon { opacity: 1; transition: all 0.5s ease-in-out; }
.swiper-slide-active .design_principle .body:after { opacity: 1; transition: all 2s ease-in-out; }


/* step07. design_overview */
.design_overview { position:relative; transform: translate(0, 100px); opacity: 0; margin:0 -30px; }
.design_overview ul { position:relative; text-align:center; width:100%; overflow:hidden; }
.design_overview ul:after { position:absolute; left:30px; right:30px; top:50%; display:block; height:1px; background-color:#000000; content:""; }
.design_overview li { position:relative; display:block; float:left; width:33.33%; vertical-align:top; padding:0 30px; box-sizing:border-box; z-index:1; }
.design_overview .contbx { position:relative; width:100%; height:420px; text-align:center; padding:70px 20px 0 20px; background-color:#f7f7f7; box-sizing:border-box; }
.design_overview dl { position:relative; width: 100%; padding-top:125px; }
.design_overview dl:before { position:absolute; left:50%; top:0; width:100px; height:100px; background-repeat:no-repeat; background-size:100% auto;  transform:translateX(-50%); display:block; content:""; }
.design_overview dl dt,
.design_overview dl dd { }
.design_overview dl dt { font-size:32px; font-weight:700; line-height:1.15; color:#202020; margin-bottom:15px; }
.design_overview dl dd { font-size:20px; line-height:1.45; color:#202020; text-align:center; }
.design_overview dl dd p { margin-top:2px; }
.design_overview dl dd p:before { font-size:21px; color:#008755; content:"•"; margin-right:5px; }

.design_overview li.do1 dl:before { background-image:url('../img/works_flow/ic_design_overview01.png'); }
.design_overview li.do2 dl:before { background-image:url('../img/works_flow/ic_design_overview02.png'); }
.design_overview li.do3 dl:before { background-image:url('../img/works_flow/ic_design_overview03.png'); }


/* active */
.swiper-slide-active .design_overview { transform: translate(0, 0); opacity: 1; transition: all 0.8s ease-in-out; }


/* step08. design_strategy */
.design_strategy { margin-top:-190px; transform: translate(0, 100px); opacity: 0; text-align:center; }
/* .design_strategy img .design_strategy img { height:100%; width:auto; } */

/* active */
.swiper-slide-active .design_strategy { height:660px; transform: translate(0, 0); opacity: 1; transition: all 0.8s ease-in-out; }

/* count_wrap */
.business_con .count_wrap { margin-top: 30px;display: flex;flex-wrap: wrap;align-items: flex-end;font-size: 30px; font-family: 'Play',sans-serif; font-weight: 600;color: rgba(255,255,255,0.90); display:none; }
.business_con .count_wrap .big{font-size:100px; height: 80px; font-weight:600; line-height: 0.8em; overflow:hidden ;display: flex;flex-wrap: wrap;}
.business_con .count_wrap .big .num{position:relative;top:0;transition: 0.5s;}
.business_con .count_wrap .big span{position:relative;top: 0;height: 88px;display:block;}
.business_con .count_wrap .big.prev_act .num{top: -176px;}
.business_con .count_wrap .big.prev .num{top: -88px;}
.business_con .count_wrap .big.next .num{top: -88px;}
.business_con .item.swiper-slide-active .count_wrap .big span{top:-100%; transition:1s;}



/* business_bg 
* * * * * * * * * * * * * * * */
.business_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow:hidden; }
/*
.business_bg .swiper-wrapper { width: 100%;height:100%; }
.business_bg .item { width: 100%;height:100%;overflow:hidden; }
.business_bg .item .group { position:relative; width: 100%;height: 100%;overflow: hidden; }
.business_bg .item .group:after{display: block; content:""; position: absolute;top: 0;right: 0;width: 100%;height: 100%;transition: 1s ease width;z-index: 10;}
.business_bg .item .img { width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; }
.business_bg .item1 .img { background-image:url('../img/works_flow/business_img1.jpg'); }
.business_bg .item2 .img { background-image:url('../img/works_flow/business_img2.jpg'); }
.business_bg .item3 .img { background-image:url('../img/works_flow/business_img3.jpg'); }
.business_bg .item4 .img { background-image:url('../img/works_flow/business_img4.jpg'); }
.business_bg .item5 .img { background-image:url('../img/works_flow/business_img1.jpg'); }
.business_bg .item6 .img { background-image:url('../img/works_flow/business_img2.jpg'); }
.business_bg .item7 .img { background-image:url('../img/works_flow/business_img3.pg'); }
.business_bg .item8 .img { background-image:url('../img/works_flow/business_img4.jpg'); }
*/
.business_bg.prev .item1 { z-index: 10; }
.business_bg.prev .item2 { z-index: 9; }
.business_bg.prev .item3 { z-index: 8; }
.business_bg.prev .item4 { z-index: 7; }

/*motion */
.sec1.ani .business_bg .item .group:after { width: 0; }
.sec1 .business_bg .item .img { transform: scale(1.2); transition: 1.3s; }
.sec1 .business_bg .item.swiper-slide-active .img{ transform:scale(1); }


/* prod_nav_wrap 
* * * * * * * * * * * * * * * */
.prod_nav_wrap { position:absolute; left:8px; top:755px; z-index: 999; transform: rotate(-90deg ); }
.prod_nav_wrap .prod_nav{display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-end;width: 100%;}
.prod_nav_wrap .prod_nav .count { display: inline-block; font-size: 20px; line-height: 1.35; width: 48px;  text-align: center; font-family: 'MaplestoryOTFBold'; color: #008755; letter-spacing:5px; }
.button_g { display: flex; flex-wrap: wrap; display:none; }
.button_g .arrow{position: relative;width: 68px;height: 68px;border: 1px solid #fff; cursor:pointer; }
.button_g .arrow:after{display: block;content:"";position: absolute;top: 25px;left: 28px;width: 13px;height: 13px;border: 1px solid #fff;transform: rotate(135deg);border-top: 0;border-left: 0;}
.button_g .arrow + .arrow{border-left: 0;}
.button_g .arrow.button_next:after{transform: rotate(-45deg);left: 23px;}
.prod_nav .arrow{transition:0.3s;}
.prod_nav .arrow:hover{background:rgba(255,255,255,0.1);}
.prod_nav .arrow:before{display: block;content:"";position: absolute;top: 32px;left: 20px;width: 0;height: 1px;background: #fff;opacity: 0;transition:0.2s;}
.prod_nav .arrow.button_next:before{left:auto; right:21px;}
.prod_nav .arrow:after{transition:0.3s 0.1s;}
.prod_nav .arrow:hover:before{width:25px ; opacity:1; transition:0.3s 0.2s;}
.prod_nav .arrow:hover:after{width:4px;height:4px; top:30px; left:19px;transition:0.3s;}
.prod_nav .arrow.button_next:hover:after{left:41px;}

/* swiper-pagination */
.business_con .swiper-pagination { left:30px; top:245px; transform-origin:0 0; transform: rotate(90deg); width:495px; height:1px; font-family: 'MaplestoryOTFBold'; background-color:#c2c2c2; }
.business_con .swiper-pagination-progressbar-fill { background-color:#404040; height:4px; top:-1px; }



/* 
mobile
* * * * * * * * * * * * * * * * * * * * */
#fullpage_principle { }
#fullpage_principle .fp-tableCell { vertical-align:middle; }
#fullpage_principle .content { padding:150px 70px; }
.design_principle.m .body { padding:0; }
.design_principle.m .body:after { top:0; width:1px; height:100%; }
.design_principle.m .body .icon { position:relative; display:block; margin:0 auto; transform:none; left:auto; top:auto; }
.design_principle.m .body dl,
.design_principle.m .body dl.customer { display: block; margin:0 auto; margin-top:100px; width: auto; max-width:500px; }

.design_principle.m .design_overview { }
.design_principle.m .design_overview li { width:100%; padding:0; margin-bottom:70px; }
.design_principle.m .design_overview li:last-child { margin-bottom:0; }
.design_principle.m .design_overview ul:after { left:50%; top:0; width:1px; height:100%; }
.design_principle.m .design_strategy { position:relative; margin:0 -70px; }


/* active */
.ani .design_principle .body dl { opacity: 1; transition: all 0.8s ease-in-out; }
.ani .design_principle .body .icon { opacity: 1; transition: all 0.5s ease-in-out; }
.ani .design_principle .body:after { opacity: 1; transition: all 2s ease-in-out; }
.ani .design_principle .design_overview { opacity: 1; transform: translate(0, 0); transition: all 0.8s ease-in-out; }
.ani .design_principle .design_strategy { opacity: 1; transform: translate(0, 0); transition: all 0.8s ease-in-out; }


#fp-nav.left { left:50%; bottom:30px; top:auto; width:530px; height:2px; -webkit-transform:translateX(-54%); background-color:#c2c2c2; }
#fp-nav.left ul li { position:static; left:0; margin:0; height:100%; width:1px; }
#fp-nav.left ul li a { position:static; height:100%; display:block; width:0; }
#fp-nav.left ul li a span { position:absolute; left:0; top:0; width:0%; height:100%; margin:0; border-radius:0; }
#fp-nav.left ul li a.active span { height:100%; margin:0; border-radius:0; }
#fp-nav.left ul li:nth-child(1) { }
#fp-nav.left ul li:nth-child(2) { }
#fp-nav.left ul li:nth-child(3) { }
#fp-nav.left ul li:nth-child(4) { }
#fp-nav.left ul li:nth-child(5) { }
#fp-nav.left ul li:nth-child(6) { }
#fp-nav.left ul li:nth-child(7) { }
#fp-nav.left ul li:nth-child(8) { }
#fp-nav.left ul li:nth-child(9) { display:none; }

#fp-nav.left ul li:nth-child(1) a.active span { width:12.5%; }
#fp-nav.left ul li:nth-child(2) a.active span { width:25%; }
#fp-nav.left ul li:nth-child(3) a.active span { width:37.5%; }
#fp-nav.left ul li:nth-child(4) a.active span { width:50%; }
#fp-nav.left ul li:nth-child(5) a.active span { width:67.5%; }
#fp-nav.left ul li:nth-child(6) a.active span { width:75%; }
#fp-nav.left ul li:nth-child(7) a.active span { width:87.5%; }
#fp-nav.left ul li:nth-child(8) a.active span { width:100%; }

.fp-viewing-7 #fp-nav.left,
.fp-viewing-7 .pagination_num { display:none; }

.pagination_num { position:fixed; left:50%; bottom:20px; z-index:100; display: inline-block; font-size: 20px; line-height: 1.35; width:44px; text-align: center; font-family: 'MaplestoryOTFBold'; color: #008755; transform:translateX(600%); }
.pagination_num .pagination_current { }


#fullpage_principle, 
.pagination_num, 
#fp-nav,
#fullpage_principle .sub-top-wr { display:none; }



/* 1420px */ 
@media only screen and (max-width:1420px){
	.business_con .content { min-width: auto; width:100%; }
	.design_overview { margin:0; }
}

@media only screen and (max-width:1023px){
	#fullpage { display:none; }
	#fullpage_principle { display:block; }
	/* .pagination_num,
	#fp-nav { display:block; } */
}

@media only screen and (max-width:767px){
	#hd h1 a { background-image: url('../img/common/logo.png'); }
	#hd #btn_menu span { background-color:#fff;  }

	#hd.subscroll .inner { background-color:#000; box-shadow:none; }
	#hd.subscroll h1 a { background-image: url('../img/common/logo.png'); }
	#hd.subscroll .language { color:#fff; }
	#hd.subscroll .language .title { color:#fff; }
	#hd.subscroll .language .title span { border: 2px solid #fff; border-top:0; border-left:0; }
	#hd.subscroll #btn_menu span { background-color:#fff; }
}

@media only screen and (max-width:640px){
	#fp-nav.left { left:30px; right:75px; -webkit-transform: translateX(0); width:auto; }
	.pagination_num { transform: translateX(0); font-size:17px; left:auto; right:30px; }
}

@media only screen and (max-width:480px){
	#hd .inner { background-color:#000; }

	#fullpage_principle .sub-top-wr { display:block; }
	#fullpage_principle .content { padding:100px 70px; }
	.design_principle.m .hd_title { margin-bottom:55px; }
	.design_principle.m .hd_title .num { font-size:70px; }
	.design_principle.m .hd_title .tit { font-size:42px; }
	.design_principle.m .body dl { height:285px; }
	.design_principle.m .body dt { font-size:27px; height:73px; line-height:73px; }
	.design_principle.m .body dd { height:210px; }
	.design_principle.m .body dd li { font-size:18px; margin-bottom:4px;  }
	.design_principle.m .body dl, .design_principle.m .body dl.customer  { margin-top:65px; }
	
	.design_principle.m .design_overview .contbx { padding:45px 20px; height:auto; }
	.design_principle.m .design_overview dl { padding-top:115px; }
	.design_principle.m .design_overview dl:before { width:90px; height:90px; }
	.design_principle.m .design_overview dl dt { font-size:27px; margin-bottom:25px; }
	.design_principle.m .design_overview dl dd { font-size:17px; } 
}

@media only screen and (max-width:375px){
	.sub-top-wr { padding-top:0; }
	#fullpage_principle .content { padding: 30px 50px; }
	.design_principle .hd_title { margin-bottom:40px; }
	.design_principle .hd_title .num { font-size:55px; }
	.design_principle .hd_title .tit { font-size:34px; }
	.design_principle.m .body .icon { width:150px; height:150px; }
	.design_principle.m .body dl, .design_principle.m .body dl.customer { margin-top:54px; height:auto; }
	.design_principle.m .body dt { font-size:21px; height:44px; line-height:44px; }
	.design_principle.m .body dd { height:170px; }
	.design_principle.m .body dd li { font-size:14px; }
	.design_principle.m .design_overview .contbx { padding:40px 20px; }
	.design_principle.m .design_overview dl { }
	.design_principle.m .design_overview dl:before { width:70px; }
	.design_principle.m .design_overview dl dt { font-size:21px; }
	.design_principle.m .design_overview dl dd { font-size:14px; }
	.design_principle.m .design_overview dl dd p { margin-top:0; }
	.design_principle.m .design_strategy { position:relative; margin:0 -50px; }
}