@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@charset "utf-8";
/* CSS Document */



/* css_reset */
*{margin:0; padding:0; -webkit-text-size-adjust:none;}
html{width:100%; height:100%;}
body{font-size:12px; font-family:'NanumSquare', sans-serif; color:#666;}
body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,input,table,tr,th,td{margin:0; padding:0}
ul,ol,li{list-style:none}
img, fieldset{border:none; vertical-align:top}
legend, caption{display:none}
textarea, button{vertical-align:middle;}
input, select{ vertical-align:middle; background:#fafafa; border:1px solid #ddd;color:#666;font-family:'Century Gothic',  'Noto Sans KR', Sans-serif;}
input{padding:3px;}
select{padding:2px}
textarea{padding:3px; vertical-align:middle; background:#fafafa; border:1px solid #ddd; color:#777}
.checkbox{padding:0; border:0;}
.disNone{display:none;}
a{text-decoration:none; color:#666;}
a:hover, a:focus, a:active{text-decoration:none; color:#666;}
table{width:100%; border-collapse:collapse}
button{margin:0;padding:0;border:0}
hr{display:none;}

.labelFor{position:absolute; top:-9999px; left:-9999px;}
.invisible {text-indent:-5000px; position:absolute; left:-5000px; font-size:0; width:0; height:0; line-height:0; visibility:hidden; overflow:hidden;}

/* ������ */
.ellipsis{display:inline-block; overflow:hidden; width:100%; white-space:nowrap; text-overflow:ellipsis;}


/*����*/
.hidden {display:none;}
.blind {width:1px;height:1px;overflow:hidden;position:absolute;top:-9999em;left:-9999em;display:block;text-indent:-9999em;font-size:0px;line-height:0;}




#section1 {
	background: #5c53aa;
	color: #8d86c3;
}

#section2 {
	background: #4bbfc3;
	color: #81d2d5;
}

#section3 {
	background: #283044;
	color: #686e7c;
}

#section4 {
	background: #ebf5ee;
	color: #aeb9b9;
}

h1 {
	font-size: 50px;
	margin-bottom: 25px;
}

.title-top {
	font-size: 60px;
	padding-bottom: 30px;
}

.title-bottom {
	font-size: 30px;
}

.title-tx {
	font-size: 20px;
	opacity: 0.8;
}

.nav {
	position: fixed; /*left: 50%;*/
	width: 100%;
	top: 20px;
	z-index: 9;
	padding-left: 10px;
}

.nav a {
	padding: 7px 20px;
	border-radius: 7px;
	margin-right: 10px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	text-decoration: none;
	color: black;
	font-family: sans-serif, arial;
	font-weight: 100;
}

.nav a.active {
	background: rgba(0, 0, 0, 0.5);
	color: white;
}

.nav a:hover {
	background: rgba(255, 255, 255, 0.7);
}

.fork-wr img {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	border: 0;
}


.section {
	min-height: 800px;
	position: relative;
	text-align: center;
	font-family: sans-serif, arial;
	margin: 0;
}





/************ ���� PC ***********/
/****** WRAP *****/
#wrap {width:100%; 	}
body > #wrap {min-height: 100%;}



/*************** HEADER ***************/
header {position:absolute; height:80px;	top:0;left:0; width:100%; background:#fff; z-index:999;}
header > div {width:1280px;	margin:0 auto;	height:80px;}
header > div:after {content: ''; display:block;	clear:both;}
header h1 {position:absolute; z-index:100; top:18px; left:100px; width:210px;}
header h1 img {width:100%;}
/************** HEADER GNB **************/

header .gnb {float:left; margin:30px 0px 0px 350px; }
header .gnb:after {content: '';	display: block;	clear: both;}
header .gnb > li {float:left; margin:0px 0 0 120px; list-style: none;}
header .gnb > li:first-child {margin-left:0;}
header .gnb > li > a {color:#494848;	text-decoration:none; font-size:18px; font-weight:800;	line-height: 20px;}
header .gnb > li > a:hover, header .gnb > li > a:focus, header .gnb > li.active > a {color:#0076bc;	height:100px;}
header .gnb > li > a.on {color:#292e34 !important; height:100px;}
header .gnb > li > a.on:hover, header .gnb > li > a.on:focus {color:#0e4e96; height:100px;}
header .gnb > li > div {position:absolute; top:80px; left:0; width:100%; height:0; overflow:hidden; background:rgba(255,255,255,0.75); z-index:1000;}
header .gnb > li > div > ul {margin:0 auto; overflow: hidden; list-style:none;}
header .gnb > li > div > ul a {transform:skew(-0.03deg);	font-weight: 600;	font-size: 14px;	line-height: 20px;	text-decoration: none;}
header .gnb > li > div > ul a:hover, header .gnb > li > div > ul a:focus, header .gnb > li > div > ul a.on 
{border-radius: 5px; color: #0076bc;	transform:skew(-0.001deg);}
header .gnb > li > div.active {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; z-index: 2;}
header .gnb + .gnb-underbar {	position: absolute;	top: 77px;	left: 0;	width: 256px;	height: 3px;	background-color: #0076bc;	opacity: 0;	filter: alpha(opacity=0);	z-index: 3;}
header .gnb > li > a + div ul {	width: 1000px;	padding: 15px 0px 12px 0px;	}
header .gnb > li > a + div ul li {	float: left;	padding-right: 30px;	font-size: 0;	line-height: 0;}
header .gnb > li > a + div ul li:first-child {padding-left: 0;}
header .slidedown > h2 {display: none;}
header .sidenav {display: none;}
header span {display: none;}











.visual {position: relative; width: 100%; height:100vh; background: #222; min-width: 1000px;}
.visual .bx-wrapper, .section01 .visual .bx-viewport {height: 100%;}
.visual .slidee {margin: 0; padding: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	display: block;
	height: 100%
}

.visual .slidee li {position: relative; display: block; height: 100%;}


.visual .slidee li .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: 34
}

.visual .sum_area li{
	cursor: pointer;
}



.visual .slidee li.item1 .bg {
	background:url(../images/main/main01.jpg) no-repeat 50% 0; 
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}







/* 배너1 css수정 */

.visual .slidee li.item1 .tit_box {width:467px; height:362px; position: absolute; left:60px; top: 425px; margin: auto 0; z-index: 35;}
.visual .slidee li.item1 .tit_box h2 {margin:40px 0px 0px 40px; color:#fff; font-size:72px; line-height:78px; font-weight:800; letter-spacing: -1.8px;}

.visual .slidee li.item1 .tit_box .main01_txt03 {float:left; color:#19BCFF; font-size:18px; line-height:26px; font-weight:700; margin-left:40px; transform:skew(-0.1deg);}
.visual .slidee li.item1 .tit_box .main01_txt03 p { color:#fff; font-size:14px; font-weight:300; }
.visual .slidee li.item1 .tit_box .main01_txt04 {float:left; color:#fff; font-size:16px; line-height:24px; font-weight:400; margin-left:40px; margin-top:25px; transform:skew(-0.1deg);}


.visual .slidee li.item1 .main01_txt01 {position: absolute; top:203px; left:660px; z-index:100;}
.visual .slidee li.item1 .main01_txt02 {position: absolute; top:420px; left:892px; z-index:100;}
.visual .slidee li.item1 .tit_box h2 img {display: inline-block;}
.visual .slidee li.item1 .tit_box h2.m_h2 {display:none;}


.visual .slidee li.item1 .sum_area { position: absolute; z-index:100;}
.visual .slidee li.item1 .sum_area.slide01 {top:435px; right:67px; }
.visual .slidee li.item1 .sum_area.slide01 li { margin-bottom:30px;  width:180px;  background:url(../images/main/sum_off.png) no-repeat 132px 50%;}
.visual .slidee li.item1 .sum_area.slide01 li.achieve { background:url(../images/main/sum01_on.png) no-repeat 132px 50%; }
.visual .slidee li.item1 .sum_area.slide01 li span.sum_img {width:120px; height:81px;  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.50));  overflow:hidden; display:block;}
.visual .slidee li.item1 .sum_area.slide01 li p.sum_text {width:100px; color:#D9D9D9; text-align:center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); font-family:'NanumSquare', sans-serif; font-size: 12px; margin:5px;
font-style: normal; font-weight: 700; line-height: 20px; /* 166.667% */ letter-spacing: -0.3px; text-transform: uppercase;}
.visual .slidee li.item1 .sum_area.slide01 li.achieve span.sum_img {width:110px; height:81px;   border:1px solid #19BCFF;}
.visual .slidee li.item1 .sum_area.slide01 li.achieve p.sum_text{color:#19BCFF;}







.visual .slidee li.item2 .bg {
	background: url(../images/main/main02.jpg) no-repeat 50% 0;
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.visual .slidee li.item2 .tit_box {position:absolute; left: 30px; top:145px;  z-index: 35;  width:700px; height:526px;  border-radius:50%;  -moz-border-radius:50%; -webkit-border-radius:50%;  }
.visual .slidee li.item2 .tit_box h2 { margin:109px 0px 0px 70px;  color:#fff; font-size:72px; line-height:78px; font-weight:800; letter-spacing: -1.8px;}
.visual .slidee li.item2 .tit_box .main01_txt03 {float:left; color:#19BCFF; font-size:18px; line-height:26px; font-weight:700; margin-left:70px; transform:skew(-0.1deg);}
.visual .slidee li.item2 .tit_box .main01_txt03 p { color:#fff; font-size:14px; font-weight:300; }
.visual .slidee li.item2 .tit_box .main01_txt04 {float:left; color:#fff; font-size:16px; line-height:24px; font-weight:400; margin-left:70px; margin-top:25px; transform:skew(-0.1deg);}


.visual .slidee li.item2 .sum_area { position: absolute; z-index:100;}
.visual .slidee li.item2 .sum_area.slide03 {bottom:40px; right:100px; display:table; width:550px;}
.visual .slidee li.item2 .sum_area.slide03 li { width:110px;  height:150px; margin-right:25px; background:url(../images/main/sum_off.png) no-repeat 50% 115px; text-align:left;  float:left; background-size:11px 11px; }
.visual .slidee li.item2 .sum_area.slide03 li img { vertical-align:top;}
.visual .slidee li.item2 .sum_area.slide03 li.achieve { background:url(../images/main/sum02_on.png) no-repeat 50% 115px; }
.visual .slidee li.item2 .sum_area.slide03 li span.sum_img {width:120px; height:81px;  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.50));  overflow:hidden; display:block;}
.visual .slidee li.item2 .sum_area.slide03 li p.sum_text {width:100px; color:#D9D9D9; text-align:center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); font-family:'NanumSquare', sans-serif; font-size: 12px; margin:5px;
font-style: normal; font-weight: 700; line-height: 20px; /* 166.667% */ letter-spacing: -0.3px; text-transform: uppercase;}
.visual .slidee li.item2 .sum_area.slide03 li.achieve span.sum_img {width:110px; height:81px;   border:1px solid #19BCFF;}
.visual .slidee li.item2 .sum_area.slide03 li.achieve p.sum_text{color:#19BCFF;}



.visual .slidee li.item3 .bg {
	background: url(../images/main/main03.jpg) no-repeat 50% 0; 
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


.visual .slidee li.item3 .tit_box {position:absolute; right:58px; top:515px; z-index: 35;  width:680px; height:457px; }
.visual .slidee li.item3 .tit_box h2 {color:#fff; font-size:72px; line-height:78px; font-weight:800; letter-spacing: -1.8px; text-align:right;  margin:159px 100px 0px 0px;}
.visual .slidee li.item3 .tit_box .main01_txt01 {float:right; color:#19BCFF; font-size:18px; line-height:26px; font-weight:700; margin-left:70px; transform:skew(-0.1deg); text-align:right; margin:0px 100px 0px 0px; }
.visual .slidee li.item3 .tit_box .main01_txt01 p { color:#fff; font-size:14px; font-weight:300; }
.visual .slidee li.item3 .tit_box .main01_txt02 {float:right; color:#fff; font-size:16px; line-height:24px; font-weight:400; margin-right:100px; margin-top:25px; transform:skew(-0.1deg); text-align:right; }


.visual .slidee li.item3 .sum_area { position: absolute; z-index:100;}
.visual .slidee li.item3 .sum_area.slide04 {top:580px; left:49px; width:186px;}
.visual .slidee li.item3 .sum_area.slide04 li { width:186px; height:126px;  background:url(../images/main/sum_off.png) no-repeat 55px 40px;  }
.visual .slidee li.item3 .sum_area.slide04 li img { vertical-align:top;}
.visual .slidee li.item3 .sum_area.slide04 li.achieve { background:url(../images/main/sum03_on.png) no-repeat 0px 40px; }
.visual .slidee li.item3 .sum_area.slide04 li span.sum_img {width:110px; height:81px;  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.50));  overflow:hidden; display:block; float:right;}
.visual .slidee li.item3 .sum_area.slide04 li p.sum_text {width:100px; color:#D9D9D9; text-align:center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); font-family:'NanumSquare', sans-serif; font-size: 12px; margin:5px;
font-style: normal; font-weight: 700; line-height: 20px; /* 166.667% */ letter-spacing: -0.3px; text-transform: uppercase; float:right;}
.visual .slidee li.item3 .sum_area.slide04 li.achieve span.sum_img {width:110px; height:81px;   border:1px solid #19BCFF;}
.visual .slidee li.item3 .sum_area.slide04 li.achieve p.sum_text{color:#19BCFF;}








.visual .slidee li.item4 .bg {
	background: url(../images/main/main04.jpg) no-repeat 50% 0;
-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover
}


/* 배너2 css수정 */
.visual .slidee li.item4 .tit_box {position:absolute; right:24px; top:670px; z-index:35; height:475px; width:640px; }
.visual .slidee li.item4 .tit_box h2 {color:#fff; font-size:72px; line-height:78px; font-weight:800; letter-spacing: -1.8px; text-align:right;  margin:97px 100px 0px 0px;}
.visual .slidee li.item4 .tit_box .main01_txt01 {float:right; color:#19BCFF; font-size:18px; line-height:26px; font-weight:700; margin-left:70px; transform:skew(-0.1deg); text-align:right; margin:0px 100px 0px 0px; }
.visual .slidee li.item4 .tit_box .main01_txt01 p { color:#fff; font-size:14px; font-weight:300; }
.visual .slidee li.item4 .tit_box .main01_txt02 {float:right; color:#fff; font-size:16px; line-height:24px; font-weight:400; margin-right:100px; margin-top:25px; transform:skew(-0.1deg); text-align:right; }


.visual .slidee li.item4 .sum_area { position: absolute; z-index:100;}
.visual .slidee li.item4 .sum_area.slide02 {bottom:63px; left:280px; display:table;}
.visual .slidee li.item4 .sum_area.slide02 li { width:135px; height:126px;  background:url(../images/main/sum_off.png) no-repeat 50px 114px; float:left;}
.visual .slidee li.item4 .sum_area.slide02 li img { vertical-align:top;}
.visual .slidee li.item4 .sum_area.slide02 li.achieve { background:url(../images/main/sum04_on.png) no-repeat 32px 114px; height:146px; }
.visual .slidee li.item4 .sum_area.slide02 li span.sum_img {width:110px; height:81px;  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.50));  overflow:hidden; display:block; float:left;}
.visual .slidee li.item4 .sum_area.slide02 li p.sum_text {width:100px; color:#D9D9D9; text-align:center; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); font-family:'NanumSquare', sans-serif; font-size: 12px; margin:5px;
font-style: normal; font-weight: 700; line-height: 20px; /* 166.667% */ letter-spacing: -0.3px; text-transform: uppercase; float:left;}
.visual .slidee li.item4 .sum_area.slide02 li.achieve span.sum_img {width:110px; height:81px;   border:1px solid #19BCFF;}
.visual .slidee li.item4 .sum_area.slide02 li.achieve p.sum_text{color:#19BCFF;}



@media (max-width: 1920px) {
.visual .slidee li.item1 .tit_box {width:467px; height:362px; position: absolute; left:60px; top: 215px; margin: auto 0; z-index: 35;}
.visual .slidee li.item1 .sum_area.slide01 {top:305px; right:57px; }


.visual .slidee li.item2 .sum_area.slide03 {bottom:10px; right:100px; display:table; width:550px;}
.visual .slidee li.item3 .tit_box {position:absolute; right:7px; top:380px; z-index: 35;  width:680px; height:457px; }
.visual .slidee li.item3 .sum_area.slide04 {top:310px; left:40px; width:186px;}

.visual .slidee li.item4 .tit_box {position:absolute; right:24px; top:470px; z-index:35; height:475px; width:640px; }
.visual .slidee li.item4 .sum_area.slide02 {bottom:13px; left:95px; display:table;}


}




.mobile_section02 {display:none;}
.mobile_section03 {display:none;}

.section02 {position: relative; width: 100%; height:100vh; min-width: 1000px; overflow:hidden; display:block;}
.innerCont {width:100%;height:100%; background: url(../images/main/bg02_img01.jpg) no-repeat 50% 0;
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position:absolute;
}



.innerCont .tit_art {position: absolute; top:100px; left:100px;  }
.innerCont .tit_art p {position: absolute; top:100px; left:0px; font-size:15px;  color:#717171;  height:72px;  font-weight:400; }

.innerCont .arrowbox { position: absolute; top:288px; left:100px;  width:166px; height:48px; line-height:48px; cursor: pointer; 
 border-radius:24px; border:2px solid #1184EF; text-align:center;  font-size: 18px; font-weight: 800; color:#fff;
letter-spacing: -0.45px; background: linear-gradient(270deg, #1184EF 0%, #19BCFF 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}


.innerCont .arrowbox:hover {   width:168px; height:50px; cursor: pointer; border-radius: 24px; line-height:50px;

background: linear-gradient(270deg, #1184EF 0%, #19BCFF 100%); color:#FFF;  z-index:9999999;  background-clip: content-box;
-webkit-background-clip: content-box;
-webkit-text-fill-color: #fff;}


.inner_iso_layer{width:0; height:0; background:#c0eff2; border-radius: 50%; position:absolute;}
.inner_iso {width:0; height:0; background: linear-gradient(180deg, #D6F0FF 0%, #F8F8FA 41.78%); position:absolute;}

















/***  2017.06.05  
.swiper-wrapper {position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.swiper-slide {position: absolute; width:100%;height:100%; text-align:center;font-size:18px;background:#fff;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;overflow:hidden;}
.swiper-slide .inner01 {width:100%;height:100%;background: url(../images/main/section02_bg01.jpg) no-repeat 50% 0; 
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}



.swiper-slide .inner02 {width:100%;height:100%;background: url(../images/main/section02_bg02.jpg) no-repeat 50% 0; 
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}



.swiper-slide .inner03 {width:100%;height:100%;
	position: relative;
	background: url(../images/main/section02_bg02.jpg) no-repeat 50% 0; 
	-webkit-background-size: cover;
	-khtml-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

.swiper-slide .inner03 .f3 {position: absolute; top:110px; left:120px; width:1376px; height:197px;}
.swiper-slide .inner03 .f3 span.Line_f3 {position: absolute; bottom:0px; left1:93px; width:0; height:99px; right:0; background: url(../images/main/3f_line.png) no-repeat right bottom;}
.swiper-slide .inner03 .f3 span.Text_f3 {position: absolute; top:50px; left:0px;}
.swiper-slide .inner03 .f3 span.Img_f3 {position: absolute; bottom:0px; left:215px;}


.swiper-slide .inner03 .f2 {position: absolute; top:326px; left:120px; width:1330px; height:215px;}
.swiper-slide .inner03 .f2 span.Line_f2 {position: absolute; bottom:0px; left1:93px; width:0; height:215px; right:0; background: url(../images/main/2f_line.png) no-repeat right bottom;}
.swiper-slide .inner03 .f2 span.Text_f2 {position: absolute; top:50px; left:0px;}
.swiper-slide .inner03 .f2 span.Img_f2 {position: absolute; bottom:0px; left:215px;}


.swiper-slide .inner03 .f1 {position: absolute; top:409px; left:120px; width:1351px; height:402px;}
.swiper-slide .inner03 .f1 span.Line_f1 {position: absolute; top:0px; left1:93px; width:0; height:365px; right:0; background: url(../images/main/1f_line.png) no-repeat right bottom;}
.swiper-slide .inner03 .f1 span.Text_f1 {position: absolute; top:210px; left:0px;}
.swiper-slide .inner03 .f1 span.Img_f1 {position: absolute; bottom:0px; left:215px;}

.swiper-slide .inner03 .f3 span, .swiper-slide .inner03 .f2 span, .swiper-slide .inner03 .f1 span {display: none;}
 ***/












/*** SVG 애니메이션 효과 관련 CSS - 메인상단배너 ***/
.fadeAnimate { opacity: 0; position: relative; top: 100px; }
.svg_figure1, .svg_figure2{ position: absolute; top: 0; left: 0; display: none; }
.svg_figure3 { position: absolute; top:0px; left:166px; padding: 0px; display: none; }
.svg_figure4 { position: absolute; top:0px; left:190px; padding: 0px; display: none; }


@media (max-width: 1920px) {

}




/*** MAIN SECTION03 ***/
.section03 {position: relative; width: 100%;   height:100vh;  }
.first-Area {position:relative; top:0;  left:0; width:100%; margin:0 auto; height:100%; }
/*.left_line01{position:absolute; top:0; left:0; width: 103px; height: 100%; background: url(../images/main/section03_line01.png) no-repeat 20px 0px;}*/
.In_Planning01 {position: absolute; width:100%; height:100%; background: url(../images/main/img_first02.png) no-repeat 640px 338px; background-size:1077px 586px; z-index: 3; opacity:1;}
.In_Planning02 {position: absolute; width:100%; height:100%; background: url(../images/main/img_first02.png) no-repeat 640px 338px; background-size:1077px 586px; z-index: 3; opacity:1;}
.In_Planning03 {position: absolute; width:100%; height:100%; background: url(../images/main/img_first02.png) no-repeat 640px 338px; background-size:1077px 586px; z-index: 3; opacity:1;}

.In_Planning03 span.text-ap01 {position:absolute; top:90px; left:100px; z-index:1; width:600px; height:280px;}


.In_Planning03 .plann_lineimg {position:absolute; z-index:100; left:683px; top:130px; }
.In_Planning03 .plann_effectimg {position:absolute; z-index:100; left:140px; top:70px;  }
.In_Planning03 .plann_effectimg01 {position:absolute; z-index:100; left:100px; top:275px; width:992px; height:600px; }
.In_Planning03 .plann_effectimg_left{position:absolute; right:0; width:992px; height:600px;  background:url(../images/main/effect_left01.png) no-repeat right top;}
.In_Planning03 .plann_effectimg02 {position:absolute; z-index:100; right:100px; top:292px; width:447px; height:537px; }
.In_Planning03 .plann_effectimg_right{ position:absolute; width:447px; height:537px; background:url(../images/main/effect_right01.png) no-repeat left top; background-size:447px 537px;}



.plan_lineWrap {position:relative; top:0px;  left:0; width:100%; margin:0 auto; height:580px; z-index:10; }
/*.left_line02{position:absolute; top:0; left:0; width: 103px; height:580px; background: url(../images/main/section03_line02.png) no-repeat 10px 0px;}*/
.plan_line {position:absolute; top:-110px;  left:0;  width:100%; height:900px; background: url(../images/main/plan_line.png) no-repeat 60% 0px; }
.plan_Img {position:absolute; top:45px;  left:410px; width:1006px; height:414px; }
.plan_text{position:absolute; right:0; width:1006px; height:100%; background: url(../images/main/plan_text.png) no-repeat 0 0;}



.second-Area {position:relative; top:0;  left:0; width:100%; margin:0 auto; height:100%; }
/*.left_line03{position:absolute; top:0; left:0; width:103px; height: 100%; background: url(../images/main/section03_line03.png) no-repeat 10px 0px;}*/
.In_Landscape { position: relative; width:100%; height:100%; background: url(../images/main/img_second01.png) no-repeat 636px 80px; }
.In_Landscape .scape_lineimg {position:absolute; z-index:100; left:370px; top:85px; }
.In_Landscape .scape_effectimg {position:absolute; z-index:100; left:130px; top:0px; }
.In_Landscape .scape_effectimg01 {position:absolute; z-index:100; left:100px; top:297px; width:673px; height:583px; }
.In_Landscape .scape_effectimg_left{position:absolute; right:0; width:673px; height:583px; background:url(../images/main/effect_left02.png) no-repeat right top; }
.In_Landscape .scape_effectimg02 {position:absolute; z-index:100; right:100px; top:332px; width:270px; height:389px; }
.In_Landscape .scape_effectimg_right{ position:absolute; width:270px; height:389px; background:url(../images/main/effect_right02.png) no-repeat left top; }

.In_Landscape span.text-ap02 {position:absolute; top:88px; left:100px; z-index:-1; width:580px; height:230px;}
.In_Landscape span.text-ap02 .artdc-txt2 { position:absolute; right:0; width:580px; height:100%; background1: url(../images/icon/artdc-txt2.gif) no-repeat right top; display:inline-block; }





.nature_lineWrap {position:relative; top:0px;  left:0; width:100%; margin:0 auto; height:610px; z-index:10; }
/*.left_line04{position:absolute; top:0; left:0; width: 115px; height: 610px; background: url(../images/main/section03_line04.png) no-repeat 40px 0px;}*/
.nature_line {position:absolute; top:-118px;   width:100%; height:768px;  background: url(../images/main/nature_line.png) no-repeat 80% 0px; }
.nature_Img {position:absolute; top:113px;  left:620px; z-index:100; width:839px; height:296px;}
.nature_text{position:absolute; right:0; width:839px; height:100%; background: url(../images/main/nature_text.png) no-repeat right 0;}




.third-Area {position:relative; top:0;  left:0; width:100%; margin:0 auto; height:100%; }
/*.left_line05{position:absolute; top:0; left:0; width: 72px; height: 100%; background: url(../images/main/section03_line05.png) no-repeat 16px 0px;}*/
.In_Design { position: relative; width:100%; height:100%; background: url(../images/main/img_third01.png) no-repeat 580px 86px;  background-size:1119px 836px;} 
.In_Design .design_effectimg {position:absolute; z-index:100; left:50px; top:85px;  }
.In_Design .design_effectimg01 {position:absolute; z-index:100; left:100px; top:320px; width:965px; height:571px; }
.In_Design .design_effectimg_left{position:absolute; right:0; width:965px; height:571px; background:url(../images/main/effect_left03.png) no-repeat right top; }
.In_Design .design_effectimg02 {position:absolute; z-index:100; right:100px; top:333px; width:400px; height:342px; }
.In_Design .design_effectimg_right{ position:absolute; width:400px; height:342px; background:url(../images/main/effect_right03.png) no-repeat left top; }

.In_Design span.text-ap03 {position:absolute; top:90px; left:100px; z-index:-1; width:580px; height:230px; }
.In_Design span.text-ap03 .artdc-txt3 { position:absolute; right:0; width:580px; height:100%; background1: url(../images/icon/artdc-txt3.gif) no-repeat right top; display:inline-block; }




.facility_lineWrap {position:relative; top:0px;  left:0; width:100%; margin:0 auto; height:610px; z-index:10; }
/*.left_line06{position:absolute; top:0; left:0; width: 110px; height: 610px; background: url(../images/main/section03_line06.png) no-repeat 36px 0px;}*/
.facility_line {position:absolute; top:-110px;   width:100%; height:768px;  background: url(../images/main/Facility_line.png) no-repeat 70% 0px; }
.facility_Img {position:absolute; top:153px;  left:500px; z-index:100; width:916px; height:225px;}
.facility_text{position:absolute; right:0; width:916px; height:100%; background: url(../images/main/Facility_text.png) no-repeat right 0;}




.fourth-Area {position:relative; top:0;  left:0; width:100%; margin:0 auto; height:100%; }
/*.left_line07 {position:absolute; top:0; left:0; width: 136px; height: 100%; background: url(../images/main/section03_line07.png) no-repeat 7px 0px;}*/
.In_Product {position: relative; width:100%; height:100%; background: url(../images/main/img_fourth01.png) no-repeat 590px 86px; background-size:1119px 836px;}
.In_Product .product_wbox {position:absolute; z-index:100; left:132px; top:240px;  }

.In_Product .product_effectimg span.right_tit  {position:absolute; z-index:100; right:100px;  top:305px; width:412px; height:557px; }
.In_Product .product_effectimg span.right_tit .product_effectimg_right{position:absolute; width:412px; height:557px; background:url(../images/main/fourth_right_tit.png) no-repeat left top;}
.In_Product .product_effectimg span.left_tit  {position:absolute; z-index:100; left:100px;  top:347px; width:1035px; height:527px; }
.In_Product .product_effectimg span.left_tit .product_effectimg_left{position:absolute; right:0; width:1035px; height:100%; background:url(../images/main/fourth_left_tit.png) no-repeat right top;}
.In_Product .product_effectimg span.effect01 {position:absolute; z-index:100; right:0px;  top:0px;  } 
.In_Product .product_effectimg span.effect02 {position:absolute; z-index:100; right:100px;  top:750px;  } 
.In_Product .product_effectimg span.effect03 {position:absolute; z-index:100; left:50px;  top:580px;  } 

.In_Product span.text-ap04 {position:absolute; top:90px; left:100px; z-index:-1; width:580px; height:146px;}
.In_Product span.text-ap04 .artdc-txt4 { position:absolute; right:0; width:574px; height:100%; background1: url(../images/icon/artdc-txt4.gif) no-repeat right top; display:inline-block; }




.graphic_lineWrap {position:relative; top:0px; left:0; width:100%; margin:0 auto; height:610px; z-index:10;}
/*.left_line08{position:absolute; top:0; left:0; width: 78px; height: 610px; background: url(../images/main/section03_line08.png) no-repeat 15px 0px;}*/
.graphic_line {position:absolute; top:-110px;  width:100%; height:768px;  background: url(../images/main/graphic_line.png) no-repeat 70% 0px; }
.graphic_Img {position:absolute; top:165px; left:595px; z-index:100; width:959px; height:305px;}
.graphic_text{position:absolute; right:0; width:959px; height:100%; background: url(../images/main/graphic_text.png) no-repeat right 0;}



.fifth-Area {position:relative; top:0;  left:0; width:100%; margin:0 auto; height:100%; padding-bottom:100px;}
/*.left_line09 {position:absolute; top:0; left:0; width: 60px; height: 100%; background: url(../images/main/section03_line09.png) no-repeat 18px 0px;  z-index:10;}*/
.In_Mulit { position: relative; width:100%; height:100%; background: url(../images/main/img_fifth01.png) no-repeat 632px 122px; background-size:1079px 821px;} 

.In_Mulit .mulit_cloud {position:absolute; z-index:100;  }
.In_Mulit .mulit_cloud span.cloud-effect01 {position:absolute; z-index:100; left:450px;  top:300px;}
.In_Mulit .mulit_cloud span.cloud-effect02 {position:absolute; z-index:100; left:700px;  top:100px;}
.In_Mulit .mulit_cloud span.cloud-effect03 {position:absolute; z-index:100; right:280px;  top:130px;}


.In_Mulit .mulit_lineimg {position:absolute; z-index:100; left:0px; top:20px; width:1900px; }
.In_Mulit .mulit_effectimg span.Mulite-effect01 {position:absolute; z-index:100; left:100px;  top:330px;  }
.In_Mulit .mulit_effectimg span.Mulite-effect02 {position:absolute; z-index:100; right:50px;  top:110px;  }
.In_Mulit .mulit_effectimg span.Mulite-effect03 {position:absolute; z-index:100; right:100px;  top:264px;  }
.In_Mulit .mulit_effectimg span.Mulite-carmer01 {position:absolute; z-index:100; right:200px;  top:280px;  }
.In_Mulit span.text-ap05 {position:absolute; top:90px; left:100px; z-index:-1; width:580px; height:310px;}
.In_Mulit span.text-ap05 .artdc-txt5 { position:absolute; right:0; width:574px; height:100%; background1: url(../images/icon/artdc-txt5.gif) no-repeat right top; display:inline-block; }


.demo a {
	position: absolute;
	bottom: -15px;
	left: 48.5%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font : normal 400 20px/1 'Josefin Sans', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
}
.demo a:hover {
	opacity: .5;
}


#section07 a {
	padding-top: 100px;
}
#section07 a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb07 2s infinite;
	animation: sdb07 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
#section07 a span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#section07 a span:nth-of-type(2) {
	top: 16px;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}
#section07 a span:nth-of-type(3) {
	top: 32px;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
@-webkit-keyframes sdb07 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb07 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}







#footer {width: 100%;  background:#3e3e3e;  height:220px;  }
#footer .inner {width:1600px; margin:0 auto;  overflow:hidden; position:relative;}
#footer .inner .foot_logo {position: absolute; right:0; top:35px;}
#footer .inner .address {padding:40px 0px 20px 0px; font-family:'Noto Sans KR', Sans-serif;  border-bottom:1px solid #5b5b5b; }
#footer .inner .address ul {line-height:24px;}
#footer .inner .address li {padding:0px 15px; color:#d7d7d7; font-size:14px; display:inline; background:url(../images/main/foot_line.jpg) no-repeat 0px 7px;}
#footer .inner .address li:first-child {padding-left:0px; background:none;}
#footer .inner .address p.eng {padding-top:5px; font-family:'Noto Sans KR', Sans-serif; font-size:14px;  color:#d7d7d7;}
#footer .inner .copy {float:left; padding-top:10px; font-family:'Noto Sans KR', Sans-serif; color:#9d9d9d; }

#m_footer {display:none; }


.menuArea {z-index:100; position: absolute; left: 170px; top: 200px; display:block;}
/*Menu toggle button*/
#menu-btn{ position: absolute; z-index:100; padding: 1.5em; width:100px; height:300px;}
/*Cursor on toggle button hover*/
#menu-btn:hover{ cursor: pointer; }
/*Changing color of hamburger lines on hover*/
#menu-btn:hover .menu-line{ background-color: #999999; }



/*Styles for the hamburger lines*/
.menu-btn-line{ height: .5em; background-color: #00FFCA; margin-bottom: .5em;}
/*No margin-bottom for last hamburger line.*/
.menu-btn-line:last-child{ margin-bottom: 0; }

/*List container*/
#menu  { position: absolute; top: 50px; left: 0px; width: 10em; padding: 1em; z-index:100; overflow:hidden;}
/*List*/
#menu ul{ padding: 0; margin: 0;   height:300px;}
/*List items*/
#menu ul li a { list-style-type: none; left: 0; line-height:36px; color: #fff; transition: all .3s ease-out; font-size:16px; font-weight:600; display:block; }
/*Subscribe link*/

/*Cursor and text undelrine on hover*/
#menu ul li a:hover{cursor: pointer; text-decoration: underline; color: #ffea87;}


.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}
.fa-2x{font-size:2em}




.sitemenu-btn {
    position: absolute;
    top: 32px;
    right: 100px;
    z-index: 999;
    display: inline;
    font-size: 32px;
	width:20px;
	height:17px;
}
.menu-btn a {
    display: inline-block;
    text-decoration: none;
    /* safari hack */
}
.btn-open:after {
    color: #333;
    content: "\f394";
    font-family: "Ionicons";
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
    color: #34B484;
}
.btn-close:after {
    color: #fff;
    content: "\f2d7";
    font-family: "Ionicons";
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
    color: #34B484;
}
/* OVERLAY */
.overlay {
    position: fixed;
    top: 0;
    z-index: 9999;
    display: none;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #333;
}
.overlay .menu {
    margin: 10% auto;
    width: 80%;
}
.overlay .menu ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
.overlay .menu ul li {
    float: left;
    padding: 20px 0;
    width: 25%;
    list-style: none;
    text-align: center;
    text-transform: uppercase;
}
.overlay .menu ul li a {
    color: #3fb0e8;
    font-weight: bold;
    font-size: 24px;
}
.overlay .menu ul ul {
    margin-top: 50px;
}
.overlay .menu ul ul li {
    position: relative;
    float: none;
    margin: 0;
    width: 100%;
    border: 0;
}
.overlay .menu ul ul li a {
    color: #fff;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 16px;
}
.overlay .menu ul ul li a:hover {
    color: #3fb0e8;
}


.cd-modal-close {
	position: fixed;
	z-index: 1;
	top: 20px;
	right: 5%;

	height: 50px;
	width: 50px;
	border-radius: 50%;
	
	background: rgba(#000, .3) url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close_copy.svg) no-repeat center center;
	
	/* image replacement */
	overflow: hidden;c
	text-indent: 100%;
	white-space: nowrap;

	visibility: hidden;
	opacity: 0;
	@include transform(translateZ(0));
	@include transform(scale(0));
	@include transition(transform .3s 0s, visibility 0s .3s, opacity .3s 0s);

	.no-touch &:hover {
		background-color: rgba(#000, .5);
	}

}



.left_area1 {width:472px; height:100vh; background: linear-gradient(15deg, #1DA5C7 0%, #6DE5B9 100%); float:left; box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.25);}
.left_area1 .left_tit {padding:80px 0px 0px 200px; background:url(../images/main/left_icon1.png) no-repeat 80px 80px; background-size:100px 80px; color:#fff; font-size:26px; font-weight:800; line-height:36px; 
letter-spacing:-0.65px; float:left; width:300px; height:115px;}


.slider a {background-position: center; background-size: cover;  display: block; width: 472px; height: 194px; float:left;}
.w_box {width: 272px; height:95px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.50); float:left; margin:30px 0px 0px 80px; color:#fff; font-size:16px; font-weight: 800; line-height: 24px; padding:20px; transform:skew(-0.1deg);}
.w_box p{font-size: 14px; font-style: normal; font-weight: 700; line-height: 22px; padding-top:5px;  }


.right_area1 h2.tit_h2 {  margin-top:95px; color:#111; text-align:center; font-size: 50px; font-style: normal; font-weight: 800; line-height:60px; letter-spacing: -1.25px;}
.right_area1 h2.tit_h2 p {font-size: 36px; margin-top:25px; line-height:40px;}
.right_area1 h2.tit_h2 p.h2_txt {color:#767676; text-align:center; font-size:16px; font-style:normal; font-weight:700; line-height:24px; letter-spacing:-0.4px; text-transform:uppercase; transform:skew(-0.1deg);}
.right_area1 span.object_img1 {position:absolute; top:40px; left:532px;}
.right_area1 span.object_img2 {position:absolute; top:256px; right:80px;}

.right_Cont1 {  position:relative; background: url(../images/main/object_1.png) no-repeat center 80px; background-size:768px 550px; height:640px; margin-left:472px;}
.right_Cont1 span.Cont1_left { position:absolute; top:140px; left:455px;}
.right_Cont1 span.Cont1_right { position:absolute; top:146px; left:1230px;}


@media (max-width: 1920px) {
.right_Cont1 span.Cont1_left { position:absolute; top:140px; left:132px;}
.right_Cont1 span.Cont1_right { position:absolute; top:146px; left:902px;}

}




.left_area2 {width:472px; height:100vh; background: linear-gradient(15deg, #5669D1 0%, #7FCAEB 100%); float:left; box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.25);}
.left_area2 .left_tit {padding:105px 0px 0px 200px; background:url(../images/main/left_icon2.png) no-repeat 80px 80px; background-size:100px 80px; color:#fff; font-size:26px; font-weight:800; line-height:36px; 
letter-spacing:-0.65px; float:left; width:300px; height:90px;}




.right_area2 h2.tit_h2 {  margin-top:95px; color:#111; text-align:center; font-size: 50px; font-style: normal; font-weight: 800; line-height:60px; letter-spacing: -1.25px;}
.right_area2 h2.tit_h2 p {font-size: 36px; margin-top:25px; line-height:40px;}
.right_area2 h2.tit_h2 p.h2_txt {color:#767676; text-align:center; font-size:16px; font-style:normal; font-weight:700; line-height:24px; letter-spacing:-0.4px; text-transform:uppercase; transform:skew(-0.1deg);}
.right_area2 span.object_img3 {position:absolute; top:217px; left:536px;}
.right_area2 span.object_img4 {position:absolute; top:78px; right:96px;}

.right_Cont2 {  position:relative; background: url(../images/main/object_2.png) no-repeat center 60px; background-size:796px 576px;  height:640px; margin-left:472px;}
.right_Cont2 span.Cont2_left { position:absolute; top:140px; left:470px;}
.right_Cont2 span.Cont2_right { position:absolute; top:146px; left:1286px;}


@media (max-width: 1920px) {
.right_Cont2 span.Cont2_left { position:absolute; top:140px; left:145px;}
.right_Cont2 span.Cont2_right { position:absolute; top:146px; left:975px;}

}





.left_area3 {width:472px; height:100vh; background:linear-gradient(15deg, #7F5ADB 0%, #D884ED 100%); float:left; box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.25);}
.left_area3 .left_tit {padding:105px 0px 0px 200px; background:url(../images/main/left_icon3.png) no-repeat 80px 80px; background-size:100px 80px; color:#fff; font-size:26px; font-weight:800; line-height:36px; 
letter-spacing:-0.65px; float:left; width:300px; height:90px;}


.right_area3 h2.tit_h2 {  margin-top:95px; color:#111; text-align:center; font-size: 50px; font-style: normal; font-weight: 800; line-height:60px; letter-spacing: -1.25px;}
.right_area3 h2.tit_h2 p {font-size: 36px; margin-top:25px; line-height:40px;}
.right_area3 h2.tit_h2 p.h2_txt {color:#767676; text-align:center; font-size:16px; font-style:normal; font-weight:700; line-height:24px; letter-spacing:-0.4px; text-transform:uppercase; transform:skew(-0.1deg);}
.right_area3 span.object_img5 {position:absolute; top:52px; left:532px;}
.right_area3 span.object_img6 {position:absolute; top:284px; left:660px;}
.right_area3 span.object_img7 {position:absolute; top:225px; right:60px;}


.right_Cont3 {  position:relative; background: url(../images/main/object_3.png) no-repeat center 80px; background-size:768px 550px; height:640px; margin-left:472px;}
.right_Cont3 span.Cont1_left { position:absolute; top:320px; left:490px;}
.right_Cont3 span.Cont1_right { position:absolute; top:146px; left:1192px;}



@media (max-width: 1920px) {
.right_Cont3 span.Cont1_left { position:absolute; top:320px; left:170px;}
.right_Cont3 span.Cont1_right { position:absolute; top:146px; left:902px;}

}







.left_area4 {width:472px; height:100vh; background:linear-gradient(15deg, #DB4A80 0%, #F2868A 100%); float:left; box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.25);}
.left_area4 .left_tit {padding:105px 0px 0px 200px; background:url(../images/main/left_icon4.png) no-repeat 80px 80px; background-size:100px 80px; color:#fff; font-size:26px; font-weight:800; line-height:36px; 
letter-spacing:-0.65px; float:left; width:300px; height:90px;}


.right_area4 h2.tit_h2 {  margin-top:95px; color:#111; text-align:center; font-size: 50px; font-style: normal; font-weight: 800; line-height:60px; letter-spacing: -1.25px;}
.right_area4 h2.tit_h2 p {font-size: 36px; margin-top:25px; line-height:40px;}
.right_area4 h2.tit_h2 p.h2_txt {color:#767676; text-align:center; font-size:16px; font-style:normal; font-weight:700; line-height:24px; letter-spacing:-0.4px; text-transform:uppercase; transform:skew(-0.1deg);}
.right_area4 span.object_img8 {position:absolute; top:51px; left:540px;}
.right_area4 span.object_img9 {position:absolute; top:231px; right:75px;}


.right_Cont4 {  position:relative; background: url(../images/main/object_4.png) no-repeat center 70px; background-size:768px 550px; height:640px; margin-left:472px;}
.right_Cont4 span.Cont1_left { position:absolute; top:138px; left:457px;}
.right_Cont4 span.Cont1_right { position:absolute; top:115px; left:1220px;}


@media (max-width: 1920px) {
.right_Cont4 span.Cont1_left { position:absolute; top:138px; left:170px;}
.right_Cont4 span.Cont1_right { position:absolute; top:146px; left:902px;}

}



.left_area5 {width:472px; height:100vh; background: linear-gradient(15.39deg, #FF6B00 0%, #FFB016 100%); float:left; box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.25);}
.left_area5 .left_tit {padding:105px 0px 0px 200px; background:url(../images/main/left_icon5.png) no-repeat 80px 80px; background-size:100px 80px; color:#fff; font-size:26px; font-weight:800; line-height:36px; 
letter-spacing:-0.65px; float:left; width:300px; height:90px;}


.right_area5 h2.tit_h2 {  margin-top:95px; color:#111; text-align:center; font-size: 50px; font-style: normal; font-weight: 800; line-height:60px; letter-spacing: -1.25px;}
.right_area5 h2.tit_h2 p {font-size: 36px; margin-top:25px; line-height:40px;}
.right_area5 h2.tit_h2 p.h2_txt {color:#767676; text-align:center; font-size:16px; font-style:normal; font-weight:700; line-height:24px; letter-spacing:-0.4px; text-transform:uppercase; transform:skew(-0.1deg);}
.right_area5 span.object_img10 {position:absolute; top:238px; left:550px;}
.right_area5 span.object_img11 {position:absolute; top:65px; right:444px;}
.right_area5 span.object_img12 {position:absolute; top:280px; right:105px;}


.right_Cont5 {  position:relative; background: url(../images/main/object_5.png) no-repeat center 80px; background-size:768px 550px;  height:640px; margin-left:472px;}
.right_Cont5 span.Cont1_left { position:absolute; top:140px; left:155px;}
.right_Cont5 span.Cont1_right { position:absolute; top:326px; left:822px;}




.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(102, 102, 102, 0.7); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.3s;
  animation-name: fadeIn;
  animation-duration: 0.3s
}

/* Modal Content */
.modal-content {

  position: fixed;
  bottom: 0;
  background: linear-gradient(180deg, #D6F0FF 0%, #F8F8FA 41.78%); position:absolute;
  width: 100%;
  height:100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.3s;
  animation-name: slideIn;
  animation-duration: 0.3s;
  overflow:hidden;
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin:30px 30px 0px 0px;
  z-index:999999;
  position:relative;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #FFC600;
  border-radius: 16px 16px 0px 0px;
  color: white;
  
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #FFC600;
  color: white;
}


/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -100%; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -100%; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}












.actionTxtType6 {}
.actionTxtType6 .txt_move 
{width:500px; position: relative; top:40px; left:120px; display:inline-block; transform:translateY(12px);
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:0; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}
.actionTxtType6 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType6 .txt_move.txt2 {transition-delay:.2s; -webkit-transition-delay:.2s; -moz-transition-delay:.2s;}
.actionTxtType6 .txt_move.txt3 {transition-delay:.3s; -webkit-transition-delay:.3s; -moz-transition-delay:.3s;}
.actionTxtType6 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType6:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1;}
.actionTxtType6:hover .txt_move:after {opacity:1;}







.isomatric {  height:100vh; position:relative; }
.isomatric .land_archi {position:absolute; top:72px; left:50%; margin-left:-766px;  z-index: 9; }
.isomatric .land_tit {position: relative;}
.isomatric .land_tit span.tit01 {position: absolute; top:220px; left:232px; width:317px; height:131px; }
.isomatric .land_tit span.tit02 {position: absolute; top:110px; right:530px; width:270px; height:170px;}
.isomatric .land_tit span.tit03 {position: absolute; top:320px; right:160px; width:136px; height:195px;}
.isomatric .land_tit span.tit04 {position: absolute; top:710px; right:550px; width:140px; height:215px;}
.isomatric .land_tit span.tit05 {position: absolute; top:755px; left:250px; width:302px; height:158px;}
.isomatric .land_tit span.tit06 {position: absolute; top:755px; left:140px; width:275px; height:186px;}



.isomatric .land_tit span.bgg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}


.isomatric .land_tit .tit01:hover ~ .bgg { background: linear-gradient(180deg, #98D8FC 0%, #E1EDFF 41.78%); z-index: 1;}
.isomatric .land_tit .tit02:hover ~ .bgg { background: linear-gradient(180deg, #98D8FC 0%, #E1EDFF 41.78%); z-index: 1;}
.isomatric .land_tit .tit03:hover ~ .bgg { background: linear-gradient(180deg, #98D8FC 0%, #E1EDFF 41.78%); z-index: 1;}
.isomatric .land_tit .tit04:hover ~ .bgg { background: linear-gradient(180deg, #98D8FC 0%, #E1EDFF 41.78%); z-index: 1;}
.isomatric .land_tit .tit05:hover ~ .bgg { background: linear-gradient(180deg, #98D8FC 0%, #E1EDFF 41.78%); z-index: 1;}



.isomatric .land_tit .tit01 {position:absolute; top:220px; left:232px; width:317px; height:135px; background:url(../images/main/isomatric_tit01.png) no-repeat 0 0; z-index: 9; }
.isomatric .land_tit .tit01:hover {background:url(../images/main/isomatric_tit01_o.png) no-repeat 0 0; z-index: 99; }
.isomatric .land_tit .tit01>.actionTxtType1 {display: none;}
.isomatric .land_tit .tit01:hover>.actionTxtType1 {display: block; position: absolute; top:130px; left:0px; border:1px solid #1184EF; background:#fff; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
padding:20px; font-size:24px; font-weight:800; line-height:32px; color:#1184EF; transform:translateY(12px);  float:left;
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:1; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}
.actionTxtType1 {width:410px; height:310px; }
.actionTxtType1 .txt_move p.m_pop_p {float:left; margin-top:10px;}
.actionTxtType1 .txt_move p.m_pop_t {color: #767676; font-size: 16px; font-weight: 700;  line-height:24px;  transform:skew(-0.1deg); margin-bottom:15px; float:left; margin-top:10px;}
.actionTxtType1 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType1 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType1:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1; }
.actionTxtType1:hover .txt_move:after {opacity:1;}



.isomatric .land_tit .tit02 {position:absolute; top:110px; right:530px; width:210px; height:170px; background:url(../images/main/isomatric_tit02.png) no-repeat 0 0; z-index: 9;}
.isomatric .land_tit .tit02:hover {background:url(../images/main/isomatric_tit02_o.png) no-repeat 0 0; z-index: 99;}
.isomatric .land_tit .tit02>.actionTxtType2 {display: none;}
.isomatric .land_tit .tit02:hover>.actionTxtType2 {display: block; position: absolute; top:130px; left:-250px; border:1px solid #1184EF; background:#fff; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
padding:20px; font-size:24px; font-weight:800; line-height:32px; color:#1184EF; transform:translateY(12px);  float:left;
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:1; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}
.actionTxtType2  {width:410px; height:310px;}
.actionTxtType2 .txt_move p.m_pop_p {float:left; margin-top:10px;}
.actionTxtType2 .txt_move p.m_pop_t {color: #767676; font-size: 16px; font-weight: 700;  line-height:24px;  transform:skew(-0.1deg); margin-bottom:15px; float:left; margin-top:10px;}
.actionTxtType2 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType2 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType2:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1;}
.actionTxtType2:hover .txt_move:after {opacity:1;}



.isomatric .land_tit .tit03 {position:absolute; top:320px; right:160px; width:136px; height:195px;  background:url(../images/main/isomatric_tit03.png) no-repeat 0 0; z-index: 9; }
.isomatric .land_tit .tit03:hover {background:url(../images/main/isomatric_tit03_o.png) no-repeat 0 0; z-index: 99;}
.isomatric .land_tit .tit03>.actionTxtType3 {display: none;}
.isomatric .land_tit .tit03:hover>.actionTxtType3 {display: block; position: absolute; top:-12px; left:-460px; border:1px solid #1184EF; background:#fff; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
padding:20px; font-size:24px; font-weight:800; line-height:32px; color:#1184EF; transform:translateY(12px);  float:left;
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:1; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}

.actionTxtType3 {width:410px; height:310px;}
.actionTxtType3 .txt_move p.m_pop_p {float:left; margin-top:10px;}
.actionTxtType3 .txt_move p.m_pop_t {color: #767676; font-size: 16px; font-weight: 700;  line-height:24px;  transform:skew(-0.1deg); margin-bottom:15px; float:left; margin-top:10px;}
.actionTxtType3 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType3 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType3:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1;}
.actionTxtType3:hover .txt_move:after {opacity:1;}



.isomatric .land_tit .tit04 {position:absolute;  top:710px; right:550px; width:140px; height:215px; background:url(../images/main/isomatric_tit04.png) no-repeat 0 0; z-index: 9;}
.isomatric .land_tit .tit04:hover {background:url(../images/main/isomatric_tit04_o.png) no-repeat 0 0; z-index: 99;}
.isomatric .land_tit .tit04>.actionTxtType4 {display: none;}
.isomatric .land_tit .tit04:hover>.actionTxtType4 {display: block; position: absolute; bottom:20px; left:-460px; border:1px solid #1184EF; background:#fff; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
padding:20px; font-size:24px; font-weight:800; line-height:32px; color:#1184EF; transform:translateY(12px);  float:left;
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:1; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}

.actionTxtType4 {width:410px; height:310px;}
.actionTxtType4 .txt_move p.m_pop_p {float:left; margin-top:10px;}
.actionTxtType4 .txt_move p.m_pop_t {color: #767676; font-size: 16px; font-weight: 700;  line-height:24px;  transform:skew(-0.1deg); margin-bottom:15px; float:left; margin-top:10px;}
.actionTxtType4 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType4 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType4:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1;}
.actionTxtType4:hover .txt_move:after {opacity:1;}




.isomatric .land_tit .tit05 {position:absolute; top:755px; left:250px; width:302px; height:158px; background:url(../images/main/isomatric_tit05.png) no-repeat 0 0; z-index: 9;}
.isomatric .land_tit .tit05:hover {background:url(../images/main/isomatric_tit05_o.png) no-repeat 0 0; z-index: 99;}
.isomatric .land_tit .tit05>.actionTxtType5 {display: none;}
.isomatric .land_tit .tit05:hover>.actionTxtType5 {display: block; position: absolute; bottom:150px; left:0px; border:1px solid #1184EF; background:#fff; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px);
padding:20px; font-size:24px; font-weight:800; line-height:32px; color:#1184EF; transform:translateY(12px);  float:left;
-webkit-transform:translateY(12px); -moz-transform:translateY(12px); opacity:1; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; z-index:10001;}



.actionTxtType5 {width:410px; height:310px;}
.actionTxtType5 .txt_move p.m_pop_p {float:left; margin-top:10px;}
.actionTxtType5 .txt_move p.m_pop_t {color: #767676; font-size: 16px; font-weight: 700;  line-height:24px;  transform:skew(-0.1deg); margin-bottom:15px; float:left; margin-top:10px;}
.actionTxtType5 .txt_move.txt1 {transition-delay:.1s; -webkit-transition-delay:.1s; -moz-transition-delay:.1s;}
.actionTxtType5 .txt_move:after {position:absolute; right:0; display:block; content:''; opacity:0; transition:opacity .1s .7s; -webkit-transition:opacity .1s .7s; -moz-transition:opacity .1s .7s;}
.actionTxtType5:hover .txt_move {transform:translateY(0); -webkit-transform:translateY(0); -moz-transform:translateY(0); opacity:1;}
.actionTxtType5:hover .txt_move:after {opacity:1;}


.isomatric .cloudArea {position: relative;  z-index: 9; }
.isomatric .cloudArea span.cloud01 {position: absolute; top:48px; right:137px;} 
.isomatric .cloudArea span.cloud02 {position: absolute; top:536px; left:20px;} 
.isomatric .cloudArea span.cloud03 {position: absolute; top:730px; right:53px;} 
.isomatric .cloudArea span.cloud04 {position: absolute; top:730px; right:53px;} 
.isomatric .x-btn {position: absolute; top:30px; right:30px; width:50px; height:50px; cursor:pointer; }