/*================================================================ 공통 ================================================================*/ html {overflow-X: hidden;} body.scrollPrevent {position: fixed; overflow: hidden; width: 100%; height: 100%; z-index: -1;} .point-color01 {color:#fe5e01 !important;} .inwrap {width:1200px; height:100%; margin:0 auto; position:relative;} .blinde {text-indent:-99999px; width:1px; height:1px; position:absolute; top:-99999px; left:-99999px;} .rel-box {position:relative;} .pc-header-zone {display:block;} .m-gnb-box {display:none;} .ta-1020-gap {display:none;} .br-980 {display:none;} .br-680 {display:none;} .br-480 {display:none;} .br-380 {display:none;} .none-680 {display:block;} .block-980 {display:none;} .copy-m-block {display:none;} .none {display:none !important;} .pc-dot {display:inline-block;} .hidden-pc {display:none;} /* 24-02-13 중국 소스 일치화 LSJ */ /* renew-sprite */ i.renew-sprite {background: none; background-image:url('/web/main_renewal/img/main/new_sprites.webp') !important; display:block; width:auto; height:auto;} .renew-sprite {background-image:url('/web/main_renewal/img/main/new_sprites.webp') !important; display:block; width:auto; height:auto;} /* 기존 css 삭제 */ #container {padding-top:80px !important;} #content.classMain {padding-top:0;} /* model-finder */ .model-finderBox {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width:1200px; width:100%; z-index:2;} .model-finderBox .model-finderBtn {padding:5px 25px 2px 25px; background:#fe5e01; display:block; border-top-left-radius: 45px; border-top-right-radius: 45px; width: 195px; margin: 0 auto; box-sizing:border-box; text-align:center;} .model-finderBox .model-finderBtn span {font-size:16px; letter-spacing:0; color:#fff; font-weight:500; padding-right:20px; position:relative;} .model-finderBox .model-finderBtn span .renew-sprite {width: 9px; height: 6px; background-position: -62px -714px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;} .model-finderBox .model-finderBtn:hover span .renew-sprite {top:40%;} [lang='ko-KR'] .model-finderBox .model-finderBtn span {font-family:'Pretendard Variable';} .model-finder-contensBox {position:absolute; bottom:30px; width:100%; display:none;} .model-finder-tab {width:100%; box-shadow: 0 10px 15px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 10px 15px rgba(0,0,0,0.8);} .model-finder-tab li .tab-contents {width:100%; padding:20px 70px; background:#fff; box-sizing:border-box; min-height:175px;} .model-finder-tab li .tab-contents:after {content:''; display:block; clear:both;} .model-finder-tab li .model-finder-tab-btn {width:390px; position:absolute; top:-30px; left:0; text-align:left; height:30px; padding:5px 45px; box-sizing:border-box; background:rgba(82, 80, 80, 1); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .model-finder-tab li .model-finder-tab-btn span {position:relative; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .model-finder-tab li .model-finder-tab-btn span.tit-kor {font-size:16px; letter-spacing:-0.04em; font-weight:400; color:#fff; display:none; padding:0 40px 0 0; position:relative;} .model-finder-tab li .model-finder-tab-btn span.tit-kor .renew-sprite {width: 9px; height: 6px; background-position: -91px -714px; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} .model-finder-tab li .model-finder-tab-btn span.tit-eng {font-size:16px; letter-spacing:0; font-weight:500; color:#fff; padding:0 40px 0 0;} .model-finder-tab li .model-finder-tab-btn span.tit-eng .renew-sprite {width: 31px; height: 9px; background-position: -511px -283px; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%);} [lang='ko-KR'] .model-finder-tab li .model-finder-tab-btn span.tit-kor {font-family:'Pretendard Variable';} [lang='ko-KR'] .model-finder-tab li .model-finder-tab-btn span.tit-eng {font-family:'Pretendard Variable';} .model-finder-tab li .model-finder-tab-btn.ty02 {left:auto; right:0; text-align:right; box-sizing:border-box; } .model-finder-tab li .model-finder-tab-btn.ty02:before {content: ''; width: 30px; height: 30px; background: rgba(82, 80, 80, 1); display: block; position: absolute; left: -3px; top: 0; webkit-transform: skewX(-13deg); transform: skewX(-13deg);} .model-finder-tab li .model-finder-tab-btn.ty02 span.tit-kor {padding:0 0 0 40px;} .model-finder-tab li .model-finder-tab-btn.ty02 span.tit-eng {padding:0 0 0 40px;} .model-finder-tab li .model-finder-tab-btn.ty02 span.tit-kor .renew-sprite {width: 9px; height: 6px; background-position: -91px -714px;; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .model-finder-tab li .model-finder-tab-btn.ty02 span.tit-eng .renew-sprite {width: 31px; height: 9px; background-position: -481px -283px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .model-finder-tab li.active .model-finder-tab-btn {width:calc(100% - 390px); top:-30px; height:30px; background:#fe5e01; padding:5px 45px;} .model-finder-tab li.active .model-finder-tab-btn span.tit-eng {display:none;} .model-finder-tab li.active .model-finder-tab-btn span.tit-kor {display:inline-block; padding:0 40px 0 0;} .model-finder-tab li.active .model-finder-tab-btn.ty02:before {background:#fe5e01;} .model-finder-tab li.active .model-finder-tab-btn.ty02 span.tit-kor {display:inline-block; padding:0 0 0 40px;} .model-finder-tab li .tab-contents .tit-box {width:212px; float:left; margin-top:20px;} .model-finder-tab li .tab-contents .tit-box .b-tit {font-size:23px; letter-spacing:0; color:#333; font-weight:600; line-height:1em; margin-bottom:20px;} .model-finder-tab li .tab-contents .tit-box .s-txt {font-size:13px; letter-spacing:0; color:#424242; font-weight:400;} [lang='ko-KR'] .model-finder-tab li .tab-contents .tit-box .b-tit {font-family:'Pretendard Variable';} [lang='ko-KR'] .model-finder-tab li .tab-contents .tit-box .s-txt {font-family:'Pretendard Variable';} .model-finder-tab li .tab-contents .form-box {width:calc(100% - 475px); float:left; text-align:right; margin-left:70px;} .model-finder-tab li .tab-contents .form1 {max-width:175px; width:100%; display:inline-block; text-align:left; margin-left:25px;} .model-finder-tab li .tab-contents .form1:first-child {margin-left:0;} .model-finder-tab li .tab-contents .form1 .sel-label {font-size:14px; letter-spacing:-0.025em; color:#282828; font-weight:700; margin-bottom:10px; display:block; line-height:1em;} .model-finder-tab li .tab-contents .form1 .selectbox {margin-left:0; width:100%; position: relative; display: block; float: left; height: 40px; border: 1px solid #bbb; background: #fff; box-sizing: border-box; vertical-align: middle;} .model-finder-tab li .tab-contents .form1 .selectbox .select-value {color:#666; font-size:14px; display:block; position:relative; height:100%; padding:5px 40px 5px 10px; color:#666; text-align:left; line-height:28px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; box-sizing:border-box;} .model-finder-tab li .tab-contents .form1 .selectbox .select option {font-size: 13px; color: #666; letter-spacing: -0.5px;} [lang='ko-KR'] .model-finder-tab li .tab-contents .form1 .sel-label {font-family:'Pretendard Variable';} [lang='ko-KR'] .model-finder-tab li .tab-contents .form1 .selectbox .select option {font-family: 'Pretendard Variable', Arial, Helvetica, sans-serif;} .model-finder-tab li .tab-contents .form1 .selectbox:hover, .model-finder-tab li .tab-contents .form1 .selectbox.focus {border-color:#fe5e01;} .model-finder-tab li .tab-contents .form1 .selectbox .select-value:hover {color:#fff; text-decoration:none;} .model-finder-tab li .tab-contents .form1 .selectbox .select-value:before {content: ''; width: 15px; height: 8px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -754px -682px; display: block; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);} .model-finder-tab li .tab-contents .form1 .selectbox .select-value:after {content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 100%; overflow: hidden; border-left: 1px solid #bbb; background:none;} .model-finder-tab li .tab-contents .form1 .selectbox .select-value .renew-sprite {width: 15px; height: 8px; background-position: -754px -682px;} .model-finder-tab li .tab-contents .form1 .selectbox:hover .select-value:after, .model-finder-tab li .tab-contents .form1 .selectbox.focus .select-value:after {border-left:1px solid #fe5e01;} .model-finder-tab li .tab-contents .form1 .selectbox.open .select-value:before {background-position: -561px -283px;} .model-finder-tab li .tab-contents .form1 .selectbox .option {display:none;position:absolute; bottom:31px;left:-1px;width:100%;width:100%;padding:0;overflow:hidden;border:1px solid #4d4d4d;border-top:0 none; background:#fff; z-index:10;} .model-finder-tab li .tab-contents .form1 .selectbox.scroll .option {padding:10px 5px 10px 0;max-height:170px;} .model-finder-tab li .tab-contents .form1 .selectbox ul {width:100%;} .model-finder-tab li .tab-contents .form1 .selectbox ul li {width:100%;min-height:30px;} .model-finder-tab li .tab-contents .form1 .selectbox ul li a {display:block;padding:5px 10px;line-height:20px;} .model-finder-tab li .tab-contents .form1 .selectbox ul li a:hover {background:#666;} .model-finder-tab li .tab-contents .form1 .selectbox.default .select {position:relative; z-index:10; width:100% !important; height:40px;line-height:40px;opacity:0;} .model-finder-tab li .tab-contents .form1 .selectbox.default .select-value {position:absolute;bottom:0;left:0;width:100%;} .model-finder-tab li .tab-contents .form {display:block; margin-top:20px;} .model-finder-tab li .tab-contents .form .form-control {display: inline-block; max-width: 385px; width: 100%; height: 32px; padding: 5px 10px 7px !important; border: 1px solid #bbb; line-height: 20px; -webkit-appearance: none !important; background-color: #ffffff; background-image: none !important; filter: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; vertical-align: middle; color: #666; margin-top:0;} .model-finder-tab li .tab-contents .form .form-control.inline {margin-right:8px;} .model-finder-tab li .tab-contents .form .form-control:focus {outline:0;border-color:#fe5e01;} .model-finder-tab li .tab-contents .form .form-control:disabled, .model-finder-tab li .tab-contents .form .textarea-wrapper.disabled {background-color:#f5f5f5;} .model-finder-tab li .tab-contents .form .pro-m-input {position:relative;display:inline-block;width:100%;margin:0;padding:0 0 0 10px !important;} .model-finder-tab li .tab-contents .form .pro-m-input .form-control {margin:0;padding-right:30px !important;} .model-finder-tab li .tab-contents .form .pro-m-input:after {content:'';position:absolute;top:50%;right:10px;width:9px;height:9px;margin-top:-4px;overflow:hidden;background:url('/web/images/common/icon-m-sprite.webp') no-repeat 0 -10px;background-size:500px auto;} .model-finder-tab li .tab-contents .form .form-label {font-size:14px; letter-spacing:-0.025em; color:#282828; font-weight:700; margin-right:10px; vertical-align:middle;} [lang='ko-KR'] .model-finder-tab li .tab-contents .form .form-label {font-family:'Pretendard Variable';} .model-finder-tab li .tab-contents .srarch-btn {position: absolute; right: 70px; top: 50%; transform: translateY(-50%); background: #525050; display: block; width: 145px; height: 40px; line-height:40px; text-align:center; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .model-finder-tab li .tab-contents .srarch-btn span {font-size: 14px; letter-spacing: -0.025em; color: #fff; font-weight: 700; position: relative; width: 100%; display: block; padding-left: 40px; box-sizing: border-box;} .model-finder-tab li .tab-contents .srarch-btn span:before {content:''; width:40px; height:40px; position:absolute; top:0; left:0; border-right:1px solid #757373;} .model-finder-tab li .tab-contents .srarch-btn span:after {content:''; width: 16px; height: 11px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -345px -286px; background-size:392px; display:block; position:absolute; top:50%; left:12px; transform:translateY(-50%);} .model-finder-tab li .tab-contents .srarch-btn:hover {background:#292929;} [lang='ko-KR'] .model-finder-tab li .tab-contents .srarch-btn span {font-family: 'Pretendard Variable';} .model-finder-tab li .tab-contents .tit-box.ty02 {width: 175px;} .model-finder-tab li .tab-contents .moter-selection-list {width:calc(100% - 215px); float:left; margin-left:40px;} .model-finder-tab li .tab-contents .moter-selection-list:after {content:''; display:block; clear:both;} .model-finder-tab li .tab-contents .moter-selection-list li {width:calc(33.3% - 40px / 3); height:125px; box-sizing:border-box; float:left; background-color:#f5f5f5; margin-left:20px;} .model-finder-tab li .tab-contents .moter-selection-list li:first-child {margin-left:0;} .model-finder-tab li .tab-contents .moter-selection-list li a {padding:25px; display:block; height: 100%; box-sizing: border-box;} .model-finder-tab li .tab-contents .moter-selection-list li a span {font-size: 16px; letter-spacing: 0; color: #333; font-weight: 700; line-height:22px; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} [lang='ko-KR'] .model-finder-tab li .tab-contents .moter-selection-list li a span {font-family: 'Pretendard Variable';} .model-finder-tab li .tab-contents .moter-selection-list li.item01 {background:url('/web/main_renewal/img/main/motor-selection-img1.webp') no-repeat #f5f5f5; background-position: 90% 150%; background-size: 120px auto;} .model-finder-tab li .tab-contents .moter-selection-list li.item02 {background:url('/web/main_renewal/img/main/motor-selection-img2.webp') no-repeat #f5f5f5; background-position: 90% 150%; background-size: 120px auto;} .model-finder-tab li .tab-contents .moter-selection-list li.item03 {background:url('/web/main_renewal/img/main/motor-selection-img3.webp') no-repeat #f5f5f5; background-position: 90% 150%; background-size: 120px auto;} .model-finder-tab li .tab-contents .moter-selection-list li a:hover span {border-bottom:1px solid #333;} .model-finder-closedBtn {padding: 4px 25px; background: #0e3063; display: block; border-bottom-left-radius: 45px; border-bottom-right-radius: 45px; width: 230px; margin: 0 auto; box-sizing: border-box; text-align:center;} .model-finder-closedBtn span {display:inline-block; font-size: 16px; letter-spacing: 0; color: #fff; font-weight: 500; padding:0 40px; position:relative;} .model-finder-closedBtn span .renew-sprite {width: 9px; height: 6px; background-position: -91px -714px; position:absolute; top:50%; left:0; transform:translateY(-50%); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;} .model-finder-closedBtn:hover span .renew-sprite {top:60%;} [lang='ko-KR'] .model-finder-closedBtn span {font-family: 'Pretendard Variable';} /* 2020. 05. 11. Model-finder 속에 검색결과 */ .hgroup:after {content:''; display:block; clear:both;} .result-wrap .sort-chk.align-right {text-align:right; margin-top:-10px;} .align-right input[type="radio"] + label, .align-right input[type="checkbox"] + label {margin-right: 0; margin-left: 24px;} .mf-result-list td a.txt-underline {color:#fe5e01; text-decoration:underline;} .mf-result-list td a i.icon-com {display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -220px -224px; background-size:392px;} #result-wrap td a i.icon-com {display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -220px -224px; background-size:392px;} .msg-box.type2 {position: relative; border: 1px solid #ddd; text-align: center; min-height: auto; padding: 50px 30px; margin-top:10px; box-sizing: border-box;} .msg-box.type2 .dev-sugg {padding:6px 15px; background:#fe5e01; display:inline-block; margin-top:10px;} .msg-box.type2 .dev-sugg span {color:#fff;} .msg-box.no-border.type2 {border:none;} /* 230912 추가 */ .sub-notice, .con-notice {padding: 20px; border: 1px solid #ddd;} .con-notice {margin-top:20px;} .con-notice .h4 {font-size:18px; color:#fe5e01;} p + .dot-list {margin-top: 8px;} .result-wrap > h4 {font-size: 18px;} /*================================================================ Model-finder 세부 검색 popup ================================================================*/ /* pop-accodian */ .pop-accodian {border-bottom:1px solid #ddd;} .pop-accodian li {position:relative;border-top:1px solid #ddd; background:url('')} .pop-accodian .ques {display:block;position:relative; padding:14px 78px 14px 30px; line-height:23px;} .pop-accodian .ques:after {content:'';position:absolute; top:50%; right:15px; width:18px; height:10px; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -345px -246px; background-size: 392px; transform: translateY(-50%);} .pop-accodian li.active .ques:after {background-position:-345px -266px;} .pop-accodian .ques * {line-height:23px; font-size:18px; } .pop-accodian .ques .divi {display:table-cell;position:relative;padding-right:20px;font-size:16px;line-height:24px;white-space:nowrap;} .pop-accodian .ques .divi:after {content:'';position:absolute;top:3px;right:0;width:1px;height:16px;background:#ddd;} .pop-accodian .ques .title {display:table-cell;padding-left:20px;} .pop-accodian .answer {display:none;position:relative;margin:0 !important;padding:15px 45px 15px 15px;border-top:1px solid #ddd;background:#f5f5f5;} .pop-accodian .answer img {width:auto;max-width:100%;} .pop-accodian li.active .asnwer {display:block;} .pop-accodian.icon-add .ques {padding-left:50px;} .pop-accodian.icon-add .answer {padding:20px 45px 20px 50px;} .pop-accodian.icon-add .ques > i, .pop-accodian.icon-add .answer > i {position:absolute;top:15px;left:15px;} .pop-accodian.icon-add .answer > i {top:18px;} /* .pop-accodian.icon-add .answer p {line-height:24px;} */ .pop-accodian.icon-add .answer p + a {display:inline-block;margin-top:10px;} .pop-accodian .answer.scroll-y {padding-right:5px !important;} .pop-accodian.min-type .ques {padding-right:15px;} .pop-accodian.min-type .ques:after {display:none;} .pop-accodian.min-type .active .ques, .pop-accodian.min-type .active .ques * {color:#fe5e01 !important;} .pop-accodian.min-type .answer {padding:15px;} /* .pop-accodian.min-type .active .answer {display:block;} */ .pop-accodian .ques:hover > span.fc1 {text-decoration:underline;} /* form */ input[type="radio"] {position:absolute;z-index:1;width:0;height:0;opacity:0;} input[type="radio"] + label {display:inline-block;position:relative;z-index:1;min-height:22px;margin-top:10px;margin-right:24px;padding-left:25px;color:#666;line-height:22px;cursor:pointer;vertical-align:middle;font-size:14px;} input[type="radio"] + label * {line-height:22px; font-style:normal;} input[type="radio"] + label span {display:inline-block;position:absolute;top:0;left:0;width:22px;height:22px;vertical-align:middle; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -371px -62px; background-size: 392px; cursor:pointer;} input[type="radio"]:checked + label span {background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -188px -224px; background-size: 392px; border:0 none;} input[type="radio"]:disabled + label span {background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -371px -62px; background-size: 392px;} input[type="radio"]:checked + label * {color:#fe5e01;} input[type="radio"].value + label {display:block;padding-left:110px;} input[type="radio"].value + label .val {position:absolute;top:0;left:28px;min-width:52px;color:#333;} input[type="radio"].abnormal + label * {color:#bbb !important;} input[type="radio"].abnormal + label .cmt {display:none;white-space:nowrap;} input[type="radio"].abnormal:checked + label * {color:#fe5e01 !important;} input[type="radio"].abnormal:checked + label .cmt {display:inline-block;color:#666 !important;} input[type="radio"].abnormal:checked + label .val, .form-group input[type="radio"].abnormal:checked + label .desc {text-decoration:line-through;} .pop-container .form-group {margin:0 !important;} .pop-container .form-group:after {content: ''; clear: both; display: block;} .pop-container .form-group .align-right input[type="radio"] + label {margin-right:0;margin-left:24px;} .pop-container .form-group input[type="radio"]:first-child + label {margin-top:15px; margin-left:0;} /* 2021-01-12 수정, 교육 설문 팝업 정렬 */ .form-control {display:block; width:100%; height:32px; padding:5px 10px 7px; border:1px solid #bbb; color:#666; line-height:20px; font-weight:normal; vertical-align:top; -webkit-appearance: none !important; background-color:#fff; background-image: none !important; filter: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-sizing:border-box; margin-top:10px;} .form-control.inline {margin-right:8px;} .form-control:focus {outline:0;border-color:#fe5e01;} .form-control:disabled, .textarea-wrapper.disabled {background-color:#f5f5f5;} .pro-m-input {position:relative;display:inline-block;width:100%;margin:0;padding:0 0 0 10px !important;} .pro-m-input .form-control {margin:0;padding-right:30px !important;} .pro-m-input:after {content:'';position:absolute;top:50%;right:10px;width:9px;height:9px;margin-top:-4px;overflow:hidden;background:url('/web/images/common/icon-m-sprite.webp') no-repeat 0 -10px;background-size:500px auto;} .form-group .inline {display:inline-block;} .pop-container .btn-thumb {display:inline-block;width:70px;height:70px;text-indent:-9999px;overflow:hidden;background:url('/web/main_renewal/img/main/ico-mini_close.webp') no-repeat center right;} .pop-container .btn-option {display:inline-block;position:relative;min-width:60px;height:30px;padding:0 30px 0 10px;margin:5px 7px 0 0;border:1px solid #bbb;border-radius:3px;color:#666;line-height:28px; box-sizing:border-box} .pop-container .btn-option:hover {border-color:#333;} .pop-container .btn-option:first-child {margin-left:0;} .pop-container .btn-option .btn-del {width: 8px; height: 8px; display:inline-block;position:absolute;top:10px;right:10px;overflow:hidden;text-indent:-9999px; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -131px; background-size: 392px;} .pop-container .btn-close {padding:7px 0;} .pop-container .btn-group .filter-btn {background: #525050; padding: 5px 15px 5px 10px !important; color: #fff; display: inline-block;} .pop-container .btn-group .icon-reset {width: 13px; height: 13px; background-position: -345px -307px; background-size:392px; display: inline-block; margin:4px 10px 0 0 !important;} .layerpop-wrap {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9001; overflow-x:hidden; overflow-y:auto; background:rgba(0, 0, 0, 0.5)} .layerpop-wrap *{box-sizing:border-box;} .layerpop-wrap .pop-container {position:relative;z-index:10;max-width:100%;min-width:320px;margin:100px auto;padding:0 15px; box-sizing:border-box;} .pop-container .head {position:relative;color:#fff;background:#525050;} .pop-container .head h2 {position:relative;height:70px;padding:20px 0 0 30px;margin-right:80px; box-sizing:border-box;} .pop-container .head .hgroup {position:relative;z-index:1;padding-right:50px;line-height:30px;} .pop-container .head .hgroup .f-titi {line-height:1.2; font-size:26px;} .pop-container .head .tooltip {margin:5px 0 0 8px;} .pop-container .btn-pop-close {position:absolute;top:20px;right:30px;margin:0;z-index:5; } .pop-container .btn-pop-close .icon-pop-close {display: block; width: 30px; height: 30px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -483px -225px; background-size: 550px;} .pop-container .head .skew-bg {position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;overflow:hidden;} .pop-container .head .skew-bg:before {content:'';position:absolute;top:0;left:-10px;width:100%;height:100%;-ms-transform:skewX(-13deg);-webkit-transform:skewX(-13deg);transform:skewX(-13deg);background:#fe5e01;} .pop-container .content {position:relative;padding:30px;background:#fff;} .layerpop-wrap.iframe-pop .pop-container .content {padding:0;} .layerpop-wrap.scrollable .pop-container .content{max-height: calc(100vh - 270px); overflow:hidden;} /* 모델파인더/모토셀렉트 */ .pop-container.pop-finder .head h2 {display:inline-block;margin:0;} .pop-container.pop-finder .head .head-select {display:inline-block;position:relative;width:700px;height:70px;padding:20px 0 20px 20px; box-sizing:border-box; vertical-align:top;} [lang="ru-RU"] .pop-container.pop-finder .head .head-select, [lang="uk"] .pop-container.pop-finder .head .head-select, [lang="pt-BR"] .pop-container.pop-finder .head .head-select, [lang="pt-PT"] .pop-container.pop-finder .head .head-select, [lang='es-MX'] .pop-container.pop-finder .head .head-select, [lang='es-CO'] .pop-container.pop-finder .head .head-select, [lang='es-PE'] .pop-container.pop-finder .head .head-select, [lang='es-CL'] .pop-container.pop-finder .head .head-select, [lang='es-VE'] .pop-container.pop-finder .head .head-select, [lang='es-EC'] .pop-container.pop-finder .head .head-select, [lang='es-LA'] .pop-container.pop-finder .head .head-select, [lang='es-ES'] .pop-container.pop-finder .head .head-select {padding-left:10px;} [lang="ru-RU"] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang="uk"] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang="pt-BR"] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang="pt-PT"] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-MX'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-CO'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-PE'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-CL'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-VE'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-EC'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-LA'] .pop-container.pop-finder .head .head-select .form-txt.h4, [lang='es-ES'] .pop-container.pop-finder .head .head-select .form-txt.h4 {width:100px;margin-top:0;word-break:keep-all;} .form-txt {display: inline-block; margin-top:10px; margin-right: 8px; padding: 6px 0; line-height: 20px; vertical-align: top;} .form-txt.ft-18 {font-size:18px; margin-top:0; vertical-align:bottom;} .pop-container.pop-finder .perform-wrap {max-height:410px; overflow:hidden; overflow-y:auto;} .pop-container.pop-finder .perform-wrap .fc0 {display:inline-block;} .pop-container.pop-finder .perform-wrap .ques .value {display:none;} .pop-container.pop-finder .perform-wrap .ques .h6 {display:none;} .pop-container.pop-finder .perform-wrap .ques .abnormal + .h6 {display:inline-block;margin-top:0;} .pop-container.pop-finder .perform-wrap .answer {max-height:180px;overflow:hidden; overflow-y:auto;} .pop-container.pop-finder .btn-group-t15 {padding-top:30px;} .pop-container.pop-finder .tag-wrap {position:relative;padding:10px 150px 10px 30px;border-bottom:1px solid #ddd;background:#fff;} .pop-container.pop-finder .tag-wrap .tag {height:35px;overflow:hidden;margin-top:-5px;} .pop-container.pop-finder .tag-wrap .btn-group {position:absolute;top:12px;right:30px;width:130px;padding:0;text-align:right; margin:0;} .pop-finder .result-wrap {margin-top:20px;} .pop-finder .result-wrap .msg-box {margin-top:10px;} .tooltip {display:inline-block;position:relative;/* vertical-align:top; */} .tooltip-con {display: none; position: absolute; top: 30px; left: 0; z-index: 10; width: 210px; margin-left: -105px; padding: 10px 15px; border: 1px solid #feae80; font-size: 13px !important; color: #666; line-height: 20px; background: #fff;} .tooltip.on .tooltip-con {display:block;} .tooltip-con .renew-sprite {position:absolute; top:-7px; left:50%; width:8px; height:7px; margin-left:-4px; background-position: -377px -149px; background-size: 392px; transform:translateX(-50%);} .tooltip.date .tooltip-con {top:25px;width:170px;margin-left:-35px;} .tooltip.date .tooltip-con:before {left:15px;} .tooltip.center .tooltip-con {margin-left:-80px;} .tooltip.center .tooltip-con:before {left:75px;} .tooltip.right .tooltip-con {margin-left:-115px;} .tooltip.right .tooltip-con:before {left:145px;} .tooltip .icon-new {display:inline-block;width:22px;height:22px;overflow:hidden;font-size:12px;color:#fff;line-height:22px;text-align:center !important;border-radius:20px;background:#fe5e01;} .list-wrap.my-download .tooltip {vertical-align:top;} .tooltip i.icon-tooltip {width: 20px; height: 20px; border: 1px solid #fff; display: inline-block; background-size: 7px; position:relative;} .tooltip i.icon-tooltip:after {content:''; width: 7px; height: 12px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -89px; background-size:392px; display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .tooltip:hover .tooltip-con {display:block;} .pop-container .selectbox.default .select-value {position: absolute; bottom: 0; left: 0; width: 100%;} .pop-container .selectbox .select-value {display: block; position: relative; height: 30px; padding: 5px 40px 5px 10px; color: #666; text-align: left; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; box-sizing:border-box; /* z-index:11; */ cursor:pointer;} .pop-container .selectbox .select-value:after {content: ''; position: absolute; top: 0; right: 0; width: 33px; height: 100%; overflow: hidden; border-left: 1px solid #bbb;} .pop-container .selectbox .select-value:before {content: ''; width: 15px; height: 8px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -754px -682px; display: block; position: absolute; top: 50%; right: 9px; transform: translateY(-50%);} .pop-container .selectbox.open .select-value:after { content: ''; position: absolute; top: 0; right: 0; width: 33px; height: 100%; overflow: hidden; border-left: 1px solid #bbb;} .pop-container .selectbox.open .select-value:before { content: ''; background-position: -561px -283px;} /* .form-group {margin-top: -10px; padding-top: 10px;} */ .pop-container .form-group .selectbox {position: relative; display: inline-block; max-width:140px; width: 100%; height: 32px; margin-right: 6px; border: 1px solid #bbb; background: #fff !important; box-sizing:border-box;} .pop-container .form-group .selectbox .select {position: relative; z-index: 10; width: 100% !important; height: 32px; line-height: 32px; opacity: 0;} .pop-container .hgroup {position: relative; margin-bottom: 15px;} .pop-container .hgroup .sec-title, .pop-container .hgroup .pop-title {font-size:22px; color:#333; line-height:1em;} .model-finder-searchBtn {display: inline-block; position: relative; min-width: 70px; padding: 8px 15px; font-size: 13px; line-height: 16px; text-align: center; white-space: normal; word-break: keep-all; vertical-align: bottom; box-sizing: border-box; background: #fe5e01; color:#fff; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .model-finder-searchBtn:hover {background:#ea5600;} .pop-container .btn-group.in-big {text-align:center; margin-top:20px;} .pop-container .btn-group.in-big .btn-lg {display: inline-block; min-width: 230px; width: auto; margin: 0 8px; height: 48px; line-height: 20px; padding: 14px 30px; font-size: 18px; background: #fe5e01; box-sizing: border-box; color: #fff; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .pop-container .btn-group.in-big .btn-lg:hover {background:#ea5600;} /* Motor Selectrion popup */ /* table */ .table {width:100%;border-top:2px solid #fe5e01;background-color:#fff;} /* .table *:not(.btn):not(.btn-txt) {line-height:1.2;line-height:20px;vertical-align:middle;} .table .dot-list > li:before {top:9px;} */ .table th, .table .th {background-color:#f5f5f5; padding: 10px 30px;} .table th, .table td, .table .th, .table .td {border-left:1px solid #ddd;border-bottom:1px solid #ddd;font-weight:normal;text-align:left;word-break:keep-all; box-sizing:border-box; padding: 10px 30px;font-size:14px;} .table thead th, .table .thead .th {text-align:center;} .table th:first-child, .table td:first-child, .table .th:first-child, .table .td:first-child {border-left:0 none;} .table th span:not(.br) {display:inline-block;} .table tfoot td {font-size:15px;font-weight:700;background-color:#f5f5f5;} .table .bg-no th {background:none;} .table .btn-group {margin-left:-5px;margin-right:-5px;/*padding:10px 0 0;*/text-align:left;}/* 2020.07.15 자료실 상세 유형 항목 정렬 문제로 padding 히든처리 */ .table .btn-group .btn {margin-left:5px;margin-right:5px;} .row-group {border-top:2px solid #fe5e01; margin-top:8px;} .row-group:after {content:''; display:block; clear:both;} .row-group .table {border-top:0 none;} .table.align-center th, .table.align-center td {text-align:center;} /* .table .form-txt, .form-group .form-txt {padding-top:0;} */ .table.no-top-line {border-top:1px solid #ddd !important;} .no-btm-line {border-bottom:0 none !important;} .mf-result-list table {width:100%;} /* pop모터셀렉션 */ .motor-select-wrap {position:relative;padding-top:40px;padding-left:250px;} .motor-select-wrap .type-select {position:absolute;top:0;left:0;width:220px;} .motor-select-wrap .type-select .answer {padding-top:0 !important;border-top:0 none;text-align:center;} .motor-select-wrap .type-select img {display:block;width:160px;height:auto;margin:0 auto;} .motor-select-wrap .type-select .active .ques {background:#f5f5f5;} .motor-select-wrap .type-select.mo {padding:15px;background:#f5f5f5;} .motor-select-wrap .type-select.mo .selectbox {margin-bottom:15px;} .motor-select-wrap .right-wrap > div {margin-top:30px;} .motor-select-wrap .right-wrap > div:first-child {margin-top:0;padding-top:0;} .motor-select-wrap .option-wrap .scroll-y {height:380px;} .motor-select-wrap .table-m-row1 {width:100%;} .motor-select-wrap .table-m-row1 th {width:290px;} .motor-select-wrap .table-m-row1 td {width:auto;} .motor-select-wrap .table-m-row1 input[type="text"].form-control, .motor-select-wrap .table-m-row1 .selectbox.default {width:125px;} .motor-select-wrap .table-m-row1 .form-txt.fc0 {width:100px;} .motor-select-wrap .result-wrap {margin-top:54px;} .motor-select-wrap .result-wrap > .inner:not(.hgroup) {margin-bottom:30px;} .deviceMobile .result-wrap form {margin-top:10px !important;padding-top:0 !important;} #motorSelectionPop1 .img.graph {position:relative;} #motorSelectionPop1 .img.graph span {display:inline-block;position:absolute;top:0;left:0;} #motorSelectionPop1 .img.graph .txt2 {top:30%;left:0;width:100%;text-align:center;} #motorSelectionPop1 .img.graph .txt3 {top:62%;left:13%;} #motorSelectionPop1 .img.graph .txt4 {top:62%;left:auto;right:13%;} #motorSelectionPop1 .img.graph .txt5 {top:auto;bottom:0;left:0;width:100%;text-align:center;} .motor-select-wrap .pop-title {font-size:22px; margin-bottom:15px;} .motor-select-wrap .right-wrap .option-wrap > h4 {font-size:18px;} .motor-select-wrap .table-m-row1 {width: 100%; border-top: 2px solid #fe5e01; background-color: #fff;} .pop-container h4 + * {margin-top:10px;} /* pop모델파인더 - 검색결과 */ .pop-finder .result-wrap {margin-top:30px;} .pop-finder .mf-result-list th, .pop-finder .mf-result-list td {padding:10px;text-align:center;} .pop-finder .mf-result-list td.no-btm-line {border-bottom:none;} .pop-finder .mf-result-list td.pd0 {padding:0;} .pop-finder .mf-result-list .img{display:inline-block;max-width:50px;max-height:50px;width:100%;height:auto;} .motor-select-wrap .table-m-row1 input[type="text"].form-control, .motor-select-wrap .table-m-row1 .selectbox.default {width:145px;} /* 레이어 in 레이어 */ .btn-help-tooltip {display:inline-block;width:22px;height:22px;margin-left:7px;border:1px solid #666;font-size:18px;color:#666;line-height:22px;text-align:center;} .btn-help-tooltip:hover {text-decoration:none;} .winpop-wrap {position:relative;width:100%;overflow:hidden;background:#fff;} .winpop-wrap:before {content:'';position:fixed;top:0;left:-10px;z-index:1;width:280px;height:6px;-ms-transform:skewX(-13deg);-webkit-transform:skewX(-13deg);transform:skewX(-13deg);background:#fe5e01;} .winpop-wrap:after {content:'';position:fixed;top:0;right:0;width:100%;height:6px;background:#525050;} .winpop-wrap .head {position:relative;padding:25px 20px 20px;color:#333;background:#fbfafa;} .winpop-wrap .head .btn-pop-close {display:none;position:absolute;top:30px;right:20px;margin:0;} .winpop-wrap .content {padding:30px;border-top:1px solid #ddd;} .inner-pop .winpop-wrap:before, .inner-pop .winpop-wrap:after {position:absolute;} .inner-pop {display:none;position:absolute;top:-25px;right:0;width:100%;padding:30px 15px;;z-index:1500;} .inner-pop .img {display:block;max-width:520px;width:100%;margin:0 auto 18px;} .inner-pop .winpop-wrap {padding:32px 15px 15px;box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7)} .pop-container .inner-pop .btn-group {margin:25px 0 0; text-align:center;} .pop-container .inner-pop .btn-pop-close {position:static;width:100%;margin:0; height: 48px; padding: 14px 30px; font-size: 18px; min-width: 170px; min-height: 45px; background-color: #525050; color: #fff; display: inline-block; box-sizing: border-box;} /*================================================================ 본문 건너뛰기 및 하위브라우저 팝업 ================================================================*/ a.skip {position:absolute; top:-9999em; left:-9999em; height:1px; width:1px; text-align:left; overflow:hidden; font-size:14px; padding:0 10px; height:50px; line-height:40px; z-index:9999; text-decoration:none; background: #f2f2f2;} a.skip:active, a.skip:focus, a.skip:hover {left:0; top:0; width:100%; text-align:center; overflow:visible; color: #333; text-decoration:none; line-height:50px;} /* 하위버전 브라우져 */ .pop-container.browser-ie9 .cookie-wrap {padding:15px 30px; text-align: right;} .pop-container.browser-ie9 {padding:0 !important;background:#fff;} .pop-container.browser-ie9 .head {background:#fe5e01;} .pop-container.browser-ie9 .head .hgroup {font-size:26px !important;line-height:30px !important;} .pop-container.browser-ie9 .content * {font-size:14px !important;} .pop-container.browser-ie9 .content .privacy-box .desc {margin-top:8px;} .pop-container.browser-ie9 .img {display:block; max-width:330px; width:100%; margin:20px auto 0;} .pop-container.browser-ie9 .cookie-wrap {padding:15px 30px;border-top:1px solid #ddd;background:#f5f5f5;} .pop-container.browser-ie9 .cookie-wrap label {margin:0;} .ie8-below .document-dimed:before {background:url('/web/images/main/bg-dim1.webp') repeat 0 0;} .cookie-wrap input[type="checkbox"] {width: 0; height: 0;} .cookie-wrap input[type="checkbox"] + label {padding-left:22px; cursor: pointer; position:relative;} .cookie-wrap input[type="checkbox"] + label:before {content: ''; width: 10px; height: 11px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; display: block; background-size: 392px; position: absolute; top: 4px; left: 0;} .cookie-wrap input[type="checkbox"]:checked + label {background: url('/web/main_renewal/img/main/smartbar-check-on.webp') no-repeat left center; background-size:18px;} .cookie-wrap input[type="checkbox"]:checked + label:before {width: 22px; height: 22px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -127px -181px; background-size: 320px; top: 0;} .cookie-wrap input[type="checkbox"]:checked + label {color:#fe5e01;} .cookie-wrap input[type="checkbox"]:disabled + label:before {background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px;} /*================================================================ 언어 선택 ================================================================*/ .select-language-container {width:100%; height:100%; z-index:1000; position:fixed; left:0; top:0; display:none; z-index:9100;} .select-language-bg {width:100%; height:100%; position:fixed; left:0; top:0; background:rgba(0, 0, 0, 0.5); z-index:1;} .select-language-psbox {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:1000px; width:100%; z-index:2;} .select-language-box {position: relative; padding:0 30px 30px 30px; height:calc(100vh - 395px); background: #fff; overflow-y:scroll; } .select-language-close-box {position:absolute; top:30px; right:30px;} .select-language-close-btn {width:25px; height:25px; display:block;} .select-language-close-btn > .renew-sprite {width: 25px; height: 25px; background-position: -472px -398px;} .select-language-psbox .tit-box {width: 100%; box-sizing: border-box; padding: 23px 30px 30px 30px; background: #525050; text-align:right; background: #525050;} .select-language-psbox .tit-box > .renew-sprite {width: 451px; height: 134px; background-position: -10px -190px; position:absolute; top:26px; left:30px;} .select-language-psbox .tit-box .b-tit { font-size: 16px; letter-spacing: 0; line-height: 23px; color: #fff; padding: 8px 0 8px 72px; display: inline-block; text-align: left; margin:50px 40px 20px 0; position:relative;} .select-language-psbox .tit-box .b-tit > .renew-sprite {width: 60px; height: 60px; background-position: -610px -90px; position: absolute; top: 0; left: 0;} .select-language-psbox .tit-box .b-tit .this-country {color:#fe5e01;} [lang='ko-KR'] .select-language-psbox .tit-box .b-tit {font-family: 'Pretendard Variable', sans-serif;} .select-language-psbox .tit-box .present-langsBtn {display:inline-block; width:100%; height:60px; line-height:60px; text-align:left; background:#fe5e01; position:relative; z-index:2;} .select-language-psbox .tit-box .present-langsBtn:after {content:''; display:block; clear:both;} /* .select-language-psbox .tit-box .s-txtBox {width:100%; padding:20px; box-sizing:Border-box; background:#666; position:relative; text-align:center;} */ .select-language-psbox .tit-box .present-langsBtn .s-txt {font-size:16px; letter-spacing:0; color:#fff; padding: 0 0 0 25px; display:inline-block; margin-left:40px; float:left; width: calc(100% - 162px); box-sizing: border-box; line-height:inherit !important; position:relative;} .select-language-psbox .tit-box .present-langsBtn .s-txt > .renew-sprite {width: 19px; height: 19px; background: url('/web/main_renewal/img/main/new_sprites.webp') -754px -223px; display: inline-block; margin: 0; position: absolute; top: 19px; left: 0; z-index: 3;} [lang='ko-KR'] .select-language-psbox .tit-box .present-langsBtn .s-txt {font-family:'Pretendard Variable', sans-serif;} .select-language-psbox .tit-box .present-langsBtn .s-txt > i {font-style: normal; margin: 0 10px; background: none; text-indent: inherit; width: auto;} .select-language-psbox .tit-box .present-langsBtn .s-txt > i, .select-language-psbox .tit-box .present-langsBtn .s-txt > span {vertical-align:middle !important;} .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow {width:115px; height:60px; display:block; background: #333; float:right; position:relative;} .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow:before {content: ''; width: 60px; height: 60px; background: #333; display: block; position: absolute; left: -7px; top: 0; webkit-transform: skewX(-13deg); transform: skewX(-13deg);} .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow .renew-sprite {width: 35px; height: 10px; width: 35px; height: 10px; background-position: -481px -312px; text-indent: -9999px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .select-language-psbox .tit-box .present-langsBtn:hover .present-langsBtn-arrow .icon {-webkit-animation: shake-horizontal 3.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; animation: shake-horizontal 3.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;} /* .select-language-psbox .tit-box .present-langsBtn {width: 40px; height: 40px; margin-left:10px; background: url('../img/main/ico_present-langsBtn.png') no-repeat center center #333; display: inline-block; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; vertical-align:middle;} .select-language-psbox .tit-box .present-langsBtn:hover {background: url('../img/main/ico_present-langsBtn.png') no-repeat center center #fe5e01;} */ .select-language-box .country {width:100%; margin-top:0 !important;} .select-language-box .country:after {content:''; width:100%; display:block; clear:both;} .select-language-box .country > dl {width:calc(33.33% - 60px / 3); float:left; padding-left:30px; margin-top:30px !important;} .select-language-box .country > dl:first-child {padding-left:0;} .select-language-box .country > dl > dt {margin-bottom:10px;} .select-language-box .country > dl > dt > a {font-size:18px; color:#fe5e01; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} [lang='ko-KR'] .select-language-box .country > dl > dt > a {font-family:'Pretendard Variable', sans-serif;} .select-language-box .country > dl > dd {display:block;} .select-language-box .country > dl > dd > a {display:block; border-bottom:1px solid #eaeaea; padding:10px 0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; font-size: 14px;} .select-language-box .country > dl > dd > a:first-child {border-top:1px solid #eaeaea;} /* 240731 레이어팝업 국기 이미지 삭제 */ .select-language-box .country > dl > dd > a:hover {color:#fe5e01; text-decoration:none; font-weight:bold; background:#ffdfcc; border-left:2px solid #fe5e01; transition-property: background-color; transition-duration: 2s;} .select-language-box .country > dl > dd i {width:10px;height:22px;margin-right:10px;vertical-align:middle; display:inline-block; background:none} .select-language-box .country > dl > dd a.zh {font-family:Microsoft yahei, Arial, Helvetica !important;} .select-language-box .country > dl > dd a.f_arial {font-family:Arial, Helvetica, sans-serif !important;} /* 240802 중국만 국기 이미지 보임 * .zh_CN .select-language-box .country > dl > dd > a:hover {color:#fe5e01; text-decoration:underline; background:#fff; border-left:0;} .zh_CN .select-language-box .country > dl > dd i {width:32px;height:22px;margin-right:10px;vertical-align:middle;background:url('../img/main/country-sprite-a.png') no-repeat left top;background-size:100%; display:inline-block;} .zh_CN .select-language-box .country > dl > dd .kor {background-position:0 0;} .zh_CN .select-language-box .country > dl > dd .chin {background-position:0 -22px;} .zh_CN .select-language-box .country > dl > dd .indi {background-position:0 -44px;} .zh_CN .select-language-box .country > dl > dd .indo {background-position:0 -66px;} .zh_CN .select-language-box .country > dl > dd .jpn {background-position:0 -88px;} .zh_CN .select-language-box .country > dl > dd .mal {background-position:0 -110px;} .zh_CN .select-language-box .country > dl > dd .viet {background-position:0 -132px;} .zh_CN .select-language-box .country > dl > dd .thai {background-position:0 -154px;} .zh_CN .select-language-box .country > dl > dd .usa {background-position:0 -176px;} .zh_CN .select-language-box .country > dl > dd .bras {background-position:0 -198px;} .zh_CN .select-language-box .country > dl > dd .mexi {background-position:0 -220px;} .zh_CN .select-language-box .country > dl > dd .colm {background-position:0 -242px;} .zh_CN .select-language-box .country > dl > dd .peru {background-position:0 -264px;} .zh_CN .select-language-box .country > dl > dd .chil {background-position:0 -286px;} .zh_CN .select-language-box .country > dl > dd .vene {background-position:0 -308px;} .zh_CN .select-language-box .country > dl > dd .ecua {background-position:0 -330px;} .zh_CN .select-language-box .country > dl > dd .lati {background-position:0 -352px;} .zh_CN .select-language-box .country > dl > dd .rus {background-position:0 -374px;} .zh_CN .select-language-box .country > dl > dd .tuni {background-position:0 -396px;} .zh_CN .select-language-box .country > dl > dd .ukr {background-position:0 -418px;} .zh_CN .select-language-box .country > dl > dd .iran {background-position:0 -440px;} .zh_CN .select-language-box .country > dl > dd .en-eng {background-position:0 -462px;} .zh_CN .select-language-box .country > dl > dd .en-ph {background-position:0 -484px;} .zh_CN .select-language-box .country > dl > dd .en-au {background-position:0 -506px;} .zh_CN .select-language-box .country > dl > dd .en-nz {background-position:0 -528px;} .zh_CN .select-language-box .country > dl > dd .en-za {background-position:0 -550px;} .zh_CN .select-language-box .country > dl > dd .es-es {background-position:0 -572px;} .zh_CN .select-language-box .country > dl > dd .pt-pt {background-position:0 -594px;} .zh_CN .select-language-box .country > dl > dd .de-de {background-position:0 -616px;} * 중국만 국기 이미지 보임 */ /*================================================================ 전체메뉴 ================================================================*/ .all-menu-container {width:100%; height:100%; position:fixed; background:rgba(0, 0, 0, 0.5); z-index: 9100; display:none; top:0;} .all-menu {width:100%; height:100%; position:relative; max-width:1920px; margin:0 auto;} .all-menu .all-left-menu-box {width:330px; height:100%; background:#fe5e01; display:block; padding:150px 50px 0 110px; box-sizing:border-box; position:relative; float:left;} .all-menu .all-left-menu-box:before {content:''; width:80px; height:80px; background:#fe5e01; webkit-transform: skewX(-13deg); transform: skewX(-13deg); position:absolute; top:0; right:-9px;} .all-menu .all-left-menu-box:after {content:''; display:block; clear:both;} /* .all-menu .all-menu-logo {display:block; float:left; position:relative; z-index:2;} */ .all-menu .all-menu-depth1-box {display:block;} .all-menu .all-menu-depth1-box li {margin-top:50px;} .all-menu .all-menu-depth1-box li:first-child {margin-top:0;} .all-menu .all-menu-depth1-box li a {display:block; text-align:right;} .all-menu .all-menu-depth1-box li a span {display:inline-block; position:relative; font-weight: 600; font-size: 24px; color:#ffb184; letter-spacing:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} [lang='ko-KR'] .all-menu .all-menu-depth1-box li a span {font-family: 'Pretendard Variable';} .all-menu .all-menu-depth1-box li a span:after {content:''; width:0; height:1px; background:#fff; position:absolute; bottom:-5px; left:0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .all-menu .all-menu-depth1-box li a:hover span, .all-menu .all-menu-depth1-box li.active a span {color:#fff; font-size:30px;} .all-menu .all-menu-depth1-box li a:hover span:after, .all-menu .all-menu-depth1-box li.active a span:after {width:100%;} .all-menu .all-right-menu-box {max-width:calc(100% - 330px); width: 100%; float: left; background: #fff; height: 100%; padding:0 165px 20px 100px; box-sizing:border-box; overflow-y:scroll;} .all-menu .all-right-menu-box .all-menu-depth2Box {display:block; padding:60px 0;} .all-menu .all-right-menu-box .all-menu-depth2Box .tit-box {margin-bottom:30px; position:relative;} .all-menu .all-right-menu-box .all-menu-depth2Box .tit-box:after {content:''; width:100%; height:1px; background:#eaeaea; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%);} .all-menu .all-right-menu-box .all-menu-depth2Box .b-tit {font-weight: 700; font-size: 35px; color: #333; letter-spacing: 0; display: inline-block; padding-right: 35px; background: #fff; z-index: 2; position: relative;} [lang='ko-KR'] .all-menu .all-right-menu-box .all-menu-depth2Box .b-tit {font-family: 'Pretendard Variable';} .all-menu .all-right-menu-box .all-menu-depth3-lineBox {padding-bottom:30px; border-bottom:1px solid #eaeaea;} .all-menu .all-right-menu-box .all-menu-depth3-lineBox:after {content:''; display:block; clear:both;} .all-menu-depth3-lineBox .all-menu-depth3-list {width: calc(98% / 5); /* max-width: 260px; */ display: inline-block; padding-top: 30px; vertical-align: top;} .all-menu-depth3-lineBox .all-menu-depth3-list li {margin-top:8px;} .all-menu-depth3-lineBox .all-menu-depth3-list li:nth-child(1) {margin-top:0;} .all-menu-depth3-lineBox .all-menu-depth3-list li.depth2-tit {margin-bottom:20px;} .all-menu-depth3-lineBox .all-menu-depth3-list li.depth2-tit a span {font-size:22px; letter-spacing:0; font-weight:700; color:#333;} [lang='ko-KR'] .all-menu-depth3-lineBox .all-menu-depth3-list li.depth2-tit a span {font-family: 'Pretendard Variable';} .all-menu-depth3-lineBox .all-menu-depth3-list li a span {font-size:15px; letter-spacing:0; font-weight:400; color:#454545; word-break:keep-all; line-height:18px; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} [lang='ko-KR'] .all-menu-depth3-lineBox .all-menu-depth3-list li a span {font-family: 'Pretendard Variable';} .all-menu-depth3-lineBox .all-menu-depth3-list li a:hover span {color:#fe5e01; text-decoration:underline;} .all-menu-close-btn {width:80px;height:80px; background:#525050; text-align: center; line-height: 95px; transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;display: block;position: absolute;right: 50px;top: 50px;} .all-menu-close-btn .renew-sprite {width: 25px; height: 25px; background-position: -472px -398px; display: block; margin: 27px auto 0;} .all-menu-close-btn:hover, .all-menu-close-btn:focus {background:#333;} #menu04.all-menu-depth2Box {padding-bottom:600px;} /*================================================================ total-searchBox ================================================================*/ .total-search-bgBox {position:fixed; width:100%; height:100%; z-index:9100; display:none; left:0; top:0;} .total-search-bg {background:rgba(0, 0, 0, 0.5); position:fixed; width:100%; height:100%; left:0;} .total-searchBox {width: 100%; background: #fff; padding-bottom: 40px; position: relative; max-height: 100%; box-sizing: border-box;} .total-search-top {width:100%; padding:34px 0; border-bottom:1px solid #eaeaea; box-sizing:border-box;} .total-search-top input {max-width:900px; width:100%; height:50px; padding:0 0 0 10px; box-sizing:border-box; margin: 0 30px 0 0; font-weight:200; font-size:18px; letter-spacing:0; color:#333; border:none; outline:none;} .total-search-top .renew-sprite {width: 22px; height: 23px; background-position: -568px -448px; display: inline-block; vertical-align: middle;} [lang='ko-KR'] .total-search-top input {font-family:'Pretendard Variable';} .total-search-top input::placeholder {color:#9a9a9a;} .total-search-top input:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } .total-search-top input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } .total-search-top input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } .total-search-top input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; } .total-search-top button {font-weight: 400; font-size: 18px; letter-spacing: 0; color: #fff; background: #fe5e01; border-radius: 45px; padding: 15px 34px; cursor: pointer; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .total-search-top button:hover, .total-search-top button:focus {background:#ea5600} [lang='ko-KR'] .total-search-top button {font-family:'Pretendard Variable';} .total-search-bt {width:100%; margin-top:30px; position:relative;} .total-search-bt:before {content:''; width:0.5px; height:100%; background:#eaeaea; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%);} .total-search-bt:after {content:''; display:block; clear:both;} .total-search-bt .search-word {width:calc(50% - 50px / 2); float:left; box-sizing:content-box;} .total-search-bt .search-word.ty01 {padding-right:25px;} .total-search-bt .search-word.ty02 {padding-left:25px;} .total-search-bt .search-word .b-tit {font-size: 18px; letter-spacing: 0; color: #fe5e01; margin-bottom:30px;} .total-search-bt .search-word .none-search-word {font-weight: 200; font-size: 14px; letter-spacing: 0; color: #9a9a9a;} [lang='ko-KR'] .total-search-bt .search-word .b-tit, [lang='ko-KR'] .total-search-bt .search-word .none-search-word {font-family:'Pretendard Variable';} .total-search-bt .search-word .search-word-list li {margin-top:15px;} .total-search-bt .search-word .search-word-list li:after {content:''; display:block; clear:both;} .total-search-bt .search-word .search-word-list li:first-child {margin-top:0;} .total-search-bt .search-word .search-word-list li a span {font-weight: 400; font-size: 14px; letter-spacing: 0; color: #9a9a9a;} .total-search-bt .search-word .search-word-list li a:hover span {text-decoration:underline;} [lang='ko-KR'] .total-search-bt .search-word .search-word-list li a span {font-family:'Pretendard Variable';} .total-search-bt .search-word .search-word-list li a.search-word-list-btn {float:left;} .total-search-bt .search-word .search-word-list li .search-word-list-date {float:right;} .total-search-bt .search-word .search-word-list li .search-word-list-date span {font-size:12px;} .total-search-bt .search-word .search-word-list li a.search-word-del-btn {margin-left:5px;width: 18px; height: 18px; border: 1px solid #bbb; background:#fff; box-sizing:border-box; display: inline-block; vertical-align: top; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; padding: 0 !important;} .total-search-bt .search-word .search-word-list li a.search-word-del-btn:after {content: ''; width: 12px; height: 12px; display: inline-block; background: url('/web/main_renewal/img/main/new_sprites.webp') /*-977px -860px*/ -477px -393px; background-size: 500px; line-height: inherit; vertical-align: unset;} .total-search-bt .search-word .search-word-list li a.search-word-del-btn:hover {border:1px solid #fe5e01;} .total-search-bt .search-word .search-word-list li a.search-word-del-btn:hover:after {background-position: /*-977px -880px;*/ -477px -414px;} /* 검색어 리스트 a -> button으로 변경 250718 LSJ */ .total-search-bt .search-word .search-word-list li button {background:none; line-height:inherit; cursor:pointer} .total-search-bt .search-word .search-word-list li button span {font-weight: 400; font-size: 14px; letter-spacing: 0; color: #9a9a9a;} .total-search-bt .search-word .search-word-list li button:hover span {text-decoration:underline;} .total-search-bt .search-word .search-word-list li button.search-word-list-btn {float:left;} .total-search-bt .search-word .search-word-list li button.search-word-del-btn {margin-left:5px;width: 18px; height: 18px; border: 1px solid #bbb; background:#fff; box-sizing:border-box; display: inline-block; vertical-align: top; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; padding: 0 !important;} .total-search-bt .search-word .search-word-list li button.search-word-del-btn:after {content: ''; width: 12px; height: 12px; display: inline-block; background: url('/web/main_renewal/img/main/new_sprites.webp') /*-977px -860px*/ -479px -391px; background-size: 500px; line-height: inherit; vertical-align: unset;} .total-search-bt .search-word .search-word-list li button.search-word-del-btn:hover {border:1px solid #fe5e01; cursor:pointer} .total-search-bt .search-word .search-word-list li button.search-word-del-btn:hover:after {background-position: /*-977px -880px;*/ -479px -411px;} .total-search-closeBox {position: absolute; top: 0; right: 0;} .total-search-close {width:120px; height:120px; background:#525050; display: block; text-align:center; position:relative;} .total-search-close .renew-sprite {width: 25px; height: 25px; background-position: -472px -398px; display: block; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} /* 자동완성 */ .btn-auto-on {width: 22px; height: 22px; overflow: hidden; text-indent: -99999px; display:inline-block; vertical-align:middle; margin-right:10px; display:none;} .btn-auto-on > .renew-sprite {width: 22px !important; height: 22px !important; background-position: -220px -224px !important; background-size:392px !important; display: block;} .auto-completion {width:100%; display:none;position: absolute; top: 60px; max-width: 930px; box-sizing: border-box; z-index:2;} .auto-completion .auto-completion-list {padding:10px 0; background:#fff; border:1px solid #ddd; border-bottom: none;} .auto-completion .auto-completion-list a {padding:10px 20px; display:block;} .auto-completion .auto-completion-list a:hover {background:#f5f5f5;} .auto-completion .txt-box {padding:20px; background:#f5f5f5; border:1px solid #ddd;} .auto-completion .txt-box .s-txt {display:inline-block; margin-right:10px;} .auto-completion .txt-box .btn-auto-off {position:relative; color:#fe5e01;} .auto-completion .txt-box .btn-auto-off .tooltip-con {display:none; position: absolute; z-index: 10; padding: 10px 15px; border: 1px solid #feae80; font-size: 13px !important; color: #666; line-height: 20px; background: #fff; width: 175px; height: auto; top: 30px; left: 0; margin-left: 0;} .auto-completion .txt-box .btn-auto-off .tooltip-con .renew-sprite {position: absolute; top: -7px; left: 30px; width: 8px; height: 7px; margin-left: 0; background-position: -377px -149px; background-size:392px;} .auto-completion .txt-box .btn-auto-off .tooltip-con .icon-auto-end {width: 14px; height: 14px; overflow: hidden; text-indent: -9999px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat; background-position:-134px -137px; background-size:240px; display: inline-block; vertical-align: middle;} .auto-completion .txt-box .btn-auto-off:hover {text-decoration:underline;} .auto-completion .txt-box .btn-auto-off:hover .tooltip-con {display:block;} .total-search-top.auto-on .auto-completion {display:block;} /* 자동완성 a->button 변경으로 수정 250721 LSJ */ button.btn-auto-on { width: 22px; height: 22px; overflow: hidden; text-indent: -99999px; display: inline-block; vertical-align: middle; margin-right: 10px; background: none; border: none; padding: 0; cursor: pointer; border-radius: 0 ;} button.btn-auto-on > .renew-sprite { width: 22px !important; height: 22px !important; background-position: -220px -224px !important; background-size: 392px !important; display: block;} /*================================================================ smart-bar ================================================================*/ /* 기존 소스 삭제 */ #smartbar-wrap .head:after {display:none !important;} #smartbar-wrap .smart-menu li.on:before {display:none !important;} #smartbar-wrap .smart-menu a:after {display:none !important;} .smart-bar-tab-vis .smart-bar-tab-list li input[type="radio"] + label, .smart-bar-tab-vis .smart-bar-tab-list li input[type="checkbox"] + label {margin-top:0 !important;} #smart-bar {width:100%; background:#f5f5f5; position:relative; bottom:0; z-index:10; display:none;} #smart-bar.fix-in {position:fixed; bottom:0; display:block;} #smart-bar:before {content:''; width:20%; height:60px; position:absolute; top:0; left:0; background:#fe5e01;} #smart-bar:after {content:''; display:block; clear:both;} #smart-bar .left-box {width:307px; height:60px; background:#fe5e01; float:left; position:relative; } #smart-bar .left-box:after {content:''; width:60px; height:60px; background:#fe5e01; position:absolute; top:0; right: -40px; z-index: 1; webkit-transform: skewX(-13deg); transform: skewX(-13deg);} #smart-bar .left-box .smart-bar-btn {display:block; height: 60px; line-height: 60px; position:relative; z-index:2; width:100%;} #smart-bar .left-box .smart-bar-btn .renew-sprite {width: 12px; height: 8px; background-position: -536px -312px; position:absolute; top:50%; right:0; transform:translateY(-50%);} #smart-bar.active .left-box .smart-bar-btn .renew-sprite {width: 12px; height: 8px; background-position: -568px -312px; position:absolute; top:50%; right:0; transform:translateY(-50%);} #smart-bar .left-box .smart-bar-btn span {font-weight: 700; font-size: 21px; color:#fff; line-height:60px;} [lang='ko-KR'] #smart-bar .left-box .smart-bar-btn span {font-family: 'Pretendard Variable';} #smart-bar .right-box {width:calc(100% - 307px); float:left; height:100%; padding-left:50px; box-sizing:border-box;} #smart-bar .right-box .smart-bar-tab {position:relative; width:calc(100% - 60px); float:left; right: auto; top: auto;} #smart-bar .right-box .smart-bar-tab:after {content:''; display:block; clear:both;} #smart-bar .right-box .smart-bar-tab li {float:left; position:relative;} #smart-bar .right-box .smart-bar-tab li .renew-sprite {background-size:465px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} /* #smart-bar .right-box .smart-bar-tab li.ty01 .renew-sprite {width: 28px; height: 28px; background-position: -763px -699px;} #smart-bar .right-box .smart-bar-tab li.ty02 .renew-sprite {width: 28px; height: 28px; background-position: -873px -43px;} #smart-bar .right-box .smart-bar-tab li.ty03 .renew-sprite {width: 28px; height: 28px; background-position: -196px -790px;} #smart-bar .right-box .smart-bar-tab li.ty04 .renew-sprite {width: 28px; height: 28px; background-position: -270px -790px;} #smart-bar .right-box .smart-bar-tab li.ty05 .renew-sprite {width: 28px; height: 28px; background-position: -348px -790px;} #smart-bar .right-box .smart-bar-tab li.ty01.active .renew-sprite {background-position: -158px -790px} #smart-bar .right-box .smart-bar-tab li.ty02.active .renew-sprite {background-position: -873px -81px;} #smart-bar .right-box .smart-bar-tab li.ty03.active .renew-sprite {background-position: -233px -790px;} #smart-bar .right-box .smart-bar-tab li.ty04.active .renew-sprite {background-position: -309px -790px;} #smart-bar .right-box .smart-bar-tab li.ty05.active .renew-sprite {background-position: -873px -5px;} */ #smart-bar .right-box .smart-bar-tab li.ty01 .renew-sprite {width: 28px; height: 28px; background-position: -298px -264px;} #smart-bar .right-box .smart-bar-tab li.ty02 .renew-sprite {width: 28px; height: 28px; background-position: -409px -43px;} #smart-bar .right-box .smart-bar-tab li.ty03 .renew-sprite {width: 28px; height: 28px; background-position: -196px -356px;} #smart-bar .right-box .smart-bar-tab li.ty04 .renew-sprite {width: 28px; height: 28px; background-position: -272px -356px;} #smart-bar .right-box .smart-bar-tab li.ty05 .renew-sprite {width: 28px; height: 28px; background-position: -348px -356px;} #smart-bar .right-box .smart-bar-tab li.ty01.active .renew-sprite {background-position: -156px -356px} #smart-bar .right-box .smart-bar-tab li.ty02.active .renew-sprite {background-position: -409px -81px;} #smart-bar .right-box .smart-bar-tab li.ty03.active .renew-sprite {background-position: -233px -356px;} #smart-bar .right-box .smart-bar-tab li.ty04.active .renew-sprite {background-position: -309px -356px;} #smart-bar .right-box .smart-bar-tab li.ty05.active .renew-sprite {background-position: -873px -5px;} #smart-bar .right-box .smart-bar-tab li a {width:70px; height:60px; display:block; position:relative;} #smart-bar .right-box .smart-bar-tab li a i.num {width: 22px; height: 22px; line-height: 22px; text-align: center; color: #fff; font-size: 12px; background: #fe5e01; display: block; border-radius: 50%; font-style: normal; position:absolute; top:5px; right:10px; text-indent:0 !important;} [lang='ko-KR'] #smart-bar .right-box .smart-bar-tab li a i.num {font-family: 'Pretendard Variable';} #smart-bar .right-box .go-top {display:block; float:left; line-height:59px; width:60px;} #smart-bar .right-box .go-top > span {font-size:16px; letter-spacing:0; color:#888; padding-right:30px; line-height:59px; position:relative; display:block;} #smart-bar .right-box .go-top > span .renew-sprite {width: 12px; height: 8px; background-position: -576px -254px; position:absolute; top:50%; right:0; transform:translateY(-50%);} [lang='ko-KR'] #smart-bar .right-box .go-top > span {font-family: 'Pretendard Variable';} .smart-bar-tab-visBox {width:100%; height:180px; padding:30px 0 !important; box-sizing:border-box; background:#fff; display:none; /* overflow:hidden; */} .smart-bar-tab-visBox:after {content:''; display:block; clear:both;} .smart-bar-tab-vis:after {content:''; display:block; clear:both;} .smart-bar-tab-vis .txt-box {float:left; width:160px;} .smart-bar-tab-vis .txt-box .tab-tit {font-size: 20px !important; font-weight: 400; color: #333 !important; margin-bottom: 20px !important; position: relative !important; padding-top:0 !important;} .smart-bar-tab-vis .txt-box .smart-bar-tab-vis-more {} .smart-bar-tab-vis .txt-box .smart-bar-tab-vis-more span {font-size:15px; color:#fe5e01; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .smart-bar-tab-vis .txt-box .smart-bar-tab-vis-more:hover span {border-bottom:1px solid #fe5e01;} .smart-bar-tab-vis .smart-bar-tab-list-box {float:left; width:calc(100% - 160px) !important;} .smart-bar-tab-vis .smart-bar-tab-lis {} .smart-bar-tab-vis .smart-bar-tab-list li {position:relative;} .smart-bar-tab-vis .smart-bar-tab-list li a {width:100px; display:block; margin:0 auto;} .smart-bar-tab-vis .smart-bar-tab-list li a.smart-bar-tab-item-close {width: 18px; height: 18px; position: absolute !important; border: 1px solid #bbb; box-sizing:border-box; display: block; top: 0; right: 40px; text-align:center; background:#fff; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .smart-bar-tab-vis .smart-bar-tab-list li a.smart-bar-tab-item-close .rel-box {width:100%; height:100%; position:relative;} .smart-bar-tab-vis .smart-bar-tab-list li a.smart-bar-tab-item-close .renew-sprite {width: 12px; height: 12px; display: inline-block; background-position: /*-979px -860px*/-479px -392px; background-size: 500px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .smart-bar-tab-vis .smart-bar-tab-list li a.smart-bar-tab-item-close:hover {border:1px solid #fe5e01;} .smart-bar-tab-vis .smart-bar-tab-list li a.smart-bar-tab-item-close:hover .renew-sprite {background-position: /*-979px -880px*/ -479px -413px;} .smart-bar-tab-vis .smart-bar-tab-list li img {width:100%; margin-bottom:0 !important;} .smart-bar-tab-vis .smart-bar-tab-list li a .item-name {width:100%; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; display:block; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .smart-bar-tab-vis .smart-bar-tab-list li a:hover .item-name {color:#fe5e01;} .smart-bar-tab-vis .smart-bar-tab-list {padding:0 30px;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow {position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; width:18px; height:18px; text-indent:-99999999px; opacity:0.5; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-prev {left:0; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -754px -370px; display:block;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-next {right:0; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -754px -332px;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-prev:hover {opacity:1;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-next:hover {opacity:1;} .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-disabled, .smart-bar-tab-vis .smart-bar-tab-list .slick-arrow.slick-disabled:hover {opacity:0.5;} .smart-bar-tab-vis-none {text-align:center; line-height:120px;} .smart-bar-tab-vis-none > p {line-height:120px !important;} .smart-bar-tab-vis.ty03 .smart-bar-tab-list-box {width:calc(100% - 340px) !important;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox {width: 170px; display: block; float: left;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > p {margin-bottom: 15px; line-height: 20px; font-weight:700; color:#333;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > a {padding:5px 10px; background:#fe5e01;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > a span {font-weight: 500; font-size: 16px; color:#fff;} [lang='ko-KR'] .smart-bar-tab-vis.ty03 .smart-bar-compareBox > a span {font-family: 'Pretendard Variable';} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"] {width: 0; height: 0;} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"] + label {padding-left:22px; cursor: pointer; position:relative;} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"] + label:before {content:''; width:10px; height:11px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; display:block; background-size: 392px; position:absolute; top:4px; left:0;} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"]:checked + label:before {width:22px; height:22px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -127px -181px; background-size: 320px; top:0;} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"]:checked + label {color:#fe5e01;} .smart-bar-tab-vis .smart-bar-tab-list.ty03 li a .item-name input[type="checkbox"]:disabled + label:before {background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; background-size: 392px;} #smart-bar .mb_close {display:none;} /* 제품비교 팝업 */ .pop-container .head .hgroup {position: relative; z-index: 1; padding-right: 50px; font-size:26px; line-height: 30px;} .product-compare-pop {width:1000px;} .product-compare-list:after {content:''; display:block; clear:both;} .product-compare-list .img {position: relative; height: 150px; text-align: center;} .product-compare-list .img.bg4 {background-color: #fbfafa !important;} .product-compare-list .img img {max-width: 150px;} .product-compare-list {margin:-10px;} .product-compare-list > li {padding:10px; box-sizing:border-box;} .btn.icon.btn-att {width:48px;height:39px;margin:0;overflow:hidden;text-align:center;background:none;} .btn.icon.btn-att > i {margin:8px 0 0 5px;} .btn-att:before {content:'';position:absolute;top:0;left:5px;width:calc(100% + 10px);height:100%;-ms-transform:skewX(-13deg);-webkit-transform:skewX(-13deg);transform:skewX(-13deg);background:#fff;} .btn.icon.btn-att.on > i {background-position:0 -50px;} .btn.icon.btn-att.on:before {background:#fe5e01;} .product-compare-list .btn-att {position: absolute; bottom: 0; right: 0;} .specialstring {display:inline-block;width:auto;height:12px;vertical-align:baseline;margin:0 1px;} .certmarkstring {width: auto; height: 20px;} .pro-btn .icon-star, .btn-att .icon-star {width:22px; height:22px; display: inline-block; overflow: hidden; background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -140px -670px !important; z-index:1; text-indent: -9999px; position:relative;} .btn.icon.btn-att.on > i {background:url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -182px -670px !important;} .dot-txt, .dot-list > li {position: relative; margin-top: 4px; padding-left: 10px; line-height: 20px;font-size:14px;} .dot-txt:before, .dot-list > li:before {content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 2px; background-color: #fe5e01;} .smart-pop .table td, .smart-pop .table .td {padding: 10px 30px 10px 20px;} .smart-pop .table td .txt-indent {line-height:22px;} /* 2020. 05. 12. 스마트바 로그인 유도 */ .smart-bar-tab-login {text-align: center; padding: 20px 0;} .smart-bar-tab-login > p {margin-bottom:10px;} .smart-bar-tab-login > a {display: inline-block; position: relative; min-width: 70px; margin: 10px 4px 0; padding: 8px 15px; font-size: 13px; line-height: 16px; text-align: center; vertical-align: middle; white-space: normal; word-break: keep-all; font-size: 14px; background-color: #fe5e01; color:#fff; box-sizing: border-box;} /* 2020. 05. 20 제품상담 contents 추가 */ .smart-bar-tab-list-box .cont5 .left {position:relative;padding-left:62px;} .smart-bar-tab-list-box .cont5 .info .btn-mail, .smart-bar-tab-list-box .cont5 .info .btn-tel{display:block;padding-left:20px;text-indent:-20px;} .smart-bar-tab-list-box .cont5 .info .btn-mail {margin-bottom:12px;} .smart-bar-tab-list-box .cont5 .info .btn-tel {margin-bottom:10px;} .smart-bar-tab-list-box .cont5 .img {display:block;position:absolute;top:0;left:0;width:50px;height:50px;} .smart-bar-tab-list-box .cont5 .img img {width:50px;height:50px;} .smart-bar-tab-list-box .cont5 .left {padding-left:130px; box-sizing:border-box;} .smart-bar-tab-list-box .cont5 .info .btn-mail, .smart-bar-tab-list-box .cont5 .info .btn-tel {padding-left:25px;text-indent:-25px;} .smart-bar-tab-list-box .cont5 .img {width:100px;height:100px;} .smart-bar-tab-list-box .cont5 .img img {width:100px;height:100px;} .smart-bar-tab-list-box .cont5 .info p:nth-child(2) {margin-top:8px;} .smart-bar-tab-list-box .cont5 .info .btn-mail span, .smart-bar-tab-list-box .cont5 .info .btn-tel span {line-height:20px; vertical-align:top; text-decoration:underline;} .smart-bar-tab-list-box .cont5 .btn-mail .icon-mail {display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; background:url('/web/main_renewal/img/main/new_sprites.webp') -224px -670px;} .smart-bar-tab-list-box .cont5 .btn-tel .icon-tel {display: inline-block; width: 22px; height: 22px; overflow: hidden; text-indent: -9999px; background:url('/web/main_renewal/img/main/new_sprites.webp') -98px -670px;} body.ko_KR .smart-bar-tab li:last-child, body.in_ID .smart-bar-tab li:last-child, body.vi_VN .smart-bar-tab li:last-child, body.en_US .smart-bar-tab li:last-child, body.pt_BR .smart-bar-tab li:last-child, body.es_CO .smart-bar-tab li:last-child, body.es_PE .smart-bar-tab li:last-child, body.es_CL .smart-bar-tab li:last-child, body.es_VE .smart-bar-tab li:last-child, body.es_EC .smart-bar-tab li:last-child, body.es_LA .smart-bar-tab li:last-child, body.ru_RU .smart-bar-tab li:last-child, body.tr_TR .smart-bar-tab li:last-child {display:none !important;} /*================================================================ footer ================================================================*/ #new-footer {width:100%;} #new-footer .inwrap {display:flex;gap: 20px;} .foot01:after, .foot02:after, .foot-menu01:after, .foot-menu02:after, .foot-sns-list:after, .certified-box:after, .foot02 .left-box:after {content:''; width:100%; display:block; clear:both;} .foot01 {background:#333; padding:70px 0 60px 0; min-height:225px; box-sizing:border-box;} .foot01-sec01 {order: 2;margin-left:auto;/*position:absolute; top:0; right:0;*/ text-align:right;display:flex; flex-direction:column; align-items:flex-end;} .foot01-sec01 .foot-menu01 {display:inline-block; margin-bottom:10px; display:flex; gap:10px 15px; flex-wrap: wrap; justify-content: flex-end;} .foot01-sec01 .foot-menu01:after {display:none;} .foot01-sec01 .foot-menu01 li {padding-left:15px; position:relative;} .foot01-sec01 .foot-menu01 li:after {content: ''; width: 1px; height: 13px; background: rgba(237, 237, 237, 0.1); display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .foot01-sec01 .foot-menu01 li:first-of-type {margin-left:0; padding-left:0;} .foot01-sec01 .foot-menu01 li:first-of-type:after {display:none;} .foot01-sec01 .foot-menu01 li a {display:block;white-space:nowrap;} .foot01-sec01 .foot-menu01 li a span {font-size:14px; color:#fff;} .foot01-sec01 .foot-menu01 li a.point span {color:#ffa32a !important; font-weight:700;} .foot01-sec01 .foot-menu01 li a:hover span {text-decoration:underline;} .foot01-sec01 .foot-menu02 {display:flex;gap:10px 15px;flex-wrap:wrap; justify-content: flex-end;} .foot01-sec01 .foot-menu02:after {display:none;} .foot01-sec01 .foot-menu02 li {padding-left:15px; position:relative;} .foot01-sec01 .foot-menu02 li:after {content: ''; width: 1px; height: 13px; background: rgba(237, 237, 237, 0.1); display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .foot01-sec01 .foot-menu02 li:first-of-type {margin-left:0; padding-right:0;} .foot01-sec01 .foot-menu02 li:first-of-type:after {display:none;} .foot01-sec01 .foot-menu02 li a {display:block;} .foot01-sec01 .foot-menu02 li a span {font-size:16px; color:#ababab; font-weight:700;} .foot01-sec01 .foot-menu02 li a.point span {color:#ffa32a;} .foot01-sec01 .foot-menu02 li a:hover span {text-decoration:underline;} .foot01-sec02 {order: 1;} .foot01-sec02 h4 {display: block; font-size: 23px; color:#fff; margin-bottom:10px;} .foot01-sec02 h3 {font-weight: 600; font-size: 36px; display: block; margin-bottom:30px; line-height: 1; color:#fe5e01 !important;} [lang='ko-KR'] .foot01-sec02 h3 {font-family: 'Pretendard Variable';} .foot01-sec02 p {font-size: 14px; color:#fff;} .foot01-sec02 p a {color:#fff;} .foot01-sec03 {position:absolute; bottom:-15px; right:0;} .foot01-sec03 a.kakao-btn {width:290px; height:80px; display:block;} .foot01-sec03 a.kakao-btn > .renew-sprite {width: 290px; height: 80px; background-position: -5px -5px; background-size:392px} .wc-code-zone {display:none;} .foot02 {background:#292929; height:80px; line-height:80px;} .foot02 .left-box {float:left;} .foot-sns-list {display:block; float:left;} .foot-sns-list li {float:left; margin-left:7px;} .foot-sns-list li:first-child {margin-left:0;} .foot-sns-list li a {display:block; line-height:80px; width:32px; height: 80px; text-indent: -99999px; position:relative;} .foot-sns-list li a .renew-sprite {width: 32px; height: 32px; background-position: -5px -259px; background-size:392px; position:absolute; top:50%; left:0; transform:translateY(-50%);} .foot-sns-list li.F a .renew-sprite {background-position: -5px -259px;} .foot-sns-list li.T a .renew-sprite {background-position: -47px -259px;} .foot-sns-list li.Y a .renew-sprite {background-position: -89px -259px;} .foot-sns-list li.W a .renew-sprite {background-position: -173px -259px;} .foot-sns-list li.K a .renew-sprite {background-position: -131px -259px;} .foot-sns-list li.L a .renew-sprite {background-position: -5px -367px;} /* 221025 LinkedIn 추가 */ .foot-sns-list li.Z a .renew-sprite {background-position: -47px -367px;} /* 221114 Zalo 추가 */ .foot-sns-list li.A a .renew-sprite {background-position: -89px -367px;} /* 230324 Whatsapp 추가 */ .foot-sns-list li.V a .renew-sprite {background-position: -131px -367px;} /* 230525 텔레그램 추가 */ .foot-sns-list li.E a .renew-sprite {background-position: -173px -367px;} /* 230525 Vkontakte 추가 */ .foot-sns-list li.wc {display:none;} .foot-sns-list li.wc a .renew-sprite {background:url('../img/main/ico-wechat.jpg') no-repeat center center;} .foot02 .foot02-selectbox {position: relative; display: block; float: left; width: 200px; height: 32px; margin:25px 0 0 20px; border: 1px solid #4D4D4D; background: #292929 !important; box-sizing: border-box; vertical-align: middle;} .foot02 .foot02-selectbox:hover, .foot02 .foot02-selectbox.focus {border-color:#fe5e01 !important;} .foot02 .foot02-selectbox .foot-select-value {display:block; position:relative; height:100%; padding:5px 40px 5px 10px; color:#666 !important; text-align:left; line-height:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; box-sizing:border-box;} .foot02 .foot02-selectbox .foot-select-value:hover {color:#fff; text-decoration:none;} .foot02 .foot02-selectbox .foot-select-value:after {content:''; position:absolute; top:0; right:0; width:32px; height:33px; overflow:hidden; border-left:1px solid #4D4D4D;} .foot02 .foot02-selectbox .foot-select-value .renew-sprite {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 12px; height: 8px; background-position: -298px -670px;} .foot02 .foot02-selectbox:hover .foot-select-value:after, .foot02 .foot02-selectbox.focus .foot-select-value:after {border-left:1px solid #fe5e01;} .foot02 .foot02-selectbox.open .foot-select-value .renew-sprite {background-position: -266px -670px;} .foot02 .foot02-selectbox .option {display:none;position:absolute; bottom:31px;left:-1px;width:100%;width:100%;padding:0;overflow:hidden;border:1px solid #4d4d4d;border-top:0 none; background:#292929; z-index:10; top:auto !important;} .foot02 .foot02-selectbox.scroll .option {padding:10px 5px 10px 0;max-height:170px;} .foot02 .foot02-selectbox ul {width:100%;} .foot02 .foot02-selectbox ul li {width:100%;min-height:30px;} .foot02 .foot02-selectbox ul li a {display:block;padding:5px 10px;line-height:20px; color:#fff;} .foot02 .foot02-selectbox ul li a:hover {background:#666;} .foot02 .foot02-selectbox.default .select {position:relative; z-index:10; width:100% !important; height:32px;line-height:32px;opacity:0;} .foot02 .foot02-selectbox.default .foot-select-value {position:absolute;bottom:0;left:0;width:100%;} .certified-box {display:block; float:left; height:32px; margin-left:25px;} .certified-box li {float:left; margin-left:20px; height:80px; position:relative;} .certified-box li:first-child {margin-left:0;} .certified-box li.chi-none {display:block;} .certified-box li.chi-block {display:none;} .certified-box li.wa {width: 25px;} .certified-box li.wa .renew-sprite {width: 25px; height: 24px; background-position: -152px -61px; background-size: 250px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .certified-box li.wc {width:120px;} .certified-box li.wc .renew-sprite {width: 120px; height: 20px; background-position: -747px -220px; background-size: 500px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .certified-box li.gt {width:90px;} .certified-box li.gt .renew-sprite {width: 90px; height: 15px; background-position: -415px -150px; background-size: 345px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .certified-box li a {line-height:80px;} /* 24.03.22 GeoTrust logo 교체 */ #DigiCertClickID__GAbaY5- {position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #DigiCertClickID__GAbaY5- img {height: 33px;} #DigiCertClickID_ibPdc08h {position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #DigiCertClickID_ibPdc08h img {height: 33px;} .DigiCertClickID {position: absolute; top: 50%; left: 0; transform: translateY(-50%);} .DigiCertClickID img {height: 33px;} .foot02 .right-box {float:right;} .foot02 .right-box .copyright {font-size: 13px; color: rgba(255, 255, 255, 0.5) !important; line-height:80px;} /* 중국 footer */ #new-footer.chi .foot01 {min-height: 325px; height: 325px; padding: 70px 0 25px 0;} #new-footer.chi .foot-sns-list li.wc {display:block;} #new-footer.chi .foot01-sec03 {bottom:0;} #new-footer.chi .foot01-sec03 a.kakao-btn {display:none;} #new-footer.chi .wc-code-zone {display:block;} #new-footer.chi .wc-code-zone:after {content:''; display:block; clear:both;} #new-footer.chi .wc-code-zone .youku-btn {width: 30px; height: 30px; display: inline-block; vertical-align: top; margin-right: 20px;} #new-footer.chi .foot02 .foot02-selectbox {width:170px; margin: 25px 0 0 15px;} #new-footer.chi .certified-box {margin-left:0;} #new-footer.chi .certified-box li.chi-none {display:none;} #new-footer.chi .certified-box li.chi-block {display:block;} #new-footer.chi .certified-box li.chi-block span {padding-left:30px; color:#fff; display: block; font-size: 14px; letter-spacing: 0; background-size:23px 25px; line-height:80px; position:relative;} #new-footer.chi .certified-box li.chi-block span .renew-sprite {width: 25px; height: 25px; background-position: -305px -163px; background-size: 392px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} [lang='ko-KR'] #new-footer.chi .certified-box li.chi-block span {font-family:'Microsoft yahei', 'Arial, Helvetica';} #new-footer.chi .renew-sprite.Wechat-QR-code {width: 132px; height: 154px; background-position: -10px -344px;} /* 영문권 footer */ #new-footer.eng .foot01-sec01 {top:50%; transform:translateY(-50%);} #new-footer.eng .foot01-sec03 {display:none;} /* 2020. 05. 11 추가 css */ /* 로딩 */ .document-dimed {position:fixed;top:0;left:0;bottom:0;right:0;z-index:999;} .loading-dimed {position:fixed;top:0;left:0;bottom:0;right:0;z-index:99999;} .loading-dimed.visual {position:absolute;top:0;left:0;width:100%;height:100%;} .loading-dimed:after {content:'';position:absolute;top:50%;left:50%;z-index:1;width:80px;height:80px; transform: translate(-50%, -50%); background:url('../img/common/loading.svg') no-repeat center center;} .loading-dimed:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background:#000;} .document-dimed:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background:#000;} .loading-dimed .loading-text{display:block;position:absolute;top:50%;left:50%;z-index:2;width:100px;height:50px;font-size:24px;color:#000;margin:0 0 0 -60px;} /* 2020. 05. 13. */ #smartbar-wrap + #footer {margin-bottom:0 !important;} /* 띠 배너 */ .belt-banner {position: relative; z-index: 680; display: block; overflow: hidden; background-color: #fff; background-size: cover; background-repeat: no-repeat; background-position: 50% 0; padding: 0; overflow: hidden; box-sizing: border-box;} .belt-banner .inner {background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; max-width: 1230px; padding: 0 15px; position: relative; width: 100%; margin: 0 auto; box-sizing:border-box;} .belt-banner .cont{text-align:center; padding: 30px;} .belt-banner .belt-banner-top{min-height:52px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #ddd; padding:20px 30px;} .belt-banner .belt-banner-top .txt {display: block; font-size: 24px; color: #666; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; min-width: 1px; word-break: keep-all; box-sizing: border-box; line-height:1.2em; text-align:center;} .belt-banner .belt-banner-bottom{padding:3px 0 5px} .belt-banner .belt-banner-bottom:after{content:""; display:block; clear:both;} .belt-banner .belt-banner-bottom .btn-group .btn {margin:10px 20px;} .belt-banner .pop-close {position:absolute;top:15px;right:15px;} .belt-banner .control-left{width:calc(100% - 150px); float:left; padding-left:150px; text-align:center; box-sizing:border-box;} .belt-banner .control-right{width:150px; float:right; text-align:right;} .belt-banner .cookie-area input[type="checkbox"] {width: 0; height: 0;} .belt-banner .cookie-area input[type="checkbox"] + label {display: inline-block; position: relative; z-index: 1; min-height: 22px; margin-top: 10px; margin-right: 24px; padding-left: 25px; color: #666; line-height: 22px; cursor: pointer; vertical-align: middle; cursor: pointer; margin-top:0;margin-right:0;} .belt-banner .cookie-area input[type="checkbox"] + label:before {content:''; width:10px; height:11px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; display:block; background-size: 392px; position:absolute; top:4px; left:0;} .belt-banner .cookie-area input[type="checkbox"]:checked + label:before {width:22px; height:22px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -127px -181px; background-size: 320px; top:0;} .belt-banner .cookie-area input[type="checkbox"]:checked + label {color:#fff;} .belt-banner .cookie-area input[type="checkbox"]:disabled + label {background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; background-size: 392px;} /* 이미지배너 */ .img-type-pop {position:fixed;display:inline-block;z-index:670;} .img-type-pop .img-pop-cont {display:inline-block; margin-top:3px; background-size:auto 6px;} .img-type-pop .img-pop-cont img {width:100%;} .img-type-pop .btn-cooki {display:block;font-size:12px;color:#fff;line-height:26px;text-align:center;background:#fe5e01;} .img-type-pop .pop-close {position:absolute;top:0;right:0;width:40px;height:40px;margin-top:-40px;padding:6px; box-sizing:border-box;} .pop-close .icon-pop-close {width: 30px; height: 28px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -690px -444px !important; text-indent:-99999px; display:block; } /* 동영상 배너 */ .mov-type-pop {position:fixed;top:0;left:0;bottom:0;right:0;background:url('/web/images/main/bg-dim1.webp') repeat 0 0;z-index:1000;} .mov-type-pop .mov-pop-cont {position:absolute;top:50%;left:50%;max-width:1100px;width:90%;-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);} .mov-type-pop .mov-pop-cont .txt {padding:5px 0px 15px;} .mov-type-pop .mov-pop-cont .txt .title {display: inline-block; margin-right: 20px; font-size: 26px; color: #fff; line-height: 32px; word-break: keep-all;} .mov-type-pop .mov-pop-cont .txt .btn {display: inline-block; position: relative; min-width: 70px; padding: 8px 15px; line-height: 16px; text-align: center; vertical-align: middle; white-space: normal; word-break: keep-all; font-size: 14px; margin: 0 5px;} .mov-type-pop .mov-pop-cont .txt .btn:hover {text-decoration:underline;} .mov-type-pop .mov-pop-cont .txt .btn.bg0 {background-color: #fe5e01 !important; color: #fff;} .mov-type-pop .mov-pop-cont .video-box {position:relative;border:3px solid #fc6004;} .mov-type-pop .mov-pop-cont .video-box iframe {position:absolute;top:0;left:0;width:100%;height:100%;} .mov-type-pop .mov-pop-cont img {width:100%;} .mov-type-pop .mov-pop-cont .pop-close {position:absolute;top:0;right:0;padding:5px;} .mov-type-pop .mov-pop-cont p.align-right {text-align:right; line-height: 20px} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"] + label {margin-top:10px;margin-right:0 !important;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"] {width: 0; height: 0;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"] + label {display: inline-block; position: relative; z-index: 1; min-height: 22px; margin-top: 10px; margin-right: 24px; padding-left: 25px; color: #fff; line-height: 22px; cursor: pointer; vertical-align: middle; cursor: pointer;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"] + label:before {content:''; width:10px; height:11px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; display:block; background-size: 392px; position:absolute; top:4px; left:0;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"]:checked + label:before {width:22px; height:22px; background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -127px -181px; background-size: 320px; top:0;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"]:checked + label {color:#fff;} .mov-type-pop .mov-pop-cont p.align-right input[type="checkbox"]:disabled + label:before {background: url('/web/main_renewal/img/main/new_sprites.webp') no-repeat -377px -48px; background-size: 392px;} /* 24.02.13 중국 소스 일치화 SJL */ #wechat-pop .btn-pop-close {display: block;width: 60px;height: 60px; background: #fe5e01;text-indent: -9999px;} #wechat-pop .pop-container .btn-pop-close .icon-pop-close {margin: 15px auto 0; background-position:-483px -225px !important;} /*// 24.02.13 중국 소스 일치화 SJL */ @media screen and (min-width:1921px){ #smart-bar:before {width:35%;} } @media screen and (max-width:1700px) { /*================================================================ 전체메뉴 ================================================================*/ .all-menu .all-left-menu-box {width:215px; padding:50px;} .all-menu .all-menu-logo {float:none;} .all-menu .all-menu-depth1-box {float:none; margin-top:50px;} .all-menu .all-right-menu-box {max-width: calc(100% - 215px);} /* .all-menu .all-right-menu-box .all-menu-depth2Box {min-width:1000px;} */ } @media screen and (max-width:1500px) { /*================================================================ 전체메뉴 ================================================================*/ .all-menu-close-btn {right: auto; top: auto; left: 70px; bottom: 50px;} .all-menu .all-right-menu-box {padding:0 20px 0 45px;} /* .all-menu-depth3-lineBox .all-menu-depth3-list {max-width:180px;} */ } @media screen and (max-width:1250px) { .model-finder-tab li .tab-contents .form-box {width:calc(100% - 460px);} } @media screen and (max-width:1200px) { /*================================================================ 공통 ================================================================*/ .inwrap {max-width:1200px; width:calc(100% - 10%); margin:0 5%;} /* 기존 css 삭제 */ #container {padding-top:70px !important;} /* model-finder */ .model-finderBox {width:calc(100% - 40px);} .model-finder-tab li .tab-contents {padding:30px 20px;} .model-finder-tab li .tab-contents .tit-box {width:100%; float:none; background: none; padding-bottom:20px; margin-top:0;} .model-finder-tab li .tab-contents .tit-box.ty02 {width:100%; float:none; background:none; padding-bottom:20px;} .model-finder-tab li .tab-contents .tit-box .b-tit {display:inline-block; margin-bottom:0;} .model-finder-tab li .tab-contents .tit-box .b-tit > br {display:none;} .model-finder-tab li .tab-contents .tit-box .s-txt {display:inline-block; margin:0 0 0 15px;} .model-finder-tab li .tab-contents .tit-box .s-txt > br {display:none;} .model-finder-tab li .tab-contents .form-box {width: calc(100% - 165px); float: none; text-align: left; margin-left: 0;} .model-finder-tab li .tab-contents .form1 {max-width: calc(33.33% - 20px); margin-left: 10px;} .model-finder-tab li .tab-contents .form .form-control {max-width: 665px;} .model-finder-tab li .tab-contents .srarch-btn {right: 20px; top: auto; bottom: 48px;} .model-finder-tab li .tab-contents .moter-selection-list {width: 100%; float: none; margin-left: 0;} .model-finder-tab li .model-finder-tab-btn span.tit-kor {font-size:14px;} /* .model-finder-tab li .model-finder-tab-btn {width:50%;} .model-finder-tab li .model-finder-tab-btn.ty02 {width:calc(50% - 2px);} .model-finder-tab li.active .model-finder-tab-btn {width:calc(50% - 2px);} */ /*================================================================ 전체메뉴 ================================================================*/ .all-menu-container {display:none !important;} /*================================================================ total-searchBox ================================================================*/ .total-search-top input {width: calc(100% - 214px);} .total-searchBox {padding-bottom:0;} .total-search-closeBox {position: relative; top: 0; right: 0; width: 100%; text-align: right; padding:18px 5%; background:#f4f4f4; box-sizing:border-box; margin-top: 30px;} .total-search-closeBox:after {content:''; width:100%; display:block; clear:both;} .total-search-close {width: auto; height: 25px; line-height: 25px; display: inline-block; background-color:inherit; padding-left:20px;} .total-search-close .renew-sprite {background-position: -517px -398px; vertical-align: middle; left:0;} .total-search-close > span.blinde {text-indent: 0; width: auto; height: auto; position: relative; top: 2px; left: 10px; font-size: 16px; letter-spacing: 0; font-weight: 700; color: #333;} [lang='ko-KR'] .total-search-close > span.blinde {font-family:'Pretendard Variable', sans-serif;} /*================================================================ footer ================================================================*/ .foot02 {padding:25px 0; height:auto; line-height:inherit;} .foot02 .left-box {float:none;} .foot-sns-list {display:inline-block; float:none;} .foot-sns-list li a {display: block; line-height: 1em; height:32px;} .foot02 .foot02-selectbox {float:none; display:inline-block; margin:0 0 5px 10px; vertical-align:top;} .certified-box {float:none; line-height:32px; margin:10px 0 0 0;} .certified-box li:first-child {margin-left:0;} .certified-box li {height:25px;} .certified-box li a {line-height: 1.5em;} .foot02 .right-box {float:none; margin-top:5px;} .foot02 .right-box .copyright {line-height:1em;} #new-footer.chi .certified-box li:nth-child(3) {margin-left:0;} #new-footer.chi .foot02 .foot02-selectbox {margin:0 0 5px 10px;} #new-footer.chi .certified-box li.chi-block span {line-height:2em;} #new-footer.chi .certified-box li a {line-height: 2em;} } @media screen and (max-width:1024px) { .hidden-pc {display:block;} /* wechat popup */ #wechat-pop .btn-pop-close {top:13px !important;} #wechat-pop .btn-pop-close:after {content:''; background-image: url('/web/main_renewal/img/main/new_sprites.webp') !important; width: 25px; height: 25px; background-position: -472px -398px; display:block; margin: 0 auto;} /* Model-finder 세부 검색 popup */ .layerpop-wrap .pop-container {padding:0; margin:100px 0;} .pop-container .head h2 {width:100%; padding: 10px 0 5px 15px; height: auto;} .pop-container .head .skew-bg::before {transform: skewX(0); left:0;} .pop-container .head .hgroup {margin-bottom:0;} .pop-container .head .hgroup .f-titi {font-size:19px;} .pop-container.pop-finder .head .head-select {width:100%; height:auto; padding:20px 15px;} .pop-container .head .tooltip {margin: 0 0 0 8px; width: 22px; height: 22px; vertical-align: top;} .form-txt.ft-18 {font-size:15px; display:block;} .pop-container .form-group .selectbox {max-width:100%; margin:0 0 10px 0;} .pop-container .btn-pop-close {top:13px; right:15px; padding:0;} .pop-container .btn-pop-close .icon-pop-close {width: 24px; height: 24px; background-size: 370px; background-position: -323px -151px;} .model-finder-searchBtn {width:100%;} .pop-container.pop-finder .tag-wrap {padding:10px 150px 10px 15px;} .pop-container .content {padding:20px 0;} .layerpop-wrap.scrollable .pop-container .content{padding:20px;} .hgroup .pop-title {padding:0 15px; font-size:17px;} .pop-accodian .ques {padding:10px 45px 10px 15px;} .pop-accodian .ques * {font-size:15px;} .pop-container .btn-group.in-big {padding:0 15px;} .pop-container .btn-group.in-big .btn-lg {font-size:15px; width:100%; margin:0;} /* motor-select-wrap */ .motor-select-wrap {padding:0;} .motor-select-wrap .pop-title {font-size:17px; padding:0 15px; } .motor-select-wrap .type-select {position:relative; width:100%;} .motor-select-wrap .pop-accodian .ques {text-align:center;} .motor-select-wrap .mCSB_inside > .mCSB_container {margin-right:0 !important;} .motor-select-wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {opacity:0;} .motor-select-wrap .mCSB_scrollTools .mCSB_draggerRail {opacity:0;} .right-wrap.inner {padding:0 15px;} .motor-select-wrap .right-wrap > div:first-child {margin-top: 20px;} .motor-select-wrap .right-wrap .option-wrap > h4 {font-size:15px;} .motor-select-wrap .right-wrap .form-control, .motor-select-wrap .right-wrap .form-txt {margin-top:0;} .col-1, .motor-select-wrap .right-wrap .col-2, .motor-select-wrap .right-wrap .col-3, .motor-select-wrap .right-wrap .col-4, .motor-select-wrap .right-wrap .col-5, .motor-select-wrap .right-wrap .col-6, .motor-select-wrap .right-wrap .col-7, .motor-select-wrap .right-wrap .col-8, .motor-select-wrap .right-wrap .col-9, .motor-select-wrap .right-wrap .col-10, .motor-select-wrap .right-wrap .col-11, .motor-select-wrap .right-wrap .col-12 {float:none;} .motor-select-wrap .right-wrap .result-wrap .col-2, .motor-select-wrap .right-wrap .result-wrap .col-10 {float:left;} .table th, .table td, .table .th, .table .td {padding:10px;} .table-m-row1 th, .table-m-row1 td, .table-m-row2 th {float: left; display: block; width: 100% !important; border-left: 0 none;} .col-m-12 {width:100% !important;} .inner-pop {box-sizing:border-box;} .inner-pop .winpop-wrap {box-sizing:border-box;} .pop-container .inner-pop .btn-pop-close {height:45px;} /* 이미지배너 */ .img-type-pop {display: inline-block; top: 50% !important; left: 50% !important; width:330px; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} /* 동영상 배너 */ .mov-type-pop .mov-pop-cont .txt .title {display: block; font-size: 17px; color: #fff; line-height: 25px; word-break: keep-all;} .mov-type-pop .mov-pop-cont .txt .btn {margin: 10px 8px 0 0; display: inline-block; position: relative; min-width: 70px; padding: 8px 15px; font-size: 13px; line-height: 16px; text-align: center; vertical-align: middle; white-space: normal; word-break: keep-all;} } @media screen and (max-width:1023px) { .smart-pop .pop-container .head h2 {height: 45px; margin-right: 40px; padding: 7px 0 10px 15px;} .smart-pop .pop-container .content {padding: 30px 15px !important; background: #fff !important;} .product-compare-list {margin: -5px; width: 930px;} .pop-container .head .hgroup {font-size:19px;} /*================================================================ 본문 건너뛰기 및 하위브라우저 팝업 ================================================================*/ a.skip {position:absolute; top:-9999em; left:-9999em; height:1px; width:1px; text-align:left; overflow:hidden; font-size:14px; padding:0 10px; height:50px; line-height:40px; z-index:9999; text-decoration:none; background: #f2f2f2;} a.skip:active, a.skip:focus, a.skip:hover {left:0; top:0; width:100%; text-align:center; overflow:visible; color: #333; text-decoration:none; line-height:50px;} /* 하위버전 브라우져 */ .pop-container.browser-ie9 .content {padding:10px 15px 30px 15px;} .pop-container.browser-ie9 .btn-group.in-big .btn-lg {display: block; width: 100%; margin: 20px 0 0 0 !important;} .pop-container.browser-ie9 .btn-group.in-big .btn-lg:first-child {margin-top: 0;} } @media screen and (max-width:980px) { .br-980 {display:block;} .pc-dot {display:none;} /*================================================================ 언어 선택 ================================================================*/ .select-language-psbox {max-width:100%; height:100%; top: 0; left: 0; transform: none;} .select-language-box {width:100%; height:100%; box-sizing:border-box; overflow-y: scroll; padding:0;} .select-language-psbox .tit-box {} .select-language-psbox .tit-box .b-tit {font-size:13px; font-weight:200;} .select-language-psbox .tit-box .s-txt {font-size:13px; font-weight:bold;} .select-language-psbox .tit-box .s-txt > i {font-weight: 200; margin:0 5px;} .select-language-psbox .tit-box .s-txt > i.frist {margin-left:0;} .select-language-psbox .tit-box .s-txt > span {display:inline-block;} .select-language-box .country > dl {padding-left: 0; float: none; width: 100%; margin-top:0 !important;} .select-language-box .country > dl > dt {margin-bottom:0; border-bottom: 1px solid #ff833b;} .select-language-box .country > dl > dt:before, .select-language-box .country > dl > dt:after {display:none} .select-language-box .country > dl:first-child > dt {border-top: 1px solid #ff833b;} .select-language-box .country > dl > dt > a {padding: 15px 30px 10px 30px; display: block; background: #fe5e01; color: #fff; font-size: 15px; position:relative;} .select-language-box .country > dl > dt > a:before {content:''; width:1px; height:15px; background:#fff; position:absolute; right:37px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .select-language-box .country > dl > dt > a:after {content:''; width:15px; height:1px; background:#fff; position:absolute; right:30px; top:50%; transform:translateY(-50%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .select-language-box .country > dl > dt > a > span {color:#333333; font-size:13px;} .select-language-box .country > dl > dt > a.active:before {height:0;} .select-language-box .country > dl > dt > a:hover span, #main-navi .top1menu li.depth1 > a.act > span {color:#fe5e01;} .select-language-box .country > dl > dd {display:none;} .select-language-box .country > dl > dd > a {padding:10px 30px;} /*================================================================ smart-bar ================================================================*/ #smart-bar:before, #smart-bar .left-box, #smart-bar .left-box .smart-bar-btn {display:none;} #smart-bar .right-box {width:100%; padding-left:0;} #smart-bar .right-box .smart-bar-tab {height:60px !important;} #smart-bar .right-box .smart-bar-tab li {width:70px; height:60px !important;} .smart-bar-tab-visBox {/* height:auto; */bottom:60px !important;} .smart-bar-tab-vis .txt-box {float:none; width:100%;} .smart-bar-tab-vis .txt-box:after {content:''; display:block; clear:both;} .smart-bar-tab-vis .txt-box .tab-tit {float:left;} .smart-bar-tab-vis .txt-box .smart-bar-tab-vis-more {float:right;} .smart-bar-tab-vis .smart-bar-tab-list-box {float:none; width:100% !important;} .smart-bar-tab-vis.ty03 .smart-bar-tab-list-box {width:100% !important;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox {width:100%; margin-top:10px;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox:after {content:''; display:block; clear:both;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > p {float:left; margin-bottom:0;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > p > br {display:none;} .smart-bar-tab-vis.ty03 .smart-bar-compareBox > a {float:right;} #smart-bar .mb_close {display:block; position:absolute; top:-26px; left:50%; width:60px; height:26px; margin-left:-30px; overflow:hidden; text-indent:-9999px; background:#fe5e01;} #smart-bar .mb_close .renew-sprite {width: 12px; height: 8px; background-position: -568px -312px; margin: 8px auto 0;} /*================================================================ footer ================================================================*/ .foot01 {padding:50px 0;} .foot02 {margin-bottom: 60px; padding:30px 0;} /* 띠 배너 */ .belt-banner {height: auto;} .belt-banner .belt-banner-top .txt {display: block; min-width: 1px; font-size: 20px; color: #666; word-break: keep-all; text-overflow: inherit; overflow: inherit; white-space: inherit; line-height: 1.2em;} .belt-banner .control-left{float:none; padding:10px 20px; width:100%;} .belt-banner .control-right{float:none; width:100%; margin:2px 0;} } @media screen and (max-width:680px) { .br-680 {display:block;} /*================================================================ 언어 선택 ================================================================*/ .select-language-psbox .tit-box {background: #525050; text-align: left;} .select-language-psbox .tit-box > .renew-sprite {background:none !important;} .select-language-psbox .tit-box .b-tit {margin: 0 0 20px 0;} .select-language-psbox .tit-box .present-langsBtn {position:relative;} .select-language-psbox .tit-box .present-langsBtn .s-txt {width:calc(100% - 142px); position: absolute; line-height: 1.2em !important; top: 50%; transform: translateY(-50%); margin-left:20px; background-position:0 0;} .select-language-psbox .tit-box .present-langsBtn .s-txt > .renew-sprite {top:0;} /*================================================================ total-searchBox ================================================================*/ .total-search-top {padding:10px 0; padding-top:75px;} .total-search-top input {font-size:16px; width:calc(100% - 173px);} .total-search-top button {padding:10px 24px;} .total-search-bt {padding-bottom:30px;} .total-search-bt:before {display:none;} .total-search-bt .search-word {width:100%; float:none; position:relative;} .total-search-bt .search-word.ty01 {padding-right:0; padding-bottom:30px;} .total-search-bt .search-word.ty01:before {content:''; width:110%; height:1px; background:#eaeaea; position:absolute; bottom:0; left:-5%;} .total-search-bt .search-word.ty02 {padding-left:0; padding-top:30px;} .total-search-closeBox {position:absolute; margin-top:0;} .total-search-close {padding-left:0;} .total-search-close > span.blinde {display:none;} /*================================================================ smart-bar ================================================================*/ #smart-bar .right-box .smart-bar-tab {width:100%;} #smart-bar .right-box .go-top {display:none;} /*================================================================ footer ================================================================*/ #new-footer .inwrap {display: block;} .foot01 {padding:35px 0;} .foot01-sec01 {position:relative; text-align:left; display:block;} .foot01-sec01 .foot-menu01 {margin-bottom:20px; justify-content: flex-start;} .foot01-sec01 .foot-menu01 li {padding-left:0; padding-right: 15px;} .foot01-sec01 .foot-menu01 li:after {left:auto; right:0;} .foot01-sec01 .foot-menu01 li:first-of-type {padding-right: 15px;} .foot01-sec01 .foot-menu01 li:first-of-type:after {display:block;} .foot01-sec01 .foot-menu01 li:last-of-type:after {display:none;} .foot01-sec01 .foot-menu02 {margin-bottom:30px; display:none;} .foot01-sec01 .foot-menu02 li {width:50%; height:35px; line-height:35px; margin:0; padding:0; text-align:center; border:1px solid #4d4d4d; box-sizing:border-box; border-top:none; border-left:none;} .foot01-sec01 .foot-menu02 li:nth-child(1), .foot01-sec01 .foot-menu02 li:nth-child(2) {border-top:1px solid #4d4d4d;} .foot01-sec01 .foot-menu02 li:nth-child(2n+1) {border-left:1px solid #4d4d4d;} .foot01-sec01 .foot-menu02 li:after {display:none;} .foot01-sec01 .foot-menu02 li a {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;} .foot01-sec01 .foot-menu02 li a:hover {background:#4d4d4d;} .foot01-sec01 .foot-menu02 li a:hover span {text-decoration:none;} .foot01-sec02 h3 {margin:5px 0 15px 0;} .foot01-sec03 {position:relative; margin-top:24px; bottom:0;} #new-footer.chi .foot01 {padding:35px 0; height:auto;} #new-footer.chi .wc-code-zone {display: inline-block; position: relative; padding-right: 50px;} #new-footer.chi .wc-code-zone .youku-btn {position:absolute; top:0; right:0; margin-right:0;} #new-footer.chi .certified-box {height: auto;} #new-footer.chi .certified-box li {float:none; margin-left:0;} #new-footer.eng .foot01-sec01 {top: 0; transform: none;} } @media screen and (max-width:480px) { .br-480 {display:block;} /*================================================================ 언어 선택 ================================================================*/ .select-language-psbox .tit-box {padding: 23px 10px 30px 10px;} .select-language-psbox .tit-box .b-tit {width: calc(100% - 70px); word-break:keep-all; padding:0; background:none; margin-left:20px;} .select-language-psbox .tit-box .b-tit > .renew-sprite {display:none;} .select-language-psbox .tit-box .present-langsBtn .s-txt {width:calc(100% - 110px); background:none; padding-left:0; font-size:13px;} .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow {width:75px;} .select-language-psbox .tit-box .present-langsBtn:hover .present-langsBtn-arrow .icon {-webkit-animation:none; animation:none;} .select-language-psbox .tit-box .present-langsBtn .s-txt > .renew-sprite {display:none;} /*================================================================ smart-bar ================================================================*/ #smart-bar .right-box .smart-bar-tab li {width:25%;} /*================================================================ total-searchBox ================================================================*/ .total-search-top input::placeholder {color:#fff; opacity:0;} #wechat-pop .btn-pop-close {display: block;width: 30px;height: 30px;background: url('/web/main_renewal/img/main/ico-close-btn.webp') no-repeat center center #fe5e01;text-indent: -9999px;} } @media screen and (max-width:380px) { /*================================================================ footer ================================================================*/ .foot-sns-list {display:block; float:none;} .foot02 .foot02-selectbox {float:none; display:block; margin:10px 0 5px 0; vertical-align:top;} #new-footer.chi .foot02 .foot02-selectbox {margin:10px 0 5px 0;} /*================================================================ 언어 선택 ================================================================*/ .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow {width:60px;} .select-language-psbox .tit-box .present-langsBtn .present-langsBtn-arrow:before {width:30px;} .auto-completion .txt-box .s-txt {display:block; margin:0 0 10px 0;} } /*20220726 : 스마트바 수정*/ .smart-bar-tab-vis{display:none;} .smart-bar-tab-vis.on{display:block;} /*20240313 : 모델파인더 수정*/ .pop-finder .result-wrap{scroll-margin-top:100px;} /*20240313 : 검색인풋 수정 (메인, 서브페이지 라인하이트 차이로 정렬차이 생겨서 flex추가)*/ .total-search-top > .inwrap{display:flex; align-items:center;} .total-search-top .placeholder{position:absolute; left:34px; top:0; z-index:1; font-size: 18px; letter-spacing: 0; color: #333; opacity:0.5; pointer-events:none; line-height:50px;} .total-search-top input{flex:1;} /*20240523 : 레이어팝업 zindex수정(헤더 리뉴얼으로 충돌)*/ .layerpop-wrap{z-index:99999} /* 240920 왓츠앱 추가 LSJ */ #whatsapp {position:relative; z-index:1000000;} #whatsapp .WA-banner {z-index:9999; display:block; bottom:20px; position:fixed; right:24px;} #whatsapp .WA-banner a {width:60px; height:60px; background:url('/web/main_renewal/img/main/whatsapp-icon.webp') 0 0 no-repeat; background-size:cover; display:block; text-indent:-5000px} @media screen and (max-width:480px) { #whatsapp .WA-banner {bottom:55px;} } /* 2025 리뉴얼 푸터*/ #footer-renew{line-height:10px;} #footer-renew *{box-sizing:border-box;} #footer-renew{padding:60px 0; background:#222; color:#fff;} #footer-renew .inner{padding:0 32px; max-width:1264px; margin:0 auto;} #footer-renew .footer-top{display:flex; justify-content:space-between; align-items:flex-end; gap:80px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #424242;} #footer-renew .cs-info{margin-bottom:36px;} #footer-renew .cs-info .info-title{font-size:24px; font-weight:500; margin-bottom:18px; line-height:1.2; display:flex; flex-wrap:wrap; gap:0.2em 0.5em;} #footer-renew .cs-info .number{color:#FE5E01;} #footer-renew .cs-info .info-list{display:flex; gap:12px 20px; flex-wrap:wrap;} #footer-renew .cs-info .info-list li{display:flex; align-items:center; gap:9px;} #footer-renew .cs-info .info-list span{font-size:15px;} #footer-renew .cs-info .info-list .label{opacity:0.55; font-weight:400;} #footer-renew .cs-info .info-list .cont{font-weight:500;} #footer-renew .footer-menu-list{display:flex; gap:16px; flex-wrap:wrap; padding:9px 0;} #footer-renew .footer-menu-list a{font-size:15px; color:#fff; transition:color 0.3s; font-weight:300; transition:all 0.3s;} #footer-renew .footer-menu-list .emp{font-weight:600;} #footer-renew .footer-menu-list .outlink{padding-right:19px; background:url(../img/footer/icon-outlink.svg) no-repeat right top;} #footer-renew .footer-top .right{text-align:right;} #footer-renew .footer-logo{height:24px; margin-bottom:30px;} #footer-renew .footer-logo img{height:100%; width:auto;} #footer-renew .footer-sns{display:flex; align-items:center; gap:20px;} #footer-renew .footer-sns .ment{font-size:15px; white-space:nowrap;} #footer-renew .sns-list{display:flex; align-items:center; gap:12px;} #footer-renew .sns-list a{display:flex; align-items:center; justify-content:center; width:38px; height:38px; background:url(../img/footer/sns-bg.svg) no-repeat center center; transition:opacity 0.3s;} #footer-renew .footer-bottom{} #footer-renew .footer-info{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:28px; line-height:1.2} #footer-renew .footer-info span{font-size:16px; font-weight:300; line-height:1.2} #footer-renew .footer-info span a{color:inherit;} #footer-renew .footer-info .emp{font-weight:600;} #footer-renew .footer-info .footer-address{width:100%;} #footer-renew .footer-info .footer-address br{display:none;} #footer-renew .footer-copyright{opacity:0.37; font-weight:300; letter-spacing:0.03em; line-height:1.2;} #footer-renew .footer-bottom .right{display:flex; gap:28px; align-items:center; flex:1; justify-content:flex-end; margin-top:-30px;} #footer-renew .footer-mark-list{display:flex; align-items:center; gap:16px;} #footer-renew .footer-mark-list li{position:relative; height:32px;} #footer-renew .footer-mark-list .DigiCertClickID{position:relative !important; top:auto !important; left:auto !important; transform:none !important;} #footer-renew .footer-sites{position:relative; flex:1; max-width:230px;} #footer-renew .footer-sites .sites-btn{display:flex; align-items:center; padding:10px 18px; width:100%; height:40px; border-radius:8px; background:#333; color:#fff; font-size:14px; font-weight:500; transition:background 0.3s; position:relative; cursor:pointer;} #footer-renew .footer-sites .sites-btn:after{content:""; display:block; width:6px; height:6px; border-right:2px solid #fff; border-bottom:2px solid #fff; position:absolute; right:18px; top:14px; transform:rotate(45deg); transition:all 0.3s;} #footer-renew .footer-sites .sites-list{position:absolute; bottom:48px; right:0; background:#fff; border-radius:8px; box-shadow:0 15px 30px rgba(0,0,0,0.3); z-index:10; width:100%; background:#333; padding:8px; visibility:hidden; opacity:0; transition:visibility 0.3s, opacity 0.3s, transform 0.3s; transform:translateY(10px);} #footer-renew .footer-sites .sites-list a{display:block; padding:10px 18px; font-size:14px; color:#fff; font-weight:500; transition:background 0.3s; border-radius:8px;} #footer-renew .footer-sites .sites-btn.active ~ .sites-list{visibility:visible; opacity:1; transform:translateY(0);} #footer-renew .footer-sites .sites-btn.active:after{transform:rotate(-135deg); top:17px;} #footer-renew .wc-code-zone{display:none;} #footer-renew .chi-block {display:none;} #footer-renew.chi .chi-none {display:none;} #footer-renew.chi .chi-block {display:block;} #footer-renew.chi .wc-code-zone {display:block;} #footer-renew.chi .wc-code-zone:after {content:''; display:block; clear:both;} #footer-renew.chi .wc-code-zone .youku-btn {width: 30px; height: 30px; display: inline-block; vertical-align: top; margin-right: 20px;} #footer-renew.chi .footer-mark-list li.chi-block a{display:flex; align-items:center; height:100%;} #footer-renew.chi .footer-mark-list li.chi-block span {padding-left:30px; color:#fff; display: block; font-size: 14px; letter-spacing: 0; background-size:23px 25px; position:relative;} #footer-renew.chi .footer-mark-list li.chi-block span .renew-sprite {width: 25px; height: 25px; background-position: -305px -163px; background-size: 392px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} [lang='ko-KR'] #footer-renew.chi .footer-mark-list li.chi-block span {font-family:'Microsoft yahei', 'Arial, Helvetica';} #footer-renew.chi .renew-sprite.Wechat-QR-code {width: 132px; height: 154px; background-position: -10px -344px;} #footer-renew.chi .wc-code-zone{display:block;} #footer-renew.chi .footer-bottom .right{flex-direction:column; align-items:flex-end;} .floating-aside{position:fixed; left:50%; transform:translateX(660px); bottom:120px; z-index:1;} .global-top-btn{width:64px; height:64px; border-radius:50%; border:1px solid #eee; box-shadow: 0 10px 20px rgba(0,0,0,0.06); background:#fff; display:flex; align-items:center; justify-content:center; transition:all 0.3s; cursor:pointer; opacity:0; visibility:hidden; transform:scale(0.8);} .global-top-btn.active{opacity:1; visibility:visible; transform:scale(1);} @media screen and (min-width:1401px) { #smart-bar .right-box .go-top{display:none;} } @media screen and (min-width:1201px) { .global-top-btn:hover{border-color:#ccc;} #footer-renew .footer-menu-list a:hover{} #footer-renew .footer-menu-list:has(a:hover) a{opacity:0.5;} #footer-renew .footer-menu-list:has(a:hover) a:hover{opacity:1;} #footer-renew .sns-list:has(a:hover) a{opacity:0.5;} #footer-renew .sns-list:has(a:hover) a:hover{opacity:1;} #footer-renew .footer-sites .sites-list a:hover{background:rgba(255,255,255,0.1);} #footer-renew .footer-sites .sites-btn:hover{background:#444;} } @media screen and (max-width:1400px) { .floating-aside{display:none;} } @media screen and (max-width:1200px){ #footer-renew .footer-sns{flex-direction:column; align-items:flex-end; gap:10px;} } @media screen and (max-width:980px){ #footer-renew{padding-bottom:100px;} } @media screen and (max-width:768px){ #footer-renew .inner{padding:0 20px;} #footer-renew .footer-top{flex-direction:column; align-items:flex-start; gap:60px;} #footer-renew .footer-top .right{text-align:left;} #footer-renew .footer-logo{margin-bottom:20px;} #footer-renew .footer-sns{align-items:flex-start; gap:30px;} #footer-renew .footer-bottom{flex-direction:column; align-items:flex-start; gap:40px;} #footer-renew .footer-info{margin-bottom:20px;} #footer-renew .footer-bottom .right{width:100%; justify-content:flex-start; margin-top:40px;} #footer-renew .footer-sites .sites-btn{width:100%;} #footer-renew.chi .footer-bottom .right{flex-direction:column; align-items:flex-start;} } @media screen and (max-width:500px){ #footer-renew .inner{padding:0 14px;} } /* 언어선택 css 수정 (스크롤 영역 제대로 잡게 수정) */ .select-language-psbox{display:flex; flex-direction:column; max-height:100%;} .select-language-psbox .tit-box{flex-shrink:0;} .select-language-psbox .select-language-box{flex:1;}