@import "zsup.css";
.fs0{font-size: 0;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.relative-box{position: relative;}
.txt-title{position: relative; padding-left: 14px;}
.txt-title:before{content: ""; display: inline-block; width: 4px; height: 20px; background: #23318f; position: absolute; top: calc(50% - 1px); left: 0; transform: translate(0%, -50%);}
.sub-max-width1000{max-width: 1420px; margin: 0 auto; }
.sub-max-width1200{max-width: 1420px; margin: 0 auto; }
.sub-max-width600{max-width: 600px; margin: 0 auto;}
.bg-gray-box{background: #f7f7f7; padding: 20px;}
.back-gray-txt{background: #f7f7f7; padding: 20px; border-radius: 10px;}
.wh-img-100{width: 100%;}
.keep-txt{word-break: keep-all;}
.border-img-box{border: 1px solid #ddd;}
.border-img-box .border-padding-in{padding: 20px; text-align: center;}
.ud-border{padding: 10px 0; margin: 10px 0; border-top: 2px solid #222; border-bottom: 2px solid #222;}
.br-txt br{display: none;}
.txt-keep{word-break: keep-all;}
@media (min-width: 768px) {
    .bg-gray-box{padding: 40px;}
    .back-gray-txt{padding: 40px;}
    .border-img-box .border-padding-in{padding: 40px;}
    .ud-border{padding: 20px 0; margin: 20px 0;}
    .br-txt br{display: block;}
}
@media (min-width: 992px) {
    .txt-title{padding-left: 20px;}
    .txt-title:before{content: ""; display: inline-block; width: 4px; height: 20px; position: absolute; top: calc(50% - 2px); }
}

/* 인사말 CEO GREETING */
.top-lnk-box .top-lnk-list{display: inline-block;}
.top-lnk-box .top-lnk-list a{display: block; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; color: #999;}
.top-lnk-box .top-lnk-list .top-lnk-pre{ width: 30px; position: relative; display: inline-block; padding-right: 10px;}
.top-lnk-box .top-lnk-list .top-lnk-youtube{ width: 30px; position: relative; display: inline-block; margin-right: 10px;}
.top-lnk-box .top-lnk-list .top-lnk-pre:before{content: ""; display: inline-block; width: 8px; height: 8px; border-color: #949494; border-top: 1px solid #949494; border-left: 1px solid #949494; -webkit-transform: rotate(314deg); -moz-transform: rotate(314deg); -ms-transform: rotate(314deg); -o-transform: rotate(314deg); transform: rotate(314deg);}

.ceo-greeting-box {margin-top: 40px; font-size: 0; overflow: hidden;}
.ceo-greeting-box .ceo-greeting-img{position: relative; z-index: 1;}
.ceo-greeting-box .ceo-greeting-img:before { display: block; content: ""; position: absolute; left: calc(-100% + 10px);; width: 200%; height: 105%; max-height: 570px; z-index: 0; transition: 0.8s ease;}
.ceo-greeting-box .ceo-greeting-img .ceo-photo{position: relative; z-index: 1;}
.ceo-greeting-box .ceo-greeting-img .ceo-photo .ceo-name-box{color: #444; padding: 0 10px;}
.ceo-greeting-box .ceo-greeting-txt{margin-top: 40px; position: relative; word-break: keep-all;}
.ceo-greeting-details {position: relative; word-break: keep-all; background: linear-gradient(to bottom, #f7f7f7 0%, #ffffff 100%); padding: 40px 0;}
.ceo-greeting-box .ceo-greeting-txt .ceo-greeting-right-top{margin-top: 20px;}
.color-table .basic-table thead th{background: #333; color: #fff;}
.color-table .basic-table tbody td{background: #fff; word-break: break-word;}
.color-table .basic-table tbody th{background: #f7f7f7;}
.color-table .basic-table tbody .bg-td th{background: #f8edee; color: #9b1b30; border-color: #dbc3c5;}

.pre-ceo-greeting{max-width: 800px; margin: 0 auto;}
.pre-ceo-greeting .basic-table{min-width: auto;}
.pre-ceo-greeting .download-icon-20 {margin-left: 6px; vertical-align: middle; display: inline-block; margin-bottom: 5px;}
.pre-ceo-greeting .greeting-download-a {vertical-align: middle; display: block;}
.pre-ceo-greeting .download-icon-20 img{max-width: 16px;}
@media (min-width: 768px) {
    .ceo-greeting-box {margin-top: 100px; overflow: inherit;}
    .top-lnk-box .top-lnk-list a{ padding: 12px 20px;}
    .ceo-greeting-box .ceo-greeting-two{margin: 0 -30px;}
    .ceo-greeting-box .ceo-greeting-img{width: calc(40% - 30px); margin: 0; vertical-align: top; display: inline-block;}
    .ceo-greeting-box .ceo-greeting-txt{width: calc(60% - 60px); margin: 0 30px; vertical-align: top; display: inline-block; }
    .ceo-greeting-box .ceo-greeting-txt .ceo-greeting-right-top{margin-top: 50px;}
    .ceo-greeting-box .ceo-greeting-img .ceo-photo{margin-top: -50px;}
    .ceo-greeting-box .ceo-greeting-img:before{height: 120%; left: -100%;}
    .ceo-greeting-box .ceo-greeting-img .ceo-photo .ceo-name-box{padding: 0;}
    .ceo-greeting-details {padding: 80px 0;}
}

/* 오른쪽이 따라다니는 레이아웃*/
.fixed-layout .right-fixed-con {margin-top: 40px;}
.fixed-layout .right-fixed-con .right-fixed-box .right-fixed-title{position: relative; padding-bottom: 20px;}
.fixed-layout .right-fixed-con .right-fixed-box .right-fixed-title:before{content: ""; position: absolute; left: 0; bottom: 10px; width: 20px; height: 3px; background: #9b1b30;}
.fixed-layout .right-banner{margin-top: 20px!important; text-align: center;}
.fixed-layout .right-banner .right-banner-list + .right-banner-list{margin-top: 10px;}
@media (min-width: 768px) {
    .fixed-layout .left-fixed-con{width: 70%; display: inline-block; vertical-align: top;}

    .fixed-layout .right-fixed-con { width: calc(30% - 44px); margin-left: 40px; display: inline-block; vertical-align: top; position: sticky; top: 130px; margin-top: 0;}
    .fixed-layout .right-fixed-con .right-fixed-box .right-fixed-title:before{bottom: 10px; width: 40px; height: 4px;}
    .fixed-layout .right-banner{text-align: left}
    .fixed-layout .right-banner .right-banner-list img{max-width: 270px;}
}

/* 이미지 두개*/
.wh50-img-box{font-size: 0; margin: 0 -10px;}
.wh50-img-box .wh50-img{width: calc(100% /  2 - 20px); margin: 0 10px; display: inline-block;}
.wh50-img-box .wh50-img:nth-child(3){margin-top: 20px;}
.bg-gray-wh50-img-box { display: flex; margin: 0 -10px; gap: 20px;}
.bg-gray-wh50-img { background: #f7f7f7; padding: 20px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 제목에 다운로드*/
.title-download-box{font-size: 0;}
.title-download-box .title-download-lnk{margin-top: 10px; text-align: right;}
.title-download-lnk a{display: inline-block; background: #333; padding: 14px 16px; border-radius: 5px; color: #fff; min-width: 120px; text-align: center; font-weight: 700; }
.title-download-lnk a .w-download-icon{max-width: 12px; margin-left: 6px; margin-bottom: 2px;}
.title-download-lnk a:hover{background: #9b1b30;}
@media (min-width: 768px) {
    .title-download-box .title-download-txt{width: 75%; display: inline-block;}
    .title-download-box .title-download-lnk{width: calc(25% - 20px); margin-left: 20px; margin-top: 0px; display: inline-block; vertical-align: top;}
    .title-download-lnk a{ padding: 16px 20px; min-width: 150px;}
    .title-download-lnk a .w-download-icon{max-width: 16px; }
}


/*인증서*/
.certificate-leader .bg-gray-wh50-img{position: relative;}
.certificate-leader .bg-gray-wh50-img .certificate-leader-txt{position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 100%;}
.certificate-breakdown{font-size: 0;}
.certificate-breakdown .certificate-list{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top;}
.certificate-breakdown .certificate-list .certificate-img{height: 0; overflow: hidden; position: relative; padding-bottom: 140.38%;  border: 1px solid #ddd;}
.certificate-breakdown .certificate-list .certificate-img img{max-width: 100%; position: absolute; min-height: 100%;left: 50%; top: 50%; transform: translate(-50%, -50%);}
.certificate-breakdown .certificate-list:nth-child(n+3){margin-top: 20px;}
.certificate-breakdown .certificate-list .certificate-txt{word-break: keep-all;}
@media (min-width: 768px) {
    .certificate-leader .bg-gray-wh50-img .certificate-leader-txt{bottom: 20px;}
    .certificate-breakdown .certificate-list{width: calc(100% / 3 - 20px);}
    .certificate-breakdown .certificate-list:nth-child(n+3){margin-top: 0px;}
    .certificate-breakdown .certificate-list:nth-child(n+4){margin-top: 20px;}
}
@media (min-width: 992px) {
    .certificate-breakdown .certificate-list{width: calc(100% / 6 - 20px);}
    .certificate-breakdown .certificate-list:nth-child(n+4){margin-top: 0px;}
    .certificate-breakdown .certificate-list:nth-child(n+7){margin-top: 20px;}
}

/*탭 tab*/
.tab-container { width: 100%; overflow: hidden; margin-bottom: 20px;  position: relative;}

/* 모바일용 셀렉트 스타일 */
.mobile-tab-select {  width: calc(100% - 40px); padding: 12px 15px; margin: 20px; border: 1px solid #dcdcdc; border-radius: 8px; display: block;   background-color: #fafafa; color: #555; -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  cursor: pointer; transition: border-color 0.3s;}
.tab-container:before{content: ""; position: absolute; top: 37px; right: 40px; width: 8px; height: 8px; border-color: #949494; border-top: 1px solid #949494; border-left: 1px solid #949494;
-webkit-transform: rotate(223deg);
-moz-transform: rotate(223deg);
-ms-transform: rotate(223deg);
-o-transform: rotate(223deg);
transform: rotate(223deg);}
.mobile-tab-select:focus { outline: none; border-color: #9b1b30; }

/* PC용 탭 메뉴는 모바일에서 숨김 */
.desktop-tabs { display: none; list-style: none; padding: 0;  margin: 0;  border-bottom: 1px solid #eee;}
.tab-item { padding: 18px 25px; cursor: pointer; background-color: #f0f2f5; border-right: 1px solid #eee;  border-bottom: 3px solid transparent; transition: background-color 0.3s, border-bottom-color 0.3s, color 0.3s; font-weight: bold; color: #999; flex-grow: 1;  text-align: center; white-space: nowrap;}
.tab-item:last-child { border-right: none;}
.tab-item:hover { background-color: #e2e4e8; color: #444;}
.tab-item.active { background-color: #fff; border-bottom-color: #9b1b30; color: #9b1b30;}

/* 탭 컨텐츠 스타일 */
.tab-content { display: none; background-color: #fff;}
.tab-content h3 { color: #9b1b30;  margin-top: 0; margin-bottom: 15px;}
.tab-content.active { display: block;}

@media screen and (min-width: 768px) {
    .mobile-tab-select { display: none;}
    .desktop-tabs { display: flex;}
    .tab-container:before{content: none;}
}

/*연혁*/
 .history-box { position: relative;}
 .history-box ul { margin-left: 0;}
 .history-box ul li { position: relative; padding-left: 0; padding-right: 0; text-align: left; padding-bottom: 20px; background: linear-gradient(#e2e2e2, #e2e2e2) no-repeat 10px top / 1px 100%}
 .history-box ul li:last-child { background-size: 0;}
 .history-box ul li:nth-child(2n+1) { position: relative; padding-right: 0; padding-left: 0; text-align: left;}
 .history-box ul li span { position: relative;}
 .history-box ul li span:before { width: 22px; height: 22px; background: #fff; border-radius: 500px; content: ''; left: -40px; right: inherit; top: 0; position: absolute; border: 1px solid #9b1b30;}
 .history-box ul li span:after { width: 8px; height: 8px; background: #9b1b30; border-radius: 500px; content: ''; left: -33px;right: inherit; top: 7px; position: absolute;}
 .history-box ul li:nth-child(2n+1) span:before { width: 22px; height: 22px; background: #fff; border-radius: 500px; content: ''; left: -40px; right: inherit; top: 0; position: absolute; border: 1px solid #9b1b30;}
 .history-box ul li:nth-child(2n+1) span:after { width: 8px; height: 8px; background: #9b1b30; border-radius: 500px; content: ''; left: -33px; right: inherit; top: 7px; position: absolute;}
 .history-box ul li .his-text { padding-left: 40px;}
 .history-box ul li .his-text .his-stxt-box + .his-stxt-box{ margin-top: 40px;}
 .history-box ul li:nth-child(2n+1) .his-text { padding-right: 0;}
 .history-box ul li .his-text p { display: block; padding-bottom: 5px;}
 .history-box ul li:nth-child(2n+1) .his-text p { display: block; padding-bottom: 5px;}
 .history-box ul li .his-text span {display: block;}
 .history-box .his-img { position: relative; padding: 30px 0 0 40px;}
 .history-box .his-img>div { display: inline-block;}
 .history-box .his-img-2 { position: relative; padding: 30px 0 0 40px;}
 .history-box .his-img-2>div { display: inline-block;}

 @media(min-width:992px) {
 	.history-box ul li { padding-left: 50%; background: linear-gradient(#e2e2e2, #e2e2e2) no-repeat center top / 1px 100%}
 	.history-box ul li .his-text { padding-left: 80px;}
 	.history-box ul li:nth-child(2n+1) { padding-right: 50%; text-align: right;}
 	.history-box ul li:nth-child(2n+1) .his-text { padding-right: 80px}
 	.history-box ul li span:before { left: -91px; right: inherit; top: 0;}
 	.history-box ul li span:after { left: -84px; right: inherit; top: 7px;}
 	.history-box ul li:nth-child(2n+1) span:before { right: -91px; left: inherit; top: 0;}
 	.history-box ul li:nth-child(2n+1) span:after { right: -84px; left: inherit; top: 7px;}
 	.history-box .his-img { position: absolute; right: 52%; top: 10%;}
 	.history-box .his-img > div { display: inline-block; padding: 0 10px; vertical-align: top;}
 	.history-box .his-img-2 { position: absolute; right: 26%; top: 17%;}
 	.history-box .his-img-2>div { display: inline-block; padding: 0 10px; vertical-align: top;}
 }


/* right SUNJIN NEWS */
.right-news-form .right-news-form-ul .right-news-form-li + .right-news-form-li{margin-top: 10px;}
.right-news-form .right-news-form-ul .right-news-form-li .right-news-input{border: 1px solid #ddd; width: 100%; padding: 5px; border-radius: 4px;}
.right-news-form .right-news-btn{background: #444; color: #fff; width: 100%; border: 0; text-align: center; padding: 14px 10px; border-radius: 4px; font-weight: 700;}
.right-news-sns .right-news-sns-list{width: calc(100%/ 2 - 14px); margin: 0 5px; display: inline-block; vertical-align: top;}
.basicSet .right-news-sns {margin: 0 -5px!important;}
.right-news-sns .right-news-sns-list .right-news-sns-lnk{display: block; color: #fff; padding: 10px 20px; background: #999; border-radius: 30px; text-align: center; font-weight: 600;}
.right-news-sns .right-news-sns-list:nth-child(1) .right-news-sns-lnk{background: #445e99;}
.right-news-sns .right-news-sns-list:nth-child(2) .right-news-sns-lnk{background: #d72d2e;}
.right-news-sns .right-news-sns-list .right-news-sns-img{display: inline-block;}
.right-news-sns .right-news-sns-list .right-news-sns-img img{max-width: 20px;}
.right-news-sns .right-news-sns-list .right-news-sns-txt{display: inline-block;}
.right-mini-news .right-mini-news-list + .right-mini-news-list{margin-top: 10px;}
.right-mini-news .right-mini-news-list .right-mini-news-lnk{display: block;}
.right-mini-news .right-mini-news-list .right-mini-news-lnk .right-mini-news-img{width: 30%; display: inline-block; padding-bottom: 15.375%; height: 0; overflow: hidden; position: relative; vertical-align: middle; background: #f7f7f7;}
.right-mini-news .right-mini-news-list .right-mini-news-lnk .right-mini-news-img img { max-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.right-mini-news .right-mini-news-list .right-mini-news-lnk .right-mini-news-txt{width: calc(70% - 24px); margin-left: 20px; display: inline-block; vertical-align: middle;}
.right-mini-news .right-mini-news-list .right-mini-news-lnk .right-mini-news-txt .right-mini-news-title{width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}


/* WEBINAR */
.webinar-people-box .webinar-people-list{box-shadow: 2px 2px 10px rgba(0,0,0,0.1); padding: 20px; border-radius: 10px;}
.webinar-people-box .webinar-people-list .webinar-people-img{width: 80px; height: 80px; border-radius: 20px; overflow: hidden; position: relative; display: inline-block; vertical-align: middle;}
.webinar-people-box .webinar-people-list .webinar-people-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.webinar-people-box .webinar-people-list .webinar-people-txt{display: block;}
.webinar-people-box .webinar-people-list:nth-child(n+2){margin-top: 20px;}
@media(min-width:992px) {
    .webinar-people-box .webinar-people-list{width: calc(100% / 2 - 24px); margin: 0 10px;  display: inline-block; vertical-align: top;}
    .webinar-people-box .webinar-people-list:nth-child(n+2){margin-top: 0px;}
    .webinar-people-box .webinar-people-list:nth-child(n+3){margin-top: 20px;}
    .webinar-people-box .webinar-people-list .webinar-people-img{width: 150px; height: 150px;}
    .webinar-people-box .webinar-people-list .webinar-people-txt{margin-top: 10px;}
    
}

/* exhibition*/
.padd-bottom-banner{padding-bottom: 40px; position: relative;}
.padd-bottom-banner .facebook-banner{display: block;  position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; text-align: center; background: #3b5998; padding: 10px; font-weight: 700;  vertical-align: middle;}
.padd-bottom-banner .facebook-banner:hover{color: #fff;}
.padd-bottom-banner .facebook-banner .facebook-icon20{display: inline-block; vertical-align: middle; margin-right: 10px;}
.padd-bottom-banner .facebook-banner .facebook-icon20 img{max-width: 20px;}

/* news-letter*/
.sub-newsletter-list .sub-newsletter-lnk{ display: block; font-size: 0;}
.sub-newsletter-list .sub-newsletter-left { overflow: hidden; padding-bottom: 54.375%; aspect-ratio: 16 / 9; position: relative;}
.sub-newsletter-list .sub-newsletter-right{margin-top: 20px;}
.sub-newsletter-list .sub-newsletter-right .sub-newsletter-title{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.sub-newsletter-list .sub-newsletter-right .sub-newsletter-txt{ width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.sub-newsletter-list .sub-newsletter-left img { max-width: 100%; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.sub-newsletter-list .sub-newsletter-lnk:hover .sub-newsletter-left img {transform: translate(-50%, -50%) scale(1.1);}
.sub-newsletter-list + .sub-newsletter-list{ margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee;}
@media (min-width: 768px) {
    .sub-newsletter-list .sub-newsletter-right{ width: calc(100% - 40% - 80px); margin-left: 80px; margin-top: 0; display: inline-block; vertical-align: middle;}
    .sub-newsletter-list .sub-newsletter-left { width: 40%; margin-top: 0;  padding-bottom: 22.375%; display: inline-block; vertical-align: middle;}
}

/* 뉴스레터 뷰*/
.news-letter-page{overflow: hidden;}
.news-letter-page-bg{ position: relative;}
.news-letter-page-bg-txt .letter-txt-top .news-letter-language-txt{font-weight: 600;  background: #9b1b30; display: inline-block; color: #fff; padding: 5px 14px;}
.news-letter-page-bg-txt .letter-txt-top .news-letter-date{color: #aaa;}
.news-by-txt { text-align: left;}
.news-by-txt dl{display: block; position: relative; color: #888;}
.news-by-txt dl dt{display: inline-block; padding-right: 10px;}
.news-by-txt dl dd{display: inline-block; /*color: #999;*/}
.news-body-txt {max-width:1000px; margin: 0 auto; word-break: keep-all;}
.news-related .related-box {font-size: 0; margin: 0 -10px!important;}
.news-related .related-box .related-list{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top;}
.news-related .related-box .related-list:nth-child(n+3){margin-top: 30px;}
.news-related .related-box .related-list .related-img-box{ height: 0; overflow: hidden; position: relative; background: #f9f9f9; padding-bottom: 56.375%;}
.news-related .related-box .related-list .related-img-box img{max-width: 100%; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.news-related .related-box .related-list .related-img-box .related-language-txt{position: absolute; top: 5px; left: 5px; z-index: 1; font-weight: 600; background: #9b1b30; display: inline-block; color: #fff; padding: 5px 14px;}
.news-related .related-box .related-list .news-letter-date{text-align: right; color: #999;}
.news-related .related-bottom .news-letter-title{ margin-top: 10px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  transition: 0.5s;}
.news-related .related-box .related-list:hover .related-img-box img{transform: translate(-50%, -50%) scale(1.1);}
.news-related .related-box .related-list:nth-child(n+5){display: none;}
@media (min-width: 992px) {
    .news-by-txt dl + dl {margin-top: 10px!important;}
    .news-related .related-box .related-list{width: calc(100% / 4 - 20px);}
    .news-related .related-bottom .news-letter-title{margin-top: 20px;}
    .news-related .related-box .related-list .related-img-box .related-language-txt{position: absolute; top: 10px; left: 10px;}
    .news-related .related-box .related-list:nth-child(n+3){margin-top: 0px;}
}

/* 뉴스레터 뷰 하단 리스트*/
.basicSet .related-box {font-size: 0; margin: 0 -10px!important;}
.related-box .related-list{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top; margin-bottom: 20px;}
.related-box .related-list .related-lnk{display: block;}
.related-box .related-list .related-title{width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.related-box .related-list .related-txt{width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.related-box .related-list .related-img{width: 100%; margin-top: 0; padding-bottom: 56.375%; display: inline-block; position: relative; overflow: hidden;}
.related-box .related-list .related-img img{max-width: 100%; position: absolute; min-height: 100%; left: 50%;top: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease-in-out;}
.related-box .related-list .related-lnk:hover .related-img img{transform: translate(-50%, -50%) scale(1.1);}
@media (min-width: 992px) {
    .basicSet .related-box {margin: 0 -20px!important;}
    .related-box .related-list{width: calc(100% / 4 - 40px); margin: 0 20px;}
}

/* 뉴스레터 뷰 공유*/
.news-body-total .share-buttons{text-align: right;}
.news-body-total .share-buttons .share-button{display: inline-block; margin: 0 2px; width: 35px; height: 35px; border-radius: 50%; background: #333; position: relative;}
.news-body-total .share-buttons .share-button .share-img{display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.news-body-total .share-buttons .share-button .share-img img{max-width: 20px;}
.news-body-total .share-buttons .share-button.facebook{background: #516eab;}
.news-body-total .share-buttons .share-button.twitter{background: #29c5f6;}
.news-body-total .share-buttons .share-button.whatsapp{background: #7bbf6a;}
.news-body-total .share-buttons .share-button.email{background: #000;}
.news-body-total .share-buttons .share-button.print{background: #333;}
.news-body-total .share-buttons .share-button.telegram{background: #179cde;}
.news-body-total .share-buttons .share-button.naver{background: #3ec729;}
@media (min-width: 992px) {
    .news-body-total .share-buttons .share-button{width: 45px; height: 45px;}
    .news-body-total .share-buttons .share-button .share-img img{max-width: 24px}
}

/*인쇄 시 */
@media print {
    a:after {
        content: "" !important;
    }
    * {
      -webkit-print-color-adjust: exact !important;
      color-adjust: exact !important;
    }
    header ,.page-nav, .submenu-box , .ftTop, footer{display:none;}
}


/* 비전*/
.basicSet .vision-box{font-size: 0; margin: 0 -10px!important;}
.vision-box .vision-list{width: calc(100% / 2 - 20px); margin: 0 10px 30px; display: inline-block; vertical-align: top; word-break: keep-all;}
.vision-box .vision-icon{width: 100%; height: 100px; border-radius: 10px; background: #fff7f8; margin: 0 auto 20px; position: relative;}
.vision-box .vision-icon img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 50px;}

@media (min-width: 992px) {
    .basicSet .vision-box{margin: 0 -20px!important;}
    .vision-box .vision-list{width: calc(100% / 3 - 40px); margin: 0 20px 40px;}
    .vision-box .vision-icon{height: 160px;}
    .vision-box .vision-icon img{max-width: 100%;}
}


/* 다운로드 버튼*/
.m-download-button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #222;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.m-download-button:hover{
    color: #fff;
}

/*유튜브영상*/
.video-wrap {position:relative; padding-bottom:56.3%; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.border-wh2-con .c-wh50 + .c-wh50{margin-top: 30px;}

@media (min-width: 992px) {
    .border-wh2-con .c-wh50{width: calc(100% / 2 - 44px); margin: 0 20px; display: inline-block; vertical-align: top; word-break: keep-all;}
    .border-wh2-con .c-wh50 .length-2-txt{min-height: 46px;}
    .border-wh2-con .c-wh50:nth-child(odd){border-right: 1px solid #ddd;}
    .border-wh2-con .c-wh50 + .c-wh50{margin-top: 0px;}
}

/* Overseas Subsidiaries & Global Representatives */
.sub-overseas-box .sub-overseas-con{padding: 0;}
.sub-overseas-box .sub-overseas-con .m-lnk{display: block;}
.sub-overseas-box .sub-overseas-con li + li{margin-top: 20px;}
.sub-overseas-box .sub-overseas-con .sub-overseas-img{width: 100%; padding-bottom: 59%; margin-top: 0; overflow: hidden; position: relative; border-radius: 10px; border:1px solid #ddd;}
.sub-overseas-box .sub-overseas-con .sub-overseas-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out;}
.sub-overseas-box .sub-overseas-con a:hover .sub-overseas-img img {transform: scale(1.1);}

@media (min-width:768px) {
    .sub-overseas-box .sub-overseas-con{margin: 0 -20px!important;}
    .sub-overseas-box .sub-overseas-con li{width: calc(100% / 3 - 44px); margin: 0 20px; display: inline-block; vertical-align: top;}
    .sub-overseas-box .sub-overseas-con li + li{margin-top: 0px;}
}

/* left-line-title */
.left-line-title{padding-left: 15px; position: relative;}
.left-line-title:before{content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 22px; background: #9b1b30;}

@media (min-width:992px) {
    .left-line-title{padding-left: 20px;}
    .left-line-title:before{content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 29px; }
}

/* 서브 탭*/
.sub-con .tabs-wrapper { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #d0d0d0 transparent;}
.sub-con .tabs-wrapper::-webkit-scrollbar {height: 4px;}
.sub-con .tabs-wrapper::-webkit-scrollbar-track {background: transparent;}
.sub-con .tabs-wrapper::-webkit-scrollbar-thumb {background-color: #d0d0d0;border-radius: 2px;}
.sub-con .tab-button { padding: 14px 30px; border: none; background-color: #eee; color: #999; font-weight: 600; cursor: pointer; border-radius: 6px; white-space: nowrap; transition: all 0.3s ease; flex-shrink: 0; border: 1px solid transparent;}
.sub-con .tab-button.active { background-color: #222; color: white; box-shadow: 0 4px 12px rgba(44, 62, 80, 0.15);}
.sub-con .content-area {display: none;}
.sub-con .content-area.active {display: block; animation: fadeIn 0.3s ease;}
.sub-con .content-area.active + .content-area.active{margin-top: 40px; padding-top: 40px; border-top: 1px solid #eee;}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 서브 검색 */
.sub-con .search-section {display: flex;align-items: center;justify-content: flex-end;position: relative; width: 190px;}
.sub-con .search-wrapper { flex: 1; position: relative;}
.sub-con .search-input { width: 100%; padding: 14px 40px 14px 10px; background-color: #fff; color: #333; transition: all 0.3s ease; border: 0; border-bottom: 2px solid #eeeeee;}
/* 마우스 올렸을 때 (적당히 진한 회색) */
.sub-con .search-input:hover {
    border-bottom-color: #888888; 
}

/* 입력하려고 클릭했을 때 (아주 진한 회색/블랙) */
.sub-con .search-input:focus {
    border-bottom-color: #222222; 
    outline: none; /* 파란 테두리 제거 */
}
.sub-con .search-input::placeholder {color: #999;}
.sub-con .search-input:focus { outline: none;}
.sub-con .search-button {padding: 14px 14px;background-color: #fff;color: #222;border: none;border-radius: 6px;cursor: pointer;transition: all 0.3s ease;flex-shrink: 0;display: flex;align-items: center;justify-content: center;position: absolute;right: 0;}
.sub-con .search-icon { width: 18px; height: 18px;}
.sub-con .no-result {color: #999;padding: 40px 0;text-align: center;}
.sub-con .no-search-result { color: #999; padding: 40px 0; text-align: center; display: none;}

.sub-con .top-action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; flex-wrap: wrap; gap: 16px;}
.sub-con .subscribe-button { padding: 14px 20px; background-color: #fff; color: #222; border: 1px solid #eeeeee; border-radius: 6px; font-weight: 600; cursor: pointer;transition: border-color 0.3s, color 0.3s;}
.sub-con .subscribe-button i{margin-right: 10px;}
/* 마우스 올렸을 때(hover) 스타일 */
.sub-con .subscribe-button:hover {
    border-color: #555; /* 기존 #eeeeee보다 훨씬 진한 회색 */
    color: #000;        /* 글자색도 완전 검정으로 선명하게 (선택사항) */
}

.sub-con .subscribe-button i{margin-right: 10px;}

@media (min-width:768px) {
    .sub-con .search-section{width: 40%;}
}

/* 유튜브 리스트 */
.video-list { display: flex; flex-wrap: wrap; gap: 20px;}
.video-list .video-card { width: calc((100% - 40px) / 3);  text-decoration: none; color: #111;}
.video-list .thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #f1f5f9;}
.video-list .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.video-list .video-card:hover .thumb img { transform: scale(1.08);}
.video-list .vid-title{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 992px) {
    .video-list .video-card { width: calc((100% - 40px) / 2);}
}
@media (max-width: 768px) {
    .video-list .video-card { width: 100%;} 
}


/* 유튜브 영상 모달*/
.noback-modal.modal{background: rgba(0, 0, 0, 0.8);}
.noback-modal .modal-content{border:0; box-shadow: none; background: rgba(0,0,0,0);}
.noback-modal.modal .modal-header{background: rgba(0,0,0,0); border: 0;}
.noback-modal.modal .modal-body{background: rgba(0,0,0,0); height: 100%; color: #fff;}
.noback-modal .youtube-video{position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.noback-modal .youtube-video iframe,
.noback-modal .youtube-video object,
.noback-modal .youtube-video embed {position:absolute; top:0; left:0; width:100%; height:100%; border: 0;}
.noback-modal.modal .modal-dialog{width: 80%;}
.noback-modal.modal .close{font-size: 40px;}
@media (min-width: 992px) {
   .noback-modal.modal .modal-dialog{width: 70%;}
   .noback-modal.modal .close{font-size: 50px;} 
}

/* Contact Us */
.sjx-contact-block{width:100%;color:#111;}
.sjx-contact-layout{display:grid;grid-template-columns:1fr;gap:34px;align-items:stretch;}
.sjx-contact-main{display:flex;flex-direction:column;justify-content:space-between;}
.sjx-contact-copy{padding-bottom:28px;border-bottom:1px solid #e3e3e3;}
.sjx-contact-copy p{max-width:650px;margin:0;color:#999;}
.sjx-contact-cards{display:grid;grid-template-columns:1fr;gap:1px;margin-top:28px;}
.sjx-contact-card{background:#fff;}
.sjx-contact-card i{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border-radius:50%;background:#111;color:#fff;font-size:24px;font-style:normal;}
.sjx-contact-card h3{margin:0 0 9px;color:#111;font-weight:800;}
.sjx-contact-card p{margin:0;color:#444;}
.sjx-contact-map{min-height:360px;border:1px solid #dcdcdc;overflow:hidden;background:#f5f5f5;}
.sjx-contact-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block;}
.sjx-contact-form-wrap{display:grid;grid-template-columns:1fr;gap:34px; background: #f3f3f3; padding: 20px; border-radius: 10px; margin-top: 40px;}
.sjx-contact-form-title span{display:inline-block;margin-bottom:14px;color:#777;font-weight:700;}
.sjx-contact-form-title h2{margin:0;color:#111;font-weight:800;}
.sjx-contact-form label{display:block;margin-bottom:8px;color:#222;font-weight:600;}
.sjx-contact-form label em{color:#d62828;font-style:normal;}
.sjx-contact-row{display:grid;grid-template-columns:1fr;gap:0;}
.sjx-contact-form input,.sjx-contact-form textarea{width:100%;box-sizing:border-box;margin-bottom:18px;padding:17px 18px;border:1px solid #999;background:#fff;color:#111;border-radius:0;outline:none;}
.sjx-contact-form input::placeholder,.sjx-contact-form textarea::placeholder{color:#b8b8b8;}
.sjx-contact-form input:focus,.sjx-contact-form textarea:focus{border-color:#111;}
.sjx-contact-form textarea{min-height:170px;resize:vertical;}
.sjx-contact-form button{padding:16px 28px;border:1px solid #111;background:#111;color:#fff;font-weight:800;cursor:pointer;transition:.25s ease;}
.sjx-contact-form button:hover{background:#fff;color:#111;}
@media (min-width:768px){
    .sjx-contact-cards{grid-template-columns:repeat(1,1fr);}
    .sjx-contact-row{grid-template-columns:1fr 1fr;gap:14px;}
    .sjx-contact-map,.sjx-contact-map iframe{min-height:420px;}
}
@media (min-width:992px){
    .sjx-contact-layout{grid-template-columns:1.02fr .98fr;}
    .sjx-contact-card{min-height:155px;}
    .sjx-contact-map,.sjx-contact-map iframe{min-height:100%;}
    .sjx-contact-form-wrap{grid-template-columns:.38fr .62fr;gap:40px; padding: 40px; border-radius: 20px; margin-top: 80px;}
    }


/* =========================================================
   Contact Us Modal CSS
   - Contact Us 페이지 모달 공통 스타일
   - Contact_Us 페이지에서 사용하는 sjxResultModal 전용
========================================================= */

.sjx-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(17,24,39,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 100000; display: none; opacity: 0; transition: opacity .25s ease; }
.sjx-modal-overlay.show { display: block; opacity: 1; }
.sjx-modal-card { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-44%) scale(.94); width: 420px; max-width: 90vw; box-sizing: border-box; background: #fff; border-radius: 22px; padding: 40px 34px 32px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.28); opacity: 0; transition: opacity .28s ease, transform .28s cubic-bezier(.18,.89,.32,1.28); font-family: 'Pretendard','Poppins',sans-serif; }
.sjx-modal-overlay.show .sjx-modal-card { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.sjx-modal-icon { margin: 0 auto 22px; width: 64px; height: 64px; }
.sjx-modal-icon svg { display: none; }
.sjx-modal-overlay[data-type="success"] .sjx-ico-success { display: block; }
.sjx-modal-overlay[data-type="error"] .sjx-ico-error { display: block; }

.sjx-ico-circle { stroke-width: 3; stroke: #10b981; stroke-dasharray: 151; stroke-dashoffset: 151; animation: sjxDraw .5s ease forwards .05s; }
.sjx-ico-check { stroke: #10b981; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: sjxDraw .35s ease forwards .45s; }
.sjx-ico-error .sjx-ico-circle { stroke: #ef4444; }
.sjx-ico-x { stroke: #ef4444; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 46; stroke-dashoffset: 46; animation: sjxDraw .35s ease forwards .45s; }

@keyframes sjxDraw { to { stroke-dashoffset: 0; } }

.sjx-modal-title { margin: 0 0 10px; font-size: 23px; font-weight: 800; color: #111827; letter-spacing: -.01em; }
.sjx-modal-text { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: #6b7280; word-break: break-word; }
.sjx-modal-btn { appearance: none; border: none; cursor: pointer; min-width: 140px; padding: 13px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#0ea5b5,#0b7d8a); box-shadow: 0 8px 20px rgba(14,165,181,.35); transition: transform .15s ease, box-shadow .15s ease; }
.sjx-modal-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(14,165,181,.45); }
.sjx-modal-overlay[data-type="error"] .sjx-modal-btn { background: linear-gradient(135deg,#f87171,#dc2626); box-shadow: 0 8px 20px rgba(220,38,38,.32); }

#sjxContactBtn[disabled] { opacity: .6; cursor: not-allowed; }


/* =========================================================
   Sample Request Page CSS
   - Sample Request 페이지 본문 폼 전용
   - Contact Us CSS와 겹치지 않도록 .sjx-apply-* 기준 사용
========================================================= */

.sjx-apply-block { width: 100%; color: #111; padding: 20px 0 70px; }

/* 안내 박스 */
.sjx-apply-notice { background: #f3f6fa; border-left: 4px solid #8db9ea; padding: 28px 30px; margin-bottom: 46px; box-sizing: border-box; }
.sjx-apply-notice h3 { margin: 0 0 22px; font-size: 18px; line-height: 1.45; font-weight: 800; color: #111827; }
.sjx-apply-notice p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: #111827; }
.sjx-apply-notice p:last-child { margin-bottom: 0; }

/* 폼 */
.sjx-apply-form { width: 100%; }
.sjx-apply-section { padding: 42px 0; border-top: 1px solid #e5e7eb; }
.sjx-apply-section h2 { margin: 0 0 32px; font-size: 28px; line-height: 1.3; font-weight: 500; color: #111827; }

/* 라인 공통 */
.sjx-form-line { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; margin-bottom: 24px; }
.sjx-form-line label { padding-top: 13px; font-size: 16px; line-height: 1.45; font-weight: 600; color: #111827; }
.sjx-form-line label em { color: #ef4444; font-style: normal; }

/* 입력 필드 */
.sjx-form-line input,
.sjx-form-line select,
.sjx-form-line textarea { width: 100%; box-sizing: border-box; border: 1px solid #d8dee8; background: #fff; color: #111; outline: none; font-size: 16px; border-radius: 3px; font-family: inherit; }

.sjx-form-line input,
.sjx-form-line select { height: 46px; padding: 0 16px; }

.sjx-form-line textarea { min-height: 280px; padding: 16px; resize: vertical; line-height: 1.6; }

.sjx-form-line input:focus,
.sjx-form-line select:focus,
.sjx-form-line textarea:focus { border-color: #111827; }

/* Company code 줄 */
.sjx-code-wrap { display: grid; grid-template-columns: 300px 220px; gap: 24px; align-items: start; }
.sjx-code-wrap p { grid-column: 1 / -1; margin: -10px 0 0; font-size: 14px; line-height: 1.65; color: #111827; }

/* 이메일 안내 */
.sjx-field-help p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: #111827; }

/* 버튼 */
.sjx-apply-btn-wrap { display: flex; justify-content: center; padding-top: 28px; }
.sjx-apply-btn-wrap button { min-width: 190px; padding: 18px 34px; border: 1px solid #111; background: #111; color: #fff; font-size: 16px; line-height: 1.2; font-weight: 800; cursor: pointer; transition: .25s ease; font-family: inherit; }
.sjx-apply-btn-wrap button:hover { background: #fff; color: #111; }
#sjxApplyBtn[disabled] { opacity: .6; cursor: not-allowed; }


/* =========================================================
   Sample Request Responsive
========================================================= */

@media (max-width: 768px) {
  .sjx-apply-block { padding: 10px 0 50px; }
  .sjx-apply-notice { padding: 22px; margin-bottom: 32px; }
  .sjx-apply-notice h3 { font-size: 16px; }
  .sjx-apply-notice p { font-size: 14px; }
  .sjx-apply-section { padding: 32px 0; }
  .sjx-apply-section h2 { font-size: 24px; margin-bottom: 24px; }
  .sjx-form-line { grid-template-columns: 1fr; gap: 9px; margin-bottom: 20px; }
  .sjx-form-line label { padding-top: 0; font-size: 15px; }
  .sjx-form-line input,
  .sjx-form-line select,
  .sjx-form-line textarea { font-size: 15px; }
  .sjx-form-line input,
  .sjx-form-line select { height: 44px; }
  .sjx-code-wrap { grid-template-columns: 1fr; gap: 12px; }
  .sjx-code-wrap p { margin-top: 0; font-size: 13px; }
  .sjx-field-help p { font-size: 13px; }
  .sjx-form-line textarea { min-height: 220px; }
  .sjx-apply-btn-wrap { justify-content: stretch; }
  .sjx-apply-btn-wrap button { width: 100%; }
}

/* Contact Us 아이콘들 */
.sjx-contact-compact { width: 100%; color: #202020; margin-top: 30px;}
.sjx-contact-compact .sjx-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 52px; row-gap: 58px; margin: 0;}
.sjx-contact-compact .sjx-contact-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon title" "icon content"; column-gap: 23px; row-gap: 8px; align-items: start; min-width: 0; min-height: 0; padding: 0; background: transparent;}
.sjx-contact-compact .sjx-contact-card > i { grid-area: icon; display: block; width: 44px; height: auto; margin: 0; padding: 0; border-radius: 0; background: transparent; color: #cfd1d3; font-size: 42px; line-height: 1; text-align: center; font-style: normal;}
.sjx-contact-compact .sjx-contact-card > h3 { grid-area: title; margin: 4px 0 0; color: #202020; font-size: 23px; font-weight: 800; line-height: 1.2;}
.sjx-contact-compact .sjx-contact-card > p { grid-area: content; min-width: 0; margin: 0; color: #444; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;}
.sjx-contact-compact .sjx-contact-card a { color: inherit; text-decoration: none;}
.sjx-contact-compact .sjx-contact-card a:hover { text-decoration: underline; text-underline-offset: 3px;}
.sjx-contact-compact .sjx-contact-card a:focus-visible { border-radius: 2px; outline: 2px solid #111; outline-offset: 4px;}
@media (max-width: 480px) {
    .sjx-contact-compact .sjx-contact-cards { grid-template-columns: 1fr; row-gap: 36px;}
}