@charset "utf-8";

#visual_wrap {height:85vh;}
#visual_wrap .visual {position:relative;}
#visual_wrap .visual .bg {position:absolute; width:773px; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.7);}
#visual_wrap .visual .text {position:absolute; width:1180px; top:20vh; left:calc(50% - 590px); z-index:9; color:#fff;}
#visual_wrap .visual .text .num {display:block; font-size:24px; margin-bottom:20px;}
#visual_wrap .visual .text h2 {font-size:80px; margin-bottom:26px; font-weight:500;}
#visual_wrap .visual .text h2:before {position:relative; display:block; width:50px; height:3px; background:#fff; transform: rotate(-45deg); content:'';}
#visual_wrap .visual .text p {font-size:24px; line-height:160%; font-weight:300;}

#visual_wrap .visual .item {height:85vh;}
#visual_wrap .visual .item .img {
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    -webkit-transform: scale(1.2,1.2); 
     transform: scale(1.2,1.2);
	-webkit-transition:transform 3000ms  ease-in-out ;
	-moz-transition:transform 3000ms ease-in-out ;
	-o-transition:transform 3000ms ease-in-out ;
	-ms-transition:transform 3000ms ease-in-out ;
    transition:transform 3000ms ease-in-out ;	
}

#visual_wrap .visual .item[aria-hidden='false'] .img {
	-ms-transform: scale(1.0,1.0) rotate(0.0001deg);
    -o-transform: scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform: scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.0001deg);
     transform: scale(1.0,1.0) rotate(0.0001deg);
}

#visual_wrap .visual .main01 .img {background:url('../img/main/main01_img.jpg') center no-repeat; background-size:cover; }
#visual_wrap .visual .main02 .img {background:url('../img/main/main02_img.jpg') center no-repeat; background-size:cover;}
#visual_wrap .visual .main03 .img{background:url('../img/main/main03_img.jpg') center no-repeat; background-size:cover;}

	@media screen and (max-width:1199px){
		#visual_wrap .visual .text {width:90%; left:5%;}
		#visual_wrap .visual .text .num {font-size:140%;}
		#visual_wrap .visual .text h2 {font-size:480%;}
		#visual_wrap .visual .text h2:before  {width:40px;}
		#visual_wrap .visual .text p {font-size:140%;}
	}

	@media screen and (max-width:999){
		#visual_wrap .visual .text {top:15vh;}
		#visual_wrap .visual .text h2 {font-size:420%;}
		#visual_wrap .visual .text p {font-size:120%;}
	}

	@media screen and (max-width:799px){
		#visual_wrap {height:65vh;}
		#visual_wrap .visual .item {height:65vh;}
		#visual_wrap .visual .text {top:10vh;}
		#visual_wrap .visual .text .num {font-size:120%;}
		#visual_wrap .visual .text h2 {font-size:320%;}
		#visual_wrap .visual .text h2:before  {width:30px; top:-5px;}
		#visual_wrap .visual .text p {font-size:110%;}
	}

	@media screen and (max-width:499px){
		#visual_wrap .visual .text .num {font-size:120%;}
		#visual_wrap .visual .text h2 {font-size:280%; line-height:100%;}
		#visual_wrap .visual .text h2:before  {width:30px; top:-5px;}
		#visual_wrap .visual .text p {font-size:100%;}
	}


#visual_wrap #bx-pager1 {position:absolute; left:calc(50% - 786px); margin-top:-62px; text-align:right;}
#visual_wrap #bx-pager1 a {display:inline-block; font-size:24px; color:#fff; margin:0 10px;}
#visual_wrap #bx-pager1 a.active {color:#fabf13;}
#visual_wrap #bx-pager1 a.active:after {position:relative; display:block; width:100%; height:1px; top:4px;background:#fabf13; content:'';}

	@media screen and (max-width:1199px){
		#visual_wrap #bx-pager1 {left:auto; right:185px;}
	}

	@media screen and (max-width:999px){
		#visual_wrap #bx-pager1 {right:155px; margin-top:-52px;}
		#visual_wrap #bx-pager1 a {font-size:130%;}
	}

	@media screen and (max-width:999px){
		#visual_wrap #bx-pager1 {right:135px; margin-top:-45px;}
		#visual_wrap #bx-pager1 a {font-size:120%;}
	}

#visual_wrap .control {position:absolute; left:calc(50% - 590px); margin-top:-88px;}
#visual_wrap .control .prev button,
#visual_wrap .control .next button {width:92px; height:88px; background-color:#187fc4; border:0; font-size:0;}
#visual_wrap .control .prev {position:absolute; right:92px;}
#visual_wrap .control .prev button {background-image:url('../img/main/visial_arrow_left.png'); background-position:center; background-repeat:no-repeat;}
#visual_wrap .control .next {position:absolute; right:0;}
#visual_wrap .control .next button {background-image:url('../img/main/visial_arrow_right.png'); background-position:center; background-repeat:no-repeat;}
#visual_wrap .control .prev:hover button,
#visual_wrap .control .next:hover button {background-color:#161c2c;}

	@media screen and (max-width:1199px){
		#visual_wrap .control {left:0;}
	}

	@media screen and (max-width:999px){
		#visual_wrap .control {margin-top:-68px;}
		#visual_wrap .control .prev button,
		#visual_wrap .control .next button {width:72px; height:68px; background-size:40px;}
		#visual_wrap .control .prev {right:72px;}
	}

	@media screen and (max-width:799px){
		#visual_wrap .control {margin-top:-58px;}
		#visual_wrap .control .prev button,
		#visual_wrap .control .next button {width:62px; height:58px; background-size:30px;}
		#visual_wrap .control .prev {right:62px;}
	}

#product {background:url('../img/main/product_bg.gif') center no-repeat; background-size:cover; padding:132px 0 208px;}
#product .container {display:block; overflow:hidden;}

#product h3 {font-size:42px; text-align:center; margin-bottom:35px; word-break:keep-all; text-transform:uppercase; font-weight:500;}

#product .title {color:#fff;}
#product .title h4 {font-size:33px; font-family:'GRAFIKA TYPE.1', sans-serif; font-weight:500; margin-bottom:19px;}
#product .title p {font-size:16px; font-weight:300; line-height:140%; display:inline-block; word-break:keep-all;}
#product .title p .br {display:block;}

	@media screen and (max-width:1199px){
	}

	@media screen and (max-width:999px){
		#product {padding:92px 0 158px;}
		#product h3 {font-size:200%;}

		#product .title h4 {font-size:180%;}
		#product .title p .br {display:inline;}
	}

	@media screen and (max-width:799px){
		#product {padding:72px 0 128px;}
		#product h3 {font-size:180%;}
		
		#product .title h4 {font-size:160%;}
		#product .title p {font-size:100%;}
	}

	@media screen and (max-width:499px){
		#product h3 {font-size:160%;}
		#product .title p {font-size:90%;}
	}


#product .arrow {position:relative; display:inline-block; width:33px; height:33px; top:-32px; margin-left:15px; background-image:url('../img/main/product_arrow.png'); background-position:center; background-repeat:no-repeat; background-color:#fff; border-radius:50%; font-size:0; z-index:1;}
#product a:hover .arrow {background-color:#fabf13;}

	@media screen and (max-width:1024px){
		#product .arrow {display:block; top:5px; margin-left:0;}
	}

	@media screen and (max-width:799px){
		#product .arrow {top:15px;}
	}

#product .image {text-align:right;}

#product .product01,
#product .product02,
#product .product03,
#product .product04 {position:relative; width:50%; overflow:hidden;}

	@media screen and (max-width:799px){
		#product .product01,
		#product .product02,
		#product .product03 {width:100%;}
	}

#product .product01 {float:left; background:url('../img/main/product01_bg.gif') bottom right #161c2c no-repeat; max-height:572px;/*550px;*/}
#product .product01 a {display:block; overflow:hidden; padding:57px;}
#product .product01 .title {margin-bottom:50px;}

	@media screen and (max-width:1199px){
		#product .product01 {max-height:631px;/*585px;*/}
		#product .product01 a {padding:37px 20px 99px;}
		#product .product01 .image {margin-top:150px;}
		#product .product01 .image img {width:274px;}
	}

	@media screen and (max-width:1024px){
		#product .product01 .title {margin-bottom:26px;}
	}

	@media screen and (max-width:999px){
		#product .product01 .title h4 img {width:auto; height:20px;}
		#product .product01 .image img {width:251px;}
	}

	@media screen and (max-width:799px){
		#product .product01 {float:none;}
		#product .product01 .image img {width:200px;}
	}

	@media screen and (max-width:499px){
		#product .product01 .title h4 img {height:18px;}
		#product .product01 .image img {width:180px;}
	}

#product .product02 {background:url('../img/main/product02_bg.gif') top right #187fc4 no-repeat; max-height:183px;}
#product .product02 a {display:block; overflow:hidden; padding:37px 40px;}
#product .product02 .image {position:relative; margin-top:-90px; margin-right:-53px;}
#product .product02 .image img {max-width:230px;}

	@media screen and (max-width:1199px){
		#product .product02 a {padding:37px 20px;}
		#product .product02 .image {margin-right:-30px;}
		#product .product02 .image img {width:195px;}
	}

	@media screen and (max-width:1199px){
		#product .product02 {max-height:225px;/*201px;*/}
		#product .product02 a {padding:30px 20px;}
		#product .product02 p {width:60%;}
	}


#product .product03 {background:url('../img/main/product03_bg.gif') top right #525d66 no-repeat; max-height:205px;/*183px;*/}
#product .product03 a {display:block; overflow:hidden; padding:37px 40px;}
#product .product03 .image {position:relative; margin-top:-130px; margin-right:-16px;}

	@media screen and (max-width:1199px){
		#product .product03 a {padding:37px 20px;}
		#product .product03 .image {margin-right:-30px;}
		#product .product03 .image img {width:195px;}
	}

	@media screen and (max-width:1199px){
		#product .proeuct03 {max-height:201px;}
		#product .product03 a {padding:30px 20px;}
		#product .product03 p {width:60%;}
	}

#product .product04 {background:url('../img/main/product04_bg.gif') top right #3b454d no-repeat; max-height:184px;}
#product .product04 a {display:block; overflow:hidden; padding:37px 40px;}
#product .product04 .image {position:relative; margin-top:-150px; margin-right:-60px;}

	@media screen and (max-width:1199px){
		#product .product04 a {padding:37px 20px;}
		#product .product04 .image {margin-right:-50px;}
	}

	@media screen and (max-width:1199px){
		#product .product04 {max-height:201px;}
		#product .product04 a {padding:30px 20px;}
		#product .product04 p {width:60%;}
	}

	@media screen and (max-width:799px){
		#product .product04 {width:100%;}
	}

	@media screen and (max-width:499px){
		#product .product04 .image {margin-top:-130px;}
		#product .product04 .image img {width:50%;}
	}

#business {width:100%;height:663px;background:#161c2c; overflow:hidden; color:#fff;}
#business .container {width:100%; max-width:1180px;}
#business .businessWrap{position:relative;width:100%;height:663px;margin:0 auto;}
#business .businessWrap .infoText{position:relative;width:500px;height:663px;padding:115px 105px 0 0;}
#business .infoText .tit{display:inline-block;font-family:'NanumSquare';font-size:40px;font-weight:800;letter-spacing:-0.0025em;line-height:1.45;}
#business .infoText .tit span{display:block;font-weight:700;font-size:20px;color:#a0a0a0;letter-spacing:-0.0025em;text-align:center;}
#business .infoText p{margin:18px 0 0;font-size:18px;color:#fff;letter-spacing:-0.0025em;line-height:1.5; font-weight:400; word-break:keep-all;}
#business .infoText p .br {display:block;}
#business .infoText #businessLink{margin-top:168px;list-style:none;}
#business .infoText #businessLink li {margin-bottom:20px;}
#business .infoText #businessLink li a{position:relative;display:block;padding:3px 0 2px;font-size:18px;font-weight:400;transition:all .2s;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;-ms-transition:all .2s; color:#fff; cursor:pointer;}
#business .infoText #businessLink li a:hover,
#business .infoText #businessLink li a.active {font-size:20px;color:#fabf13; border-bottom:1px solid #fabf13;}

#business .businessWrap .infoRolling{position:absolute;top:0;left:500px;display:block;width:100%;height:663px;background:#8d8d8d;}
#business .businessSWrap{width:100%;/* height:100%; */}
#business .businessSWrap .businessList{position:relative;}
#business .businessSWrap .businessList .txtBox{overflow:hidden;position:absolute;bottom:0;left:0;width:69%;height:238px;background:rgba(256,256,256,0.7);color:#000;}
#business .businessSWrap .businessList .txtBox .txt1{float:left;margin:57px 0 0 8%; width:32.5%; font-size:35px; line-height:110%; text-align:left;}
#business .businessSWrap .businessList .txtBox .txt1 b{display:block; font-weight:500;}
#business .businessSWrap .businessList .txtBox .txt1 .br {display:block;}
#business .businessSWrap .businessList .txtBox .txt2 {float:right;width:50%;margin:59px 9% 0 0%;font-size:19px; line-height:160%; font-weight:300; word-break:keep-all;}
#business .businessSWrap .businessList .txtBox .txt2 b {font-weight:500;}
#business .businessSWrap .businessList .txtBox .txt2 .br {display:block;}

#business .infoRolling .control{overflow:hidden;position:absolute;bottom:0;right:24.7%;list-style:none;}
#business .infoRolling .control li{float:left;width:70px;height:70px;}
#business .infoRolling .control li button{width:100%;height:100%;border:0;background-color:#161c2c;text-indent:-9999px; }
#business .infoRolling .control li button:hover {background:#187fc4;}
#business .infoRolling .control li button.businessPrev{background-image:url('../img/main/business_arrow_left.png'); background-position:center; background-repeat:no-repeat;}
#business .infoRolling .control li button.businessNext{background-image:url('../img/main/business_arrow_right.png'); background-position:center; background-repeat:no-repeat;}

	@media screen and (max-width:1549px){
		#business .businessWrap .infoText {width:38.5%; padding:115px 5% 0 0;}
		#business .businessWrap .infoRolling {left:38.5%;}
	}

	@media screen and (max-width:1499px){
		#business .businessWrap .infoText {width:36.5%;}
		#business .businessWrap .infoRolling {left:36.5%;}
	}

	@media screen and (max-width:1399px){
		#business .businessWrap .infoText {width:32.5%;}
		#business .businessWrap .infoRolling {left:32.5%;}
	}

	@media screen and (max-width:1299px){
		#business .businessWrap .infoText {width:34.5%; padding:115px 5% 0 2%;}
		#business .businessWrap .infoRolling {left:34.5%; width:86%;}
		#business .businessSWrap .businessList img {max-width:150%; width:auto; height:100%; margin-left:-20%;}
		#business .businessSWrap .businessList .txtBox .txt1 {margin:57px 0 0 8%; width:30.5%; font-size:30px;}
		#business .businessSWrap .businessList .txtBox .txt2 {width:52%;margin:59px 9% 0 0%;}
		#business .infoRolling .control{right:24%;}
	}


	@media screen and (max-width:1199px){
		#business {height:563px;}
		#business .businessWrap {height:563px;}
		#business .businessWrap .infoText {width:350px; height:563px; padding:85px 20px 0 0;}
		#business .infoText .tit {font-size:36px;}
		#business .infoText .tit span {font-size:18px;}
		#business .infoText #businessLink {margin-top:128px;}
		#business .infoText #businessLink li a {font-size:16px;}
		#business .infoText #businessLink li a:hover, #business .infoText #businessLink li a.active {font-size:16px;}

		#business .businessWrap .infoRolling {width:calc(100% - 328px); left:350px; height:563px;}
		#business .businessSWrap .businessList {height:563px;}
		#business .businessSWrap .businessList .txtBox {width:100%; height:198px;}
		#business .businessSWrap .businessList .txtBox .txt1 {width:195px; font-size:26px; margin:47px 0 0 38px;}
		#business .businessSWrap .businessList .txtBox .txt2 {width:calc(100% - 320px); font-size:17px; margin:49px 83px 0 0;}

		#business .infoRolling .control {left:auto; right:0;}
		#business .infoRolling .control li {width:60px; height:60px;}

	}

	@media screen and (max-width:1024px){
		#business .businessSWrap .businessList .txtBox .txt1 {width:185px; font-size:24px;}
		#business .businessSWrap .businessList .txtBox .txt2 {width:calc(100% - 310px); font-size:16px;}

	}

	@media screen and (max-width:999px){
		#business {height:auto;}
		#business .businessWrap {height:auto;}
		#business .businessWrap .infoText {width:100%; height:auto; padding:55px 0 0;}
		#business .infoText {text-align:center;}
		#business .infoText .tit {font-size:200%;}
		#business .infoText p {font-size:16px;}
		#business .infoText #businessLink {display:inline-block; margin-top:58px;}
		#business .infoText #businessLink li a {font-size:100%;}
		#business .infoText #businessLink li a:hover, #business .infoText #businessLink li a.active {font-size:110%;}

		#business .businessWrap .infoRolling {position:relative; width:104%; margin:0 -2%; left:auto; height:auto;}
		#business .businessWrap .infoRolling img {width:100%; height:auto; max-width:100%; margin-left:0;}
		#business .businessSWrap .businessList {position:relative; width:100%; height:auto; background:#fff;}
		#business .businessSWrap .businessList .txtBox {position:relative; width:100%; bottom:auto; height:178px;}
		#business .businessSWrap .businessList .txtBox .txt1 {width:30%; margin:37px 0 0 5%; font-size:180%;}
		#business .businessSWrap .businessList .txtBox .txt2 {width:53%; margin:38px 10% 0 0; font-size:100%;}
		#business .businessSWrap .businessList .txtBox .txt2 .br {display:inline;}
	}
	
	@media screen and (max-width:799px){
		#business .infoText .tit {font-size:180%;}
		#business .infoText p {width:80%; margin:0 auto;}
		#business .infoText p .br {display:inline;}
		#business .infoText #businessLink {margin-top:28px; margin-bottom:18px;}
		#business .infoText #businessLink li a {font-size:90%;}
		#business .infoText #businessLink li a:hover, #business .infoText #businessLink li a.active {font-size:100%;}
		#business .businessSWrap .businessList .txtBox {height:auto; padding:37px 20px 57px; height:270px;}
		#business .businessSWrap .businessList .txtBox .txt1 {width:100%; margin:0; font-size:160%;}
		#business .businessSWrap .businessList .txtBox .txt1 .br {display:inline;}
		#business .businessSWrap .businessList .txtBox .txt2 {width:100%; margin:29px 0 0 0; font-size:90%;}
	}

	@media screen and (max-width:499px){
		#business .infoText .tit {font-size:160%;}
		#business .infoText p {width:90%; font-size:90%;}
		#business .infoText #businessLink li {margin-bottom:10px;}
	}

#catalog_cs {display:block; overflow:hidden; padding:99px 0;}
#catalog_cs a {display:block; overflow:hidden; color:inherit;}
#catalog_cs .container {display:flex; flex-wrap: wrap; height:248px;}

#catalog_cs .catalog {display:flex; flex-wrap: wrap; align-items: center; justify-content: center; width:50%; background:url('../img/main/catelog_icon.png') 105px center #04214d no-repeat; color:#fff;  font-size:22px; font-weight:300;}
#catalog_cs .catalog a {padding:0 105px 0 272px;}
#catalog_cs .catalog .more {display:block; font-size:18px; margin-top:15px;}
#catalog_cs .catalog .more:after {position:relative; display:inline-block; margin-left:12px; content:'>';}

#catalog_cs .cs_center {display:flex; flex-wrap: wrap; align-items: center; justify-content: center; width:50%; background:url('../img/main/cs_center_icon.png') 101px center #161c2c no-repeat; color:#fff; padding:0 100px 0 217px;}
#catalog_cs .cs_center h4 {font-size:36px; font-family:'Nexen_B', sans-serif; letter-spacing:0.08em; font-weight:500;}
#catalog_cs .cs_center p {font-size:18px; margin-top:20px;}

	@media screen and (max-width:1199px){
		#catalog_cs {padding:69px 0;}
		#catalog_cs .catalog {background-position:20% center;}
		#catalog_cs .catalog a {width:100%; padding:0 10% 0 43%;}

		#catalog_cs .cs_center {padding:0 1% 0 16%; background-position:15% center;}
		#catalog_cs .cs_center h4 {font-size:220%;}
	}

	@media screen and (max-width:999px){
		#catalog_cs .container {height:158px;}
		#catalog_cs .catalog {font-size:120%; background-size:70px;}
		#catalog_cs .catalog .more {font-size:80%; margin-top:10px;}
		
		#catalog_cs .cs_center {background-position:13% center; background-size:55px;}
		#catalog_cs .cs_center h4 {font-size:180%;}
		#catalog_cs .cs_center p {font-size:90%; margin-top:10px;}
	}


	@media screen and (max-width:799px){
		#catalog_cs {width:100%; padding:0;}
		#catalog_cs .container {height:auto ;padding:0;}
		#catalog_cs .catalog {float:none; width:100%; max-height:inherit; background-position:60px center; background-size:70px;}
		#catalog_cs .catalog a {padding:30px 60px 30px 160px;}
		#catalog_cs .catalog .text br {display:none;}
		#catalog_cs .cs_center {float:none; width:100%; max-height:inherit; background-position:75px center; padding:35px 60px 35px 160px;}
		#catalog_cs .cs_center .text {width:100%;}
	}

	@media screen and (max-width:499px){
		#catalog_cs .catalog {background-position:30px center; background-size:50px;}
		#catalog_cs .catalog a {padding:30px 20px 30px 100px;}

		#catalog_cs .cs_center {background-position:40px center; background-size:45px; padding:35px 20px 35px 100px;}
		#catalog_cs .cs_center h4 {font-size:120%;}
	}