/* 공통 */
#content {padding-top: 120px; overflow: hidden;}
.mo {display: none;}

.section-header h4 {position: relative; font-family: "Wanted Sans Variable"; font-size: 55px; font-weight: 600; color: #000; text-align: center; padding: 45px 0 80px; margin-top: 160px;}
.section-header h4::before {position: absolute; content: ''; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 8px; background-image: url(../images/main/ico.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto;}
.section-header a {display: inline-block; font-size: 18px; color: #666; padding-right: 30px; background-image: url(../images/main/ico_plus2.png); background-repeat: no-repeat; background-position: 100% 50%; background-size: auto; transition: all .15s linear;}
.section-header a:hover {color: #c20711; background-image: url(../images/main/ico_plus_over.png);}
.section-header b {font-size: 55px; font-weight: 600; color: #000;}
.section-header p {font-size: 20px; color: #666; line-height: 32px; padding-top: 30px;}

/* m-visual */
.m-visual .visual {width: 100%; height: 850px; position: relative;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.1);}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.jpg);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.jpg);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.jpg);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.m-visual .visual .swiper-wrapper .swiper-slide h3 {position: absolute; top: 250px; left: 50%; transform: translateX(-50%); text-align: center;  font-size: 70px; color: #fff; font-weight: 600; opacity: 0; transition: all 1s ease; font-family: 'Montserrat'; width: 100%;}
.m-visual .visual .swiper-wrapper .swiper-slide p {position: absolute; top: 350px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 24px; color: #fff; font-weight: 300; opacity: 0; transition: all 1.5s ease .3s; opacity: 0; width: 100%; font-family: "Wanted Sans Variable"}
.m-visual .visual .swiper-wrapper .swiper-slide-active h3 {top: 290px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active p {top: 390px; opacity: 1;}

.controls {width: 170px; position: absolute; top: 475px; left: 50%; transform: translateX(-50%); z-index: 2;}
.controls .visual-pagination {width: 100%; display: flex; align-items: center; justify-content: space-between; }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: 50px; height: 10px; border: 1px solid #fff; border-radius: 0; margin: 0 !important; transition: all .15s linear; background-color: transparent; opacity: 1;}
.swiper-pagination-bullet-active {background-color: #fff !important;}

.scroll-box {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 2;}
.scroll-box > span {font-size: 13px; font-family: 'Montserrat'; font-weight: 600; color: #fff; display: block; text-align: center; width: 100%;}
.scroll-box > button {display: block; width: 22px; height: 31px; margin: 8px auto 0; background-image: url(../images/scroll.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: auto; animation: bounce2 1.3s ease infinite;}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
  
    40% {
      transform: translateY(-5px);
    }
  
    60% {
      transform: translateY(-2px);
    }
}


/* product */
.product .cnt {/* padding-left: 12.61%;  */position: relative;}
.product .cnt:before{position: absolute; content: ''; width: 500px; height: 100%; background: #fff;	left: -15.76%; top: 0; z-index: 10000;}
.product .cnt .swiper{overflow: visible;}
.product .cnt .product-slider {position: relative; height: 560px;}
.product .cnt .product-slider .swiper-wrapper li {border-radius: 24px; /* width: 380px !important; height: 460px !important; */ transition: all .3s linear;}
.product .cnt .product-slider .swiper-wrapper li .item {border-radius: 24px; position: relative;}
.product .cnt .product-slider .swiper-wrapper li .item .txt {background-color: #f7f7f7; padding: 60px 25px 0 50px; min-height: 300px; height: 100%; border-radius: 24px 24px 0 0;}
.product .cnt .product-slider .swiper-wrapper li .item .txt h5 {font-size: 28px; color: #111; font-family: "Wanted Sans Variable";}
.product .cnt .product-slider .swiper-wrapper li .item .txt p {font-size: 22px; color: #666; font-family: "Wanted Sans Variable"; line-height: 35px; padding-top: 25px;}
.product .cnt .product-slider .swiper-wrapper li .item .pic {width: 100%; border-radius: 0 0 24px 24px; overflow: hidden;}
.product .cnt .product-slider .swiper-wrapper li .item .pic img {display: block; width: 100%; margin: 0 auto;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-prev{opacity: 0;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide{transform:scale(0.8)}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active{transform:scale(1); margin-right: 10px !important; }
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active {/* width: 490px !important; height: 100% !important; */ box-shadow: 0px 1px 30px 0px rgba(32, 38, 53, 0.1); padding-top: 0;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active > a {display: block;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active .txt {display: none;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active .pic {display: none;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active .txt-over {opacity: 1;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active {background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; height: 100%;}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr01 {background-image: url(../images/main/bg_product01.jpg);}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr02 {background-image: url(../images/main/bg_product02.jpg);}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr03 {background-image: url(../images/main/bg_product03.jpg);}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr04 {background-image: url(../images/main/bg_product04.jpg);}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr05 {background-image: url(../images/main/bg_product05.jpg);}
.product .cnt .product-slider .swiper-wrapper li.swiper-slide.swiper-slide-active.pr06 {background-image: url(../images/main/bg_product06.jpg);}
.product .cnt .product-slider .product-control {position: absolute; width: 130px; height: 60px; bottom: 0; left: 530px; display: flex; justify-content: space-between; z-index: 5;}

.product .cnt .product-slider .product-control .product-btn {width: 60px; height: 60px; background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto; border: 1px solid #ddd; border-radius: 50%; cursor: pointer; transition: all .2s linear;}
.product .cnt .product-slider .product-control .product-btn.product-prev {background-image: url(../images/main/ico_prev.png);}
.product .cnt .product-slider .product-control .product-btn.product-prev:hover {border: 1px solid #1a2d97; background-image: url(../images/main/ico_prev_on.png);}
.product .cnt .product-slider .product-control .product-btn.product-next {background-image: url(../images/main/ico_next.png);}
.product .cnt .product-slider .product-control .product-btn.product-next:hover {border: 1px solid #1a2d97; background-image: url(../images/main/ico_next_on.png);}

.product .cnt .product-slider .swiper-wrapper li .item .txt-over {opacity: 0; width: 100%; height: 100%; padding: 80px 30px 0 60px; font-family: "Wanted Sans Variable"; position: absolute; top: 0; left: 0; transition: all .9s linear;}
.product .cnt .product-slider .swiper-wrapper li .item .txt-over h5 {display: block; width: 160px; line-height: 45px; text-align: center; font-size: 18px; color: #fff; font-weight: 400; background-color: #1a2d97; border-radius: 30px;}
.product .cnt .product-slider .swiper-wrapper li .item .txt-over b {display: block; font-size: 24px; font-weight: 500; color: #fff; line-height: 40px; padding-top: 32px;}
.product .cnt .product-slider .swiper-wrapper li .item .txt-over > p {font-size: 18px; line-height: 32px; padding-top: 40px; color: #fff; opacity: .7;}
.product .cnt .product-slider .swiper-wrapper li > a {display: none; position: absolute; bottom: 60px; right: 57px; width: 60px; height: 60px; border-radius: 50%; background-color: #fff; background-image: url(../images/main/ico_plus2.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto; z-index: 2; transition: all .2s linear;}
.product .cnt .product-slider .swiper-wrapper li > a:hover {background-color: #1a2d97; background-image: url(../images/main/ico_plus_over.png);}


/* intro */
.intro {margin-top: 180px; display: flex; font-family: "Wanted Sans Variable";}
.intro .left {background-image: url(../images/main/bg_intro1.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 50%; padding: 200px 20px 210px 240px;}
.intro .left small {font-size: 18px; color: #f86d11; font-weight: 500;}
.intro .left h4 {font-size: 50px; color: #fff; font-weight: 400; padding-top: 30px;}
.intro .left h4 b {font-weight: 500;}
.intro .left p {font-size: 18px; color: #fff; padding-top: 50px; opacity: .7;}
.intro .left .btn-banner {margin-top: 160px;}
.intro .left .btn-banner a {display: block; width: 300px; line-height: 70px; padding: 0 40px 0 35px; font-size: 18px; color: #666; background-image: url(../images/main/ico_plus.png); background-repeat: no-repeat; background-position: calc(100% - 40px) 50%; background-size: auto; border-radius: 5px; transition: all .2s linear; background-color: #fff;}
.intro .left .btn-banner a ~ a {margin-top: 15px;}
.intro .left .btn-banner a:hover {background-color: #1a2d97; color: #fff; background-image: url(../images/main/ico_plus_over.png);}
.intro .right {background-image: url(../images/main/bg_intro2.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; width: 50%;}

/* news */
.news .container .cnt-list ul {display: flex; width: calc(100% + 45px); margin: 0 -22.5px;}
.news .container .cnt-list ul li {padding: 0 22.5px; width: 33.33333%; height: 460px;}
.news .container .cnt-list ul li .txt-box {height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; border-radius: 20px; font-family: "Wanted Sans Variable"; padding: 90px 105px 100px; transition: all .2s linear;}
.news .container .cnt-list ul li:nth-of-type(1) .txt-box {background-image: url(../images/main/img_bg01.png);}
.news .container .cnt-list ul li:nth-of-type(2) .txt-box {background-image: url(../images/main/img_bg02.png);}
.news .container .cnt-list ul li:nth-of-type(3) .txt-box {background-image: url(../images/main/img_bg03.png);}
.news .container .cnt-list ul li .txt-box b {display: block; font-size: 40px; color: #fff; text-align: center; font-weight: 500;}
.news .container .cnt-list ul li .txt-box p {font-size: 18px; color: #fff; opacity: .7; line-height: 32px; padding-top: 25px; text-align: center; display: -webkit-box; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.news .container .cnt-list ul li a {display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #1a2d97; background-image: url(../images/main/ico_plus_over.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto; margin: 85px auto 0; transition: all .2s linear;}
.news .container .cnt-list ul li .txt-box:hover a {background-color: #fff; background-image: url(../images/main/ico_plus.png);}
.news .container .cnt-list ul li:nth-of-type(1) .txt-box:hover {background-image: url(../images/main/img_bg_over01.png);}
.news .container .cnt-list ul li:nth-of-type(2) .txt-box:hover {background-image: url(../images/main/img_bg_over02.png);}
.news .container .cnt-list ul li:nth-of-type(3) .txt-box:hover {background-image: url(../images/main/img_bg_over03.png);}

/* notice */
.notice {margin-top: 180px; width: 100%; background-image: url(../images/main/bg_notice.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding: 160px 0;}
.notice .section-header h4 {margin-top: 0;}
.notice .list ul {width: 100%;}
.notice .list ul li {display: flex; align-items: center; height: 100px; background-color: #fff;}
.notice .list ul li ~ li {margin-top: 20px;}
.notice .list ul li span {font-size: 28px; font-weight: bold; color: #999; display: inline-block; width: 12.5%; text-align: center; position: relative; line-height: 100px; transition: all .2s linear; font-family: 'Montserrat';}
.notice .list ul li span::after {position: absolute; content: ''; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 40px; background-color: #ddd;}
.notice .list ul li a {display: block; width: 87.5%; padding: 0 40px 0 45px; line-height: 100px; font-family: "Wanted Sans Variable"; display: flex; justify-content: space-between; align-items: center;}
.notice .list ul li a p {width: 75%; font-size: 20px; color: #666; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .2s linear;}
.notice .list ul li a i {display: block; width: 35px; height: 35px; border-radius: 50%; background-color: #999; background-image: url(../images/main/ico_plus_small.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto; transition: all .2s linear;}
.notice .list ul li:hover span {color: #1a2d97;}
.notice .list ul li:hover a p {color: #000; font-weight: 500;}
.notice .list ul li:hover a i {background-color: #1a2d97;}
.notice .notice-btn {margin: 80px auto 0; width: 300px;}
.notice .notice-btn a {display: block; width: 100%; line-height: 80px; font-size: 18px; color: #fff; background-color: #1a2d97; padding-left: 35px; background-image: url(../images/main/ico_plus_over.png); background-repeat: no-repeat; background-position: calc(100% - 40px) 50%; background-size: auto; border-radius: 5px; transition: all .2s linear;} 
.notice .notice-btn a:hover {background-color: #fff; color: #666; background-image: url(../images/main/ico_plus.png);}