merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정
14476
build/resources/main/static/sopmall/pc/css/default.css
Normal file
279
build/resources/main/static/sopmall/pc/css/gcpay.css
Normal file
@@ -0,0 +1,279 @@
|
||||
@charset "utf-8";
|
||||
.hide-text {font-size:0; line-height:0; text-shadow:none; color:transparent;}
|
||||
|
||||
.order_gcPay {display: block; letter-spacing: -0.7px;}
|
||||
.order_gcPay img {-webkit-user-drag: none;}
|
||||
.order_gcPay a:hover {text-decoration: none;}
|
||||
.order_gcPay .po {color:#3053bc; }
|
||||
.order_gcPay .benefit .ez-radio {margin: 0 8px 0 0;}
|
||||
.order_gcPay .benefit .ez-checkbox {margin: 0 6px 0 0;}
|
||||
.order_gcPay .benefit .ez-radio-on{background: transparent url('../images/payment/bg_radio_gcone_on.png') 0 0px no-repeat}
|
||||
.order_gcPay .benefit .ez-checkbox-on{background: transparent url('../images/payment/bg_checkbox_gcone_on.png') 0 0px no-repeat}
|
||||
.payment-hide .ez-radio, .payment-hide ez-radio-on { display: none !important; background-image: url('') !important; }
|
||||
|
||||
.order_gcPay h4 {margin:0 !important;}
|
||||
/*.order_gcPay li:first-child {margin-top:0 !important;}*/
|
||||
|
||||
.order_gcPay .titWrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
|
||||
|
||||
.order_gcPay .btnWrap li {position: relative; display: inline-block; border: 1px solid #d6d6d6; margin:0; padding: 0 10px !important; font-size: 13px; height:35px; line-height: 35px; cursor: pointer; text-transform: uppercase; font-weight: 600; color:#999;}
|
||||
.order_gcPay .btnWrap li:first-child{margin: 0!important;}
|
||||
.order_gcPay .btnWrap .ico_info:before,
|
||||
.order_gcPay .btnWrap .ico_set:before{content: ""; display: inline-block; width:16px; height:16px; margin-right:5px; margin-top:-3px; vertical-align: middle;}
|
||||
.order_gcPay .btnWrap .ico_info:before {background: url("../images/payment/ico_info.png") no-repeat; background-size: 100%;}
|
||||
.order_gcPay .btnWrap .ico_set:before {background: url("../images/payment/ico_setting.png") no-repeat; background-size: 100%;}
|
||||
.order_gcPay .benefit .gcpay_listWrap > li {display:block; padding:15px 0; border-bottom:1px solid #eeeeee;}
|
||||
.order_gcPay .benefit .gcpay_listWrap > li:last-child { border-bottom:0;}
|
||||
|
||||
/*이벤트문구영역 220519 추가*/
|
||||
.order_gcPay .benefit .eventWrap {padding: 20px 15px 15px; background:#f5f9ff; margin:20px 0 10px 0; border-radius: 15px; text-align: center;}
|
||||
.order_gcPay .benefit .eventWrap:after {display:block; content:""; clear: both;}
|
||||
.order_gcPay .benefit .eventWrap dt{font-size: 16px; float: none; width: auto; font-weight: 600; color: #3053bc; display:block;}
|
||||
.order_gcPay .benefit .eventWrap dt:before {content: ""; display: block; width:40px; height:40px; background: url('../images/payment/ico_event_tit.png')no-repeat; background-size: cover; margin: 0 auto; margin-bottom: 10px;}
|
||||
.order_gcPay .benefit .eventWrap dt .sm_txt {font-weight: 500; font-size: 13px;}
|
||||
.order_gcPay .benefit .eventWrap dd {display: block; width: 100%; color: #3053bc;}
|
||||
.order_gcPay .benefit .eventWrap dd li{font-size:14px; color: #333;}
|
||||
|
||||
/*이벤트문구영역 하단문구 220609 추가*/
|
||||
.order_gcPay .benefit .pointW {font-size: 14px; padding: 5px 0;}
|
||||
.order_gcPay .benefit .pointW strong{color: #000;}
|
||||
|
||||
/*.order_gcPay .slick-current .selectWrap {display: block; margin-top:10px;}*/
|
||||
.order_gcPay .slick-initialized .slick-slide {opacity: 0.7; filter: blur(1px);}
|
||||
.order_gcPay .slick-initialized .slick-current{opacity: 1; filter: blur(0px);}
|
||||
|
||||
.order_gcPay .listW {display: flex; align-items: center; position: relative; }
|
||||
.order_gcPay .listW.chk_on ~ .conW {height: auto; visibility: visible; overflow: visible; margin:25px 0 0;}
|
||||
.order_gcPay .listW.chk_on ~ .commonsWrap{margin-top:15px !important;}
|
||||
.order_gcPay .listW .logo {display:inline-block; background: url('../images/payment/logo_gcpay.png') no-repeat; width:85px; height:23px; background-size: 100%; vertical-align: top;}
|
||||
.order_gcPay .listW .payment-label {color: #000; display: block; z-index: 1; flex: 1 0;}
|
||||
.order_gcPay .listW .stxt{font-size:14px; color:#aaa; padding-left:20px; margin-top:3px; display: inline-block; vertical-align: middle; position: absolute; right: 0;}
|
||||
|
||||
/*슬라이드 영역*/
|
||||
.order_gcPay .slideW {width:732px;}
|
||||
.order_gcPay .slideW .slick-prev,
|
||||
.order_gcPay .slideW .slick-next{z-index:1; width:20px; height: 20px; border: 0; top:75px; transform: rotate(315deg); }
|
||||
.order_gcPay .slideW .slick-prev {border-top: 2px solid #b1b1b1; border-left: 2px solid #b1b1b1;left: 50%; margin-left:-155px;}
|
||||
.order_gcPay .slideW .slick-next {border-bottom: 2px solid #b1b1b1; border-right: 2px solid #b1b1b1; right: 50%; margin-right:-155px;}
|
||||
.order_gcPay .slideW .slick-prev:before, .order_gcPay .slideW .slick-next:before {content: ""; display: none;}
|
||||
.order_gcPay .slideW .slick-prev:hover, .order_gcPay .slideW .slick-next:hover{border-color: #909090;}
|
||||
|
||||
.order_gcPay .slideW .slick-disabled {opacity: 0;}
|
||||
.order_gcPay .slideW .slick-slide:not(:last-child) {margin-right: 40px;}
|
||||
.order_gcPay .conW {height: 0; visibility: hidden; overflow: hidden;}
|
||||
|
||||
.order_gcPay .boxW {position: relative; width: 260px; height: 160px; border-radius: 8px; margin: 0 auto; cursor: pointer; box-sizing:border-box;}
|
||||
.order_gcPay .boxW .card_logo {position: absolute; top: 15px; left: 15px; width:100px; height:24px; background-size: 100%;}
|
||||
.order_gcPay .boxW .detaW {color: #fff; font-size: 15px; position: absolute; left: 15px; bottom: 15px;}
|
||||
.order_gcPay .boxW .detaW .txt{padding-bottom:5px; display: block; line-height: 1;}
|
||||
.order_gcPay .boxW .detaW .number {letter-spacing: 0; opacity: .6;}
|
||||
|
||||
/*카카오뱅크 시*/
|
||||
.order_gcPay .boxW.ba_code_021 .detaW {color: #000;}
|
||||
|
||||
/*카드&계좌 불가시*/
|
||||
.order_gcPay .boxW.none {position: relative}
|
||||
.order_gcPay .boxW.none:before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background: #000; opacity: 0.4; z-index: 1; transition: .25s;}
|
||||
.order_gcPay .none:hover::before {opacity: 0.7;}
|
||||
|
||||
.order_gcPay .boxW.none .noneTxt{display: flex; align-items: center; justify-content: center; font-size: 15px; text-align: center; color: #fff; height: 100%; width: 100%; position: relative; z-index: 2;}
|
||||
|
||||
.order_gcPay .ca_point {border: 2px solid #eaeaea; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: .25s;}
|
||||
.order_gcPay .ca_point:hover {border: 2px solid #3053bc; color: #fff;}
|
||||
.order_gcPay .ca_point:hover .contW a {background:#3053bc; color: #fff;}
|
||||
.order_gcPay .ca_point .contW {padding:15px;}
|
||||
.order_gcPay .ca_point .contW .txt {letter-spacing: -1px; line-height: 1.7; color: #333; font-size: 14px; font-weight: 600;}
|
||||
.order_gcPay .ca_point .contW a{display: block; background:#fff; border:1px solid #3053bc; color: #3053bc; font-size: 14px; padding: 10px; border-radius: 50px; margin-top:10px; transition: .25s;}
|
||||
|
||||
.order_gcPay .ca_new {border: 2px dashed #eaeaea; text-align: center; display: flex; align-items: center; justify-content: center; transition: .25s;}
|
||||
.order_gcPay .ca_new:hover {border: 2px dashed #3053bc;}
|
||||
.order_gcPay .ca_new a{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
|
||||
.order_gcPay .ca_new .ico{display: block; width: 45px; height: 45px; margin-bottom:10px; fill:#3053bc;}
|
||||
.order_gcPay .ca_new .txt {font-weight: 600; letter-spacing: -1px;}
|
||||
|
||||
/*하단영역(포인트/할부영역)*/
|
||||
.order_gcPay .selectWrap {width: 732px; margin-top:10px;}
|
||||
.order_gcPay .cardW .selectWrap ul{display: flex; align-items: center; justify-content: space-between;}
|
||||
.order_gcPay .bankW .selectWrap,
|
||||
.order_gcPay .bankW .selectWrap .receiptWrap {display: none;}
|
||||
.order_gcPay .bankW .receiptWrap {margin-top:10px; padding-top:10px; border-top: 1px solid #eee;}
|
||||
.order_gcPay .bankW .receiptWrap li {padding-top:10px;}
|
||||
.order_gcPay .bankW .receiptWrap li:first-child{padding-top: 0;}
|
||||
|
||||
.order_gcPay .listW.chk_on ~ .conW .selectWrap,
|
||||
.order_gcPay .checkW.chk_on ~ .receiptWrap{display: block;}
|
||||
|
||||
/*일반결제*/
|
||||
.order_gcPay #payment_type > li > div {display:flex; flex-direction: column; justify-content: center;}
|
||||
.order_gcPay #payment_type > li > div:before {height:33px; position: relative;}
|
||||
.order_gcPay #payment_type > li > div > label {height: auto;}
|
||||
.order_gcPay #payment_type > li > div p {padding-top:10px;}
|
||||
.order_gcPay #payment_type > li > div > label .ez-radio,
|
||||
.order_gcPay #payment_type > li > div > label .ez-radio-on {height: 0;}
|
||||
|
||||
.order_gcPay .payco > div {width: auto !important}
|
||||
.order_gcPay #typereceiptlay label {vertical-align: middle;}
|
||||
|
||||
/*카드영역*/
|
||||
.ca_code_001 {background-color: #529e4b; } /* 001. 농협NH카드 */
|
||||
.ca_code_001 .card_logo {background: url('../images/payment/ca_code_001.png') no-repeat;}
|
||||
.ca_code_002 {background-color: #1691d3; } /* 002. 우리카드 */
|
||||
.ca_code_002 .card_logo {background: url('../images/payment/ca_code_002.png') no-repeat;}
|
||||
.ca_code_003 {background-color: #3f5bb5;} /* 003. 신한카드 */
|
||||
.ca_code_003 .card_logo {background: url('../images/payment/ca_code_003.png') no-repeat;}
|
||||
.ca_code_004 {background-color: #786d62;} /* 004. KB국민카드 */
|
||||
.ca_code_004.card_logo {background: url('../images/payment/ca_code_004.png') no-repeat;}
|
||||
.ca_code_005 {background-color: #008375; } /* 005. 하나카드 */
|
||||
.ca_code_005 .card_logo {background: url('../images/payment/ca_code_005.png') no-repeat;}
|
||||
.ca_code_006 {background-color: #004785; } /* 006. 씨티카드 */
|
||||
.ca_code_006 .card_logo {background: url('../images/payment/ca_code_006.png') no-repeat;}
|
||||
|
||||
.ca_code_025 {background-color: #0c4da2;} /* 025. 삼성카드 */
|
||||
.ca_code_025 .card_logo {background: url('../images/payment/ca_code_025.png') no-repeat;}
|
||||
.ca_code_026 {background-color: #231f20;} /* 026. 현대카드 */
|
||||
.ca_code_026 .card_logo {background: url('../images/payment/ca_code_026.png') no-repeat;}
|
||||
.ca_code_027 {background-color: #ed1c24;} /* 027. 롯데카드 */
|
||||
.ca_code_027 .card_logo {background: url('../images/payment/ca_code_027.png') no-repeat;}
|
||||
.ca_code_028 {background-color: #21356c; } /* 028. VISA */
|
||||
.ca_code_028 .card_logo {background: url('../images/payment/ca_code_028.png') no-repeat;}
|
||||
.ca_code_029 {background-color: #21356c; } /* 029. 마스터카드 */
|
||||
.ca_code_029 .card_logo {background: url('../images/payment/ca_code_029.png') no-repeat;}
|
||||
.ca_code_030 {background-color: #0c4da2;} /* 030. 비씨카드 */
|
||||
.ca_code_030 .card_logo {background: url('../images/payment/ca_code_030.png') no-repeat;}
|
||||
.ca_code_031 {background-color: #231f20;} /* 031. 현대백화점 */
|
||||
.ca_code_031 .card_logo {background: url('../images/payment/ca_code_031.png') no-repeat;}
|
||||
.ca_code_032 {background-color: #0050a0;} /* 032. 갤러리아 */
|
||||
.ca_code_032 .card_logo {background: url('../images/payment/ca_code_032.png') no-repeat;}
|
||||
|
||||
/*카드영역+은행로고*/
|
||||
.ca_code_007 {background-color: #003d89;} /* 007. IBK기업은행 */
|
||||
.ca_code_007 .card_logo {background: url('../images/payment/ba_code_007.png') no-repeat;}
|
||||
.ca_code_008 {background-color: #023279;} /* 008. KDB산업은행 */
|
||||
.ca_code_008 .card_logo {background: url('../images/payment/ba_code_008.png') no-repeat;}
|
||||
.ca_code_009 {background-color: #17c600;} /* 009. SC제일은행 */
|
||||
.ca_code_009 .card_logo {background: url('../images/payment/ba_code_009.png') no-repeat;}
|
||||
.ca_code_010 {background-color: #89d100;} /* 010. 대구은행 */
|
||||
.ca_code_010 .card_logo {background: url('../images/payment/ba_code_010.png') no-repeat;}
|
||||
.ca_code_011 {background-color: #e83434;} /* 011. 부산은행 */
|
||||
.ca_code_011 .card_logo {background: url('../images/payment/ba_code_011.png') no-repeat;}
|
||||
.ca_code_012 {background-color: #084295;} /* 012. 전북은행 */
|
||||
.ca_code_012 .card_logo {background: url('../images/payment/ba_code_012.png') no-repeat;}
|
||||
.ca_code_013 {background-color: #836d52;} /* 013. 경남은행 */
|
||||
.ca_code_013 .card_logo {background: url('../images/payment/ba_code_013.png') no-repeat;}
|
||||
.ca_code_014 {background-color: #006fce;} /* 014. 제주은행 */
|
||||
.ca_code_014 .card_logo {background: url('../images/payment/ba_code_014.png') no-repeat;}
|
||||
.ca_code_015 {background-color: #005cd9;} /* 015. 광주은행 */
|
||||
.ca_code_015 .card_logo {background: url('../images/payment/ba_code_015.png') no-repeat;}
|
||||
.ca_code_016 {background-color: #005367;} /* 016. 새마을금고 */
|
||||
.ca_code_016 .card_logo {background: url('../images/payment/ba_code_016.png') no-repeat;}
|
||||
.ca_code_017 {background-color: #00cbec;} /* 017. 수협중앙 */
|
||||
.ca_code_017 .card_logo {background: url('../images/payment/ba_code_017.png') no-repeat;}
|
||||
.ca_code_018 {background-color: #0050a0;} /* 018. 신용협동조합(신협) */
|
||||
.ca_code_018 .card_logo {background: url('../images/payment/ba_code_018.png') no-repeat;}
|
||||
.ca_code_019 {background-color: #de040a;} /* 019. 우체국 */
|
||||
.ca_code_019 .card_logo {background: url('../images/payment/ba_code_019.png') no-repeat;}
|
||||
.ca_code_020 {background-color: #120063;} /* 020. 케이뱅크 */
|
||||
.ca_code_020 .card_logo {background: url('../images/payment/ba_code_020.png') no-repeat;}
|
||||
.ca_code_021 {background-color: #ffe400;} /* 021. 카카오뱅크 */
|
||||
.ca_code_021 .card_logo {background: url('../images/payment/ba_code_021.png') no-repeat;}
|
||||
.ca_code_022 {background-color: #007360;} /* 022. 상호저축은행 */
|
||||
.ca_code_022 .card_logo {background: url('../images/payment/ba_code_022.png') no-repeat;}
|
||||
.ca_code_023 {background-color: #022562;} /* 023. 산림조합 */
|
||||
.ca_code_023 .card_logo {background: url('../images/payment/ba_code_023.png') no-repeat;}
|
||||
.ca_code_024 {background-color: #0064ff;} /* 024. 토스뱅크 */
|
||||
.ca_code_024 .card_logo {background: url('../images/payment/ba_code_024.png') no-repeat;}
|
||||
|
||||
/*계좌영역*/
|
||||
.ba_code_001 {background-color: #00b259;} /* 001. NH농협 */
|
||||
.ba_code_001 .card_logo {background: url('../images/payment/ba_code_001.png') no-repeat;}
|
||||
.ba_code_002 {background-color: #1691d3;} /* 002. 우리은행 */
|
||||
.ba_code_002 .card_logo {background: url('../images/payment/ba_code_002.png') no-repeat;}
|
||||
.ba_code_003 {background-color: #3f5bb5;} /* 003. 신한은행(통합) */
|
||||
.ba_code_003 .card_logo {background: url('../images/payment/ba_code_003.png') no-repeat;}
|
||||
.ba_code_004 {background-color: #786d62;} /* 004. KB국민은행 */
|
||||
.ba_code_004 .card_logo {background: url('../images/payment/ba_code_004.png') no-repeat;}
|
||||
.ba_code_005 {background-color: #116d65;} /* 005. KEB하나은행 */
|
||||
.ba_code_005 .card_logo {background: url('../images/payment/ba_code_005.png') no-repeat;}
|
||||
.ba_code_006 {background-color: #004785;} /* 006. 씨티은행 */
|
||||
.ba_code_006 .card_logo {background: url('../images/payment/ba_code_006.png') no-repeat;}
|
||||
.ba_code_007 {background-color: #003d89;} /* 007. IBK기업은행 */
|
||||
.ba_code_007 .card_logo {background: url('../images/payment/ba_code_007.png') no-repeat;}
|
||||
.ba_code_008 {background-color: #023279;} /* 008. KDB산업은행 */
|
||||
.ba_code_008 .card_logo {background: url('../images/payment/ba_code_008.png') no-repeat;}
|
||||
.ba_code_009 {background-color: #17c600;} /* 009. SC제일은행 */
|
||||
.ba_code_009 .card_logo {background: url('../images/payment/ba_code_009.png') no-repeat;}
|
||||
.ba_code_010 {background-color: #89d100;} /* 010. 대구은행 */
|
||||
.ba_code_010 .card_logo {background: url('../images/payment/ba_code_010.png') no-repeat;}
|
||||
.ba_code_011 {background-color: #e83434;} /* 011. 부산은행 */
|
||||
.ba_code_011 .card_logo {background: url('../images/payment/ba_code_011.png') no-repeat;}
|
||||
.ba_code_012 {background-color: #084295;} /* 012. 전북은행 */
|
||||
.ba_code_012 .card_logo {background: url('../images/payment/ba_code_012.png') no-repeat;}
|
||||
.ba_code_013 {background-color: #836d52;} /* 013. 경남은행 */
|
||||
.ba_code_013 .card_logo {background: url('../images/payment/ba_code_013.png') no-repeat;}
|
||||
.ba_code_014 {background-color: #006fce;} /* 014. 제주은행 */
|
||||
.ba_code_014 .card_logo {background: url('../images/payment/ba_code_014.png') no-repeat;}
|
||||
.ba_code_015 {background-color: #005cd9;} /* 015. 광주은행 */
|
||||
.ba_code_015 .card_logo {background: url('../images/payment/ba_code_015.png') no-repeat;}
|
||||
.ba_code_016 {background-color: #005367;} /* 016. 새마을금고 */
|
||||
.ba_code_016 .card_logo {background: url('../images/payment/ba_code_016.png') no-repeat;}
|
||||
.ba_code_017 {background-color: #00cbec;} /* 017. 수협중앙 */
|
||||
.ba_code_017 .card_logo {background: url('../images/payment/ba_code_017.png') no-repeat;}
|
||||
.ba_code_018 {background-color: #0050a0;} /* 018. 신용협동조합(신협) */
|
||||
.ba_code_018 .card_logo {background: url('../images/payment/ba_code_018.png') no-repeat;}
|
||||
.ba_code_019 {background-color: #de040a;} /* 019. 우체국 */
|
||||
.ba_code_019 .card_logo {background: url('../images/payment/ba_code_019.png') no-repeat;}
|
||||
.ba_code_020 {background-color: #120063;} /* 020. 케이뱅크 */
|
||||
.ba_code_020 .card_logo {background: url('../images/payment/ba_code_020.png') no-repeat;}
|
||||
.ba_code_021 {background-color: #ffe400;} /* 021. 카카오뱅크 */
|
||||
.ba_code_021 .card_logo {background: url('../images/payment/ba_code_021.png') no-repeat;}
|
||||
.ba_code_022 {background-color: #007360;} /* 022. 상호저축은행 */
|
||||
.ba_code_022 .card_logo {background: url('../images/payment/ba_code_022.png') no-repeat;}
|
||||
.ba_code_023 {background-color: #022562;} /* 023. 산림조합 */
|
||||
.ba_code_023 .card_logo {background: url('../images/payment/ba_code_023.png') no-repeat;}
|
||||
.ba_code_024 {background-color: #0064ff;} /* 024. 토스뱅크 */
|
||||
.ba_code_024 .card_logo {background: url('../images/payment/ba_code_024.png') no-repeat;}
|
||||
|
||||
|
||||
/*세팅팝업*/
|
||||
/*table {border-collapse: collapse; border-spacing: 0;}*/
|
||||
.settingWrap .tableW table {border-collapse: collapse; border-spacing: 0;}
|
||||
.ui-widget-header.ui-dialog-titlebar {padding: 0px 70px 0 20px !important;}
|
||||
.ui-dialog .ui-dialog-title {font-size: 24px !important;}
|
||||
.ui-dialog a.ui-dialog-titlebar-close {right:0 !important;}
|
||||
.settingWrap {position: fixed !important; top:50% !important; left:50% !important; transform: translate(-50%, -50%) !important; width: 500px; z-index: 10;
|
||||
background: #fff; letter-spacing: -0.7px !important; overflow: hidden !important; border-radius: 20px !important; box-shadow: 15px 10px 20px #00000014 !important;}
|
||||
.settingWrap .ui-dialog-content {padding:0 !important;}
|
||||
.settingWrap .imgW {background: #3053bc; padding:40px 0 30px;}
|
||||
.settingWrap .imgW .popTit {text-align: center;}
|
||||
.settingWrap .imgW img {margin: 0 auto; width:500px;}
|
||||
.settingWrap .imgW .slick-slide img {margin: 0 auto; width:500px;}
|
||||
.settingWrap .txtW {padding: 25px 20px;}
|
||||
.settingWrap .txtW dl {margin-top:20px;}
|
||||
.settingWrap .txtW dl:first-child {margin-top:0;}
|
||||
.settingWrap .txtW dt {font-size: 14px; padding-bottom:10px; color: #333; font-weight: 600;}
|
||||
.settingWrap .txtW dd,
|
||||
.settingWrap .txtW li{font-size: 13px; padding-bottom:3px;}
|
||||
.settingWrap .txtW dd:last-child,
|
||||
.settingWrap .txtW li:last-child {padding-bottom: 0;}
|
||||
.settingWrap .txtW li {position: relative; padding-left: 7px;}
|
||||
.settingWrap .txtW li:before{content: 'ㆍ'; display: block; position: absolute; left: -5px;}
|
||||
|
||||
.settingWrap .tableW {padding:25px 20px;}
|
||||
.settingWrap table {width: 100%;}
|
||||
.settingWrap table th,
|
||||
.settingWrap table td {text-align: center; padding: 15px 10px; border-bottom: 1px solid #e0e0e0;}
|
||||
.settingWrap table thead th {border-top:2px solid #e0e0e0; background: #fafafa;}
|
||||
.settingWrap table th.left,
|
||||
.settingWrap table tbody th {text-align: left;}
|
||||
.settingWrap table th {font-weight: bold;}
|
||||
.settingWrap table td {}
|
||||
|
||||
.settingWrap .feeMonth .txtW {padding-top:0;}
|
||||
|
||||
.settingWrap .slick-dots {position: relative; margin: 15px 0 0 0 !important; bottom: 0;}
|
||||
.settingWrap .slick-dotted.slick-slider {margin: 0;}
|
||||
.settingWrap .slick-dots li {margin: 0; width:17px; height:17px;}
|
||||
.settingWrap .slick-dots li button:before{display: none;}
|
||||
.settingWrap .slick-dots li button:after {content: '●'; display: inline-block; font-size: 10px; color: #6f87d0;}
|
||||
.settingWrap .slick-dots li.slick-active button:after {color:#fff;}
|
||||
|
||||
|
After Width: | Height: | Size: 92 B |
|
After Width: | Height: | Size: 252 B |
|
After Width: | Height: | Size: 178 B |
|
After Width: | Height: | Size: 124 B |
|
After Width: | Height: | Size: 127 B |
|
After Width: | Height: | Size: 86 B |
|
After Width: | Height: | Size: 100 B |
|
After Width: | Height: | Size: 102 B |
|
After Width: | Height: | Size: 123 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
586
build/resources/main/static/sopmall/pc/css/jqueryui/black-tie/jquery-ui-1.8.16.custom.css
vendored
Normal file
@@ -0,0 +1,586 @@
|
||||
/*
|
||||
* jQuery UI CSS Framework 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Theming/API
|
||||
*/
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden { display: none; }
|
||||
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
|
||||
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
|
||||
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
.ui-helper-clearfix { display: inline-block; }
|
||||
/* required comment for clearfix to work in Opera \*/
|
||||
* html .ui-helper-clearfix { height:1%; }
|
||||
.ui-helper-clearfix { display:block; }
|
||||
/* end clearfix */
|
||||
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled { cursor: default !important; }
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||||
|
||||
|
||||
/*
|
||||
* jQuery UI CSS Framework 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Theming/API
|
||||
*
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,%20Arial,%20sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=333333&bgTextureHeader=08_diagonals_thick.png&bgImgOpacityHeader=8&borderColorHeader=a3a3a3&fcHeader=eeeeee&iconColorHeader=bbbbbb&bgColorContent=f9f9f9&bgTextureContent=04_highlight_hard.png&bgImgOpacityContent=100&borderColorContent=cccccc&fcContent=222222&iconColorContent=222222&bgColorDefault=111111&bgTextureDefault=02_glass.png&bgImgOpacityDefault=40&borderColorDefault=777777&fcDefault=e3e3e3&iconColorDefault=ededed&bgColorHover=1c1c1c&bgTextureHover=02_glass.png&bgImgOpacityHover=55&borderColorHover=000000&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=ffffff&bgTextureActive=01_flat.png&bgImgOpacityActive=65&borderColorActive=cccccc&fcActive=222222&iconColorActive=222222&bgColorHighlight=ffeb80&bgTextureHighlight=06_inset_hard.png&bgImgOpacityHighlight=55&borderColorHighlight=ffde2e&fcHighlight=363636&iconColorHighlight=4ca300&bgColorError=cd0a0a&bgTextureError=06_inset_hard.png&bgImgOpacityError=45&borderColorError=9e0505&fcError=ffffff&iconColorError=ffcf29&bgColorOverlay=aaaaaa&bgTextureOverlay=04_highlight_hard.png&bgImgOpacityOverlay=40&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=03_highlight_soft.png&bgImgOpacityShadow=50&opacityShadow=20&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
|
||||
*/
|
||||
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {/*font-family: Dotum, Gulim, Verdana, Arial, sans-serif;*/ font-size: 1.1em; }
|
||||
.ui-widget .ui-widget { font-size: 1em; }
|
||||
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { /*font-family: Dotum, Gulim, Verdana, Arial, sans-serif;*/ font-size: 1em; }
|
||||
.ui-widget-content { border: 1px solid #cccccc; background: #f9f9f9 url(images/ui-bg_highlight-hard_100_f9f9f9_1x100.png) 50% top repeat-x; color: #222222; }
|
||||
.ui-widget-content a { color: #222222; }
|
||||
.ui-widget-header { border: 1px solid #a3a3a3; background: #333333 url(images/ui-bg_diagonals-thick_8_333333_40x40.png) 50% 50% repeat; color: #eeeeee; font-weight: bold; }
|
||||
.ui-widget-header a { color: #eeeeee; }
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #777777; background: #111111 url(images/ui-bg_glass_40_111111_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #e3e3e3; }
|
||||
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #e3e3e3; text-decoration: none; }
|
||||
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #000000; background: #1c1c1c url(images/ui-bg_glass_55_1c1c1c_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; }
|
||||
.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; }
|
||||
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_65_ffffff_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #222222; }
|
||||
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #222222; text-decoration: none; }
|
||||
.ui-widget :active { outline: none; }
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #ffde2e; background: #ffeb80 url(images/ui-bg_inset-hard_55_ffeb80_1x100.png) 50% bottom repeat-x; color: #363636; }
|
||||
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
|
||||
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #9e0505; background: #cd0a0a url(images/ui-bg_inset-hard_45_cd0a0a_1x100.png) 50% bottom repeat-x; color: #ffffff; }
|
||||
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
|
||||
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
|
||||
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
|
||||
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
|
||||
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
|
||||
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_bbbbbb_256x240.png); }
|
||||
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ededed_256x240.png); }
|
||||
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
|
||||
.ui-state-active .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
|
||||
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_4ca300_256x240.png); }
|
||||
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffcf29_256x240.png); }
|
||||
|
||||
/* positioning */
|
||||
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-off { background-position: -96px -144px; }
|
||||
.ui-icon-radio-on { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { background-color:#ffffff; opacity: .50;filter:Alpha(Opacity=50); }
|
||||
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_highlight-soft_50_aaaaaa_1x100.png) 50% top repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*
|
||||
* jQuery UI Resizable 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Resizable#theming
|
||||
*/
|
||||
.ui-resizable { position: relative;}
|
||||
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
|
||||
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
|
||||
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
|
||||
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
|
||||
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
|
||||
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
|
||||
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
|
||||
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
|
||||
* jQuery UI Selectable 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Selectable#theming
|
||||
*/
|
||||
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
|
||||
/*
|
||||
* jQuery UI Accordion 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Accordion#theming
|
||||
*/
|
||||
/* IE/Win - Fix animation bug - #4615 */
|
||||
.ui-accordion { width: 100%; }
|
||||
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
|
||||
.ui-accordion .ui-accordion-li-fix { display: inline; }
|
||||
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
|
||||
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
|
||||
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
|
||||
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
|
||||
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
|
||||
.ui-accordion .ui-accordion-content-active { display: block; }
|
||||
/*
|
||||
* jQuery UI Autocomplete 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Autocomplete#theming
|
||||
*/
|
||||
.ui-autocomplete { position: absolute; cursor: default; }
|
||||
|
||||
/* workarounds */
|
||||
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
|
||||
|
||||
/*
|
||||
* jQuery UI Menu 1.8.16
|
||||
*
|
||||
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Menu#theming
|
||||
*/
|
||||
.ui-menu {
|
||||
list-style:none;
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
display:block;
|
||||
float: left;
|
||||
}
|
||||
.ui-menu .ui-menu {
|
||||
margin-top: -3px;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
margin:0;
|
||||
padding: 0;
|
||||
zoom: 1;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-menu .ui-menu-item a {
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
padding:.2em .4em;
|
||||
line-height:1.5;
|
||||
zoom:1;
|
||||
}
|
||||
.ui-menu .ui-menu-item a.ui-state-hover,
|
||||
.ui-menu .ui-menu-item a.ui-state-active {
|
||||
font-weight: normal;
|
||||
margin: -1px;
|
||||
}
|
||||
/*
|
||||
* jQuery UI Button 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Button#theming
|
||||
*/
|
||||
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
|
||||
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
|
||||
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
|
||||
.ui-button-icons-only { width: 3.4em; }
|
||||
button.ui-button-icons-only { width: 3.7em; }
|
||||
|
||||
/*button text element */
|
||||
.ui-button .ui-button-text { display: block; line-height: 1.4; }
|
||||
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
|
||||
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
|
||||
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
|
||||
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button { padding: .4em 1em; }
|
||||
|
||||
/*button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
|
||||
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
|
||||
/*button sets*/
|
||||
.ui-buttonset { margin-right: 7px; }
|
||||
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
|
||||
|
||||
/* workarounds */
|
||||
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
|
||||
/*
|
||||
* jQuery UI Dialog 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Dialog#theming
|
||||
*/
|
||||
.ui-dialog { position: absolute; padding:0px; width: 300px; overflow: hidden;}
|
||||
.ui-dialog .ui-dialog-titlebar { position: relative; border:0px; background-color:#39425b; line-height:40px; vertical-align:middle; padding-left:15px}
|
||||
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; color:#fff;}
|
||||
.ui-dialog .ui-dialog-title .desc {padding-left:5px; font-size:11px; color:#f1f1f1; font-weight:normal;}
|
||||
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
|
||||
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
|
||||
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
|
||||
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
|
||||
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
|
||||
.ui-draggable .ui-dialog-titlebar { cursor: move; }
|
||||
|
||||
/* Dialog 디자인 커스터마이징 */
|
||||
.ui-dialog {border:1px solid #4d4f55}
|
||||
.ui-dialog .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }
|
||||
.ui-dialog .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; -khtml-border-top-right-radius: 0px; border-top-right-radius: 0px; }
|
||||
.ui-dialog .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; -khtml-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
|
||||
.ui-dialog .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
|
||||
.ui-dialog.ui-corner-all, .ui-dialog.ui-corner-top, .ui-dialog.ui-corner-left, .ui-dialog.ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }
|
||||
.ui-dialog.ui-corner-all, .ui-dialog.ui-corner-top, .ui-dialog.ui-corner-right, .ui-dialog.ui-corner-tr { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; -khtml-border-top-right-radius: 0px; border-top-right-radius: 0px; }
|
||||
.ui-dialog.ui-corner-all, .ui-dialog.ui-corner-bottom, .ui-dialog.ui-corner-left, .ui-dialog.ui-corner-bl { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; -khtml-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
|
||||
.ui-dialog.ui-corner-all, .ui-dialog.ui-corner-bottom, .ui-dialog.ui-corner-right, .ui-dialog.ui-corner-br { -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; -khtml-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
|
||||
.ui-dialog-titlebar.ui-widget-header {background-image: none; background-color:#39425b;}
|
||||
.ui-dialog a.ui-dialog-titlebar-close {right:10px; padding:0px; width:21px; height:21px; background:url('./images/btn_close_popup.gif');}
|
||||
.ui-dialog a.ui-dialog-titlebar-close.ui-state-hover {border:0px;}
|
||||
.ui-dialog a.ui-dialog-titlebar-close span {display:none}
|
||||
.ui-dialog .ui-dialog-content {padding:20px; background-image: none; background-color:#fff;}
|
||||
|
||||
/*
|
||||
* jQuery UI Slider 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Slider#theming
|
||||
*/
|
||||
.ui-slider { position: relative; text-align: left; }
|
||||
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
|
||||
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
|
||||
|
||||
.ui-slider-horizontal { height: .8em; }
|
||||
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
|
||||
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
|
||||
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
|
||||
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
|
||||
|
||||
.ui-slider-vertical { width: .8em; height: 100px; }
|
||||
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
|
||||
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
|
||||
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
|
||||
.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
|
||||
* jQuery UI Tabs 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Tabs#theming
|
||||
*/
|
||||
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
|
||||
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
|
||||
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
|
||||
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
|
||||
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
|
||||
.ui-tabs .ui-tabs-hide { display: none !important; }
|
||||
/*
|
||||
* jQuery UI Datepicker 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Datepicker#theming
|
||||
*/
|
||||
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
|
||||
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
|
||||
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
|
||||
.ui-datepicker .ui-datepicker-prev { left:2px; }
|
||||
.ui-datepicker .ui-datepicker-next { right:2px; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
|
||||
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
|
||||
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
||||
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
|
||||
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
|
||||
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
|
||||
.ui-datepicker select.ui-datepicker-month,
|
||||
.ui-datepicker select.ui-datepicker-year { width: 49%;}
|
||||
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
|
||||
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
|
||||
.ui-datepicker td { border: 0; padding: 1px; }
|
||||
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
|
||||
|
||||
/* with multiple calendars */
|
||||
.ui-datepicker.ui-datepicker-multi { width:auto; }
|
||||
.ui-datepicker-multi .ui-datepicker-group { float:left; }
|
||||
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
|
||||
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
|
||||
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
|
||||
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
|
||||
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
|
||||
|
||||
/* RTL support */
|
||||
.ui-datepicker-rtl { direction: rtl; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
|
||||
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||
.ui-datepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}/*
|
||||
* jQuery UI Progressbar 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Progressbar#theming
|
||||
*/
|
||||
.ui-progressbar { height:2em; text-align: left; }
|
||||
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
|
||||
3011
build/resources/main/static/sopmall/pc/css/jqueryui/slick.js
vendored
Normal file
1
build/resources/main/static/sopmall/pc/css/jqueryui/slick.min.js
vendored
Normal file
604
build/resources/main/static/sopmall/pc/css/pay.css
Normal file
@@ -0,0 +1,604 @@
|
||||
/* 네이버페이 확인용 css(실제 API 적용할땐 삭제하시면 됩니다.)
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
*/
|
||||
|
||||
.npay_pointcolor {
|
||||
color: #00c73c !important;
|
||||
}
|
||||
|
||||
.npay_storebtn_bx,
|
||||
.npay_button_box,
|
||||
.npay_button_box2,
|
||||
.npay_storebtn_bx *,
|
||||
.npay_button_box *,
|
||||
.npay_button_box2 * {
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
float: none !important;
|
||||
position: static !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 0 none !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 16px !important;
|
||||
font-family: '돋움', Dotum, Helvetica, sans-serif !important;
|
||||
text-align: left !important;
|
||||
text-decoration: none !important;
|
||||
vertical-align: top !important;
|
||||
background: none !important;
|
||||
border-radius: 0 !important
|
||||
}
|
||||
|
||||
.npay_storebtn_bx {
|
||||
display: inline-block !important
|
||||
}
|
||||
|
||||
.npay_button_box,
|
||||
.npay_button_box2 {
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
*height: auto !important;
|
||||
zoom: 1 !important;
|
||||
padding: 0 4px !important;
|
||||
border-top: 2px solid #2b2f3a !important;
|
||||
background-color: #fff !important
|
||||
}
|
||||
|
||||
.npay_button_box2 {
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
.npay_button_box .npay_blind,
|
||||
.npay_button_box .yellow,
|
||||
/* mall.chainflower.com 깜빡임 */
|
||||
.npay_button_box .blue,
|
||||
/* mall.chainflower.com 깜빡임 */
|
||||
.npay_button_box2 .npay_blind,
|
||||
.npay_button_box2 .yellow .npay_button_box2 .blue {
|
||||
overflow: hidden !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important
|
||||
}
|
||||
|
||||
.npay_button {
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 11px 0 11px 86px !important;
|
||||
zoom: 1 !important
|
||||
}
|
||||
|
||||
.npay_text {
|
||||
display: block !important;
|
||||
*display: inline !important;
|
||||
position: absolute !important;
|
||||
top: 11px !important;
|
||||
left: 0 !important;
|
||||
width: 79px !important;
|
||||
height: 36px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: url(../images/npay_sp_text.png) no-repeat !important;
|
||||
background-size: 180px auto !important
|
||||
}
|
||||
|
||||
.npay_btn_list {
|
||||
*zoom: 1 !important;
|
||||
display: table !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
table-layout: fixed !important;
|
||||
list-style: none !important
|
||||
}
|
||||
|
||||
.npay_btn_list tbody {
|
||||
display: table-row-group !important
|
||||
}
|
||||
|
||||
.npay_btn_list tr {
|
||||
display: table-row !important
|
||||
}
|
||||
|
||||
.npay_store .npay_btn_list {
|
||||
table-layout: auto !important
|
||||
}
|
||||
|
||||
/* F Type */
|
||||
.npay_store .npay_btn_item {
|
||||
*width: 120px !important
|
||||
}
|
||||
|
||||
.npay_btn_item {
|
||||
display: table-cell !important;
|
||||
height: 37px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
text-align: left !important
|
||||
}
|
||||
|
||||
.npay_btn_item.btn_width {
|
||||
width: 40px !important
|
||||
}
|
||||
|
||||
.npay_store .npay_btn_item.btn_width {
|
||||
*width: 78px !important
|
||||
}
|
||||
|
||||
.npay_btn_link {
|
||||
display: block !important;
|
||||
height: 35px !important;
|
||||
margin: 0 0 0 3px !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid #ccc !important;
|
||||
border-radius: 2px !important;
|
||||
background-color: #fff !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-repeat: no-repeat !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important
|
||||
}
|
||||
|
||||
.npay_btn_item:first-child .npay_btn_link {
|
||||
margin: 0 !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_pay {
|
||||
border-color: #00c05a !important;
|
||||
background-image: url(../images/npay_sp_payment.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 63px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.btn_green {
|
||||
border-color: #00c851 !important;
|
||||
background-color: #00de5a !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim,
|
||||
.npay_btn_link.npay_btn_talk {
|
||||
width: 35px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart,
|
||||
.npay_btn_link.npay_btn_talk2 {
|
||||
width: 73px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim {
|
||||
background-image: url(../images/npay_sp_zzim.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim2 {
|
||||
background-image: url(../images/npay_sp_zzim.png) !important;
|
||||
background-position: 50% -105px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_talk {
|
||||
background-image: url(../images/npay_sp_talk.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 35px auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.btn_gray {
|
||||
border-color: #9ba0ac !important;
|
||||
background-color: #acb2bf !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_btn_link.npay_btn_talk.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -140px !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart {
|
||||
background-image: url(../images/npay_sp_cart.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_talk2 {
|
||||
background-image: url(../images/npay_sp_talk_text.png) !important;
|
||||
background-position: 50% 0 !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 73px, auto !important;
|
||||
}
|
||||
|
||||
.npay_btn_link.npay_btn_cart.btn_gray,
|
||||
.npay_btn_link.npay_btn_talk2.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_event {
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 40px 0 0 !important;
|
||||
border: 0 none !important;
|
||||
border-top: 1px solid #eaecee !important
|
||||
}
|
||||
|
||||
.npay_event_text {
|
||||
display: block !important;
|
||||
*display: inline !important;
|
||||
overflow: hidden !important;
|
||||
*width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 5px 0 !important;
|
||||
letter-spacing: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
*zoom: 1 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
word-wrap: normal !important
|
||||
}
|
||||
|
||||
.npay_event_text .event_title {
|
||||
display: inline !important;
|
||||
margin: 0 5px 0 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: normal !important;
|
||||
color: #00c05a !important;
|
||||
vertical-align: middle !important
|
||||
}
|
||||
|
||||
.npay_pointplus {
|
||||
position: relative !important;
|
||||
padding-left: 44px !important;
|
||||
}
|
||||
|
||||
.npay_pointplus .event_title {
|
||||
display: block !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
width: 39px !important;
|
||||
height: 13px !important;
|
||||
margin-top: -7px !important;
|
||||
background: url("../../images/button/renewal/npay_sp_icon.png") no-repeat !important;
|
||||
}
|
||||
|
||||
.npay_event .npay_event_text .event_link {
|
||||
display: inline !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: normal !important;
|
||||
color: #929294 !important;
|
||||
text-decoration: none !important;
|
||||
vertical-align: middle !important
|
||||
}
|
||||
|
||||
.npay_event .npay_event_text .event_link span {
|
||||
display: inline-block !important;
|
||||
margin: -1px 0 1px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.npay_more {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: url(../images/npay_sp_more.png) no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.npay_more_prev {
|
||||
right: 15px !important;
|
||||
background-position: 0 0 !important
|
||||
}
|
||||
|
||||
.npay_more_next {
|
||||
right: 0 !important;
|
||||
background-position: -15px 0 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray {
|
||||
border-color: #5f5f5f !important;
|
||||
background-color: #434343 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_text {
|
||||
background-position: 0 -40px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_event_text,
|
||||
.npay_bg_dgray .npay_event_text .event_link {
|
||||
color: #929294 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.btn_gray {
|
||||
border-color: #67696e !important;
|
||||
background-color: #6d6f74 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray {
|
||||
background-position: 50% -37px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -175px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_event {
|
||||
border-top-color: #565656 !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_more_prev {
|
||||
background-position: 0 -20px !important
|
||||
}
|
||||
|
||||
.npay_bg_dgray .npay_more_next {
|
||||
background-position: -15px -20px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_button {
|
||||
padding: 30px 0 14px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_item {
|
||||
height: 33px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_item.btn_width {
|
||||
width: 36px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link {
|
||||
height: 31px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim,
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk {
|
||||
width: 31px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_pay {
|
||||
background-image: url(../images/npay_sp_payment2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 63px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk {
|
||||
background-image: url(../images/npay_sp_talk2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2 {
|
||||
background-image: url(../images/npay_sp_zzim2.png) !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 31px auto !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_vertical .npay_btn_link.npay_btn_talk.btn_gray {
|
||||
background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_vertical.npay_bg_dgray .npay_btn_link.btn_gray {
|
||||
background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2 {
|
||||
background-position: 50% -66px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_link.npay_btn_zzim2.btn_gray {
|
||||
background-position: 50% -99px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_text {
|
||||
top: 13px !important;
|
||||
width: 114px !important;
|
||||
height: 9px !important;
|
||||
background-position: 0 -80px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_btn_margin {
|
||||
margin-top: 3px !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_event_text {
|
||||
white-space: normal !important;
|
||||
text-overflow: clip !important
|
||||
}
|
||||
|
||||
.npay_vertical .npay_event_text .event_link span {
|
||||
display: inline !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_pointplus {
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
||||
.npay_vertical .npay_pointplus .event_title {
|
||||
display: inline-block !important;
|
||||
position: relative !important;
|
||||
top: -1px !important;
|
||||
margin: 0 4px 0 0 !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
|
||||
.npay_vertical.npay_bg_dgray .npay_text {
|
||||
background-position: 0 -110px !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_button {
|
||||
padding: 28px 0 0 !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_text {
|
||||
top: 11px !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_event {
|
||||
border: 0 none !important
|
||||
}
|
||||
|
||||
.npay_vertical2 .npay_event_text {
|
||||
line-height: 14px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_text {
|
||||
top: 14px !important;
|
||||
left: 1px !important;
|
||||
background-position: 0 -180px !important;
|
||||
width: 170px !important;
|
||||
height: 10px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_button {
|
||||
padding-left: 192px !important
|
||||
}
|
||||
|
||||
.npay_horizontal .npay_event {
|
||||
width: 135px !important;
|
||||
border-top: none !important;
|
||||
margin-top: -35px !important;
|
||||
padding-right: 36px !important
|
||||
}
|
||||
|
||||
.npay_type_A_1 {
|
||||
width: 236px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_A_2 {
|
||||
width: 285px !important;
|
||||
height: 88px !important;
|
||||
}
|
||||
|
||||
.npay_type_B_1 {
|
||||
width: 214px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_B_2 {
|
||||
width: 261px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_C_1_1,
|
||||
.npay_type_C_2_1 {
|
||||
width: 225px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_C_1_2,
|
||||
.npay_type_C_2_2 {
|
||||
width: 272px !important;
|
||||
height: 88px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 {
|
||||
width: 225px !important;
|
||||
height: 92px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_2 {
|
||||
width: 272px !important;
|
||||
height: 92px !important
|
||||
}
|
||||
|
||||
.npay_type_D_1_1,
|
||||
.npay_type_D_2_1 {
|
||||
width: 210px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_D_1_2,
|
||||
.npay_type_D_2_2 {
|
||||
width: 251px !important;
|
||||
height: 83px !important
|
||||
}
|
||||
|
||||
.npay_type_D_3_1 {
|
||||
width: 210px !important;
|
||||
height: 87px !important
|
||||
}
|
||||
|
||||
.npay_type_D_3_2 {
|
||||
width: 251px !important;
|
||||
height: 87px !important
|
||||
}
|
||||
|
||||
.npay_type_E_1_1,
|
||||
.npay_type_E_1_2,
|
||||
.npay_type_E_2_1,
|
||||
.npay_type_E_2_2 {
|
||||
width: 124px !important;
|
||||
height: 135px !important
|
||||
}
|
||||
|
||||
.npay_type_E_3_1,
|
||||
.npay_type_E_3_2 {
|
||||
width: 124px !important;
|
||||
height: 139px !important
|
||||
}
|
||||
|
||||
.npay_type_F {
|
||||
width: 365px !important;
|
||||
height: 115px !important
|
||||
}
|
||||
|
||||
.npay_type_G {
|
||||
width: 394px !important;
|
||||
height: 60px !important
|
||||
}
|
||||
|
||||
|
||||
/* IE5용 */
|
||||
.npay_type_E_1_1 .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_E_1_1 .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_E_1_2 .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_E_1_2 .npay_btn_link.npay_btn_talk.btn_gray {
|
||||
*background-position: 50% -33px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_D_3_1 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_C_3_2 .npay_vertical.npay_bg_dgray .npay_text,
|
||||
.npay_type_D_3_2 .npay_vertical.npay_bg_dgray .npay_text {
|
||||
*background-position: 0 -40px !important
|
||||
}
|
||||
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_C_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_D_3_1 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_C_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_pay.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_talk.btn_gray,
|
||||
.npay_type_D_3_2 .npay_bg_dgray .npay_btn_link.npay_btn_zzim.btn_gray {
|
||||
*background-position: 50% -37px !important
|
||||
}
|
||||
205
build/resources/main/static/sopmall/pc/css/slick-theme.css
Normal file
@@ -0,0 +1,205 @@
|
||||
@charset 'UTF-8';
|
||||
/* Slider */
|
||||
.slick-loading .slick-list
|
||||
{
|
||||
/*background: #fff url('./ajax-loader.gif') center center no-repeat;*/
|
||||
background: #fff center no-repeat;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
@font-face
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
src: url('./fonts/slick.eot');
|
||||
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
|
||||
}
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover,
|
||||
.slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus
|
||||
{
|
||||
color: transparent;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-prev:hover:before,
|
||||
.slick-prev:focus:before,
|
||||
.slick-next:hover:before,
|
||||
.slick-next:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-prev.slick-disabled:before,
|
||||
.slick-next.slick-disabled:before
|
||||
{
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.slick-prev:before,
|
||||
.slick-next:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: .75;
|
||||
color: white;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-prev
|
||||
{
|
||||
left: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-prev
|
||||
{
|
||||
right: -25px;
|
||||
left: auto;
|
||||
}
|
||||
.slick-prev:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
[dir='rtl'] .slick-prev:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.slick-next
|
||||
{
|
||||
right: -25px;
|
||||
}
|
||||
[dir='rtl'] .slick-next
|
||||
{
|
||||
right: auto;
|
||||
left: -25px;
|
||||
}
|
||||
.slick-next:before
|
||||
{
|
||||
content: '→';
|
||||
}
|
||||
[dir='rtl'] .slick-next:before
|
||||
{
|
||||
content: '←';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots
|
||||
{
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
list-style: none;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
.slick-dots li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.slick-dots li button
|
||||
{
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
.slick-dots li button:hover,
|
||||
.slick-dots li button:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-dots li button:hover:before,
|
||||
.slick-dots li button:focus:before
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.slick-dots li button:before
|
||||
{
|
||||
font-family: 'slick';
|
||||
font-size: 6px;
|
||||
line-height: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
content: '•';
|
||||
text-align: center;
|
||||
|
||||
opacity: .25;
|
||||
color: black;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.slick-dots li.slick-active button:before
|
||||
{
|
||||
opacity: .75;
|
||||
color: black;
|
||||
}
|
||||
119
build/resources/main/static/sopmall/pc/css/slick.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
640
build/resources/main/static/sopmall/pc/css/theme/themeAF.css
Normal file
@@ -0,0 +1,640 @@
|
||||
themeNC.css@charset "UTF-8";
|
||||
/****** 올프리 테마 컬러 #374049 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
/* 헤더 검색바 및 돋보기 버튼 색상 설정 */
|
||||
.header-search-bar {
|
||||
border: 2px solid #46525e;
|
||||
}
|
||||
.header-search-bar button svg {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
/* 검색 레이어 팝업 돋보기 버튼 색상 */
|
||||
.header-search-pop__search-btn svg {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
/* 검색 자동완성 일치 텍스트 색상 설정 */
|
||||
.header-search-pop__auto-complete em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 18x18 또는 그 배수 )
|
||||
*/
|
||||
.icon_search-up {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-up.png);
|
||||
}
|
||||
|
||||
.icon_search-down {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-down.png);
|
||||
}
|
||||
|
||||
/* 실시간 검색 동일 순위 표시('-')
|
||||
*/
|
||||
.icon_search-default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon_search-default::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: #979b9d;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #374049;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
/* 헤더 1depth 메뉴 호버 시, 밑줄 생김
|
||||
*/
|
||||
.header-nav__list > li:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 헤더 전체메뉴 펼쳤을때, 2depth 메뉴 호버 시, 색상 바뀜
|
||||
*/
|
||||
.full-menu__depth2 > li:hover {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 28x28 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_nav-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-cart.png);
|
||||
}
|
||||
|
||||
.icon_nav-mypage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-mypage.png);
|
||||
}
|
||||
|
||||
/* 메인 롤링 배너 인디케이터 색상 설정
|
||||
*/
|
||||
.main-banner .slick-dots li.slick-active button:before {
|
||||
color: #374049 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 상단 띠배너 배경색
|
||||
*/
|
||||
.top-banner {
|
||||
background-color: #343A40;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_category-type-tab01 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab01.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab02 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab02.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab03.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab04 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab04.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab05 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab05.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab06 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab06.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab07 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab07.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab08 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab08.png);
|
||||
}
|
||||
|
||||
/* 카테고리 탭 현재 활성화된 탭 색상
|
||||
*/
|
||||
.category-type-tab__btn.active .category-type-tab__name {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품이미지 좌측 상단 뱃지
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-image-badge01 {
|
||||
background-image: url(../../images/icon_product-image-badge01.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge02 {
|
||||
background-image: url(../../images/icon_product-image-badge02.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge03 {
|
||||
background-image: url(../../images/icon_product-image-badge03.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge01,
|
||||
.icon_product-image-badge02,
|
||||
.icon_product-image-badge03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 상품 - 상품 묶음 리스트 타입 */
|
||||
.product-bundle-list button.active {
|
||||
color: #374049;
|
||||
font-weight: 700;
|
||||
border: 2px solid #374049;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* 평점 별 아이콘
|
||||
( 사이즈 : 15x15 또는 그 배수 )
|
||||
*/
|
||||
.icon_rating-star {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-image: url(../../images/icon_rating-star.png);
|
||||
}
|
||||
|
||||
/* 리뷰 개수 색상 설정
|
||||
*/
|
||||
.product-unit-rating__count {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 48x48 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.time-sale {
|
||||
background-image: url(../../images/image_time-sale.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.time-sale.no-bg {
|
||||
background: linear-gradient(#f8f9fa 0, #f8f9fa 320px, #ffffff 320px, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* 상품 - 그룹별 타입 활성화탭 색상 설정
|
||||
*/
|
||||
.product-tab__btn.active {
|
||||
font-weight: 700;
|
||||
color: #374049;
|
||||
border-bottom: 2px solid #374049;
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type {
|
||||
background-image: url(../../images/image_TwoXTwo-type.png);
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 기획전 화살표 아이콘
|
||||
( 사이즈 : 22x22 또는 그 배수 )
|
||||
*/
|
||||
.icon_exhibition-arrow {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../../images/icon_exhibition-arrow.png);
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 상품 - 이미지 배너 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
둘 중 선택
|
||||
( 이미지 사이즈 : 1920x650 )
|
||||
*/
|
||||
.main-section__container.product-banner {
|
||||
background-image: url(../../images/image_product-image-banner.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.product-banner.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 인스타그램 로고
|
||||
*/
|
||||
.main-section__sns .main-section-title__title::before {
|
||||
content: "";
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 3px;
|
||||
background-image: url(../../images/icon_section-title03.png);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 공지사항 영역 아이콘
|
||||
( 사이즈 : 148x148 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice01 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice01.png);
|
||||
}
|
||||
|
||||
.icon_notice02 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice02.png);
|
||||
}
|
||||
|
||||
.icon_notice03 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice03.png);
|
||||
}
|
||||
|
||||
/* 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 공지사항 아이콘
|
||||
( 사이즈 : 20x20 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice-speaker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../images/icon_notice-speaker.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 아이콘
|
||||
( 사이즈 : 40x40 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-menu01 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu01.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu02 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu02.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu03 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu03.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu04 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu04.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.quick-menu .number-badge {
|
||||
background-color: #374049;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
/* 퀵메뉴 고객센터 이미지
|
||||
( 사이즈 : 136x136 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-customer-service {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
background-image: url(../../images/icon_quick-customer-service.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 60x60 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-to-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: url(../../images/icon_quick-to-top.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #374049;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:hover, .btn.theme.active {
|
||||
background-color: #2e363d;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #374049;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 페이지네이션 현재 페이지 색상 설정 */
|
||||
.pagination__item.active {
|
||||
background-color: #374049;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 고객센터, 마이페이지 좌측 메뉴 밑줄 색깔, 현재 페이지 활성화 색상 설정 */
|
||||
.sub-left-menu__title::before {
|
||||
background-color: #46525e;
|
||||
}
|
||||
.sub-left-menu__sub-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sub-left-menu__sub-list > li > a.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 게시물 건수 색상 설정 */
|
||||
.search-number__text strong {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #46525e;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #46525e;
|
||||
}
|
||||
|
||||
.boxTab__tabBtn.current {
|
||||
border-color: #46525e;
|
||||
}
|
||||
.boxTab::after {
|
||||
background-color: #46525e;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 최근 주문 마일리지 색상 설정 */
|
||||
.orderList__mileage {
|
||||
color: #46525e;
|
||||
}
|
||||
.orderList__link {
|
||||
color: #374049;
|
||||
}
|
||||
.orderList__link::after {
|
||||
border-color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #374049;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #374049;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 현재메뉴 색상 설정 */
|
||||
.subList__list__item.current {
|
||||
color: #374049;
|
||||
}
|
||||
.subList__sort__item.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 장바구니 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__totalTd {
|
||||
color: #374049;
|
||||
}
|
||||
.cartOrderBox__totalTd > .priceUnit {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #374049;
|
||||
border: 1px solid #374049;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상품 썸네일 테두리 색상 설정 */
|
||||
.productDetailGallery__item.active::before {
|
||||
border: 2px solid #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 분류 색상 설정 */
|
||||
.userReview__sort li button.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #374049;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #374049;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #374049;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
.productDetailInfo__priceTotal__price {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #46525e;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #46525e;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #46525e;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 총 리뷰수, 평점 색상 설정 */
|
||||
.productDetailcontent__totalNum dl dd {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName::before {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 기획전 댓글 등록/수정 버튼 색상 설정 */
|
||||
.comment-write__button {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
.comment-edit__button--edit {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #374049;
|
||||
}
|
||||
|
||||
/* 검색 결과 키워드 색상 설정 */
|
||||
.page-title__title--searchResult em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #374049;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #374049;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #374049;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
640
build/resources/main/static/sopmall/pc/css/theme/themeCH.css
Normal file
@@ -0,0 +1,640 @@
|
||||
@charset "UTF-8";
|
||||
/****** 참다한 테마 컬러 #962020 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
/* 헤더 검색바 및 돋보기 버튼 색상 설정 */
|
||||
.header-search-bar {
|
||||
border: 2px solid #a62729;
|
||||
}
|
||||
.header-search-bar button svg {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
/* 검색 레이어 팝업 돋보기 버튼 색상 */
|
||||
.header-search-pop__search-btn svg {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
/* 검색 자동완성 일치 텍스트 색상 설정 */
|
||||
.header-search-pop__auto-complete em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 18x18 또는 그 배수 )
|
||||
*/
|
||||
.icon_search-up {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-up.png);
|
||||
}
|
||||
|
||||
.icon_search-down {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-down.png);
|
||||
}
|
||||
|
||||
/* 실시간 검색 동일 순위 표시('-')
|
||||
*/
|
||||
.icon_search-default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon_search-default::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: #979b9d;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #962020;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
/* 헤더 1depth 메뉴 호버 시, 밑줄 생김
|
||||
*/
|
||||
.header-nav__list > li:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 헤더 전체메뉴 펼쳤을때, 2depth 메뉴 호버 시, 색상 바뀜
|
||||
*/
|
||||
.full-menu__depth2 > li:hover {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 28x28 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_nav-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-cart.png);
|
||||
}
|
||||
|
||||
.icon_nav-mypage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-mypage.png);
|
||||
}
|
||||
|
||||
/* 메인 롤링 배너 인디케이터 색상 설정
|
||||
*/
|
||||
.main-banner .slick-dots li.slick-active button:before {
|
||||
color: #962020 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 상단 띠배너 배경색
|
||||
*/
|
||||
.top-banner {
|
||||
background-color: #343A40;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_category-type-tab01 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab01.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab02 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab02.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab03.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab04 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab04.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab05 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab05.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab06 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab06.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab07 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab07.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab08 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab08.png);
|
||||
}
|
||||
|
||||
/* 카테고리 탭 현재 활성화된 탭 색상
|
||||
*/
|
||||
.category-type-tab__btn.active .category-type-tab__name {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품이미지 좌측 상단 뱃지
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-image-badge01 {
|
||||
background-image: url(../../images/icon_product-image-badge01.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge02 {
|
||||
background-image: url(../../images/icon_product-image-badge02.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge03 {
|
||||
background-image: url(../../images/icon_product-image-badge03.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge01,
|
||||
.icon_product-image-badge02,
|
||||
.icon_product-image-badge03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 상품 - 상품 묶음 리스트 타입 */
|
||||
.product-bundle-list button.active {
|
||||
color: #962020;
|
||||
font-weight: 700;
|
||||
border: 2px solid #962020;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* 평점 별 아이콘
|
||||
( 사이즈 : 15x15 또는 그 배수 )
|
||||
*/
|
||||
.icon_rating-star {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-image: url(../../images/icon_rating-star.png);
|
||||
}
|
||||
|
||||
/* 리뷰 개수 색상 설정
|
||||
*/
|
||||
.product-unit-rating__count {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 48x48 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.time-sale {
|
||||
background-image: url(../../images/image_time-sale.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.time-sale.no-bg {
|
||||
background: linear-gradient(#f8f9fa 0, #f8f9fa 320px, #ffffff 320px, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* 상품 - 그룹별 타입 활성화탭 색상 설정
|
||||
*/
|
||||
.product-tab__btn.active {
|
||||
font-weight: 700;
|
||||
color: #962020;
|
||||
border-bottom: 2px solid #962020;
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type {
|
||||
background-image: url(../../images/image_TwoXTwo-type.png);
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 기획전 화살표 아이콘
|
||||
( 사이즈 : 22x22 또는 그 배수 )
|
||||
*/
|
||||
.icon_exhibition-arrow {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../../images/icon_exhibition-arrow.png);
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 상품 - 이미지 배너 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
둘 중 선택
|
||||
( 이미지 사이즈 : 1920x650 )
|
||||
*/
|
||||
.main-section__container.product-banner {
|
||||
background-image: url(../../images/image_product-image-banner.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.product-banner.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 인스타그램 로고
|
||||
*/
|
||||
.main-section__sns .main-section-title__title::before {
|
||||
content: "";
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 3px;
|
||||
background-image: url(../../images/icon_section-title03.png);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 공지사항 영역 아이콘
|
||||
( 사이즈 : 148x148 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice01 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice01.png);
|
||||
}
|
||||
|
||||
.icon_notice02 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice02.png);
|
||||
}
|
||||
|
||||
.icon_notice03 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice03.png);
|
||||
}
|
||||
|
||||
/* 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 공지사항 아이콘
|
||||
( 사이즈 : 20x20 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice-speaker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../images/icon_notice-speaker.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 아이콘
|
||||
( 사이즈 : 40x40 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-menu01 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu01.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu02 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu02.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu03 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu03.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu04 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu04.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.quick-menu .number-badge {
|
||||
background-color: #962020;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
/* 퀵메뉴 고객센터 이미지
|
||||
( 사이즈 : 136x136 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-customer-service {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
background-image: url(../../images/icon_quick-customer-service.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 60x60 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-to-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: url(../../images/icon_quick-to-top.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #962020;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:hover, .btn.theme.active {
|
||||
background-color: #851c1c;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #962020;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 페이지네이션 현재 페이지 색상 설정 */
|
||||
.pagination__item.active {
|
||||
background-color: #962020;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 고객센터, 마이페이지 좌측 메뉴 밑줄 색깔, 현재 페이지 활성화 색상 설정 */
|
||||
.sub-left-menu__title::before {
|
||||
background-color: #a62729;
|
||||
}
|
||||
.sub-left-menu__sub-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sub-left-menu__sub-list > li > a.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 게시물 건수 색상 설정 */
|
||||
.search-number__text strong {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #a62729;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #a62729;
|
||||
}
|
||||
|
||||
.boxTab__tabBtn.current {
|
||||
border-color: #a62729;
|
||||
}
|
||||
.boxTab::after {
|
||||
background-color: #a62729;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 최근 주문 마일리지 색상 설정 */
|
||||
.orderList__mileage {
|
||||
color: #a62729;
|
||||
}
|
||||
.orderList__link {
|
||||
color: #962020;
|
||||
}
|
||||
.orderList__link::after {
|
||||
border-color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #962020;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #962020;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 현재메뉴 색상 설정 */
|
||||
.subList__list__item.current {
|
||||
color: #962020;
|
||||
}
|
||||
.subList__sort__item.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 장바구니 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__totalTd {
|
||||
color: #962020;
|
||||
}
|
||||
.cartOrderBox__totalTd > .priceUnit {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #962020;
|
||||
border: 1px solid #962020;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상품 썸네일 테두리 색상 설정 */
|
||||
.productDetailGallery__item.active::before {
|
||||
border: 2px solid #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 분류 색상 설정 */
|
||||
.userReview__sort li button.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #962020;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #962020;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #962020;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
.productDetailInfo__priceTotal__price {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #a62729;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #a62729;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #a62729;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 총 리뷰수, 평점 색상 설정 */
|
||||
.productDetailcontent__totalNum dl dd {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName::before {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 기획전 댓글 등록/수정 버튼 색상 설정 */
|
||||
.comment-write__button {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
.comment-edit__button--edit {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #962020;
|
||||
}
|
||||
|
||||
/* 검색 결과 키워드 색상 설정 */
|
||||
.page-title__title--searchResult em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #962020;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #962020;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #962020;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
640
build/resources/main/static/sopmall/pc/css/theme/themeJM.css
Normal file
@@ -0,0 +1,640 @@
|
||||
@charset "UTF-8";
|
||||
/****** 저스타마이데이 테마 컬러 #AE6A9B ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
/* 헤더 검색바 및 돋보기 버튼 색상 설정 */
|
||||
.header-search-bar {
|
||||
border: 2px solid #E05C7E;
|
||||
}
|
||||
.header-search-bar button svg {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
/* 검색 레이어 팝업 돋보기 버튼 색상 */
|
||||
.header-search-pop__search-btn svg {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
/* 검색 자동완성 일치 텍스트 색상 설정 */
|
||||
.header-search-pop__auto-complete em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 18x18 또는 그 배수 )
|
||||
*/
|
||||
.icon_search-up {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-up.png);
|
||||
}
|
||||
|
||||
.icon_search-down {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-down.png);
|
||||
}
|
||||
|
||||
/* 실시간 검색 동일 순위 표시('-')
|
||||
*/
|
||||
.icon_search-default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon_search-default::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: #979b9d;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #591854;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
/* 헤더 1depth 메뉴 호버 시, 밑줄 생김
|
||||
*/
|
||||
.header-nav__list > li:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 헤더 전체메뉴 펼쳤을때, 2depth 메뉴 호버 시, 색상 바뀜
|
||||
*/
|
||||
.full-menu__depth2 > li:hover {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 28x28 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_nav-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-cart.png);
|
||||
}
|
||||
|
||||
.icon_nav-mypage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-mypage.png);
|
||||
}
|
||||
|
||||
/* 메인 롤링 배너 인디케이터 색상 설정
|
||||
*/
|
||||
.main-banner .slick-dots li.slick-active button:before {
|
||||
color: #591854 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 상단 띠배너 배경색
|
||||
*/
|
||||
.top-banner {
|
||||
background-color: #343A40;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_category-type-tab01 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab01.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab02 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab02.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab03.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab04 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab04.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab05 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab05.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab06 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab06.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab07 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab07.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab08 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab08.png);
|
||||
}
|
||||
|
||||
/* 카테고리 탭 현재 활성화된 탭 색상
|
||||
*/
|
||||
.category-type-tab__btn.active .category-type-tab__name {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품이미지 좌측 상단 뱃지
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-image-badge01 {
|
||||
background-image: url(../../images/icon_product-image-badge01.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge02 {
|
||||
background-image: url(../../images/icon_product-image-badge02.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge03 {
|
||||
background-image: url(../../images/icon_product-image-badge03.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge01,
|
||||
.icon_product-image-badge02,
|
||||
.icon_product-image-badge03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 상품 - 상품 묶음 리스트 타입 */
|
||||
.product-bundle-list button.active {
|
||||
color: #591854;
|
||||
font-weight: 700;
|
||||
border: 2px solid #591854;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* 평점 별 아이콘
|
||||
( 사이즈 : 15x15 또는 그 배수 )
|
||||
*/
|
||||
.icon_rating-star {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-image: url(../../images/icon_rating-star.png);
|
||||
}
|
||||
|
||||
/* 리뷰 개수 색상 설정
|
||||
*/
|
||||
.product-unit-rating__count {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 48x48 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.time-sale {
|
||||
background-image: url(../../images/image_time-sale.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.time-sale.no-bg {
|
||||
background: linear-gradient(#f8f9fa 0, #f8f9fa 320px, #ffffff 320px, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* 상품 - 그룹별 타입 활성화탭 색상 설정
|
||||
*/
|
||||
.product-tab__btn.active {
|
||||
font-weight: 700;
|
||||
color: #591854;
|
||||
border-bottom: 2px solid #591854;
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type {
|
||||
background-image: url(../../images/image_TwoXTwo-type.png);
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 기획전 화살표 아이콘
|
||||
( 사이즈 : 22x22 또는 그 배수 )
|
||||
*/
|
||||
.icon_exhibition-arrow {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../../images/icon_exhibition-arrow.png);
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 상품 - 이미지 배너 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
둘 중 선택
|
||||
( 이미지 사이즈 : 1920x650 )
|
||||
*/
|
||||
.main-section__container.product-banner {
|
||||
background-image: url(../../images/image_product-image-banner.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.product-banner.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 인스타그램 로고
|
||||
*/
|
||||
.main-section__sns .main-section-title__title::before {
|
||||
content: "";
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 3px;
|
||||
background-image: url(../../images/icon_section-title03.png);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 공지사항 영역 아이콘
|
||||
( 사이즈 : 148x148 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice01 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice01.png);
|
||||
}
|
||||
|
||||
.icon_notice02 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice02.png);
|
||||
}
|
||||
|
||||
.icon_notice03 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice03.png);
|
||||
}
|
||||
|
||||
/* 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 공지사항 아이콘
|
||||
( 사이즈 : 20x20 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice-speaker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../images/icon_notice-speaker.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 아이콘
|
||||
( 사이즈 : 40x40 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-menu01 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu01.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu02 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu02.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu03 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu03.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu04 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu04.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.quick-menu .number-badge {
|
||||
background-color: #591854;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
/* 퀵메뉴 고객센터 이미지
|
||||
( 사이즈 : 136x136 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-customer-service {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
background-image: url(../../images/icon_quick-customer-service.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 60x60 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-to-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: url(../../images/icon_quick-to-top.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #591854;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:hover, .btn.theme.active {
|
||||
background-color: #AE6A9B;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #591854;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 페이지네이션 현재 페이지 색상 설정 */
|
||||
.pagination__item.active {
|
||||
background-color: #591854;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 고객센터, 마이페이지 좌측 메뉴 밑줄 색깔, 현재 페이지 활성화 색상 설정 */
|
||||
.sub-left-menu__title::before {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
.sub-left-menu__sub-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sub-left-menu__sub-list > li > a.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 게시물 건수 색상 설정 */
|
||||
.search-number__text strong {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #E05C7E;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #E05C7E;
|
||||
}
|
||||
|
||||
.boxTab__tabBtn.current {
|
||||
border-color: #E05C7E;
|
||||
}
|
||||
.boxTab::after {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 최근 주문 마일리지 색상 설정 */
|
||||
.orderList__mileage {
|
||||
color: #E05C7E;
|
||||
}
|
||||
.orderList__link {
|
||||
color: #591854;
|
||||
}
|
||||
.orderList__link::after {
|
||||
border-color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #591854;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #591854;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 현재메뉴 색상 설정 */
|
||||
.subList__list__item.current {
|
||||
color: #591854;
|
||||
}
|
||||
.subList__sort__item.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 장바구니 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__totalTd {
|
||||
color: #591854;
|
||||
}
|
||||
.cartOrderBox__totalTd > .priceUnit {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #591854;
|
||||
border: 1px solid #591854;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상품 썸네일 테두리 색상 설정 */
|
||||
.productDetailGallery__item.active::before {
|
||||
border: 2px solid #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 분류 색상 설정 */
|
||||
.userReview__sort li button.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #591854;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #591854;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #591854;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
.productDetailInfo__priceTotal__price {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #E05C7E;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #E05C7E;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 총 리뷰수, 평점 색상 설정 */
|
||||
.productDetailcontent__totalNum dl dd {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName::before {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 기획전 댓글 등록/수정 버튼 색상 설정 */
|
||||
.comment-write__button {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
.comment-edit__button--edit {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #591854;
|
||||
}
|
||||
|
||||
/* 검색 결과 키워드 색상 설정 */
|
||||
.page-title__title--searchResult em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #591854;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #591854;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #591854;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
640
build/resources/main/static/sopmall/pc/css/theme/themeNC.css
Normal file
@@ -0,0 +1,640 @@
|
||||
@charset "UTF-8";
|
||||
/****** 뉴트리코어 테마 컬러 #78B857 ******/
|
||||
/* svg 아이콘 테마 색상 설정 */
|
||||
.svg-themeColor {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 검색바 및 돋보기 버튼 색상 설정 */
|
||||
.header-search-bar {
|
||||
border: 2px solid #86c860;
|
||||
}
|
||||
.header-search-bar button svg {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 레이어 팝업 돋보기 버튼 색상 */
|
||||
.header-search-pop__search-btn svg {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 자동완성 일치 텍스트 색상 설정 */
|
||||
.header-search-pop__auto-complete em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 실시간 검색 숫자 색상 설정 */
|
||||
.search-trend__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 실시간 검색 상승, 하강 아이콘
|
||||
( 사이즈 : 18x18 또는 그 배수 )
|
||||
*/
|
||||
.icon_search-up {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-up.png);
|
||||
}
|
||||
|
||||
.icon_search-down {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-image: url(../../images/icon_search-down.png);
|
||||
}
|
||||
|
||||
/* 실시간 검색 동일 순위 표시('-')
|
||||
*/
|
||||
.icon_search-default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.icon_search-default::after {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: #979b9d;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.number-badge {
|
||||
background-color: #78B857;
|
||||
top: -7px;
|
||||
right: -7px;
|
||||
}
|
||||
|
||||
/* 헤더 1depth 메뉴 호버 시, 밑줄 생김
|
||||
*/
|
||||
.header-nav__list > li:hover::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 전체메뉴 펼쳤을때, 2depth 메뉴 호버 시, 색상 바뀜
|
||||
*/
|
||||
.full-menu__depth2 > li:hover {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 헤더 장바구니, 마이페이지 아이콘
|
||||
( 사이즈 : 28x28 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_nav-cart {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-cart.png);
|
||||
}
|
||||
|
||||
.icon_nav-mypage {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-image: url(../../images/icon_nav-mypage.png);
|
||||
}
|
||||
|
||||
/* 메인 롤링 배너 인디케이터 색상 설정
|
||||
*/
|
||||
.main-banner .slick-dots li.slick-active button:before {
|
||||
color: #78B857 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 상단 띠배너 배경색
|
||||
*/
|
||||
.top-banner {
|
||||
background-color: #343A40;
|
||||
}
|
||||
|
||||
/* 카테고리 탭 아이콘
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
( 개수가 늘어나면 css 추가 작성필요 )
|
||||
*/
|
||||
.icon_category-type-tab01 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab01.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab02 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab02.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab03.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab04 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab04.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab05 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab05.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab06 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab06.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab07 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab07.png);
|
||||
}
|
||||
|
||||
.icon_category-type-tab08 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-image: url(../../images/icon_category-type-tab08.png);
|
||||
}
|
||||
|
||||
/* 카테고리 탭 현재 활성화된 탭 색상
|
||||
*/
|
||||
.category-type-tab__btn.active .category-type-tab__name {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품이미지 좌측 상단 뱃지
|
||||
( 사이즈 : 64x64 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-image-badge01 {
|
||||
background-image: url(../../images/icon_product-image-badge01.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge02 {
|
||||
background-image: url(../../images/icon_product-image-badge02.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge03 {
|
||||
background-image: url(../../images/icon_product-image-badge03.png);
|
||||
}
|
||||
|
||||
.icon_product-image-badge01,
|
||||
.icon_product-image-badge02,
|
||||
.icon_product-image-badge03 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 상품 - 상품 묶음 리스트 타입 */
|
||||
.product-bundle-list button.active {
|
||||
color: #78B857;
|
||||
font-weight: 700;
|
||||
border: 2px solid #78B857;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
/* 평점 별 아이콘
|
||||
( 사이즈 : 15x15 또는 그 배수 )
|
||||
*/
|
||||
.icon_rating-star {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-image: url(../../images/icon_rating-star.png);
|
||||
}
|
||||
|
||||
/* 리뷰 개수 색상 설정
|
||||
*/
|
||||
.product-unit-rating__count {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 이미지 호버시 장바구니 담기 아이콘
|
||||
( 사이즈 : 48x48 또는 그 배수 )
|
||||
*/
|
||||
.icon_product-unit-addToCart {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url(../../images/icon_product-unit-addToCart.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.time-sale {
|
||||
background-image: url(../../images/image_time-sale.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.time-sale.no-bg {
|
||||
background: linear-gradient(#f8f9fa 0, #f8f9fa 320px, #ffffff 320px, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* 상품 - 그룹별 타입 활성화탭 색상 설정
|
||||
*/
|
||||
.product-tab__btn.active {
|
||||
font-weight: 700;
|
||||
color: #78B857;
|
||||
border-bottom: 2px solid #78B857;
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
( 이미지 사이즈 : 1920x320 )
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type {
|
||||
background-image: url(../../images/image_TwoXTwo-type.png);
|
||||
}
|
||||
|
||||
/* 상품 - 2x2 타입 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.TwoXTwo-type.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 기획전 화살표 아이콘
|
||||
( 사이즈 : 22x22 또는 그 배수 )
|
||||
*/
|
||||
.icon_exhibition-arrow {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-image: url(../../images/icon_exhibition-arrow.png);
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* 상품 - 이미지 배너 타입 : 배경이미지 있는(O) 경우, 배경이미지 설정
|
||||
둘 중 선택
|
||||
( 이미지 사이즈 : 1920x650 )
|
||||
*/
|
||||
.main-section__container.product-banner {
|
||||
background-image: url(../../images/image_product-image-banner.png);
|
||||
}
|
||||
|
||||
/* 타임세일 : 배경이미지 없는(X) 경우, 배경색 설정
|
||||
*/
|
||||
.main-section__container.product-banner.no-bg {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 인스타그램 로고
|
||||
*/
|
||||
.main-section__sns .main-section-title__title::before {
|
||||
content: "";
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 3px;
|
||||
background-image: url(../../images/icon_section-title03.png);
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 공지사항 영역 아이콘
|
||||
( 사이즈 : 148x148 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice01 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice01.png);
|
||||
}
|
||||
|
||||
.icon_notice02 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice02.png);
|
||||
}
|
||||
|
||||
.icon_notice03 {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background-image: url(../../images/icon_notice03.png);
|
||||
}
|
||||
|
||||
/* 고객센터 번호 색상
|
||||
*/
|
||||
.notice__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 공지사항 아이콘
|
||||
( 사이즈 : 20x20 또는 그 배수 )
|
||||
*/
|
||||
.icon_notice-speaker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../../images/icon_notice-speaker.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 아이콘
|
||||
( 사이즈 : 40x40 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-menu01 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu01.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu02 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu02.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu03 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu03.png);
|
||||
}
|
||||
|
||||
.icon_quick-menu04 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(../../images/icon_quick-menu04.png);
|
||||
}
|
||||
|
||||
/* 퀵메뉴 상품숫자 Badge 색상 설정 및 위치 조정
|
||||
(아이콘 모양이 달라지면 top, right 로 위치조정 필요할 수 있음)
|
||||
*/
|
||||
.quick-menu .number-badge {
|
||||
background-color: #78B857;
|
||||
top: -10px;
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
/* 퀵메뉴 고객센터 이미지
|
||||
( 사이즈 : 136x136 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-customer-service {
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
background-image: url(../../images/icon_quick-customer-service.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
/* 상단으로 이동 아이콘
|
||||
( 사이즈 : 60x60 또는 그 배수 )
|
||||
*/
|
||||
.icon_quick-to-top {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: url(../../images/icon_quick-to-top.png);
|
||||
/* 이미지 그림자 */
|
||||
filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
/* Primary 버튼 색상 */
|
||||
.btn.theme {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn.theme:hover, .btn.theme.active {
|
||||
background-color: #6db04a;
|
||||
}
|
||||
.btn.outline.theme {
|
||||
color: #78B857;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
/* 페이지네이션 현재 페이지 색상 설정 */
|
||||
.pagination__item.active {
|
||||
background-color: #78B857;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 고객센터, 마이페이지 좌측 메뉴 밑줄 색깔, 현재 페이지 활성화 색상 설정 */
|
||||
.sub-left-menu__title::before {
|
||||
background-color: #86c860;
|
||||
}
|
||||
.sub-left-menu__sub-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.sub-left-menu__sub-list > li > a.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 게시물 건수 색상 설정 */
|
||||
.search-number__text strong {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 탭 버튼 색상 설정 */
|
||||
.sub-tab__btn.current {
|
||||
background-color: #86c860;
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.sub-tab__trigger.type02 .sub-tab__btn.current {
|
||||
border-top: 2px solid #86c860;
|
||||
}
|
||||
|
||||
.boxTab__tabBtn.current {
|
||||
border-color: #86c860;
|
||||
}
|
||||
.boxTab::after {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 주문/배송 조회 색상 설정 */
|
||||
.orderProgress__list li.current .orderProgress__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 메인 최근 주문 마일리지 색상 설정 */
|
||||
.orderList__mileage {
|
||||
color: #86c860;
|
||||
}
|
||||
.orderList__link {
|
||||
color: #78B857;
|
||||
}
|
||||
.orderList__link::after {
|
||||
border-color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 배송지 관리 기본 배송지 색상 설정 */
|
||||
.addressManage__itemPerson.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 마이페이지 마일리지 내역 색상 설정 */
|
||||
.mileageStatusCurrent__number {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusCurrent__unit {
|
||||
color: #78B857;
|
||||
}
|
||||
.mileageStatusMisc__item--scheduled .mileageStatusMisc__number {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 서브리스트 현재메뉴 색상 설정 */
|
||||
.subList__list__item.current {
|
||||
color: #78B857;
|
||||
}
|
||||
.subList__sort__item.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 장바구니 결제예정금액 색상 설정 */
|
||||
.cartOrderBox__totalTd {
|
||||
color: #78B857;
|
||||
}
|
||||
.cartOrderBox__totalTd > .priceUnit {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 상품 마일리지 색상 설정 */
|
||||
.orderInfo__mileageText em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 기간 선택 버튼 색상 설정 */
|
||||
.dateRange-btnContainer .dateRange-btn.selected {
|
||||
color: #78B857;
|
||||
border: 1px solid #78B857;
|
||||
}
|
||||
|
||||
/* 주문 결과 상단 타이틀 색상 설정 */
|
||||
.orderCompletedTop__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 주문 실패 타이틀, 설명 포인트 색상 설정 */
|
||||
.orderFailed__title em,
|
||||
.orderFailed__text em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 상품 썸네일 테두리 색상 설정 */
|
||||
.productDetailGallery__item.active::before {
|
||||
border: 2px solid #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 회원혜택 회사명 색상 설정 */
|
||||
.productDetailInfo__memberBenefits__title em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 건수 색상 설정 */
|
||||
.productReview__subTitle__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 분류 색상 설정 */
|
||||
.userReview__sort li button.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 리뷰 "도움이 돼요" 색상 설정 */
|
||||
.userReviewItem__like svg,
|
||||
.userReviewItem__like path {
|
||||
fill: #78B857;
|
||||
}
|
||||
.userReviewItem__like em {
|
||||
color: #78B857;
|
||||
}
|
||||
.userReviewItem__like.selected {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 쿠폰 다운로드 색상 설정 */
|
||||
.productCoupon__right {
|
||||
background-color: #78B857;
|
||||
}
|
||||
.productCoupon__text {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.productDetailInfo__priceTotal__price {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 평점 비율 색상 설정 */
|
||||
.productReview__ratingStats__topRating .productReview__ratingStats__fill {
|
||||
background-color: #86c860;
|
||||
}
|
||||
|
||||
.productReview__ratingStats__num {
|
||||
background-color: #86c860;
|
||||
}
|
||||
.productReview__ratingStats__num::before {
|
||||
border-right-color: #86c860;
|
||||
}
|
||||
|
||||
/* 상품 상세페이지 총 리뷰수, 평점 색상 설정 */
|
||||
.productDetailcontent__totalNum dl dd {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장안내 탭 색상 설정 */
|
||||
.storeList__tabBtn.current {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장지역 타이틀 색상 설정 */
|
||||
.storeList__subList__title {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 매장상세 타이틀 왼쪽 띠 색상 설정 */
|
||||
.storeDetail__storeName::before {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 브랜드소개 오시는 길 왼쪽띠 색상 설정 */
|
||||
.brandIntroMap__storeName::before {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 기획전 댓글 등록/수정 버튼 색상 설정 */
|
||||
.comment-write__button {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
.comment-edit__button--edit {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 이벤트 버튼 색상 설정 */
|
||||
.eventDetail__answer__btn {
|
||||
background-color: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 결과 키워드 색상 설정 */
|
||||
.page-title__title--searchResult em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 검색 결과 인기 검색어 숫자 색상 설정 */
|
||||
.resultTrend__num {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
/* 게시물 추천, 비추천 색상 설정 */
|
||||
.postLikeBtn svg,
|
||||
.postLikeBtn path {
|
||||
fill: #78B857;
|
||||
}
|
||||
|
||||
.postLikeBtn em {
|
||||
color: #78B857;
|
||||
}
|
||||
|
||||
.postLikeBtn.clicked {
|
||||
background-color: #78B857;
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
BIN
build/resources/main/static/sopmall/pc/fonts/NotoSansKR-Bold.otf
Normal file
BIN
build/resources/main/static/sopmall/pc/fonts/NotoSansKR-Thin.otf
Normal file
BIN
build/resources/main/static/sopmall/pc/images/brand_cham.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
build/resources/main/static/sopmall/pc/images/brand_nutri.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
build/resources/main/static/sopmall/pc/images/ci.jpg
Normal file
|
After Width: | Height: | Size: 394 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 778 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 894 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 98 KiB |
BIN
build/resources/main/static/sopmall/pc/images/giftcard_01.jpeg
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
build/resources/main/static/sopmall/pc/images/giftcard_02.jpeg
Normal file
|
After Width: | Height: | Size: 727 KiB |
BIN
build/resources/main/static/sopmall/pc/images/giftcard_03.jpeg
Normal file
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
BIN
build/resources/main/static/sopmall/pc/images/icon_calendar.png
Normal file
|
After Width: | Height: | Size: 656 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
BIN
build/resources/main/static/sopmall/pc/images/icon_chevron.png
Normal file
|
After Width: | Height: | Size: 182 B |
BIN
build/resources/main/static/sopmall/pc/images/icon_chevron2.png
Normal file
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 601 B |
|
After Width: | Height: | Size: 4.2 KiB |
BIN
build/resources/main/static/sopmall/pc/images/icon_download.png
Normal file
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 548 B |
|
After Width: | Height: | Size: 1.1 KiB |
BIN
build/resources/main/static/sopmall/pc/images/icon_gift.png
Normal file
|
After Width: | Height: | Size: 990 B |
|
After Width: | Height: | Size: 2.5 KiB |
BIN
build/resources/main/static/sopmall/pc/images/icon_hot-post.png
Normal file
|
After Width: | Height: | Size: 390 B |
|
After Width: | Height: | Size: 543 B |
BIN
build/resources/main/static/sopmall/pc/images/icon_info.png
Normal file
|
After Width: | Height: | Size: 903 B |
|
After Width: | Height: | Size: 750 B |
BIN
build/resources/main/static/sopmall/pc/images/icon_lock.png
Normal file
|
After Width: | Height: | Size: 680 B |
|
After Width: | Height: | Size: 582 B |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 463 B |
|
After Width: | Height: | Size: 901 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 297 B |
BIN
build/resources/main/static/sopmall/pc/images/icon_nav-cart.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |