@charset "utf-8";
.body-main,
section {position:relative;}


/*Main Visual*/
#section01 { z-index:1;}

.main__visual {position:relative; overflow: hidden;}

.main__visual .header-logo,
.header-wrap .header-logo {position: absolute; min-width: 400px; width: 1600px; top: 39%; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 0;}

.main__visual-copy {position: absolute; top: 30%; left: 45%; z-index: 5; padding: 60px 90px 45px; background: #00243b; color:#fff; text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);}
.main__visual-copy > h2 {font-size:70px; font-weight:700; line-height: 1.2; letter-spacing: 10px;}
.main__visual-copy > h2 span {display: block; font-size: 54px; font-weight: 400;}
.main__visual-copy > h6 {font-size: 18px; font-weight: 500; margin: 25px 0 55px;}
.main__visual-copy > p {font-size:18px; font-weight:300; line-height:1.4;}


.main__visual-wrap {width:auto; z-index:2; position:relative;}
.main__visual-wrap::after {content: ""; max-width: 1500px; width: 100%; height: 910px; border: 50px solid rgba(255, 0, 0, 0.8); position: absolute; top: 50%; left: 50%; transform: translateX(-50%); z-index: 3;}


.slick-slider .slick-track, .slick-slider .slick-list {z-index:1;  height:100%;}
.main__visual-item { font-size:0; white-space:nowrap; overflow:hidden; position:relative; height:100%; height:100vh; min-height:800px !important; max-height:980px !important; text-align: center; }
.main__visual-item:before {content:''; display:inline-block; vertical-align:middle; width:0; height:100%; font-size:0;}


.main__visual-inner {display:inline-block; white-space:normal; position:relative; z-index:10; word-break:keep-all;  vertical-align:middle; line-height:1.3; width:90%; }


.visual-videowrap {width: 100%; min-width: 1500px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index: 1;}
.visual-videowrap::after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.4);}

@media only screen and (max-width: 1600px){
	.main__visual-wrap::after {width: calc(100% - 100px); height: 500px;}
	.main__visual .header-logo,
	.header-wrap .header-logo {width: calc(100% - 100px);}
}

@media only screen and (max-width: 1440px){
	.main__visual-copy {padding: 45px 60px; }

}
@media only screen and (max-width: 1240px){
	.main__visual-item {min-height:700px !important; height: 100%;}

	.main__visual-copy {padding: 45px;}
	.main__visual-copy > h2 {font-size: 60px;}
	.main__visual-copy > h2 span {font-size: 45px;}
	.main__visual-copy > h6 {font-size: 16px;}
}
@media only screen and (max-width: 1024px){

	.main__visual-item { min-height:600px !important;}

	.main__visual .header-logo,
	.header-wrap .header-logo {top: 20px; left: 20px; transform: translateX(0); width: auto; min-width: 1px;} 
	.header-logo a:first-child {width: 85px; height: 30px; background-size: contain; margin-right: 30px;}
	.header-logo a:nth-of-type(2) {width: 40px; height: 20px; background-size: contain;}
	.header-logo a:last-child {width: 35px; height: 20px; background-size: contain;}

	.main__visual-copy {top: 20%; left: 50%; transform: translateX(-50%);}
	.main__visual-copy > h2 {font-size:40px;}
	.main__visual-copy > h2 span {font-size: 35px;}
	.main__visual-copy > p  {font-size: 20px;}
}
@media only screen and (max-width: 768px){
	.main__visual-wrap::after {width: calc(100% - 80px); border: 40px solid rgba(255, 0, 0, 0.8);}

	.main__visual-inner {margin:-25% 0 0 0;}

	.main__visual-copy > h2 {font-size:32px;}
	.main__visual-copy > h2 span {font-size: 25px;}
	.main__visual-copy > h6 {font-size: 15px;}
	.main__visual-copy > p  {font-size: 18px;}
}

@media only screen and (max-width: 640px){
	.main__visual-item {height:400px;}
	.main__visual-copy {width: 80%; left: 50%; transform: translateX(-50%); padding: 20px; top: 25%;}
	.main__visual-copy > h6 {margin: 15px 0 45px;}
}

@media only screen and (max-width: 480px){
	.main__visual-wrap {height:500px;}

	.top__util {right: 10px;}

	.main__visual-wrap::after {display: none;}

	.main__visual .header-logo {width: calc(100% - 30px);}

	.header-logo a:first-child {margin-right: 15px; display: block; margin-bottom: 20px;}
	.header-logo a:nth-of-type(2) {margin-right: 15px; height: 40px;}

	.main__visual-copy {width: 90%; top: 35%;}
	.main__visual-copy > h2 {font-size:28px;}
	.main__visual-copy > h6 {font-size: 14px; margin: 10px 0 20px;}
	.main__visual-copy > p  {font-size: 16px;}
}


.main__visual-item > .bg {position:absolute; height:100%; width:100%; top:0; left:0; overflow:hidden; z-index:-1; }
.main__visual-item > .bg .main__visual-img{
	background-size:cover; background-position: 50% 5%; background-repeat: no-repeat;
	
	transition:all 10s ease-in-out;
	transform:scale(1) skew(0.001deg);
}

.slick-active > .bg .main__visual-img.is-scale{
	transition:all 10s ease-in-out;
	transform:scale(1.1) skew(0.001deg);
}
.main__visual-item.nth-1 .main__visual-img{background-image:url('../images/main/main_visual01.jpg');}
.main__visual-item.nth-2 .main__visual-img{background-image:url('../images/main/main_visual02.jpg');}
.main__visual-item.nth-3 .main__visual-img{background-image:url('../images/main/main_visual03.jpg');}
.main__visual-item.nth-4 .main__visual-img{background-image:url('../images/main/main_visual04.jpg');}
.main__visual-img,
.main__visual-img img{width:100%; height:100%;}

.is-opacity {
  -webkit-animation-name: is-opacity;
  -webkit-animation-duration: 10s;
  -ms-animation-name: is-opacity;
  -ms-animation-duration: 10s;
  animation-name: is-opacity;
  animation-duration: 10s;
}

@keyframes is-opacity {
  0% { opacity:0; }
  100% { opacity:1; }
}
@-ms-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}
@-webkit-keyframes is-opacity {
  0% { opacity:0; }
  
  100% { opacity:1; }
}


/*Quick*/
.main__visual .quick {top:50%; bottom:auto; transform:translateY(-50%);}




/* Main Title */
.main-title {text-align:center; z-index:2; color:#222; position:relative; margin: 0 auto 55px;}
.main-title h2 {display: inline-block; font-size:34px; font-weight:500; position:relative;}
.main-title h2::after {display: block; content: ""; width: 15px; height: 15px; position: absolute; top: 0; left: 0; transform: translate(-60%, -40%); background: url('../images/common/gnb-dot_dark.png') 0 0 no-repeat;}


@media only screen and (max-width: 1024px) {
	.main-title {margin-bottom: 50px;}
	.main-title h2 {font-size:36px;}
}


@media only screen and (max-width: 768px) {
	.main-title {margin-bottom: 30px; z-index: 10;}
	.main-title h2 {font-size:32px;}
}

@media only screen and (max-width:480px){
	.main-title h2 {font-size:25px;}
}



/* Product */
.main__product {padding:100px 0 150px; overflow: hidden; position: relative;}
.main__product::after {content: ""; display: block; max-width: 1500px; width: 100%; height: 910px; border: 50px solid rgba(255, 0, 0, 0.8); position: absolute; bottom: 375px; left: 50%; transform: translateX(-50%); z-index: 3;}

.main__product-list {font-size: 0; overflow: hidden; position: relative; z-index: 5;}
.main__product-list > li {display: inline-block; cursor: pointer; width: 16.6666%; height: 500px; background: url('../images/main/con_img01.png') top right repeat-x; position: relative; overflow: hidden; transition: all 0.3s ease-in-out;}
.main__product-list > li:nth-of-type(2) {background: url('../images/main/con_img02.png') top right repeat-x;}
.main__product-list > li:nth-of-type(3) {background: url('../images/main/con_img03.png') top right repeat-x;}
.main__product-list > li:nth-of-type(4) {background: url('../images/main/con_img04.png') top right repeat-x;}
.main__product-list > li:nth-of-type(5) {background: url('../images/main/con_img05.png') top right no-repeat;}
.main__product-list > li:nth-of-type(6) {background: url('../images/main/con_img06.png') top left no-repeat;}

.main__product-list > li div {display: block; height: 100%;}

.main__product-list > li .title {background: #ff0000; color: #fff; font-size: 16px; font-weight: 400; padding: 18px 0; max-height: 50px; text-align: center; width: calc(100% + 2px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main__product-list > li:hover .title {font-weight: 700;}

.main__product-list > li.on .title {width: 465px; z-index: 20; top: 100px; left: 50%; font-size: 30px; font-weight: 700; max-height: 64px;}
.main__product-list > li.on .title {font-size: 30px;}

.main__product-list > li .main__product-close {display: none;}
.main__product-list > li.on .main__product-close {display: block; position: absolute; right: 2%; top: 30px; width: 60px; height: 60px; z-index:1002; padding:0; font-size:0; transition: all 0.3s ease-in-out; overflow:hidden; text-indent:-8888888px; background: rgba(0, 0, 0, 0); border: 0;}

.main__product-list > li.on .main__product-close:before,
.main__product-list > li.on .main__product-close:after {content:''; display:block; width:48px; height:2px; background-color:#fff; position:absolute; top:50%; left:50%; transition: all 0.3s ease-in-out;}

.main__product-list > li.on .main__product-close:before {transform:translate(-50%, -50%) rotate(45deg);}
.main__product-list > li.on .main__product-close:after {transform:translate(-50%, -50%) rotate(-45deg);}

.main__product-list > li.on .main__product-close:hover:before,
.main__product-list > li.on .main__product-close:focus:before {transform:translateX(-50%) rotate(-45deg); background-color:#ff0000;}
.main__product-list > li.on .main__product-close:hover:after,
.main__product-list > li.on .main__product-close:focus:after {transform:translateX(-50%) rotate(45deg); background-color:#ff0000;}

.main__product-list > li.on {max-width: 100%; z-index: 1; width: 100%; position: absolute; top: 0; right: 0; transition: all 0.3s ease-in-out;}
.main__product-list > li:nth-of-type(1).on {background: url('../images/main/con_img01_h.png') right no-repeat;}
.main__product-list > li:nth-of-type(2).on {background: url('../images/main/con_img02_h.png') right no-repeat;}
.main__product-list > li:nth-of-type(3).on {background: url('../images/main/con_img03_h.png') right no-repeat;}
.main__product-list > li:nth-of-type(4).on {background: url('../images/main/con_img04_h.png') right no-repeat;}
.main__product-list > li:nth-of-type(5).on {background: url('../images/main/con_img05_h.png') right no-repeat;}
.main__product-list > li:nth-of-type(6).on {background: url('../images/main/con_img06_h.png') no-repeat;}

.main__product-list > li.off {width: 0; transition: all 0.3s ease-in-out;}

.main__product-list > li ul {display: none; width: 100%; text-align: center; height: 100%; padding-top: 175px;}
.main__product-list > li.on ul {display: block;} 

.main__product-list > li ul li a {display: inline-block; min-width: 280px; padding: 20px; font-size: 20px; font-weight: 500; color: #fff; text-align: center;}
.main__product-list > li ul li a:hover {display: inline-block; background: #fff; color: #00243b; font-weight: 700;}



@media only screen and (max-width: 1600px) {
	.main__product::after {width: calc(100% - 100px);}
}

@media only screen and (max-width: 1024px) {
	.main__product::after {display: none;}

	.main__product-list {height: 500px;}
	.main__product-list > li {width: 33.3333%; height: 250px;}
	.main__product-list > li.on {height: 500px;}
	.main__product-list > li.on ul {padding: 175px 0 50px;}
	.main__product-list > li.off {width: 33.3333%; transition: all 0.2s ease-in-out;}
}

@media only screen and (max-width: 640px) {
	.main__product-list {height: auto;}
	.main__product-list > li {width: 100%; height: 500px;}
	.main__product-list > li.off {width: 100%;}
	.main__product-list > li.on {transition: 0s; background-size: cover; position: inherit;}
	.main__product-list > li.on .title {font-size: 25px;}
	.main__product-list > li ul li a {font-size: 18px;}
}

@media only screen and (max-width: 480px) {
}


/* company */
.main__company-item {background: #00243b url('../images/main/con_bg01.png') no-repeat; }
.main__company-item.nth-1 .main__company-desc.nth-1 {margin-left: 295px; padding: 115px 0 120px 90px; position: relative;}
.main__company-item.nth-1 .main__company-desc.nth-1:after {content: ""; display: block; width: 6px; height: 55%; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.main__company-item.nth-1 .main__company-desc.nth-1::before {content: ""; display: block; width: 50%; height: 100%; background: url('../images/main/con_bg03.png') top right no-repeat; background-size: cover; position: absolute; top: 0; right: calc(100% + 50px);}

.main__company-desc.nth-1 h2 {display: inline-block; font-size: 34px; font-weight: 500; color: #fff; margin-bottom: 25px; position: relative;}
.main__company-desc.nth-1 h2::after {display: block; content: ""; width: 15px; height: 15px; position: absolute; top: 0; left: 0; transform: translate(-60%, -40%); background: url('../images/common/gnb-dot.png') 0 0 no-repeat;}
.main__company-desc.nth-1 p {font-size: 18px; font-weight: 400; color: #fff; line-height: 1.4; margin-bottom: 55px;}

.main__company-desc.nth-1 .main__con_btn {display: inline-block;}
.main__company-desc.nth-1 .main__con_btn a {display: block; font-size: 20px; font-weight: 700; color: #fff; padding: 25px 60px; background: #00243b; border: 5px solid #fff;}
.main__company-desc.nth-1 .main__con_btn:hover a {background: #fff; color: #00243b;}

.main__company-desc.nth-2 {padding: 75px 0; position: relative;}
.main__company-desc.nth-2::before {content: ""; display: block; width: 150%; height: calc(100% - 80px); background: url('../images/main/con_bg02.png') top right no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 1;}
.main__company-desc.nth-2::after {content: ""; display: block; width: 150%; height: 100%; background: #fff; position: absolute; top: 0; right: 50px;}


.main__company-desc.nth-2 ul {font-size: 0; padding: 0 50px 0; z-index: 1; position: relative;}
.main__company-desc.nth-2 ul li {display: inline-block; width: 32%; border: 5px solid #fff; background: rgba(255, 255, 255, 0.8);}
.main__company-desc.nth-2 ul li+li {margin-left: 2%;}

.main__company-desc.nth-2 ul li a {display: block; text-align: center; padding: 95px 15px 110px;}
.main__company-desc.nth-2 ul li h2 {padding-top: 130px; font-size: 22px; font-weight: 700; color: #222; margin-bottom: 20px; position: relative;}
.main__company-desc.nth-2 ul li h2:after {content: ""; display: block; width: 105px; height: 88px; background: url('../images/main/con_ico01.png') center no-repeat; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.main__company-desc.nth-2 ul li:nth-of-type(2) h2:after { width: 114px; height: 80px; background: url('../images/main/con_ico02.png') center no-repeat; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.main__company-desc.nth-2 ul li:nth-of-type(3) h2:after { width: 95px; height: 95px; background: url('../images/main/con_ico03.png') center no-repeat; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.main__company-desc.nth-2 ul li p {font-size: 18px; font-weight: 300; color: #666;}

.main__company-desc.nth-2 ul li:hover a {background: #00243b;}
.main__company-desc.nth-2 ul li:hover h2,
.main__company-desc.nth-2 ul li:hover p {color: #fff;}

.main__company-desc.nth-2 ul li:hover h2:after {background: url('../images/main/con_ico01_h.png') no-repeat;}
.main__company-desc.nth-2 ul li:nth-of-type(2):hover h2:after {background: url('../images/main/con_ico02_h.png') no-repeat;}
.main__company-desc.nth-2 ul li:nth-of-type(3):hover h2:after {background: url('../images/main/con_ico03_h.png') no-repeat;}

.main__company-item.nth-2 {text-align: right;}
.main__company-item.nth-2 .main__company-desc.nth-1 {margin-right: 295px; padding: 115px 90px 120px 0;}
.main__company-item.nth-2 .main__company-desc.nth-1:after {content: ""; display: block; width: 6px; height: 55%; background: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.main__company-item.nth-2 .main__company-desc.nth-1::before {content: ""; display: block; width: 50%; height: 100%; background: url('../images/main/con_bg04.png') top left no-repeat; position: absolute; top: 0; left: calc(100% + 50px); z-index: 1;}


@media only screen and (max-width: 1240px) {
	.main__company-item.nth-1 .main__company-desc.nth-1 {padding: 115px 10px 120px 50px;}
	.main__company-item.nth-2 .main__company-desc.nth-1 {padding: 115px 50px 120px 10px;}
	.main__company-item.nth-1 .main__company-desc.nth-1::before,
	.main__company-item.nth-2 .main__company-desc.nth-1::before {width: 100%;}

	.main__company-desc.nth-1 .main__con_btn a {padding: 15px 30px; font-size: 16px;}
}

@media only screen and (max-width: 1024px) {
	.main__company-item.nth-1 .main__company-desc.nth-1 {margin-left: 190px;}
	.main__company-item.nth-2 .main__company-desc.nth-1 {margin-right: 190px;}

	.main__company-desc.nth-1 .main__con_btn a {border-width: 3px;}

	.main__company-desc.nth-2::before {background-size: cover;}
	.main__company-desc.nth-2 ul li a {padding: 20px 15px;}

	
}

@media only screen and (max-width: 768px) {
	.main__company-desc.nth-1 h2 {font-size: 25px;}
	.main__company-desc.nth-1 p {font-size: 16px;}

	.main__company-desc.nth-2 ul li {width: 100%;}
	.main__company-desc.nth-2 ul li+li {margin: 30px 0 0;}
	.main__company-desc.nth-2 ul li h2 {font-size: 18px;}
	.main__company-desc.nth-2 ul li p {font-size: 16px;}

	.main__company-desc.nth-2 ul li a {padding: 30px 15px;}

	.main__company-item.nth-1 .main__company-desc.nth-1 {margin-left: 100px;}
	.main__company-item.nth-2 .main__company-desc.nth-1 {margin-right: 100px;}
}

@media only screen and (max-width: 480px) {
	.main__company-item.nth-1 .main__company-desc.nth-1 {padding: 80px 10px 100px 30px; margin-left: 50px;}
	.main__company-item.nth-1 .main__company-desc.nth-1::before {right: calc(100% + 30px);}
	.main__company-item.nth-1 .main__company-desc.nth-1:after {height: 65%;}

	.main__company-item.nth-2 .main__company-desc.nth-1 {padding: 80px 30px 100px 10px; margin-right: 50px;}
	.main__company-item.nth-2 .main__company-desc.nth-1::before {left: calc(100% + 30px);}
	.main__company-item.nth-2 .main__company-desc.nth-1:after {height: 65%;}

	.main__company-desc.nth-1 h2 {font-size: 20px;}
	.main__company-desc.nth-1 p {font-size: 15px;}

	.main__company-desc.nth-1 .main__con_btn a {font-size: 14px;}

	.main__company-desc.nth-2::before {right: -20px;}
	.main__company-desc.nth-2::after {right: 0;}
	.main__company-desc.nth-2 ul {padding: 0;}

	.main__company-desc.nth-2 ul li h2 {font-size: 16px; margin-bottom: 10px;}
	.main__company-desc.nth-2 ul li p {font-size: 15px;}
}