@charset "utf-8";
/* 2026.05 YOU Design theme brandStyle */

/* 1.BRAND VISUAL */
.brand-visual-box { position: relative;width: 100%;}
.brand-visual-box > img { width: 100%;}
.brand-visual-box > img.m-brand { display:none;}
/* 2.INNOVATION */
.innovation-box {position: relative;margin: 280px auto;}
.innovation-box .title-group {width: 1400px;margin: 0 auto;text-align: left;}
.innovation-box .title-group h3 {font-size: 32px;width: 382px;line-height: 1.3;}
.innovation-box .title-group h3>span {font-size: 32px;font-weight: 700;}
.innovation-box .title-group>p {margin-top: 15px;font-size: 24px;line-height: 1.3;width: 850px;}
.innovation-box .nav-buttons {margin: 30px auto 0;width: 1400px;}
.innovation-box .nav-buttons button { margin-right:5px;}
.innovation-box .innovation-swiper {overflow:hidden;width: 100%;margin-top: 110px;padding-left: 0; padding-right: 0;box-sizing: border-box;}
.innovation-box .slider-box.swiper-slide {position: relative;width: 520px;height: 260px;overflow: hidden;background-size: cover;background-position: center;display: flex;justify-content: center;}
.innovation-box .slider-box.item01 { background-image: url("../img/innovation-item01.png"); background-repeat: no-repeat; }
.innovation-box .slider-box.item02 { background-image: url("../img/innovation-item02.png"); background-repeat: no-repeat; }
.innovation-box .slider-box.item03 { background-image: url("../img/innovation-item03.png"); background-repeat: no-repeat; }
.innovation-box .slider-box.item04 { background-image: url("../img/innovation-item04.png"); background-repeat: no-repeat; }
.innovation-box .slider-box .txt-group {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.innovation-box .slider-box .txt-group p.title {font-size: 24px;color: #fff;margin-bottom: 52px;}
.innovation-box .slider-box .txt-group p.sub-txt {font-size: 20px;color: #fff;width: 259px;text-align: center;line-height: 1.3;}
.innovation-box .slider-box .txt-group p.sub-txt::before {content: "";position: absolute;background: #fff;left: 50%;width: 20px;margin-left: -10px;height: 1px;text-align: center;margin-top: -27px;}
/* 3.VIDEO */
.video-box {position: relative;width: 100%;margin: 0 auto;text-align: center;}
.video-box #myVideo {width: 100%;cursor: pointer;}
.video-box .sound_icon {position: absolute;bottom: 20px;z-index: 1;right: 20px;width: 3%;}
.video-txt-box {font-size: 24px;line-height: 1.3;text-align: center;margin: 0 auto;margin-top: 40px;width: 1242px;}
/* 4.PRODUCT GROUP*/
.pro-box {position: relative;margin: 280px auto 0;width: 100%;overflow: hidden;}
.pro-box .title-wrap {width: 1400px;margin: 0 auto 30px;display: flex;justify-content: space-between;align-items: center;}
.pro-box .title-wrap h3 {margin: 0 auto 30px;text-align: left;font-size: 32px;font-weight: 700;}
.pro-box .nav-buttons button {margin-left: 5px;}
.pro-box .product-swiper {width: 100%;padding: 0;}
.pro-box .product-item.swiper-slide {position: relative;width: 470px;}
.pro-box .product-item .img-box {width: 470px;height: 510px;box-sizing: border-box;overflow: hidden;display: flex;align-items: center;justify-content: center;border: 1px solid #E7E7E7;}
.pro-box .product-item .img-box img {display: block;width: 100%;height: 100%;object-fit: cover;object-position: center;}
/* 5.VISION */
.vision-box {position: relative;margin-top: 280px;}
.vision-box h3 {font-size: 32px;font-weight: 700;text-align: center;margin-bottom: 120px;}
.vision-box ul.content {display: flex;justify-content: center;text-align: center;background-color: #000;position: relative;align-items: flex-start;}
.vision-box ul.content li.conbox {width: 100%;height: 730px;cursor: pointer;position: relative;background-size: cover;display: flex;justify-content: center; align-items: center; }
.vision-box ul.content li.conbox .txt-group {display: flex;align-items: center;flex-direction: column;z-index: 1;justify-content: center;position: relative;height: 100%;}
.vision-box ul.content li.conbox .txt-group .title {font-size: 15px;border: 1px solid #000;border-radius: 20px;padding: 5px 20px;}
.vision-box ul.content li.conbox .txt-group .txt {font-size: 20px;margin: 15px 0 27px;}
/* .vision-box ul.content li.conbox .txt-group .hover {opacity: 0; visibility: hidden; transition: opacity 0.3s ease; font-size: 20px; color: #fff; width: 394px;line-height: 1.5;text-align: center;} */
.vision-box ul.content li.conbox .txt-group .hover {display:none;font-size: 18px;color: #fff;width: 394px;line-height: 1.5;text-align: center;}
.vision-box ul.content li.conbox:hover .txt-group p {color: #fff;}
.vision-box ul.content li.conbox:hover .txt-group .title {border-color: #fff;}
.vision-box ul.content li.conbox:hover::after {content: "";position: absolute;background: #000;inset: 0;opacity: 0.4;left: 0;top: 0;}
/* .vision-box ul.content li.conbox:hover .txt-group .hover {opacity: 1; visibility: visible;position: relative;} */
.vision-box ul.content li.conbox:hover .txt-group .hover {display:block;position: relative;}
.vision-box ul.content li.conbox:hover .txt-group .hover::before {content: "";position: absolute;background: #fff;left: 50%;width: 30px;margin-left: -15px;height: 1px;text-align: center;margin-top: -13px;}
.vision-box ul.content li.conbox.item01 {background-image: url("../img/vision-item01.jpg");background-repeat: no-repeat;}
.vision-box ul.content li.conbox.item02 {background-image: url("../img/vision-item02.jpg");background-repeat: no-repeat;}
.vision-box ul.content li.conbox.item03 {background-image: url("../img/vision-item03.jpg");background-repeat: no-repeat;}
/* 6.AMBASSADOR*/
.ambassador-box {width: 100%;margin: 280px 0;}
.ambassador-box .txt-group {text-align: center;}
.ambassador-box .title p {font-size: 50px;font-weight: 700;}
.ambassador-box .link-txt {margin: 70px 0;}
.ambassador-box .link-txt a {font-size: 24px;font-weight: 700;}
.ambassador-box .link-txt a>img {margin-left: 30px;width: 20px;position: relative;}
.ambassador-box .txt-group .sub-txt {font-size: 24px;width: 570px;margin: 0 auto;line-height: 1.5;}


/* 반응형 */
@media (max-width: 1399px) {
/* 공통 text size */
.innovation-box .title-group, .innovation-box .nav-buttons, .video-txt-box, .pro-box .title-wrap { width: 100%; padding:0 5%;}
.vision-box ul.content li.conbox .txt-group .title { font-size: 16px;}
.vision-box ul.content li.conbox .txt-group .txt {font-size: 20px;}
.vision-box ul.content li.conbox .txt-group .hover{font-size: 18px;width:80%;}
}

@media (max-width: 1099px) {
/* 공통 text size */
.innovation-box .title-group, .innovation-box .nav-buttons, .video-txt-box, .pro-box .title-wrap {padding:0;}
.innovation-box .title-group > p,
.video-txt-box,.ambassador-box .txt-group .sub-txt {font-size:20px}
.innovation-box .title-group h3, .innovation-box .title-group h3 > span, 
.vision-box h3 { font-size:28px;}
/* 2.INNOVATION */
.innovation-box { margin:150px auto;}
.innovation-box .title-group { width:90%;}
.innovation-box .title-group h3 {width:100%;}
.innovation-box .title-group > p { width:100%;}
.innovation-box .nav-buttons { width: 90%; margin: 20px auto 0;}
.innovation-box .innovation-swiper { margin-top:70px;}
.innovation-box .slider-box.swiper-slide {width: 300px;border-radius: 20px;height: 220px;}
.innovation-box .slider-box .txt-group p.title{ font-size:18px;}
.innovation-box .slider-box .txt-group p.sub-txt {font-size:16px; width: 100%;}
/* 3.VIDEO */
.video-txt-box { width:90%; margin-top:20px;}
.video-box .sound_icon { width:6%;}
/* 4.PRODUCT GROUP */ 
.pro-box { margin-top:150px;}
.pro-box .title-wrap { width:90%; }
.pro-box .title-wrap h3 {font-size: 26px;margin: 0;}
/* 5.VISION */
.vision-box { margin-top:150px;}
.vision-box h3 {margin-bottom: 70px;}
.vision-box ul.content li.conbox:hover::after {content: none;}
.vision-box ul.content li.conbox .txt-group .title {color: #2c2c2c;border-color: #2c2c2c;}
.vision-box ul.content li.conbox .txt-group .txt {font-size:20px;color: #2c2c2c;}
.vision-box ul.content {flex-direction: column; }
.vision-box ul.content li.conbox { width:100%; height:300px;}
.vision-box ul.content li.conbox .txt-group .hover { width:70%; font-size:18px; display: block;margin-top: 15px;color: #2c2c2c;padding: 0 38px; }
.vision-box ul.content li.conbox .txt-group .hover::before {content: "";position: absolute;background: #2c2c2c;left: 50%;width: 30px;margin-left: -15px;height: 1px;text-align: center;margin-top: -13px;}
.vision-box ul.content li.conbox:hover .txt-group .hover::before {background: #2c2c2c;}
.vision-box ul.content li.conbox.item01 {background-image: url("../img/m-vision-item01.jpg");background-repeat: no-repeat;}
.vision-box ul.content li.conbox.item02 {background-image: url("../img/m-vision-item02.jpg");background-repeat: no-repeat;}
.vision-box ul.content li.conbox.item03 {background-image: url("../img/m-vision-item03.jpg");background-repeat: no-repeat;}
/* 6.AMBASSADOR */
.ambassador-box {margin: 150px 0;padding: 0px 20px;}
.ambassador-box .title p { font-size:38px;}
.ambassador-box .link-txt {margin: 50px 0;}
.ambassador-box .link-txt a {font-size: 20px;}
.ambassador-box .link-txt a > img {margin-left: 30px;width: 20px;position: relative;top: -1px;}
.ambassador-box .txt-group .sub-txt {width: 100%;}
}

@media (max-width: 767px) {
/* BRAND VISUAL */
.brand-visual-box > img.pc-brand { display:none;}
.brand-visual-box > img.m-brand { display:block;}
/* 공통 text size */
.innovation-box .title-group > p,
.video-txt-box, .ambassador-box .txt-group .sub-txt {font-size:16px}
.innovation-box .title-group h3, .innovation-box .title-group h3 > span, 
.vision-box h3{ font-size:24px;}
.vision-box ul.content li.conbox:hover .txt-group .title, .vision-box ul.content li.conbox:hover .txt-group p {color:#2c2c2c; border-color:#2c2c2c; }
.vision-box ul.content li.conbox .txt-group .txt { margin:15px auto;}
.vision-box ul.content li.conbox .txt-group .title {font-size:14px; padding:5px 15px; }
.vision-box ul.content li.conbox .txt-group .txt {font-size:18px;}
.vision-box ul.content li.conbox .txt-group .hover { font-size: 16px; width:100%; }
/* PRODUCT GROUP*/
.pro-box .product-item.swiper-slide {width: 232px;}
.pro-box .product-item .img-box { width: 232px;height: 253px;}
/* 6.AMBASSADOR */
.ambassador-box .title p {font-size:28px;}
.ambassador-box .txt-group .sub-txt { width:90%;}
}