@charset "utf-8"; /************************************************** Global.css **************************************************/ /************************************************** Variables (공통 변수 지정) **************************************************/ :root { /* layout */ --website-layout-width : 1300px; /* 웹사이트 레이아웃 width 값 */ /* buttons 공통 (스킨에도 적용됨) */ --btn1-bg-color : #444c62; /* 강조 버튼 배경색 */ --btn1-border-color : #444c62; /* 강조 버튼 테두리색 */ --btn1-txt-color : #ffffff; /* 강조 버튼 글자색 */ --btn2-bg-color : #ffffff; /* 일반형 버튼 배경색 */ --btn2-border-color : #333333; /* 일반형 버튼 테두리색 */ --btn2-txt-color : #333333; /* 일반형 버튼 글자색 */ --btn3-bg-color : #f7f7f7; /* 배경흐린 버튼 배경색 */ --btn3-border-color : #dddddd; /* 배경흐린d 버튼 테두리색 */ --btn3-txt-color : #000000; /* 배경흐린 버튼 글자색 */ --btn4-bg-color : #064189; /* 배경흐린 버튼 배경색 */ --btn4-border-color : #064189; /* 배경흐린d 버튼 테두리색 */ --btn4-txt-color : #ffffff; /* 배경흐린 버튼 글자색 */ --point-color1: #0071bb; --point-color2: #064189; --point-color3: #ebf1f7; --color-red: #aa0707; } /************************************************** Public **************************************************/ html{min-width: var(--website-layout-width); height: 100%; overflow-y: auto} body {overflow-x: hidden; min-height: 100%} /* Table */ .table1{width: 100%;border-top: 2px solid #333;border-bottom: 1px solid #ccc;} .table1 tr > *{padding: 12px 20px;border-top: 1px solid #dddddd;font-size: 15px;line-height: 18px;} .table1 tr:first-child > *{border-top: none;} .table1 thead th{background: #f7f7f7;font-weight: normal;color: #000;border-bottom: 1px solid #dddddd;padding: 20px 10px;} .table1 tbody th{font-weight: normal;color: #000;text-align: left;} .table1 tbody th em{font-style: normal;margin-right: 5px;color: #999;} .table1 tbody.memo td{padding: 0 !important;border: none !important;} .table1 tbody.fileWrap th em{font-style: normal;margin-left: 3px;} .table1 .w100p{width: 100%;} .table1 .w50p{width: 500px;} .table1 .w33p{width: 180px;} .table1 input[type=text], .table1 input[type=password], .table1 input[type=search], .table1 input[type=email], .table1 input[type=url], .table1 input[type=number]{outline: none;height: 40px;line-height: 40px;margin: 2px 0;padding: 0 15px;background: #f9f9f9;border: 1px solid #ddd;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;cursor: pointer;vertical-align: middle;font-size: 15px;} .table1 select{height: 40px;line-height: 40px;margin: 2px 0;padding: 0 0 0 10px;background: #ffffff;border: 1px solid #ccc;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;cursor: pointer;font-size: 15px;} .table1 textarea{outline: none;width: 100%;height: 300px;font-size: 14px;line-height: 18px;margin: 2px 0;padding: 15px;background: #f9f9f9;border: 1px solid #ddd;box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;cursor: pointer;font-size: 15px;} .table1 label{font-size: 15px;letter-spacing: -1px;} .table1 em.tbl_sment{display: block;margin: 5px 0;font-size: 14px;color: #999;font-style: normal;letter-spacing: -1px;} .table1 .many-inputs .hipen{font-style: normal;display: inline-block;vertical-align: middle;width: 30px;display: inline-block;vertical-align: baseline;text-align: center;font-size: 13px;color: #999;} .table1 .many-inputs > *{vertical-align: middle;} .table1.borderAll tr > *{border: 1px solid #ddd;} /* Tab */ .tab1{ margin-bottom: 40px; } .tab1 > li{display: inline-block;background: #f7f7f7;} .tab1 > li a{display: block;height: 40px;line-height: 40px;text-align: center;padding: 0 40px;border: 1px solid #f7f7f7;} .tab1 > li.active a{background: #fff;color: #000;border-color: #333;} .tab2{margin-bottom: 50px;border-bottom: 1px solid #000;display: flex;justify-content: space-between;flex-wrap: wrap;} .tab2 li{display: inline-block;vertical-align: top;flex-basis: 0;flex-grow: 1;} .tab2 li a{display: block;font-size: 18px;color: #666;display: block;line-height: 60px;text-decoration: none;text-align: center;} .tab2 li.active{margin-bottom: -1px;} .tab2 li.active a{border: 1px solid #000;border-bottom: none;background: #fff;color: var(--point-color2);font-weight: 700;} /* Button */ .btnWrap{ margin: -2px;margin-top: 28px;display: flex;align-items: center;flex-wrap: wrap; } .btnWrap > *{margin: 2px;} .btnWrap.tac {justify-content: center;text-align: center;} .btnWrap i {display: inline-block;vertical-align: middle;transform: translateY(-2px);margin-left: 5px;} .btn1{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--btn1-bg-color);border: 1px solid var(--btn1-border-color);color: var(--btn1-txt-color) !important;text-decoration: none !important;border-radius: 5px;} .btn2{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--btn2-bg-color);border: 1px solid var(--btn2-border-color);color: var(--btn2-txt-color) !important;text-decoration: none !important;border-radius: 5px;} .btn3{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--btn3-bg-color);border: 1px solid var(--btn3-border-color);color: var(--btn3-txt-color) !important;text-decoration: none !important;border-radius: 5px;} .btn4{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--btn4-bg-color);border: 1px solid var(--btn4-border-color);color: var(--btn4-txt-color) !important;text-decoration: none !important;border-radius: 5px;} .btn5{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--btn4-txt-color);border: 1px solid var(--btn4-border-color);color: var(--btn4-bg-color) !important;text-decoration: none !important;border-radius: 5px;} .btn6{background: none;padding: 0 30px;display: inline-block;vertical-align: top;box-sizing: border-box;height: 50px;line-height: 48px;text-align: center;font-size: 16px;background: var(--color-red);border: 1px solid var(--color-red);color: var(--btn4-txt-color) !important;text-decoration: none !important;border-radius: 5px;} .btn1.mid, .btn2.mid, .btn3.mid, .btn4.mid, .btn5.mid, .btn6.mid{padding: 0 25px;height: 45px;line-height: 43px;font-size: 15px;} .btn1.small, .btn2.small, .btn3.small, .btn4.small, .btn5.small, .btn6.small{padding: 0 20px;height: 40px;line-height: 40px;font-size: 14px;} .btn1.ssmall, .btn2.ssmall, .btn3.ssmall, .btn4.ssmall, .btn5.ssmall, .btn6.ssmall{padding: 0 10px;height: 30px;line-height: 28px;font-size: 13px;letter-spacing: -1px;} /* Etc */ .selectbox{height: 40px;border: 1px solid #ccc;position: relative;display: inline-block;vertical-align: top;min-width: 170px;overflow: hidden;} .selectbox:after{content: '\f107';font-family: axicon;display: block;position: absolute;top: 50%;right: 10px;margin-top: -7px;font-size: 14px;} .selectbox select{height: 38px;background: transparent;width: 130%;border: none;letter-spacing: -1px;padding-left: 10px;} .custlab{position: relative;font-size: 14px;color: #333;letter-spacing: -1px;padding-left: 25px;line-height: 25px;text-align: left !important;display: inline-block;margin: 3px;} .custlab:before{content: '';display: block;position: absolute;left: 0;top: 50%;margin-top: -10px;width: 20px;height: 20px;box-sizing: border-box;border: 2px solid #ddd;border-radius: 50%;} .custlab input{display: none;} .custlab.on{color: #000;} .custlab.on:before{border-color: #333;} .custlab.on:after{content: '';display: block;position: absolute;left: 5px;top: 50%;margin-top: -5px;width: 10px;height: 10px;background: #333;border-radius: 50%;} .sound_only {position: fixed;top: -999999px;width: 0;height: 0;overflow: hidden;opacity: 0;} .slick-slide {position: relative;} .mark_ad_wrap {position: absolute;top: 10px;right: 10px;z-index: 33;} .mark_ad_wrap.t30 {top: 28px;} .mark_ad_wrap .mark_ad {width: 30px;height: 18px;line-height: 16px;text-align: center;border-radius: 3px;background: #fff;border: 1px solid #e5e5e5;font-size: 11px;color: #333;letter-spacing: normal;overflow: hidden;font-family: 'Open Sans';} .mark_ad_wrap .mark_ad.blue {background-color: rgba(0, 0, 0, 0.5);border: 0px;line-height: 18px;color: #fff;} .mark_ad_wrap .txt_box {display: none;position: absolute;top: 0;right: 0;z-index: 32;background: #fff;border: 1px solid #ccc;text-align: left;width: 170px;box-sizing: border-box;padding: 4px 5px;border-radius: 3px;} .mark_ad_wrap .txt_box .mark_ad_close {position: absolute;top: 0;right: 0;border: 0px;background: none;padding: 1px 3px;} .mark_ad_wrap .txt_box > strong {display: block;font-size: 12px;color: #111;font-weight: 600;line-height: 15px;letter-spacing: -1px;} .mark_ad_wrap .txt_box > p {font-size: 11px;line-height: 15px;letter-spacing: -1px;} .ml10 {margin-left: 10px !important;} /************************** Shop Default Style **************************/ #sb-footer{position: relative;margin-top: 30px;min-height: 35px;} #sb-footer .left{position: absolute;top: 0;left: 0;text-align: left;width: 50%;z-index: 2;} #sb-footer .center{text-align: center;} #sb-footer .right{text-align: right;} .sb-btnWrap{margin-top: 20px;} .sb-btn{display: inline-block;vertical-align: top;box-sizing: border-box;text-align: center !important;} .sb-btn.type1{background: #fff;border: none;height: 40px;line-height: 38px;padding: 0 20px;min-width: 80px;font-size: 14px;letter-spacing: -1px;color: #333;border: 1px solid #ccc;text-decoration: none;} .sb-btn.type1.small{height: 30px;line-height: 28px;padding: 0 10px;font-size: 13px;min-width: auto;} .sb-btn.type2{background: #666;border: none;height: 40px;line-height: 38px;padding: 0 20px;min-width: 80px;font-size: 14px;letter-spacing: -1px;color: #fff;border: 1px solid #333;text-decoration: none;} .sb-btn.type2.small{height: 30px;line-height: 28px;padding: 0 10px;font-size: 13px;min-width: auto;} .sb-btn.w100p{width: 100%;} /************************** Site Layer Popup **************************/ .sp-pop{background: #fff;box-shadow: 0 0 10px rgba(0,0,0,0.15);border-radius: 3px;overflow: hidden;} .sp-pop:before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box;border: 1px solid rgba(0,0,0,0.07);} .sp-pop .img{position: relative;min-height: 100px;} .sp-pop .img img{max-width:100%;} .sp-pop .btns{position: absolute;bottom: 0;left: 0;width: 100%;white-space: nowrap;background: #f7f7f7;} .sp-pop .btns li{position: relative;display: inline-block;vertical-align: top;width: 50%;} .sp-pop .btns li:before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box;border: 1px solid rgba(0,0,0,0.07);border-width: 1px 1px 1px 0;} .sp-pop .btns li:first-child:before{border-left-width: 1px;} .sp-pop .btns li a, .sp-pop .btns li label{position: relative;display: block;text-align: center;line-height: 32px;text-align: center;font-size: 11px;color: #666;letter-spacing: -1px;z-index: 3;text-decoration: none;font-family: dotum;} .sp-pop .btns li label input{display: none;} .sp-pop .btns.len3 li{width: 33.33%;} /************************** Paging **************************/ .paging{text-align: center !important;margin-top: 50px !important;font-family: empty !important;font-size: 0 !important;} .paging a{display: inline-block !important;vertical-align: top !important;margin: 0 !important;margin-right: -1px !important;position: relative !important;margin: 0 10px !important;height: 35px !important;line-height: 35px !important;text-align: center !important;color: #ccc !important;font-size: 16px !important;font-weight: bold !important;text-decoration: none !important;box-sizing: border-box !important;font-family: tahoma, arial, axicon !important;} .paging a:hover{color: #000 !important;} .paging a:after{position: absolute !important;top: 0 !important;left: 0 !important;width: 100% !important;height: 100% !important;line-height: 35px !important;text-align: center !important;font-size: 15px !important;text-indent: 0 !important;} .paging a.active{background: #ffffff !important;color: #333333 !important;font-weight: 600 !important;} .paging a.first, .paging a.prev, .paging a.next, .paging a.last{background: #f7f7f7 !important;width: 35px !important;line-height: 35px !important;text-align: center !important;border-radius: 50% !important;color: #666666 !important;text-indent: -999em !important;margin: 0 2px !important;} .paging a.first:hover, .paging a.prev:hover, .paging a.next:hover, .paging a.last:hover{background: #333 !important;} .paging a:hover:after{color: #fff !important;} .paging a.first{margin-right: 15px !important;margin-left: -10px !important;} .paging a.prev{margin-right: 15px !important;margin-left: -10px !important;} .paging a.next{margin-left: 15px !important;margin-right: -10px !important;} .paging a.last{margin-left: 15px !important;margin-right: -10px !important;} .paging a.first:after{content: '\f100' !important;font-size: 18px !important;color: #999 !important;} .paging a.prev:after{content: '\f104' !important;font-size: 18px !important;color: #999 !important;} .paging a.next:after{content: '\f105' !important;font-size: 18px !important;color: #999 !important;} .paging a.last:after{content: '\f101' !important;font-size: 18px !important;color: #999 !important;} .paging2{text-align: center;margin-top: 30px;font-family: empty;font-size: 0;} .paging2 a{display: inline-block;vertical-align: top;margin: 0;margin-right: -1px;position: relative;width: 35px;height: 35px;line-height: 35px;text-align: center;color: #999999;font-size: 12px;text-decoration: none;box-sizing: border-box;font-family: tahoma, arial, axicon;} .paging2 a:first-child{border-radius: 5px 0 0 5px !important;} .paging2 a:after{position: absolute;top: 0;left: 0;width: 100%;height: 100%;line-height: 35px;text-align: center;font-size: 15px;text-indent: 0;} .paging2 a:last-child{border-radius: 0 5px 5px 0 !important;} .paging2 a.active{background: #ffffff;color: #333333;font-weight: bold;} .paging2 a.first, .paging2 a.prev, .paging2 a.next, .paging2 a.last{background: none;font-size: 15px;color: #666666;text-indent: -999em;} .paging2 a.first:after{content: '\f100';text-indent: 0;} .paging2 a.prev:after{content: '\f104';} .paging2 a.next:after{content: '\f105';} .paging2 a.last:after{content: '\f101';} /************************************************** Layout **************************************************/ #header{position: relative;z-index: 90;background: #fff; border-bottom: 1px solid #ddd;} #header > .inner{position: relative;width: 1200px;height: 100px;margin: 0 auto;z-index: 12;} #header .logo{position: absolute;bottom: 0;left: 0;line-height: 100px;} #topBanner {position: relative} #topBanner .close {position: absolute; top: 50%; right: 60px; transform: translateY(-50%); z-index: 10} #topBanner .link img {width: 100%} .gnbWrap {position: relative; max-width: 1200px; margin: 0 auto} .gnbWrap:before {content: ''; position: absolute; top: 0; left: 50%; width: 1920px; height: 1px; margin-left: -960px; background: #ddd} #gnb{} #gnb > li{position: relative;display: inline-block;vertical-align: top;} #gnb > li > a{display: block;padding: 0 43px;font-weight: 500; line-height: 60px;font-size: 16px;color: #333333;text-decoration: none; letter-spacing: -0.35px} #gnb > li:first-child a {padding: 0 27px 0 30px; background: url('../images/layout/hd_all_cate_ico.png') no-repeat left center} /* #gnb > li:nth-child(n+6):after {content: ''; position: absolute; top: 50%; left: -1px; transform: translateY(-50%); width: 1px; height: 10px; background: #cccccc; z-index: 1} #gnb > li:nth-child(6):after {display: none} #gnb > li:nth-child(n+6) a {padding: 0 39px; background: var(--point-color3); color: var(--point-color2)} */ /* #gnb > li:nth-child(n+7):after {content: ''; position: absolute; top: 50%; left: -1px; transform: translateY(-50%); width: 1px; height: 10px; background: #cccccc; z-index: 1} */ #gnb > li:nth-child(7):after {display: none} #gnb > li:nth-child(n+7) a {padding: 0 30px; border-top: 1px solid #ddd; /* background: var(--point-color3); */ background: #fff; /* color: var(--point-color2); */ color: #333333; } .onestop1002{ background: var(--point-color3); color: var(--point-color2); } .bom1002{ background: var(--point-color3); color: var(--point-color2); } .onestop1002 a{ color: var(--point-color2) !important; } .bom1002 a{ color: var(--point-color2) !important; } /* #gnb > li > a:after{display:block;content:'';width:0;height: 3px;position: absolute;bottom:0;left:50%;background: #00afe5;transition:all 0.25s;} #gnb > li:hover > a:after, #gnb > li.active > a:after{width: 100%;left:0;} */ #gnb > li > ul{position: absolute;top: 90px;left: 50%;width: 200px;margin-left: -100px;padding: 15px;border: 1px solid #ddd;border-top: 2px solid #00afe5;background: #fff;box-sizing: border-box;visibility: hidden;opacity: 0;transition: all 0.2s;} #gnb > li.time > a {background: url('../images/layout/hd_menu_time_ico.png') no-repeat left 25px center} #gnb > li > ul li a{display: block;font-size: 15px;color: #000;line-height: 30px;text-align: center;} #gnb > li > ul li.active a{font-weight: bold;} #gnb > li:hover > ul{visibility: visible;opacity: 1;} #gnb > li.hidden-gnb{display: none;} .link_mo {display: none;} #drdw{position: absolute;top: 120px;left: 0;width: 100%;background: #fff;border-top: 1px solid #ddd;border-bottom: 3px solid #00afe5;z-index: 91;display: none;} #drdw .inner{position: relative;width: 1200px;margin: 0 auto;border-right: 1px solid #e8e8e8;} #drdw .inner > li{display: inline-block;padding: 25px 0;vertical-align: top;} #drdw .inner > li:before{content: '';display: block;position: absolute;top: 0;height: 100%;width: 1px;background: #e8e8e8;} #drdw .inner > li:first-child{border-left-width: 1px;} #drdw .inner > li > a{display: block;margin-bottom: 15px;font-size: 18px;color: #0859a2;text-align: center;font-weight: bold;} #drdw .inner > li ul li a{display: block;font-size: 15px;line-height: 25px;color: #555555;text-align: center;} #drdw .inner > li ul li.active a{font-weight: bold;} #drdw .inner > li.hidden-gnb{display: none;} .tnbWrap {position: relative; width: 1200px; margin: 0 auto; margin-top: 14px} #tnb{position: absolute;top: 0;right: 0;} #tnb > li{position: relative; display: inline-block;padding: 0 10px;box-sizing: border-box;} #tnb > li:last-child {padding-right: 0} #tnb > li:not(:last-child):before {content: ''; position: absolute; top: 8px; right: -1px; width: 1px; height: 12px; background: #ddd} #tnb > li a{font-size: 13px;color: #555555; line-height: 28px} #hd-sns li {display: inline-block; vertical-align: top; font-size: 0; margin-right: 5px} .hd-banner {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 220px; display: none;} .hd-banner .mark_ad_wrap {top: 5px;right: 5px;} .hd-banner .roll {position: relative} .hd-banner .roll .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} .hd-banner .roll .slick-dots {position: absolute; top: 50%; left: -16px; transform: translateY(-50%); width: 6px; font-size: 0} .hd-banner .roll .slick-dots li {margin: 4px 0; width: 6px; height: 6px} .hd-banner .roll .slick-dots li button {width: 6px; height: 6px; border: 0; text-indent: -999em; background: #cccccc; border-radius: 50%} .hd-banner .roll .slick-dots li.slick-active button {background: var(--point-color2)} #hd-sch {position: absolute; top: 50%; left: 50%; transform: translate(-71%,-50%);} #hd-sch legend {display: none} #hd-sch fieldset {position: relative; display: inline-block; width: 460px; height: 46px; padding-right: 70px; border: 2px solid var(--point-color2); border-radius: 22px; box-sizing: border-box} #hd-sch fieldset .inp {width: 100%; height: 41px; padding: 0 25px; font-size: 14px; color: #333; box-sizing: border-box; border-radius: 22px 0 0 22px; border: 0} #hd-sch fieldset .inp::placeholder {color: #888888} #hd-sch fieldset .sbm {position: absolute; top: 0; right: 0; width: 70px; height: 42px; border-radius: 0 22px 22px 0; border: 0; text-indent: -999em; background: url('../images/layout/hd_srch_ico.png') no-repeat center} #hd-sch .srch-list {margin-top: 10px; text-align: center} #hd-sch .srch-list li {position: relative; display: inline-block; vertical-align: top; padding: 0 10px} #hd-sch .srch-list li:not(:last-child):before {content: ''; position: absolute; top: 5px; right: -1px; width: 1px; height: 12px; background: #ddd} #hd-sch .srch-list li a {font-size: 13px; line-height: 22px; color: #666666; letter-spacing: -0.5px} #hd-sch-mo2{display: none;position: absolute;top: 76%;transform: translate(0, -50%);right: 50px;z-index: 91;border: 0px;background: none;text-decoration: none !important;} #hd-sch-mo2 i {display: block;font-size: 17px;color: var(--point-color2);} #hd-sch-mo2-pop{position: absolute;top: 281px;left: 0;width: 100%;background: #fff;border-top: 1px solid #ddd;z-index: 91;display: none;box-shadow: 3px 10px 10px rgba(0,0,0,0.1);padding: 30px 0;} #hd-sch-mo2-pop.on{display: block !important;} #hd-sch-mo2-pop form{width: var(--website-layout-width);position: relative;margin: 0 auto;zoom: 1;} #hd-sch-mo2-pop form fieldset > *{float: left;} #hd-sch-mo2-pop legend{display: none;} #hd-sch-mo2-pop .inp{width: calc(100% - 110px);height: 55px;line-height: 55px;text-indent: 20px;font-size: 16px;background: none;border: none;background: #f7f7f7;} #hd-sch-mo2-pop .sbm{position: relative;width: 55px;height: 55px;background: var(--search-submit-bg-color);border: none;text-indent: -999em;} #hd-sch-mo2-pop .sbm:after{position: absolute;top: 0;left: 0;width: 100%;line-height: 55px;display: block;content: '\e036';font-family: axicon;color: var(--search-submit-txt-color);font-size: 18px;text-indent: 0;} #hd-sch-mo2-pop .close{position: relative;width: 55px;height: 55px;background: var(--search-close-bg-color);border: none;text-indent: -999em;} #hd-sch-mo2-pop .close:after{position: absolute;top: 0;left: 0;width: 100%;line-height: 55px;display: block;content: '\f1b5';font-family: axicon;color: var(--search-close-txt-color);font-size: 18px;text-indent: 0;} #pop_sch_wrap {position: fixed;z-index: 220;top: 0;left: 0;width: 100%;height: 100%;box-sizing: border-box;overflow: hidden;background: #fff;display: flex;flex-direction: column;} #pop_sch_wrap .pop_sch_head {display: flex;align-items: end;flex-direction: column;padding: 15px;} #pop_sch_wrap .pop_sch_head .his_back {border: 0px;background: none;padding: 0;margin-bottom: 10px;} #pop_sch_wrap #hd-sch {display: block;position: relative;top: auto;left: auto;transform: translate(0, 0);width: 100%;} #pop_sch_wrap #hd-sch fieldset {display: block;width: 100%;padding-right: 50px;height: 39px;} #pop_sch_wrap #hd-sch fieldset .inp {padding: 0 0 0 18px;height: 100%;} #pop_sch_wrap #hd-sch fieldset .sbm {height: 100%;width: 50px;font-size: 18px;} #pop_sch_wrap .pop_sch_body {padding: 25px 15px 15px;flex-grow: 1;flex-flow: 0;overflow: hidden;overflow-y: auto;} #pop_sch_wrap .pop_sch_body h3 {display: block;margin-bottom: 10px;font-size: 16px;color: #333;font-weight: 700;letter-spacing: -0.04em;} #pop_sch_wrap .sale-list .list ul {margin: 0 -10px;} #pop_sch_wrap .sale-list .list ul li {margin: 0 10px;width: calc(100%/3 - 20px);} .ranking_list > li {display: flex;align-items: center;justify-content: space-between;padding: 0 0 0 40px;height: 40px;position: relative;font-size: 17px;} .ranking_list > li + li {border-top: 1px solid #ddd;} .ranking_list > li > em {width: 35px;line-height: 40px;font-style: normal;text-align: center;position: absolute;top: 0;left: 0;font-family: 'Open Sans';font-size: inherit;color: #222222;font-weight: 700;} .ranking_list > li > a {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 70%;font-size: 15px;color: #222;} .ranking_list > li > span {width: 40px;text-align: center;font-size: inherit;font-size: 24px;color: #222;} .ranking_list > li > span.colRed, .ranking_list > li > span.colBlue {font-size: 13px;} .ranking_list > li.li_1 > em {color: #ff9d03;} .ranking_list > li.li_2 > em {color: #929292;} .ranking_list > li.li_3 > em {color: #b48230;} #autocomplete_wrap {display: none;position: absolute;top: 50px;left: 50%;z-index: 22;transform: translateX(-50%);width: 440px;height: 300px;background: #fff;border: 2px solid var(--point-color1);box-sizing: border-box;border-radius: 10px;overflow: hidden;} #autocomplete_wrap.on {display: block;} #autocomplete_wrap .sch_list {height: 100%;overflow-x: hidden;max-height: 35vh;overflow-y: scroll;} .sch_list > li {position: relative;padding: 15px;padding-left: 90px;min-height: 100px;display: flex;align-items: center;} .sch_list > li + li {border-top: 1px solid #ddd;} .sch_list > li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} .sch_list > li .tmb {width: 60px;height: 60px;border: 1px solid #ddd;background-color: #fff;background-repeat: no-repeat;background-position: center center;background-size: contain;position: absolute;top: 50%;left: 15px;margin-top: -30px;} .sch_list > li .inf > * {display: block;margin: 3px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .sch_list > li .inf > em {font-style: normal;font-size: 12px;} .sch_list > li .inf > strong {font-size: 13px;color: #000;font-weight: 500;} .sch_list > li .inf > p {font-size: 0;font-family: 'empty';} .sch_list > li .inf > p del {font-size: 13px;margin-right: 10px;} .sch_list > li .inf > p strong {font-size: 14px;color: #000;font-weight: 600;} .sch_list > li:hover {background-color: #f8f8f8;} #footer{background: #222222;} #footer .fnbWrap .inner{position: relative;width: 1200px;margin: 0 auto; padding: 60px 240px; text-align: center;} #footer .ftWrap{position: relative;width: 1200px;margin: 0 auto;padding: 50px 0;} #footer address{margin: 25px 0; font-size: 13px;line-height: 28px;color: #bbbbbb;font-style: normal;} #footer address a {font-size: inherit;color: inherit;} #footer address hr{width: 20px;border: none;display: inline-block;vertical-align: middle;} #footer .copyright{display: block;font-size: 13px;line-height: 60px;color: #ffffff; background: #111111; text-align: center} #footer .fnbWrap dl {position: absolute; top: 60px} #footer .fnbWrap .csbox {left: 0; width: 245px;} #footer .fnbWrap .bankbox {right: 0; width: 265px} #footer .fnbWrap dl > * {color: #fff} #footer .fnbWrap dl dt {margin-bottom: 20px; font-size: 16px; line-height: 24px} #footer .fnbWrap dl dd {} #footer .fnbWrap dl dd .big {font-weight: 500; font-size: 22px; line-height: 30px; color: #fff; text-decoration: none} #footer .fnbWrap dl dd p {margin-top: 10px; font-size: 13px; line-height: 22px; color: #cccccc} #sns-ico{margin-top: 20px;} #sns-ico li{display: inline-block;margin: 0 10px} #leftBanner {position: fixed;z-index: -89;top: 200px;left: 130px; opacity: 0; transition: all .3s ease} #leftBanner.down {opacity: 1;z-index: 89;} #leftBanner .link {display: block;position: relative;} #leftBanner .link img {border-radius: 16px} #leftBanner .mark_ad_wrap {right: auto;left: 10px;} #leftBanner .mark_ad_wrap .txt_box {right: auto;left: 0;} #leftBanner .close {position: absolute; top: 10px; right: 10px} .scrollBtn {width: 36px; margin: 0 auto; margin-top: 20px; text-align: center} .scrollBtn a {display: block; width: 36px; height: 36px} .scrollBtn #gotop {background: #333 url('../images/layout/quick_top_ico.png') no-repeat center top 17px; border-radius: 18px 18px 0 0} .scrollBtn #gobot {background: #333 url('../images/layout/quick_down_ico.png') no-repeat center bottom 17px; border-radius: 0 0 18px 18px} #fnb > li{position: relative; display: inline-block;padding: 0 15px} #fnb > li:not(:first-child):before {content: ''; position: absolute; top: 5px; left: 0; width: 1px; height: 10px; background: #999999} #fnb > li a{font-size: 14px;color: #fff} #ft-fam{position: absolute;top: 35px;right: 0;width: 230px;height: 40px;} #ft-fam > a{display: block;line-height: 40px;padding: 0 15px;border: 1px solid #444444;font-size: 15px;color: #aaaaaa;text-decoration: none;background: url('../images/layout/ft-family-spr.png') no-repeat 92% center;} #ft-fam ul{position: absolute;bottom: 40px;left: 0;display: none;width: 100%;padding: 5px 15px;background: #444444;box-sizing: border-box;} #ft-fam ul li{border-top: 1px solid #575757;} #ft-fam ul li:first-child{border-top: none;} #ft-fam ul li a{display: block;line-height: 35px;color: #f7f7f7;text-align: center;} #ft-fam:hover ul{display: block;} #slide-btn{display: none; text-indent: -999em;width: 30px;height: 20px;position: absolute;bottom: 35px;right: 0;z-index: 91;} #slide-btn button{position: absolute;top: 28px;left: 0;width: 100%;height: 100%;border: none;background: none;cursor: pointer;outline: none;} #slide-btn button span, #slide-btn button:before, #slide-btn button:after{border-radius: 2px;overflow: hidden;position: absolute;left: 0;width: 100%;height: 2px;background: #282828;} #slide-btn button span{display: block;top: 50%;margin-top: -1px;opacity: 1;transition: all 0.3s;} #slide-btn button:before{content: '';display: block;top: 0;transition: all 0.3s;} #slide-btn button:after{content: '';display: block;bottom: 0;transition: all 0.3s;} #slide-btn button.on span{opacity: 0;} #slide-btn button.on:before{top: 50%;margin-top: -1px;transform: rotate(45deg);} #slide-btn button.on:after{bottom: 50%;margin-bottom: -1px;transform: rotate(-45deg);} #slide-bg{display: none;} #slide-menu{display: none;} #sns_btns {display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 15px;} #sns_btns > li {margin-top: 5px;} #sns_btns > li img {min-width: 40px;} #hd-cate {position: absolute; top: auto; left: 0; width: 100%; z-index: 99; display: none;} #hd-cate .inner {position: relative; max-width: 1200px; margin: 0 auto; padding-right: 430px; box-sizing: border-box;overflow: hidden;} #hd-cate .category {position: relative;z-index: 1;width: 100%; height: 600px; background: #fff;} #hd-cate .category:before {display: block;content: '';position: absolute;top: 0;bottom: 0;right: 0;left: 240px;background: #fff;z-index: -1;border-left: 1px solid #ddd;} #hd-cate .category dl {position: relative;width: 100%; height: 100%;overflow: hidden;overflow-y: auto;} #hd-cate .category dl::-webkit-scrollbar {width: 8px;background: #f7f7f7;} #hd-cate .category dl::-webkit-scrollbar-thumb {background-color: #363e4f;border-radius: 8px;} #hd-cate .category dl dd {width: 240px;} #hd-cate .category dl dd:first-child {padding-top: 15px} #hd-cate .category dl dd:last-child {padding-bottom: 15px} #hd-cate .category dl dd > a {display: block; padding: 3px 25px; font-size: 14px; line-height: 21px; color: #999; box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} #hd-cate .category dl dd.active > a {color: var(--point-color1);font-weight: 500; background: url('../images/layout/hd_all_menu1_ico.png') no-repeat right 25px center} #hd-cate .category dl dd > .list {position: absolute; top: 0; left: 240px; width: 530px; padding: 29px 35px; background: #fff;border-left: 1px solid #ddd; display: none; box-sizing: border-box} #hd-cate .category dl dd.active > .list {display: block;} #hd-cate .category dl dd > .list .scroll {min-height: 540px} #hd-cate .category dl dd > .list .tit {display: block;padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #ddd; font-weight: bold; font-size: 20px; line-height: 30px; color: #333333} #hd-cate .category dl dd > .list .box {width: 225px} #hd-cate .category dl dd > .list .box > a {display: block; padding-right: 40px; font-size: 14px; line-height: 40px; color: #555555} #hd-cate .category dl dd > .list .box.active > a {font-weight: 500; color: var(--point-color1); background: url('../images/layout/hd_all_menu2_ico.png') no-repeat right center} #hd-cate .category dl dd > .list .box > ul {position: absolute; top: 90px; right: 0; width: 265px;z-index: 1} #hd-cate .category dl dd > .list .box > ul li a {display: block; font-size: 14px; line-height: 40px; color: #555} #hd-cate .category dl dt {width: 190px;margin: 15px 25px 0;font-size: 16px;color: #222;line-height: 40px;font-weight: 700;letter-spacing: -1px;} #hd-cate .category dl dd + dt {border-top: 1px solid #ddd;padding: 10px 0 0;} #hd-cate .banner {position: absolute; top: 0; right: 0} #hd-cate .banner ul li {position: relative;} #hd-cate .banner ul li img {vertical-align: top} /************************************************** Ajax Popup **************************************************/ #popup{position: fixed;top: 50%;left: 50%;width: 600px;height: 500px;margin-top: -250px;margin-left: -300px;padding-top: 46px;z-index: 301;background: #fff;border-radius: 5px;overflow: hidden;box-sizing: border-box;opacity: 0;transition: all 0.3s;box-shadow: 0 0 10px rgba(0,0,0,0.1);} #popup .pop-tit{position: absolute;top: 0;left: 0;width: 100%;height: 45px;background: #f7f7f7;padding: 0 15px;border-bottom: 1px solid #ddd;box-sizing: border-box;} #popup .pop-tit h3{font-size: 15px;color: #000;font-weight: 500;line-height: 45px;} #popup .pop-tit .close{display: block;position: absolute;top: 0;right: 0;width: 44px;height: 44px;line-height: 44px;text-align: center;font-size: 16px;color: #666;background: #eee;border-left: 1px solid #ddd;} #popup .pop-wrap{height: 100%;overflow-y: auto;padding: 15px;box-sizing: border-box;} #popup.on{opacity: 1;} #popupBG{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 300;background: rgba(0,0,0,0.5);opacity: 0;transition: all 0.3s;} #popupBG.on{opacity: 1;} /* sitemap */ #popup .sitemap{ text-align: center; } #popup .sitemap > li{display: inline-block;width: 32%;vertical-align: top;margin-bottom: 10px;} #popup .sitemap > li > a{display: block;text-align: center;font-size: 14px;letter-spacing: -1px;background: #f7f7f7;font-weight: 500;line-height: 40px;border-radius: 3px;} #popup .sitemap > li ul li{border-top: 1px solid #f7f7f7;text-align: left;} #popup .sitemap > li ul li:first-child{border-top: none;} #popup .sitemap > li ul li a{display: block;font-size: 13px;color: #333;line-height: 18px;padding: 10px 0;text-align: center;} /************************************************** Multi ajax popup **************************************************/ .layer-ajaxpop{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);padding-top: 60px;z-index: 301;background: #fff;overflow: hidden;box-sizing: border-box;opacity: 0;box-shadow: 0 0 10px rgba(0,0,0,0.1);max-height: calc(100% - 40px);} .layer-ajaxpop .pop-tit{position: absolute;top: 0;left: 0;width: 100%;height: 60px;background: #fff;padding: 0 20px;border-bottom: 1px solid #ddd;box-sizing: border-box;box-shadow: 0 0 3px rgba(0,0,0,0.1);} .layer-ajaxpop .pop-tit h3{font-size: 16px;color: #000;font-weight: bold;line-height: 60px;} .layer-ajaxpop .pop-tit .close{display: block;position: absolute;top: 0;right: 0;width: 60px;height: 60px;line-height: 60px;text-align: center;color: #666;border-left: 1px solid #ddd;text-indent: -999em;} .layer-ajaxpop .pop-tit .close:after{content: '\f1b5';display: block;position: absolute;top: 0;left: 0;width: 100%;line-height: 60px;text-align: center;font-size: 16px;color: #333;font-family: axicon;text-indent: 0;} .layer-ajaxpop .pop-wrap{height: 100%;overflow-y: auto;padding: 20px;box-sizing: border-box;} .layer-ajaxpop.on{opacity: 1;} .layer-ajaxpopBG{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 300;background: rgba(0,0,0,0.5);opacity: 0;} .layer-ajaxpopBG.on{opacity: 1;} #popup-pop1 .pop-tit .btn4 {position: absolute;top: 50%;right: 70px;transform: translateY(-50%);height: 35px;line-height: 33px;padding-left: 10px;padding-right: 10px;font-size: 13px;border-radius: 3px;} #popup-pop1 .pop-wrap {padding: 0;} #popup-pop1 .bomWrap .list {margin-right: 0;width: 100%;} #popup-pop1 .bomWrap .list .box {border: 0px;} #popup-pop1 .bomWrap .list .box .scroll {height: auto;overflow: auto;} #popup-pop1 #bomSearch {background: none;position: static;width: auto;height: auto;padding: 20px;} #popup-pop1 #bomSearch .wrap {position: relative;top: auto;left: auto;transform: translate(0,0);width: auto;box-shadow: 0 0 0 rgba(0,0,0,0.1);border-radius: 0;} #popup-pop1 #bomSearch .wrap .pbody .srchbar {padding: 0;margin-bottom: 15px;display: flex;justify-content: center;align-items: center;} #popup-pop1 #bomSearch .wrap .pbody .srchbar > dl {padding: 0;} #popup-pop1 #bomSearch .wrap .pbody .srchbar > dl > dt {display: none;} #popup-pop1 #bomSearch .btn1.small, #popup-pop1 #bomSearch .btn2.small, #popup-pop1 #bomSearch .btn3.small, #popup-pop1 #bomSearch .btn4.small {height: 25px;line-height: 23px;padding-left: 8px;padding-right: 8px;border-radius: 3px;font-size: 12px;letter-spacing: -1px;} #popup-card1 {padding-top: 0;} #popup-card1 .pop-tit {height: 0;border: 0px;} #popup-card1 .pop-tit .close {height: 40px;width: 40px;line-height: 40px;padding: 0;border: 0px;background: rgba(0, 0, 0, 0.42);z-index: 2;} #popup-card1 .pop-tit .close:after {line-height: inherit;color: #fff;} #popup-card1 .pop-wrap {padding: 0;} .pop_point_wrap {padding: 20px;} @media screen and (max-width: 1200px) { .layer-ajaxpopBG{z-index: 300;} .layer-ajaxpop{top: 50%;left: 20px;transform: translate(0, -50%);padding-top: 50px;width: calc(100% - 40px) !important;height: auto !important;} .layer-ajaxpop .pop-tit{height: 50px;} .layer-ajaxpop .pop-tit h3{font-size: 14px;line-height: 50px;} .layer-ajaxpop .pop-tit .close{width: 50px;height: 50px;line-height: 50px;} .layer-ajaxpop .pop-tit .close:after{line-height: 50px;font-size: 14px;} .layer-ajaxpop .pop-wrap{height: auto;max-height: calc(100vh - 90px);} .pop_point_wrap {padding: 10px;} } /************************************************** Main **************************************************/ #main #mainWrap{position: relative;width: 1200px;margin: 70px auto 120px} #main .visual{position: relative;} #main .visual .roll .item{position: relative;overflow: hidden;} #main .visual .roll .item img{position: relative;top: 0;left: 50%;transform: translateX(-50%);min-width: 100%;} #main .visual .slick-dots{position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 81;text-align: center;} #main .visual .slick-dots li{display: inline-block;margin: 0 5px;} #main .visual .slick-dots li button{display: block;width: 24px;height: 24px;background: url('../images/main/visual-bull.png') no-repeat center center / contain;text-indent: -999em;overflow: hidden;border: none;} #main .visual .slick-dots li.slick-active button{background-image: url('../images/main/visual-bull-on.png');} #main .visual .controls {position: absolute; bottom: 35px; right: 360px; z-index: 10} #main .visual .controls > * {display: inline-block; vertical-align: top; background: rgba(0,0,0,0.35); border-radius: 18px} #main .visual .controls .wrap {margin-left: 5px; padding: 0 15px 0 16px; font-size: 0} #main .visual .controls .wrap > * {display: inline-block; vertical-align: top} #main .visual .controls .wrap .numb span {display: inline-block; vertical-align: top; font-size: 14px; color: rgba(255,255,255,1); line-height: 36px} #main .visual .controls .wrap .numb span.lt {color: #fff} #main .visual .controls .wrap .arrow {margin-left: 15px; font-size: 0} #main .visual .controls .wrap .arrow a {position: relative; display: inline-block; vertical-align: top; width: 13px; height: 36px; line-height: 36px} #main .visual .controls .wrap .arrow .prev {background: url('../images/main/vis_prev_arrow.png') no-repeat left center} #main .visual .controls .wrap .arrow .next {background: url('../images/main/vis_next_arrow.png') no-repeat right center} #main .visual .controls .btns {width: 36px; height: 36px;} #main .visual .controls .btns a {display: inline-block; width: 100%; height: 100%; text-indent: -999em; cursor: pointer} #main .visual .controls .btns a.play {background: url('../images/main/vis_play_ico.png') no-repeat center} #main .visual .controls .btns a.pause {background: url('../images/main/vis_pause_ico.png') no-repeat center} #main .visual .controls .btns a.play.off {display: none} #main .visual .controls .btns a.play.on {display: block} #main .visual .controls .btns a.pause.off {display: none} #main .visual .controls .btns a.pause.on {display: block} #mainWrap .title {position: relative; margin-bottom: 35px} #mainWrap .title > * {display: inline-block; vertical-align: top} #mainWrap .title h5 {font-size: 36px; line-height: 44px; color: #222222} #mainWrap .title em {margin-left: 20px; font-style: normal; font-size: 17px; line-height: 44px; color: #444444; letter-spacing: -0.5px} #mainWrap .title a {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 115px; height: 34px; border: 2px solid #ddd; border-radius: 17px; box-sizing: border-box; text-align: center} #mainWrap .title a span {display: inline-block; vertical-align: top; padding-right: 15px; font-size: 13px; line-height: 30px; color: #666666; letter-spacing: -0.5px; background: url('../images/main/main_more_ico.png') no-repeat right center} #mainWrap .title button[type=button] {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 140px; height: 34px; border: 2px solid #ddd; border-radius: 17px; box-sizing: border-box; text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-size: 13px;line-height: 30px;letter-spacing: -0.5px;background: none;} #mainWrap .title button[type=button] i {margin-left: 2px;font-size: 15px;transform: scaleY(-1);} #mainWrap .title button[type=button].on i {transform: scaleY(1);} #main .banner {margin-top: 80px} #main .banner .roll .item {position: relative;} #main .banner .roll .item > a {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;} #main .banner .roll .item .thumb {padding-bottom: 15%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .banner .roll .slick-arrow {position: absolute; bottom: 0; width: 38px; height: 40px; border: 0; text-indent: -999em; z-index: 33;} #main .banner .roll .slick-prev {right: 38px; border-radius: 12px 0 0 0; background: rgba(0,0,0,0.3) url('../images/main/vis_prev_arrow.png') no-repeat left 18px center} #main .banner .roll .slick-next {right: 0; border-radius: 0 0 12px 0; background: rgba(0,0,0,0.3) url('../images/main/vis_next_arrow.png') no-repeat right 18px center} #main .banner .roll .slick-next:before {content: ''; position: absolute; top: 50%; left: -1px; transform: translateY(-50%); width: 1px; height: 10px; background: rgba(255,255,255,0.5)} #main .section01 ul {display: flex; flex-flow: row wrap; margin: 0 -11px} #main .section01 ul li {width: calc(100% / 4 - 22px); margin: 0 11px;position: relative;} #main .section01 ul li a {display: block;} #main .section01 ul li img {margin: 0 auto;display: block;} #main .section02 {margin-top: 37px} #main .section02 .roll {margin: 0 -15px} #main .section02 .roll .item {position: relative; margin: 0 15px; border-radius: 12px; overflow: hidden} #main .section02 .roll .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section02 .roll .slick-dots {margin-top: 40px; text-align: center} #main .section02 .roll .slick-dots li {display: inline-block; vertical-align: top; height: 10px; margin: 0 5px; font-size: 0} #main .section02 .roll .slick-dots li button {width: 10px; height: 10px; border: 0; text-indent: -999em; background: #dddddd; border-radius: 50%} #main .section02 .roll .slick-dots li.slick-active button {background: var(--point-color1)} #main .section03 {margin-top: 80px} #main .section03 .title {margin-bottom: 20px;} #main .section03 .ajaxWrap {position: relative} /* #main .section03 .ajaxBtn {position: absolute; bottom: 100%;margin-bottom: 40px;right: 160px;max-width: 65%;display: flex;justify-content: end;align-items: center;flex-wrap: wrap;} */ #main .section03 .ajaxBtn {margin-bottom: 35px;display: flex;align-items: center;flex-wrap: wrap;} #main .section03 .ajaxBtn a {margin: 5px 0;margin-left: 30px; font-weight: 500; font-size: 16px; line-height: 24px; color: #666666; letter-spacing: -0.5px; text-decoration: none} #main .section03 .ajaxBtn a.active {position: relative; color: #333333} #main .section03 .ajaxBtn a.active:after {content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: #333} #main .section03 .ajaxCont .roll .item {display: flex; flex-flow: row wrap} #main .section03 .ajaxCont .roll .item > * {box-sizing: border-box} #main .section03 .ajaxCont .roll .item dt {position: relative; width: calc(50% - 15px)} #main .section03 .ajaxCont .roll .item dt .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;} #main .section03 .ajaxCont .roll .item dt .thumb {padding-bottom: 61.55%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section03 .ajaxCont .roll .item dd {width: calc(50% + 15px); padding-left: 45px} #main .section03 .ajaxCont .roll .item dd ul {display: flex; flex-flow: row wrap; border-top: 2px solid #333333; border-bottom: 1px solid #ddd} #main .section03 .ajaxCont .roll .item dd ul li {position: relative; width: 50%; padding: 40px 0; font-size: 0; padding: 39px 0; } #main .section03 .ajaxCont .roll .item dd ul li:nth-child(-n+2) {border-bottom: 1px solid #ddd} #main .section03 .ajaxCont .roll .item dd ul li > * {display: inline-block; vertical-align: middle} #main .section03 .ajaxCont .roll .item dd ul li .btn-heart {bottom: 0;right: 0;} #main .section03 .ajaxCont .roll .item dd ul li .tmb {width: 100px; padding-bottom: 100px; background-size: cover; background-repeat: no-repeat; background-position: center;position: relative;} #main .section03 .ajaxCont .roll .item dd ul li .mid {width: calc(100% - 100px); padding: 0 15px 0 25px; box-sizing: border-box;} #main .section03 .ajaxCont .roll .item dd ul li .mid > span {margin-bottom: 2px;} #main .section03 .ajaxCont .roll .item dd ul li span {display: inline-block; vertical-align: top; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} #main .section03 .ajaxCont .roll .item dd ul li span.rec {background: #df0076} #main .section03 .ajaxCont .roll .item dd ul li span.hot {background: #0071bb} #main .section03 .ajaxCont .roll .item dd ul li span.new {background: #12b2bf} #main .section03 .ajaxCont .roll .item dd ul li h6 {margin: 2px 0 5px; font-size: 18px; line-height: 30px; color: #333333; min-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block; } #main .section03 .ajaxCont .roll .item dd ul li p {font-size: 14px; line-height: 22px; color: #333333; min-height: 22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block; } #main .section03 .ajaxCont .roll .item dd ul li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;} #main .section03 .ajaxCont .roll .slick-dots {margin-top: 40px; text-align: center; display: none;} #main .section03 .ajaxCont .roll .slick-dots li {display: inline-block; vertical-align: top; height: 10px; margin: 0 5px; font-size: 0} #main .section03 .ajaxCont .roll .slick-dots li button {width: 10px; height: 10px; border: 0; text-indent: -999em; background: #dddddd; border-radius: 50%} #main .section03 .ajaxCont .roll .slick-dots li.slick-active button {background: var(--point-color1)} #main .section04 {margin: 100px 0} #main .section04 .roll {margin: -6px} #main .section04 .roll .slick-slide {margin: 6px} #main .section04 .roll .slick-slide div {border: 1px solid #ddd; border-radius: 12px; box-sizing: border-box; overflow: hidden; font-size: 0} #main .section04 .roll .slick-slide div:nth-child(even) {margin-top: 12px} #main .section04 .roll .slick-slide div img {width: 100%; vertical-align: top} #main .section04 .roll .slick-dots {margin-top: 40px; text-align: center} #main .section04 .roll .slick-dots li {display: inline-block; vertical-align: top; height: 10px; margin: 0 5px; font-size: 0} #main .section04 .roll .slick-dots li button {width: 10px; height: 10px; border: 0; text-indent: -999em; background: #dddddd; border-radius: 50%} #main .section04 .roll .slick-dots li.slick-active button {background: var(--point-color1)} #main .section05 {position: relative; padding: 50px 0;} #main .section05:before {content: ''; position: absolute; top: 0; left: 50%; width: 1920px; height: 100%; margin-left: -960px; background: var(--point-color3); z-index: -1} #main .section05 dl {display: flex; flex-flow: row wrap} #main .section05 dl > * {} #main .section05 dl dt {width: 250px; margin-right: 55px; padding-top: 45px; border-top: 3px solid #222} #main .section05 dl dt h5 {font-size: 36px; line-height: 52px; color: #222222} #main .section05 dl dt p {margin: 15px 0 25px; font-size: 17px; line-height: 26px; color: #444444} #main .section05 dl dt .more {display: inline-block; vertical-align: top; width: 115px; height: 34px; border-radius: 17px; box-sizing: border-box; text-align: center; background: #fff} #main .section05 dl dt .more span {display: inline-block; vertical-align: top; padding-right: 15px; font-size: 13px; line-height: 34px; color: #666666; letter-spacing: -0.5px; background: url('../images/main/main_more_ico.png') no-repeat right center} #main .section05 dl dt .arrow {margin-top: 60px; font-size: 0} #main .section05 dl dt .arrow a {position: relative; display: inline-block; vertical-align: top; width: 40px; height: 20px} #main .section05 dl dt .arrow .prev {background: url('../images/main/main_prev_arrow.png') no-repeat left center} #main .section05 dl dt .arrow .prev:after {content: ''; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); width: 1px; height: 15px; background: #ccc} #main .section05 dl dt .arrow .next {background: url('../images/main/main_next_arrow.png') no-repeat right center} #main .section05 dl dd {width: calc(100% - 305px)} #main .section05 dl dd .roll {margin: 0 -13px} #main .section05 dl dd .roll .item {position: relative; margin: 0 13px} #main .section05 dl dd .roll .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section05 dl dd .roll .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section05 dl dd .roll .item .thumb .numb {position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px 0 12px 0; font-weight: bold; font-size: 17px; line-height: 40px; text-align: center; color: #fff; background: var(--point-color2)} #main .section05 dl dd .roll .item .thumb .numb.first {background: #df0076} #main .section05 dl dd .roll .item .info {margin-top: 20px} #main .section05 dl dd .roll .item .info .cate {font-size: 13px; line-height: 21px; color: #666666} #main .section05 dl dd .roll .item .info h6 {margin: 5px 0 10px; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} #main .section05 dl dd .roll .item .info .cost > * {line-height: 30px} #main .section05 dl dd .roll .item .info .cost del {font-size: 14px; color: #888888} #main .section05 dl dd .roll .item .info .cost strong {font-size: 18px; color: #333333} #main .section05 dl dd .roll .item .info .cost strong b {color: #df0076} #main .section05 dl dd .roll .item .info .cost strong span {font-weight: normal; font-size: 15px; color: inherit} #main .section05 dl dd .roll .item .info .stt {margin-top: 12px; font-size: 0} #main .section05 dl dd .roll .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} #main .section05 dl dd .roll .item .info .stt .rec {background: #df0076} #main .section05 dl dd .roll .item .info .stt .hot {background: #0071bb} #main .section05 dl dd .roll .item .info .stt .new {background: #12b2bf} #main .section06 {margin-top: 80px} #main .section06 .roll {position: relative; margin: 0 -13px} #main .section06 .roll .slick-arrow {position: absolute; top: 130px; width: 13px; height: 20px; border: 0; text-indent: -999em} #main .section06 .roll .slick-prev {left: -50px; background: url('../images/main/main_prev_arrow.png') no-repeat center / contain} #main .section06 .roll .slick-next {right: -50px; background: url('../images/main/main_next_arrow.png') no-repeat center / contain} #main .section06 .roll .item {position: relative; margin: 0 13px} #main .section06 .roll .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section06 .roll .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section06 .roll .item .info {margin-top: 20px} #main .section06 .roll .item .info .cate {font-size: 13px; line-height: 21px; color: #666666} #main .section06 .roll .item .info h6 {margin: 5px 0 10px; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} #main .section06 .roll .item .info .cost > * {line-height: 30px} #main .section06 .roll .item .info .cost del {font-size: 14px; color: #888888} #main .section06 .roll .item .info .cost strong {font-size: 18px; color: #333333} #main .section06 .roll .item .info .stt {margin-top: 12px; font-size: 0} #main .section06 .roll .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} #main .section06 .roll .item .info .stt .rec {background: #df0076} #main .section06 .roll .item .info .stt .hot {background: #0071bb} #main .section06 .roll .item .info .stt .new {background: #12b2bf} #main .section07 {margin-top: 90px} #main .section07 .roll {margin: 0 -15px} #main .section07 .roll .item {position: relative; margin: 0 15px} #main .section07 .roll .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section07 .roll .item .thumb {padding-bottom: 52.64%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section07 .roll .slick-dots {margin-top: 40px; text-align: center} #main .section07 .roll .slick-dots li {display: inline-block; vertical-align: top; height: 10px; margin: 0 5px; font-size: 0} #main .section07 .roll .slick-dots li button {width: 10px; height: 10px; border: 0; text-indent: -999em; background: #dddddd; border-radius: 50%} #main .section07 .roll .slick-dots li.slick-active button {background: var(--point-color1)} #main .section08 {margin-top: 80px} #main .section08 .ajaxBtns {position: relative; margin: 0 -18px;} #main .section08 .ajaxBtns .slick-arrow {position: absolute; top: 45px; width: 13px; height: 20px; border: 0; text-indent: -999em} #main .section08 .ajaxBtns .slick-prev {left: -46px; background: url('../images/main/main_prev_arrow.png') no-repeat center / contain} #main .section08 .ajaxBtns .slick-next {right: -46px; background: url('../images/main/main_next_arrow.png') no-repeat center / contain} #main .section08 .ajaxBtns a {display: block; margin: 0 18px; font-size: 15px; line-height: 23px; color: #555555; letter-spacing: -0.5px; text-align: center; text-decoration: none;word-break: break-all !important;} #main .section08 .ajaxBtns a:hover {} #main .section08 .ajaxBtns a .img {position: relative; display: inline-block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 50%; box-sizing: border-box} #main .section08 .ajaxBtns a.active .img, #main .section08 .ajaxBtns a:hover .img {border-color: var(--point-color2); background: var(--point-color2)} #main .section08 .ajaxBtns a .img img {} #main .section08 .ajaxBtns a .img img.def {} #main .section08 .ajaxBtns a .img img.act {position: absolute; top: 0; left: 0; opacity: 0} #main .section08 .ajaxBtns a.active .img img.def, #main .section08 .ajaxBtns a:hover .img img.def {opacity: 0} #main .section08 .ajaxBtns a.active .img img.act, #main .section08 .ajaxBtns a:hover .img img.act {opacity: 1} #main .section08 .ajaxBtns a.active {} #main .section08 .ajaxcnt {margin-top: 55px} #main .section08 .ajaxcnt dl {display: flex; flex-flow: row wrap} #main .section08 .ajaxcnt dl > * {} #main .section08 .ajaxcnt dl dt {position: relative; width: calc(50% - 160px); margin-right: 40px; box-sizing: border-box} #main .section08 .ajaxcnt dl dt .link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section08 .ajaxcnt dl dt .thumb {padding-bottom: 139%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section08 .ajaxcnt dl dd {width: calc(50% + 120px)} #main .section08 .ajaxcnt dl dd ul {display: flex; flex-flow: row wrap; margin: -15px} #main .section08 .ajaxcnt dl dd ul li {position: relative; width: calc(100% / 3 - 30px); margin: 15px} #main .section08 .ajaxcnt dl dd ul li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} #main .section08 .ajaxcnt dl dd ul li .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} #main .section08 .ajaxcnt dl dd ul li .info {margin-top: 20px} #main .section08 .ajaxcnt dl dd ul li .info h6 {margin: 5px 0; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;} #main .section08 .ajaxcnt dl dd ul li .info .cost {} #main .section08 .ajaxcnt dl dd ul li .info .cost > * {line-height: 28px} #main .section08 .ajaxcnt dl dd ul li .info .cost del {font-size: 14px; color: #888888} #main .section08 .ajaxcnt dl dd ul li .info .cost strong {font-size: 18px; color: #333333} #main .section08 .ajaxcnt dl dd ul li .info .stt {margin-top: 12px; font-size: 0} #main .section08 .ajaxcnt dl dd ul li .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} #main .section08 .ajaxcnt dl dd ul li .info .stt .rec {background: #df0076} #main .section08 .ajaxcnt dl dd ul li .info .stt .hot {background: #0071bb} #main .section08 .ajaxcnt dl dd ul li .info .stt .new {background: #12b2bf} #main .section09 {display: flex; flex-flow: row wrap; margin: 0 -40px; margin-top: 100px} #main .section09 .brd {width: calc(50% - 80px); margin: 0 40px; padding-top: 30px; border-top: 3px solid #333333} #main .section09 .brd.right {position: relative} #main .section09 .brd dt {position: relative; margin-bottom: 30px; font-weight: bold; font-size: 24px; line-height: 32px; color: #333} #main .section09 .brd dt a {position: absolute; top: 0; right: 0; display: inline-block; vertical-align: top; padding-right: 15px; font-weight: normal; font-size: 13px; line-height: 32px; color: #666666; letter-spacing: -0.5px; background: url('../images/main/main_more_ico.png') no-repeat right center} #main .section09 .brd dd a.link {position: relative; display: block; font-size: 14px; line-height: 30px; text-decoration: none} #main .section09 .brd dd a.link:not(:last-child) {margin-bottom: 10px} #main .section09 .brd dd a.link > * {line-height: 30px} #main .section09 .brd dd a.link p {padding-right: 100px; font-size: 14px; color: #555555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} #main .section09 .brd dd a.link span {position: absolute; top: 0; right: 0; color: #999999} #main .section09 .brd dd a.tel {display: inline-block; padding-left: 30px; font-weight: bold; font-size: 30px; line-height: 36px; color: #222; background: url('../images/main/main_cs_ico.png') no-repeat left center; text-decoration: none} #main .section09 .brd dd > p {margin-top: 20px; font-size: 15px; line-height: 28px; color: #666} #main .section09 .brd dd > p strong {font-weight: normal} #main .section09 .brd dd .bttn {position: absolute; bottom: 0; right: 0; width: 180px} #main .section09 .brd dd .bttn a {display: block; height: 44px; margin-top: 10px; font-size: 15px; line-height: 42px; color: #333333; letter-spacing: -0.5px; text-decoration: none; border: 1px solid #666666; border-radius: 4px; text-align: center} #main .section10 {margin-top: 50px;} #main .section10 .inr {max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;} #main .section10 dl {width:calc(50% - 15px);} #main .section10 dl > dt {display: flex;justify-content: space-between;align-items: center;} #main .section10 dl > dt > h3 {font-size:36px; line-height:44px;color:#222;} #main .section10 dl > dt > a:not(.more) {font-size:17px; line-height:32px; color:#444; } #main .section10 .bd_list2 {margin-top:-10px; border-top:2px solid #333;} #main .section10 .bd_list2 li {padding: 2px 5px;border-bottom:1px solid #ddd;position: relative;z-index: 0;overflow: hidden;display: flex;justify-content: space-between;align-items: center;} #main .section10 .bd_list2 li .link {position: absolute;z-index: 11;inset: 0;} #main .section10 .bd_list2 li .lef {width: 100%;} #main .section10 .bd_list2 li .rig {max-width: 150px;display: flex;justify-content: end;align-items: center;flex-wrap: wrap;} #main .section10 .bd_list2 li strong {font-size:19px; color:#333; font-weight:600; line-height:30px;height:30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;max-width: 400px;} #main .section10 .bd_list2 li .dt {margin-top: 9px;display: flex;align-items: center;flex-wrap: wrap;} #main .section10 .bd_list2 li .dt hr {width: 1px;height: 10px;background: #ddd;margin: 0 10px;border: none;} #main .section10 .bd_list2 li .dt span {font-size:14px; color:#888; font-weight:normal; font-family: 'Play'; } #main .section10 .bd_list2 li mark {min-width: 100px; height: 35px;line-height:35px; border-radius: 18px; text-align:center; font-size:14px; font-weight:600;font-family: 'Open Sans'; color:#fff; background:#0071bb;} .allcate > dl {margin-top: 30px;} .allcate > dl > dt {margin-bottom: 20px;font-weight: bold; font-size: 24px; line-height: 32px; color: #333;} /************************************************** Sub **************************************************/ #sub {position: relative;} #sub #content{ position: relative;width: 1200px;margin: 0 auto;padding: 80px 0} #sub #content.my {display: flex; flex-flow: row wrap} #sub #content.my .myCate {width: 220px; margin-right: 50px} #sub #content.my .cont {width: 930px} #lnb_wrap {display: flex;flex-flow: row wrap;flex-wrap: wrap;} #lnb_wrap .rig {width: 930px} #lnb_wrap .lef {width: 220px; margin-right: 50px;border-top: 2px solid #222;} #lnb_wrap .lef legend {display: none;} #lnb_wrap .lef .stit > h3 > strong {font-size: 20px;} #lnb_wrap .lef .sbm {margin-top: 10px;height: 44px;border: 0px;background: #333;font-size: 15px;color: #fff;border-radius: 5px;width: 100%;} #lnb_wrap .cate_ico {margin-bottom: -18px;} #lnb_wrap .cate_ico a {width: calc(100%/7 - 36px);} #lnb_wrap .lnb_group {padding: 20px 0;} #lnb_wrap .lnb_group > dt {font-size: 20px;color: #333;font-weight: 700;line-height: 25px;} #lnb_wrap .lnb_group > dd {margin-top: 12px;} #lnb_wrap .lnb_group:not(.lnb_cate) {border-top: 1px solid #ddd;} #lnb_wrap .lnb_group:not(.lnb_cate) > dd:not(.inps_price) {max-height: 170px;overflow-y: auto;} #lnb_wrap .lnb_group:not(.lnb_cate) > dd:not(.inps_price)::-webkit-scrollbar {width: 8px;background: #e5e5e5;} #lnb_wrap .lnb_group:not(.lnb_cate) > dd:not(.inps_price)::-webkit-scrollbar-thumb {background-color: #888888;border-radius: 8px;} #lnb_wrap .lnb_group > dd.inps_price {border: 1px solid #ddd;border-radius: 10px;padding: 20px;margin-top: 20px;display: flex;flex-wrap: wrap;align-items: center;} #lnb_wrap .lnb_group > dd.inps_price h4 {width: 100%;font-size: 16px;color: #333;font-weight: 500;} #lnb_wrap .lnb_group > dd.inps_price input {margin-top: 10px;width: calc(100% - 18px);box-sizing: border-box;border: 1px solid #ddd;padding-left: 10px;height: 40px;} #lnb_wrap .lnb_group > dd.inps_price .hipen {margin-top: 10px;width: 18px;text-align: right;font-size: 16px;color: #333;} #lnb_wrap .lnb_group .labskin + .labskin {margin-top: 7px;} .lnb_cate_list > li > a {display: block;font-size: 15px;color: #555;line-height: 36px;position: relative;} .lnb_cate_list > li > a:after {display: block;content: '\e84e';font-family: 'axicon';position: absolute;top: 50%;right: 0;font-size: 18px;color: #888;transform: translateY(-50%);} .lnb_cate_list > li > ul {display: none;margin: 5px 0 15px;padding: 10px 20px;border-radius: 10px;background: var(--point-color3);} .lnb_cate_list > li > ul > li > a {display: block;font-size: 15px;color: #555;line-height: 30px;} .lnb_cate_list > li.active > a {color: var(--point-color2);} .lnb_cate_list > li.active > a:after {transform: translateY(-50%) scaleY(-1);} .lnb_cate_list > li.active > ul {display: block;} .sub_visual{position: relative;overflow: hidden;border-radius: 10px;margin-bottom: 50px;} .sub_visual .roll .item img{display: block;max-width: 100%;margin-left: auto;margin-right: auto;} .sub_visual .controls {position: absolute; bottom: 30px; right: 30px; z-index: 10} .sub_visual .controls > * {display: inline-block; vertical-align: top; background: rgba(0,0,0,0.35); border-radius: 18px} .sub_visual .controls .wrap {margin-left: 5px; padding: 0 15px 0 16px; font-size: 0; display: none;} .sub_visual .controls .wrap > * {display: inline-block; vertical-align: top} .sub_visual .controls .numb span {display: inline-block; vertical-align: top; font-size: 14px; color: rgba(255,255,255,1); line-height: 36px} .sub_visual .controls .numb span.lt {color: #fff} .sub_visual .controls .arrow {margin-left: 15px; font-size: 0} .sub_visual .controls .arrow button {position: relative; display: inline-block; vertical-align: top; width: 13px; height: 36px; line-height: 36px;border: 0px;} .sub_visual .controls .arrow button.prev {background: url('../images/main/vis_prev_arrow.png') no-repeat left center} .sub_visual .controls .arrow button.next {background: url('../images/main/vis_next_arrow.png') no-repeat right center} #sub .sub-vis{position: relative;height: 240px;overflow: hidden;text-align: center;background-position: center center;background-size: cover;} #sub .sub-vis:before{position: relative;content: '';display: inline-block;vertical-align: middle;width: 0;height: 100%;} #sub .sub-vis h2{display: inline-block;vertical-align: middle;text-align: center;font-size: 35px;color: #fff;letter-spacing: -1px;z-index: 2;} #sub .sub-vis h2 em{display: block;margin-top: 10px;font-style: normal;font-size: 18px;font-weight: normal;} #sub .sub-tit {margin-bottom: 45px} #sub .sub-tit h3 {font-size: 36px; line-height: 44px; color: #333333; letter-spacing: -0.5px; text-align: center} #sub .my .sub-tit {padding-bottom: 20px; margin-bottom: 30px; border-bottom: 2px solid #333} #sub .my .sub-tit h3 {font-size: 26px; line-height: 35px; color: #333} #sub .myCate {} #sub .myCate h5 {margin-bottom: 20px; font-size: 26px; line-height: 35px; color: #333} #sub .myCate > ul {padding: 25px; border: 1px solid #ddd; border-radius: 12px; box-sizing: border-box} #sub .myCate > ul > li {} #sub .myCate > ul > li:not(:last-child) {padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #ddd} #sub .myCate > ul > li > a {font-weight: bold; font-size: 20px; line-height: 30px; color: var(--point-color2); letter-spacing: -0.5px;} #sub .myCate > ul > li > ul {margin-top: 15px} #sub .myCate > ul > li > ul li a {font-size: 15px; line-height: 32px; color: #555555} #sub .myCate > ul > li > ul li.active a {font-weight: 500; color: #333333} #sub .myCate > ul > li > ul li a span {font-weight: bold; font-size: inherit; line-height: inherit; color: var(--point-color2)} .lnbWrap{background: #666666;} #lnb{width: 1200px;margin: 0 auto;} #lnb > li{display: inline-block;vertical-align: top;border-right: 1px solid #999999;box-sizing: border-box;} #lnb > li:first-child{border-left: 1px solid #999999;} #lnb > li a{display: block;line-height: 50px;font-size: 15px;text-decoration: none;text-align: center;color: #fff;} #lnb > li.active a{background: #fff;color: #000;} #status {position: absolute; top: 25px; left: 0; width: 100%;} #status > ul {max-width: 1200px; margin: 0 auto; text-align: right} #status > ul > li{display: inline-block;} #status > ul > li .spr{display: inline-block;vertical-align: middle;margin: 0 10px;color: #999;font-size: 11px;line-height: 11px;} #status > ul > li a{font-size: 13px;color: #999;text-decoration: none;} #status > ul > li:last-child a{color: #000;} #status > ul > li > ul{display: none;} #navigator{border: 1px solid #ddd;border-width: 1px 0 1px 0;} #navigator > ul{width: 1200px;position: relative;margin: 0 auto;border-left: 1px solid #ddd;box-sizing: border-box;background: #fff;} #navigator > ul > li{position: relative;display: inline-block;border-right: 1px solid #ddd;vertical-align: top;z-index: 89;} #navigator > ul > li > a{display: block;min-width: 200px;font-size: 15px;font-weight: 500;color: #333;text-decoration: none;padding: 0 60px 0 15px;line-height: 50px;background: url('../images/layout/ft-family-spr.png') no-repeat 95% center;} #navigator > ul > li:first-child a{min-width: 0;width: 50px;text-align: center;padding: 0;background: #f7f7f7;color: #888;font-size: 20px;} #navigator > ul > li > ul{position: absolute;top: 50px;left: -1px;width: 100%;border: 1px solid #ddd;visibility: hidden;opacity: 0;transition: all 0.2s;} #navigator > ul > li > ul li a{display: block;padding: 12px 15px;font-size: 15px;border-top: 1px solid #ddd;text-decoration: none;transition: all 0.3s;} #navigator > ul > li > ul li:first-child a{border-top: none;} #navigator > ul > li > ul li:hover a{background: #f7f7f7;} #navigator > ul > li.on > ul{background: #fff;visibility: visible;opacity: 1;} #navigator > ul > li > ul li.hidden-gnb{display: none;} /* 약관 내용 출력 박스 */ .policybox{color: #666;font-size: 13px;line-height: 20px;} /* s:shop skin */ #sub .sb-no-data{display: block;background: #f7f7f7;padding: 40px 10px;text-align: center;font-size: 14px;letter-spacing: -1px;color: #999;} #sub .sit_qaa_yet {height: auto;font-size: 14px;} #sub #sqa .sqa_section h2, #sub #sqa .sqa_section h3, #sub #sqa .sqa_section h4 {font-size: 17px;} /* e:shop skin */ .sub-visual {height: 340px; background-size: cover; background-repeat: no-repeat; background-position: center} .sub-visual img {display: none;} .sub-visual .mark_ad_wrap {right: calc(50% - 600px)} .bgGray {background-color: #f8f8f8 !important;} .myWrap .tit {position: relative; margin-bottom: 20px} .myWrap .tit h5 {font-size: 24px; line-height: 34px; color: #333333; letter-spacing: -0.5px} .myWrap .tit p {font-size: 15px; line-height: 25px; color: #555555; letter-spacing: -0.5px;margin-top: 15px;} .myWrap .tit p.bgGray {padding: 15px 20px;border-radius: 5px;margin-top: 5px;} .myWrap .tit a {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 15px; font-size: 13px; line-height: 30px; color: #666666; letter-spacing: -0.5px; background: url('../images/main/main_more_ico.png') no-repeat right center} .myWrap .tit a.down {background-size: 0 0;padding: 0 10px;height: 35px;line-height: 33px;border-color: var(--point-color2);background: var(--point-color2);color: #fff !important;} .myWrap .memBox {padding: 25px 30px; margin-bottom: 45px; background: var(--point-color3); border-radius: 12px} .myWrap .memBox .info {position: relative} .myWrap .memBox .info dt {position: relative} .myWrap .memBox .info dt > * {display: inline-block; vertical-align: middle} .myWrap .memBox .info dt .img {position: absolute; top: 3px; left: 0; width: 34px; height: 34px; background-size: cover; background-repeat: no-repeat; background-position: center} .myWrap .memBox .info dt h6 {padding-left: 50px;padding-left: 46px; font-size: 17px; line-height: 40px; color: #555555} .myWrap .memBox .info dt h6 strong {font-size: 18px; color: #333333} .myWrap .memBox .info dt span {margin-left: 15px; min-width: 135px; padding: 0 15px; font-size: 13px; line-height: 34px; color: #666666; background: #fff; border-radius: 17px} .myWrap .memBox .info dd {position: absolute; top: 0; right: 0} .myWrap .memBox .info dd p {position: relative; display: inline-flex; align-items: center;font-size: 15px; line-height: 40px; color: #555555; letter-spacing: -0.5px; box-sizing: border-box} .myWrap .memBox .info dd p:nth-child(odd):after {content: ''; width: 1px; height: 10px;margin: 0 30px; background: #cccccc} .myWrap .memBox .info dd p strong {font-weight: 500; font-size: 16px; color: #333333;margin-left: 20px;} .myWrap .memBox ul {display: flex; flex-flow: row wrap; margin-top: 30px; padding: 22px 0; background: #fff; border-radius: 12px} .myWrap .memBox ul li {width: 20%} .myWrap .memBox ul li:not(:last-child) {border-right: 1px solid #ddd} .myWrap .memBox ul li > * {display: block;text-align: center} .myWrap .memBox ul li span {font-size: 14px; line-height: 22px; color: #555555; letter-spacing: -0.5px} .myWrap .memBox ul li strong {margin-top: 5px; font-weight: 600; font-size: 20px; line-height: 30px; color: #333333} .myWrap .condition {margin-bottom: 50px} .myWrap .condition .list {display: flex; flex-flow: row wrap; border: 6px solid #f5f5f5; border-radius: 12px; box-sizing: border-box} .myWrap .condition .list li {position: relative; width: 20%; padding: 35px 0; text-align: center} .myWrap .condition .list li:not(:last-child):after {content: ''; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); width: 10px; height: 16px; background: url('../images/sub/my_cnd_arrow.png') no-repeat center / contain} .myWrap .condition .list li > * {display: block; color: #333} .myWrap .condition .list li strong {font-size: 26px; line-height: 34px} .myWrap .condition .list li span {margin-top: 5px; font-size: 15px; line-height: 23px; letter-spacing: -0.5px} .myWrap .onestop {margin-bottom: 50px} .myWrap .onestop ul {display: flex; flex-flow: row wrap; padding: 0 40px; border-radius: 12px; background: #f6f6f6} .myWrap .onestop ul li {position: relative; width: 25%; padding: 35px 0; text-align: center} .myWrap .onestop ul li:after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 54px; background: #ddd} .myWrap .onestop ul li:nth-child(n+5) {border-top: 1px solid #ddd} .myWrap .onestop ul li:nth-child(4n):after {display: none;} .myWrap .onestop ul li > * {display: block; color: #333} .myWrap .onestop ul li strong {font-size: 26px; line-height: 34px} .myWrap .onestop ul li span {margin-top: 5px; font-size: 15px; line-height: 23px; letter-spacing: -0.5px} .myWrap .board {margin-top: 50px} .myWrap .board .tbl table {border-top: 2px solid #333; width: 100%} .myWrap .board .tbl table tr > * {padding: 15px; font-size: 15px; line-height: 25px; text-align: center; border-bottom: 1px solid #ddd} .myWrap .board .tbl table tr th {font-weight: 500; color: #333333} .myWrap .board .tbl table tr td {padding: 20px 15px; color: #666666} .myWrap .product .tbl table {width: 100%; border-top: 2px solid #333} .myWrap .product .tbl table tr > * {padding: 15px 0; border-bottom: 1px solid #ddd; text-align: center} .myWrap .product .tbl table tr th {font-weight: 500; font-size: 15px; line-height: 20px; color: #333333; background: #f7f7f7} .myWrap .product .tbl table tr th input {} .myWrap .product .tbl table tr th span {display: block; font-size: 13px; color: #666666} .myWrap .product .tbl table tr td {font-size: 14px; line-height: 22px; color: #555555} .myWrap .product .tbl table tr td .chk {} .myWrap .product .tbl table tr td .info {text-align: left;font-family: 'empty';font-size: 0;} .myWrap .product .tbl table tr td .info div {display: inline-block; vertical-align: middle;font-family: 'noto';font-size: 14px;} .myWrap .product .tbl table tr td .info .tmb {position: relative; width: 80px; height: 80px; background-size: cover; background-repeat: no-repeat; background-position: center} .myWrap .product .tbl table tr td .info .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} .myWrap .product .tbl table tr td .info .txt {padding-left: 20px; max-width: calc(100% - 80px);box-sizing: border-box; } .myWrap .product .tbl table tr td .info .txt h6 {margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 22px; color: #333333; word-break: break-all !important; } .myWrap .product .tbl table tr td .info .txt .cost {} .myWrap .product .tbl table tr td .info .txt .cost > * {line-height: 22px} .myWrap .product .tbl table tr td .info .txt .cost del {font-size: 14px; color: #888888} .myWrap .product .tbl table tr td .info .txt .cost strong {margin-left: 5px; font-size: 15px; color: #333333} .myWrap .product .tbl table tr td .box {font-size: 0} .myWrap .product .tbl table tr td .box button {width: 32px; height: 34px; border: 1px solid #ddd; background: #fff; font-size: 18px} .myWrap .product .tbl table tr td .box input {width: 40px; height: 34px; margin: 0 -1px; border: 1px solid #ddd; font-size: 14px; color: #666666; text-align: center} .myWrap .product .tbl table tr td .box input::-webkit-outer-spin-button, .myWrap .product .tbl table tr td .box input::-webkit-inner-spin-button {-webkit-appearance: none} .myWrap .product .tbl table tr td span {display: block; font-size: inherit; line-height: inherit; color: inherit} .myWrap .product .tbl table tr td span strong {font-weight: normal; color: var(--point-color2)} .myWrap .product .tbl2 table {width: 100%; border-top: 2px solid #333} .myWrap .product .tbl2 table tr > * {padding: 15px 0; border-bottom: 1px solid #ddd} .myWrap .product .tbl2 table tr th {font-weight: 500; font-size: 15px; line-height: 20px; color: #333333; background: #f7f7f7} .myWrap .product .tbl2 table tr td {padding: 20px 15px;position: relative;} .myWrap .product .tbl2 table tr td .tac {display: inline-flex;justify-content: center;align-items: center;} .myWrap .product .tbl2 table tr td i.axi-star2, .myWrap .product .tbl2 table tr td i.axi-star-half, .myWrap .product .tbl2 table tr td i.axi-star-outline {font-size: 20px;color: #ffbf00;margin: 1px;} .myWrap .product .tbl2 table tr td .tmb {position: relative; width: 120px; height: 120px; background-size: cover; background-repeat: no-repeat; background-position: center} .myWrap .product .tbl2 table tr td .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} .myWrap .product .tbl2 table tr td .info h6 {font-weight: 500; font-size: 15px; line-height: 23px; color: #333; letter-spacing: -0.5px; word-break: break-all !important; } .myWrap .product .tbl2 table tr td .info p {margin: 5px 0 10px; font-size: 13px; line-height: 22px; color: #777777; word-break: break-all !important; } .myWrap .product .tbl2 table tr td .info .stt {font-size: 0} .myWrap .product .tbl2 table tr td .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} .myWrap .product .tbl2 table tr td .info .stt .rec {background: #df0076} .myWrap .product .tbl2 table tr td .info .stt .hot {background: #0071bb} .myWrap .product .tbl2 table tr td .info .stt .new {background: #12b2bf} .myWrap .product .tbl2 table tr td > p {position: relative; padding-left: 5px; font-size: 14px; line-height: 22px; color: #555555} .myWrap .product .tbl2 table tr td > p:before {content: ''; position: absolute; top: 9px; left: 0; width: 2px; height: 2px; background: #777; border-radius: 50%} .myWrap .product .tbl2 table tr td .cost {text-align: right} .myWrap .product .tbl2 table tr td .cost del {font-size: 14px; line-height: 21px; color: #888} .myWrap .product .tbl2 table tr td .cost strong {display: block; font-size: 18px; line-height: 30px; color: #333333} .myWrap .product .tbl2 table tr td .cost strong b {color: #df0076} .myWrap .product .tbl2 table tr td .cost strong span {font-weight: normal; font-size: 15px; color: inherit} .myWrap .product .tbl2 table tr td .box {margin-top: 20px; font-size: 0; text-align: right} .myWrap .product .tbl2 table tr td .box button {width: 32px; height: 34px; border: 1px solid #ddd; background: #fff; font-size: 18px} .myWrap .product .tbl2 table tr td .box input {width: 40px; height: 34px; margin: 0 -1px; border: 1px solid #ddd; font-size: 14px; color: #666666; text-align: center} .myWrap .product .tbl2 table tr td .box input::-webkit-outer-spin-button, .myWrap .product .tbl2 table tr td .box input::-webkit-inner-spin-button {-webkit-appearance: none} .myWrap .product .tbl2 table tr td .bttn {display: block; width: 130px; height: 36px; margin-bottom: 5px; font-size: 13px; line-height: 34px; color: #555555; border: 1px solid #bbbbbb; box-sizing: border-box; text-align: center} .myWrap .product .tbl2 table tr td .bttn.down:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_bk.png') no-repeat center / contain} .myWrap .product .tbl2 table tr td .bttn.est {margin-bottom: 0; border-color: #8c8f98; background: #8c8f98; color: #fff} .myWrap .product .tbl2 table tr td .list_item_option {width: 230px;} .myWrap .product .btns {margin-top: 25px; font-size: 0} .myWrap .product .btns a {display: inline-block; vertical-align: top; margin-right: 8px; width: 110px; font-size: 13px; line-height: 32px; color: #333333; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; text-align: center} .myWrap .product .btns a.down {width: 160px; border-color: var(--point-color2); background: var(--point-color2); color: #fff} .myWrap .product .btns a.down:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_wt.png') no-repeat center / contain} .myWrap .point {margin-top: 50px} .myWrap .point.rev {margin-bottom: 30px} .myWrap .point dl {padding: 30px; padding-right: 40px; background: #f7f7f7; border-radius: 12px} .myWrap .point.rev dl {display: flex; flex-flow: row wrap; align-items: center} .myWrap .point.rev dl + dl {margin-top: -30px;} .myWrap .point dl > * {display: inline-block; vertical-align: middle; box-sizing: border-box} .myWrap .point dl dt {width: 260px; height: 230px; padding: 65px 0 60px; background: #fff; border-radius: 12px; box-sizing: border-box; text-align: center} .myWrap .point.rev dl dt {width: 40%; height: auto; padding: 25px 0 20px} .myWrap .point dl dt img {} .myWrap .point dl dt p {margin-top: 15px; font-size: 17px; line-height: 24px; color: #333333; letter-spacing: -0.5px} .myWrap .point dl dt h6 {margin-top: 5px; font-weight: 500; font-size: 18px; line-height: 30px; color: var(--point-color2); text-align: center} .myWrap .point dl dt h6 strong {font-size: 22px} .myWrap .point dl dt span {display: block;margin-top: 15px;font-size: 13px;line-height: 16px;letter-spacing: -0.04em;line-height: 1.4em;} .myWrap .point dl dd {width: calc(100% - 300px); padding-left: 40px} .myWrap .point.rev dl dd {width: 60%} .myWrap .point.rev dl dd .mid p {font-size: 15px; line-height: 30px; color: #555} .myWrap .point dl dd ul {} .myWrap .point dl dd ul li {position: relative; text-align: right} .myWrap .point dl dd ul li > * {font-size: 15px; line-height: 30px} .myWrap .point dl dd ul li strong {position: absolute; top: 0; left: 0; font-weight: normal; color: #333333} .myWrap .point dl dd ul li p {color: #555555} .myWrap .point dl dd ul li.all {margin-top: 10px; padding-top: 20px; border-top: 2px solid #333} .myWrap .point dl dd ul li.all strong {top: 20px; font-weight: 500; font-size: 18px} .myWrap .point dl dd ul li.all p {font-size: 18px; line-height: 30px; color: #333} .myWrap .point dl dd ul li.all p b {font-size: 30px} .myWrap .point dl dd .info {margin-top: 15px} .myWrap .point dl dd .info span {font-size: 13px; line-height: 22px; color: #888888} .myWrap .point dl dd .info p {margin-top: 5px; font-size: 14px; line-height: 22px; color: #555555} .myWrap .point dl dd .info p strong {margin-left: 20px; font-weight: 500; color: #333} .myWrap .point .text {margin-top: 15px; font-size: 13px; line-height: 20px; color: #d6241a} .myWrap .bttns {margin-top: 35px; text-align: center; font-size: 0} .myWrap .bttns a, .myWrap .bttns button {width: 190px; height: 48px;line-height: 48px; margin: 0 5px; border: 0; border-radius: 4px; font-size: 15px; color: #ffffff; letter-spacing: -0.5px;display: inline-block;vertical-align: middle;} .myWrap .bttns .type1 {background: var(--point-color2)} .myWrap .bttns .type2 {background: var(--point-color1)} .myWrap .bttns .type3 {background: #8c8f98} .myWrap .cash_change legend {display: none;} .myWrap .cash_change fieldset > p {margin: 5px 0;font-size: 13px;letter-spacing: -0.04em;line-height: 1.4em;} .myWrap .cash_change .group {display: flex;align-items: center;justify-content: space-between;margin: -2px;} .myWrap .cash_change .group > * {margin: 2px;} .myWrap .cash_change .group > .inp {flex-grow: 1;flex-basis: 0;border: 1px solid #ddd;border-radius: 5px;padding-left: 10px;height: 40px;} .myWrap .cash_change .group > .btn1, .myWrap .cash_change .group > .btn2, .myWrap .cash_change .group > .btn3 {width: 140px;height: 40px;line-height: 38px;text-align: center;font-size: 14px;box-shadow: 2px 2px 3px rgba(0,0,0,0.1);padding-left: 0;padding-right: 0;} .myWrap .cash_change .group > .btn3 {background-color: #999;color: #fff !important;} .myWrap .cash_change .memo {font-size: 14px;letter-spacing: -0.04em;line-height: 1.4em;} .colRed {color: #d6241a !important;} .colBlue {color: var(--point-color2) !important;} .fwb {font-weight: 700 !important;} .myWrap .revList {margin-top: 30px} .myWrap .revList dl {display: flex; flex-flow: row wrap; border: 1px solid #ddd; border-radius: 8px} .myWrap .revList dl:not(:last-child) {margin-bottom: 10px} .myWrap .revList dl > * {} .myWrap .revList dl dt {width: 200px; background: #f9f9f9; border-radius: 8px 0 0 8px; font-weight: bold; font-size: 18px; line-height: 60px; color: var(--point-color2); text-align: center} .myWrap .revList dl dd {position: relative; width: calc(100% - 200px); padding: 0 20px} .myWrap .revList dl dd > * {line-height: 60px} .myWrap .revList dl dd strong {font-weight: 500; font-size: 16px; color: #333} .myWrap .revList dl dd p {position: absolute; top: 0; right: 15px} .myWrap .revList dl dd p span {padding: 0 5px; font-size: 14px; color: #888} .myWrap .estList {} .myWrap .estList .srchBar {padding: 15px 35px; background: #f9f9f9; border: 1px solid #dddddd; border-radius: 8px; box-sizing: border-box; border-radius: 8px} .myWrap .estList .srchBar form {} .myWrap .estList .srchBar form fieldset {font-size: 0} .myWrap .estList .srchBar form fieldset > div {display: inline-block; vertical-align: top; font-size: 0} .myWrap .estList .srchBar .btns {width: calc(50% - 7px)} .myWrap .estList .srchBar .btns button {width: 75px; height: 44px; margin-right: 5px; font-size: 14px; line-height: 42px; color: #666666; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 4px; background: #fff; box-sizing: border-box} .myWrap .estList .srchBar .btns button.active {border-color: var(--point-color2); background: var(--point-color2); color: #fff} .myWrap .estList .srchBar .box {width: calc(50% + 7px)} .myWrap .estList .srchBar .box .inp {width: 220px; height: 44px; padding: 0 15px; font-size: 14px; line-height: 42px; color: #777777; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;} .myWrap .estList .srchBar .box .date {width: 155px; height: 44px; padding: 0 20px; font-size: 14px; line-height: 42px; color: #777777; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; background: #fff url('../images/sub/my_date_ico.png') no-repeat right 20px center} .myWrap .estList .srchBar .box span {display: inline-block; vertical-align: top; width: 22px; font-size: 16px; line-height: 44px; color: #333333; text-align: center} .myWrap .estList .srchBar .box button {width: 95px; height: 44px; margin-left: 8px; font-size: 15px; background: #333333; color: #fff; border-radius: 4px; border: 0} .myWrap .estList .srchBar .box button:after {content: ''; display: inline-block; vertical-align: middle; width: 13px; height: 13px; margin-left: 5px; background: url('../images/sub/my_srch_ico.png') no-repeat center / contain} .myWrap .estList .tbl {margin-top: 30px} .myWrap .estList .tbl table {width: 100%; border-top: 2px solid #333} .myWrap .estList .tbl table tr > * {padding: 18px 10px; font-size: 14px; line-height: 28px; color: #555555; border-bottom: 1px solid #ddd; text-align: center; word-break: break-all !important; } .myWrap .estList .tbl table tr th {font-weight: 500; font-size: 15px; color: #333333; background: #f7f7f7} .myWrap .estList .tbl table tr:hover td {background: var(--point-color3)} .myWrap .estList.none .tbl table tr:hover td {background: none} .myWrap .estList .tbl table tr td span {font-weight: 500; color: var(--point-color2)} .myWrap .estList .tbl table tr td a {display: inline-block; vertical-align: top; width: 85px; height: 28px; font-size: 13px; line-height: 26px; border: 1px solid #bbbbbb; border-radius: 4px; text-align: center; background: #fff; color: #333333} .myWrap .estList .tbl table tr td a.def {} .myWrap .estList .tbl table tr td a.act {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .myWrap .estList .tbl table tr td a.num {display: block;width: auto;height: auto;line-height: 1.2em;min-width: 130px;padding: 5px 0;} .myWrap .estList .tbl table tr td [data-pop-href] {border: 0px;background: none;padding: 0;display: inline-block;vertical-align: middle;} .myWrap .estList .tbl table tr.view {} .myWrap .estList .tbl table tr.view td {display: none; padding: 0; background: #fff} .myWrap .estList .tbl table tr.view.active td {display: table-cell} .myWrap .estList .tbl table tr.view td .wrap {padding: 35px 30px} .myWrap .estList .tbl table tr.view td .wrap .tit {margin-bottom: 15px} .myWrap .estList .tbl table tr.view td .wrap .tit h5 {font-size: 20px; line-height: 28px} .myWrap .estList .tbl table tr.view td .wrap .bom {margin-bottom: 35px} .myWrap .estList .tbl table tr.view td .wrap .bom .hoz {} .myWrap .estList .tbl table tr.view td .wrap .bom .hoz table {width: 100%; border-top: 2px solid #333} .myWrap .estList .tbl table tr.view td .wrap .bom .hoz table tr > * {padding: 20px; line-height: 20px; color: #555555; border-bottom: 1px solid #ddd} .myWrap .estList .tbl table tr.view td .wrap .bom .hoz table tr th {} .myWrap .estList .tbl table tr.view td .wrap .bom .hoz table tr td {padding-left: 30px; text-align: left} .myWrap .estList .tbl table tr.view td .wrap .his {margin-bottom: 35px} .myWrap .estList .tbl table tr.view td .wrap .his .ver {} .myWrap .estList .tbl table tr.view td .wrap .his .ver table {width: 100%; border-top: 2px solid #333} .myWrap .estList .tbl table tr.view td .wrap .his .ver table tr > * {padding: 20px 15px; line-height: 20px; border-bottom: 1px solid #ddd} .myWrap .estList .tbl table tr.view td .wrap .his .ver table tr td {} .myWrap .estList .tbl table tr.view td .wrap .his .ver table tr td span {} .myWrap .estList .tbl table tr.view td .wrap .his .ver table tr td span.clrR {color: #d30d0d} .myWrap .estList .tbl table tr.view td .wrap .his .ver table tr td span.clrB {color: #064189} .myWrap .estList .tbl table tr.view td .wrap .order {} .myWrap .estList .tbl table tr.view td .wrap .order .hoz table {width: 100%; border-top: 2px solid #333} .myWrap .estList .tbl table tr.view td .wrap .order .hoz table tr > * {padding: 20px; line-height: 20px; border-bottom: 1px solid #ddd} .myWrap .estList .tbl table tr.view td .wrap .order .hoz table tr th {} .myWrap .estList .tbl table tr.view td .wrap .order .hoz table tr th span {display: block; font-size: 14px; line-height: 20px; color: #555555; color: inherit} .myWrap .estList .tbl table tr.view td .wrap .order .hoz table tr td {padding-left: 30px; text-align: left} .myWrap .estList .tbl table tr.view td .wrap .order .hoz .down {margin-top: 20px} .myWrap .estList .tbl table tr.view td .wrap .order .hoz .down a {width: 140px; height: 38px; line-height: 38px; border: 0; background: var(--point-color2); color: #fff} .myWrap .estList .tbl table tr.view td .wrap .order .hoz .down a:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_wt.png') no-repeat center / contain} .myWrap .state {} .myWrap .state ul {display: flex; flex-flow: row wrap; margin: -8px} .myWrap .state ul li {position: relative; width: calc(25% - 16px); padding: 35px 0; margin: 8px; text-align: center; background: #f6f6f6; border-radius: 12px} .myWrap .state ul.ref li {width: calc(16.66% - 16px); padding: 20px 0; border-radius: 4px} .myWrap .state ul li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} .myWrap .state ul li.active {background: var(--point-color2)} .myWrap .state ul li > * {display: block; color: #333} .myWrap .state ul li.active > * {color: #fff} .myWrap .state ul li strong {font-size: 36px; line-height: 44px} .myWrap .state ul li span {margin-top: 5px; font-size: 15px; line-height: 23px; letter-spacing: -0.5px} .myWrap .state ul li p {font-size: 15px; line-height: 40px; color: #333; text-align: center} .myWrap .state ul li.active p {color: #fff} .myWrap .state .sttCont {margin-top: 50px} .myWrap .state .list {margin-top: 30px} .myWrap .state .list table {width: 100%; border-top: 2px solid #333} .myWrap .state .list table tr > * {padding: 18px 10px; font-size: 14px; line-height: 28px; color: #555555; border-bottom: 1px solid #ddd; text-align: center} .myWrap .state .list table tr th {font-weight: 500; font-size: 15px; color: #333333; background: #f7f7f7} .myWrap .state .list table tr td {} .myWrap .state .list table tr td span {font-weight: 500; color: var(--point-color2)} .sale-list {} .sale-list .srchBar {position: relative; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #ddd} .sale-list .srchBar form {} .sale-list .srchBar form fieldset {} .sale-list .srchBar form fieldset > div {display: inline-block; vertical-align: top} .sale-list .srchBar .total {position: relative; padding-right: 15px} .sale-list .srchBar .total:after {content: ''; position: absolute; top: 16px; right: -1px; width: 1px; height: 12px; background: #ddd} .sale-list .srchBar .total > * {font-size: 13px; line-height: 44px; color: #333333} .sale-list .srchBar .total span {margin-right: 15px} .sale-list .srchBar .total strong {} .sale-list .srchBar .arry {} .sale-list .srchBar .arry span {margin: 0 15px; font-size: 13px; line-height: 44px; color: #333333} .sale-list .srchBar .arry .selt {min-width: 110px; height: 44px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px; line-height: 42px; box-sizing: border-box} .sale-list .srchBar fieldset > ol {display: flex;align-items: center;justify-content: end;margin-top: 15px;margin-bottom: -10px;} .sale-list .srchBar fieldset > ol li {padding: 10px 0; margin-left: 20px} .sale-list .srchBar fieldset > ol li input {vertical-align: middle; margin-top: 1px} .sale-list .srchBar fieldset > ol li label {font-size: 15px; line-height: 22px; color: #555555} .sale-list .srchBar .srch {position: absolute; top: 0; right: 100px; width: 280px; height: 44px; padding-right: 50px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 0} .sale-list .srchBar .srch input {width: 100%; height: 42px; border: 0; padding: 0 20px; line-height: 42px; border-radius: 4px} .sale-list .srchBar .srch button {position: absolute; top: 0; right: 0; width: 45px; height: 42px; border: 0; background: url('../images/sub/sale_srch_ico.png') no-repeat center; text-indent: -999em} .sale-list .srchBar .list_type_btn {position: absolute;top: 0;right: 0;width: 90px;border: 1px solid #ddd;border-radius: 5px;overflow: hidden;display: flex;align-items: center;} .sale-list .srchBar .list_type_btn > a + a {border-left: 1px solid #ddd;} .sale-list .srchBar .list_type_btn > a {width: 50%;height: 44px;display: flex;justify-content: center;align-items: center;text-align: center;font-size: 24px;color: #333; box-sizing: border-box;text-decoration: none !important;} .sale-list .srchBar .list_type_btn > a.active {color: var(--point-color1);background-color: var(--point-color3);} .sale-list .list {} .sale-list .list ul {display: flex; flex-flow: row wrap; margin: -30px -13px} .sale-list .list ul li {position: relative; width: calc(25% - 26px); margin: 30px 13px} .sale-list .list ul li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} .sale-list .list ul li .per {position: absolute; top: 15px; left: 15px; z-index: 2; width: 50px; height: 50px; font-weight: 600; font-size: 15px; line-height: 50px; color: #fff; border-radius: 50%; background: #df0076; text-align: center} .sale-list .list ul li .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} .sale-list .list ul li .thumb .time {position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; font-size: 14px; line-height: 42px; color: #fff; background: rgba(6, 65, 137, 0.85); border-radius: 0 0 12px 12px; text-align: center} .sale-list .list ul li .thumb .time:before {content: ''; display: inline-block; vertical-align: middle; width: 14px; height: 15px; margin-right: 5px; background: url('../images/sub/sale_time_ico.png') no-repeat center} .sale-list .list ul li .info {margin-top: 20px} .sale-list .list ul li .info h6 {margin: 5px 0; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;} .sale-list .list ul li .info .cost > * {line-height: 28px} .sale-list .list ul li .info .cost del {font-size: 14px; color: #888888} .sale-list .list ul li .info .cost strong {font-size: 18px; color: #333333} .sale-list .list ul li .info .stt {margin-top: 12px; font-size: 0} .sale-list .list ul li .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} .sale-list .list ul li .info .stt .rec {background: #df0076} .sale-list .list ul li .info .stt .hot {background: #0071bb} .sale-list .list ul li .info .stt .new {background: #12b2bf} .sale-view {} .sale-view .view {display: flex; flex-flow: row wrap; padding-bottom: 70px; margin-bottom: 70px; border-bottom: 1px solid #ddd} .sale-view .view > div {width: 50%; box-sizing: border-box} .sale-view .view .left {padding-right: 40px} .sale-view .view .left .item {border: 1px solid #ddd; box-sizing: border-box} .sale-view .view .left .rollBig .item img {width: 100%;} .sale-view .view .left .rollTmb {position: relative; margin: 0 -6px; margin-top: 20px} .sale-view .view .left .rollTmb .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 20px; height: 40px; border: 0; text-indent: -999em; z-index: 1} .sale-view .view .left .rollTmb .slick-prev {left: 6px; background: url('../images/sub/sale_prev_arrow.png') no-repeat center / contain} .sale-view .view .left .rollTmb .slick-next {right: 6px; background: url('../images/sub/sale_next_arrow.png') no-repeat center / contain} .sale-view .view .left .rollTmb .item {position: relative; margin: 0 6px} .sale-view .view .left .rollTmb .item.slick-current:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #444444; box-sizing: border-box} .sale-view .view .left .rollTmb .item img {width: 100%} .sale-view .view .right {position: relative; padding: 15px 0 0 40px} .sale-view .view .right .share {top: 20px; bottom: auto;} .sale-view .view .right .share .btn_sns_share { width: 36px; height: 36px; background: url('../images/sub/sale_share_ico.png') no-repeat center / contain !important;} .sale-view .view .right .share .btn_sns_share > i {opacity: 0;} .sale-view .view .right .share .sns_area {top: 46px !important;right: -3px !important;} .sale-view .view .right .title > span {font-size: 16px; line-height: 24px; color: #333333} .sale-view .view .right .title > h5 {margin: 15px 0 10px; font-size: 26px; line-height: 34px; color: #333333; display: flex;align-items: center;word-break: break-all !important; } .sale-view .view .right .title > h5 > span {font-size: 18px;line-height: 22px;color: #555;font-weight: 400;margin-left: 15px;} .sale-view .view .right .title > p {font-size: 15px; line-height: 25px; color: #777777;word-break: break-all !important;} .sale-view .view .right .title .cost {margin-top: 15px} .sale-view .view .right .title .cost > * {display: inline-block; vertical-align: top; line-height: 30px; margin-right: 5px} .sale-view .view .right .title .cost strong {font-size: 22px; color: #df0076} .sale-view .view .right .title .cost p {font-size: 16px; color: #333333} .sale-view .view .right .title .cost p b {font-size: 24px} .sale-view .view .right .title .cost del {font-size: 15px; color: #888888} .sale-view .view .right .title .cost span {font-size: 15px; color: #666666} .sale-view .view .right .time {margin-top: 20px; font-size: 15px; line-height: 44px; color: var(--point-color2); background: var(--point-color3); border-radius: 4px; text-align: center} .sale-view .view .right .time:before {content: ''; display: inline-block; vertical-align: middle; width: 14px; height: 15px; background: url('../images/sub/sale_time_ico_bl.png') no-repeat center / contain; margin-right: 5px} .sale-view .view .right .info {margin-top: 20px} .sale-view .view .right .info ul {display: flex; flex-flow: row wrap; padding: 20px 0; border-top: 2px solid #333; border-bottom: 1px solid #ddd} .sale-view .view .right .info ul:not(:first-child) {border-top: 0;} .sale-view .view .right .info ul li {position: relative; width: 50%; padding-left: 90px; box-sizing: border-box;min-height: 36px;} .sale-view .view .right .info ul li.w100 {width: 100%;} .sale-view .view .right .info ul li > * {font-size: 15px; line-height: 36px} .sale-view .view .right .info ul li strong {position: absolute; top: 0; left: 0; font-weight: 500; color: #333333} .sale-view .view .right .info ul li p {color: #666666;line-height: 26px;padding-top: 5px;padding-bottom: 5px;word-break: break-all !important;} .sale-view .view .right .info .cont {padding: 25px 0; font-size: 15px; line-height: 26px; color: #666666; border-bottom: 1px solid #ddd;word-break: break-all !important;} .sale-view .view .right .info .numb {position: relative; padding: 15px 0; border-bottom: 1px solid #ddd; text-align: right} .sale-view .view .right .info .numb span {position: absolute;top: 15px; left: 0; font-size: 15px; line-height: 34px; color: #333333} .sale-view .view .right .info .numb .amount {font-size: 0} .sale-view .view .right .info .numb .amount button {width: 32px; height: 34px; border: 1px solid #ddd; background: #fff; font-size: 18px} .sale-view .view .right .info .numb .amount input {width: 40px; height: 34px; margin: 0 -1px; border: 1px solid #ddd; font-size: 14px; color: #666666; text-align: center} .sale-view .view .right .info .numb .amount input::-webkit-outer-spin-button, .sale-view .view .right .info .numb .amount input::-webkit-inner-spin-button {-webkit-appearance: none} .sale-view .view .right .info .numb .amount .sel {min-width: 270px;height: 34px;margin: 0 -1px;border: 1px solid #ddd;font-size: 14px;} .sale-view .view .right .info .total {position: relative; padding-top: 25px; text-align: right} .sale-view .view .right .info .total > span {position: absolute; top: 25px; left: 0; font-weight: 500; font-size: 18px; line-height: 36px; color: #333333} .sale-view .view .right .info .total h6 {line-height: 36px; text-align: right; font-weight: normal; font-size: 17px; color: #333} .sale-view .view .right .info .total h6 b {font-size: 30px} .sale-view .view .right .info .total p {font-size: 15px; color: #555555} .sale-view .view .right .info .total p strong {margin: 0 5px 0 15px; font-size: 17px; color: #333333} .sale-view .view .right .btns {margin-top: 25px; font-size: 0; display: flex;justify-content: center;align-items: center;margin: -3px;margin-top: 22px;} #sit_opt_added {border-width: 0 0 1px;display: block;padding: 0;} #sit_opt_added > li {width: auto;border-bottom: 0 !important;} #sit_opt_added > li + li {border-top: 1px solid #ddd;} .sale-view .view .right .btns > * {flex-grow: 1;box-flex: 0;margin: 3px;min-width: calc(25% - 6px);box-sizing: border-box;} .sale-view .view .right .btns a, .sale-view .view .right .btns button {height: 52px; font-size: 15px; border: 0; color: #fff; box-sizing: border-box;text-align: center;} .sale-view .view .right .btns .type1 {border: 1px solid #333; line-height: 50px; color: #333; background: #fff} .sale-view .view .right .btns .type1.down:before {content: ''; display: inline-block; vertical-align: middle; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_bk.png') no-repeat center / contain; margin-right: 5px} .sale-view .view .right .btns .type2 {background: var(--point-color2)} .sale-view .view .right .btns .type3 {background: #8c8f98} .sale-view .slide .tit {margin-bottom: 35px} .sale-view .slide .tit > * {display: inline-block; vertical-align: top; line-height: 40px} .sale-view .slide .tit h5 {font-size: 30px; color: #333; letter-spacing: -0.5px} .sale-view .slide .tit span {margin-left: 20px; font-size: 15px; color: #555555} .sale-view .slide .roll {position: relative; margin: 0 -12px} .sale-view .slide .roll .slick-arrow {position: absolute; top: 100px; width: 13px; height: 20px; border: 0; text-indent: -999em} .sale-view .slide .roll .slick-prev {left: -40px; background: url('../images/sub/prd_prev_arrow.png') no-repeat center / contain} .sale-view .slide .roll .slick-next {right: -40px; background: url('../images/sub/prd_next_arrow.png') no-repeat center / contain} .sale-view .slide .roll .item {margin: 0 12px} .sale-view .slide .roll .item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} .sale-view .slide .roll .item .thumb {position: relative; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px} .sale-view .slide .roll .item .info {margin-top: 20px} .sale-view .slide .roll .item .info h6 {margin: 5px 0; font-weight: normal; font-size: 16px; line-height: 24px; color: #333333; letter-spacing: -0.5px} .sale-view .slide .roll .item .info .cost > * {line-height: 28px} .sale-view .slide .roll .item .info .cost del {margin-right: 5px; font-size: 14px; color: #888888} .sale-view .slide .roll .item .info .cost strong {font-size: 18px; color: #333333} .sale-view .slide .roll .item .info .stt {margin-top: 12px; font-size: 0} .sale-view .slide .roll .item .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} .sale-view .slide .roll .item .info .stt .rec {background: #df0076} .sale-view .slide .roll .item .info .stt .hot {background: #0071bb} .sale-view .slide .roll .item .info .stt .new {background: #12b2bf} .sale-view .editor {margin-top: 70px;position: relative;padding-top: 83px;} .sale-view .editor .prdt-tab {border-bottom: 2px solid #666666;position: absolute;top: 0;left: 0;width: 1200px;z-index: 55;background: #fff;max-width: 100%;} .sale-view .editor .prdt-tab.fix {position: fixed;left:calc(50% - 600px);} .sale-view .editor .prdt-tab li {position: relative;display: inline-block;vertical-align: top; width: 20%;border: 1px solid #ddd;border-bottom: none} .sale-view .editor .prdt-tab li:not(:last-child) {border-right: 0} .sale-view .editor .prdt-tab li a {display: block;line-height: 50px;height: 50px;text-align: center;width: 100%;font-size: 15px;color: #888888;letter-spacing: -1px;text-decoration: none;box-sizing: border-box;} .sale-view .editor .prdt-tab li.active {border: 2px solid #666666;border-bottom: none;background: #fff;height: 53px;margin-bottom: -2px;z-index: 2;} .sale-view .editor .prdt-tab li.active a {font-weight: 500;color: #333} .sale-view .editor .prdt-txtbox {min-height: 200px} .sale-view .editor .prdt-txtbox img {max-width: 100%;height: auto;} .brdWrap .bann .roll {margin: 0 -15px} .brdWrap .bann .roll .item {position: relative; margin: 0 15px} .brdWrap .bann .roll .item .link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10} .brdWrap .bann .roll .item .thumb {padding-bottom: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 12px; padding-bottom: 61.84%; } .brdWrap .bann .roll .slick-dots {margin-top: 30px; text-align: center} .brdWrap .bann .roll .slick-dots li {display: inline-block; vertical-align: top; height: 10px; margin: 0 5px; font-size: 0} .brdWrap .bann .roll .slick-dots li button {width: 10px; height: 10px; border: 0; text-indent: -999em; background: #dddddd; border-radius: 50%} .brdWrap .bann .roll .slick-dots li.slick-active button {background: var(--point-color1)} .brdWrap .srchBar {margin: 50px 0; padding: 15px 0; background: #f9f9f9; border-radius: 8px; border: 1px solid #ddd; box-sizing: border-box; text-align: center} .brdWrap .srchBar form {} .brdWrap .srchBar form fieldset {} .brdWrap .srchBar form strong {display: inline-block; vertical-align: top; margin-right: 20px; font-weight: 500; font-size: 16px; line-height: 44px; color: #333333; letter-spacing: -0.5px} .brdWrap .srchBar .keyword {display: inline-block; vertical-align: top; font-size: 0} .brdWrap .srchBar .keyword > * {height: 44px; border-radius: 4px} .brdWrap .srchBar .keyword input {width: 405px; padding: 0 20px; font-size: 14px; border: 1px solid #ddd; box-sizing: border-box} .brdWrap .srchBar .keyword input + input {margin-left: 4px;} .brdWrap .srchBar .keyword button {margin-left: 8px; width: 95px; font-size: 15px; color: #fff; background: #333; border: 0} .brdWrap .srchBar .keyword button:after {content: ''; display: inline-block; vertical-align: middle; width: 13px; height: 13px; background: url('../images/sub/my_srch_ico.png') no-repeat center / contain; margin-left: 5px} .brdWrap .srchBar .keyword .sbm {margin-left: 8px; width: 95px; font-size: 15px; color: #fff; background: #333; border: 0;display: inline-flex;align-items: center;justify-content: center;text-align: center;text-decoration: none !important;} .brdWrap .srchBar .keyword .sbm:after {content: ''; display: inline-block; vertical-align: middle; width: 13px; height: 13px; background: url('../images/sub/my_srch_ico.png') no-repeat center / contain; margin-left: 5px} .brdWrap .srchBar .keyword .w33p {width: 200px;} .brdWrap .title {margin-bottom: 35px} .brdWrap .title h5 {font-size: 26px; line-height: 34px; color: #333333; text-align: center} .brdWrap .list1 {margin-bottom: 45px} .brdWrap .list1 ul {display: flex; flex-flow: row wrap; padding: 30px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box} .brdWrap .list1 ul li {width: calc(100% / 19 - 4px); margin: 2px} .brdWrap .list1 ul li a {display: block; height: 40px; font-weight: 500; font-size: 15px; line-height: 38px; color: #333333; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; text-align: center; text-decoration: none} .brdWrap .list1 ul li:hover a {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .brdWrap .list2 {} .brdWrap .list2 .total {margin-bottom: 25px; font-size: 14px; line-height: 22px; color: #666666; letter-spacing: -0.5px} .brdWrap .list2 .total span {font-weight: 500; color: var(--point-color2)} .brdWrap .list2 .total strong {font-weight: 500; color: #333333} .brdWrap .list2 ul {display: flex; flex-flow: row wrap; padding: 30px 40px; background: #f7f7f7; border-radius: 8px; box-sizing: border-box} .brdWrap .list2 ul li {width: 20%} .brdWrap .list2 ul li a {display: block; font-size: 15px; line-height: 36px; color: #666666; letter-spacing: -0.5px} .brdWrap .list2 ul li:hover a {color: var(--point-color2)} .brdWrap .tit {margin-bottom: 25px} .brdWrap .tit h5 {font-size: 26px; line-height: 34px; color: #333} .brdWrap .detail {margin-bottom: 50px} .brdWrap .detail ul {border-top: 2px solid #333} .brdWrap .detail ul li {position: relative; padding: 15px 0; padding-left: 160px; border-bottom: 1px solid #ddd; font-size: 0} .brdWrap .detail ul li strong {position: absolute; top: 15px; left: 30px; padding-left: 10px; font-weight: 500; font-size: 15px; line-height: 44px; color: #444444} .brdWrap .detail ul li strong:before {content: ''; position: absolute; top: 20px; left: 0; width: 2px; height: 2px; background: #444} .brdWrap .detail ul li span {display: inline-block; vertical-align: top; width: 28px; line-height: 44px; text-align: center; color: #333} .brdWrap .detail ul li .inp {height: 44px; padding: 0 15px; border: 1px solid #ddd; font-size: 14px; border-radius: 4px; box-sizing: border-box} .brdWrap .detail ul li .inp.w230 {width: 230px} .brdWrap .detail ul li label {display: inline-block; vertical-align: middle; font-size: 15px; color: #555555} .brdWrap .detail ul li label input {} .brdWrap .detail ul li .keyword {display: inline-block; vertical-align: middle; font-size: 0; margin-left: 20px} .brdWrap .detail ul li .keyword > * {height: 44px; border-radius: 4px} .brdWrap .detail ul li .keyword .inp {width: 490px; padding: 0 20px; font-size: 14px; border: 1px solid #ddd; box-sizing: border-box} .brdWrap .detail ul li .keyword button {margin-left: 8px; width: 95px; font-size: 15px; color: #fff; background: #333; border: 0} .brdWrap .detail ul li .keyword button:after {content: ''; display: inline-block; vertical-align: middle; width: 13px; height: 13px; background: url('../images/sub/my_srch_ico.png') no-repeat center / contain; margin-left: 5px} .brdWrap .detail ul li.last {padding: 0; padding-left: 160px; margin-top: 20px; border-bottom: 0; background: #f6f6f6; border-radius: 8px} .brdWrap .detail ul li.last > * {line-height: 52px} .brdWrap .detail ul li.last strong {top: 0} .brdWrap .detail ul li.last strong:before {top: 24px} .brdWrap .detail ul li.last a {display: inline-block; vertical-align: middle; padding-right: 23px; margin-right: 20px; font-size: 14px; color: #666666; background: url('../images/sub/brd_del_ico.png') no-repeat right center} .brdWrap .detail ul li.last button.reset {position: absolute; top: 0; right: 30px; padding-right: 20px; border: 0; background: url('../images/sub/brd_set_ico.png') no-repeat right center} .brdWrap .srchBox {position: relative; padding-bottom: 20px} .brdWrap .srchBox form {} .brdWrap .srchBox form fieldset {} .brdWrap .srchBox form fieldset > div {display: inline-block; vertical-align: top} .brdWrap .srchBox .total {position: relative; padding-right: 15px} .brdWrap .srchBox .total:after {content: ''; position: absolute; top: 16px; right: -1px; width: 1px; height: 12px; background: #ddd} .brdWrap .srchBox .total > * {font-size: 13px; line-height: 44px; color: #333333} .brdWrap .srchBox .total span {margin-right: 15px} .brdWrap .srchBox .total strong {} .brdWrap .srchBox .arry {} .brdWrap .srchBox .arry span {margin: 0 15px; font-size: 13px; line-height: 44px; color: #333333} .brdWrap .srchBox .arry .selt {width: 110px; height: 44px; padding: 0 15px; border: 1px solid #ddd; border-radius: 4px; line-height: 42px; box-sizing: border-box} .brdWrap .srchBox ol {position: absolute; top: 0; right: 0} .brdWrap .srchBox ol li {display: inline-block; vertical-align: top; padding: 10px 0; margin-left: 20px} .brdWrap .srchBox ol li input {vertical-align: middle; margin-top: 1px} .brdWrap .srchBox ol li label {font-size: 15px; line-height: 22px; color: #555555} .brdWrap .tbl {} .brdWrap .tbl table {width: 100%; border-top: 2px solid #333} .brdWrap .tbl table tr > * {padding: 15px 0; border-bottom: 1px solid #ddd} .brdWrap .tbl table tr th {font-weight: 500; font-size: 15px; line-height: 20px; color: #333333; background: #f7f7f7} .brdWrap .tbl table tr td {padding: 20px 15px;} .brdWrap .tbl table tr td .tmb {position: relative; width: 120px; height: 120px; background-size: cover; background-repeat: no-repeat; background-position: center; margin: 0 auto} .brdWrap .tbl table tr td .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} .brdWrap .tbl table tr td .info h6 {font-weight: 500; font-size: 15px; line-height: 23px; color: #333; letter-spacing: -0.5px; word-break: break-all !important;} .brdWrap .tbl table tr td .info p {margin: 5px 0; font-size: 13px; line-height: 22px; color: #777777; word-break: break-all !important;} .brdWrap .tbl table tr td .info img {margin: 5px 0 10px;max-height: 15px;} .brdWrap .tbl table tr td .info .stt {font-size: 0;} .brdWrap .tbl table tr td .info .stt span {display: inline-block; vertical-align: top; margin: 0 3px 3px 0; padding: 0 7px; font-size: 12px; line-height: 20px; border-radius: 4px; text-align: center; color: #fff} .brdWrap .tbl table tr td .info .stt .rec {background: #df0076} .brdWrap .tbl table tr td .info .stt .hot {background: #0071bb} .brdWrap .tbl table tr td .info .stt .new {background: #12b2bf} .brdWrap .tbl table tr td > p {position: relative; padding-left: 5px; font-size: 14px; line-height: 22px; color: #555555} .brdWrap .tbl table tr td > p:before {content: ''; position: absolute; top: 9px; left: 0; width: 2px; height: 2px; background: #777; border-radius: 50%} .brdWrap .tbl table tr td .cost {text-align: right} .brdWrap .tbl table tr td .cost del {font-size: 14px; line-height: 21px; color: #888} .brdWrap .tbl table tr td .cost strong {display: block; font-size: 18px; line-height: 30px; color: #333333} .brdWrap .tbl table tr td .cost strong b {color: #df0076} .brdWrap .tbl table tr td .cost strong span {font-weight: normal; font-size: 15px; color: inherit} .brdWrap .tbl table tr td .box {margin-top: 20px; font-size: 0; text-align: right} .brdWrap .tbl table tr td .box button {width: 32px; height: 34px; border: 1px solid #ddd; background: #fff; font-size: 18px} .brdWrap .tbl table tr td .box input {width: 40px; height: 34px; margin: 0 -1px; border: 1px solid #ddd; font-size: 14px; color: #666666; text-align: center} .brdWrap .tbl table tr td .box input::-webkit-outer-spin-button, .brdWrap .tbl table tr td .box input::-webkit-inner-spin-button {-webkit-appearance: none} .brdWrap .tbl table tr td .bttn {display: block; width: 130px; height: 36px; margin-bottom: 5px; font-size: 13px; line-height: 34px; color: #555555; border: 1px solid #bbbbbb; box-sizing: border-box; text-align: center} .brdWrap .tbl table tr td .bttn.down:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_bk.png') no-repeat center / contain} .brdWrap .tbl table tr td .bttn.est {margin-bottom: 0; border-color: #8c8f98; background: #8c8f98; color: #fff} .brdWrap .tbl table tr td .list_item_option {width: 230px;} .inqWrap {} .inqWrap .tabList1 {display: flex; flex-flow: row wrap; margin: 0 -5px; margin-bottom: 40px} .inqWrap .tabList1 li {width: calc(100%/8 - 10px - 2px); margin: 0 5px;position: relative;} .inqWrap .tabList1 li a {display: block; width: 100%; height: 48px; font-size: 15px; line-height: 46px; color: #555555; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 4px; text-align: center; box-sizing: border-box} .inqWrap .tabList1 li.active a {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .inqWrap .tabList1 li.li_nbsp {width: 16px;margin: 0;position: relative; display: none;} .inqWrap .tabList1 li.li_nbsp:after {display: block;content: '';position: absolute;top: -24px;bottom: 0;left: 50%;width: 2px;background: #e8e8e8;margin-left: -1px;} .inqWrap .tabList1 li > strong {position: absolute;bottom: 100%;left: 0;margin-bottom: 10px;font-size: 16px;color: #222;font-weight: 600;line-height: 1em;padding-left: 5px;border-left: 2px solid var(--point-color2);padding-bottom: 1px;} .inqWrap .tabList2 {margin-bottom: 30px;border-bottom: 2px solid var(--point-color2)} .inqWrap .tabList2 li {position: relative;display: inline-block;vertical-align: top; width: 50%;border: 1px solid #ddd;border-bottom: none} .inqWrap .tabList2 li:not(:last-child) {border-right: 0} .inqWrap .tabList2 li a {display: block;line-height: 50px;height: 50px;text-align: center;width: 100%;font-size: 15px;color: #555555;letter-spacing: -1px;text-decoration: none;box-sizing: border-box;} .inqWrap .tabList2 li.active {border: 2px solid var(--point-color2);border-bottom: none;background: #fff;height: 53px;margin-bottom: -2px;z-index: 2;} .inqWrap .tabList2 li.active a {font-weight: 500;color: var(--point-color2)} .inqWrap .tabList3 {padding: 15px; background: #f7f7f7; text-align: center} .inqWrap .tabList3 li {display: inline-block; vertical-align: top; padding: 0 25px} .inqWrap .tabList3 li a {font-size: 15px; line-height: 28px; color: #555555; letter-spacing: -0.5px} .inqWrap .tabList3 li.active a {font-weight: 500; color: var(--point-color2)} .inqWrap .list {margin-top: 55px} .inqWrap .list form {} .inqWrap .list form fieldset {margin-bottom: 55px} .inqWrap .list.onestop form fieldset.ctrl {display: none;} .inqWrap .list.onestop form fieldset.ctrl.on {display: block} .inqWrap .list form fieldset legend {position: relative; width: 100%; font-weight: bold; font-size: 24px; line-height: 32px; color: #333333; letter-spacing: -0.5px} .inqWrap .list form fieldset legend > span {position: absolute; top: 0; right: 0; font-weight: normal; font-size: 16px; color: #333333} .inqWrap .list form fieldset legend span:before {content: '*'; font-size: inherit; line-height: inherit; color: #ff0000} .inqWrap .list form fieldset legend .rep {position: absolute; top: 2px; right: 110px; width: 60px; height: 28px; font-size: 14px; color: #fff; line-height: 28px; background: var(--point-color1); border: 0; text-align: center} .inqWrap .list form fieldset ul {margin-top: 25px; border-top: 2px solid #333} .inqWrap .list form fieldset ul li {position: relative; padding: 15px 0; padding-left: 185px; border-bottom: 1px solid #ddd; font-size: 0} .inqWrap .list form fieldset ul li strong {position: absolute; top: 15px; left: 25px; font-weight: 500; font-size: 16px; line-height: 46px; color: #333333; letter-spacing: -0.5px} .inqWrap .list form fieldset ul li strong em {font-style: normal; color: #ff0000} .inqWrap .list form fieldset ul li strong .ex {display: block; font-size: 11px; line-height: 14px; color: #888; margin-top: -12px} .inqWrap .list form fieldset ul li span {display: inline-block; vertical-align: top; padding: 0 8px; font-size: 15px; line-height: 46px; color: #555555} .inqWrap .list form fieldset ul li > em {display: inline-block; vertical-align: top; margin-left: 15px; font-style: normal; font-size: 15px; line-height: 46px; color: #777777} .inqWrap .list form fieldset ul li > p {font-size: 15px; line-height: 46px; color: #666666} .inqWrap .list form fieldset ul li > p b {font-weight: 500; color: #333} .inqWrap .list form fieldset ul li .txt {margin-top: 10px; font-size: 15px; line-height: 24px; color: #777777; letter-spacing: -0.5px} .inqWrap .list form fieldset ul li .inp, .inqWrap .list form fieldset ul li .selt {height: 46px; line-height: 44px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; padding: 0 20px} .inqWrap .list form fieldset ul li .inp {} .inqWrap .list form fieldset ul li .selt {} .inqWrap .list form fieldset ul li .btns {display: inline-block; vertical-align: top; font-size: 0} .inqWrap .list form fieldset ul li .btns button {margin-left: 8px; width: 150px; height: 46px; line-height: 44px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; text-align: center} .inqWrap .list form fieldset ul li .btns button.type1 {background: #fff; color: #555} .inqWrap .list form fieldset ul li .btns button.type2 {border-color: #ccc; color: #333} .inqWrap .list form fieldset ul li textarea {width: 100%; height: 140px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; padding: 15px 20px; line-height: 24px} .inqWrap .list form fieldset ul li .rdo {display: inline-block; margin-right: 7px} .inqWrap .list form fieldset ul li .rdo input {display: none} .inqWrap .list form fieldset ul li .rdo label {display: block; min-width: 100px; height: 46px; padding: 0 25px; font-size: 14px; line-height: 44px; color: #555555; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; text-align: center} .inqWrap .list form fieldset ul li .rdo input:checked + label {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .inqWrap .list form fieldset ul li .rdo input:disabled + label {background-color: #eee;color: #999;} .inqWrap .list form fieldset ul li .rdo label b {display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-right: 5px; border: 1px solid #dddddd; border-radius: 50%; box-sizing: border-box} .inqWrap .list form fieldset ul li .rdo label b.ylw {background: #fffb00} .inqWrap .list form fieldset ul li .rdo label b.grn {background: #12944c} .inqWrap .list form fieldset ul li .rdo label b.red {background: #cf0707} .inqWrap .list form fieldset ul li .rdo label b.blue {background: #1b54bd} .inqWrap .list form fieldset ul li .rdo label b.wt {} .inqWrap .list form fieldset ul li .rdo label b.bk1 {background: #000000} .inqWrap .list form fieldset ul li .rdo label b.bk2 {background: #000000} .inqWrap .list form fieldset ul li .arr {display: inline-block; vertical-align: top} .inqWrap .list form fieldset ul li .type {} .inqWrap .list form fieldset ul li .type:nth-child(even) {margin-bottom: 10px} .inqWrap .list form fieldset ul li .type b {display: inline-block; vertical-align: top; margin-right: 30px; font-weight: 500; font-size: 16px; line-height: 46px; color: #333333; letter-spacing: -0.5px} .inqWrap .list form fieldset ul li .type em {display: inline-block; vertical-align: top; margin-left: 15px; font-style: normal; font-size: 15px; line-height: 46px; color: #777777} .inqWrap .list form fieldset ul li .type .rdo {} .inqWrap .list form fieldset ul li .filebox {position: relative; display: inline-block; font-size: 0} .inqWrap .list form fieldset ul li .filebox .inp {width: 415px; height: 46px; line-height: 44px} .inqWrap .list form fieldset ul li .filebox .wbtn {display: inline-block; vertical-align: top; width: 120px; height: 46px; margin-left: 10px; line-height: 44px; border: 0; border-radius: 4px; border: 1px solid #333; font-size: 15px; color: #333333; letter-spacing: -0.5px; text-align: center; box-sizing: border-box} .inqWrap .list form fieldset ul li .filebox .hiFile {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0} .inqWrap .list form fieldset ul li .w160 {width: 160px} .inqWrap .list form fieldset ul li .w170 {width: 170px} .inqWrap .list form fieldset ul li .w190 {width: 190px} .inqWrap .list form fieldset ul li .w200 {width: 200px} .inqWrap .list form fieldset ul li .w280 {width: 280px} .inqWrap .list form fieldset ul li .w415 {width: 415px} .inqWrap .list form fieldset ul li .ml8 {margin-left: 8px} .inqWrap .list form .bttns {text-align: center; font-size: 0} .inqWrap .list form .bttns > * {display: inline-block; vertical-align: top; margin: 0 5px; width: 240px; height: 54px; font-size: 16px; border-radius: 6px; box-sizing: border-box} .inqWrap .list form .bttns button {border: 0; line-height: 54px; background: var(--point-color2); color: #fff} .inqWrap .list form .bttns a {border: 1px solid #333; color: #333; line-height: 52px} .inqWrap {} .inqWrap > .box {margin-bottom: 50px; border: 10px solid #f5f5f5; padding: 55px 0; box-sizing: border-box; text-align: center} .inqWrap > .box img {} .inqWrap > .box h5 {margin: 15px 0 10px; font-size: 30px; line-height: 38px; color: #333333; letter-spacing: -0.5px; text-align: center} .inqWrap > .box p {margin-bottom: 30px; font-size: 17px; line-height: 26px; color: #555555} .inqWrap > .box a {display: inline-block; vertical-align: top; margin: 0 4px; width: 190px; font-size: 15px; line-height: 48px; border-radius: 4px; background: var(--point-color2); color: #fff} .inqWrap > .info .tit {margin-bottom: 25px; font-size: 26px; line-height: 34px; color: #333} .inqWrap > .info .tbl {} .inqWrap > .info .tbl table {width: 100%; border-top: 2px solid #333} .inqWrap > .info .tbl table tr > * {padding: 20px; font-size: 14px; line-height: 20px; color: #555555; border-bottom: 1px solid #ddd} .inqWrap > .info .tbl table tr th {font-weight: 500; font-size: 15px; color: #333; background: #f7f7f7} .inqWrap > .info .tbl table tr td {padding-left: 30px; text-align: left; color: #555555} .inqWrap .oneCont {margin-bottom: 50px; border: 6px solid #f5f5f5; padding: 25px 0; box-sizing: border-box; text-align: center; position:relative; z-index: 11;} .inqWrap .oneCont img {width: 30px} .inqWrap .oneCont h5 {margin: 15px 0 20px; font-size: 18px; line-height: 26px; color: #333333; letter-spacing: -0.5px; text-align: center} .inqWrap .oneCont .btns {margin-bottom: 20px; text-align: center; font-size: 0} .inqWrap .oneCont .btns a {display: inline-block; vertical-align: top; min-width: 90px; padding: 0 25px; margin: 0 3px; font-size: 14px; line-height: 34px; color: #333; border: 2px solid #eee; border-radius: 20px; box-sizing: border-box} .inqWrap .oneCont .btns a.active {background: var(--point-color1); border-color: var(--point-color1); color: #fff} .inqWrap .oneCont p {font-size: 14px; line-height: 21px; color: #555555} .bomWrap {display: flex; flex-flow: row wrap;} .bomWrap .btnWrap {width: 100%;margin: 0 0 55px;} .bomWrap .btnWrap > * {position: relative;} .bomWrap .btnWrap > * span {position: absolute;top: 100%;left: 50%;transform: translate(-50%, 10px);font-size: 13px;line-height: 1.2em;color: #aaa;letter-spacing: -1px;white-space: nowrap;display: block;} .bomWrap .list {width: 360px; margin-right: 30px; position: relative; z-index: 11;} .bomWrap .list .search {padding: 30px; border: 1px solid #dddddd; box-sizing: border-box} .bomWrap .list .tit {margin-bottom: 20px; font-size: 20px; line-height: 22px; color: #333333; letter-spacing: -0.5px} .bomWrap .list .btns {display: flex; flex-flow: row wrap; margin: 0 -3px; font-size: 0} .bomWrap .list .btns a {width: calc(50% - 6px); height: 40px; font-size: 14px; line-height: 40px; color: #fff; border-radius: 4px; background: var(--point-color2); text-align: center; margin: 0 3px} .bomWrap .list .srch {position: relative; height: 44px; padding-right: 50px; margin-top: 15px; border: 1px solid #ddd; border-radius: 4px} .bomWrap .list .srch > * {height: 42px; border: 0; border-radius: 4px} .bomWrap .list .srch input {width: 100%; padding: 0 20px} .bomWrap .list .srch button {position: absolute; top: 0; right: 0; width: 44px; background: url('../images/sub/sale_srch_ico.png') no-repeat center; text-indent: -999em} .bomWrap .list .box {border: 1px solid #ddd; border-top: 0; position: relative; z-index: 11;} .bomWrap .list .box .scroll {position: relative; height: 640px; overflow-y: scroll} .bomWrap .list .box .scroll::-webkit-scrollbar {width: 18px} .bomWrap .list .box .scroll::-webkit-scrollbar-thumb {background-color: #c0c0c1;border-radius: 2px;background-clip: padding-box;border: 6px solid #fff} .bomWrap .list .box .scroll::-webkit-scrollbar-track {background-color: #fff} .bomWrap .list .box .scroll .new {} .bomWrap .list .box .scroll .new a {} .bomWrap .list .box .scroll .new {position: absolute; top: 50px; left: 50%; display: none; width: 130px; border: 1px solid #ddd; border-radius: 4px; background: #fff; box-sizing: border-box; z-index: 100; box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.02)} .bomWrap .list .box .scroll .new.active {display: block;} .bomWrap .list .box .scroll .new a {display: block; font-size: 14px; line-height: 40px; color: #555555; border-bottom: 1px solid #ddd; box-sizing: border-box; text-align: center; text-decoration: none} .bomWrap .list .box .scroll .new a:last-child {border-bottom: 0} .bomWrap .list .box ul {width: 100%; height: 100%; border-right: 1px solid #ddd} .bomWrap .list .box ul li {position: relative; border-bottom: 1px solid #ddd} .bomWrap .list .box ul li.folder {} .bomWrap .list .box ul li.file {} .bomWrap .list .box ul li > a {position: relative; display: block; padding: 0 25px; font-weight: 500; font-size: 17px; line-height: 68px; color: #333333; letter-spacing: -0.5px; text-decoration: none} .bomWrap .list .box ul li > a:before {content: ''; display: inline-block; vertical-align: middle} .bomWrap .list .box ul li.folder > a:before {width: 17px; height: 14px; background: url('../images/sub/bom_list_folder.png') no-repeat center / contain; margin-right: 9px} .bomWrap .list .box ul li.file > a:before {width: 15px; height: 17px; background: url('../images/sub/bom_list_file.png') no-repeat center / contain; margin-right: 11px} .bomWrap .list .box ul li:hover > a {background: var(--point-color3)} .bomWrap .list .box ul li > a span {position: absolute; top: 0; right: 25px; font-weight: normal; font-size: 13px; line-height: inherit; color: #777777} .bomWrap .list .box ul li .func {position: absolute; top: 50px; left: 50%; display: none; width: 130px; border: 1px solid #ddd; border-radius: 4px; background: #fff; box-sizing: border-box; z-index: 100; box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.02)} .bomWrap .list .box ul li .func.active {display: block;} .bomWrap .list .box ul li .func a {display: block; font-size: 14px; line-height: 40px; color: #555555; border-bottom: 1px solid #ddd; box-sizing: border-box; text-align: center; text-decoration: none} .bomWrap .list .box ul li .func a:last-child {border-bottom: 0} .bomWrap .list .text {margin-top: 15px} .bomWrap .list .text p {position: relative; margin-top: 12px; padding-left: 12px; font-size: 13px; line-height: 21px; color: #777777; letter-spacing: -0.5px} .bomWrap .list .text p span {position: absolute; top: 0; left: 0; font-size: inherit; line-height: inherit; color: inherit} .bomWrap .cont {width: calc(100% - 390px)} .bomWrap .cont dl {position: relative; margin-bottom: 30px; padding: 12px 30px; background: var(--point-color2); border-radius: 8px} .bomWrap .cont dl > * {} .bomWrap .cont dl dt {} .bomWrap .cont dl dt > * {display: inline-block; vertical-align: top; color: #fff; line-height: 36px} .bomWrap .cont dl dt span {font-size: 14px} .bomWrap .cont dl dt h6 {margin-left: 20px; font-weight: 500; font-size: 17px} .bomWrap .cont dl dd {position: absolute; top: 12px; right: 30px} .bomWrap .cont dl dd a {display: inline-block; vertical-align: top; width: 130px; font-weight: 500; font-size: 13px; line-height: 36px; border-radius: 4px; text-align: center; color: #333333} .bomWrap .cont dl dd a.save:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_bk.png') no-repeat center} .bomWrap .cont dl dd a.save {background: #fac23b} .bomWrap .cont dl dd a.edit {background: #fff} .bomWrap .cont dl dd a.data_old {background: #0083d9;color: #fff;} .bomWrap .cont .box {position: relative; z-index: 11;} .bomWrap .cont .box .thead {padding-right: 20px; border-top: 2px solid #333; border-bottom: 1px solid #ddd} .bomWrap .cont .box .thead table {width: 100%} .bomWrap .cont .box .thead table tr th {font-weight: 500; font-size: 14px; line-height: 55px; color: #333333} .bomWrap .cont .box .tbody {position: relative; border-bottom: 1px solid #ddd} .bomWrap .cont .box .tbody .scroll {border-right: 1px solid #ddd; max-height: calc(100% - 390px); overflow-y: scroll} .bomWrap .cont .box .tbody .scroll::-webkit-scrollbar {width: 18px} .bomWrap .cont .box .tbody .scroll::-webkit-scrollbar-thumb {background-color: #c0c0c1;border-radius: 2px;background-clip: padding-box;border: 6px solid #fff} .bomWrap .cont .box .tbody .scroll::-webkit-scrollbar-track {background-color: #fff} .bomWrap .cont .box .tbody .scroll table {width: 100%; border-right: 1px solid #ddd} .bomWrap .cont .box .tbody .scroll table tr td {padding: 15px 10px; text-align: center; border-bottom: 1px solid #ddd; word-break: break-all !important} .bomWrap .cont .box .tbody .scroll table tr:last-child td {border-bottom: 0} .bomWrap .cont .box .tbody .scroll table tr td .tmb {position: relative; display: inline-block; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center} .bomWrap .cont .box .tbody .scroll table tr td .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} .bomWrap .cont .box .tbody .scroll table tr td a {color: #cf0707} .bomWrap .cont .box .tfoot {margin-top: 20px; background: #ebf1f7; border-radius: 8px; padding: 0 30px} .bomWrap .cont .box .tfoot > * {display: inline-block; vertical-align: top; font-size: 15px; line-height: 50px; color: #333333} .bomWrap .cont .box .tfoot p {margin-right: 20px} .bomWrap .cont .box .tfoot strong {font-weight: normal} .bomWrap .cont .form {margin-top: 40px} .bomWrap .cont .form form {} .bomWrap .cont .form ul {border-top: 2px solid #333} .bomWrap .cont .form ul {margin-top: 25px; border-top: 2px solid #333} .bomWrap .cont .form ul li {position: relative; padding: 15px 20px; padding-left: 165px; border-bottom: 1px solid #ddd; font-size: 0} .bomWrap .cont .form ul li strong {position: absolute; top: 15px; left: 25px; font-weight: 500; font-size: 16px; line-height: 46px; color: #333333; letter-spacing: -0.5px} .bomWrap .cont .form ul li p {font-size: 15px; line-height: 46px; color: #666666} .bomWrap .cont .form ul li p b {font-weight: 500; color: #333333} .bomWrap .cont .form ul li span {display: inline-block; vertical-align: top; padding: 0 8px; font-size: 15px; line-height: 46px; color: #555555} .bomWrap .cont .form ul li > em {display: inline-block; vertical-align: top; margin-left: 15px; font-style: normal; font-size: 15px; line-height: 46px; color: #777777} .bomWrap .cont .form ul li .txt {margin-top: 10px; font-size: 15px; line-height: 24px; color: #777777; letter-spacing: -0.5px} .bomWrap .cont .form ul li .inp {width: 300px; height: 46px; line-height: 44px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; padding: 0 20px} .bomWrap .cont .form ul li textarea {width: 100%; height: 140px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; padding: 15px 20px; line-height: 24px} .bomWrap .cont .form ul li .rdo {display: inline-block; margin-right: 7px} .bomWrap .cont .form ul li .rdo input {display: none} .bomWrap .cont .form ul li .rdo label {display: block; width: 140px; height: 46px; font-size: 14px; line-height: 44px; color: #555555; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; text-align: center} .bomWrap .cont .form ul li .rdo input:checked + label {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .bomWrap .cont .form ul li .filebox {position: relative; display: inline-block; font-size: 0} .bomWrap .cont .form ul li .filebox .inp {width: 415px; height: 46px; line-height: 44px} .bomWrap .cont .form ul li .filebox .wbtn {display: inline-block; vertical-align: top; width: 120px; height: 46px; margin-left: 10px; line-height: 44px; border: 0; border-radius: 4px; border: 1px solid #333; font-size: 15px; color: #333333; letter-spacing: -0.5px; text-align: center; box-sizing: border-box} .bomWrap .cont .form ul li .filebox .hiFile {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0} .bomWrap .cont .form .tac {margin-top: 40px} .bomWrap .cont .form .tac button {width: 190px; height: 48px; font-size: 15px; color: #ffffff; border: 0; border-radius: 4px; background: var(--point-color2)} #bomSearch {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 998} #bomSearch .wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1200px; height: auto; box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.1); border-radius: 8px} #bomSearch .wrap .phead {position: relative; border-radius: 7px 7px 0 0; background: var(--point-color2)} #bomSearch .wrap .phead h5 {font-size: 22px; line-height: 70px; color: #fff; letter-spacing: -0.5px; text-align: center} #bomSearch .wrap .phead a {position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 20px; height: 20px; background: url('../images/sub/bom_pop_close.png') no-repeat center; text-indent: -999em} #bomSearch .wrap .pbody {position: relative; border-radius: 0 0 8px 8px; padding-bottom: 30px; background: #fff;} #bomSearch .wrap .pbody form {} #bomSearch .wrap .pbody .srchbar {padding: 30px 50px} #bomSearch .wrap .pbody .srchbar dl {position: relative; padding: 7px 0; padding-left: 135px} #bomSearch .wrap .pbody .srchbar dl > * {line-height: 44px} #bomSearch .wrap .pbody .srchbar dl dt {position: absolute; top: 7px; left: 0; font-weight: 500; font-size: 15px; color: #777777} #bomSearch .wrap .pbody .srchbar dl dd {display: inline-block; vertical-align: top; font-size: 0; margin-right: 25px} #bomSearch .wrap .pbody .srchbar dl dd:last-child {margin-right: 0} #bomSearch .wrap .pbody .srchbar dl dd strong {display: inline-block; vertical-align: top; margin-right: 15px; font-weight: 500; font-size: 15px; line-height: 44px; color: #333} #bomSearch .wrap .pbody .srchbar dl dd .inp {width: 140px; height: 44px; border: 1px solid #ddd; border-radius: 4px; padding: 0 15px; box-sizing: border-box} #bomSearch .wrap .pbody .srchbar dl dd .sbm {margin-left: 5px; width: 95px; height: 44px; font-size: 15px; color: #fff; background: #333; border-radius: 4px; border: 0} #bomSearch .wrap .pbody .srchbar dl dd .sbm:after {content: ''; display: inline-block; vertical-align: middle; width: 13px; height: 13px; background: url('../images/sub/my_srch_ico.png') no-repeat center / contain; margin-left: 5px} #bomSearch .wrap .pbody .srchbar dl dd .keyword {position: relative; display: inline-block; vertical-align: top; width: 270px; height: 44px; padding-right: 50px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 0} #bomSearch .wrap .pbody .srchbar dl dd .keyword input {width: 100%; height: 42px; border: 0; padding: 0 20px; line-height: 42px; border-radius: 4px} #bomSearch .wrap .pbody .srchbar dl dd .keyword button {position: absolute; top: 0; right: 0; width: 45px; height: 42px; border: 0; background: url('../images/sub/sale_srch_ico.png') no-repeat center; text-indent: -999em} #bomSearch .wrap .pbody .tbl {} #bomSearch .wrap .pbody .tbl .thead {padding-right: 20px; border-top: 2px solid #333; border-bottom: 1px solid #ddd} #bomSearch .wrap .pbody .tbl .thead table {width: 100%} #bomSearch .wrap .pbody .tbl .thead table tr th {font-weight: 500; font-size: 14px; line-height: 55px; color: #333333} #bomSearch .wrap .pbody .tbl .tbody {position: relative; border-bottom: 1px solid #ddd} #bomSearch .wrap .pbody .tbl .tbody .scroll {border-right: 1px solid #ddd; height: 370px; overflow-y: scroll} #bomSearch .wrap .pbody .tbl .tbody .scroll::-webkit-scrollbar {width: 18px} #bomSearch .wrap .pbody .tbl .tbody .scroll::-webkit-scrollbar-thumb {background-color: #c0c0c1;border-radius: 2px;background-clip: padding-box;border: 6px solid #fff} #bomSearch .wrap .pbody .tbl .tbody .scroll::-webkit-scrollbar-track {background-color: #fff} #bomSearch .wrap .pbody .tbl .tbody .scroll table {width: 100%; border-right: 1px solid #ddd} #bomSearch .wrap .pbody .tbl .tbody .scroll table tr td {padding: 15px 10px; text-align: center; color: #555555; border-bottom: 1px solid #ddd; word-break: break-all !important} #bomSearch .wrap .pbody .tbl .tbody .scroll table tr:hover td {background: var(--point-color3)} #bomSearch .wrap .pbody .tbl .tbody .scroll table tr:last-child td {border-bottom: 0} #bomSearch .wrap .pbody .tbl .tbody .scroll table tr td .tmb {position: relative; display: inline-block; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center} #bomSearch .wrap .pbody .tbl .tbody .scroll table tr td .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} #bomSearch .wrap .pbody .tbl .tbody table tr td input {} #bomSearch .wrap .pbody .tbl .tbody table tr td span.clrB {font-weight: 500; color: #064189} #bomSearch .wrap .pbody .paging2 {} #bomSearch .wrap .pbody .bttn {position: absolute; bottom: 30px; right: 40px} #bomSearch .wrap .pbody .bttn button {width: 145px; height: 40px; line-height: 40px; border: 0; border-radius: 4px; background: var(--point-color2); font-size: 14px; color: #fff} #bomSearch ._bg {} .memWrap {} .memWrap dl {display: flex; margin: 0 -10px} .memWrap dl > * {width: calc(50% - 20px); margin: 0 10px; border-radius: 10px; background: var(--point-color3); text-align: center} .memWrap dl strong {display: inline-block; vertical-align: top; font-size: 20px; color: #333333; letter-spacing: -0.5px; line-height: 120px} .memWrap dl strong:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 15px} .memWrap dl dt strong:before {width: 39px; height: 33px; background: url('../images/sub/mem_point_ico.png') no-repeat center} .memWrap dl dd strong:before {width: 48px; height: 25px; background: url('../images/sub/mem_coupon_ico.png') no-repeat center} .memWrap dl dd:last-child strong:before {width: 39px; height: 33px; background: url('../images/sub/mem_friend_ico.png') no-repeat center; } .memWrap .tbl {margin-top: 50px} .memWrap .tbl table {width: 100%; border-top: 2px solid #333} .memWrap .tbl table tr th {font-weight: 500; font-size: 16px; line-height: 64px; color: #333333; letter-spacing: -0.5px; border-bottom: 1px solid #ddd} .memWrap .tbl table tr td {font-size: 0; border-bottom: 1px solid #ddd} .memWrap .tbl table tr td > * {display: inline-block; vertical-align: top; text-align: center} .memWrap .tbl table tr td .parts {width: 30%} .memWrap .tbl table tr td .parts > * {line-height: 76px} .memWrap .tbl table tr td .parts img {margin-right: 20px} .memWrap .tbl table tr td .parts b {margin-right: 15px; font-weight: 500; font-size: 16px; color: #333333} .memWrap .tbl table tr td .parts span {font-size: 14px; color: #666666} .memWrap .tbl table tr td p {position: relative; width: 35%; padding: 26px 0; font-size: 15px; line-height: 24px; color: #666666} .memWrap .tbl table tr td p.tal {width: 70%;text-align: left;padding-left: 30px;} .memWrap .tbl table tr td p:before {content: ''; position: absolute; top: 26px; left: 0; width: 1px; height: 24px; background: #ddd} .memWrap .tbl table tr td p strong {margin-right: 10px; font-weight: 500; font-size: 16px; color: #333333} .memWrap .tbl table tr td .bnf {width: 35%; height: 79px; margin: -1px 0; font-weight: 500; font-size: 16px; line-height: 76px; color: #fff; background: #064189} .memWrap .text {margin-top: 25px; font-size: 15px; line-height: 28px; color: #666666} .edtWrap {} .edtWrap form {} .edtWrap .bar {position: relative; margin-bottom: 40px; padding: 15px 40px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9; box-sizing: border-box} .edtWrap .bar > div {} .edtWrap .bar .prdt {} .edtWrap .bar .prdt > * {display: inline-block; vertical-align: top} .edtWrap .bar .prdt span {margin-right: 20px; font-weight: 500; font-size: 16px; line-height: 44px; color: #333333} .edtWrap .bar .prdt .keyword {font-size: 0} .edtWrap .bar .prdt .keyword input {width: 360px; padding: 0 20px; line-height: 42px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box} .edtWrap .bar .prdt .keyword button {width: 145px; height: 44px; margin-left: 5px; border: 0; border-radius: 4px; font-size: 14px; color: #fff; background: var(--point-color2)} .edtWrap .bar .bttn {position: absolute; top: 15px; right: 40px; font-size: 0} .edtWrap .bar .bttn a {display: inline-block; vertical-align: top; width: 160px; height: 44px; margin-left: 8px; font-size: 14px; line-height: 44px; border-radius: 4px; text-align: center} .edtWrap .bar .bttn a:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px} .edtWrap .bar .bttn .save1 {background: #fac23b; color: #333} .edtWrap .bar .bttn .save1:before {width: 14px; height: 13px; background: url('../images/sub/edit_save_ico.png') no-repeat center / contain} .edtWrap .bar .bttn .save2 {background: #333333; color: #fff} .edtWrap .bar .bttn .save2:before {width: 12px; height: 15px; background: url('../images/sub/edit_file_ico.png') no-repeat center / contain} .edtWrap .tabBox {position: relative;} .edtWrap .tabBox .bttn {position: absolute; top: 0; right: 0; font-size: 0} .edtWrap .tabBox .bttn > * {display: inline-block; vertical-align: top; width: 140px; font-size: 15px; line-height: 46px; color: var(--point-color2); letter-spacing: -0.5px; border: 1px solid var(--point-color2); border-radius: 4px; text-align: center; text-decoration: none} .edtWrap .tabBox .bttn > .chk {background: var(--point-color2); color: #fff;margin-right: 10px;} .edtWrap .tabBox .tabList {margin-bottom: 25px; font-size: 0} .edtWrap .tabBox .tabList li {display: inline-block; vertical-align: top; margin-right: 10px} .edtWrap .tabBox .tabList li a {display: block; width: 140px; font-size: 15px; line-height: 46px; color: #555555; letter-spacing: -0.5px; border: 1px solid #ddd; border-radius: 4px; text-align: center; text-decoration: none} .edtWrap .tabBox .tabList li.active a {background: var(--point-color2); border-color: var(--point-color2); color: #fff} .edtWrap .tabBox .tabCont {} .edtWrap .tabBox .tabCont .cont {} .edtWrap .tabBox .tabCont .cont .scroll {} .edtWrap .cont .thead {padding-right: 20px; border-top: 2px solid #333; border-bottom: 1px solid #ddd} .edtWrap .cont .thead table {width: 100%} .edtWrap .cont .thead table tr th {font-weight: 500; font-size: 14px; line-height: 55px; color: #333333} .edtWrap .cont .thead table tr th input {vertical-align: middle; margin-top: 0} .edtWrap .cont .tbody {position: relative; border-bottom: 1px solid #ddd} .edtWrap .cont .tbody .scroll {border-right: 1px solid #ddd; height: 520px; overflow-y: scroll} .edtWrap .cont .tbody .scroll::-webkit-scrollbar {width: 18px} .edtWrap .cont .tbody .scroll::-webkit-scrollbar-thumb {background-color: #c0c0c1;border-radius: 2px;background-clip: padding-box;border: 6px solid #fff} .edtWrap .cont .tbody .scroll::-webkit-scrollbar-track {background-color: #fff} .edtWrap .cont .tbody table {width: 100%; border-right: 1px solid #ddd} .edtWrap .cont .tbody table tr td {padding: 15px 0; font-size: 14px; color: #555555; text-align: center; border-bottom: 1px solid #ddd; word-break: break-all !important;position: relative; } .edtWrap .cont .tbody table tr td .colRed {font-size: 13px;letter-spacing: -1px;line-height: 1.4em;} .edtWrap .cont .tbody table tr:last-child td {border-bottom: 0} .edtWrap .cont .tbody table tr td input[type=checkbox] {} .edtWrap .cont .tbody table tr td .tmb {position: relative; display: inline-block; vertical-align: top; width: 60px; height: 60px; background-size: cover; background-repeat: no-repeat; background-position: center} .edtWrap .cont .tbody table tr td .tmb:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box} .edtWrap .cont .tbody table tr td a.srch {color: #cf0707} .edtWrap .cont .tbody table tr td a.del {display: inline-block; vertical-align: middle; width: 22px; height: 22px; background: url('../images/sub/edit_del_ico.png') no-repeat center / contain} .edtWrap .cont .tbody table tr td .inp {padding: 0 10px; height: 40px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box} .edtWrap .cont .tbody table tr td .w50 {width: 50px} .edtWrap .cont .tbody table tr td .w80 {width: 80px} .edtWrap .cont .tbody table tr td .list_item_option {width: 230px;} .edtWrap .savebtn {margin: 30px 0 20px; text-align: right; font-size: 0} .edtWrap .savebtn a {display: inline-block; vertical-align: top; width: 120px; margin-left: 5px; font-size: 14px; line-height: 38px; color: #fff; background: var(--point-color2); text-align: center; border-radius: 4px} .edtWrap .savebtn a.file:before {content: ''; display: inline-block; vertical-align: middle; margin-right: 5px; width: 10px; height: 12px; background: url('../images/sub/my_down_ico_wt.png') no-repeat center / contain} .edtWrap .total {} .edtWrap .total table {width: 100%; border-top: 2px solid #333} .edtWrap .total table tr > * {border-bottom: 1px solid #ddd} .edtWrap .total table tr th {background: #f7f7f7} .edtWrap .total .tbl1 {} .edtWrap .total .tbl1 table {} .edtWrap .total .tbl1 table tr > * {padding: 15px} .edtWrap .total .tbl1 table tr th {font-weight: 500; font-size: 15px; color: #333333} .edtWrap .total .tbl1 table tr td {} .edtWrap .total .tbl1 table tr td .inp {padding: 0 15px; height: 46px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box} .edtWrap .total .tbl1 table tr td .w80 {width: 80px} .edtWrap .total .tbl1 table tr td .w320 {width: 320px} .edtWrap .total .tbl1 table tr td span {display: inline-block; vertical-align: top; font-size: 15px; line-height: 46px; color: #666} .edtWrap .total .tbl1 table tr td .mr5 {margin-right: 5px} .edtWrap .total .tbl1 table tr td .ml5 {margin-left: 5px} .edtWrap .total .tbl2 {margin-top: 30px} .edtWrap .total .tbl2 table tr > * {font-size: 18px; line-height: 55px; text-align: center} .edtWrap .total .tbl2 table tr th {font-weight: 500; color: #333333} .edtWrap .total .tbl2 table tr td {font-weight: bold; color: #333333} .edtWrap .total .tbl2 table tr td span {font-weight: normal; font-size: 15px; color: #666666} .edtWrap .tac {margin-top: 50px; font-size: 0} .edtWrap .tac button {width: 190px; margin: 0 5px; font-size: 15px; line-height: 48px; border: 0; border-radius: 4px; background: var(--point-color2); color: #fff} #bomEstimate {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 998} #bomEstimate .wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 920px; height: auto;max-height: calc(100vh - 40px);overflow: hidden;overflow-y: auto; box-shadow: -1px 2px 10px 4px rgba(0,0,0,0.1); border-radius: 8px; background: #fff} #bomEstimate .wrap .close {position: absolute;top: 0;right: 0;width: 50px;height: 50px;background: #333;color: #fff;display: flex;justify-content: center;align-items: center;text-align: center;border-radius: 0 0 0 5px;text-decoration: none !important;} #bomEstimate .wrap .close i {font-size: 20px;display: block;} #bomEstimate .cont {padding: 30px 50px} #bomEstimate .cont .title {margin-bottom: 20px} #bomEstimate .cont .title img {height: 25px} #bomEstimate .cont .title p {margin-top: 10px; padding-top: 10px; border-top: 2px solid #333; font-size: 14px; line-height: 22px; color: #555555} #bomEstimate .cont .head {display: flex; flex-flow: row wrap; border: 1px solid #ddd; border-top: 2px solid #333; box-sizing: border-box} #bomEstimate .cont .head > * {padding: 25px 30px; box-sizing: border-box} #bomEstimate .cont .head > dt {width: calc(50% - 100px); border-right: 1px solid #ddd} #bomEstimate .cont .head > dt ul {} #bomEstimate .cont .head > dt ul li {position: relative; padding-left: 55px} #bomEstimate .cont .head > dt ul li > * {font-size: 15px; line-height: 28px} #bomEstimate .cont .head > dt ul li strong {position: absolute; top: 0; left: 0; font-weight: 500; color: #333333} #bomEstimate .cont .head > dt ul li p {color: #555555} #bomEstimate .cont .head > dd {width: calc(50% + 100px)} #bomEstimate .cont .head > dd h6 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ddd; font-size: 20px; line-height: 24px; color: #333333} #bomEstimate .cont .head > dd .tbl {} #bomEstimate .cont .head > dd .tbl table {width: 100%} #bomEstimate .cont .head > dd .tbl table tr > * {font-size: 14px; line-height: 28px; letter-spacing: -0.5px; text-align: left} #bomEstimate .cont .head > dd .tbl table tr th {font-weight: 500; color: #333333} #bomEstimate .cont .head > dd .tbl table td {} #bomEstimate .cont .text {margin-top: 10px; font-size: 14px; line-height: 22px; color: #555555} #bomEstimate .cont .box {margin-top: 15px} #bomEstimate .cont .box .tit {} #bomEstimate .cont .box .tit h5 {font-size: 24px; line-height: 30px; color: #333; text-align: center} #bomEstimate .cont .box .total {margin-bottom: 10px} #bomEstimate .cont .box .total h5 {display: inline-block; vertical-align: top; margin-right: 5px; font-weight: 500; font-size: 16px; line-height: 30px; color: #333} #bomEstimate .cont .box .total h5 span {font-weight: normal; font-size: 14px; color: #888} #bomEstimate .cont .box .total h5 b {font-weight: bold; font-size: 18px} #bomEstimate .cont .box .tbl table {width: 100%; border-top: 2px solid #333} #bomEstimate .cont .box .tbl table tr > * {padding: 15px 0; font-size: 14px; line-height: 22px; color: #555555; border-bottom: 1px solid #ddd; text-align: center} #bomEstimate .cont .box .tbl table tr th {font-weight: 500; font-size: 15px; color: #333} #bomEstimate .cont .box .tbl table tr td {word-break: break-all !important;} #bomEstimate .cont .box .tbl-invoice h3 {font-weight: 700;font-size: 18px;display: block;text-align: center;color: var(--point-color2);} #bomEstimate .cont .box .tbl-invoice table {width: 100%;} #bomEstimate .cont .box .tbl-invoice table tr > * {padding: 10px 5px;font-size: 14px;line-height: 1.2em;color: var(--point-color1);} #bomEstimate .cont .box .tbl-invoice table tr th {font-weight: 500;color: var(--point-color2);} #bomEstimate .cont .box .tbl-invoice table tr td {word-break: break-all !important;} #bomEstimate .cont .box .tbl-invoice tr > * {border: 2px solid var(--point-color2);} #bomEstimate .cont .box .tfoot {margin-top: 25px; padding: 15px 25px; background: #f7f7f7} #bomEstimate .cont .box .tfoot dl {display: flex; flex-flow: row wrap} #bomEstimate .cont .box .tfoot dl > * {display: inline-block; vertical-align: top; font-weight: 500; font-size: 16px; line-height: 30px; color: #333} #bomEstimate .cont .box .tfoot dl dt {width: 20%} #bomEstimate .cont .box .tfoot dl dd {width: 80%; text-align: right} #bomEstimate .cont .box .tfoot dl dd p {display: inline-block; vertical-align: top; font-size: inherit; line-height: inherit; color: inherit; margin-left: 20px} #bomEstimate .cont .box .tfoot dl dd p span {font-size: 13px; color: #555555} #bomEstimate .cont .box > p {margin-top: 10px; font-size: 14px; line-height: 22px; color: #555555} #bomEstimate .cont .tac {margin-top: 20px; font-size: 0} #bomEstimate .cont .tac button {width: 190px; margin: 0 5px; font-size: 15px; line-height: 48px; border: 0; border-radius: 4px; background: var(--point-color2); color: #fff} @page { size: A4; } @media print { body { width: 210mm; height: 297mm; } #printArea {padding: 1mm;} #printArea .title {margin-bottom: 10px;} #printArea .title p {font-size: 13px;line-height: 1.4em;} #printArea .head > * {padding: 15px 20px;} #printArea .head > dd h6 {font-size: 15px;line-height: 1.4em;} #printArea .head > dd .tbl table tr > * {font-size: 13px;line-height: 1.4em;} #printArea .text {font-size: 13px;line-height: 1.4em;} #printArea .box .tit h5 {font-size: 15px;line-height: 1.4em;} #printArea .box .total h5 {font-size: 14px;line-height: 1.4em;} #printArea .box .tbl table tr > * {padding-top: 10px;padding-bottom: 10px;font-size: 13px;line-height: 1.4em;} #printArea .box .tfoot {margin-top: 15px;padding: 10px 15px;} #printArea .box .tfoot dl > * {font-size: 15px;line-height: 1.4em;} #printArea .box > p {font-size: 13px;line-height: 1.4em;} } .btn-heart {position: absolute;bottom: 7px;right: 7px;z-index: 11;} .btn-heart > button {display: flex;justify-content: center;align-items: center;text-align: center;width: 35px;height: 33px;text-align: center;background: url('../images/main/btn-heart.png') no-repeat center center;background-size: contain;border: 0;box-sizing: border-box;padding-top: 1px;} .btn-heart > button i {display: none;} .btn-heart > button.on {background-image: url('../images/main/btn-heart2.png');} .btn-cart {position: absolute;bottom: 40px;right: 7px;z-index: 11;} .btn-cart > button {display: flex;justify-content: center;align-items: center;text-align: center;width: 35px;height: 33px;text-align: center;border: 0;box-sizing: border-box;background: none;} .btn-cart > button i {display: block;text-align: center;line-height: 33px;font-size: 17px;color: #bfbfbf;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;} .btn-cart.bttn {position: static;background: #fff;} .brdWrap .tbl table tr td {position: relative;} .list_item_option {position: absolute;top: 5px;right: 5px;width: calc(100% - 10px);z-index: 12;background: #fff;border-radius: 10px;overflow: hidden;padding: 15px 10px;box-sizing: border-box;border: 1px solid #ccc;box-shadow: 0 0 10px rgba(0,0,0,0.12);} .list_item_option table tr > * {padding: 2px;font-size: 12px;} .list_item_option table tr > th {display: none;} .list_item_option table select {height: 30px;font-size: 12px;letter-spacing: -1px;width: 100%;box-sizing: border-box;} .list_item_option .btnWrap {margin-top: 10px;} .list_item_option .btnWrap > * {height: 30px;line-height: 28px;padding: 0 10px;font-size: 12px;} #down, #up {background-color: #fff;} #down i, #up i {display: none;} #od_cp_title {font-size: 13px;color: #333;} #od_cp_price {font-size: 13px;color: #333;margin-left: 5px;} #od_coupon_btn {margin-left: 15px !important;} /* shop skin */ .td_prd .prd_name, .td_prd .prd_name * {word-break: break-all !important;} /* 고객센터 */ .bd_align_wrap {display: flex;flex-wrap: wrap;margin: -15px;margin-bottom: 35px;} .bd_align_wrap > dl {margin: 15px;width: calc(50% - 30px);} .bd_align_wrap > dl.w100 {width: calc(100% - 30px);} .bd_align_wrap > dl > dd {border: 1px solid #ddd;padding: 15px;border-top: 2px solid #333;} .bd_align_wrap > dl > dd > strong {display: block;margin: 25px 0 10px;font-size: 15px;color: #333;font-weight: bold;} .bd_align_wrap .btns {display: flex;flex-wrap: wrap;margin: -2px;} .bd_align_wrap .btns > li {margin: 2px;} .bd_align_wrap .btn6 {background-color: #efd702 !important;border-color: #efd702 !important;color: #3a2020 !important;font-weight: 500;} .bd_list > li + li {margin-top: 5px;} .bd_list > li {position: relative;padding-left: 8px;} .bd_list > li:after {display: block;content: '';width: 2px;height: 2px;background: #999;border-radius: 50%;position: absolute;top: 14px;left: 0;} .bd_list > li a {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;line-height: 30px;display: block;} .customer_inf {display: flex;align-items: center;} .customer_inf > dt {margin-right: 30px;position: relative;padding-left: 60px;} .customer_inf > dt i {font-size: 40px;color: #999;position: absolute;top: 50%;left: 0;transform: translateY(-55%);} .customer_inf > dt strong {display: block;font-size: 18px;color: #333;font-weight: bold;} .customer_inf > dt p {font-size: 13px;line-height: 1.6em;} .customer_inf > dd {font-size: 14px;line-height: 1.6em;letter-spacing: -1px;} .download_list {display: flex;flex-wrap: wrap;margin: -5px;} .download_list > li {width: calc(100%/3 - 10px);margin: 5px;box-sizing: border-box;background: #f8f8f8;border: 1px solid #eee;padding: 10px;border-radius: 3px;display: flex;flex-direction: column;justify-content: center;align-items: start;} .download_list > li p {font-size: 14px;line-height: 1.6em;letter-spacing: -1px;} .download_list > li strong {font-size: 15px;color: #333;font-weight: bold;} .download_list > li .ssmall {margin-top: 8px;} /* 이벤트 / 기획전 */ .full_wrapper{width: 100vw;position: relative;left: 50%;transform: translate(-50%, 0);} .full_wrapper.bg_gray{padding: 100px 0;background: #f7f7f7;} .full_wrapper.bg_sky{padding: 100px 0;background: #ebf1f7;} .full_wrapper .inner{width: var(--website-layout-width);margin: 0 auto;} #event_new .list {display: flex;flex-wrap: wrap;margin: -10px;} #event_new .list > li {margin: 10px;width: calc(25% - 20px);position: relative;} #event_new .list > li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} #event_new .list > li .tmb {padding-bottom: 63.157%;border-radius: 15px;overflow: hidden;background-repeat: no-repeat;background-position: center center;background-size: cover;} #event_new .cont_wrap {margin-top: 60px;} #event_view .evt_head {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;border-bottom: 1px solid #ddd;border-top: 1px solid #000;padding: 20px;} #event_view .evt_head > h3 {font-size: 20px;color: #333;font-weight: 700;line-height: 1.4em;display: block;} #event_view .evt_body {margin-top: 30px;} #event_view .t1 {display: block;text-align: center;margin-bottom: 35px;font-size: 36px;color: #333;font-weight: 700;line-height: 1.4em;} #event_view .t2 {display: block;text-align: center;margin-bottom: 35px;font-size: 20px;color: #555;line-height: 1.4em;} #event_view .t3 {display: block;text-align: center;margin-bottom: 35px;font-size: 17px;color: #555;line-height: 1.4em;} #event_view .t1 + .t2 {margin-top: -20px;} #event_view .t1 + .t3 {margin-top: -20px;} #event_view .attendance_check {margin-top: 60px;background: var(--point-color3);border-radius: 10px;overflow: hidden;padding: 80px 60px;} #event_view .attendance_check > .title {margin-bottom: 40px;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center;} #event_view .attendance_check > .title > .t1 {margin-bottom: 0;} #event_view .attendance_check .dt {margin-top: 20px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-size: 17px;color: #555;line-height: 22px;} #event_view .attendance_check .dt > hr {width: 35px;border: 0px;height: 0;display: inline-block;vertical-align: middle;padding: 0;} #event_view .attendance_check .dt > strong {font-size: inherit;color: #333;font-weight: 600;} #event_view .tbl_wrap {margin-top: 50px;background: #fff;border-radius: 10px;overflow: hidden;padding: 50px;} #event_view .tbl_wrap table {width: 100%;border-top: 2px solid #000;} #event_view .tbl_wrap table thead tr > * {border: 0px;text-align: center;height: 70px;font-size: 20px;color: #333;font-weight: 700;} #event_view .tbl_wrap table tr > td {border: 1px solid #ddd;border-right: 0px;padding: 20px;} #event_view .tbl_wrap table tr > td:first-child {border-left: 0px;} #event_view .tbl_wrap table tr > td > em {display: block;font-style: normal;margin-bottom: 15px;text-align: center;font-size: 18px;color: #333;font-weight: 600;} #event_view .tbl_wrap table tr > td > img {display: block;margin: 0 auto;} #event_view .btnWrap {margin-top: 40px;} #event_view .btnWrap .big {width: 240px;padding: 0;text-align: center;height: 54px;line-height: 52px;border-radius: 5px;font-size: 16px;} #event_view .db_wrap {margin-top: 70px;} #event_view .db_wrap table {width: 100%;border-top: 2px solid #000;} #event_view .db_wrap table thead tr > * {border: 0px;text-align: center;height: 65px;font-size: 16px;color: #333;font-weight: 700;} #event_view .db_wrap table tr > * {border: 1px solid #ddd;border-width: 1px 0;padding: 25px 0;text-align: center;font-size: 16px;color: #333;} #event_view .db_wrap table tr > th > strong {position: relative;display: inline-flex;align-items: center;font-size: 16px;color: #333;font-weight: 500;} #event_view .db_wrap table tr > th > strong img {position: absolute;top: 50%;right: 100%;transform: translate(-12px, -50%);} #event_view .db_wrap table tr > td {position: relative;} #event_view .db_wrap table tr > td:after {display: block;content: '';width: 1px;position: absolute;top: 22px;bottom: 22px;background: #ddd;} #event_view .card_box {display: flex;flex-wrap: wrap;margin: -10px;max-width: 600px;margin-left: auto;margin-right: auto;} #event_view .card_box > dl {margin: 10px;width: calc(50% - 20px);box-sizing: border-box;display: flex;flex-direction: column;border-radius: 10px;overflow: hidden;box-shadow: 2px 2px 10px rgba(0,0,0,0.1);} #event_view .card_box > dl > dt {background: var(--point-color3);padding: 20px;font-size: 18px;color: #333;font-weight: 700;} #event_view .card_box > dl > dd {padding: 20px;background: #222;} #event_view .card_box > dl > dd > strong {display: block;font-size: 24px;color: #fff;font-weight: 600;} #event_view .card_box > dl > dd > p {margin-top: 5px;color: #fff;} #event_view .card_box > dl.red > dt {background: var(--color-red);color: #fff;} #event_view .banner_mid {margin: 100px 0;padding: 100px 50px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #222;border-radius: 20px;overflow: hidden;} #event_view .banner_mid > * {text-align: center;color: #fff;} #event_view .banner_mid .btns {display: flex;flex-direction: column;} #event_view .banner_mid .btns > * {width: 320px;margin: 2px 0;background: #fac23b;border-color: #fac23b;color: #111 !important;} #event_view .banner_mid.blue {background-color: #041933;} #event_view .banner_mid.blue .btns > * {background-color: var(--point-color2);border-color: var(--point-color2);color: #fff !important;} #event_view .group_wrap {margin-top: 50px;} #event_view .group_wrap .t3 {background: var(--point-color3);border-radius: 5px;overflow: hidden;padding: 15px;} .raffle_slide {position: relative;max-width: 1200px;margin: 0 auto;} .raffle_slide .item dl {padding: 30px;padding-right: 100px;border-radius: 15px;background: #fff;overflow: hidden;display: flex;justify-content: space-between;align-items: center;} .raffle_slide .item dl > dd {width: calc(100% - 440px);display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;} .raffle_slide .item dl .tmb {width: 340px;padding-bottom: 100%;border-radius: 10px;overflow: hidden;background-repeat: no-repeat;background-position: center center;background-size: cover;} .raffle_slide .item dd > mark {margin-bottom: 15px;width: 115px;height: 32px;line-height: 32px;border-radius: 16px;background: var(--point-color2);font-size: 17px;color: #fff;text-align: center;} .raffle_slide .item dd > .countdown {font-size: 60px;color: #222;font-family: 'Open Sans';font-weight: 700;letter-spacing: 0.02em;line-height: 70px;} .raffle_slide .item dd > .line {width: 100%;margin: 25px 0;height: 3px;border-radius: 2px;background: #e5e5e5;} .raffle_slide .item dd > .line span {display: block;max-width: 100%;width: 1%;height: calc(100% + 4px);border-radius: 4px;background: var(--point-color2);transform: translateY(-2px);overflow: hidden;text-indent: -999999999px;} .raffle_slide .item dd > p {width: 100%;font-size: 20px;color: #333;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .raffle_slide .item dd .people_num {position: absolute;top: 213px;right: 0;font-size: 18px;color: var(--point-color1);font-weight: 500;display: flex;align-items: center;} .raffle_slide .item dd .people_num i {margin-right: 3px;font-size: 22px;} .raffle_slide .item dd .price {width: 100%;margin-top: 12px;display: inline-flex;align-items: center;} .raffle_slide .item dd .price > strong {margin-right: 10px;font-family: 'Open Sans';font-weight: 700;font-size: 26px;color: #333;} .raffle_slide .item dd .price > strong.colRed {color: #df0076 !important;} .raffle_slide .item dd .price > s {font-size: 16px;color: #888;transform: translateY(2px);} .raffle_slide .item dd .btns {margin-top: 30px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;} .raffle_slide .item dd .btns > * {padding-left: 0;padding-right: 0;width: 220px;height: 50px;line-height: 48px;border-radius: 5px;} .raffle_slide .slick-arrow {position: absolute;top: 50%;width: 13px;height: 20px;border: 0;text-indent: -999em;margin-top: -10px;} .raffle_slide .slick-prev {left: -50px; background: url('../images/main/main_prev_arrow.png') no-repeat center / contain} .raffle_slide .slick-next {right: -50px; background: url('../images/main/main_next_arrow.png') no-repeat center / contain} .ended_list {display: flex;flex-wrap: wrap;margin: -15px;} .ended_list > li {width: calc(100%/3 - 30px);margin: 15px;position: relative;} .ended_list > li > .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} .ended_list > li > .tmb {padding-bottom: 100%;position: relative;border-radius: 10px;overflow: hidden;background-repeat: no-repeat;background-position: center center;background-size: contain;} .ended_list > li > .tmb > .btn1 {position: absolute;bottom: 15px;left: 15px;right: 15px;height: 46px;line-height: 46px;border-radius: 23px;background: rgba(0,0,0,0.3);border: 0 !important;font-size: 15px;color: #fff;} .ended_list > li > strong {margin: 22px 0;font-size: 17px;color: #333;font-weight: 500;line-height: 28px;display: -webkit-box !important;-webkit-box-orient: vertical !important;-webkit-line-clamp: 2 !important;overflow: hidden !important;text-overflow: ellipsis !important;white-space: normal !important;} .ended_list > li > .inf {padding-top: 20px;display: flex;justify-content: space-between;align-items: end;border-top: 1px solid #ddd;} .ended_list > li > .inf > .price {font-family: 'Open Sans';font-weight: 500;font-size: 17px;color: #333;} .ended_list > li > .inf > .people_num {font-size: 16px;color: var(--point-color1);font-weight: 500;display: flex;align-items: center;} .ended_list > li > .inf > .people_num i {margin-right: 3px;font-size: 20px;} #ended_pop_view {padding: 50px;} #ended_pop_view .raffle_slide .item dl {padding: 0;align-items: start;border-radius: 0;} #ended_pop_view .raffle_slide .item dl > dd {flex-direction: inherit;align-items: center;flex-wrap: wrap;justify-content: start;} #ended_pop_view .raffle_slide .item dd > mark {margin-bottom: 0;margin-right: 20px;width: 100px;padding-left: 5px;box-sizing: border-box;} #ended_pop_view .raffle_slide .item dd > .countdown {font-size: 42px;line-height: 50px;} #ended_pop_view .raffle_slide .item dl > dd > p {width: 100%;margin-top: 10px;} #ended_pop_view .raffle_slide .item dl > dd > .dt {width: 100%;} #ended_pop_view .raffle_slide .item dd .people_num {top: auto;bottom: 12px;left: 0;} #ended_pop_view .raffle_slide .item dl > dd > .btns {width: 100%;justify-content: end;} #ended_pop_view .raffle_slide .item dd .dt {background: #f8f8f8;border-radius: 15px;padding: 20px 30px;margin-top: 20px;} #ended_pop_view .raffle_slide .item dd .dt > li {display: flex;font-size: 13px;line-height: 20px;color: #333;font-weight: normal;} #ended_pop_view .raffle_slide .item dd .dt > li + li {margin-top: 5px;} #ended_pop_view .raffle_slide .item dd .dt > li > em {width: 100px;font-style: normal;font-size: 13px;color: #888;font-weight: 500;} #ended_pop_view .myWrap {margin: 50px -50px;padding: 50px;} #ended_pop_view .memoWrap {margin-top: 80px;} .sch_wrap {margin-bottom: 90px;border: 1px solid #ccc;border-radius: 5px;overflow: hidden;box-shadow: 3px 3px 20px rgba(0,0,0,0.1);} .sch_wrap > * {padding: 20px;} .sch_wrap > dt {display: flex;align-items: center;position: relative;background-color: #f8f8f8;} .sch_wrap > dt > img {max-width: 200px;max-height: 40px;} .sch_wrap > dt > strong {margin-left: 20px;font-size: 20px;color: #333;font-weight: 700;letter-spacing: -1px;line-height: 24px;} .sch_wrap > dt > p {margin-left: 15px;line-height: 24px;} .sch_wrap > dt > p span {font-size: inherit;font-weight: 500;} .sch_wrap > dt .tar {position: absolute;top: 50%;right: 20px;font-size: 18px;color: #444;font-weight: 500;letter-spacing: -1px;transform: translateY(-50%);} .sch_wrap > dd {border-top: 1px solid #ccc;} .sch_wrap.blue > dt {background-color: var(--point-color2);color: #fff;} .sch_wrap.blue > dt > img {filter: brightness(0) invert(1);} .sch_wrap.blue > dt > strong {color: #fff;} .sch_wrap.blue > dt > p {color: #fff;} .sch_wrap.blue > dt > p span {color: #fff !important;} /************************************************** Iniit progress bar **************************************************/ #loading-screen{background: rgba(0,0,0,0.8);position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9000;display: block;} #loading-screen .in{width: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} #loading-screen .loading_logo {background: transparent !important;margin: 0 auto;width: 350px;height: 250px;border-radius: 10px;background: #fff;overflow: hidden;display: flex;justify-content: center;align-items: center;} #loading-screen .loading_logo img {max-width: 90%;max-height: 95%;} #loading-screen .loading_t1 {margin-top: 20px;display: block;text-align: center;font-size: 24px;color: var(--color-red);font-weight: 700;letter-spacing: -1px;line-height: 1.4em;} @media screen and (max-width: 1200px) { #loading-screen .in{width: auto;} /* #loading-screen .loading_logo {max-width: 200px;height: 70px;} */ #loading-screen .loading_t1 {margin-top: 15px;font-size: 17px;} } .popform_wrap {padding: 30px;} .popform_wrap legend {display: none;} .popform_wrap h3 {margin-bottom: 10px;display: block;font-size: 15px;color: #111;font-weight: 700;letter-spacing: -1px;line-height: 1.4em;} .popform_wrap h3 + .tar {margin-top: -30px;} /* .popform_wrap .table1 tr > * {padding: 8px;font-size: 13px;line-height: 17px;text-align: center;} */ .popform_wrap .table1 tr > * {padding: 8px;font-size: 13px;line-height: 17px;} .popform_wrap .table1 tr > .td_bdno {text-align: left;} .popform_wrap .w70px {width: 70px;padding: 0 8px !important;font-size: 13px !important;} .cate_ico {position: relative; margin: -18px;margin-bottom: 62px;display: flex;flex-wrap: wrap;align-items: start;} .cate_ico a {display: flex;flex-direction: column;align-items: center;justify-content: center;width: calc(100%/9 - 36px);margin: 18px; font-size: 15px; line-height: 23px; color: #555555; letter-spacing: -0.5px; text-align: center; text-decoration: none;word-break: break-all !important;} .cate_ico a .img {position: relative; display: inline-block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 50%; box-sizing: border-box;overflow: hidden;} .cate_ico a.active .img, .cate_ico a:hover .img {border-color: var(--point-color2); background: var(--point-color2)} .cate_ico a .img img.act {position: absolute; top: 0; left: 0; opacity: 0} /* act는 사용 안함 */ .cate_ico a .img img.act{ display:none !important; } .cate_ico a .img{ position:relative; width:100px; height:100px; border-radius:50%; overflow:hidden; } /* 파란 원형 배경 (원한다면 유지) */ .cate_ico a .img::before{ content:""; position:absolute; inset:0; border-radius:50%; background:#c9d7ea; /* act 원 배경색 */ opacity:0; transform:scale(.92); transition:opacity .2s, transform .2s; z-index:0; } /* def 이미지 */ .cate_ico a .img img.def{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; } /* 파란 틴트(이미지 위에 얹고 multiply로 섞기) */ .cate_ico a .img::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#9fb6d6; /* 틴트 색 (조정 가능) */ opacity:0; /* 평소 숨김 */ mix-blend-mode:multiply; /* ← 핵심: 이미지에 파란 기를 입힘 */ transition:opacity .2s; z-index:2; /* def 위 */ } /* hover 시 act 느낌으로 */ .cate_ico a:hover .img::before{ opacity:1; transform:scale(1); } .cate_ico a:hover .img::after{ opacity:1; } .faq_answer_div {background: #f8f8f8;padding: 15px;border: 1px solid #ddd;margin-top: 10px;} .MultiFile-wrap {min-height: 52px;display: flex;align-items: center;} .MultiFile-label + .MultiFile-label {margin-top: 2px;} .MultiFile-label {display: flex;align-items: center;} .MultiFile-label > .remove {margin-right: 10px;width: 40px;height: 25px;line-height: 23px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 3px;text-align: center;font-size: 12px;color: #333;background: #fff;} .MultiFile-label span {font-size: 14px !important;line-height: 25px !important;} .card_wrap {background: var(--point-color3);min-height: 100%;display: flex;flex-direction: column;justify-content: end;position: relative;z-index: 0;} .card_wrap .logo {display: flex;justify-content: space-between;align-items: center;padding: 15px;position: absolute;top: 0;left: 0;right: 0;height: 100px;padding-top: 20px;box-sizing: border-box;} .card_wrap .logo img {max-height: 100%;max-width: 50%;} .card_wrap .name {padding: 0 15px;} .card_wrap .name > strong {font-size: 22px;color: var(--point-color2);letter-spacing: 0.08em;line-height: 1.6em;} .card_wrap .name > strong span {font-size: 13px;color: inherit;letter-spacing: 0.02em;} .card_wrap .info {padding: 5px 15px 25px;display: flex;flex-wrap: wrap;} .card_wrap .info > p {margin-top: 5px;min-width: 37%;font-size: 14px;color: var(--point-color2);letter-spacing: -0.02em;line-height: 1.6em;opacity: 0.9;} .card_wrap .bot {background: var(--point-color2);padding: 10px;} .card_wrap .bot > * {display: inline-block;vertical-align: middle;margin: 5px;font-size: 13px;line-height: 1.4em;letter-spacing: -1px;color: #fff;} /* 리스트 상세 검색 기능 추가 - content/shop/list2?ca_id=1010 */ .labs {display: flex;flex-wrap: wrap;margin: -6px -10px;} .labs .labskin {margin: 6px 10px;} .labskin {position: relative;font-family: 'empty';font-size: 0;} .labskin input {position: absolute;top: 0;left: 0;opacity: 0;} .labskin label {display: inline-block;vertical-align: middle;font-family: noto;font-size: 15px;color: #555;letter-spacing: -1px;line-height: 22px;word-break: break-all !important;} .labskin input[type=checkbox] + label {padding-left: 26px;position: relative;display: block;} .labskin input[type=checkbox] + label:after {display: block;content: '';width: 18px;height: 18px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 2px;left: 0;border-radius: 3px;} .labskin input[type=checkbox]:checked + label:after {border-color: var(--point-color1);background-color: var(--point-color1);content: '\e116';font-family: 'axicon';font-size: 13px;color: #fff;text-align: center;line-height: 16px;} .labskin input[type=radio] + label {padding-left: 26px;position: relative;} .labskin input[type=radio] + label:after {display: block;content: '';width: 18px;height: 18px;box-sizing: border-box;border: 1px solid #ccc;position: absolute;top: 50%;left: 0;transform: translateY(-50%);border-radius: 50%;} .labskin input[type=radio]:checked + label:after {border-color: var(--point-color1);} .labskin input[type=radio]:checked + label:before {display: block;content: '';width: 9px;height: 9px;position: absolute;top: 50%;left: 6px;transform: translateY(-50%);border-radius: 50%;background: var(--point-color1);} #option-wrap {border-top: 2px solid #333;border-bottom: 1px solid #ddd;position: relative;} #option-wrap .btn {border-top: 1px solid #ddd;height: 50px;width: 100%;display: flex;justify-content: center;align-items: center;text-align: center;background: var(--point-color3);color: var(--point-color2);font-size: 16px;font-weight: 500;} #option-wrap .btn:after {display: block;content: '\e84e';margin-left: 5px;color: var(--point-color2);font-size: 20px;font-family: 'axicon';} #option-wrap .btn.on:after {transform: scaleY(-1);} #option-wrap ul li {padding: 10px 30px;padding-left: 170px;position: relative;font-family: empty;font-size: 0;border-top: 1px solid #ddd;} #option-wrap ul li:first-child {border-top: 0;} #option-wrap ul li strong {position: absolute;top: 10px;left: 40px;font-size: 15px;color: #444;font-weight: 500;line-height: 35px;} #option-wrap ul li strong:after {display: block; content: '';width: 2px;height: 2px;background: #555;border-radius: 50%;position: absolute;top: 50%;left: -10px;margin-top: -1px;} #option-wrap ul li .labs {padding: 12px 0; padding-top: 6px;} #option-wrap ul li .labskin {width: calc(100%/4 - 20px);} #pro-search {border-bottom: 1px solid #ddd;} #pro-search ul li {padding: 10px 30px;padding-left: 170px;position: relative;font-family: empty;font-size: 0;border-top: 1px solid #ddd;} #pro-search ul li:first-child {border-top: 0;} #pro-search ul li strong {position: absolute;top: 15px;left: 40px;font-size: 15px;color: #444;font-weight: 500;line-height: 35px;} #pro-search ul li strong:after {display: block; content: '';width: 2px;height: 2px;background: #555;border-radius: 50%;position: absolute;top: 50%;left: -10px;margin-top: -1px;} #pro-search .hipen {width: 28px;font-size: 16px;color: #333;text-align: center;} #pro-search input[type=text] {border: 1px solid #ddd;height: 45px;width: calc(100% - 80px);padding: 0 20px;border-radius: 5px;} #pro-search input[type=number] {border: 1px solid #ddd;height: 45px;width: 180px;padding: 0 10px;border-radius: 5px;text-align: right;} #pro-search button {margin-left: 8px;width: 95px;height: 45px;background: #333;font-size: 15px;color: #fff;border-radius: 5px;border: 0;display: inline-flex;align-items: center;justify-content: center;} #pro-search button i {margin-left: 5px;font-size: 13px;} #pro-search .inps_price {display: flex;align-items: center;} #pro-search .inps_keyword {display: flex;align-items: center;} #pro-search .inps_keyword .labskin {margin-right: 25px;} #pro-search .inps_keyword input[type=text] {width: 488px;} #option-choice {margin: 20px 0 45px;background: #f6f6f6;padding: 7px 30px;position: relative;border-radius: 5px;display: flex;align-items: center;} #option-choice dt {width: 140px;padding-left: 10px;position: relative;font-size: 15px;color: #444;font-weight: 500;line-height: 35px;box-sizing: border-box;} #option-choice dt:after {display: block; content: '';width: 2px;height: 2px;background: #555;border-radius: 50%;position: absolute;top: 50%;left: 0;margin-top: -1px;} #option-choice dd {width: calc(100% - 140px);} #option-choice .sbm, #option-choice ._reset {position: absolute;top: 15px;right: 30px;border: 0;font-size: 15px;color: #555;display: inline-flex;align-items: center;background: none;} #option-choice .sbm {right: 140px;} #option-choice ._tagArea {margin-right: 160px;min-height: 38px;} #option-choice .__tagTxt {padding-right: 26px;color: #555555;margin: 9px 28px 9px 0;min-height: 20px;display: inline-block;vertical-align: top;position: relative;} #option-choice .__tagTxt ._del {position: absolute;top: 0;right: 0;width: 19px;height: 19px;background: url('../images/sub/opt-del.png') no-repeat center center;} .stit {margin-bottom: 20px;display: flex;flex-direction: column;} .stit > h3 {font-size: 24px;line-height: 34px;color: #333;letter-spacing: -0.03em;} .stit > h3 > * {font-size: inherit;line-height: inherit;color: inherit;letter-spacing: inherit;} .__line {margin: 55px 0;height: 1px;background: #ddd;border: 0px;} /* side banner */ #side_menu2 {z-index: 200 !important;} #side_banner {margin: 15px 0 -10px;display: flex;flex-direction: column;align-items: center;} #side_banner .wrap + .wrap {margin-top: 5px;} #side_banner .wrap {position: relative;} #side_banner .wrap .close {position: absolute;top: 8px;right: 8px;border: 0px;border-radius: 50%;} #side_banner .wrap .close img {display: block;height: 18px;} #side_banner .wrap .img {border-radius: 5px;display: block;overflow: hidden;} #side_banner .wrap .img > img {display: block;width: 100%;height: 145px;object-fit: cover;} #side_banner .mark_ad_wrap {right: auto;left: 8px;top: 8px;} /* 제조사 드롭다운 */ #option-wrap ul li.maker-section { position: relative; } #option-wrap ul li.maker-section .maker-toggle-btn { position: absolute; top: 15px; right: 3px; width: 20px; height: 20px; background: transparent; border: none; cursor: pointer; font-size: 35px; color: #888; display: flex; align-items: center; justify-content: center; z-index: 100; } #option-wrap ul li.maker-section .maker-list { max-height: 45px; /* 여기서 여백 조절 */ overflow: hidden; transition: max-height 0.3s ease; } #option-wrap ul li.maker-section.expanded .maker-list { max-height: none; padding-bottom: 0; } /* 갈매기 화살표 - 기본상태: 아래방향 (∨) */ #option-wrap ul li.maker-section .maker-toggle-btn::after { content: ''; display: block; width: 9px; height: 9px; border-right: 2px solid #064189; border-bottom: 2px solid #064189; transform: rotate(45deg); transition: transform 0.3s ease; } /* 확장될 때 위방향 (∧) */ #option-wrap ul li.maker-section.expanded .maker-toggle-btn::after { transform: rotate(-135deg); } em.em_hj { margin-left: 20px; font-style: normal; font-size: 17px; line-height: 44px; color: #444444; letter-spacing: -0.5px; font-weight: normal; } #main .section01 ul li a{ margin-bottom: 15px; } @media (max-width:1200px) { #option-wrap ul li.maker-section .maker-list{ max-height: 46px; } #option-wrap ul li.maker-section .maker-toggle-btn{ left: 36px; right: auto; } } /* 0904 추가 */ .codding0904{ display: block !important; width: 150px !important; margin-top: 10px; } .hot0904{ width: 150px !important; } .arrow{ margin-top: -50px; } .mo_hot0904{ margin: 0 !important; width: 120px !important; position: absolute !important; top: -5px !important; right: 20px !important; } .mo_codding0904 { margin: 0 !important; width: 120px !important; position: absolute !important; top: 32px !important; /* 첫 번째 버튼 아래 10px 간격 */ right: 20px !important; } /* PC (750px 이상): grid 반응형 레이아웃 */ @media screen and (min-width: 750px) { #main .section08 .ajaxBtns { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; gap: 9px !important; justify-content: flex-start !important; max-width: 1200px !important; margin: 0 auto !important; } #main .section08 .ajaxBtns a { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; font-size: 12px; line-height: 1.3; text-align: center; color: #555; text-decoration: none; word-break: keep-all; white-space: normal; min-height: 80px; box-sizing: border-box; } } /* 모바일 (749px 이하): slick 그대로 */ @media screen and (max-width: 749px) { #main .section08 .ajaxBtns { display: block !important; } } /* 0910 갓파츠 유튜브+블로그 섹션 스타일 */ #main .section-youtube { margin: 60px 0; } #main .section-youtube .title { position: relative; margin-bottom: 35px; display: flex; align-items: center; } #main .section-youtube .title h5 { font-size: 36px; line-height: 44px; color: #222222; /* text-align: center; */ } #main .section-youtube .title em { display: block; margin-top: 15px; font-style: normal; font-size: 17px; line-height: 26px; color: #444444; letter-spacing: -0.5px; text-align: center; } /* 유튜브 동영상 2x2 배치 */ #main .section-youtube .video-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } #main .section-youtube .video-item { width: calc(50% - 10px); position: relative; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } #main .section-youtube .video-item .video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } #main .section-youtube .video-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; } /* 블로그 섹션 스타일 */ #main .section-youtube .blog-section { margin-top: 40px; } #main .section-youtube .blog-section .title { margin-bottom: 35px; } #main .section-youtube .blog-section .title h5 { font-size: 36px; line-height: 44px; color: #222222; text-align: left; margin: 0; } #main .section-youtube .blog-section .title em { display: block; margin-top: 0px !important; font-style: normal; font-size: 17px; line-height: 26px; color: #444444; letter-spacing: -0.5px; text-align: left; } #main .section-youtube .blog-container { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; } #main .section-youtube .blog-item { width: calc(25% - 12px); background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 20px; box-sizing: border-box; cursor: pointer; transition: all 0.2s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 240px; } /* #main .section-youtube .blog-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); } */ #main .section-youtube .blog-item .blog-content { flex: 1; display: flex; flex-direction: column; } #main .section-youtube .blog-item .blog-title-text { font-size: 16px; font-weight: 600; color: #333; line-height: 1.4; margin-bottom: 12px; height: 45px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #main .section-youtube .blog-item .blog-summary { font-size: 14px; color: #666; line-height: 1.5; height: 63px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 15px; } #main .section-youtube .blog-item .blog-date { font-size: 13px; color: #999; display: flex; align-items: center; padding-top: 15px; border-top: 1px solid #f0f0f0; margin-top: auto; } #main .section-youtube .blog-item .blog-date::before { content: ''; display: inline-block; width: 16px; height: 16px; background: #00c73c; border-radius: 50%; margin-right: 8px; flex-shrink: 0; } /* 반응형 디자인 */ @media screen and (max-width: 1200px) { #main .section-youtube .video-container { gap: 10px; } #main .section-youtube .video-item { width: calc(50% - 5px); } #main .section-youtube .blog-item { width: calc(50% - 8px); } } @media screen and (max-width: 768px) { #main .section-youtube { margin: 60px 0; } #main .section-youtube .title h5, #main .section-youtube .blog-section .title h5 { font-size: 28px; line-height: 36px; } #main .section-youtube .title em, #main .section-youtube .blog-section .title em { font-size: 15px; line-height: 24px; } #main .section-youtube .video-container { gap: 15px; } #main .section-youtube .video-item { width: 100%; } #main .section-youtube .blog-item { width: 100%; height: auto; } #main .section-youtube .blog-section { margin-top: 40px; } } /* 0911 대카테고리 pc(좌측), 모바일(하단) 네비게이션 수정 */ .lnb_cate_list > li > ul { display: block !important; margin: 0 !important; padding: 0 20px !important; border-radius: 10px !important; background: var(--point-color3) !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; transition: all 0.4s ease-in-out !important; } /* active 상태는 항상 표시 */ .lnb_cate_list > li.active > ul { max-height: 500px !important; opacity: 1 !important; padding: 10px 20px !important; margin: 5px 0 15px !important; } /* 호버/클릭 상태의 ul 표시 */ .lnb_cate_list > li.nav-open > ul { max-height: 500px !important; opacity: 1 !important; padding: 10px 20px !important; margin: 5px 0 15px !important; } /* 화살표 애니메이션 추가 */ .lnb_cate_list > li > a:after { transition: transform 0.4s ease-in-out !important; cursor: pointer !important; } /* active와 열린 상태의 화살표 회전 */ .lnb_cate_list > li.active > a:after, .lnb_cate_list > li.nav-open > a:after { transform: translateY(-50%) scaleY(-1) !important; } /* 열린 상태의 링크 색상 */ .lnb_cate_list > li.nav-open > a { color: var(--point-color2) !important; } /* 모바일에서 화살표 클릭 영역 확대 */ @media screen and (max-width: 750px) { .lnb_cate_list > li > a:after { width: 30px !important; height: 30px !important; right: -5px !important; line-height: 30px !important; text-align: center !important; border-radius: 50% !important; /* background: rgba(0,0,0,0.05) !important; */ } .lnb_cate_list > li > a:after:hover { /* background: rgba(0,0,0,0.1) !important; */ } } /* 0912 중카테고리 수정작업 */ .mid-title0912{ border-bottom: 2px solid #333; padding-bottom: 20px; margin-bottom: 10px; } .mid0912{ margin-bottom: 0px; } /* 이미지 숨기기 */ .mid0912 a .img { display: none !important; } /* a태그에 구분선 추가 */ .cate_ico.mid0912 a:not(:nth-child(9)):not(:last-child)::after { content: ''; position: absolute; top: 0px; /* 고정 위치 */ right: -18px; width: 1px; height: 20px; /* 고정 높이 */ background: #ddd; } /* a태그에 relative 포지션 추가 (::after의 absolute 포지션을 위해) */ .cate_ico.mid0912 a { position: relative; } @media screen and (max-width: 750px) { .cate_ico.mid0912 a:not(:nth-child(4n)):not(:last-child)::after{ content: ''; position: absolute; top: 0px; right: -6px; width: 1px; height: 20px; background: #ddd; /* display: none; */ } .cate_ico.mid0912 a{ /* padding-left: 20px; */ } #sub .sub-tit h3 { font-size: 32px !important; } } /* 0924 세부분류 수정 작업 */ .line0924{ margin: 10px 0; } .margin0924{ margin-bottom: 0; } .stit0924{ margin-bottom: 10px;; } /* 0924 bom 수정 */ .bomWrap .btnWrap{ display: none; } @media screen and (max-width: 750px) { #bomSearch .wrap{ width: 350px !important; } } .bom_subTitle_mo { display: none; text-align: center; margin-bottom: 10px; margin-top: -10px; } .bom_subTitle_mo span{ font-weight: 600; color: #666666; font-size: 15px; } .bom_subTitle_pc { /* display: none; */ text-align: left; font-size: 15px; margin-bottom: 20px; position: absolute; left: 0; top: -60px; width: 360px; padding: 20px; padding-top: 15px; padding-bottom: 10px; border-radius: 15px; background: #064189; } .bomWrap .list{ margin-top: 90px; } .bom_subTitle_pc span{ color: #fff !important; display: block; margin-bottom: 5px; } .pc_bomText {display: block;} .BOMtext{ display: none; } /* 250929 상품썸네일 하단 문구 추가 */ .sale_tip0929{ margin-top: 20px; color: #d53f3e; } .sale_tip0929 span{ font-weight: 600; color: #d53f3e; } /* 251001 섹션 1하단 버튼*/ /* 컨테이너(그리드) */ .btn1011-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; /* margin:28px 0 8px; */ } /* 공통 버튼 */ .btn1011{ display:flex; align-items:center; gap:12px; padding:20px 18px; border-radius:16px; background:#0ea5e9; color:#fff !important; text-decoration:none; box-shadow:0 6px 14px rgba(0,0,0,.08); transform:translateY(0); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; font-size: 25px; text-decoration: none !important; } .btn1011:focus-visible{outline:3px solid #fff; outline-offset:2px;} .btn1011:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.12);} .btn1011__icon{display:inline-flex; align-items:center; justify-content:center; color: #fff;} .btn1011__title{font-weight:800; letter-spacing:-0.2px; font-size: 30px;} /* 개별 색상 */ .btn1011.onestop1011{ background:black; } .btn1011.bom1011{ background:black; } .btn1011__sub{ font-style:normal; font-size:15px; opacity:.9; white-space:nowrap; /* 한 줄 유지 */ text-align:right; } #main .section01 ul li a{ position: relative; display: block; border-radius: 21px; /* 원하는 값 */ overflow: hidden; /* 모서리 밖 잘라내기 */ transition: transform .2s ease, box-shadow .2s ease; } #main .section01 ul li a img{ display:block; width:100%; height:auto; } #main .section01 ul li a:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.12); } /* #header .logo{ bottom:auto; top:50%; transform:translateY(-50%); line-height:0; } */ /* === PC: 인기 브랜드 표형 레이아웃(틈 제거 + 로고 확대) === */ @media (min-width:1201px){ /* 1) slick 기본 마진/단차 제거 */ #main .section04 .roll{ margin:0 !important; } #main .section04 .roll .slick-slide{ margin:0 !important; } /* 기본 테마가 짝수 카드에 주는 위쪽 단차 제거 */ #main .section04 .roll .slick-slide div:nth-child(even){ margin-top:0 !important; } /* 2) 셀(카드) – 표처럼 보이도록 */ #main .section04 .roll .slick-slide > div{ height: 92px; /* ← 로고 조금 더 크게 */ /* padding: 10px 16px; */ border-radius: 0 !important; box-shadow: none !important; border-left: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; box-sizing: border-box; background:#fff; } /* 3) 표 경계 보정: 6열(6x2) 기준 */ /* #main .section04 .roll .slick-slide:nth-child(6n+1) > div{ border-left:none; } #main .section04 .roll .slick-slide:nth-child(-n+6) > div{ border-top:none; } */ /* 4) a·img 정렬 + 로고 확대 */ #main .section04 .roll .slick-slide > div > a{ display:block; width:100%; height:100%; } #main .section04 .roll .slick-slide img{ height:100%; /* 세로 꽉 채워 가로는 자동 → 더 크게 */ width:auto; max-width:100%; object-fit:contain; display:block; margin:0 auto; } } .section07 { margin: 0 auto; } /* PC 1열 2개 배치 그리드 설정 (repeat(2, 1fr)은 유지) */ .image-grid.pc-layout { display: grid; /* 현재 1열에 2개 배치 */ grid-template-columns: repeat(3, 1fr); gap: 60px; /* 이미지 간 간격 */ margin-top: 40px; /* 상위 섹션에 margin: 0 auto를 했으므로 여기서는 0으로 설정 */ margin-left: 0; margin-right: 0; /* width: 800px; */ margin: 0 auto; } .image-grid.pc-layout a{ border-radius: 10px; overflow: hidden; /* box-shadow: 0 10px 20px rgba(0, 0, 0, .12); */ } /* 이미지 컨테이너 (a 태그) 내의 img 태그에 100% 너비 적용 */ .image-grid.pc-layout .grid-item img { width: 100%; height: auto; display: block; } /* 251128 갓파츠 상품후기 */ .review1128_title{ font-size: 19px; color: #333; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 10px; } .review1128_date{ margin-top: 7px; display: block; } /* === gallery.skin.php 썸네일 하단 버튼 영역 (공통) === */ .thumb-bottom-btns{ position: relative; z-index: 20; /* 카드 전체 링크 a(z=10)보다 위로 */ display: flex; gap: 2px; margin-top: 10px; width: 100%; max-width: 100%; box-sizing: border-box; } .thumb-bottom-btns a, .thumb-bottom-btns button{ position: relative; /* absolute 해제 */ top: auto; left: auto; width: auto; height: 28px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .thumb-bottom-btns .thumb-btn { flex: 1 1 0; /* 3개가 폭에 맞춰 줄어듦 */ min-width: 0; /* 텍스트 때문에 안 줄어드는 현상 방지 */ max-width: 100%; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; height: 28px; border-radius: 6px; font-size: 10px; font-weight: 500; text-decoration: none; box-sizing: border-box; border: 1px solid #d4d4d4; background: #ffffff; color: #333; cursor: pointer; z-index: 99; padding-left: 28px; } .thumb-bottom-btns .thumb-btn::before{ content: ""; width: 16px; height: 16px; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center; } .bom1202::before{ left: 10px !important; } .thumb-bottom-btns .thumb-btn-cart::before{ background-image: url("../images/icon-cart.png"); } .thumb-bottom-btns .thumb-btn-bom::before{ background-image: url("../images/icon-bom.png"); } .thumb-bottom-btns .thumb-btn-est::before{ background-image: url("../images/icon-est.png"); } .thumb-bottom-btns .thumb-btn img { display: inline-block; width: 16px; height: 16px; margin-right: 4px; } .thumb-bottom-btns .thumb-btn span { display: inline-block; line-height: 1; font-size: 12px; margin-right: 2px; } /* 장바구니 버튼 – 파란색 풀버튼 */ .thumb-bottom-btns .thumb-btn-cart { background: #064189; border-color: #064189; color: #ffffff; } /* BOM / 대량견적 – 흰 배경 보더 버튼 */ .thumb-bottom-btns .thumb-btn-bom, .thumb-bottom-btns .thumb-btn-est { background: #ffffff; border-color: #d4d4d4; color: #333333; } /* 버튼 hover 효과 */ .thumb-bottom-btns .thumb-btn:hover { filter: brightness(0.97); } .thumb-bottom-btns .thumb-btn-cart:hover { filter: brightness(1.05); } .cart_text1202{ color: white; } .thumb-bottom-btns .bttn{ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: 28px !important; float: none !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 1 1 0 !important; /* 장바구니 / BOM / 대량견적 3등분 */ min-width: 0 !important; box-sizing: border-box; } /* 251216 이벤트 페이지 상품 썸네일/그리드 */ #event_view .list ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; } #event_view .list ul li{ list-style: none; /* flex: 0 0 25%; */ /* max-width: 25%; */ /* padding: 0 10px 40px; */ box-sizing: border-box; } /* gallery.skin.php 의 div.thumb 에 높이 + 배경 설정 */ #event_view .list ul li .thumb{ display: block; width: 100%; /* padding-top: 100%; */ margin-bottom: 10px; background-repeat: no-repeat; background-position: center center; background-size: contain; /* 이미지가 잘리지 않고 전체 보이게 */ border-radius: 10px; background-color: #fff; } /* 251217 썸네일 하단 버튼 – 항상 3개 나란히 보이도록 강제 */ .thumb-bottom-btns { display: flex !important; flex-wrap: nowrap; gap: 2px; } /* 장바구니 / BOM / 대량견적 공통 – flex 아이템 3등분 */ .thumb-bottom-btns > a, .thumb-bottom-btns > button { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 1 1 0 !important; /* 3개가 1/3씩 나눠먹도록 */ min-width: 0 !important; width: auto !important; height: 28px !important; margin: 0 !important; float: none !important; /* 예전 .bttn, .btn-cart float 제거 */ } /* 혹시 .bttn, .btn-cart, cartAdd2 같은 기존 스타일이 있다면 여기서 무력화 */ .thumb-bottom-btns .bttn, .thumb-bottom-btns .btn-cart, .thumb-bottom-btns .cartAdd2 { position: relative !important; display: inline-flex !important; flex: 1 1 0 !important; width: auto !important; height: 28px !important; float: none !important; margin: 0 !important; } @media screen and (max-width: 500px) { .thumb-bottom-btns .thumb-btn span { font-size: 9px; margin-right: 4px; } .thumb-bottom-btns .thumb-btn::before{ width: 12px; height: 12px; left: 2px; } .thumb-bottom-btns{ gap: 0px; /* 원래 bottom-btns로 되어있던 부분도 이름 맞춰줌 */ } .thumb-bottom-btns .thumb-btn { padding-left: 23px; } .bom1202::before{ left: 6px !important; } } /* 251223 제조사 X -> maker-section 숨김처리 */ #option-wrap .maker-section:not(:has(.labs .labskin)) { display: none !important; } /* ✅ mid0912 안에 a가 없으면 line0924 숨김 */ .cate_ico.mid0912:not(:has(a)) ~ hr.line0924 { display: none !important; } /* ✅ (중첩 :has 제거) mid0912가 바로 뒤에 있고, 그 mid0912 안에 a가 없으면 stit0924 숨김 */ .stit0924:has(+ .cate_ico.mid0912):not(:has(+ .cate_ico.mid0912 a)) { display: none !important; } /* 251223 특가모음전 텍스트 css */ a[data-id="10f0"]{ font-weight: 600; font-size: 17px; color: #064189 !important; } .review_hr {width: 1px;height: 10px;background: #ddd;margin: 0 10px;border: none;} .qa_h5 {display: inline-flex !important; align-items: center; font-size: 32px !important;} .qa_em {font-weight: 400;} /* 270112 브랜드 페이지 리스트 전환 버튼 */ .brdWrap .srchBox{ position: relative; } .brdWrap .srchBox ol{ position: static !important; display: flex; align-items: center; justify-content: flex-end; margin-top: 15px; margin-bottom: -10px; } .brdWrap .srchBox ol li{ display: flex; align-items: center; padding: 10px 0; margin-left: 20px; } .brdWrap .srchBox .list_type_btn{ position: absolute; top: 0; right: 0; width: 90px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; display: flex; align-items: center; background: #fff; } .brdWrap .srchBox .list_type_btn > a{ width: 50%; height: 44px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 24px; color: #333; box-sizing: border-box; text-decoration: none !important; } .brdWrap .srchBox .list_type_btn > a + a{ border-left: 1px solid #ddd; } .brdWrap .srchBox .list_type_btn > a.active{ color: var(--point-color1); background-color: var(--point-color3); } .brand_last0112{ right: 0 !important; } @media screen and (max-width: 1200px){ .brdWrap .srchBox .list_type_btn{ width: 70px; top: 17px; } .brdWrap .srchBox .list_type_btn > a{ height: 35px; font-size: 22px; } } @media screen and (max-width: 750px){ .brdWrap .srchBox .list_type_btn{ width: 70px; top: 0px; } .brdWrap .detail ul li.last { background: none !important; } } #sit_qa_list{ display: block !important; justify-content: normal !important; } /* ========================================================== 260119 모바일(<=1200px) - 헤더와 비주얼(슬라이드) 사이 적립금 요약 박스 - PC(.hd-memberbox)는 그대로 유지 - 1200px 이하에서는 PC 박스 숨기고, 모바일 박스 노출 - 비회원일 때도 표시 (안내 텍스트 + 0원) ========================================================== */ /* ✅ 260115 PC 헤더 우상단 - 로그인 시 회원정보/적립금/쿠폰/예상현금화 박스 */ .hd-memberbox{ position:absolute; top:10px; right:0px; transform:none; display:flex; flex-direction:row; align-items:stretch; width:459px; background:#fff; border:1px solid #e5e5e5; border-radius:12px; overflow:hidden; z-index:50; height: 80px; } .hd-memberbox a{text-decoration:none} /* ✅ 좌측: 이름/등급 (회원) */ .hd-memberbox__top{ width:170px; display:flex; flex-direction:column; justify-content:center; padding:10px 10px; background:#ebf1f7; border-right:1px solid #eaeaea; } .hd-memberbox__name{display:block;font-size:14px;line-height:15px;color:#111;margin-bottom: 10px;} .hd-memberbox__name strong{font-weight:800} .hd-memberbox__grade{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size: 12px; } .hd-grade-name{font-size: 12px;} .hd-grade-ico{ width:18px; height:18px; display:inline-block; } /* ✅ 비회원 안내 텍스트 영역 (PC) */ .hd-memberbox__guest-text{ background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); position: relative; overflow: hidden; } .hd-memberbox__guest-text::before{ content: ''; position: absolute; top: -50%; right: -20px; width: 100px; height: 200%; background: rgba(255,255,255,0.1); transform: rotate(15deg); } .guest-message{ position: relative; z-index: 1; text-align: center; } .guest-message strong{ display: block; font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -0.3px; text-shadow: 0 1px 3px rgba(0,0,0,0.1); } .guest-message span{ display: block; font-size: 11px; line-height: 15px; color: rgba(255,255,255,0.95); font-weight: 500; letter-spacing: -0.2px; } /* ✅ 우측: 적립금/쿠폰/예상현금화 */ .hd-memberbox__bottom{ flex:1; display:flex; border-top:0; } .hd-memberbox__item{ flex: 2 1 0; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:6px 4px; box-sizing:border-box; } .hd-memberbox__bottom > .hd-memberbox__item:nth-child(3){ flex: 1 1 0; /* 쿠폰만 절반 */ } .hd-memberbox__item:not(:last-child){border-right:1px solid #eaeaea} .hd-memberbox__item:first-child{border-right: none;} .hd-memberbox__label{display:block;font-size:13px;line-height:13px;color:#666;letter-spacing:-0.2px;margin-bottom: 10px;} .hd-memberbox__value{display:block;margin-top:2px;font-size:13px;line-height:14px;font-weight:800;color:var(--point-color2);letter-spacing:-0.2px} /* ✅ 회원일 때만 hover 효과 */ .hd-memberbox:not(.is-guest) .hd-memberbox__item:hover{background:#f7f7f7} .hd-memberbox:not(.is-guest) .hd-memberbox__top:hover{filter:brightness(0.98)} /* ✅ 비회원일 때는 hover 효과 없음, 커서도 기본 */ .hd-memberbox.is-guest .hd-memberbox__item{cursor:default} .hd-memberbox.is-guest .hd-memberbox__top{cursor:default} .mo-memberbox{display:none;} @media (min-width: 1201px){ .hd-memberbox{ top: 37px; right: calc((100% - 1200px)/2); } } /* ========================================================== 260127 적립금 -> 예상 현금화 안내(화살표 + '현금화 시') - 3칸 레이아웃 유지한 채 경계선에 오버레이 ========================================================== */ .hd-memberbox__bottom{ position:relative; } .hd-memberbox__bottom::after{ content:""; position:absolute; left:40.333%; top:35%; transform:translate(-50%, -50%); width:40px; height:26px; background: var(--cash-arrow-url) center/contain no-repeat; z-index:3; pointer-events:none; } /* .hd-memberbox__bottom::before{ content:"현금화 시"; position:absolute; left:40.333%; top:58%; transform:translateX(-50%); font-size:11px; line-height:1; font-weight:700; color:#000000; z-index:3; pointer-events:none; } */ /*260121 메인 찾아드림 미리보기 css */ /* li 기준 잡기 */ .section10 .bd_list2 li{ position:relative; } /* ✅ 내용은 기본 숨김 */ .section10 .bd_list2 li .qa_preview_txt{ display:none !important; margin-top: 6px; font-size: 14px; color: #9aa0a6; line-height: 1.4; } /* ✅ 열렸을 때만 표시 */ .section10 .bd_list2 li.gp_open .qa_preview_txt{ display:block !important; } /* ✅ a.link(리스트 전체 클릭 링크) 위로 버튼/내용 올리기 */ .section10 .bd_list2 li .qa_preview_toggle, .section10 .bd_list2 li .qa_preview_txt{ position: relative; z-index: 20 !important; } /* 버튼 스타일 + 화살표 */ .section10 .bd_list2 li .qa_preview_toggle{ margin-top: 6px; padding: 0; border: 0; background: none; font-size: 14px; color: #9aa0a6; cursor: pointer; } .section10 .bd_list2 li .qa_preview_toggle::after{ content:""; display:inline-block; margin-left:6px; border:4px solid transparent; border-top-color:#9aa0a6; /* ▼ */ transform: translateY(2px); } .section10 .bd_list2 li.gp_open .qa_preview_toggle::after{ border-top-color: transparent; border-bottom-color:#9aa0a6; /* ▲ */ transform: translateY(-2px); } /* section10 상품후기 모음: 제목 + 별점 한 줄 배치 */ .section10 .bd_list2_review .gp_row_top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .section10 .bd_list2_review .gp_row_top strong{ flex:1; min-width:0; } .section10 .bd_list2_review .gp_review_star{ flex:0 0 auto; line-height:0; margin-top:2px; } .section10 .bd_list2_review .gp_review_star img{ width:85px; /* PC 별점 크기 */ height:auto; } /* 260202 BOM 팝업 안내문구 CSS */ #bomSearch .guest-bom-tip{ margin-top: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #0b2f5c; max-width: 400px; background: #f2f7ff; border: 1px solid #d9e6ff; border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; } #bomSearch .guest-bom-tip::before{ content: ""; width: 20px; height: 20px; flex: 0 0 20px; margin-top: -1px; background: url("/theme/default/images/BOM_info.png") no-repeat center; background-size: contain; } @media screen and (max-width: 750px) { #bomSearch .guest-bom-tip { margin-bottom: 40px; } } /* 모달창 우측 상단 X 버튼 */ /* #loading-screen .in{ position: relative; } */ /* X 버튼 */ #loading-screen .loading-close{ position: absolute; top: -100px; right: -50px; width: 34px; height: 34px; border: 0; background: rgba(255,255,255,0.12); color: #fff; border-radius: 10px; font-size: 22px; line-height: 34px; cursor: pointer; } @media screen and (max-width: 1200px) { #loading-screen .loading-close{ top:-100px; right: 100px; } } @media screen and (max-width: 600px) { #loading-screen .loading-close{ top:-100px; right: 50px; } }