/*mainVisual*/
#mainVisual { width: 100%; height: 1000px; position: relative; color:#fff; }
#mainVisual i { position:absolute; bottom:45px; left:50%; margin-left:-18px; z-index: 101; }
.visual, .visual li { width: 100%; height: 1000px; position: relative; overflow: hidden;  }
.visual li img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:-1; }
.visual li div { width: 1200px; height: 100%; margin: 0 auto; overflow: hidden; }
.visual h2 { color: #fff; text-shadow:0 2px 5px rgba(0,0,0,.5); margin: 395px 0 0 65px; }

.visual h2 span { font-weight: 300; font-size:48px; line-height: 110%; display: inline; margin-bottom:10px; } 


.visual h2 em {  font-weight: 700; font-size:80px; text-transform: uppercase; line-height: 110%; letter-spacing: -1.5px;  }
.visual h2 em { font-size: 75px; }

.visual p { color: #c7b299; font-size:24px; line-height: 100%; width: 682px; margin-left: 65px; text-align: left; margin-top: 10px; text-shadow:0 2px 5px rgba(0,0,0,.9);  }

.visual p.text { color:white; font-size:18px; line-height:120%; }
.visual li.vs2 p { color: #c7b299; }
.visual li.vs3 p { color: #e8d3ba; }
.visual li.vs4 p { color: #ffdeb7; }
.visual li.vs5 p { color: #9fa7af; }
.visual li.vs6 p { color: #cad2d8; }


#mainVisual .bx-controls-direction { position:absolute; z-index:99; top:530px; left:0; width:100%;}
#mainVisual .bx-controls-direction a { position:absolute; width:30px; height:53px; display:block; cursor:pointer; text-indent:-9999px; background-size:100%; }
#mainVisual .bx-prev { left:2%; background:url(/img/main/icon_prev.png) no-repeat; }
#mainVisual .bx-next { right:2%; background:url(/img/main/icon_next.png) no-repeat; }


/*Business introduction*/
.bidBox { width: 1200px; margin:85px auto 60px; text-align: center; }
.bidBox h3 { font-size:36px; color: #333; line-height: 100%; font-weight: 600; text-transform: uppercase; letter-spacing: -.9px; }
.bidBox > p { margin-top: 15px; color: #777; font-size:16px; line-height: 120%; font-weight: 300; }
.bidBox ul { margin-top: 50px; overflow: hidden; font-size:0; }
.bidBox li { width: 273px; overflow: hidden; display:inline-block; margin: 0 7px; text-align: left; }
.bidBox .img { width: 100%; height:215px; position: relative; overflow: hidden; }  
.bidBox li .img div { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index:2; background:rgba(0,0,0,.7); transition:all .3s; }
.bidBox li:hover .img div { opacity: 1; }
.bidBox .img p { display: table; width: 100%; height: 100%;  }	
.bidBox .img p span { display:table-cell; vertical-align: middle; color: #fff; font-weight: 300; font-size:20px; }
.bidBox .img p span i { display: block; width: 15px; height: 2px; background: #fff; margin: 0 auto; font-size:0; margin-bottom:20px; }
.bidBox .txt { margin-top: 25px; color: #333; font-size:16px; line-height: 120%; font-weight: 500; display: inline-block; background:url(/img/main/icon_bid.gif) no-repeat right center; padding-right:30px; text-transform: uppercase; }


/*Company introduction*/
.ciBanner { background:url(/images/bg_ciBanner.jpg) no-repeat center; background-size:cover; background-attachment:fixed; height: 380px; overflow: hidden; }
.ciBanner > div { width: 1200px; margin: 0 auto; overflow: hidden;  }
.ciBanner h3 { float:left;  color: #fff; line-height: 110%; font-size:36px; font-weight: 600; text-transform: uppercase; margin:150px 150px 0 65px; }
.ciBanner h3 span { display: block; }
.ciBanner dl { float:left; margin-top: 100px; }
.ciBanner dt { font-family:"Lato"; font-size:24px; line-height: 110%; color: #d9d9d9; }
.ciBanner dt span { display: block; }
.ciBanner dd { font-size:15px; line-height: 180%;  color: #898989; font-weight: 300; margin-top: 30px; }
.ciBanner dd span { display: block; }
.ciBanner dd.point { color: #c7b299; }


/*banner*/
.ctBox { margin:70px auto 80px; width: 1200px; height: 648px; overflow: hidden; text-transform: uppercase; }
.ctBox .left, .ctBox .right { float: left; width: 600px; height: 100%; overflow: hidden; position: relative; text-align: center;  }
.ctBox .left img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:-1; }
.ctBox .left a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; color: #fff;  }
.ctBox .left h3 {  font-weight: 600; text-align: center; color: #fffefe; font-size:20px; margin-top: 75px; }
.ctBox .left h3:after { content: ""; display: block; width: 80px; height: 1px; background: #7b7b7b; margin: 15px auto 0; }
.ctBox .left dl { margin-top: 85px;  color: #fff; }
.ctBox .left dt { font-weight: 900; font-size:40px; line-height: 110%;	}
.ctBox .left dt span { display: block; font-size:24px; font-weight: 300; margin-bottom:10px;  }
.ctBox .left dd { margin-top:40px; font-size:16px; font-weight: 300; line-height: 160%; }
.ctBox .left dd span { display: block; }
.ctBox .left i { font-family:"Noto Sans KR"; display: block; margin: 85px auto 0; width: 185px; height: 50px; box-sizing:border-box; border: 1px solid rgba(255,255,255,.3); line-height: 48px; font-size:11px; font-style:normal; color: #fff;  }
.ctBox .right > ul { width: 100%; overflow: hidden; height: 324px; }
.ctBox .right > ul li { float: left; width: 50%; height: 100%; overflow: hidden; position: relative;}
.ctBox .right > ul li a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; color: #fff; text-transform: uppercase; box-sizing:border-box; padding:0 10%; }
.ctBox .right > ul h3 { text-align: left;  font-weight: 300; color: #fffefe; font-size:16px; margin-top: 50px;  }
.ctBox .right > ul h3:after { content: ""; display: block; width: 80px; height: 1px; background: #7b7b7b; margin-top:10px; }
.ctBox .right > ul dl { margin: 35px auto 0; width: 90%; }
.ctBox .right > ul dt { font-size:30px; font-weight: 500; line-height: 110%;	height: 66px; box-sizing:border-box; }
.ctBox .right > ul .install dl dt { padding-top:18px; }
.ctBox .right > ul dt span { display: block; }
.ctBox .right > ul dd {  text-align: left; margin-top: 25px; font-size:13px; line-height: 150%; color:rgba(255,255,255,.5); font-weight: 300; }
.ctBox .right > ul i { display: block; margin:25px auto 0; font-style:normal; font-family:"Noto Sans KR";color: #e3c083;  }
.ctBox .right > ul li img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; max-height: 100%; z-index:-1; }

.ctBox .notice { width: 100%; height: 324px; overflow: hidden; background: #c71719; text-align: left; box-sizing:border-box; padding:0 5%; }

.ctBox .notice h3 { float: left; margin-top: 50px; color: #fff; text-transform: uppercase;  font-size:20px; font-weight: 600; }
.ctBox .notice h3:after { content:""; display: block; width: 80px; height: 1px; background: #b2b2b2; margin-top: 10px; }

.ctBox .notice > a { display: block; margin-top: 35px; float: right; line-height: 45px; color: #bfbfbf; font-size:15px; font-weight: 300;	 }



.ctBox .notice ul { clear:both; padding-top: 35px; }
.ctBox .notice li { overflow: hidden; border-bottom: 1px solid #d12022;  line-height: 50px; }
.ctBox .notice li a { font-size:14px; font-weight: 300; color: #fff; float: left; line-height: 50px; width: 70%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctBox .notice li span { float: right; color:#fff; }



/*bottom banner*/
.bottomBn { width: 100%; height: 505px; background:url(/img/main/bg_bottomBn.gif) no-repeat center; background-size:cover; }
.bottomBn > div { width: 1200px; margin: 0 auto; overflow: hidden; height: 100%; }
.bottomBn article { float: left; height: 100%; overflow: hidden; text-align: center; }
.bottomBn h3 { margin-top: 90px; color: #fff; font-size:36px; line-height: 110%; text-transform: uppercase; font-weight: 700; }
.bottomBn .left { width: 410px; background:rgba(0,0,0,.45); }
.bottomBn .left .rightS dl { margin-top: 35px; background:url(/img/main/icon_cs.png) no-repeat center top; overflow: hidden; }
.bottomBn .left .rightS dt { margin-top: 100px; color: #111; font-size:72px; line-height: 100%; font-family:"Bahnschrift", "Arial"; letter-spacing: -2px; }
.bottomBn .left .rightS dd { margin-top: 0; color: #fff; font-size:14px; font-weight: 300; line-height: 140%; }
.bottomBn .left .rightS dd span { display: block; }
.bottomBn .left .rightS div { margin: 20px auto 0; padding-top: 20px; width: 275px; border-top:1px solid rgba(255,255,255,.3); background:url(/img/main/icon_clock.png) no-repeat 28px 32px; }
.bottomBn .left .rightS div p { font-size:14px; line-height: 130%; color:#fff; font-weight: 300; text-align: left; margin:0 0 0 75px; }
.bottomBn .right { width: 790px; background:rgba(0,0,0,.75); }
.bottomBn .right .txt { margin-top: 35px; font-size:24px; line-height: 130%; color: #fff; } 
.bottomBn .right .txt span { display: block; }	
.bottomBn .right .sTxt { margin-top: 30px; font-size:14px; line-height: 130%; color:#959595; font-weight: 300; }
.bottomBn .right .sTxt:before { content: ""; display: block; width: 115px; height: 1px; background:#656565; margin: 0 auto 25px; }
.bottomBn .right .sTxt span { display: block; }
.bottomBn .right a { display: block; margin: 45px auto 0; width: 260px; height: 60px; line-height: 60px; border-radius:30px; text-align: center;  color: #fff; font-size:20px; font-weight: 300;  background:#ed1a3b; }	


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

	/*mainVisual*/
	#mainVisual, .visual, .visual li { height: 650px; }
	#mainVisual i { display: none; }
	.visual li img { max-height: 100%; }
	.visual li div { width:555px; margin: 250px auto 0;	height: auto; }
	.visual h2 { margin: 0; }
	.visual h2 span { font-size:35px;  } 
	.visual h2 em { font-size:65px;  }
	.visual p { line-height: 100%; width: auto; margin:10px 0 0;  }
	#mainVisual .bx-controls-direction { top:320px; }

	/*Business introduction*/
	.bidBox { width: 100%; margin:50px auto 40px;  box-sizing:border-box; padding:0 10px; }
	.bidBox h3 span { font-weight:300; }
	.bidBox ul { margin-top: 30px; }
	.bidBox li { width: 49%; margin: 0 .5% 1%; float: left; }
	.bidBox .img { width: 100%; height:auto; padding-bottom: 75%; }
	.bidBox .img img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; max-height: 100%; }
	.bidBox li .img div { display: none; }
	.bidBox .txt { margin-top:15px; } 


	/*Company introduction*/
	.ciBanner { height:auto; padding:65px 0; background-attachment:scroll;  }
	.ciBanner > div { width: 100%; box-sizing:border-box; padding:0 10px; text-align: center; }
	.ciBanner h3 { float:none;  margin:0; }
	.ciBanner h3 span { display: inline; margin-left: 10px; font-weight: 300; }
	.ciBanner dl { float:none; margin-top:30px; }
	.ciBanner dl:before { content:""; display: block; width: 1px; height: 35px; background:#d7d7d7; margin:0 auto 30px; }
	.ciBanner dd { line-height: 160%; margin-top: 25px; }


	/*banner*/
	.ctBox { margin:0 auto; width: 100%; height:auto; }
	.ctBox .left { display: none; }
	.ctBox .right { float:none; width: 100%; }
	.ctBox .right > ul { height: auto; background:#2d3336; }
	.ctBox .right > ul li { float: left; width: 33.333%; height: auto;	 background:#0e1011; text-align: center; display: table; }
	.ctBox .right > ul li.install { background: #22292c;  }
	.ctBox .right > ul li.support { background: #2d3336;  }
	.ctBox .right > ul li a { display: table-cell; position:static; padding:20% 5% }
	.ctBox .right > ul h3 { font-size:16px; display:inline-block; margin-top:0;  text-align: center; }
	.ctBox .right > ul h3:after { width: 22px; background: rgba(255,255,255,.3); margin:10px auto 0; }
	.ctBox .right > ul dl { width: 100%; display: table; overflow: hidden;	margin: 35px auto 0; }
	.ctBox .right > ul .instsall dl dt { padding-top:0; }
	.ctBox .right > ul dt span { display: block; }
	.ctBox .right > ul dd { display: none; }
	.ctBox .right > ul li img { display: none; }

	.ctBox .notice { height:auto; background: #fff; padding:40px 10px 30px; }
	.ctBox .notice h3 { margin-top:10px; color: #333; font-size:36px; }
	.ctBox .notice h3:after { margin-top: 20px; width: 90px; background: #959595; }
	.ctBox .notice > a { margin-top: 0; color: #777; }
	.ctBox .notice > a i { border:1px solid #dfdfdf; background:url(/img/main/bullet_notice_more_m.gif) no-repeat center; }
	.ctBox .notice ul { padding-top: 10px; }
	.ctBox .notice li { border-bottom-color: #e1e1e1; }
	.ctBox .notice li a { color: #777; width:calc(100% - 80px); }
	.ctBox .notice li span { color:#777; }


	/*bottom banner*/
	.bottomBn { height: auto; }
	.bottomBn > div { width: 100%; }
	.bottomBn article { float:none;  width: 100% !important; box-sizing:border-box; padding:0 10px; }
	.bottomBn h3 { margin-top: 0;  }
	.bottomBn .left { background:none; text-align: left; position: relative; text-align: center; padding:50px 0; }
	.bottomBn .left .leftS,
	.bottomBn .left .rightS { display:inline-block; vertical-align:middle; text-align: left; }
	.bottomBn .left .rightS { margin-left:40px; }
	.bottomBn .left .leftS > p { margin-top: 20px; color: #fff; font-size:18px; line-height: 130%;  font-weight: 300; }
	.bottomBn .left .leftS > p span { display: block; }
	.bottomBn .left .rightS dl { margin-top:0; background:none;  }
	.bottomBn .left .rightS dt { margin-top: 0; line-height: 110%;  }
	.bottomBn .left .rightS dd { display: none; }
	.bottomBn .left .rightS div { margin: 0; padding-top:10px;  background:url(/img/main/icon_clock.png) no-repeat left center; }
	.bottomBn .left .rightS div p { margin:0 0 0 45px; }
	.bottomBn .right { width: 100%; padding:50px 0 30px;  }



}

@media screen and (max-width:650px) {
	/*mainVisual*/
	#mainVisual, .visual, .visual li { height: 450px; }

	.visual li div { width:95%; margin: 180px auto 0;	 }

	.visual h2 span { font-size:25px; margin-bottom: 5px; } 

	/*메인비주얼1 변경시 삭제*/
	.visual li:first-child h2 span { text-align: right; text-indent:-40px; }



	.visual h2 em { font-size:37px;  }
	.visual p { font-size:15px; margin:5px 0 0;  }
	.visual p.text { font-size:14px; letter-spacing: -1px; }

	#mainVisual .bx-controls-direction { top:210px; }
	#mainVisual .bx-controls-direction a { width:15px; height:27px; display:block; }

	#mainVisual .bx-prev { left:10px; }
	#mainVisual .bx-next { right:10px; }



	/*Business introduction*/
	.bidBox h3 { font-size:28px; }
	.bidBox > p { margin-top:10px; font-size:14px;  }
	.bidBox ul { margin-top: 20px; }
	.bidBox li { margin: 0 .5% 10px; }
	.bidBox .txt { margin-top:5px; font-size:14px; background-size:15px; padding-right:20px; }


	/*Company introduction*/
	.ciBanner { padding:45px 0; }
	.ciBanner h3 { font-size:28px;  }
	.ciBanner h3 span { margin-left: 5px; }
	.ciBanner dl { margin-top:10px; }
	.ciBanner dl:before { height: 30px; margin:0 auto 10px; }
	.ciBanner dt { font-size:18px; }
	.ciBanner dd { font-size:14px; line-height: 130%; margin-top: 15px; }



	/*banner*/
	.ctBox .right > ul li a { display: table-cell; position:static; padding:20% 5% }
	.ctBox .right > ul h3 { font-size:14px; }
	.ctBox .right > ul dl { margin: 15px auto 0; }
	.ctBox .right > ul dt { font-size:18px; }
	.ctBox .right > ul dt span { display: block; }
	.ctBox .right > ul i { margin:5px auto 0;  }
	.ctBox .notice { padding:20px 10px; }
	.ctBox .notice h3 { margin-top:10px; font-size:28px; }
	.ctBox .notice h3:after { margin-top: 10px; }
	.ctBox .notice > a { margin-top: 0; line-height: 35px; font-size:14px; }
	.ctBox .notice > a i { margin-left: 10px; width: 35px; height: 35px; margin-left: 10px; }
	.ctBox .notice li,
	.ctBox .notice li a { line-height: 40px; }



	/*bottom banner*/
	.bottomBn h3 { font-size:28px; }
	.bottomBn .left { padding:30px 10px; }
	.bottomBn .left .leftS,
	.bottomBn .left .rightS { display:block; margin-left:0; text-align: center; }
	.bottomBn .left .rightS { }
	.bottomBn .left .leftS > p { margin-top:10px; font-size:14px; }
	.bottomBn .left .leftS > p span { display:inline; margin-left:3px; }
	.bottomBn .left .rightS dt { margin-top:15px; line-height: 110%; font-size:55px;  }
	.bottomBn .left .rightS div { margin: 0 auto; padding-top:10px; }
	.bottomBn .right { padding:30px 10px;  }
	.bottomBn .right .txt { margin-top:15px; font-size:16px; } 
	.bottomBn .right .txt span { display:inline; margin-left:4px; }	
	.bottomBn .right .sTxt { margin-top:20px; }
	.bottomBn .right .sTxt:before { margin: 0 auto 20px; }
	.bottomBn .right a { margin: 20px auto 0; width: 140px; height: 40px; line-height: 40px; border-radius:20px; font-size:14px; }

}