@charset "utf-8";

.area_aside{position:fixed; top:50%; left:calc(-35% + 35px); z-index:80; width:35%; padding:15px 0px; transform:rotate(-90deg) translateX(40%); transform-origin:100% 0; transition:all 0.5s ease;}
.area_aside *{transition:all 0.5s ease;}
.area_aside ul:after{content:''; display:block; clear:both;}
.area_aside ul > li{float:right; width:25%; text-align:center;}
.area_aside ul > li > a{display:inline-block; padding:3px 5px; font-size:17px; color:#333; letter-spacing:0.5px; transition:all 0.3s ease-in-out;}
.area_aside ul > li > a:after{content:''; display:block; width:100%; height:2px; background:#3951cb; transform:scaleX(0); transform-origin:0 0; transition:all 0.3s ease-in-out;}
.area_aside ul > li.active > a{color:#3951cb;}
.area_aside ul > li.active > a:after{transform:scaleX(1);}

.area_footer{position:fixed; bottom:30px; left:0px; z-index:91; width:100%; box-sizing:border-box; padding:0 40px;}
.area_footer p{color:#333; transition:all 0.3s ease;}
.area_footer p + p{position:absolute; right:40px; bottom:0px;}
.area_footer.active p{color:#fff; transition-delay:0.8s;}
.area_footer.inactive p{transition-delay:0.8s;}

#fullpage div[class^="area_"]{height:100%; min-height:860px;}
#fullpage div[class^="area_"] .object{position:absolute; top:0px; left:0px; z-index:-1; width:100%; height:100%;}
#fullpage div[class^="area_"] .object i{float:left; width:calc(100% / 8); height:100%; box-sizing:border-box; border-right:1px solid #e3e3e3;}
#fullpage div[class^="area_"] .object i:last-child{border-right-width:0px;}
#fullpage div[class^="area_"] .object i:nth-of-type(4){border-color:transparent;}
#fullpage div[class^="area_"] .txt{position:absolute; top:50%; z-index:52; font-family:'Righteous', Sans-serif; font-size:140px; color:#333; letter-spacing:-0.5px; line-height:0.9em; transform:translateY(-70%); transition:all 0.5s ease;}
#fullpage div[class^="area_"] .txt .wordAni{display:block;}
#fullpage div[class^="area_"] .txt .wordAni span{display:inline-block; perspective:400px;}
#fullpage .section .object_txt{position:absolute; top:55px; left:0px; width:100%; z-index:1;}
#fullpage .section .object_txt i{display:block; float:left; width:calc(100% / 8); height:17px; transform:rotateY(90deg); transform-origin:0 0; transition:all 0.5s ease;}
#fullpage .section.active .object_txt i{transform:rotateY(0deg) !important;}
#fullpage .section.active .object_txt i:nth-of-type(3){transition-delay:0.8s;}
#fullpage .section.active .object_txt i:nth-of-type(4){transition-delay:1s;}
#fullpage .section.active .object_txt i:nth-of-type(5){transition-delay:1.2s;}
#fullpage .section.active .object_txt i:nth-of-type(6){transition-delay:1.4s;}
#fullpage .section.active .object_txt i:nth-of-type(7){transition-delay:1.6s;}

.area_about:before,
.area_about:after{content:''; display:block; position:absolute; top:0px; z-index:-2;  width:50%; height:100%;}
.area_about:before{left:0px; background:#f3f3f3;}
.area_about:after{right:0px; background:#fff;}
.area_about .object i:nth-of-type(4) ~ i{opacity:0.4;}
.area_about .txt{left:calc(100% / 8 * 2);}
.area_about .list,
.area_about .list li{height:100vh;}
.area_about .list li{display:block !important; position:relative;}
.area_about .list .img{overflow:hidden; position:absolute; top:50%; right:40px; width:calc(100% / 8 * 3 - 40px); height:calc(100% - 20%); transform:translateY(-46%);}
.area_about .list .img div{height:0%; background-repeat:no-repeat; background-position:50% 0%;}
.area_about .list .img.show div{animation:sizeDown 1s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.3s forwards;}
.area_about .list p{overflow:hidden; position:absolute; top:90px; left:calc(100% / 8 * 5); z-index:10; font-family:'Righteous', Sans-serif; font-size:50px; color:#333;}
.area_about .list p em{padding-left:40px; font-family:'AritaDotum'; font-size:25px; font-weight:700; letter-spacing:-1px;}
.area_about .list p i{display:inline-block; color:#3951cb; font-size:70px; line-height:0.8em; vertical-align:middle;}
.area_about .list p span{display:block; transform:translateY(-100%);}
.area_about .list p em{display:block; transform:translateY(100%);}
.area_about .list p span.show{animation:slideDown 0.8s cubic-bezier(0, 0, 0.04, 1.07) 0.5s forwards;}
.area_about .list p em.show{animation:slideUp 0.8s cubic-bezier(0, 0, 0.04, 1.07) 0.5s forwards;}
.area_about .bx-controls{position:absolute; bottom:15%; left:calc(100% / 8 * 2); z-index:52;}
.area_about .bx-controls a{display:block; width:14px; height:14px; margin:15px 0px; background:#3951cb; border-radius:50px; font-size:0px; transition:all 0.5s ease;}
.area_about .bx-controls a.active{width:80px;}
.area_about .text_about i{opacity:0; display:block; position:absolute; margin-top:30px; font-size:16px; color:#3951cb; font-weight:300; letter-spacing:-1px; transform:translateY(-100%); transform-origin:0 0; transition:transform 0.5s ease-in-out; animation:aniOpacity 1.5s ease-in-out 1s forwards;}
.area_about .text_about i:before{content:''; display:block; width:14px; height:14px; margin-bottom:2px; background:#3951cb;}
.area_about .text_about i:nth-of-type(1){top:17%; left:calc(100% / 8 * 1); transition-delay:0.5s; animation-delay:0.5s;}
.area_about .text_about i:nth-of-type(2){top:10%; left:calc(100% / 8 * 3);  transition-delay:0.7s; animation-delay:0.2s;}
.area_about .text_about i:nth-of-type(3){top:80%; left:calc(100% / 8 * 3); transition-delay:0.9s; animation-delay:0.6s;}
.is .area_about .text_about i{font-weight:200;}
.section.active .area_about .text_about i{transform:translateY(0);}

.area_service:before,
.area_service:after{content:''; display:block; position:absolute; top:0px; z-index:-2; width:50%; height:100%;}
.area_service:before{right:0px; background:#f3f3f3;}
.area_service:after{left:0px; background:#fff;}
.area_service .txt{opacity:0; left:calc(100% / 8 * 1);}
.area_service .object i{opacity:0.4;}
.area_service .object i:nth-of-type(4) ~ i{opacity:1;}
.area_service .list,
.area_service .list li{height:100vh;}
.area_service .list li{display:block !important; position:relative;}
.area_service .list .img{overflow:hidden; position:absolute; top:50%; right:40px; width:calc(100% / 8 * 3 - 40px); height:calc(100% - 20%); transform:translateY(-46%);}
.area_service .list .img div{position:absolute; top:0px; left:0px; width:100%; height:0; background-repeat:no-repeat; background-position:0 0;}
.area_service .list .img.show div{animation:sizeDown 1s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.3s forwards}
.area_service .list p{opacity:0; position:absolute; top:260px; left:calc(100% / 8 * 5 + 50px); z-index:10; font-size:26px; color:#fff; font-weight:300;}
.area_service .list p.show{animation:aniOpacity 0.8s cubic-bezier(0.22, 0.32, 0.32, 0.9) 0.7s forwards;}
.area_service .list_page{position:absolute; top:50%; left:calc(100% / 8 *3); z-index:52; width:calc(100% / 8 *2);/*  pointer-events:none; */ transform:translateY(-50%);}
.area_service .list_page li{padding:70px 0;}
.area_service .list_page li > a{display:block; position:relative; padding-left:23px; font-size:17px; font-weight:300; color:#333; letter-spacing:-1px; transition:all 0.3s ease;}
.area_service .list_page li > a:before{content:''; display:block; position:absolute; top:6px; left:0px; width:14px; height:14px; margin-bottom:2px; background:#333; transition:all 0.5s ease;}
.area_service .list_page li > a:after{content:''; opacity:0; display:block; position:absolute; top:12px; left:50%; width:0; height:1px; background:#3951cb; transition:width 0s linear 0.8s, opacity 0.3s linear 0.2s;}
.area_service .list_page li > a.active{color:#3951cb;}
.area_service .list_page li > a.active:before{background:#3951cb;}
.area_service .list_page li > a.active:after{opacity:1; width:50%; transition:width 5.7s linear 0s, opacity 0s linear 0s;}
.is .area_service .list_page li > a{font-weight:200;}

.area_works .object i:nth-of-type(1) ~ i{opacity:1; background:#f3f3f3;}
.area_works .object i:nth-of-type(4){border-color:#e3e3e3 !important;}
.area_works .object i:nth-of-type(1),
.area_works .object i:nth-of-type(7){border-right-width:0px !important;}
.area_works .object i:last-child{background:#fff !important;}
.area_works:before{content:''; display:block; position:absolute; top:0px; z-index:-2; width:100%; height:100%; background:#fff;}
.area_works .txt{top:30% !important; left:calc(100% / 8 * 1);}
.area_works .box{position:relative; top:43%; margin-left:calc(100% / 8 * 1) !important;}
.area_works .list{font-size:0px;}
.area_works .list > li{display:inline-block;}
.area_works .list > li > a{display:inline-block; width:295px; height:350px; background:#fff; font-size:15px; transition:all 0.5s ease 0s;}
.area_works .list > li > a .img{display:block; height:225px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;}
.area_works .list > li > a i,
.area_works .list > li > a em{display:block; padding:0 20px;}
.area_works .list > li > a i{padding-top:20px; color:#999; font-size:14px; font-weight:300;}
.area_works .list > li > a em{padding-top:20px; font-size:18px; color:#333; letter-spacing:-0.5px; word-break:keep-all;}
.area_works .list > li > a:hover{box-shadow:0px 5px 20px rgba(0,0,0,0.05), 0px 30px 20px rgba(0,0,0,0.1);}
.area_works .bx-viewport{padding-bottom:60px;}
.area_works .bx-controls{position:absolute; bottom:-50px; left:calc(100% / 7 * 1 - 57px);}
.area_works .bx-controls a{display:inline-block; position:relative; width:55px; height:55px; margin:0 1px; background:#fff; font-size:0px; transition:all 0.3s ease-in-out;}
.area_works .bx-controls a:before{content:''; display:block; position:absolute; top:50%; left:50%; width:9px; height:13px; margin:-6px 0 0 -4.5px; background:url(../images/main/img_arrow_slide01.png) no-repeat 50% 0; transition:background 0.3s ease 0s;}
.area_works .bx-controls a.bx-next:before{transform:rotate(180deg);}
.area_works .bx-controls a:hover{background:#3951cb;}
.area_works .bx-controls a:hover:before{background-image:url(../images/main/img_arrow_slide02.png);}

.area_contact{position:relative; overflow:hidden; width:100%;}
.area_contact .object i{border-color:rgba(227,227,227,0.3) !important;}
.area_contact .txt{left:calc(100% / 8 * 1); transform:translateY(-50%) !important;}
.area_contact #myVideo{position:absolute; bottom:0px; top:0px; left:0px; z-index:-3; min-width:100%; min-height:100%; width:auto; height:auto; background:url(../images/main/bg_contact.jpg) no-repeat 50% 0; background-size:cover;}
.area_contact .write{position:absolute; top:50%; right:40px; width:calc(50% - 40px); height:calc(100% - 20%); box-sizing:border-box; padding:50px; background:rgba(255,255,255,0.6); transform:translateY(-46%); -webkit-transform:translateY(calc(-46% + 0.5px)); -moz-transform:translateY(-46%); -o-transform:translateY(-46%);}
.area_contact .write:after{content:''; display:block; clear:both;}
.area_contact .write h2{position:absolute; top:-30px; left:0px; line-height:1em; font-family:'Righteous', Sans-serif; font-size:50px; color:#333; font-weight:400;}
.area_contact .write h2 i{font-size:70px; color:#3951cb; vertical-align:middle;}
.area_contact .write h2 + p{margin-top:100px; font-size:33px; font-weight:300; letter-spacing:-1px; line-height:1.3em;}
.area_contact .write .form,
.area_contact .write .info{float:left; width:50%;}
.area_contact .write .form input[type=text],
.area_contact .write .form select,
.area_contact .write .form textarea{width:100%; height:45px; padding-left:0px; background:transparent; border:0px; border-bottom:1px solid #333;}
.area_contact .write .form input[type=text],
.area_contact .write .form textarea{font-size:18px;}
.area_contact .write .form select{padding-right:25px; -webkit-appearance:none; appearance:none;}
.area_contact .write .form input[type=text]:focus,
.area_contact .write .form select:focus,
.area_contact .write .form textarea:focus{outline:none;}
.area_contact .write .form textarea{resize:none;}
.area_contact .write .form ul{padding-top:50px;}
.area_contact .write .form ul li{position:relative; padding:20px 0px;}
.area_contact .write .form ul li label{position:absolute; top:25px; left:0px; z-index:-1; font-weight:200; transition:all 0.5s ease; font-size:15px;}
.area_contact .write .form ul li.active label,
.area_contact .write .form ul li.in label{top:5px; font-size:13px; color:#3951cb;}
.area_contact .write .form ul li.active input[type="text"],
.area_contact .write .form ul li.in input[type="text"]{border-bottom-color:#3951cb;}
.area_contact .write .form ul li[data-form="phone"]{font-size:0px;}
.area_contact .write .form ul li[data-form="phone"] input[type="text"]{display:inline-block; width:30%;}
.area_contact .write .form ul li[data-form="phone"] input[type="text"]:nth-of-type(2){margin:0 5%;}
.area_contact .write .form ul li[data-form="select"]:before{content:''; display:block; position:absolute; top:35px; right:5px; width:11px; height:7px; background:url(../images/main/img_arrow.png) no-repeat 50% 0; transform:rotate(0deg); transition:all 0.3s ease;}
.area_contact .write .form ul li[data-form="select"].in:before{transform:rotate(180deg);}
.area_contact .write .form .btn{overflow:hidden; position:relative; min-width:180px; padding:10px 0px; margin-top:30px; background:transparent; font-size:18px; text-align:left;}
.area_contact .write .form .btn span{display:inline-block; position:relative; transform:translateX(0); transition:all 0.3s ease-in-out;}
.area_contact .write .form .btn:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:20%; height:2px; background:#333; transition:all 0.5s ease-in-out;}
.area_contact .write .form .btn:hover span{transform:translateX(10px);}
.area_contact .write .form .btn:hover:after{width:100%; left:20%;}
.area_contact .write .form .btn:focus{outline:none;}
.area_contact .write .info{box-sizing:border-box; padding-top:100px; padding-left:50px;}
.area_contact .write .info h3{margin-bottom:10px; font-size:30px; font-weight:300; color:#333;}
.area_contact .write .info h3 + p{margin-bottom:20px; font-size:16px; font-weight:300;}
.area_contact .write .info em{display:block; font-size:25px; color:#333;}
.area_contact .write .info em a{display:inline-block; font-size:28px; font-weight:700;}
.is .area_contact .write .form ul li[data-form="select"]:before{display:none;}

/* layer pop */
.layerPop{position:absolute; z-index:90;}
.layerPop a{display:block;}
.layerPop img{max-width:100%;}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}

@media all and (min-width:1880px){
	.area_about .list .img div{background-size:cover;}	
}

@media all and (max-width:1500px){
	.area_about .txt{left:calc(100% / 8 * 1);}	
	.area_contact .write .info em{font-size:20px;}
	.area_contact .write .info em a{font-size:23px;}
}

@media all and (max-width:1300px){
	.area_service .list .img{width:calc(100% / 8 * 4 - 40px)}
	.area_service .list p{left:calc(100% / 8 * 4 + 50px)}
	.area_contact .write h2 + p{font-size:28px;}
	.area_contact .write .info{padding-top:65px;}	
	.area_contact .txt{font-size:120px !important;}
}

@media all and (max-width:1240px){
	.area_contact .write h2 + p{margin-top:20px;}
	.area_contact .write .form,
	.area_contact .write .info{float:none; width:auto;}
	.area_contact .write .form ul{padding-top:10px;}
	.area_contact .write .info{padding-top:10px; padding-left:0px;}
	.area_contact .write .info h3{display:none;}
	.area_contact .write .info h3 + p{margin-top:10px; word-break:keep-all;}
	.area_contact .write .info h3 + p br{display:none;}
	.area_contact .write .info em{font-size:25px;}
	.area_contact .write .info em a{font-size:28px;}
}

@media all and (max-width:1200px){
	#fullpage div[class^="area_"] .txt{font-size:120px;}
	.area_aside{left:calc(-50% + 35px); width:50%;}	
}

@media all and (max-width:1100px){
	.area_contact .txt{top:100px !important; transform:translateY(0) !important; font-size:80px !important;}
	.area_contact .txt .wordAni{display:inline-block !important;}
	.area_contact .write{right:auto; left:calc(100% / 8 * 1); width:calc(100% / 8 * 6);}
	.area_contact .write h2{display:none;}
	.area_contact .write .info{padding-top:30px;}
	
	#fullpage .section .object_txt{opacity:0 !important;}
}

@media all and (max-width:1024px){
	.area_aside{display:none;}
	#fullpage div[class^="area_"] .txt{font-size:100px;}
	.area_about .list,
	.area_about .list li,
	.area_service .list,
	.area_service .list li{height:100vh; min-height:850px;}
	.area_about .txt,
	.area_service .txt{left:40px;}
	.area_about .list .img{width:calc(100% / 8 * 5 - 40px);}
	.area_about .list .img div{background-position-y:100%;}
	.area_about .list p{display:none;}
	.area_about .text_about i:nth-of-type(3){top:90%; left:calc(100% / 8 * 2);}
	.area_about .text_about i{font-size:0px;}
	.area_about .bx-controls{left:calc(100% / 8 * 1);}

	.area_service .list .img{width:calc(100% / 8 * 5 - 40px);}
	.area_service .list p{left:calc(100% / 8 * 3 + 50px); width:calc(100% / 8 * 4); font-size:22px; word-break:keep-all;}
	.area_service .list p br{display:none;}
	.area_service .list_page{top:80%; left:calc(100% / 8 *1); width:auto;}
	.area_service .list_page li{display:inline-block; padding:0px 5px;}
	.area_service .list_page li > a{display:inline-block; width:14px; height:14px; padding-left:0px; font-size:0px;}
	.area_service .list_page li > a:after{display:none;}
	
	.area_works .box{top:38%;}
	.area_works .bx-controls{bottom:-20px;}

	.area_works .txt{top:25% !important;}
	
	.area_contact{background:url(../images/main/bg_contact.jpg) no-repeat 50% 0; background-size:cover;}
	.area_contact .txt{font-size:60px !important;}
	.area_contact video{display:none;}
}

@media all and (max-width:768px){
	#fullpage div[class^="area_"]{min-height:720px;}
	#fullpage div[class^="area_"] .txt{font-size:80px;}
	.area_about .bx-controls{bottom:25%;}
	.area_about .list p{font-size:40px;}
	.area_service .list p{width:calc(100% / 8 * 4 - 30px); font-size:20px;}
	.area_service .list .img div{background-position:50% 50%;}
	.area_works .box{top:33%;}
	.area_contact{min-height:860px !important;}
}

@media all and (max-width:710px){
	.area_contact .write h2 + p{font-size:25px;}
}

@media all and (max-width:640px){
	#fullpage div[class^="area_"] .txt{font-size:60px; color:#e0e0e0; mix-blend-mode:exclusion;}
	.area_about .list,
	.area_about .list li,
	.area_service .list,
	.area_service .list li{min-height:550px;}
	.area_about .list .img,
	.area_service .list .img{width:calc(100% / 8 * 6 - 40px);}
	.area_about .list p{left:calc(100% / 8 * 4); font-size:35px;}
	.area_about .list p i{font-size:50px;}
	.area_about .bx-controls,
	.area_service .list_page{left:40px;}
	.area_service .list_page{top:70%;}
	.area_service .list p{top:180px; left:calc(100% / 8 * 2 + 50px); font-size:18px;}
	.area_works .txt{top:18% !important;}
	.area_works .box{top:25%;}
	.area_contact .txt{padding-top:60px; font-size:40px !important;}	
	.area_contact .write{left:calc(100% / 8 * 0.5); width:calc(100% / 8 * 7); padding-top:100px;}
	.area_contact .write .form ul li{padding:10px 0px;}
	.area_contact .write .form .btn{margin-top:15px;}
	.layerPop{width:90%;}
	.layerPop img{width:100%;}
}

@media all and (max-width:420px){
	#fullpage div[class^="area_"]{min-height:700px;}
	.area_about .list,
	.area_about .list li,
	.area_service .list,
	.area_service .list li{min-height:450px;}
	.area_about .list p span{mix-blend-mode:exclusion;}
	.area_about .txt, 
	.area_service .txt,
	.area_service .list_page{left:15px;}
	.area_about .list .img,
	.area_service .list .img{right:15px; width:calc(100% / 8 * 6 - 15px);}
	.area_service .list_page li{padding:0 1px;}
	.area_service .list p{left:calc(100% / 8 * 2 + 30px); width:calc(100% / 8 * 5 - 30px);}
	.area_service .list .img div{background-position:50% 0; background-size:cover;}
	.area_contact .txt{font-size:30px !important;}
	.area_contact .write{padding:70px 30px 30px;}
	.area_contact .write .info em{font-size:20px;}
	.area_contact .write .info em a{font-size:22px;}
	.area_footer{bottom:15px; padding-right:15px; padding-left:15px;}
	.area_footer p + p{right:15px;}
}


@media all and (max-width:375px){
	#fullpage div[class^="area_"]{min-height:500px;}
	#fullpage div[class^="area_"] .txt{font-size:50px;}
	.area_works{min-height:680px !important;}
	.area_about .list,
	.area_about .list li,
	.area_service .list,
	.area_service .list li{min-height:400px;}
	.area_about .list p{font-size:30px;}
	.area_about .list .img div{background-position:50% 100%;}
	.area_service .list p{font-size:15px;}
}

@media all and (max-width:360px){
	.area_about .bx-controls{bottom:20%;}
}

@keyframes scaleUp{
	0%{transform:scaleY(1); transform-origin:0 100%;}
	100%{transform:scaleY(0); transform-origin:0 100%;}
}
@-webkit-keyframes scaleUp{
	0%{-webkit-transform:scaleY(1); -webkit-transform-origin:0 100%;}
	100%{-webkit-transform:scaleY(0); -webkit-transform-origin:0 100%;}
}
@keyframes slideUp{
	0%{transform:translateY(100%);}
	100%{transform:translateY(0);}
}
@-webkit-keyframes slideUp{
	0%{-webkit-transform:translateY(100%);}
	100%{-webkit-transform:translateY(0);}
}
@keyframes slideDown{
	0%{transform:translateY(-100%);}
	100%{transform:translateY(0);}
}
@-webkit-keyframes slideDown{
	0%{-webkit-transform:translateY(-100%);}
	100%{-webkit-transform:translateY(0);}
}
@keyframes sizeDown{
	0%{height:0%;}
	100%{height:100%;}
}
@-webkit-keyframes sizeDown{
	0%{height:0%;}
	100%{height:100%;}
}
@keyframes slideLeft{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(0);}
}
@-webkit-keyframes slideLeft{
	0%{-webkit-transform:translateX(-100%);}
	100%{-webkit-transform:translateX(0);}
}
@keyframes aniOpacity{
	0%{opacity:0; margin-top:30px;}
	100%{opacity:1; margin-top:0px;}
}
@-webkit-keyframes aniOpacity{
	0%{opacity:0; margin-top:30px;}
	100%{opacity:1; margin-top:0px;}
}