@charset "utf-8";

.main {overflow: hidden;}
.mo {display: none;}

/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 100dvh; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide {overflow: hidden;}
.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; transform: scale(1.2);}
.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 .slide04 .backdrop {background-image: url(../images/main/m-visual04.jpg);} 
.m-visual .visual .swiper-wrapper .slide05 .backdrop {background-image: url(../images/main/m-visual05.jpg);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1);}
.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:not(.slide01) .container .txt {width: 100%; max-width: 590px; position: absolute; top: 345px; right: 80px; transition: all .2s ease;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container .txt {max-width: 660px; top: 285px;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide05 .container .txt {max-width: 515px; top: 430px;}
.m-visual .visual .swiper-wrapper .swiper-slide .container h4 {position: absolute; top: -40px; left: 0; width: 100%; font-size: 32px; font-weight: 600; text-align: center; color: #fff; lighting-color: 1.14; letter-spacing: -.64px; font-family: 'Montserrat'; opacity: 0; transition: all 1.2s ease .4s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container img {display: block; max-width: 100%; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 1.2s ease .8s;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 110px; left: 0; width: 100%; font-size: 22px; font-weight: 300; line-height: 1.72; letter-spacing: -.44px; text-align: center; color: #fff; transition: all 1.2s ease 1.2s; opacity: 0;}
.m-visual .visual .swiper-wrapper .swiper-slide .container .more {position: absolute; top: 220px; left: 0; width: 100%; transition: all 1.2s ease 1.6s; opacity: 0;}
.m-visual .visual .swiper-wrapper .swiper-slide .container a {display: block; max-width: 147px; width: 100%; border-radius: 50px; margin: 0 auto; background-color: #0B54B0; text-align: center; line-height: 40px; font-size: 18px; color: #fff; font-weight: 400; letter-spacing: -.36px; border: 1px solid #0B54B0; transition: all .2s linear;}
.m-visual .visual .swiper-wrapper .swiper-slide .container a:hover {background-color: #fff; color: #0B54B0;}

.m-visual .visual .swiper-wrapper .swiper-slide-active:not(.slide01) .container .txt {opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h4 {top: 0; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h4:nth-of-type(2) {top: 60px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container img {top: 80px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 150px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container .more {top: 260px; opacity: 1;} 

.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .container h4 {position: absolute; top: 120px; left: 15px; font-size: 18px; line-height: normal; color: #fff; font-weight: 400; display: flex; justify-content: center; align-items: center; gap: 26px; width: 100%; opacity: 0; transition: all 1.2s ease .1s; text-align: center;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .container h2 {position: absolute; top: 120px; left: 15px; font-size: 91px; line-height: .53; color: #fff; font-weight: 400;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; text-align: center; font-family: 'KccEunyeong'; letter-spacing: -1.82px;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .container img {position: absolute; top: 220px; left: 50%; max-width: 100%; display: block; margin: 0; position: relative; opacity: 0;transition: all 1.2s ease .8s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide01 .container p {position: absolute; top: 280px; left: 15px; font-size: 22px; line-height: 1.72; color: #fff; font-weight: 300; width: 100%; opacity: 0; transition: all 1.2s ease 1.1s; text-align: center; letter-spacing: -.44px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .container h4 {top: 160px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .container h2 {top: 160px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .container img {top: 260px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide01 .container p {top: 320px; opacity: 1;}

.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container h4:nth-of-type(2) {top: 20px; transition: all 1.2s ease .8s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container img {top: 100px; transition-delay: 1.2s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container p {top: 170px; transition-delay: 1.6s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide03 .container .more {top: 280px; transition-delay: 2s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide03 .container h4:nth-of-type(2) {top: 60px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide03 .container img {top: 140px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide03 .container p {top: 210px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide03 .container .more {top: 320px;}

.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container h4:nth-of-type(2) {top: 20px; transition: all 1.2s ease .8s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container h4:nth-of-type(3) {top: 80px; transition: all 1.2s ease 1.2s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container img {top: 140px; transition-delay: 1.6s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container p {top: 200px; transition-delay: 2s;}
.m-visual .visual .swiper-wrapper .swiper-slide.slide04 .container .more {top: 370px; transition-delay: 2.4s;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide04 .container h4:nth-of-type(2) {top: 60px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide04 .container h4:nth-of-type(3) {top: 120px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide04 .container img {top: 180px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide04 .container p {top: 240px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active.slide04 .container .more {top: 410px;}

.controls {position: absolute; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5;}
.controls .visual-pagination {width: 100%;}
.controls .swiper-pagination-bullets {align-items: center; display: flex;}
.controls .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {position: relative; width: 33.3333%; height: 10px; background-color: rgba(255, 255, 255, 0.60); opacity: 1; margin: 0; border-radius: 0;}
.controls .swiper-pagination-bullet::after {position: absolute; content: ''; width: 0%; height: 100%; top: 0; left: 0; background-color: #0B54B0; }
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: rgba(255, 255, 255, 0.80);}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation: bar 4s ease-out forwards;}
@keyframes bar {
	0% {width: 0%;}
	100% {width: 100%;}
}
.controls.paused .swiper-pagination-bullet.swiper-pagination-bullet-active::after {animation-play-state: paused;}

.btn-controls {position: absolute; bottom: 90px; right: 105px; width:11px; height: 14px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto; z-index: 2;}
.btn-controls::before {position: absolute; content:''; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255,255,255, .3); top: 50%; left: 50%; transform: translate(-50%, -50%);}
.btn-controls.play {background-image: url(../images/main/ico_play.png);}

.section-header > span {display: block; font-size: 20px; font-weight: 700; line-height: normal; color: #0B54B0; letter-spacing: -.4px;}
.section-header h3 {color: #303030; font-weight: 700; margin-top: 14px; font-size: 50px; line-height: 1.42; letter-spacing: -1px;}
.section-header h3 > span {color: #0B54B0;}


/* sec2 */
.sec2 {position: relative; padding: 80px 0 160px;}
.sec2::before {position: absolute; content: ''; width: 100%; height: 2098px; background: url(../images/main/bg_sec2.jpg) 50% 50% no-repeat; background-size: auto; top: 0; left: 0; z-index: -1;}
.sec2 .arti01 .section-header h3 {font-size: 60px; line-height: normal; font-family: 'Montserrat'; color: #222;}
.sec2 .product {margin-top: 40px; max-height: 534px; overflow: hidden;  transition: all .5s linear;}
.sec2 .product ul {width: 100%; display: flex; gap: 40px; flex-wrap: wrap;}
.sec2 .product ul li {flex: 0 0 calc(25% - 30px);}
.sec2 .product ul li a {position: relative; width: 100%; height: 100%; background-color: #fff; border-radius: 15px; overflow: hidden; display: block; border: 2px solid transparent; transition: all .2s linear;}
.sec2 .product ul li a .pic {position: relative; height: 0; padding-bottom: 83.08%; overflow: hidden;}
.sec2 .product ul li a .pic img {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100% !important; height: 100% !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.sec2 .product ul li a .txt {position: relative; padding: 0 34px; min-height: 210px;}
.sec2 .product ul li a .txt h5 {font-size: 22px; font-weight: 700; line-height: normal; letter-spacing: -.44px; color: #0B54B0;}
.sec2 .product ul li a .txt p {margin-top: 17px; font-size: 18px; color: #555; line-height: 1.58; font-weight: 500; letter-spacing: -.36px;}
.sec2 .product ul li a > span {position: absolute; bottom: 30px; right: 14px;}
.sec2 .product ul li a > span > img {max-width: 100%; display: block;}
.sec2 .product ul li a:hover {border-color: #0B54B0;}
.sec2 a.list-btn {display: none; width: fit-content; margin: 146px auto 0; position: relative;}
.sec2 a.list-btn::after {position: absolute; content: ''; width: 85px; height: 85px; background: url(../images/main/ico_more_btn.png) 50% 50% no-repeat; background-size: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .15s linear .4s;}
.sec2 a.list-btn.show {display: flex;}
.sec2 a.list-btn.on::after {transform: translate(-50%, -50%) rotate(180deg);}
.sec2 a.list-btn > img {display: block; max-width: 100%; margin: 0 auto;}

.sec2 .arti02 {margin-top: 190px;}
.sec2 .category {margin-top: 65px;}
.sec2 .category ul {width: 100%; display: flex; flex-wrap: wrap; gap: 40px;}
.sec2 .category ul li {flex: 1 1 calc(33.3333% - 30px); min-height: 305px;}
.sec2 .category ul li a {position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; border-radius: 15px; overflow: hidden; background: url() 50% 50% no-repeat; background-size: cover; padding: 40px;}
.sec2 .category ul li:nth-of-type(1) a {background-image: url(../images/main/img_sec205.jpg);}
.sec2 .category ul li:nth-of-type(2) a {background-image: url(../images/main/img_sec206.jpg);}
.sec2 .category ul li:nth-of-type(3) a {background-image: url(../images/main/img_sec207.jpg);}
.sec2 .category ul li:nth-of-type(4) a {background-image: url(../images/main/img_sec208.jpg);}
.sec2 .category ul li:nth-of-type(5) a {background-image: url(../images/main/img_sec209.jpg);}
.sec2 .category ul li:nth-of-type(6) a {background-image: url(../images/main/img_sec210.jpg);}
.sec2 .category ul li a::after {position: absolute; content: ''; width: 100%; height: 100%; border-radius: 15px; background: url(../images/main/img_over.png) 50% 50% no-repeat; background-size: cover; top: 0; left: 0; opacity: 0; transition: all .2s linear;}
.sec2 .category ul li a h5 {font-size: 22px; color: #fff; font-weight: 700; line-height: normal; letter-spacing: -.44px;}
.sec2 .category ul li a:hover::after {opacity: 1;}


/* sec3 */
.sec3 .inner {width: 100%; display: flex;}
.sec3 .section-header {width: 1%; flex: 1 1 auto; background: url(../images/main/bg_sec3.jpg) 50% 50% no-repeat; background-size: cover; padding: 265px 150px;}
.sec3 .section-header > span {color: #f2af1e; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.sec3 .section-header h3 {color: #fff; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.sec3 .section-header p {margin-top: 20px; font-size: 24px; color: #fff; font-weight: 400; line-height: 1.52; letter-spacing: -.48px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);}
.sec3 .inquiry-wrap {max-width: 800px; width: 100%; background-color: #e1ddd6; padding: 80px 118px;}
.sec3 .inquiry {padding-bottom: 45px; border-bottom: 1px solid #fff;}
.sec3 .inquiry .col {width: 100%;}
.sec3 .inquiry .col ~ .col {margin-top: 20px;}
.sec3 .inquiry .col .input {width: 100%; height: 64px; border: 0; border-radius: 10px; padding: 0 35px; border-bottom: 1px solid #bcbcbc; background-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(4.400000095367432px); font-size: 18px; color: #333; font-weight: 400;}
.sec3 .inquiry .col .input:focus {outline: none;}
.sec3 .inquiry .col .input::placeholder {font-size: 18px; font-weight: 400; letter-spacing: -.36px; color: #333;}
.sec3 .inquiry .col .mail {display: flex; align-items: center;}
.sec3 .inquiry .col .mail input {width: 1%; flex: 1 1 auto;}
.sec3 .inquiry .col .mail input:nth-of-type(1) {border-radius: 10px 0 0 10px; padding-right: 5px;}
.sec3 .inquiry .col .mail input:nth-of-type(2) {border-radius: 0 10px 10px 0; padding-left: 5px; max-width: 160px;}
.sec3 .inquiry .col .mail span {display: block; width: auto; color: #333; font-weight: 400; line-height: 63px; text-align: center; background-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(4.400000095367432px); border-bottom: 1px solid #bcbcbc; font-size: 0;}
.sec3 .inquiry .col .mail.on span {font-size: 18px;}
.sec3 .inquiry .col select {width: 100%;  -webkit-appearance:none; background: url(../images/main/ico_select.png) calc(100% - 17px) 50% no-repeat; background-size: auto; background-color: rgba(255, 255, 255, 0.35);}
.sec3 .inquiry .col .mail select {max-width: 160px; padding: 0 17px; margin-left: 12px;}
.sec3 .inquiry .col textarea {padding: 17px 24px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.35); min-height: 172px; width: 100%; border: 0; border-bottom: 1px solid #bcbcbc; backdrop-filter: blur(4.400000095367432px); font-size: 18px; color: #333; font-weight: 400; line-height: 1.58;}
.sec3 .inquiry .col textarea::placeholder {font-size: 18px; font-weight: 400; letter-spacing: -.36px; color: #333;}
.sec3 .inquiry .col textarea:focus {outline: none;}
.sec3 .inquiry .col .file {display: flex; gap: 12px;}
.sec3 .inquiry .col .file input[type="file" i] {width:1%; flex: 1 1 auto; cursor: pointer; line-height: 63px;}
.sec3 .inquiry .col .file input[type="file" i]::-webkit-file-upload-button {display:none;}
.sec3 .inquiry .col .file label {max-width:167px; width: 100%; height:64px; border:1px solid #385d8c; background:#385d8c; font-size:18px; border-radius: 10px; letter-spacing: -.36px; color:#fff; text-align:center; cursor:pointer; transition:all .2s linear; line-height: 62px;}
.sec3 .inquiry .col .file label:hover {background-color: transparent; color: #385d8c;}
.sec3 .inquiry .col .flex {display: flex; gap: 23px; align-items: center; padding-left: 35px;}
.sec3 .inquiry .col .flex .label {font-size: 18px; color: #333; font-weight: 400; max-width: 125px; width: 100%;}
.sec3 .inquiry-wrap .submit-btn {margin-top: 45px; width: 100%; line-height: 68px; background-color: #f2af1e; text-align: center; font-size: 18px; color: #333; font-weight: 700; letter-spacing: -.36px; transition: all .2s linear; border: 1px solid #f2af1e;}
.sec3 .inquiry-wrap .submit-btn:hover {background-color: transparent; color: #f2af1e;}

.sec3 .inquiry-wrap .captcha-box { width: 1%; flex: 1 1 auto;}
.sec3 .inquiry-wrap .captcha-box #captcha {display: flex; align-items: center; flex-wrap: wrap;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_img {border-radius: 10px; border: 0; width: 1%; flex: 1 1 auto; height: 64px;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_key {width: 1%; flex: 1 1 auto; height: 64px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.35); border: 0; margin-left: 12px; padding: 0 10px;  border-bottom: 1px solid #bcbcbc;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_key:focus {outline: none;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_info {width: 100%;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_mp3 {margin-left: 12px;}
.sec3 .inquiry-wrap .captcha-box #captcha #captcha_reload {margin-left: 5px;}