/*================================================== layout ==================================================*/ header > .inner, footer > .top-area > .inner, footer > .inner, .breadcrumb, .contents > .inner, .contents > form > .inner, /*221011 추가*/ .contents > .outter > .inner {width: 1254px; margin: 0 auto;} /* layout 가로 full */ .contents > .outter {max-width: 1440px; margin: 80px auto 0; padding: 56px 0; background-color: #F5F6F8;} .wrap {} .container {padding: 0 0 60px; } /*221018*/ .contents {} /* layout/본문 좌우 배치 */ .container.row {display: flex; flex-direction: row; justify-content: center; align-items: stretch;} .container.row .snb {flex: 0 0 290px; margin-right: 30px;} .container.row .snb.with-summit {margin-top: 121px;} .container.row .contents {flex: 0 0 auto; } .container.row .contents > .inner {width: 934px; margin: 0;} /* layout/메인 */ .ui-main header {position: fixed; top: 0; right: 0; left: 0; background-color: transparent; transition: all 0.4s ease-in-out;} .ui-main header.is-scroll {background-color: #fff;} .ui-main .contents > .outter {max-width: initial; margin: 0; padding: 0; background-color: transparent;} /* layout/본문 영역 */ .article {margin: 40px 0;} .article:last-child {margin-bottom: 0;} /* scroll 스타일 */ .scroll {overflow-y: auto;} .scroll::-webkit-scrollbar {width:4px} .scroll::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-track {border-radius: 4px;} .scroll::-webkit-scrollbar-thumb {background-color: rgba(153, 153, 153 ,.7);} .scroll::-webkit-scrollbar-track {background-color:#FFF;} .scroll2 {overflow-y: auto;} .scroll2::-webkit-scrollbar {width:4px} .scroll2::-webkit-scrollbar-thumb, .scroll2::-webkit-scrollbar-track {border-radius: 4px;} .scroll2::-webkit-scrollbar-thumb {background-color: rgba(153, 153, 153 ,.7);} .scroll2::-webkit-scrollbar-track {background-color:#e8e8e9} /*================================================== header ==================================================*/ header {position: fixed; z-index: 90; top: 0; right: 0; left: 0; height: 120px; border-bottom: 1px solid rgba(224, 224, 224, .5); background-color: #fff;} header .top-area {flex: 1; display: flex; align-items: center; height: 62px;} header .top-area .logo {position: relative; top: 25px; } header .top-area .logo a {display: block; width: 281px; height: 75px; text-indent: -9999em; background: url('../images/common/logo.png?ver=202610221000') 0 center no-repeat; } /*221018*/ header .top-area .h-menu {margin-right: 10px; margin-left: auto;} header .top-area .h-menu > ul {display: flex; align-items: center;} header .top-area .h-menu > ul > li {position: relative; margin: 0 10px; padding-left: 20px; color:#999;} /*221018*/ header .top-area .h-menu > ul > li + li::before {content: ''; position: absolute; top: 50%; left: 0; height: 20px; margin-top: -10px; border-left: 1px solid #999;} /* header - 상태/white */ header.white:not(.is-scroll) .top-area .logo a {background-image: url('../images/common/logo-wht.png?ver=202610221000');} header.white:not(.is-scroll) nav .gnb ul li a {color: #FFF;} header.white:not(.is-scroll) nav .side-menu a {color: #999;} header.white:not(.is-scroll) nav .side-menu a::before {border-color: #999;} header.white:not(.is-scroll) .top-area .h-menu .btn-cart {background-image: url('../images/common/gnb-cart-wht.png?ver=202610221000');} header.white:not(.is-scroll) .top-area .h-menu .btn-alarm {background-image: url('../images/common/gnb-alarm-wht.png?ver=202610221000');} /* top-area ========== */ header .top-area .h-menu .language .btn-dropdown {padding-left: 20px; font-size: inherit; font-weight: inherit; color: #999; background-color: transparent; background-image: url('../images/common/gnb-language-dropdown.png?ver=202610221000');} header .top-area .h-menu .language .btn-dropdown:before {content: ''; position: absolute; top: 9px; left: 0; width: 18px; height: 18px; background: url('../images/common/gnb-language-icon.png?ver=202610221000') 0 0 no-repeat;} header .top-area .h-menu button {font-size: 1.4rem; font-weight: 600; color: #999;} header .top-area .h-menu .btn-with-icon {height: 22px; padding-left: 28px;} header .top-area .h-menu .btn-only-icon {width: 22px; height: 22px;} header .top-area .h-menu .btn-only-icon .count {overflow: hidden; position: absolute; top: -8px; right: -12px; width: 18px; height: 18px; padding: 1px; border-radius: 50%; font-size: 1.1rem; font-weight: 100; color: #fff; text-align: center; text-indent: initial; line-height: 18px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .16); background-color: #da291c;} header .top-area .h-menu .btn-signup { background-image: url('../images/common/gnb-signup.png?ver=202610221000');} header .top-area .h-menu .btn-login {background-image: url('../images/common/gnb-login.png?ver=202610221000');} header .top-area .h-menu .btn-logout {background-image: url('../images/common/gnb-login.png?ver=202610221000');} header .top-area .h-menu .btn-cart {background-image: url('../images/common/gnb-cart.png?ver=202610221000');} header .top-area .h-menu .btn-alarm {background-image: url('../images/common/gnb-alarm.png?ver=202610221000');} /* nav ========== */ header nav {} header nav::before {content: ''; transition: all 0.1s ease; opacity: 0; height: 1px;} /* nav/공통 */ header nav, header nav .lnb {padding: 0 110px 0 380px;} header nav .gnb ul, header nav .lnb > ul {width: 760px;} header nav .gnb ul li, header nav .lnb > ul > li {flex: 1;} /* nav - 상태/hover */ header nav.is-hover::before {transition: all 0.2s ease-out; opacity: 1; display: block; position: absolute; right: 0; top: 120px; left: 0; width: 100%; height: auto; background-color: #fff;} header nav.is-hover {z-index: 120;} header nav.is-hover .lnb {transition: all 0.5s ease-out; opacity: 1; height: auto; } /* nav/side-menu */ header nav .side-menu {position: absolute; top: 74px; left: 50%; margin-left: 500px;} header nav .side-menu a {display: block; padding: 0 12px; font-size: 1.6rem; font-weight: 400; color: #54585A; } /* 221005 수정 (fw:600)*/ header nav .side-menu a::before {content: ''; position: absolute; top: 0; left: 0; height: 20px; border-left: 1px solid #E0E0E0;} /* nav/gnb */ header nav .gnb {display: flex; align-items: center; position: relative; width: 100%;} header nav .gnb ul {display: flex; justify-content: space-around; align-items: center; text-align: center;} header nav .gnb ul li {text-align: center; cursor: pointer;} header nav .gnb ul li a {display: inline-flex; position: relative; height: 56px; padding: 10px 18px; font-size: 1.8rem; font-weight: 500; color: #000; text-align: left;} /*221011*/ /* nav/gnb/활성 */ header nav .gnb a:hover::after, header nav .gnb .is-active a::after,header nav .gnb a.is-active::after, header nav .gnb .is-hover a::after {content: ''; position: absolute; bottom: 0; right: 0; left: 0; width: 100%; height: 4px; background-color: #da291c; } /* nav/lnb */ header nav .lnb {transition: all 0.1s ease; opacity: 0; overflow: hidden; position: absolute; top: 118px; height: 1px; left: 0; right: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, .16); background: #FFF; } header nav .lnb > ul {display: flex; justify-content: space-between; margin: 24px auto 28px;} header nav .lnb > ul > li {position: relative; margin: 2px 0;} /* header nav .lnb > ul > li > div {height: 100%; text-align: left; margin-left:30px;} header nav .lnb > ul > li > div > ul > li > a {padding: 5px 0 2px;} header nav .lnb > ul > li > div > ul > li > a span {border-bottom: 1px solid #FFF; font-size: 1.6rem; color: #000;} header nav .lnb > ul > li > div > ul > li > a:hover span, header nav .lnb > ul > li > div > ul > li > a.is-active span {border-color: #da291c; color: #da291c;} */ header nav .lnb > ul > li > div {height: 100%; text-align: left; margin-left:90px;} /* en 미국 */ :lang(en) header nav .lnb > ul > li > div {margin-left:87px;} :lang(en) header nav .lnb > ul > li:nth-child(3) > div {margin-left:53px;} /* es 스페인 */ :lang(es) header nav .lnb > ul > li:nth-child(1) > div {margin-left:88px;} :lang(es) header nav .lnb > ul > li:nth-child(2) > div{margin-left:94px;} :lang(es) header nav .lnb > ul > li:nth-child(3) > div {margin-left:50px;} /* ar 아랍 */ :lang(ar) header nav .lnb > ul > li > div{margin-left:0;text-align:right;} :lang(ar) header nav .lnb > ul > li:nth-child(1) > div{margin-right:86px;} :lang(ar) header nav .lnb > ul > li:nth-child(2) > div{margin-right:90px;} :lang(ar) header nav .lnb > ul > li:nth-child(3) > div{margin-right:80px;} /* ru 러시아 */ :lang(ru) header nav .lnb > ul > li:nth-child(1) > div {margin-left:60px;} :lang(ru) header nav .lnb > ul > li:nth-child(2) > div {margin-left:35px;} :lang(ru) header nav .lnb > ul > li:nth-child(3) > div {margin-left:15px;} header nav .lnb > ul > li > div > ul > li > a {padding: 5px 0 2px; color: #000;border-bottom: 1px solid #FFF;} header nav .lnb > ul > li > div > ul > li > a:hover, header nav .lnb > ul > li > div > ul > li > a.is-active{border-color: #da291c; color: #da291c;} header nav .lnb > ul > li > div > ul > li > a span {border-bottom:none; color: #000; font-size:1.4rem;} header nav .lnb > ul > li > div > ul > li > a:hover span, header nav .lnb > ul > li > div > ul > li > a.is-active span {border:none; color: #da291c;} /* 2023-02-17 2depth 정렬 */ /* ko 한국 */ /* :lang(ko) header nav .lnb > ul > li:nth-child(1) > div{margin-left: 90px;} :lang(ko) header nav .lnb > ul > li:nth-child(2) > div{margin-left: 90px;} :lang(ko) header nav .lnb > ul > li:nth-child(3) > div{margin-left: 95px;} */ /* en 미국 */ /* :lang(en) header nav .lnb > ul > li:nth-child(1) > div{margin-left: 88px;} :lang(en) header nav .lnb > ul > li:nth-child(2) > div{margin-left: 89px;} :lang(en) header nav .lnb > ul > li:nth-child(3) > div{margin-left: 53px;} */ /* es 스페인 */ /* :lang(es) header nav .lnb > ul > li:nth-child(1) > div{margin-left: 90px;} :lang(es) header nav .lnb > ul > li:nth-child(2) > div{margin-left: 94px;} :lang(es) header nav .lnb > ul > li:nth-child(3) > div{margin-left: 51px;} */ /* ar 아랍 */ /* :lang(ar) header nav .lnb > ul > li > div{text-align:right;} :lang(ar) header nav .lnb > ul > li:nth-child(1) > div{margin-right: 87px;} :lang(ar) header nav .lnb > ul > li:nth-child(2) > div{margin-right: 92px;} :lang(ar) header nav .lnb > ul > li:nth-child(3) > div{margin-right: 80px;} */ /* ru 러시아 */ /* :lang(ru) header nav .lnb > ul > li:nth-child(1) > div{margin-left: 61px;} :lang(ru) header nav .lnb > ul > li:nth-child(2) > div{margin-left: 38px;} :lang(ru) header nav .lnb > ul > li:nth-child(3) > div{margin-left: 15px;} */ /*header nav .lnb > ul > li:nth-child(3) > div {margin-left:45px;}221011 추가*/ /*header nav .lnb > ul > li:nth-child(4) > div {margin-left:50px;}221011 추가*/ /* 20230523 2depth 정렬 수정 */ /* ko 한국 */ :lang(ko) header nav .lnb > ul > li #PCMENU_0101 + div{margin-left: 57px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0110 + div{margin-left: 57px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0120 + div{margin-left: 59px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0160 + div{margin-left: 61px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0201 + div{margin-left: 57px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0210 + div{margin-left: 57px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0250 + div{margin-left: 34px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0260 + div{margin-left: 61px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0001 + div{margin-left: 57px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0070 + div{margin-left: 53px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0080 + div{margin-left: 53px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0060 + div{margin-left: 65px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0170 + div{margin-left: 53px;} :lang(ko) header nav .lnb > ul > li #PCMENU_0180 + div{margin-left: 53px;} /* en 미국 */ :lang(en) header nav .lnb > ul > li #PCMENU_0101 + div{margin-left: 55px;} :lang(en) header nav .lnb > ul > li #PCMENU_0110 + div{margin-left: 56px;} :lang(en) header nav .lnb > ul > li #PCMENU_0120 + div{margin-left: 30px;} :lang(en) header nav .lnb > ul > li #PCMENU_0160 + div{margin-left: 21px;} :lang(en) header nav .lnb > ul > li #PCMENU_0201 + div{margin-left: 55px;} :lang(en) header nav .lnb > ul > li #PCMENU_0210 + div{margin-left: 56px;} :lang(en) header nav .lnb > ul > li #PCMENU_0250 + div{margin-left: 27px;} :lang(en) header nav .lnb > ul > li #PCMENU_0260 + div{margin-left: 21px;} :lang(en) header nav .lnb > ul > li #PCMENU_0001 + div{margin-left: 56px;} :lang(en) header nav .lnb > ul > li #PCMENU_0070 + div{margin-left: 37px;} :lang(en) header nav .lnb > ul > li #PCMENU_0080 + div{margin-left: 27px;} :lang(en) header nav .lnb > ul > li #PCMENU_0060 + div{margin-left: 24px;} :lang(en) header nav .lnb > ul > li #PCMENU_0170 + div{margin-left: 37px;} :lang(en) header nav .lnb > ul > li #PCMENU_0180 + div{margin-left: 27px;} /* es 스페인 */ :lang(es) header nav .gnb ul li a{padding: 10px 4px;} :lang(es) header nav .lnb > ul > li #PCMENU_0101 + div{margin-left: 57px;} :lang(es) header nav .lnb > ul > li #PCMENU_0110 + div{margin-left: 63px;} :lang(es) header nav .lnb > ul > li #PCMENU_0120 + div{margin-left: 24px;} :lang(es) header nav .lnb > ul > li #PCMENU_0160 + div{margin-left: 20px;} :lang(es) header nav .lnb > ul > li #PCMENU_0201 + div{margin-left: 56px;} :lang(es) header nav .lnb > ul > li #PCMENU_0210 + div{margin-left: 62px;} :lang(es) header nav .lnb > ul > li #PCMENU_0250 + div{margin-left: 16px;} :lang(es) header nav .lnb > ul > li #PCMENU_0260 + div{margin-left: 18px;} :lang(es) header nav .lnb > ul > li #PCMENU_0001 + div{margin-left: 57px;} :lang(es) header nav .lnb > ul > li #PCMENU_0070 + div{margin-left: 27px;} :lang(es) header nav .lnb > ul > li #PCMENU_0080 + div{margin-left: 5px;} :lang(es) header nav .lnb > ul > li #PCMENU_0060 + div{margin-left: 20px;} :lang(es) header nav .lnb > ul > li #PCMENU_0170 + div{margin-left: 27px;} :lang(es) header nav .lnb > ul > li #PCMENU_0180 + div{margin-left: 5px;} /* ar 아랍 */ :lang(ar) header nav .gnb ul li a{padding: 10px 10px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0101 + div{margin-right: 58px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0110 + div{margin-right: 62px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0120 + div{margin-right: 50px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0160 + div{margin-right: 50px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0201 + div{margin-right: 55px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0210 + div{margin-right: 60px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0250 + div{margin-right: 46px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0260 + div{margin-right: 48px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0001 + div{margin-right: 58px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0070 + div{margin-right: 32px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0080 + div{margin-right: 12px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0060 + div{margin-right: 50px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0170 + div{margin-right: 32px;} :lang(ar) header nav .lnb > ul > li #PCMENU_0180 + div{margin-right: 12px;} /* ru 러시아 */ :lang(ru) header{height:170px;} :lang(ru) header nav .gnb ul li a{height:107px;align-items:center;} :lang(ru) header nav .side-menu{top:105px;} :lang(ru) header nav .lnb{top:170px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0101 + div{margin-left:29px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0110 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0120 + div{margin-left:46px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0160 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0201 + div{margin-left:29px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0210 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0250 + div{margin-left:15px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0260 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0001 + div{margin-left:29px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0070 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0080 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0060 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0170 + div{margin-left:16px;} :lang(ru) header nav .lnb > ul > li #PCMENU_0180 + div{margin-left:16px;} /* nav/lnb - 상태/활성 */ header nav .lnb > ul > li.is-hover div, header nav .lnb > ul > li > div:hover {background-color: #FFF;} /* 팝업/알림 */ .alarm-header {display: flex; align-items: center; margin-bottom: 8px;} .alarm-header .title {font-size: 1.4rem; font-weight: 700; color: #000;} .alarm-header .date {margin-left: auto;} .alarm-header .btn-del {width: 20px; height: 20px; margin-left: 24px; border: none; text-indent: -9999em; background: transparent url('../images/icon/btn-del-12.png?ver=202610221000') no-repeat center center;} .alarm-body {display: flex; flex-direction: column;} .alarm-body .text {color: #000;} .alarm-body .btn-group {margin-top: 16px;} .alarm-body .model-info .thumb-wrap {margin-right: 0;} /*================================================== footer ==================================================*/ footer {padding-bottom: 70px; border-top: 1px solid #C1C1C1;} footer .fnb-wrap {display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #E0E0E0;} /*221018*/ footer .fnb-wrap .fnb {} footer .fnb-wrap .fnb ul {display: flex; align-items: center;} footer .fnb-wrap .fnb ul li {position: relative;} footer .fnb-wrap .fnb ul li + li {margin-left: 12px; padding-left: 12px;} footer .fnb-wrap .fnb ul li + li::before {content: ''; transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 1px; height: 12px; border-left: 1px solid #E0E0E0;} footer .fnb-wrap .fnb ul li a {font-weight: 600; color: #000;} footer .fnb-wrap .fnb ul li a strong {color: #DA291C;} footer .fnb-wrap .fnb ul li a strong.c-2 {color: #000;} footer .fnb-wrap .family-site {} footer .fnb-wrap .family-site select {width: 200px; height: 48px; border-color: #C1C1C1; color: #000; background-color: transparent; background-image: url('../images/common/footer-selectboxr.png?ver=202610221000');} footer .fnb-wrap .family-site .select_box .box .select {font-size:1.6rem; color:#000; border:1px solid #C1C1C1; border-radius:6px; padding:13px 10px; margin:0; height:auto;} footer .fnb-wrap .family-site .select_box .box{width:200px;} footer .fnb-wrap .family-site .select_box .box .select:after{top:19px} footer .fnb-wrap .family-site .select_box .box .list {top:52px; border: 1px solid #C1C1C1;} /*2211018*/ footer .fnb-wrap .family-site .select_box .box .list li {color: #000; box-sizing: border-box; padding:0; width: 100%; cursor: pointer; display: flex; flex-direction: column; justify-content: center;} /*221018*/ footer .fnb-wrap .family-site .select_box .box .list li > a {display:block; padding: 10px 10px; line-height:16px; background-color:#fff;} /*221018*/ footer .fnb-wrap .family-site .select_box .box .list li > a:hover {background-color:#F5F6F8;} /*221018*/ footer .address-wrap {display: flex; padding-top: 40px; line-height: 1.71;} footer .address-wrap .logo {margin: 66px 36px 0 0;} footer .address-wrap .logo span {width: 234px; height: 61px; text-indent: -9999em; background: url('../images/common/logo-footer.png?ver=202610221000') no-repeat;} footer .address-wrap address {} footer .address-wrap address .title {margin-bottom: 16px; font-size: 1.8rem; font-weight: 700; color: #000;} footer .address-wrap address .row {} footer .address-wrap address .row span {position: relative; margin-right: 12px; color: #9E9E9E;} footer .address-wrap address .row span + span {padding-left: 12px;} footer .address-wrap address .row span + span::before {content: ''; transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 1px; height: 12px; border-left: 1px solid #9E9E9E;} footer .address-wrap address .row span strong {color: #000;} footer .address-wrap address .copyright {margin-top: 24px;} footer .address-wrap address .copyright span {color: #9E9E9E;} footer .address-wrap .social {margin-left: auto;} footer .address-wrap .social dl {display: flex; flex-wrap: wrap; flex-direction: column; margin-bottom: 20px;} footer .address-wrap .social dl .row {display: flex;} footer .address-wrap .social dl dt {margin-bottom: 16px; font-size: 1.6rem; font-weight: 600; color: #000;} footer .address-wrap .social dl dd {} footer .address-wrap .social dl dd + dd {margin-left: 16px;} footer .address-wrap .social ul {} footer .address-wrap .social ul li {margin-bottom: 10px;} footer .address-wrap .social ul li a {display: block;} footer .address-wrap address .row span:nth-child(3) {padding-left:0;} /*221013*/ footer .address-wrap address .row span:nth-child(3)::before { border-left: none;} /*221013*/ /*================================================== quick-menu ==================================================*/ .quick-menu {position: fixed; z-index:70; top: 140px; right: 10px;} .quick-menu .btn-toggle {transition: 0.3s; transform-origin: 0 0; transform: rotate(90deg) translateX(-50%); position: absolute; top: 170px; left: -11px; width: 180px; height: 30px; border-radius: 0 0 8px 8px; border: 0; font-size: 1.2rem; font-weight: 600; color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .16); background-color: #da291c;} .quick-menu .btn-toggle span {display: inline-flex; align-items: center; padding-left: 6px;} .quick-menu .btn-toggle span::after {content: ''; display:block; width: 10px; height: 10px; margin-left: 12px; background: url('../images/common/quick-open.png?ver=202610221000') no-repeat center center; transform: rotate(-90deg); } .quick-menu.is-active .toggle-box {right: 0px;} .quick-menu.is-active .btn-toggle {left: 0; background-color: #9e9e9e;} .quick-menu.is-active .btn-toggle span::after {transform: rotate(90deg);} .quick-menu .box {width: 105px; margin-bottom: 12px; padding: 4px 8px; border: 1px solid #000; box-shadow: -3px 3px 5px rgba(0, 0, 0, .16); background-color: #FFF;} .quick-menu .box .item {position: relative;} .quick-menu .box .item + .item {border-top: 1px solid #E0E0E0;} .quick-menu .toggle-box {transition: all 0.2s ease-in; display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; position: absolute; right: -125px; } .quick-menu .toggle-box .box {} .quick-menu .toggle-box .box .swiper {position:initial; height: 148px; margin: 24px 2px;} .quick-menu .toggle-box .box .swiper .swiper-slide {} .quick-menu .toggle-box .box .swiper .swiper-slide a, .quick-menu .toggle-box .box .swiper .swiper-slide button {overflow: hidden; display: flex; justify-content: center; align-items: center; width:82px; height: 72px; border-radius: 2px; border: 1px solid #E8E8E9; background-color: #FFF;;} .quick-menu .toggle-box .box .swiper .swiper-slide a img, .quick-menu .toggle-box .box .swiper .swiper-slide button img {width: 135%;} .quick-menu .toggle-box .box .swiper .swiper-button-prev, .quick-menu .toggle-box .box .swiper .swiper-button-next { display:flex!important; position: absolute; top: initial; bottom: initial; left: 0; right: 0; width: auto; height: auto; margin: 0; } .quick-menu .toggle-box .box .swiper .swiper-button-prev::after, .quick-menu .toggle-box .box .swiper .swiper-button-next::after {transform: rotate(90deg); font-size: 1.6rem; font-weight: 800;} .quick-menu .toggle-box .box .swiper .swiper-button-prev {top: -18px;} .quick-menu .toggle-box .box .swiper .swiper-button-next {bottom: -18px;} .quick-menu .toggle-box .box .btn {display: block; height: 40px; line-height: 42px; font-size: 1.2rem; font-weight: 600; color: #000; background-repeat: no-repeat; background-position: left 10px center;} .quick-menu .toggle-box .box .btn-usertype {padding-left: 38px;} .quick-menu .toggle-box .box .btn-usertype.buyer {background-image: url('../images/common/quick-user-buyer.png?ver=202610221000');} .quick-menu .toggle-box .box .btn-usertype.seller {background-image: url('../images/common/quick-user-seller.png?ver=202610221000');} .quick-menu .toggle-box .box .btn-gotop {padding-left: 40px; background-image: url('../images/common/quick-gotop.png?ver=202610221000');} .quick-menu .box.callcenter {position: fixed; top: 482px; right: 10px;} .quick-menu .box.callcenter .btn-callcenter {display: block; height: 64px; text-indent: -9999em; background: url('../images/common/quick-callcenter.png?ver=202610221000') no-repeat center center;} .quick-menu .box.callcenter .text-time {margin: 10px 0 6px; padding-left: 30px; font-size: 1.2rem; font-weight: 600; color: #000; background: url('../images/common/quick-time.png?ver=202610221000') no-repeat left 6px center;} .quick-menu .toggle-box .box .swiper .no-quick-data{display:flex; height:100% !important; align-items:center; justify-content:center;} .quick-menu .toggle-box .box .swiper .no-quick-data p{padding-top:0; font-size:1.2rem; text-align:center;} /*================================================== breadcrumb ==================================================*/ .breadcrumb {margin-top: 120px; padding: 20px 0 18px; border-bottom: 1px solid #E8E8E9;} .breadcrumb .inner {display: flex; align-items: center;} .breadcrumb .depth {position: relative;} .breadcrumb .depth + .depth {margin-left: 12px; padding-left: 12px;} .breadcrumb .depth + .depth::before {content: ''; transform: translateY(-50%); position: absolute; top: 50%; left: 0; width: 1px; height: 12px; border-left: 1px solid #9E9E9E;} .breadcrumb .depth.home a {display: block; padding-left: 30px; font-weight: 600; color: #999; background: url('../images/common/breadcrump-home.png?ver=202610221000') no-repeat left center;} .breadcrumb .depth .btn-dropdown {font-weight: 600; color: #999; background-image: url('../images/common/breadcrump-dropdown.png?ver=202610221000');} .breadcrumb .layer-dropdown {right: 0;} .breadcrumb .layer-dropdown .list {min-width: 100%; padding: 0 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, .16);} .breadcrumb .layer-dropdown .list > li .text-value {white-space: nowrap;} /*================================================== nav/마이페이지 ==================================================*/ .nav-my {} .nav-my nav {} .nav-my nav .box {} .nav-my nav .box + .box {margin-top: 40px; border-top: 1px solid #E8E8E9;} .nav-my nav .menu-state {} .nav-my nav .menu-state ul {} .nav-my nav .menu-state ul + ul {} .nav-my nav .menu-state ul > li {margin-top: 40px;} .nav-my nav .menu-state ul > li .title {display: block; padding: 10px 0 6px; font-size: 1.8rem; font-weight: 700; color: #000;} .nav-my nav .menu-state ul > li ul {margin-left: 32px;} .nav-my nav .menu-state ul > li ul > li {margin-top: 0;} .nav-my nav .menu-state ul > li ul > li a {display: block; padding: 10px 0 6px; font-size: 1.6rem; font-weight: 600;} .nav-my nav .menu-state ul > li ul > li a::before {content: '-'; margin-right: 8px;} .nav-my nav .menu-my {} .nav-my nav .menu-my ul {margin-top: 40px;} .nav-my nav .menu-my ul li {} .nav-my nav .menu-my ul li a {display: block; padding: 10px 0 6px 28px; font-size: 1.6rem; font-weight: 600; background-repeat: no-repeat; background-position: left center;} .nav-my nav .menu-my ul li a.is-active {color: #DA291C;} .nav-my nav .menu-my .btn-manage {background-image: url('../images/MY/nav-manage.png?ver=202610221000');} .nav-my nav .menu-my .btn-wish {background-image: url('../images/MY/nav-wish.png?ver=202610221000');} .nav-my nav .menu-my .btn-qna {background-image: url('../images/MY/nav-qna.png?ver=202610221000');} .nav-my nav .menu-my .btn-cancle {background-image: url('../images/MY/nav-cancle.png?ver=202610221000');} .nav-my nav .menu-my .btn-cart {background-image: url('../images/MY/nav-cart.png?ver=202610221000');} .nav-my nav .menu-my .btn-address {background-image: url('../images/MY/nav-address.png?ver=202610221000');} .nav-my nav .menu-my .btn-auction {background-image: url('../images/MY/nav-auction.png?ver=202610221000');} .nav-my nav .menu-my .btn-list {background-image: url('../images/MY/nav-list.png?ver=202610221000');} .nav-my nav .menu-my .btn-modify {background-image: url('../images/MY/nav-modify.png?ver=202610221000');} .nav-my nav .menu-my .btn-withdraw {background-image: url('../images/MY/nav-withdraw.png?ver=202610221000');} .nav-my nav .menu-my .btn-logout {background-image: url('../images/MY/nav-logout.png?ver=202610221000');} .nav-my nav .menu-my .btn-manage.is-active {background-image: url('../images/MY/nav-manage-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-wish.is-active {background-image: url('../images/MY/nav-wish-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-qna.is-active {background-image: url('../images/MY/nav-qna-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-cancle.is-active {background-image: url('../images/MY/nav-cancle-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-cart.is-active {background-image: url('../images/MY/nav-cart-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-address.is-active {background-image: url('../images/MY/nav-address-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-auction.is-active {background-image: url('../images/MY/nav-auction-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-list.is-active {background-image: url('../images/MY/nav-list-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-modify.is-active {background-image: url('../images/MY/nav-modify-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-withdraw.is-active {background-image: url('../images/MY/nav-withdraw-on.png?ver=202610221000');} .nav-my nav .menu-my .btn-logout.is-active {background-image: url('../images/MY/nav-logout-on.png?ver=202610221000');} /*================================================== popup ==================================================*/ .dim {position:fixed; z-index:1000; left:0; right:0; top:0; bottom:0; cursor:wait; background:rgba(0, 0, 0, .7);} @keyframes dialogBottom { from {transform: translateY(100%);} to {transform: translateY(0);} } /* dialog/default */ .dialog {transform: translate(-50%, -50%); display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; width: 640px; padding:40px; border-radius:16px; background-color: #FFF;} .dialog.is-active {display: block;} .dialog .dialog-header {overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; height: 56px; padding: 0 0 24px; border-bottom: 1px solid #E8E8E9;} .dialog .dialog-header > .title-box {display: flex; align-items: center;} .dialog .dialog-header > .title-box .title {position: relative; padding: 0 0 0 16px; font-size: 2.4rem; font-weight: 600;} .dialog .dialog-header > .title-box .title::before {content: ''; transform: skew(22deg, 0); position: absolute; top: 0; left: 4px; width: 5px; height: 12px; background-color: #DA291C;} .dialog .dialog-header .side-box {display: flex; align-items: center;} .dialog .dialog-header .side-box .btn-close {width: 30px; height: 30px; border: none; text-indent: -9999em; background-color:transparent; background-repeat:no-repeat; background-position:center center; background-image: url('../images/icon/btn-close-popup.png?ver=202610221000');} .dialog .dialog-header .side-box select {height: 48px; margin-right: 20px;} .dialog .dialog-content {overflow-y: auto; max-height: 680px; padding: 34px 20px 0; line-height: 1.28;} .dialog .dialog-footer {display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 32px; padding-top: 32px; border-top: 1px solid #E8E8E9;} .dialog .dialog-footer .page-button-wrap {flex-wrap: wrap; justify-content: flex-end; margin-left: auto;} .dialog .dialog-footer .page-button-wrap .btn2 {flex: 0 0 auto; height: 46px; padding: 0 44px; font-size: 1.4rem;} .dialog .dialog-footer .page-button-wrap .btn2.btn2-cancle { border: 1px solid #E8E8E9; color: #666; background-color: #F5F6F8;} .dialog .dialog-footer .choice-text-wrap {margin: 0;} .dialog .dialog-footer .choice-text-wrap label {margin: 0;} .dialog .dialog-footer .inform-text-wrap {flex: 0 0 100%;} /* dialog/팝업사이즈 */ .dialog.lg {width: 800px;} .dialog.xl {width: 1042px;} .dialog.xl .dialog-header {height: 68px;} .dialog.xl .dialog-header > .title-box .title {padding: 0 0 0 24px; font-size: 3.2rem;} .dialog.xl .dialog-header > .title-box .title::before {width: 8px; height: 16px;} .dialog.xl .dialog-content {padding: 40px 0 100px;} /*221027*/ .dialog.xl .dialog-content.fix-none {padding: 40px 0 0px; overflow-x:hidden;} /*221117*/ /* dialog/동영상 등 */ .dialog.media {padding: 14px; border-radius: 0; background-color: #000;} .dialog.media .dialog-header {height: auto; padding: 0; border-bottom: none;} .dialog.media .dialog-header .btn-close {position: absolute; top: -46px; right: 0; width: 36px; height: 36px; background-image: url('../images/icon/btn-close-popup-2.png?ver=202610221000');} .dialog.media .dialog-content {max-height: initial; padding: 0; color: #FFF;} /* dialog/alert */ .dialog .alert-box {} .dialog .alert-box p {font-weight: 600;} .dialog .alert-box p + p {margin-top: 20px;} .dialog .alert-box p strong {color: #DA291C;} /* dialog/alert */ .dialog-alert {width: 280px;} .dialog-alert .text {margin: 8px 0 20px; font-size: 1.6rem; color: #000;} .dialog-alert .text strong {font-weight: 700;} .dialog-alert .text.emphasis::before {content: ''; display: block; width: 32px; height: 32px; margin: 8px auto 22px; border-radius: 50%; background: #DA291C url('../images/common/icon-emphasis.svg?ver=202610221000') center center no-repeat;} .wrap .dialog {box-shadow: 0 3px 10px rgba(0, 0, 0, .16); } .wrap .dialog .dialog-content {max-height: 640px;} /* 팝업내 하단 고정영역 */ .dialog .fixed-bar {position: fixed; z-index: 10; bottom: 30px; left: 40px; right: 40px; padding: 32px 40px; border-radius: 16px; background-color: #000;} /*221027*/ .dialog .fixed-bar .form-input {display: flex;} .dialog .fixed-bar .form-input .input-unit {flex: 2.5; display: flex; align-items: center; height: 60px; border-radius: 6px; border: 1px solid #C1C1C1; background-color: #FFF;} /*221115*/ .dialog .fixed-bar .form-input .input-unit .unit {padding: 10px 8px 4px 24px; font-size: 1.6rem; font-weight: 700; color: #C1C1C1; line-height: 1;} .dialog .fixed-bar .form-input .input-unit input[type='text'] {flex: 1; height: 100%; padding: 0; border: none; text-align:right; padding-right:15px;} /*221115*/ .dialog .fixed-bar .form-input .input-unit input::placeholder {color:#000; font-weight:700;} /*221115*/ .dialog .fixed-bar .form-input .btn2 {flex:1; height: 60px; margin-left: 16px; font-size: 1.6rem; font-weight: 700;} /*221115*/ .dialog .fixed-bar .form-input .btn2.btn-minus, .dialog .fixed-bar .form-input .btn2.btn-plus {display:flex; justify-content: center; align-items: center; height: 60px; width:150px; margin-left: 16px; font-size: 1.6rem; font-weight: 700; background-color:#E0E0E0;} /*221115*/ .dialog .fixed-bar .form-input .btn2.btn-minus {margin-left:0; margin-right:16px;} /*221115*/ .dialog-alarm {transform: translateY(0);top: 62px; } .dialog-quick {transform: none; left: initial; right: 164px; top: 140px; } /* layer/default */ .layer-pos {display: inline-flex; position: relative;} .layer {display: none; position: absolute; z-index: 80;} .layer.is-active {display: block;} /* layer/dropdown */ .layer.layer-dropdown {left: 0; top: 100%; } .layer-dropdown .list {display: inline-flex; flex-direction: column; border: 1px solid #999; background: #FFF; } .layer-dropdown .list li {position: relative;} .layer-dropdown .list li button {width: 100%; padding: 12px; border: none; text-align: left; white-space: nowrap; background: none;} .layer-dropdown .list li button.is-active {background-color: #F5F6F8;} .layer-dropdown .list label {display: block; padding: 12px; border: none; text-align: left; white-space: nowrap;} .layer-dropdown .list label input {appearance: none; position: absolute; left: 0; top: 0;} .layer-dropdown .list label input:checked ~ .txt {font-weight: 700; background-color: #F5F6F8;} .layer-dropdown .list label:active {background-color: #F5F6F8;} .layer-dropdown .list a {display: block; padding: 12px; border: none; text-align: left; white-space: nowrap;} .layer-dropdown .list a .text-value {white-space: nowrap;} /* 221018 */ .layer-dropdown .list.m-area {} .layer-dropdown .list.m-area label {padding:7px 12px; cursor: pointer;} .layer-dropdown .list.m-area label:hover {background-color:#F5F6F8;} .layer-dropdown .list.m-area li:first-child label {padding-top:9px;} .layer-dropdown .list.m-area li:last-child label {padding-bottom:9px;} .layer-dropdown .list.m-area label > span {color:#54585A;} .layer.layer-dropdown.layer-location1 {left:0px !important; top:100% !important;} /* 최상단 메뉴 > 한국어 툴팁 위치_221007 */ /* 아랍어용 */ :lang(ar) #resultList .col-title, :lang(ar) #resultList .answer-box{direction: ltr;} :lang(ar) header .top-area {/* direction: ltr; */} :lang(ar) header .top-area .h-menu {margin-right: auto;margin-left: 10px;} :lang(ar) header .top-area .h-menu > ul > li {padding-left: 0;padding-right: 20px;} /*221018*/ :lang(ar) header .top-area .h-menu > ul > li + li::before {left: initial;right: 0;border-left: 0 none;border-right: 1px solid #999;} :lang(ar) header nav, :lang(ar) header nav .lnb {padding: 0 380px 0 110px;} :lang(ar) header nav .side-menu {position: absolute;top: 74px;left: initial;right: 50%;margin-left: 0;margin-right: 500px;} :lang(ar) header nav .side-menu a::before {left: initial;right: 0;} :lang(ar) .section-best .title-summit .title-box h2{direction: ltr;} :lang(ar) footer .fnb-wrap .family-site .select_box .box .select:after{left: 10px;right: initial;} :lang(ar) footer .fnb-wrap .fnb ul li + li{margin-left: 0; margin-right: 12px; padding-left: 0;padding-right: 12px;} :lang(ar) footer .fnb-wrap .fnb ul li + li::before{left: initial;right: 0;} :lang(ar) footer .address-wrap .social dl dd + dd{margin-left: 0;margin-right: 16px;} :lang(ar) footer .address-wrap .logo{margin: 66px 0 0 36px;} :lang(ar) footer .address-wrap address {direction: ltr;padding-left: 290px;} :lang(ar) .nav-my nav .menu-state{direction:ltr;} :lang(ar) .nav-my nav .menu-my ul li a {padding: 10px 28px 6px 0;background-position: right center;} :lang(ar) .dialog#gvid_dialogAlertPop .dialog-footer .page-button-wrap {width: 100%;justify-content: center;} :lang(ar) .dialog#gvid_dialogAlertPop .dialog-footer .page-button-wrap .btn2 + .btn2{margin:0 12px 0 0;} /* 이미지 압축 다운로드 관련 css*/ .imageCompDownloadBtn { background-image: url('/h/assets/images/imageDownBtn.png?ver=202610221000'); background-color:white; background-repeat: no-repeat; background-size:70%; width:32px; height:32px; border:none; margin-left: 11px; margin-right: 5px; } #autoPlayBtn { background-repeat: no-repeat; background-position: center center; background-image: url('../images/icon/video-play.png?ver=202610221000'); background-color: rgba(0,0,0,0); /*border-radius: 50%;*/ border: none; width: 80px; height: 40px; text-indent:-9999em; color: #000; border-radius:0; } .btn-clipboard { background-image: url('/h/assets/images/clipboard_2.png?ver=202610221000'); background-color:white; background-repeat: no-repeat; background-size:70%; width:32px; height:32px; border:none; }