@charset "utf-8";

/* main */
.area_visual{overflow:hidden; width:calc(100% - 100px); height:850px; margin:0 auto;}
.area_visual .list li{position:relative; text-align:right;}
.area_visual .list .txt{position:absolute; bottom:145px; left:0px; z-index:10; width:calc(50% - 240px); min-height:305px; box-sizing:border-box; padding:50px 40px; background:#fff; text-align:left;}
.area_visual .list .txt h2{margin-bottom:20px; font-size:36px; color:#333; letter-spacing:-0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_visual .list .txt p{display:-webkit-box; overflow:hidden; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; height:4.5em; line-height:1.5em; margin-bottom:20px; font-size:18px; font-weight:300; letter-spacing:-0.5px; word-break:keep-all;}
.area_visual .list .txt .button{min-width:125px;}
.area_visual .list .img{overflow:hidden; display:inline-block; position:relative; width:100%; max-width:1436px; padding-top:48%; background:#000;}
.area_visual .list .img img{position:absolute; top:0px; left:50%; width:auto; height:100%; transform:translateX(-50%);}
.area_visual .bx-controls{position:absolute; top:450px; left:50%; z-index:80; margin-left:-700px; padding-right:20px;}
.area_visual .bx-controls .controls,
.area_visual .bx-controls .bx-controls-auto,
.area_visual .bx-controls .bx-pager{display:inline-block;}
.area_visual .bx-controls .bx-controls-auto{position:absolute; right:0px; top:50%; transform:translateY(-50%);}
.area_visual .bx-controls .bx-controls-auto .bx-controls-auto-item{display:inline-block;}
.area_visual .bx-controls .bx-controls-auto .bx-controls-auto-item a,
.area_visual .bx-controls .controls{margin-left:5px;}
.area_visual .bx-controls .controls button{display:inline-block; width:9px; height:12px; background:url(../img/main/sp_control.png) no-repeat 0 0; background-size:18px 12px; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_visual .bx-controls .controls button{margin-top:-4px; vertical-align:middle;}
.area_visual .bx-controls .bx-controls-auto .bx-controls-auto-item a.bx-start,
.area_visual .bx-controls .controls button.bx-start{display:none; background-position-x:-9px;}
.area_visual .bx-controls .controls button.bx-stop{}
.area_visual .bx-controls .bx-pager .bx-pager-item,
.area_visual .bx-controls .bx-pager .bx-pager-link{display:inline-block;}
.area_visual .bx-controls .bx-pager .bx-pager-link{width:12px; height:12px; margin:0 7px; background:#333; border-radius:100%; text-indent:100%; overflow:hidden; white-space:nowrap; transition:all 0.3s ease 0s;}
.area_visual .bx-controls .bx-pager .bx-pager-link.active{background:#fabe00;}
.area_visual .obj{position:absolute; z-index:-1;}
.area_visual .obj.circle{top:145px; left:-90px; width:311px; height:311px; animation:rotate360 40s infinite linear;}
.area_visual .obj.circle img,
.area_visual .obj.circle svg{width:100%; height:100%;}
.area_visual .obj.line{top:250px; left:15px; width:502px; transform:rotate(-78deg); transform-origin:50% 50%;}
.area_visual .obj.line img{max-width:100%;}

.area_production{position:relative;}
.area_production .inr{max-width:1200px; margin:0 auto; padding:70px 15px; text-align:center;}
.area_production button{display:inline-block; position:relative; z-index:11; margin:0 45px; background:transparent; font-size:20px; font-weight:400; color:#a1a1a1; transition:all 0.3s ease 0s;}
.area_production button:before{content:''; opacity:0; display:block; position:absolute; top:50%; left:0px; width:18px; height:3px; background:#fabe00; transition:all 0.3s ease 0s;}
.area_production button.active{padding-left:25px; color:#000; font-weight:500;}
.area_production button.active:before{opacity:1;}
.area_production .list{position:absolute; top:100px; left:0px; z-index:10; width:100%; box-sizing:border-box; padding-left:15px; padding-right:15px; padding-top:50px;}
.area_production .list ul{margin-left:-47px;}
.area_production .list ul:after{content:''; display:block; clear:both;}
.area_production .list ul > li{opacity:0; float:left; width:calc(25% - 47px); margin-left:47px; transform:translateY(-30px); transition:opacity 0.6s ease 0s, transform 0.6s ease 0s;}
.area_production .list ul > li > a{display:block; text-align:left;}
.area_production .list .img{opacity:1; display:block; overflow:hidden; height:362px; background:#fbfbfb url(../img/content/no_image.png) no-repeat 50% 50%; text-align:center; transition:all 0.4s ease 0s;}
.area_production .list .img img{height:100%; margin-left:-100%; margin-right:-100%; transform:scale(1,1) rotate(.001deg); transition:all 0.5s ease-in-out 0s;}
.area_production .list em{display:block; margin-top:20px; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_production .list p{font-size:22px; color:#333; font-weight:500; letter-spacing:-0.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_production .list ul > li.none{float:none; width:100%;}
.area_production .list ul > li.none p{padding:50px 0px; color:#b1b1b1; text-align:center; font-weight:400;}
.area_production .list ul > li > a:hover .img,
.area_production .list ul > li > a:focus .img{opacity:0.7; box-shadow:0 15px 30px rgba(0,0,0,0.20), 0 40px 40px rgba(0,0,0,0.10);}
.area_production .list ul > li > a:hover .img img,
.area_production .list ul > li > a:focus .img img{transform:scale(1.05,1.05) rotate(.001deg);}
.area_production .obj{position:absolute; z-index:-1;}
.area_production .obj.circle{top:-200px; right:-120px; z-index:1; width:363px; height:363px; background:#fabe00; border-radius:100%;}
.area_production .obj.circle2{top:-130px; right:-135px; z-index:2; width:336px; height:336px; animation:rotate360 100s infinite linear;}
.area_production .obj.circle2 img{width:100%;}
.area_production .obj.line{top:50px; left:50%; width:780px; transform:rotate(30deg) translateX(-55%); transform-origin:50% 50%;}
.area_production .obj.line img{width:100%;}
.area_production .obj.line:before{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:#fff; transition:height 1s linear 0.6s;}
.area_production.active .obj.line:before{height:0px;}
.area_production.active ul > li{opacity:1; transform:translateY(0);}
.area_production.active ul > li:first-child{transition-delay:0s;}
.area_production.active ul > li:nth-of-type(2){transition-delay:0.3s;}
.area_production.active ul > li:nth-of-type(3){transition-delay:0.6s;}
.area_production.active ul > li:nth-of-type(4){transition-delay:0.9s;}

.area_company{position:relative; margin-top:80px;}
.area_company .inr{position:relative; z-index:10; max-width:1400px; margin:0 auto; padding:85px 120px 70px;}
.area_company h2{font-size:40px; font-weight:400; color:#333;}
.area_company h2:after{content:''; display:block; width:40px; height:3px; margin-top:20px; background:#333;}
.area_company h2,
.area_company p{width:calc(50% - 140px);}
.area_company p{margin:35px 0; line-height:1.8em; word-break:keep-all; color:#333;}
.area_company .youtube{position:absolute; right:15px; top:60px; width:calc(50% + 50px); height:423px;}
.area_company .company{position:absolute; right:15px; top:60px; width:calc(50% + 50px); height:423px;}
.area_company .company img {max-width:100%;}
.area_company .youtube iframe{width:100%; height:100%; border:0px;}
.area_company .button{min-width:208px; font-size:14px;}
.area_company:after{content:''; display:block; position:absolute; top:0px; left:50px; z-index:2; width:calc(50% + 70px - 50px); height:100%; background:#f7f7f7; transform:scaleX(0); transform-origin:0% 0%; transition:transform 0.8s linear 0.2s;}
.area_company .obj{overflow:hidden; position:absolute; top:-55px; left:90px; z-index:5; width:230px; height:230px; border-radius:100%; background:#fabe00 url(../img/main/img_breeze.svg) no-repeat 50% 50%; background-size:75%; transform:scale(0,0); transition:transform 0.6s cubic-bezier(0.64, 0, 0, 1.18) 0.3s;}
.area_company.active:after{transform:scaleX(1);}
.area_company.active .obj{transform:scale(1,1);}

.area_board{position:relative; margin-top:120px;}
.area_board .inr{max-width:1400px; margin:0 auto; padding:0 15px;}
.area_board .inr:after{content:''; display:block; clear:both;}
.area_board .facebook{float:left; position:relative; z-index:10; width:420px; height:425px;}
.area_board .facebook iframe{width:100%; height:100%; border:0px;}
.area_board .box{float:left; position:relative; z-index:10; width:calc(100% / 2 - 245px); height:425px; margin-left:35px;}
.area_board .box h2{padding-top:30px; font-size:30px; color:#333;}
.area_board .box ul{margin-top:30px;}
.area_board .box ul > li > a{display:block; position:relative; padding:15px; margin-top:10px; background:#f7f7f7; transition:all 0.4s ease 0s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.area_board .box ul > li > a:hover,
.area_board .box ul > li > a:focus{z-index:10; background:#ffd654; box-shadow:0 15px 30px rgba(0,0,0,0.20), 0 40px 40px rgba(0,0,0,0.10); color:#000;}
.area_board .box .more{position:absolute; right:0px; top:40px; display:inline-block; font-size:14px; font-weight:700; color:#333;}
.area_board .box ul > li.none{padding:40px 0px; text-align:center; color:#b1b1b1;}
.area_board .obj{position:absolute; z-index:0;}
.area_board .obj.line{top:-400px; right:170px; width:502px; transform:rotate(-78deg); transform-origin:50% 50%;}
.area_board .obj.line:before{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:100%; background:#fff; transition:height 1s linear 0.3s;}
.area_board .obj.line img{width:100%;}
.area_board .obj.line.mob{display:none;}
.area_board .obj.line.mob:before{transition-delay:1s;}
.area_board.active .obj.line:before{height:0px;}

@media all and (max-width:1850px){
	.area_visual{position:relative; width:100%; height:auto;}
	.area_visual .bx-controls{top:auto; bottom:470px;}
}

@media all and (max-width:1750px){
	.area_visual .list .txt{bottom:0px; width:calc(50% - 140px);}
	.area_visual .bx-controls{bottom:360px}
	.area_visual .list .img{max-width:inherit; width:82%;}
	
	.area_company:after{left:0px; width:calc(50% + 70px);}
}

@media all and (max-width:1430px){
	.area_visual .bx-controls{left:15px; margin-left:0px;}
	.area_visual .list .txt h2{font-size:30px;}
}

@media all and (max-width:1350px){
	.area_visual .list .txt{min-height:270px; padding:30px 20px;}
	.area_visual .bx-controls{bottom:300px;}
	.area_visual .obj.line{top:200px;}
}

@media all and (max-width:1240px){
	.area_visual .list .txt{width:50%; min-height:210px; padding-bottom:0px;}
	.area_visual .list .txt p{-webkit-line-clamp:2; height:3em;}
	.area_visual .bx-controls{bottom:250px;}
	.area_visual .obj.circle{left:-110px;}
	
	.area_company .obj{left:20px;}
	.area_company .inr{padding-left:50px; padding-right:50px;}

	.area_production button{margin:0 20px;}
}

@media all and (max-width:1100px){
	.area_visual .list .txt h2{font-size:25px; font-weight:500;}
	.area_production .inr{padding-bottom:40px;}
	.area_production .list p{font-size:20px;}
	.area_production .list .img{max-width:220px; height:300px; margin:0 auto;}
	.area_production .obj.circle,
	.area_production .obj.circle2{width:300px; height:300px;}
	
	.area_company .inr{padding-top:105px;}
	.area_company h2{font-size:30px;}
}

@media all and (max-width:1024px){
	.area_visual .list .txt{bottom:4px; width:70%; min-height:184px; padding-top:20px; padding-right:150px;}
	.area_visual .list .txt h2{margin-bottom:10px;}
	.area_visual .list .txt .button{position:absolute; right:0px; bottom:-2px; min-width:90px; height:90px; line-height:88px;}
	.area_visual .list .txt p{font-size:16px;}
	.area_visual .list .img{width:85%; padding-top:60%;}	
	.area_visual .bx-controls{bottom:10px; left:20px;}
	.area_visual .obj.line{left:0px; top:120px;}
	.area_visual .obj.circle{left:-90px; top:45px; width:250px; height:250px;}
	.area_board .box{width:calc(100% - 455px);}
	.area_board .box.issue{clear:both; float:left; width:100%; margin-left:0px;}
}

@media all and (max-width:980px){
	.area_production .list ul > li{width:calc(50% - 47px); margin-bottom:30px;}
	.area_production .list ul > li:nth-child(2n+1){clear:left;}
	.area_production .list ul > li > a{text-align:center;}
	.area_company .youtube{position:static; width:100%; margin-top:40px;}
	.area_company .company{position:static; width:100%; margin-top:40px;}
	.area_company h2,
	.area_company p{width:100%;}
	.area_company:after{width:100%;}
}

@media all and (max-width:768px){
	.area_visual .list .txt{min-height:164px; padding-right:120px;}
	.area_visual .list .txt h2{font-size:22px;}
	.area_visual .list .img{width:calc(100% - 89px);}
	.area_visual .obj.line{top:50px; left:-10px;}
	.area_visual .obj.circle{width:200px; height:200px;}
	
	.area_production button{margin:0 25px;}
	.area_production .list p{font-size:18px;}
	.area_production .obj.line{transform:rotate(-20deg) translateX(-55%);}
	
	.area_board{margin-top:50px;}
	.area_board .facebook{float:none; width:100%; text-align:center;}
	.area_board .facebook iframe{max-width:420px;}
	.area_board .box{width:calc(100% / 2 - 20px); margin-right:20px; margin-left:0px;}
	.area_board .box.issue{clear:none; float:right; width:calc(100% / 2 - 20px); margin-left:20px; margin-right:0px;}
	.area_board .box h2{padding-top:50px;}
	.area_board .box .more{top:60px;}
	.area_board .obj.line{top:-150px;}
}

@media all and (max-width:640px){
	.area_visual .bx-viewport{padding-bottom:88px;}
	.area_visual .list .txt{bottom:-90px; width:calc(100% - 35px); min-height:150px;}
	.area_visual .list .txt .button{bottom:0px;}
	.area_visual .list .txt p{display:block; height:auto; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	
	.area_production button{margin:0 15px; font-size:18px;}
	.area_production .obj.circle{top:-150px; right:-20px; width:200px; height:200px;}
	.area_production .obj.circle2{top:-150px; right:-110px; width:240px; height:240px;}
	.area_company .youtube{height:320px;}
	.area_company .company{height:320px;}
}

@media all and (max-width:540px){
	.area_production button{margin:0 10px;}
	.area_production .list .img{height:250px;}	
	.area_production .list ul{margin-left:-30px;}
	.area_production .list ul > li{width:calc(50% - 30px); margin-left:30px;}
	.area_production .list em{font-size:14px;}
	.area_production .list p{font-size:16px;}
	
	.area_board .box,
	.area_board .box.issue{float:none; width:100%; margin:0px;}
	.area_board .obj.line.mob{display:block; top:600px; right:50px; transform:rotate(0deg);}
}

@media all and (max-width:440px){
	.area_visual .list .txt{padding-right:30px;}
	.area_visual .list .txt h2{font-size:18px;}
	.area_visual .list .txt p{font-size:15px;}
	.area_visual .list .txt .button{min-width:50px; height:57px; line-height:55px; font-size:14px;}
	.area_visual .list .img{width:calc(100% - 69px);}
	.area_visual .obj.line{top:0px;}
	.area_visual .obj.circle{left:-150px; top:0px;}
	
	.area_production button{font-size:16px;}
}

@media all and (max-width:420px){
	.area_production .list .img{height:220px;}

	.area_company .inr{padding-left:20px; padding-right:20px;}
	.area_company .obj{left:10px; width:200px; height:200px;}
	.area_company .youtube{height:270px;}
	.area_company .company{height:270px;}
}

@media all and (max-width:380px){
	.area_production .list ul{margin-left:-20px;}
	.area_production .list ul > li{width:calc(50% - 20px); margin-left:20px;}
}