@charset "utf-8";

/* Intro */
.mainIntro			{ position:absolute; top:0; left:0; width:100%; height:100%;  background:linear-gradient( to right, #30094c, #22494f); z-index:100; overflow:hidden; opacity:1; transition:all 1s;}
.mainIntro h1 img	{ width:230px;}
.mainIntro .inner	{ position:relative; width:80%; height:100%; margin:3% auto 0; color:#fff;}
.mainIntro .inner:after { content:''; position:absolute; top:10%; right:-10%; width:60%; height:60%; background:url('/img/main/img_mainintro.png') no-repeat 130% 30%; background-size:100%;}
.mainIntro .keyword { position:absolute; top:0; left:0; width:100%; text-align:right;}
.mainIntro .keyword	li  { display:inline-block; margin:0 2.5%; font-size:2.5em; font-weight:600;}
.mainIntro .txt1	{ margin-top:10%; font-size:3.8em; font-weight:600;}
.mainIntro .txt2	{ margin-top:2%; font-size:1.2em; color:rgba(255,255,255,.6); line-height:1.6;}


/* Visual */
.visual				{ position:relative; width:100%; height:43vh;}
.swiper-container	{ height:100%;}
.swiper-slide img	{ width:100%; height:100%;}
.visual .text_area	{ position:absolute; top:0; right:0; width:35%; padding:4% 5%; height:100%; color:#fff; background:rgba(15,15,103,.9); box-sizing:border-box;}
.visual .text_area p { margin-bottom:10%; font-size:1.2em;} 
.visual .text_area h3 { position:relative; margin:0; font-size:2.6em; line-height:1.3; letter-spacing:-1px;}
.visual .text_area h3:before { content:''; position:absolute; top:-10px; left:0; width:50px; height:1px; background:#145eff;}
.visual .text_area p span { margin-right:10px; font-weight:600; color:#e2ebff;}

.visual .swiper-container .swiper-pagination-bullets	{ right:0; left:auto; bottom:10%; width:30%; text-align:left;}
.visual .swiper-container .swiper-pagination-bullet		{ margin:0 7px !important; background:rgba(255,255,255,.4); opacity:1;}
.visual .swiper-container .swiper-pagination-bullet-active { background:#145eff;}
.visual .play_area	{ position:absolute; bottom:10%; right:5%; z-index:100;}
.visual .play_area button { background:none; border:0; cursor:pointer;}
.visual .play_area button img { width:0.7em;}


/* Product */
.prodcut				{ overflow:hidden;}
.prodcut li				{ position:relative; float:left; display:table; width:50%; height:27vh; box-sizing:border-box; }
.prodcut li>a			{ display:table; height:100%;}
.prodcut li:nth-child(1) { background:url('/img/main/bg_pro01.jpg') no-repeat right bottom; background-size:cover}
.prodcut li:nth-child(2) { background:#eff1f5;}
.prodcut li:nth-child(3) { background:#e9e9e9;}
.prodcut li:nth-child(4) { background:#0c0c0c url('/img/main/bg_pro04.jpg') no-repeat right bottom;}
.prodcut li.bk, .prodcut li.bk a	{ color:#111;}
.prodcut li.wh,	.prodcut li.wh a	{ color:#fff;}
.prodcut li.bu, .prodcut li.bu a	{ color:#121246;}
.prodcut li .img_area			{ position:relative; display:table-cell; vertical-align:middle;}
.prodcut .text_area		{ position:absolute; display:table-cell; top:20%; left:50%; vertical-align:middle;}
.prodcut .text_area h3	{ position:relative; margin:0 0 10%; font-family: 'Montserrat', sans-serif; font-size:1.9em;}
.prodcut .text_area h3:after { content:''; position:absolute; bottom:-10px; left:0; width:50px; height:1px;}
.bk .text_area h3:after { background:rgba(0,0,0,.3);}
.wh .text_area h3:after { background:rgba(255,255,255,.3);}
.bu .text_area h3:after { background:rgba(0,46,136,.3);}
.prodcut .text_area .more{ display:block; width:120px; margin-top:10%; text-align:center; line-height:2.5; font-size:0.8em; border:1px solid rgba(200,200,200,.6);}
.bk .text_area a		{ border-color:rgba(0,0,0,.3)}
.bu .text_area a		{ border-color:rgba(0,46,136,.3)}
.prodcut .text_area a:hover { font-weight:800;}
.prodcut .main_item .lineborder				{ position:absolute; background:#3ae4ff; -webkit-transition: all 0.2s; transition: all 0.2s; z-index:1;}
.prodcut .main_item .lineborder.line-top		{ height:4px; width:0; left:0; top:0;}
.prodcut .main_item .lineborder.line-btm		{ height:4px ;width:0; right:0; bottom:0;}
.prodcut .main_item .lineborder.line-left		{ width:4px; height:0; left:0; bottom:0;}
.prodcut .main_item .lineborder.line-right		{ width:4px; height:0; right:0; top:0;}
.prodcut .right .text_area		{ left:15%;}






/*반응형*/
/*해상도 1920px 이상*/
@media all and (min-width : 1921px){
	.prodcut li .img_area { left:15%}
}

/*해상도 900px 이상 1600px 이하*/
@media all and (min-width:900px) and (max-width : 1600px) {
	.visual .text_area h3		{ font-size:2em;}
	.prodcut .img_area img		{ width:55%;}
	.prodcut li:nth-child(4)	{ background-size:80%;}
	.prodcut .text_area h3		{ font-size:1.6em;}
}

/*해상도 900px 이상 1200px 이하*/
@media all and (min-width:900px) and (max-width : 1200px) {
	.prodcut .text_area { width:40%;}
	.prodcut .main_item .lineborder	{ display:none;}

	.mainIntro .inner	{ width:90%;}
	.mainIntro .inner:after { left:50%; right:auto; top:auto; bottom:10%; }
	.mainIntro .keyword	{ position:static; text-align:left;}
	.mainIntro .keyword li:nth-child(1) { margin-left:0;}

	.mainIntro .txt1 { margin-top:5%;}
}


/*해상도 900px 이하*/
@media all and (max-width : 900px) {
	.visual				{ height:auto !important;}
	.visual .text_area		{ width:100%; top:auto; bottom:0; height:auto; background:rgba(14,31,65,.4)}
	.visual .text_area p	{ margin-bottom:4%;}
	.visual .swiper-container .swiper-pagination-bullets { top:8%; right:3%; bottom:auto; text-align:right;}
	.visual .play_area		{ display:none; }

	.visual .text_area h3	{ font-size:2.1em;}
	.prodcut li				{ display:block; height:auto;}
	.prodcut li>a			{ display:block;}
	.prodcut .text_area		{ display:block; position:static; text-align:center;}
	.prodcut .text_area h3	{ margin-bottom:0; font-size:1.6em;}
	.prodcut .text_area h3:after { display:none;}
	.prodcut .text_area .more	{ margin:3% auto 10%;}
	.prodcut li .img_area	{ display:block; }
	.prodcut li .img_area img { width:90%; margin-top:7%;}
	.prodcut li:nth-child(4) { background:#0c0c0c url('/img/main/bg_pro04.jpg') no-repeat 110% -15px; background-size:140%;}

	.mainIntro .inner	{ width:100%;}
	.mainIntro .inner:after { width:100%; left:50%; right:auto; top:auto; bottom:20%; margin-left:-50%;}
	.mainIntro .inner>*	{ margin-left:5%;}
	.mainIntro .keyword	{ position:static; text-align:left;}
	.mainIntro .keyword li:nth-child(1) { margin-left:0;}
}

/*해상도 600px 이하*/
@media all and (max-width : 600px) {
	.visual .text_area h3	{ font-size:1.8em;}
	
	.prodcut li				{ height:270px;}
	.prodcut li>a			{ display:block; height:auto !important;}
	.prodcut .text_area h3	{ font-size:1.4em;}
	.prodcut .text_area p	{ width:70%; margin:0 auto; line-height:1.3; word-break: keep-all;}
	.prodcut .text_area .more	{ border:0; line-height:1;}

	.mainIntro h1 img		{ width:130px;}
	.mainIntro .keyword li	{ font-size:1.5em;}
	.mainIntro .txt1		{ margin-top:5%; font-size:2.6em;}
	.mainIntro .txt2		{ font-size:1em;}
	.mainIntro .txt2 br		{ display:none;}

}

@media all and (max-width : 424px) {
	.prodcut li				{ height:210px;}
}