@import url("common.css");


#visual {background:#ccc;height:100%;width:100%; position:Relative;  opacity:0;}
#visual .sub_imgbox {height:100%; overflow:hidden; width:100%}
#visual .sub_imgbox .slick-list {height:100%;}
#visual .sub_imgbox .slick-track{height:100%;}
.sub_imgbox .section {width:100%; height:100%;  position:relative; overflow:hidden; border:0; background-repeat:no-repeat; background-size:cover; background-position:center; }

.sub_imgbox .section.v01{background-image:url('/img/visual_img01.jpg');}
.sub_imgbox .section.v02{background-image:url('/img/visual_img02.jpg');}
.sub_imgbox .section.v03{background-image:url('/img/visual_img03.jpg'); }

.sub_imgbox .slick-arrow{position:absolute; top:50%; ; z-index:1005; width:15px; height:22px; border:none; text-indent:-99999999999999999px; overflow:hidden; cursor:pointer; transition:all 0.2s linear; background:url('/img/v_arrow.png') no-repeat center; transform:rotate(0deg); margin-top:-11px;}
	.sub_imgbox .slick-prev{ opacity:0.6;transition:all 0.3s ease-out; left:50%; margin-left:-665px;}
	.sub_imgbox .slick-next{opacity:0.6;transition:all 0.3s ease-out; transform:rotate(180deg); right:50%; margin-right:-665px;}
	.sub_imgbox .slick-prev:hover{ opacity:1;transition:all 0.3s ease-out; }
	.sub_imgbox .slick-next:hover{opacity:1;transition:all 0.3s ease-out; }

#visual .down{position:absolute; z-index:10; bottom:41px; font-size:13px; font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; color:rgba(255,255,255,0.8); line-height:120%; left:50%; margin-left:-25px; cursor:pointer; }
	#visual .down img{display:block; margin:10px auto 0; }

.v_txt{position:absolute; top: 50%; left:50%; -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align:center; /*width:1024px;*/ width:100%; padding:0 3%; box-sizing:border-box;}
	.v_txt h3{}
	.v_txt span{line-height:120%;font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif;  font-weight:600; color:#fff; letter-spacing:0.2pt; font-size:30px; display:block; margin:5px 0 32px}
	.v_txt span br{display:none; }
	.v_txt h4{font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; font-size:70px; color:#fff; font-weight:900; line-height:120%; margin:10px 0 15px;}
	.v_txt p{font-size:22px; letter-spacing:0; color:#fff; line-height:31px; }
	.v_txt font{color:#ff8e2a;}

.section.v01 h3{margin:0 0 -20px;}
.section.v01 h4{margin:2px 0 15px;}
.section.v01 span{margin:0}
.section.v01 span{margin:0;}





.fadeInOut1 { opacity:0;}
.fadeInOut1On { animation: fadeInOut1 ease 3s; -webkit-animation: fadeInOut1 ease 3s; -moz-animation: fadeInOut1 ease 3s; -o-animation: fadeInOut1 ease 3s; -ms-animation: fadeInOut1 ease 3s; opacity:1}
	@keyframes fadeInOut1 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeInOut1 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeInOut1 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeInOut1 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeInOut1 {  0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }


.fadeInOut2 { opacity:0; }
.fadeInOut2On { animation: fadeInOut2 ease 3s; -webkit-animation: fadeInOut2 ease 3s; -moz-animation: fadeInOut2 ease 3s; -o-animation: fadeInOut2 ease 3s; -ms-animation: fadeInOut2 ease 3s;  animation-delay:3s; opacity:1}
	@keyframes fadeInOut2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeInOut2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeInOut2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeInOut2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeInOut2 {  0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }

.fadeInOut3 { opacity:0; }
.fadeInOut3On { animation: fadeInOut3 ease 3s; -webkit-animation: fadeInOut3 ease 3s; -moz-animation: fadeInOut3 ease 3s; -o-animation: fadeInOut3 ease 3s; -ms-animation: fadeInOut3 ease 3s; opacity:0; animation-delay:6s;}
	@keyframes fadeInOut3 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeInOut3 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeInOut3 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeInOut3 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeInOut3 {  0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }

.fadeInOut4 { opacity:0; }
.fadeInOut4On { animation: fadeInOut4 ease 3s; -webkit-animation: fadeInOut4 ease 3s; -moz-animation: fadeInOut4 ease 3s; -o-animation: fadeInOut4 ease 3s; -ms-animation: fadeInOut4 ease 3s; opacity:0; animation-delay:9s;}
	@keyframes fadeInOut4 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeInOut4 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeInOut4 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeInOut4 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeInOut4 {  0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }

.txt_item, .txt_item2{opacity:0;}

.fadeIn { animation: fadeIn ease 3s; -webkit-animation: fadeIn ease 3s; -moz-animation: fadeIn ease 3s; -o-animation: fadeIn ease 3s; -ms-animation: fadeIn ease 3s; opacity:1 !important;}
	@keyframes fadeIn { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeIn { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeIn { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeIn { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeIn { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }

.fadeIn2 { animation: fadeIn2 ease 3s; -webkit-animation: fadeIn2 ease 3s; -moz-animation: fadeIn2 ease 3s; -o-animation: fadeIn2 ease 3s; -ms-animation: fadeIn2 ease 3s; opacity:1 !important;}
	@keyframes fadeIn2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-moz-keyframes fadeIn2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-webkit-keyframes fadeIn2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-o-keyframes fadeIn2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }
	@-ms-keyframes fadeIn2 { 0%{  opacity:0;  }  50% {   opacity:0.5;  } 100% {  opacity:1;  } }


#contents { opacity:0; top:20px; position:relative; }
#contents h4{text-align:Center; font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; font-size:39px; line-height:110%; color:#313131; font-weight:800; padding:0 0 27px}


/*** S:: About ***/
.main_about{background:url('/img/main_about_bg.gif') no-repeat center top; padding:123px 0 128px;}
		.main_about p{text-align:Center; font-size:19px; letter-spacing:0; line-height:153%; font-weight:300; color:#888888; }
		.main_about p font{font-weight:500;}
		.main_about ul{width:1170px; margin:65px auto 0; overflow:hidden; clear:both; }
		.main_about li{float:left; width:25%; text-align:Center; }
		.main_about li a{display:block; }
		.main_about li img{display:block; margin:0 auto 18px; transition: all 0.2s ease; }
		.main_about li:hover img{margin:6px auto 6px;transition: all 0.2s ease; }
		.main_about li a{font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; color:#313131; }

/*** E:: About ***/



/*** S:: Business ***/
.main_bsn{position:Relative; overflow:hidden; }
		.main_bsn::before{content:""; display:block; position:absolute; left:0; top:0; width:100%; height:510px; background:#f0f0f0; z-index:-1;}
		.main_bsn .mainBsn_in{width:1170px; margin:0 auto; padding:135px 0 0; position:relative; }
				.mainBsn_in dl{overflow:hidden; clear:both; }
				.mainBsn_in dt{float:left; width:750px; box-sizing:border-box; padding:0 0 0 3px;}
				.mainBsn_in dd{float:left;  width:calc(100% - 750px); }
					.mainBsn_in dd h6{font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; color:#313131; font-weight:800; font-size:16px; line-height:110%; padding:8px 0 8px 3px;}
					.mainBsn_in dd h4{text-align:left !important; padding-bottom:17px !important;}
					.mainBsn_in dd p{letter-spacing:0; padding:0 0 35px;}

				.mainBsn_in .slick-arrow{position:absolute; top:235px; ; z-index:1005; width:25px; height:42px; border:none; text-indent:-99999999999999999px; overflow:hidden; cursor:pointer; transition:all 0.2s linear; background:url('/img/bsn_arrow.png') no-repeat center; transform:rotate(0deg); }
					.mainBsn_in .slick-prev{ opacity:0.35;transition:all 0.3s ease-out; left:50%; margin-left:-665px;}
					.mainBsn_in .slick-next{opacity:0.35;transition:all 0.3s ease-out; transform:rotate(180deg); right:50%; margin-right:-665px;}
					.mainBsn_in .slick-prev:hover{ opacity:0.8;transition:all 0.3s ease-out;}
					.mainBsn_in .slick-next:hover{opacity:0.8;transition:all 0.3s ease-out; }

/*** S:: Client ***/
.main_clients{width:1178px; margin:97px auto 140px; overflow:hidden; clear:both; }
		.main_clients h5{font-family:'Muli', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans KR', sans-serif; font-size:28px; line-height:110%; color:#313131; font-weight:800; float:left; width:175px; text-indent:4px; padding:8px 0 0;}
		.main_clients .mainClients_in{width:calc(100% - 175px); float:left; }
				.mainClients_in .roll {text-align:center; padding:0 4px; position:relative;}
				.mainClients_in .roll img{border:1px solid #ddd; width:100%; background-size:cover; background-position:center; box-sizing:Border-box; transition:all 0.2s ease-out; background-size:100%;}
				.mainClients_in .roll span{position:absolute; left:10%; width:80%; top: 50%; -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); color:#888; font-weight:400; }
				.mainClients_in .roll:hover img{border-color:#ee8300; background-size:110%; transition:all 0.2s ease-out;}

				.mainClients_in .slick-arrow{position:absolute; top:0; ; z-index:1005; width:11px; height:18px; border:none; text-indent:-99999999999999999px; overflow:hidden; cursor:pointer;  transition:all 0.2s linear; background:url('/img/client_arrow.gif') no-repeat center; transform:rotate(0deg); top:60px;}
					.mainClients_in .slick-prev{ opacity:0.5;transition:all 0.3s ease-out; left:-174px;}
					.mainClients_in .slick-next{opacity:0.5;transition:all 0.3s ease-out; transform:rotate(180deg); left:-150px;}
					.mainClients_in .slick-prev:hover{ opacity:1;transition:all 0.3s ease-out;}
					.mainClients_in .slick-next:hover{opacity:1;transition:all 0.3s ease-out; }





/*******************************************************************************
	@media ~1200px
*******************************************************************************/
@media all and (max-width:1330px){


.sub_imgbox .slick-arrow{}
	.sub_imgbox .slick-prev{left:15px; margin-left:0;}
	.sub_imgbox .slick-next{right:15px; margin-right:0;}



.mainBsn_in .slick-arrow{}
	.mainBsn_in .slick-prev{left:15px; margin-left:0;}
	.mainBsn_in .slick-next{right:15px; margin-right:0;}



}



/*******************************************************************************
	@media ~1200px
*******************************************************************************/
@media all and (max-width:1200px){


/*** S:: About ***/
.main_about{}
		.main_about ul{width:100%; }


/*** E:: About ***/



/*** S:: Business ***/
.main_bsn{position:Relative; }
		.main_bsn::before{height:90%; }
		.main_bsn .mainBsn_in{width:100%; padding:135px 15px 0; position:relative; box-sizing:Border-box; }
				.mainBsn_in dt{width:500px;padding:0;}
				.mainBsn_in dt img{max-width:95%;}
				.mainBsn_in dd{width:calc(100% - 500px); }
					.mainBsn_in dd p{}
					.mainBsn_in dd p br{display:none; }

				.mainBsn_in .slick-arrow{margin-top:105px}
					.mainBsn_in .slick-prev{left:auto; right:60px; margin-left:0;}
					.mainBsn_in .slick-next{right:15px; margin-right:0;}


/*** S:: Client ***/
.main_clients{box-sizing:Border-box; padding:0 15px; width:100%;  }
			.main_clients h5{text-indent:0;}
			.mainClients_in .slick-arrow{top:56px;}






}


/*******************************************************************************
	@media ~1024px
*******************************************************************************/
@media all and (max-width:1024px){




}


/*******************************************************************************
	@media ~980px
*******************************************************************************/
@media all and (max-width:980px){

.v_txt{width:100%;}
	.v_txt h3 img{width:600px;}
	.v_txt span{font-size:25px;}
	.v_txt h4{font-size:60px; }
	.v_txt p{font-size:18px;line-height:28px; }

.sub_imgbox .slick-arrow{position:absolute; top:auto; bottom:40px;margin-top:0;}
	.sub_imgbox .slick-prev{left:auto; right:3%; margin:0 25px 0 0;}
	.sub_imgbox .slick-next{right:3%; margin-right:0;}



/*** S:: Business ***/
.main_bsn{position:Relative; overflow:hidden; padding:0 3%;}
		.main_bsn::before{height:50%; }
		.main_bsn .mainBsn_in{margin:0 auto; padding:80px 0 0; position:relative; }
				.mainBsn_in dt{ width:100%; text-align:center; }
				.mainBsn_in dt img{max-width:70%;}
				.mainBsn_in dd{ width:100%; text-align:Center; }
				.mainBsn_in dd h4{text-align:center !important; }
				.mainBsn_in dd .moreBtn{margin:0 auto; }

				.mainBsn_in .slick-arrow{position:absolute; top:61%; z-index:1005; width:25px; height:42px; }
					.mainBsn_in .slick-prev{left:0; margin:0;}
					.mainBsn_in .slick-next{right:0; margin:0;}


/*** S:: Client ***/
.main_clients{margin:80px 0; padding:0 3%;}
		.main_clients h5{font-size:25px; }
		.mainClients_in .slick-arrow{top:45px;}
		.mainClients_in .roll span{font-size:14px; line-height:140%;}




}


/*******************************************************************************
	@media 481~768px
*******************************************************************************/
@media all and (max-width:768px){


#contents {}
#contents h4{font-size:32px; padding-bottom:20px;}



/*** S:: About ***/
.main_about{ padding:80px 0; background-size:auto 100%;}
		.main_about p{font-size:17px; }
		.main_about ul{ margin:35px auto 0; padding:0 30px; box-sizing:border-box; }
/*** E:: About ***/







}

/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


.v_txt{width:100%;}
	.v_txt h3 img{width:320px;}
	.v_txt span{font-size:17px; margin:0 0 20px}
	.v_txt h4{font-size:38px; }
	.v_txt p{font-size:14px;line-height:24px; }

.section.v01 h4{margin:0 0 9px;}
.section.v01 h3{margin:0 0 -8px;}

/*** S:: About ***/
.main_about{ padding:80px 3%; }
		.main_about p{font-size:16px; }
		.main_about p br{display:none; }
		.main_about ul{ margin:35px auto 0; padding:0 30px; box-sizing:border-box; }
/*** E:: About ***/



/*** S:: Client ***/
.main_clients{margin:50px 0 80px; padding:0 3%;}
		.main_clients h5{display:none; }
		.main_clients .mainClients_in{width:100%;}
		.mainClients_in .slick-arrow{display:none; }



}


/*******************************************************************************
	@media ~480px
*******************************************************************************/
@media all and (max-width:480px){

.v_txt{width:100%;}
	.v_txt h3 img{width:290px;}
	.v_txt span{font-size:15px; margin:0 0 20px}
	.v_txt span br{display:block;}
	.v_txt h4{font-size:29px; }
	.v_txt p{font-size:13px;line-height:20px; width:80%;margin:0 auto;}
	.v_txt p br{display:none; }

.section.v01 h4{margin:0 0 9px;}



#contents {}
#contents h4{font-size:28px; padding-bottom:16px;}

.moreBtn{ width:60%; }

/*** S:: About ***/
.main_about{ padding:50px 3%; }
		.main_about p{font-size:15px; }
		.main_about ul{padding:0; margin:20px 0 0;}
		.main_about li img{width:68%;  margin-bottom:10px}
/*** E:: About ***/


/*** S:: Business ***/
.main_bsn{ padding:0 3%;}
		.main_bsn::before{height:40%; }
		.main_bsn .mainBsn_in{padding:50px 0 0;  }
				.mainBsn_in dt{ width:100%; }
				.mainBsn_in dt img{max-width:85%;}
					.mainBsn_in dd h6{ font-size:14px; padding:8px 0 8px 3px;}
					.mainBsn_in dd h4{text-align:center !important; padding-bottom:17px !important;}
					.mainBsn_in dd p{letter-spacing:0; padding:0 5% 20px;}
					.mainBsn_in dd .moreBtn{margin:0 auto; }

				.mainBsn_in .slick-arrow{position:absolute; top:55%; z-index:1005; width:16px; height:27px; background-size:cover; }
					.mainBsn_in .slick-prev{left:0; margin:0;}
					.mainBsn_in .slick-next{right:0; margin:0;}



/*** S:: Client ***/
.main_clients{margin:44px 0 50px; padding:0 3%;}
		.main_clients h5{display:none; }
		.main_clients .mainClients_in{width:100%;}
		.mainClients_in .slick-arrow{display:none; }
		.mainClients_in .roll span{font-size:12px; line-height:140%;}


}



/*******************************************************************************
	@media ~360px
*******************************************************************************/
@media all and (max-width:360px){


#contents {}
#contents h4{font-size:24px; padding-bottom:15px;}


}