@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)} body {overflow: hidden} /* 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: #000;} /* 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 39px; background: var(--point-color3); color: var(--point-color2)} /* #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;} #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} .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(-50%,-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} #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: 0;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: 282px; 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 {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 {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;} @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);} } /************************************************** 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 {} #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 .prev:after {content: ''; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); width: 1px; height: 9px; background: rgba(255,255,255,0.3)} */ #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} #main section {} #main section .title {position: relative; margin-bottom: 35px} #main section .title > * {display: inline-block; vertical-align: top} #main section .title h5 {font-size: 36px; line-height: 44px; color: #222222} #main section .title em {margin-left: 20px; font-style: normal; font-size: 17px; line-height: 44px; color: #444444; letter-spacing: -0.5px} #main section .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} #main section .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} #main .banner {margin-top: 80px} #main .banner .roll {} #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: 999} #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% / 3 - 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: 100px} #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 .item .img {} #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} #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: 100px 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 .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 .ajaxBox {} #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.left {} #main .section09 .brd.right {position: relative} #main .section09 .brd > * {} #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 {} #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} /************************************************** 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} #sub #content > *{} #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} .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 .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 .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 .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; } .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;} .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} .inqWrap {} .inqWrap .tabList1 {display: flex; flex-flow: row wrap; margin: 0 -5px; margin-bottom: 40px} .inqWrap .tabList1 li {width: calc(100% / 8 - 10px); margin: 0 5px} .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 .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} .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} .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} .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 {} .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: 185px; 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; flex-flow: row wrap; 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 .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 a {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 a.chk {background: var(--point-color2); color: #fff} .edtWrap .tabBox .bttn a.del {margin-left: 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; } .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 .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');} #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: #fff;margin: 0 auto;width: 400px;height: 90px;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: 200px;} } .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;} .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} .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} .cate_ico a.active .img img.def, .cate_ico a:hover .img img.def {opacity: 0} .cate_ico a.active .img img.act, .cate_ico a:hover .img img.act {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;}