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

/* 공통 */
.main__title {margin-bottom: 60px; color: #000;}
section h2.title {font-family: 'KOHIBaeumOTF'; font-size: 50px; transform: skewX(-20deg) translateY(5px);}
.main__title p {font-size: 18px; font-weight: 400; letter-spacing: 0.05em; margin-top: 10px;}

@media only screen and (max-width: 1024px) {
    section h2.title {font-size: 40px;}
}

@media only screen and (max-width: 768px) {
    .main__title {margin-bottom: 40px; text-align: center;}
}

@media only screen and (max-width: 480px) {
    section h2.title {font-size: 30px;}
    .main__title p {font-size: 16px;}
}



/*Main Visual*/
.main__visual {overflow:hidden;}
.main__visual-item::after {display: block; content: ""; width: 1290px; height: 336px; background: url('../images/main/main__visual-bg01.png') no-repeat left top; position: absolute; top: 0; right: 0; z-index: 1;}
.main__visual-item::before {display: block; content: ""; width: 1246px; height: 280px; background: url('../images/main/main__visual-bg02.png') no-repeat left bottom; position: absolute; bottom: 0; left: 0; z-index: 1;}


.main__visual-item {font-size:0; white-space:nowrap; overflow:hidden; position:relative; height:calc(100vh - 100px); min-height:800px !important; max-height:980px !important;}
.main__visual-inner {display:block; width:100%; margin: 0 auto 0; padding: 15% 20px; white-space:normal; position:relative; z-index:10; word-break:keep-all; vertical-align:middle; max-width: 1400px;}

.main__visual-copy {position: absolute; top: 50%; right: 0; z-index: 2;}
.main__visual-copy > h2 {font-family: 'Montserrat'; font-size: 70px; font-weight: 600; color: #0099ff; line-height: 1;}
.main__visual-copy > p {font-size:20px; font-weight:600; color:#fff; line-height:1.3; margin-top: 20px;} 

.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: center; background-repeat: no-repeat; transition:all 10s ease-in-out; transform:scale(1) skew(0.001deg); position: relative;}
.main__visual-item.slick-active > .bg .main__visual-img.is-scale {transform:scale(1.2) skew(0.001deg); transition:all 10s ease-in-out;}

.main__visual-item.nth-1 .main__visual-img{background-image:url('../images/main/main__visual01.png');}
.main__visual-item.nth-2 .main__visual-img{background-image:url('../images/main/main__visual02.png');}
.main__visual-item.nth-3 .main__visual-img{background-image:url('../images/main/main__visual03.png');}
.main__visual-img,
.main__visual-img img{width:100%; height:100%;}

.main__visual-control {margin-top: 90px; display: flex; align-items: center;}
.main__visual-dots {font-size: 16px; font-weight: 700; color: #fff;}
.main__visual-dots span {vertical-align: baseline;}
.main__visual-dots span+span {padding-left: 210px; margin-left: 10px; position: relative;}
.main__visual-dots span+span::before {display: block; content: ""; width: 200px; height: 1px; background: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.main__visual-dots span+span::after {display: block; content: ""; width: 0; height: 1px; background: #00599d; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 6s ease-in; z-index: 1; }
.main__visual-item.slick-active .main__visual-dots span+span::after {animation-duration:7s; animation-iteration-count: initial; animation-name:visual-dots;}

@keyframes visual-dots {
    0% {width: 0;}
    100% {width: 200px;}
}


.main__visual-control .prev {display: block; margin-right: 25px; width: 7px; height: 13px; background: url('../images/common/arrow04.png') no-repeat center;}
.main__visual-control .next {display: block; margin-left: 25px; width: 7px; height: 13px; background: url('../images/common/arrow04.png') no-repeat center; transform: rotate(180deg);}

.main__visual-scroll {position: absolute; bottom: 60px; left: 0; transform: rotate(-90deg); transform-origin: 0 0;}
.main__visual-scroll span {font-family: 'Montserrat'; font-size: 14px; font-weight: 300; color: #fff; padding-right: 210px; position: relative;}
.main__visual-scroll span::after {display: block; content: ""; width: 190px; height: 1px; background: #fff; position: absolute; top: 50%; right: 0; transform: translateY(-50%); animation-duration:5s; animation-iteration-count: infinite; animation-name:visual-dots;}

@media only screen and (max-width: 1440px) {
    .main__visual-item::before {left: auto; right: 30%;}
    .main__visual-item::after {right: auto; left: 30%;}
    .main__visual-inner {margin: 0 20px; width: auto; padding: 20% 20px;}
    .main__visual-copy > h2 {font-size: 60px;}
}

@media only screen and (max-width: 1240px) {
    .main__visual-item {min-height: 700px !important; height: 100%;}
    .main__visual-inner {padding: 23% 20px;}
    .main__visual-copy > h2 {font-size: 50px;}
    .main__visual-copy > p {margin-top: 10px;}
    .main__visual-control {margin-top: 60px;}
}

@media only screen and (max-width: 1024px) {
    .main__visual-item {min-height: 600px !important;}
    .main__visual-copy > h2,
    .main__visual-copy > p {font-weight: 500;}
    .main__visual-control {margin-top: 40px;}
    .main__visual-dots {font-weight: 500;}

    .main__visual-scroll span {font-size: 12px;}
}

@media only screen and (max-width: 768px) {
    .main__visual-item {min-height: 500px !important;}
    .main__visual-inner {padding: 30% 20px;}
    .main__visual-copy {text-align: center; left: 50%; transform: translateX(-50%); width: 100%;}
    .main__visual-copy > h2 {font-size: 40px;}

    .main__visual-control {justify-content: center;}
}

@media only screen and (max-width: 640px) {
    .main__visual-copy > h2 {font-size: 30px;}
    .main__visual-copy > p {font-size: 18px;}
    .main__visual-scroll {bottom: 20px;}
}

@media only screen and (max-width: 480px) {
    .main__visual-scroll {display: none;}
    .main__visual-dots span+span {padding-left: 160px; }
    .main__visual-dots span+span::before { width: 150px; }

    @keyframes visual-dots {
        0% {width: 0;}
        100% {width: 150px;}
    }
}



/* business */
.main__business {padding: 114px 0 0;}
.main__business .main__title {text-align: right; margin-bottom: -50px;}
.main__business-inner {font-size: 0;}
.main__business-item {display: inline-block; width: calc(50% - 30px);}
.main__business-item+.main__business-item {margin-left: 60px;}
.main__business-item.nth-1 {margin-bottom: 250px;}

.main__business-item a {display: block; padding-bottom: 100px; position: relative; transition: all 0.3s ease-in-out;}
.main__business-item a::after {display: block; content: ""; width: 130px; height: 26px; background: url('../images/common/arrow03.png') no-repeat right center; position: absolute; right: 60px; bottom: 46px; transition: all 0.3s ease-in-out;}
.main__business-item .img {width: 100%; height: 460px; background: url('../images/main/main__business-item01.png') no-repeat center / cover; position: relative;}
.main__business-item.nth-2 .img {background: url('../images/main/main__business-item02.png') no-repeat center / cover;}
.main__business-item .title {position: absolute; bottom: 0; left: 0; padding: 30px 50px 10px 0; background: #fff; color: #000; letter-spacing: 0.05em;}
.main__business-item .title h2 {font-size: 40px; font-weight: 600;}
.main__business-item .title p {font-size: 18px; font-weight: 400; line-height: 1.3; margin-top: 20px;}

.main__business-item .hover_more {display: none; width: 100%; height: 100%; background: rgba(0, 102, 204, 0.8); position: absolute; top: 0; left: 0;}
.main__business-item .hover_more p {display: inline-block; padding: 40px; width: 154px; height: 154px; text-align: center; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main__business-item .hover_more span {display: inline-block; font-family: 'Montserrat'; font-size: 20px; font-weight: 500; vertical-align: baseline; text-transform: uppercase; letter-spacing: 0.05em; color: #00599d; padding-top: 40px; position: relative;}
.main__business-item .hover_more span::after {display: block; content: ""; width: 20px; height: 27px; background: url('../images/common/ico-more.png') no-repeat center / contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.main__business-item:hover a {transform: translateY(-10px);}
.main__business-item:hover .title {color: #0066cc;}
.main__business-item:hover a::after {background: url('../images/common/arrow06.png') no-repeat right center; right: 40px;}
.main__business-item:hover .hover_more {display: block;}

@media only screen and (max-width: 1240px) {
    .main__business .main__title {margin-bottom: -30px;}
    .main__business {padding: 100px 0;}
    .main__business-item.nth-1 {margin-bottom: 150px;}
    .main__business-item .img {height: 360px;}
}

@media only screen and (max-width: 1024px) {
    .main__business-item {width: calc(50% - 15px);}
    .main__business-item+.main__business-item {margin-left: 30px;}
    .main__business-item .title h2 {font-size: 30px;}
    .main__business-item .img {height: 300px;}

    .main__business-item a::after {right: 20px; width: 70px;}
    .main__business-item:hover a::after {right: 10px;}
}

@media only screen and (max-width: 768px) {
    .main__business .main__title {margin-bottom: 40px; text-align: center;}
    .main__business-item {width: 100%;}
    .main__business-item+.main__business-item {margin-left: 0;}
    .main__business-item.nth-1 {margin-bottom: 20px;}
    .main__business-item .img {height: 240px;}
}

@media only screen and (max-width: 640px) {
    .main__business-item .title {padding-right: 30px;}
    .main__business-item .title h2 {font-size: 24px;}
    .main__business-item .title p {font-size: 16px;}
}

@media only screen and (max-width: 640px) {
    .main__business-item {padding-bottom: 30px;}
    .main__business-item a::after {bottom: -20px;}
}


/* products */
.main__products {padding: 114px 0 190px; background: url('../images/main/main__products-bg.png') no-repeat center / cover;}
.main__products .main__title {color: #fff;}
.main__products-inner {font-size: 0;}
.main__products-item {display: inline-block; width: 30.6666%; vertical-align: top;}
.main__products-item+.main__products-item {margin-left: 4%;}
.main__products-item.nth-2 {margin-top: 60px;}
.main__products-item a {display: block; background: #fff; padding: 30px 20px 20px; text-align: center; position: relative; transition: all 0.3s ease-in-out;}
.main__products-item a h2 {font-family: 'Montserrat'; font-size: 30px; font-weight: 600; color: #000; margin-top: 30px; position: relative;}

.main__products-item .hover_more {display: none; width: 100%; height: 100%; background: rgba(0, 102, 204, 0.8); position: absolute; top: 0; left: 0;}
.main__products-item .hover_more p {display: inline-block; padding: 20px; width: 105px; height: 105px; text-align: center; border-radius: 50%; background: #fff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.main__products-item .hover_more span {display: inline-block; font-family: 'Montserrat'; font-size: 16px; font-weight: 500; vertical-align: baseline; text-transform: uppercase; letter-spacing: 0.05em; color: #00599d; padding-top: 40px; position: relative;}
.main__products-item .hover_more span::after {display: block; content: ""; width: 20px; height: 27px; background: url('../images/common/ico-more.png') no-repeat center / contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.main__products-item:hover a {transform: translateY(-10px);}
.main__products-item:hover .hover_more {display: block;}
.main__products-item:hover a h2 {color: #fff; z-index: 1;}

@media only screen and (max-width: 1240px) {
    .main__products-item {width: 29.3333%;}
    .main__products-item+.main__products-item {margin-left: 6%;}
    .main__products-item a h2 {font-size: 24px;}
}

@media only screen and (max-width: 1024px) {
    .main__products {padding: 80px 0;}
    .main__products-item {width: 31.3333%;}
    .main__products-item+.main__products-item {margin-left: 3%;}
}

@media only screen and (max-width: 768px) {
    .main__products-item a h2 {font-size: 20px;}
}

@media only screen and (max-width: 640px) {
    .main__products-item {width: 100%;}
    .main__products-item+.main__products-item {margin-left: 0;}
    .main__products-item.nth-2 {margin: 30px 0;}
}


/* info */
.main__info {padding: 160px 0;}
.main__info::after {display: block; content: ""; width: 946px; height: 454px; background: url('../images/main/main__info-bg01.png') no-repeat right top; position: absolute; top: 0; right: 0;}
.main__info::before {display: block; content: ""; width: 134px; height: 110px; background: url('../images/main/main__info-bg02.png') no-repeat left bottom; position: absolute; bottom: 0; left: 0;}
.main__info .inner {text-align: right; z-index: 1;}
.main__info .inner::before {display: block; content: ""; width: 100%; height: 100%; background: url('../images/main/main__info-bg03.png') no-repeat center / cover; position: absolute; top: 0; right: 30%; z-index: -1;}
.main__info .text-box {display: inline-block; padding-top: 50px; width: calc(50% + 60px);}
.main__info .text-box .text {padding: 60px; background: rgba(0, 102, 204, 0.9); text-align: left; color: #fff; position: relative;}
.main__info .text-box .text .more {position: absolute; top: 60px; right: 60px; z-index: 1;}
.main__info .text-box .text .more a {display: block; padding: 15px 30px; border: 1px solid #fff; font-family: 'Montserrat'; font-size: 20px; font-weight: 400; color: #fff;}
.main__info .text-box .text h6 {font-size: 50px; font-weight: 600; letter-spacing: 0.05em; margin-top: 50px; line-height: 1.1;}
.main__info .text-box .text h6 span {vertical-align: baseline; width: 100%; font-size: 30px;}
.main__info .text-box .text p {margin-top: 40px; font-size: 18px; font-weight: 400; color: #fff; line-height: 1.8;}
.main__info .text-box .text .more:hover {background: #fff;}
.main__info .text-box .text .more:hover a {color: #0066cc; font-weight: 600;}

/* .main__info .text-box .btn {display: inline-block;} */
.main__info .text-box .btn a {display: block; padding: 40px 280px 40px 40px; background: #000; position: relative; transition: all 0.3s ease-in-out; text-align: left;}
.main__info .text-box .btn a::after {display: block; content: ""; width: 130px; height: 26px; background: url('../images/common/arrow01.png') no-repeat right center; position: absolute; top: 50%; right: 40px; transform: translateY(-50%); transition: all 0.3s ease-in-out;}
.main__info .text-box .btn span {display: block; font-family: 'KOHIBaeumOTF'; font-size: 30px; transform: skewX(-20deg) translateY(5px); color: #fff;}

.main__info .text-box .btn:hover a {background: #0099ff; padding-left: 60px;}
.main__info .text-box .btn:hover a::after {right: 30px;}

@media only screen and (max-width: 1440px) {
    .main__info .text-box .text h6 {font-size: 40px;}
}

@media only screen and (max-width: 1240px) {
    .main__info .text-box .text {padding: 40px;}
    .main__info .text-box .text .more {top: 40px; right: 40px;}
    .main__info .text-box .text .more a {padding: 10px 30px;}
}

@media only screen and (max-width: 1024px) {
    .main__info .text-box {width: calc(80% + 60px);}
    .main__info .text-box .btn span {font-size: 24px;}
}

@media only screen and (max-width: 768px) {
    .main__info {padding: 100px 0;}

    .main__info .text-box {width: 90%;}
    .main__info .text-box .text h6 span {font-size: 24px;}
    .main__info .text-box .text h6 {font-size: 35px;}
    .main__info .text-box .text p {font-size: 16px;}

    .main__info .text-box .btn a {padding: 25px 280px 25px 25px;}
}

@media only screen and (max-width: 640px) {
    .main__info .text-box {width: 100%;}
    .main__info .text-box .text {padding: 20px;}
    .main__info .text-box .text .more {top: 20px; right: 20px;}
    .main__info .text-box .text .more a {font-size: 18px;}
    .main__info .text-box .text h6 {margin-top: 30px; font-size: 25px;}
    .main__info .text-box .text h6 span {font-size: 20px;}
    .main__info .text-box .text p {margin-top: 20px;}
    .main__info .text-box .btn a {padding-right: 130px;}
    .main__info .text-box .btn span {font-size: 20px;}
}

@media only screen and (max-width: 480px) {
    .main__info .text-box .text {padding: 40px 20px 80px;}
    .main__info .text-box .text .more {top: auto; bottom: 20px;}

    .main__info .text-box .text h6 {font-size: 20px;}
    .main__info .text-box .text h6 span {font-size: 16px;}

    .main__info .text-box .btn a::after {width: 50px;}
}


/* news */
.main__news {background: #000; padding: 50px 0;}
.main__news-box {display: flex;}
.main__news .title {color: #fff; transform: skewX(-20deg) translateY(16px);}

.news_nav {display: flex; align-items: center; margin-left: 70px;}
.news_nav > div {width: 60px; height: 60px; border: 1px solid #fff;}
.news_nav > div+div {margin-left: 14px;}
.news_nav .more a {display: block; width: 100%; height: 100%; background: url('../images/common/ico-plus.png') no-repeat center;}
.news_nav .prev {background: url('../images/common/arrow05.png') no-repeat center; cursor: pointer;}
.news_nav .next {background: url('../images/common/arrow05.png') no-repeat center; transform: rotate(180deg); cursor: pointer;}

.main_news {border: 1px solid #fff; margin-left: 14px; width: 100%; max-height: 60px; overflow: hidden;}
.main_news .slick-list {padding: 0 !important;}
.main_news a {display: block; padding: 20px;}
.main_news a p {font-size: 20px; font-weight: 400; color: #fff; padding-right: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
.main_news a p:after {display: block; content: ""; width: 20px; height: 20px; background: url('../images/common/ico-plus.png') no-repeat center / contain; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.main_news a span {font-family: 'Montserrat'; font-size: 16px; font-weight: 400; position: absolute; top: 50%; right: 80px; transform: translateY(-50%);}

.news_nav > div:hover,
.main_news:hover {background-color: #0066cc;}

@media only screen and (max-width: 1024px) {
    .main__news .title {transform: skewX(-20deg) translateY(10px);}
    .news_nav {margin-left: 50px;}
}

@media only screen and (max-width: 768px) {
    .main__news-box {flex-wrap: wrap; justify-content: space-between;}
    .main_news {width: 100%; margin-left: 0; margin-top: 20px;}
    .news_nav {margin-left: 0;}
    .main_news a p {padding-right: 160px; font-size: 18px;}
    .main_news a p:after {right: 0;}
    .main_news a span {right: 40px;}
}

@media only screen and (max-width: 480px) {
    .main__news .title {transform: skewX(-20deg) translateY(5px);}

    .news_nav > div {width: 30px; height: 30px;}
    .news_nav .prev,
    .news_nav .next {background: url('../images/common/arrow05.png') no-repeat center / 30%;}
    .news_nav .more a {background: url('../images/common/ico-plus.png') no-repeat center / 50%;}

    .main_news {max-height: 90px;}
    .main_news a p {padding-right: 0; padding-bottom: 30px;}
    .main_news a p:after {top: 80%;}
    .main_news a span {top: 80%; font-size: 14px;}
}