common.css-- 136 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132
  1. /*========================================
  2. ALL COMMON PART STYLE
  3. =========================================*/
  4. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&display=swap');
  5. @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
  6. :root {
  7. --h1size: 50px;
  8. --h2size: 40px;
  9. --h3size: 24px;
  10. --h4size: 20px;
  11. --h5size: 18px;
  12. --h6size: 16px;
  13. --h1height: 58px;
  14. --h2height: 48px;
  15. --h3height: 32px;
  16. --h4height: 28px;
  17. --h5height: 26px;
  18. --h6height: 26px;
  19. --bodyheight: 26px;
  20. --blue: #1494a9;
  21. --chalk: #f5f5f5;
  22. --green: #11b76b;
  23. --orange: #e86121;
  24. --yellow: #ffab10;
  25. --body: #f5f6f7;
  26. --heading: #212121;
  27. --primary: #11338c;
  28. --sub-heading: #565765;
  29. --green-chalk: #ddffd5;
  30. --green-dark: #072f17;
  31. --gray-chalk: #cccccc;
  32. --intro-bg: #f8fffa;
  33. --facebook: #3b5998;
  34. --linkedin: #0e76a8;
  35. --twitter: #00acee;
  36. --google: #E60023;
  37. --instagram: #F77737;
  38. --caution : #cd7c18;
  39. --sec : #6878a1;
  40. --graytxt :#a6a6a9;
  41. --primary-bshadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  42. --primary-tshadow: 2px 3px 8px rgba(0, 0, 0, 0.1);
  43. --bs-gutter-x : 12px;
  44. --black : #222;
  45. --gray: #787878;
  46. --gray1: #999;
  47. --light: #a6a6a9;
  48. --red: #a02121;
  49. --red1: #b04847;
  50. --purple: #5c68b4;
  51. --text: #525252;
  52. --border: #e8e8e8;
  53. --hover : #2cad7f;
  54. --bodysize: 16px;
  55. --bodyheight : 1.3;
  56. --fsize2 : 18px;
  57. --fsize14 : 14px;
  58. --fsize16 : 16px;
  59. --fsize18 : 18px;
  60. --fsize20 : 20px;
  61. --fsize24 : 24px;
  62. --fsize26 : 26px;
  63. --fsize28 : 28px;
  64. --fsize30 : 30px;
  65. --fsize32 : 32px;
  66. --fsize34 : 34px;
  67. --fsize38 : 38px;
  68. --fsize40 : 40px;
  69. --fsize48 : 48px;
  70. --bfont: 'Roboto', 'Noto Sans KR', sans-serif;
  71. --awesome : 'Font Awesome 5 Free';
  72. --awesome6 : 'Font Awesome 6 Free';
  73. --monts : 'Montserrat', sans-serif;
  74. }
  75. * {margin: 0px; padding: 0px; outline: 0px; }
  76. html,
  77. body {scroll-behavior: smooth;}
  78. body {color: var(--text); background:#fff; font-size: var(--bodysize); font-family: var(--bfont); font-weight:400; line-height: var(--bodyheight); overflow-x: hidden;}
  79. img {vertical-align: middle;}
  80. a {text-decoration: none; display: inline-block; color:var(--text); white-space:wrap;}
  81. a:hover {text-decoration: none;}
  82. ul,
  83. ol {
  84. padding: 0px;
  85. list-style: none;
  86. }
  87. h1,
  88. h2,
  89. h3,
  90. h4,
  91. h5,
  92. h6,
  93. p,
  94. ol,
  95. ul,
  96. li,
  97. span,
  98. details-label new {margin-bottom: 0px;}
  99. p {white-space:wrap;}
  100. h1,
  101. h2,
  102. h3,
  103. h4,
  104. h5,
  105. h6 {font-weight: 500; color: var(--heading);}
  106. h1 {
  107. font-size: var(--h1size);
  108. line-height: var(--h1height);
  109. }
  110. h2 {
  111. font-size: var(--h2size);
  112. line-height: var(--h2height);
  113. letter-spacing: -0.3px;
  114. text-transform: capitalize;
  115. }
  116. h3 {
  117. font-size: var(--h3size);
  118. line-height: var(--h3height);
  119. }
  120. h4 {
  121. font-size: var(--h4size);
  122. line-height: var(--h4height);
  123. }
  124. h5 {
  125. font-size: var(--h5size);
  126. line-height: var(--h5height);
  127. }
  128. h6 {
  129. font-size: var(--h6size);
  130. line-height: var(--h6height);
  131. }
  132. input::-webkit-input-placeholder,
  133. textarea::-webkit-input-placeholder {
  134. font-size: 14px;
  135. color: var(--gray);
  136. text-transform: capitalize;
  137. }
  138. input:-ms-input-placeholder,
  139. textarea:-ms-input-placeholder {
  140. font-size: 14px;
  141. color: var(--gray);
  142. text-transform: capitalize;
  143. }
  144. input::-ms-input-placeholder,
  145. textarea::-ms-input-placeholder {
  146. font-size: 14px;
  147. color: var(--gray);
  148. text-transform: capitalize;
  149. }
  150. input::placeholder,
  151. textarea::placeholder {
  152. font-size: 14px;
  153. color: var(--gray);
  154. text-transform: capitalize;
  155. }
  156. input,
  157. button {
  158. border: none;
  159. outline: none;
  160. background: none;
  161. }
  162. button:focus {
  163. outline: none;
  164. }
  165. input[type="text"] {border:1px sold var(--border);}
  166. input[type=checkbox] {display: inline-block; width: 15px; height: 15px; border: 1px solid #ededed; border-radius: 3px; margin-top: -4px; vertical-align: middle;}
  167. select {border:1px solid #ddd;}
  168. @media (max-width: 991px) {
  169. .content-reverse {
  170. -webkit-box-orient: vertical;
  171. -webkit-box-direction: reverse;
  172. -ms-flex-direction: column-reverse;
  173. flex-direction: column-reverse;
  174. }
  175. }
  176. .txt_b {font-weight:700;}
  177. .txt_caution {color:var(--caution);}
  178. .text_black {color:var(--black);}
  179. .font_normal {font-style:normal;}
  180. .text_linethrough {text-decoration:line-through;}
  181. .flex-row {display:flex; flex-flow:row wrap;}
  182. /*공통*/
  183. .row-cols-12 > * {flex:0 0 100%; max-width:100%;}
  184. .ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  185. .ellipsis2 {
  186. overflow: hidden;
  187. text-overflow: ellipsis;
  188. display: -webkit-box;
  189. -webkit-line-clamp: 2;
  190. -webkit-box-orient: vertical;
  191. }
  192. .divide_line {height:1px; margin:10px 0; border-bottom:1px solid #ddd; font-size:0; line-height:0;}
  193. .container,
  194. .container-lg,
  195. .container-md,
  196. .container-sm,
  197. .container-xl,
  198. .container-xxl {max-width: 1320px; width:100%; margin:0 auto; padding-right: var(--bs-gutter-x); padding-left: var(--bs-gutter-x);}
  199. .accordion-button {
  200. position: relative;
  201. display: flex;
  202. align-items: center;
  203. width: 100%;
  204. padding: 1rem 1.25rem;
  205. font-size: 1rem;
  206. color: #212529;
  207. text-align: left;
  208. background-color: #fff;
  209. border: 0;
  210. border-radius: 0;
  211. overflow-anchor: none;
  212. transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease;
  213. }
  214. .accordion-button::after {
  215. flex-shrink: 0;
  216. margin-left: auto;
  217. content: "\f107";
  218. font-family:var(--awesome);
  219. font-weight:900;
  220. background-size: 1.25rem;
  221. transition: transform .2s ease-in-out;
  222. }
  223. .accordion-button:not(.collapsed)::after {
  224. background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
  225. transform: rotate(-180deg);
  226. }
  227. .form-select {
  228. height:32px;
  229. padding: 0px 10px;
  230. letter-spacing: 0.3px;
  231. background-size: 12px 10px;
  232. text-transform: capitalize;
  233. color: var(--text);
  234. cursor: pointer;
  235. }
  236. .form-select:focus-within {
  237. -webkit-box-shadow: none;
  238. box-shadow: none;
  239. border-color:#666;
  240. }
  241. .form-check-input:focus {
  242. border-color: var(--primary);
  243. -webkit-box-shadow: none;
  244. box-shadow: none;
  245. }
  246. .form-check-input:checked {
  247. background-color: var(--primary);
  248. border-color: var(--primary);
  249. }
  250. .form-btn {
  251. width: 100%;
  252. height: 45px;
  253. font-size: 14px;
  254. font-weight: 400;
  255. line-height: 45px;
  256. border-radius: 6px;
  257. letter-spacing: 0.5px;
  258. text-align: center;
  259. text-transform: uppercase;
  260. color: var(--white);
  261. background: var(--black);
  262. }
  263. .form-input-group {
  264. position: relative;
  265. }
  266. .form-input-group:focus-within i {
  267. color: var(--primary);
  268. }
  269. .form-input-group input {
  270. padding: 0px 20px 2px 45px;
  271. }
  272. .form-input-group textarea {
  273. padding: 12px 20px 12px 45px;
  274. }
  275. .form-input-group i {
  276. position: absolute;
  277. top: 0px;
  278. left: 0px;
  279. width: 45px;
  280. height: 45px;
  281. font-size: 18px;
  282. line-height: 45px;
  283. border-radius: 50%;
  284. text-align: center;
  285. }
  286. .form-btn-group {
  287. width: 100%;
  288. height: 45px;
  289. font-size: 14px;
  290. font-weight: 500;
  291. line-height: 45px;
  292. border-radius: 6px;
  293. letter-spacing: 0.5px;
  294. text-align: center;
  295. text-transform: uppercase;
  296. color: var(--white);
  297. background: var(--primary);
  298. }
  299. .form-btn-group i {
  300. font-size: 15px;
  301. margin-right: 5px;
  302. /*display: inline-block;*/
  303. }
  304. /*버튼*/
  305. .btn {margin:2px; border: none; font-weight: 500; border-radius:0; text-transform: uppercase; padding: 14px 20px/*32px*/; line-height:1;}
  306. .btn:focus {-webkit-box-shadow: none !important; box-shadow: none !important;}
  307. .btn i {margin-right: 5px;}
  308. .btn-inline {
  309. color: var(--white);
  310. background: var(--black);
  311. }
  312. .btn-inline:hover {
  313. color: var(--black);
  314. background: var(--white);
  315. }
  316. .review-act-btn:hover {
  317. border:1px solid var(--black);
  318. }
  319. .btn-outline {
  320. color: var(--black);
  321. background: var(--white);
  322. border:1px solid var(--black);
  323. }
  324. .btn-outline:hover {
  325. color: var(--white);
  326. background: var(--black);
  327. }
  328. .btn_prime {background:var(--black); border:1px solid var(--black); color:var(--white);}
  329. .btn_prime:hover {background:var(--primary); color:var(--white); border:1px solid var(--primary);}
  330. .btn_round {border-radius:8px;}
  331. .btn_tab {margin:3px; background:#fff; border-radius: 50px; border: 1px solid #ddd; color:#666!important;}
  332. .btn_tab:hover {border:1px solid #333; color:var(--black)!important;}
  333. .btn_tab.active {border:1px solid #333; background:var(--black); color:#fff!important;}
  334. .btn_black {background:var(--black); color:#fff;}
  335. .btn_black:hover {background:#424242; color:#fff;}
  336. .btn_gray {background:#9f9f9f; color:#fff;}
  337. .btn_gray:hover {background:#ccc; color:#fff;}
  338. .tooltip_btn {position: relative; display: inline-block; }
  339. .tooltiptext { position: absolute; top:0; left: 50%;display:block; padding-top:20px; visibility:hidden; z-index: 1; transform: translateX(-50%);}
  340. .tooltiptext > div {width:100%; padding:10px; background:#fff; border:1px solid #333; font-size:var(--fsize14);}
  341. .tooltiptext .tit {font-weight:700; color:var(--black); font-size:var(--fisze18);}
  342. .tooltip_btn:hover .tooltiptext {visibility: visible;}
  343. /*모달*/
  344. .modal-dialog {
  345. max-width: -webkit-max-content;
  346. max-width: -moz-max-content;
  347. max-width: max-content;
  348. }
  349. .modal-content {padding:20px; border: none; border-radius: 0px;}
  350. .modal-content .row {margin-left:0; margin-right:0;}
  351. .modal-content .head_tit {font-size: var(--fsize28); font-weight: 700;}
  352. .modal-content .guide {font-size: var(--fsize14); color: var(--black); margin-bottom: 20px;}
  353. .modal-content h3 {font-size: inherit; font-weight: 700; color: var(--black);}
  354. .modal-close {
  355. position: absolute;
  356. top: -15px;
  357. right: -15px;
  358. z-index: 1;
  359. width: 35px;
  360. height: 35px;
  361. font-size: 18px;
  362. line-height: 35px;
  363. border-radius: 50%;
  364. text-align: center;
  365. display: inline-block;
  366. background: var(--white);
  367. -webkit-box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
  368. box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
  369. transition: all linear .3s;
  370. -webkit-transition: all linear .3s;
  371. -moz-transition: all linear .3s;
  372. -ms-transition: all linear .3s;
  373. -o-transition: all linear .3s;
  374. }
  375. .modal-close:hover {
  376. color: var(--white);
  377. background: var(--black);
  378. }
  379. .modal-form {
  380. width: 400px;
  381. padding: 30px;
  382. border-radius: 8px;
  383. background: var(--white);
  384. }
  385. /*테이블관련*/
  386. .table-list {
  387. width: 100%;
  388. }
  389. thead tr {
  390. background: var(--black);
  391. }
  392. thead tr th {
  393. font-size: 17px;
  394. font-weight: 500;
  395. white-space: nowrap;
  396. text-align: center;
  397. text-transform: capitalize;
  398. padding: 8px 10px;
  399. color: var(--white);
  400. border-right: 1px solid var(--border);
  401. }
  402. thead tr th:first-child {
  403. }
  404. thead tr th:last-child {
  405. border-right: none;
  406. }
  407. tbody tr {
  408. border-bottom: 1px solid var(--border);
  409. }
  410. tbody tr td {
  411. padding: 12px 20px;
  412. text-align: center;
  413. border-right: 1px solid var(--border);
  414. }
  415. tbody tr td:last-child {
  416. border-right: none;
  417. }
  418. .table-name {
  419. white-space: nowrap;
  420. text-transform: capitalize;
  421. }
  422. .table-image img {
  423. width: auto;
  424. height: 100px;
  425. }
  426. .table-price h6 {
  427. white-space: nowrap;
  428. }
  429. .table-price h6 small {
  430. font-size: 13px;
  431. margin-left: 3px;
  432. color: var(--gray);
  433. font-family: sans-serif;
  434. }
  435. .table-desc p {
  436. width: 150px;
  437. font-size: 15px;
  438. text-align: left;
  439. }
  440. .table-desc p a {
  441. text-transform: capitalize;
  442. }
  443. .table-desc p a:hover {
  444. text-decoration: underline;
  445. }
  446. .table-vendor a {
  447. font-weight: 500;
  448. color: var(--heading);
  449. text-transform: capitalize;
  450. transition: all linear .3s;
  451. -webkit-transition: all linear .3s;
  452. -moz-transition: all linear .3s;
  453. -ms-transition: all linear .3s;
  454. -o-transition: all linear .3s;
  455. }
  456. .table-vendor a:hover {
  457. color: var(--primary);
  458. }
  459. .table-status h6 {
  460. text-transform: capitalize;
  461. }
  462. .table-status .stock-in {
  463. color: #999;
  464. }
  465. .table-status .stock-out {
  466. color: var(--orange);
  467. }
  468. .table-shop {
  469. width: 180px;
  470. }
  471. .table-shop .product-add { display: flex; justify-content: center; align-items: center; width: 100%; padding: 5px; background: #efefef; border-radius: 8px; color: var(--black); font-size: 14px;}
  472. .table-shop .product-add i {margin-right:5px; font-size:12px;}
  473. .table-shop .action-plus i,
  474. .table-shop .action-minus i {background: var(--white);}
  475. .table-action button i,
  476. .table-action a i {
  477. width: 35px;
  478. height: 35px;
  479. font-size: 16px;
  480. line-height: 35px;
  481. text-align: center;
  482. display: inline-block;
  483. border-radius: 5px;
  484. margin: 3px;
  485. transition: all linear .3s;
  486. -webkit-transition: all linear .3s;
  487. -moz-transition: all linear .3s;
  488. -ms-transition: all linear .3s;
  489. -o-transition: all linear .3s;
  490. }
  491. .table-action .view i {
  492. color: var(--black);
  493. background: var(--white);
  494. }
  495. .table-action .view i:hover {
  496. color: var(--white);
  497. background: var(--black);
  498. }
  499. .table-action .wish i {
  500. color: var(--green);
  501. background: var(--white);
  502. }
  503. .table-action .wish.active i {
  504. color: var(--white);
  505. background: var(--green);
  506. }
  507. .table-action .trash i {
  508. color: #666;
  509. background: var(--white);
  510. }
  511. .table-action .trash i:hover {
  512. color: var(--white);
  513. background: #111;
  514. }
  515. .tb_bline {width:100%; border-top:1px solid var(--black);}
  516. .tb_bline th,
  517. .tb_bline td {padding:10px; text-align:left;}
  518. .tb_bline th {font-weight:500; color:var(--black);}
  519. #app {min-height: calc(100vh - 330px);}
  520. /*헤더*/
  521. .header-part .alam,
  522. .header-part .cate-btn {display:none;}
  523. .header-part {position: sticky; top: 0; left: 0; background:#fff; z-index:100;}
  524. .header-part.active {border-bottom:1px solid var(--border);}
  525. .header-part.active .header-content {padding-bottom:15px;}
  526. .header-content {padding:30px 0px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
  527. .header-content .header-logo img {width:110px; margin-right:54px; transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;}
  528. .header-content .search_box {display:flex; flex-flow:row wrap; align-items:center; position: relative;}
  529. .header-content .search_box input {width:400px; height:40px; padding:5px 15px; border: 1px solid var(--border); border-radius:50px; -webkit-appearance: textfield;}
  530. .header-content .search_box input::placeholder {color:var(--light); font-weight:500;}
  531. .header-content .search_box input:focus {outline: 0; border-color:#646468; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);}
  532. .search_box input:focus + .search-ac {display:flex; flex-flow:row wrap;}
  533. .search-ac {display: none; position: absolute; top: 44px; left: 0; right: 0; z-index: 10; padding:15px; background:#fff; border: 1px solid var(--border); border-radius:8px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size:14px;}
  534. .search-ac:hover {display: block;}
  535. .search-ac li {display: block; width:100%;}
  536. .search-ac strong {color:var(--black); font-weight:700;}
  537. .search-ac a {display: block; position: relative; padding:5px 0; color: #808394; text-decoration: none;}
  538. .search-ac.search-ac.default {padding:0;}
  539. .search-ac.search-ac.default li:first-child {width:55%; padding:15px;}
  540. .search-ac.search-ac.default li:last-child {width:45%; padding:15px;}
  541. .search-ac.search-ac.default dt {display:flex; margin-bottom:10px; color:var(--black); font-siz:16px}
  542. .search-ac.search-ac.default dt span {margin-left:auto; color:var(--light); font-weight:400; font-size:12px;}
  543. .search-ac.search-ac.default dd {display:flex; align-items:center;}
  544. .search-ac.search-ac.default a {margin-right:10px;}
  545. .search-ac.search-ac.default .del {margin-left:auto; color:var(--light); font-size:12px; cursor:pointer;}
  546. .search-ac.search-ac.default li:last-child .num {margin-right:10px; font-weight:500; color:var(--black)}
  547. .header-content .search_box button {width:40px; height:40px; line-height:40px; text-align:center; margin-left:5px; color:#fff; background:var(--black); border-radius:50px;}
  548. .header-content .header_mem {margin-left:auto;}
  549. .header-content .header_mem a {color:#666;}
  550. .header-content .header_mem a > i {width:40px; height:40px; margin-right:6px; line-height:40px; text-align:center; background:#eff1f4; border-radius:50px;}
  551. .header-content .header_mem a span i {font-size:12px;}
  552. .header-content .header_mem .navbar-item {margin:0;}
  553. .header-content .header_mem .navbar-item > a {color:var(--black);}
  554. .header-content .header_mem .navbar-link {padding:0; color: var(--black); text-transform: capitalize; font-weight:400;}
  555. .header-content .header_mem .dropdown-position-list,
  556. .header-content .header_mem .dropdown:hover .dropdown-position-list {top:38px; right: 0; left: auto; z-index:100;}
  557. .header-content .header_mem .dropdown-position-list::before {display:none;}
  558. .header-content .header_mem .dropdown-position-list i {width:auto; height:auto; background:none; border-radius:0; line-height:1;}
  559. .header-content .header_mem .dropdown-arrow {padding-right:18px!important;}
  560. /*상단메뉴*/
  561. .navbar-content {display:flex; margin-left:-20px;}
  562. .navbar-list {display:flex; align-items: center;}
  563. .navbar-link:hover {color: var(--primary);}
  564. .navbar-part {width: 100%; z-index: 2; background:#fff; border-bottom:1px solid var(--border); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;}
  565. .navbar-part .navbar-link {padding:28px 20px; color: var(--black); font-weight:700; font-size:var(--fsize2); text-transform: capitalize;}
  566. .navbar-part .navbar-link:hover,
  567. .navbar-part .navbar-link.active,
  568. .dropdown-megamenu:hover .navbar-link,
  569. .dropdown-megamenu:hover .dropdown-arrow::before {color:var(--hover);}
  570. .navbar-part .divide_v:after {display:inline-block; content:""; width:1px; height:18px; margin: -4px 0 0 30px; background: #ddd; vertical-align: middle;}
  571. .dropdown-megamenu {position: static; padding-right:25px;}
  572. .dropdown-megamenu:hover .megamenu {visibility: visible; opacity: 1; top:80px;}
  573. .megamenu {position: absolute; left:50%; width:100vw; padding: 30px; background:#fff; z-index: 2;
  574. -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  575. box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  576. -webkit-transform: translateX(-50%);
  577. transform: translateX(-50%);
  578. visibility:hidden;
  579. opacity:0;
  580. transition: all linear .3s;
  581. -webkit-transition: all linear .3s;
  582. -moz-transition: all linear .3s;
  583. -ms-transition: all linear .3s;
  584. -o-transition: all linear .3s;
  585. }
  586. .megamenu-scroll {height: 380px; overflow-y: scroll;}
  587. .megamenu .row {padding:0 15px; font-size:14px;}
  588. .megamenu .cate {display:flex; justify-content:space-between; width:calc(100% - 401px);}
  589. .megamenu .cate_ban {padding-left:40px; border-left:1px solid var(--border);}
  590. .megamenu-wrap {width:160px; margin-right:30px;}
  591. .megamenu-wrap dt a {display:inline-block; margin-bottom:10px; color:var(--black); font-size:14px; font-weight:700;}
  592. .megamenu-wrap dd a {display:inline-block; padding:2px 0; color:var(--text); font-size:14px;}
  593. .megamenu-wrap dd a:hover {font-weight:500; color:var(--black);}
  594. .megamenu .cate_ban h3 {margin-bottom:10px; color:var(--black); font-size:14px; font-weight:700;}
  595. .megamenu .cate_ban .box_wrap {display:flex;}
  596. .megamenu .cate_ban .box {width:150px; margin-left:60px; font-size:14px;}
  597. .megamenu .cate_ban .box:first-child {margin-left:0;}
  598. .megamenu .cate_ban .img_box {position:relative; width:150px; height:0; padding-top:150px; margin-bottom:10px;}
  599. .megamenu .cate_ban .img_box img {position:absolute; top:0; left:0; width:100%; height:100%;}
  600. .megamenu .cate_ban .name {color:var(--black); font-weight:500;}
  601. .megamenu .cate_ban .info {color:var(--gray);}
  602. .megamenu .cate_ban .price {color:var(--red); font-weight:700;}
  603. .megamenu .brand_area {display:block; }
  604. .megamenu .brand_search {position:relative; display:flex; flex-direction:column; margin-bottom:10px; padding-right:10px; color:var(--black);}
  605. .megamenu .brand_search > div {font-weight:700;}
  606. .megamenu .brand_index {display:flex; align-items:center; flex-flow:row wrap; background:#f6f6f6;}
  607. .megamenu .brand_index li:not(.brand_best) {display:flex; align-items:center; justify-content:center; padding:5px 8px; font-weight:500;}
  608. .megamenu .brand_index li:not(.brand_best):hover {background:#f1f1f1; font-weight:700; color:var(--black);}
  609. .megamenu .brand_index li.active {display:flex; align-items:center; justify-content:center; margin-right:5px; padding:5px 10px; background:var(--black); border-radius:50px; font-weight:500; color:#fff; font-size:12px; line-height:1;}
  610. /*.megamenu .brand_best:hover {background:var(--black);}*/
  611. .megamenu .search_box {display: flex; flex-flow:row wrap; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ddd;}
  612. .megamenu .search_box input {width: 100%;max-width: 500px; height:32px; padding:5px 10px; border:1px solid #ddd; border-radius:50px;}
  613. .megamenu .search_box button {border-radius: 50px; background: var(--black); height: 30px; padding: 5px 15px; color: #fff; margin-left: 3px; font-size: 12px;}
  614. .megamenu .search_box .btn {height: 30px; margin:0 5px; padding:5px 15px; background:#f1f1f1; border:none; border-radius:50px; font-size:12px; font-weight:400; line-height: 21px;}
  615. .megamenu .search_box .cls {height:30px; width:30px; line-height:29px; background:#fff; border:1px solid var(--black); border-radius:50px; text-align:center; color:var(--black);}
  616. .megamenu .brand_index li {cursor:pointer;}
  617. .megamenu .brand_list ul {display:flex; flex-flow:row wrap; height:300px; margin-left:-10px; overflow-y:scroll;}
  618. .megamenu .brand_list li {display:flex; width:25%; padding:10px;}
  619. .megamenu .brand_list li a {color:var(--text);}
  620. .megamenu .brand_list li a:hover {font-weight:500; color:var(--black);}
  621. .megamenu .brand_list li i {margin-right:5px;}
  622. .cate_b .megamenu .cate {width: calc(100% - 212px);}
  623. .cate_b .cate_ban .box_wrap {flex-flow:column nowrap; align-items:center;}
  624. .cate_b .cate_ban .box {margin:10px!important;}
  625. .header-navbar-fixed.active .dropdown-megamenu:hover .megamenu {
  626. top: 62px;
  627. }
  628. .navbar-part.active {display:none;
  629. position: -webkit-sticky;
  630. position: sticky;
  631. top:91px;
  632. left: 0px;
  633. width: 100%;
  634. z-index:2;
  635. background: var(--white);
  636. -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  637. box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
  638. transition: all linear .3s;
  639. -webkit-transition: all linear .3s;
  640. -moz-transition: all linear .3s;
  641. -ms-transition: all linear .3s;
  642. -o-transition: all linear .3s;}
  643. .navbar-part.active .navbar-item > .navbar-link {padding: 15px 0px;}
  644. /*지워도 됨
  645. .header-part.active .header-content {
  646. padding:5px 0px;
  647. }
  648. .header-part.active .header-widget:hover i {
  649. background: var(--primary);
  650. }
  651. .header-part.active .header-widget sup {
  652. border-color: var(--white);
  653. }
  654. .header-part.active .header-form {
  655. background: var(--white);
  656. border-color: var(--primary);
  657. }
  658. .header-part.active .header-form input,
  659. .header-part.active .header-form button i {height:40px;}
  660. */
  661. .dropdown-arrow::before {
  662. color: var(--black);
  663. }
  664. .dropdown-arrow {position: relative; }
  665. .dropdown-arrow:hover::before {color: var(--hover);}
  666. .dropdown-arrow.root::before {content: "" !important;}
  667. .dropdown-link.root::before {content: "" !important;}
  668. .dropdown-arrow::before {
  669. position: absolute;
  670. content: "\f107";
  671. font-weight: 900;
  672. font-family: "Font Awesome 5 Free";
  673. top: 50%;
  674. right: 0px;
  675. font-size: 12px;
  676. line-height: 12px;
  677. color: var(--text);
  678. -webkit-transform: translateY(-50%);
  679. transform: translateY(-50%);
  680. transition: all linear .3s;
  681. -webkit-transition: all linear .3s;
  682. -moz-transition: all linear .3s;
  683. -ms-transition: all linear .3s;
  684. -o-transition: all linear .3s;
  685. }
  686. .dropdown-link {
  687. position: relative;
  688. transition: all linear .3s;
  689. -webkit-transition: all linear .3s;
  690. -moz-transition: all linear .3s;
  691. -ms-transition: all linear .3s;
  692. -o-transition: all linear .3s;
  693. }
  694. .dropdown-link:hover {
  695. color: var(--primary);
  696. background: var(--chalk);
  697. }
  698. .dropdown-link:hover::before {
  699. color: var(--primary);
  700. }
  701. .dropdown-link::before {
  702. padding: 15px 20px;
  703. position: absolute;
  704. top: 50%;
  705. right: 18px;
  706. content: "\f054";
  707. font-size: 10px;
  708. font-weight: 900;
  709. font-family: "Font Awesome 5 Free";
  710. -webkit-transform: translateY(-50%);
  711. transform: translateY(-50%);
  712. transition: all linear .3s;
  713. -webkit-transition: all linear .3s;
  714. -moz-transition: all linear .3s;
  715. -ms-transition: all linear .3s;
  716. -o-transition: all linear .3s;
  717. }
  718. .dropdown-link.active {color: var(--black);}
  719. .dropdown-link.active::before {color: var(--black); -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg);}
  720. .mypage-sidebar .dropdown-link.active::before {-webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg);}
  721. .dropdown:hover .dropdown-position-list {visibility: visible; opacity: 1; top: 70px;}
  722. .dropdown-position-list {position: absolute; top: 100px; left: 0; z-index: 2; width: 200px; height: auto; visibility: hidden; opacity: 0; padding: 10px; background: var(--white); border: 1px solid var(--border); -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -ms-transition: all linear .1s; -o-transition: all linear .1s;}
  723. .dropdown-position-list li a {
  724. width: 100%;
  725. font-size: 15px;
  726. line-height: 18px;
  727. border-radius: 8px;
  728. padding:8px 15px;
  729. color: var(--text);
  730. background: var(--white);
  731. white-space: nowrap;
  732. text-transform: capitalize;
  733. }
  734. .dropdown-position-list li a:hover {color: var(--primary);}
  735. /*암막*/
  736. .backdrop {
  737. position: fixed;
  738. top: 0px;
  739. left: 0px;
  740. z-index:190;
  741. width: 1000%;
  742. height: 100%;
  743. background: rgba(0, 0, 0, 0.5);
  744. display: none;
  745. }
  746. .backtop {
  747. position: fixed;
  748. right: 20px;
  749. bottom: 20px;
  750. z-index: 2;
  751. width: 48px;
  752. height: 48px;
  753. font-size: 15px;
  754. color: var(--white);
  755. line-height: 48px;
  756. text-align: center;
  757. display: none;
  758. border-radius: 50%;
  759. background: var(--black);
  760. -webkit-animation: mahmud 2s infinite;
  761. animation: mahmud 2s infinite;
  762. transition: all linear .3s;
  763. -webkit-transition: all linear .3s;
  764. -moz-transition: all linear .3s;
  765. -ms-transition: all linear .3s;
  766. -o-transition: all linear .3s;
  767. }
  768. .backtop:hover {
  769. color: var(--white);
  770. }
  771. @-webkit-keyframes mahmud {
  772. 0% {
  773. margin-bottom: 0px;
  774. }
  775. 50% {
  776. margin-bottom: 15px;
  777. }
  778. }
  779. @keyframes mahmud {
  780. 0% {
  781. margin-bottom: 0px;
  782. }
  783. 50% {
  784. margin-bottom: 15px;
  785. }
  786. }
  787. .inner-section {margin-bottom:0;}
  788. /*장바구니 슬라이드*/
  789. .cart-sidebar {
  790. position: fixed;
  791. top: 0px;
  792. right: -450px;
  793. width: 400px;
  794. height: 100vh;
  795. z-index:200;
  796. background: var(--white);
  797. -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  798. box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  799. transition: all linear .3s;
  800. -webkit-transition: all linear .3s;
  801. -moz-transition: all linear .3s;
  802. -ms-transition: all linear .3s;
  803. -o-transition: all linear .3s;
  804. }
  805. .cart-sidebar.active {
  806. right: 0px;
  807. }
  808. .cart-header {
  809. padding: 18px 25px;
  810. text-align: center;
  811. position: relative;
  812. border-bottom: 1px solid var(--border);
  813. }
  814. .cart-total {
  815. display: -webkit-box;
  816. display: -ms-flexbox;
  817. display: flex;
  818. -webkit-box-align: center;
  819. -ms-flex-align: center;
  820. align-items: center;
  821. -webkit-box-pack: center;
  822. -ms-flex-pack: center;
  823. justify-content: center;
  824. }
  825. .cart-total i {
  826. font-size: 20px;
  827. margin-right: 8px;
  828. color: var(--black);
  829. }
  830. .cart-total span {
  831. font-weight: 500;
  832. color: var(--black);
  833. text-transform: capitalize;
  834. }
  835. .cart-close {
  836. position: absolute;
  837. top: 50%;
  838. left: -18px;
  839. -webkit-transform: translateY(-50%);
  840. transform: translateY(-50%);
  841. }
  842. .cart-close i {
  843. width: 35px;
  844. height: 35px;
  845. font-size: 18px;
  846. line-height: 35px;
  847. border-radius: 50%;
  848. text-align: center;
  849. display: inline-block;
  850. color: var(--text);
  851. background: var(--white);
  852. text-shadow: var(--primary-tshadow);
  853. transition: all linear .3s;
  854. -webkit-transition: all linear .3s;
  855. -moz-transition: all linear .3s;
  856. -ms-transition: all linear .3s;
  857. -o-transition: all linear .3s;
  858. }
  859. .cart-close i:hover {
  860. color: var(--white);
  861. background: var(--primary);
  862. }
  863. .cart-list {
  864. height: 100%;
  865. padding: 0px 15px;
  866. max-height: calc(100vh - 210px);
  867. overflow-y: scroll;
  868. }
  869. .cart-item {
  870. padding: 15px 0px;
  871. display: -webkit-box;
  872. display: -ms-flexbox;
  873. display: flex;
  874. -webkit-box-align: center;
  875. -ms-flex-align: center;
  876. align-items: center;
  877. -webkit-box-pack: center;
  878. -ms-flex-pack: center;
  879. justify-content: center;
  880. -webkit-box-align: start;
  881. -ms-flex-align: start;
  882. align-items: flex-start;
  883. border-bottom: 1px solid var(--border);
  884. }
  885. .cart-item:hover .cart-media button {
  886. -webkit-transform: scale(1);
  887. transform: scale(1);
  888. }
  889. .cart-item:last-child {
  890. border-bottom: none;
  891. }
  892. .cart-media {
  893. position: relative;
  894. margin-right: 25px;
  895. }
  896. .cart-media a img {
  897. width: 100px;
  898. border-radius: 8px;
  899. }
  900. .cart-media button {
  901. position: absolute;
  902. top: 0px;
  903. left: 0px;
  904. width: 100%;
  905. height: 100%;
  906. border-radius: 8px;
  907. background: rgba(0, 0, 0, 0.2);
  908. -webkit-transform: scale(0);
  909. transform: scale(0);
  910. transition: all linear .3s;
  911. -webkit-transition: all linear .3s;
  912. -moz-transition: all linear .3s;
  913. -ms-transition: all linear .3s;
  914. -o-transition: all linear .3s;
  915. }
  916. .cart-media button i {
  917. width: 32px;
  918. height: 32px;
  919. font-size: 18px;
  920. line-height: 32px;
  921. text-align: center;
  922. border-radius: 5px;
  923. display: inline-block;
  924. color: var(--red);
  925. background: rgba(255, 255, 255, 0.9);
  926. transition: all linear .3s;
  927. -webkit-transition: all linear .3s;
  928. -moz-transition: all linear .3s;
  929. -ms-transition: all linear .3s;
  930. -o-transition: all linear .3s;
  931. }
  932. .cart-media button i:hover {
  933. color: var(--white);
  934. background: var(--red);
  935. }
  936. .cart-info-group {
  937. width: 100%;
  938. }
  939. .cart-info {
  940. margin-bottom: 13px;
  941. }
  942. .cart-info h6 {
  943. font-weight: 400;
  944. text-transform: capitalize;
  945. }
  946. .cart-info h6 a {
  947. color: var(--heading);
  948. }
  949. .cart-info p {
  950. font-size: 14px;
  951. }
  952. .cart-action-group {
  953. display: -webkit-box;
  954. display: -ms-flexbox;
  955. display: flex;
  956. -webkit-box-align: center;
  957. -ms-flex-align: center;
  958. align-items: center;
  959. -webkit-box-pack: center;
  960. -ms-flex-pack: center;
  961. justify-content: center;
  962. -webkit-box-pack: justify;
  963. -ms-flex-pack: justify;
  964. justify-content: space-between;
  965. }
  966. .cart-action-group .product-action {
  967. display: -webkit-box;
  968. display: -ms-flexbox;
  969. display: flex;
  970. }
  971. .cart-action-group .product-action button i {
  972. width: 30px;
  973. height: 30px;
  974. font-size: 12px;
  975. line-height: 30px;
  976. border-radius: 5px;
  977. }
  978. .cart-action-group .product-action input {
  979. width: 45px;
  980. height: 30px;
  981. font-size: 14px;
  982. border-radius: 5px;
  983. color: var(--primary);
  984. background: var(--chalk);
  985. }
  986. .cart-action-group h6 {
  987. font-weight: 500;
  988. color: var(--primary);
  989. }
  990. .cart-footer {
  991. padding: 20px 15px 0px;
  992. text-align: center;
  993. -webkit-box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
  994. box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
  995. }
  996. /*카테고리 슬라이드*/
  997. .category-sidebar {
  998. position: fixed;
  999. top: 0px;
  1000. left: -320px;
  1001. width: 280px;
  1002. height: 100vh;
  1003. z-index:200;
  1004. background: var(--white);
  1005. -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1006. box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1007. transition: all linear .3s;
  1008. -webkit-transition: all linear .3s;
  1009. -moz-transition: all linear .3s;
  1010. -ms-transition: all linear .3s;
  1011. -o-transition: all linear .3s;
  1012. }
  1013. .category-sidebar.active {
  1014. left: 0px;
  1015. }
  1016. .category-header {
  1017. padding: 15px 18px;
  1018. position: relative;
  1019. border-bottom: 1px solid var(--border);
  1020. display: -webkit-box;
  1021. display: -ms-flexbox;
  1022. display: flex;
  1023. -webkit-box-align: center;
  1024. -ms-flex-align: center;
  1025. align-items: center;
  1026. -webkit-box-pack: start;
  1027. -ms-flex-pack: start;
  1028. justify-content: flex-start;
  1029. }
  1030. .category-title {
  1031. color: var(--primary);
  1032. text-transform: capitalize;
  1033. display: -webkit-box;
  1034. display: -ms-flexbox;
  1035. display: flex;
  1036. -webkit-box-align: center;
  1037. -ms-flex-align: center;
  1038. align-items: center;
  1039. -webkit-box-pack: start;
  1040. -ms-flex-pack: start;
  1041. justify-content: flex-start;
  1042. }
  1043. .category-title i {
  1044. margin-right: 8px;
  1045. }
  1046. .category-close {
  1047. position: absolute;
  1048. top: 50%;
  1049. right: -18px;
  1050. -webkit-transform: translateY(-50%);
  1051. transform: translateY(-50%);
  1052. }
  1053. .category-close i {
  1054. width: 35px;
  1055. height: 35px;
  1056. font-size: 18px;
  1057. line-height: 35px;
  1058. border-radius: 50%;
  1059. text-align: center;
  1060. display: inline-block;
  1061. color: var(--text);
  1062. background: var(--white);
  1063. text-shadow: var(--primary-tshadow);
  1064. transition: all linear .3s;
  1065. -webkit-transition: all linear .3s;
  1066. -moz-transition: all linear .3s;
  1067. -ms-transition: all linear .3s;
  1068. -o-transition: all linear .3s;
  1069. }
  1070. .category-close i:hover {
  1071. color: var(--white);
  1072. background: var(--primary);
  1073. }
  1074. .category-list {
  1075. width: 100%;
  1076. padding: 0px 15px;
  1077. overflow-y: scroll;
  1078. height: calc(100vh - 130px);
  1079. }
  1080. .category-item {
  1081. width: 100%;
  1082. border-bottom: 1px solid var(--border);
  1083. }
  1084. .category-link {
  1085. font-size: 16px;
  1086. font-weight: 400;
  1087. padding: 12px 15px;
  1088. color: var(--text);
  1089. text-transform: capitalize;
  1090. display: -webkit-box;
  1091. display: -ms-flexbox;
  1092. display: flex;
  1093. -webkit-box-align: center;
  1094. -ms-flex-align: center;
  1095. align-items: center;
  1096. -webkit-box-pack: start;
  1097. -ms-flex-pack: start;
  1098. justify-content: flex-start;
  1099. transition: all linear .3s;
  1100. -webkit-transition: all linear .3s;
  1101. -moz-transition: all linear .3s;
  1102. -ms-transition: all linear .3s;
  1103. -o-transition: all linear .3s;
  1104. }
  1105. .category-link i {
  1106. font-size: 25px;
  1107. margin-right: 15px;
  1108. display: inline-block;
  1109. }
  1110. .category-footer {
  1111. text-align: center;
  1112. margin-top: 20px;
  1113. }
  1114. .category-footer p {
  1115. font-size: 14px;
  1116. color: var(--gray);
  1117. }
  1118. .category-footer p a {
  1119. color: var(--primary);
  1120. }
  1121. .category-sidebar .dropdown-list {display:none;}
  1122. .category-sidebar .category-link {font-weight:700;}
  1123. .dropdown-list {
  1124. display: none;
  1125. padding: 0px 20px;
  1126. transition: all linear .3s;
  1127. -webkit-transition: all linear .3s;
  1128. -moz-transition: all linear .3s;
  1129. -ms-transition: all linear .3s;
  1130. -o-transition: all linear .3s;
  1131. }
  1132. .dropdown-list li a {
  1133. width: 100%;
  1134. font-size: 15px;
  1135. line-height: 18px;
  1136. border-radius: 8px;
  1137. padding: 10px 15px 10px 35px;
  1138. color: var(--text);
  1139. background: var(--white);
  1140. position: relative;
  1141. white-space: nowrap;
  1142. text-transform: capitalize;
  1143. transition: all linear .3s;
  1144. -webkit-transition: all linear .3s;
  1145. -moz-transition: all linear .3s;
  1146. -ms-transition: all linear .3s;
  1147. -o-transition: all linear .3s;
  1148. }
  1149. .dropdown-list li a:hover {
  1150. color: var(--primary);
  1151. background: var(--chalk);
  1152. }
  1153. .dropdown-list li a::before {
  1154. position: absolute;
  1155. top: 50%;
  1156. left: 15px;
  1157. content: "\f068";
  1158. font-size: 10px;
  1159. font-weight: 900;
  1160. font-family: "Font Awesome 5 Free";
  1161. -webkit-transform: translateY(-50%);
  1162. transform: translateY(-50%);
  1163. }
  1164. .dropdown:hover .navbar-position-list {
  1165. top: 30px !important;
  1166. }
  1167. .navbar-position-list {
  1168. top: 60px !important;
  1169. z-index: 1000 !important;
  1170. }
  1171. .navbar-position-list li {
  1172. margin: 0 !important;
  1173. }
  1174. .dropdown-position-list::before {
  1175. position: absolute;
  1176. content: "";
  1177. z-index: -1;
  1178. top: -7px;
  1179. left: 12px;
  1180. width: 12px;
  1181. height: 12px;
  1182. border-radius: 3px;
  1183. -webkit-transform: rotate(45deg);
  1184. transform: rotate(45deg);
  1185. background: var(--white);
  1186. border-top: 1px solid var(--border);
  1187. border-left: 1px solid var(--border);
  1188. }
  1189. .dropdown-submenu .dropdown-arrow {
  1190. display: flex;
  1191. align-items: center;
  1192. padding:8px 15px!important;
  1193. }
  1194. .dropdown-submenu .dropdown-arrow::before {transform: rotate(-90deg); top: 30%;}
  1195. .dropdown-submenu {position:relative;}
  1196. .dropdown-submenu .dropdown-position-list {top:0!important; left: calc(100% + 15px); visibility:hidden!important;}
  1197. .dropdown-submenu:hover .dropdown-position-list {left: calc(100% + 5px); visibility: visible!important; opacity: 1;}
  1198. .dropdown-submenu .dropdown-position-list::before {top:15px;left:-8px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
  1199. /*사이드바*/
  1200. .nav-sidebar,
  1201. .mypage-sidebar {
  1202. position: fixed;
  1203. top: 0px; left: -320px;
  1204. width: 280px; height: 100%; padding: 0px;
  1205. z-index: 200;
  1206. background: var(--white);
  1207. -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1208. box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
  1209. transition: all linear .3s;
  1210. -webkit-transition: all linear .3s;
  1211. -moz-transition: all linear .3s;
  1212. -ms-transition: all linear .3s;
  1213. -o-transition: all linear .3s;
  1214. }
  1215. .nav-sidebar.active,
  1216. .mypage-sidebar.active {left: 0px;}
  1217. .mypage-sidebar .header-cart {display:block;}
  1218. .sidebar .nav-list li ul li a,
  1219. .nav-sidebar .nav-list li ul li a {padding:10px 20px;}
  1220. /*.nav-sidebar .nav-list li > ul a.active {background:#fff;}*/
  1221. .sidebar .nav-list li ul ul li,
  1222. .nav-sidebar .nav-list li ul ul li {padding-left:20px;}
  1223. .sidebar .dropdown-list,
  1224. .nav-sidebar .dropdown-list {padding:0;}
  1225. .sidebar .nav-list li,
  1226. .nav-sidebar .nav-list li {position:relative;}
  1227. .sidebar .nav_arrow,
  1228. .nav-sidebar .nav_arrow {position:absolute; top:24px; right:0; z-index:50;}
  1229. .sidebar .nav_arrow.active~a,
  1230. .nav-sidebar .nav_arrow.active~a {color: var(--primary); background: var(--green-chalk);}
  1231. .sidebar .nav-link::before,
  1232. .nav-sidebar .nav-link::before {display:none;}
  1233. .sidebar .dropdown-link:hover,
  1234. .nav-sidebar .dropdown-link:hover {}
  1235. .nav-link {
  1236. width: 100%;
  1237. font-weight: 500;
  1238. padding: 12px 15px;
  1239. color: var(--black);
  1240. text-transform: capitalize;
  1241. transition: all linear .3s;
  1242. -webkit-transition: all linear .3s;
  1243. -moz-transition: all linear .3s;
  1244. -ms-transition: all linear .3s;
  1245. -o-transition: all linear .3s;
  1246. }
  1247. .nav-link:hover {background: #f1f1f1;}
  1248. .nav-header {
  1249. padding: 15px 0px;
  1250. position: relative;
  1251. text-align: center;
  1252. border-bottom: 1px solid var(--border);
  1253. }
  1254. .nav-header a img {
  1255. width: auto;
  1256. height: 40px;
  1257. }
  1258. .nav-close {
  1259. position: absolute;
  1260. top: 50%;
  1261. right: -18px;
  1262. -webkit-transform: translateY(-50%);
  1263. transform: translateY(-50%);
  1264. }
  1265. .nav-close i {
  1266. width: 35px;
  1267. height: 35px;
  1268. font-size: 18px;
  1269. line-height: 35px;
  1270. border-radius: 50%;
  1271. text-align: center;
  1272. display: inline-block;
  1273. color: var(--text);
  1274. background: var(--white);
  1275. text-shadow: var(--primary-tshadow);
  1276. transition: all linear .3s;
  1277. -webkit-transition: all linear .3s;
  1278. -moz-transition: all linear .3s;
  1279. -ms-transition: all linear .3s;
  1280. -o-transition: all linear .3s;
  1281. }
  1282. .nav-close i:hover {
  1283. color: var(--white);
  1284. background: var(--primary);
  1285. }
  1286. .nav-content {overflow-y: scroll; max-height: calc(100vh - 100px);}
  1287. .nav-btn {
  1288. width: 100%;
  1289. padding: 20px 0px;
  1290. margin-bottom: 20px;
  1291. text-align: center;
  1292. background: var(--chalk);
  1293. }
  1294. .nav-btn .btn {
  1295. display:block;
  1296. width:90%;
  1297. margin: 10px auto;
  1298. font-size: 14px;
  1299. padding: 15px 25px;
  1300. letter-spacing: 0.3px;
  1301. border:2px solid var(--black);
  1302. }
  1303. .nav-btn .btn i {
  1304. font-size: 14px;
  1305. }
  1306. .nav-profile {
  1307. width: 100%;
  1308. text-align: center;
  1309. padding: 18px 0px 0px;
  1310. }
  1311. .nav-user {
  1312. margin-bottom: 10px;
  1313. border-radius: 50%;
  1314. border: 2px solid var(--primary);
  1315. }
  1316. .nav-user img {
  1317. width: 85px;
  1318. height: 85px;
  1319. border-radius: 50%;
  1320. border: 2px solid var(--white);
  1321. }
  1322. .nav-name {
  1323. margin-bottom: 18px;
  1324. text-transform: capitalize;
  1325. }
  1326. .nav-name a {
  1327. color: var(--heading);
  1328. transition: all linear .3s;
  1329. -webkit-transition: all linear .3s;
  1330. -moz-transition: all linear .3s;
  1331. -ms-transition: all linear .3s;
  1332. -o-transition: all linear .3s;
  1333. }
  1334. .nav-name a:hover {
  1335. color: var(--primary);
  1336. }
  1337. .nav-select-group {
  1338. display: -webkit-box;
  1339. display: -ms-flexbox;
  1340. display: flex;
  1341. -webkit-box-align: center;
  1342. -ms-flex-align: center;
  1343. align-items: center;
  1344. -webkit-box-pack: center;
  1345. -ms-flex-pack: center;
  1346. justify-content: center;
  1347. padding-bottom: 18px;
  1348. border-bottom: 1px solid var(--border);
  1349. }
  1350. .nav-select {
  1351. display: -webkit-box;
  1352. display: -ms-flexbox;
  1353. display: flex;
  1354. -webkit-box-align: center;
  1355. -ms-flex-align: center;
  1356. align-items: center;
  1357. -webkit-box-pack: center;
  1358. -ms-flex-pack: center;
  1359. justify-content: center;
  1360. margin-right: 18px;
  1361. padding-right: 18px;
  1362. line-height: 20px;
  1363. border-right: 1px solid var(--gray-chalk);
  1364. }
  1365. .nav-select:last-child {
  1366. padding: 0px;
  1367. margin: 0px;
  1368. border: none;
  1369. }
  1370. .nav-select i {
  1371. margin-right: 5px;
  1372. }
  1373. .nav-list {
  1374. width: 100%;
  1375. }
  1376. .nav-list li {
  1377. width: 100%;
  1378. }
  1379. .nav-link::before {
  1380. right: 15px;
  1381. }
  1382. .nav-link i {
  1383. font-size: 20px;
  1384. margin-right: 12px;
  1385. }
  1386. .nav-link.active {background:#f1f1f1;}
  1387. .nav-info-group {
  1388. padding: 20px 0px;
  1389. margin-top: 15px;
  1390. margin-bottom: 25px;
  1391. border-top: 1px solid var(--border);
  1392. border-bottom: 1px solid var(--border);
  1393. }
  1394. .nav-info {
  1395. margin-bottom: 20px;
  1396. display: -webkit-box;
  1397. display: -ms-flexbox;
  1398. display: flex;
  1399. -webkit-box-align: center;
  1400. -ms-flex-align: center;
  1401. align-items: center;
  1402. -webkit-box-pack: start;
  1403. -ms-flex-pack: start;
  1404. justify-content: flex-start;
  1405. }
  1406. .nav-info:last-child {
  1407. margin-bottom: 0px;
  1408. }
  1409. .nav-info i {
  1410. font-size: 30px;
  1411. margin-right: 15px;
  1412. color: var(--primary);
  1413. }
  1414. .nav-info p small {
  1415. font-size: 14px;
  1416. line-height: 18px;
  1417. display: block;
  1418. text-align: left;
  1419. text-transform: capitalize;
  1420. }
  1421. .nav-info p span {
  1422. font-size: 16px;
  1423. font-weight: 500;
  1424. }
  1425. .nav-footer {
  1426. text-align: center;
  1427. }
  1428. .nav-footer p {
  1429. font-size: 14px;
  1430. color: var(--gray);
  1431. }
  1432. .nav-footer p a {
  1433. color: var(--primary);
  1434. }
  1435. .collapse .nav-link {font-size:14px; color:#666;}
  1436. /*메인 슬라이드*/
  1437. .visual_main {margin:0 auto; height:600px; margin-left:-22px;}
  1438. .visual_main .row {align-items:center; width:78%/*960px*/; max-width:930px; height:100%; margin:0 auto;}
  1439. .visual_main .swiper {height:100%;}
  1440. .visual_main .swiper-slide {width:1320px; background:#e1e6f2;}
  1441. .visual_main .swiper-slide:not(.swiper-slide-active) {opacity:0.3;}
  1442. .visual_main .cont {margin-right:30px;}
  1443. .visual_main .title {font-size:var(--fsize28); font-weight:700; color:var(--black);}
  1444. .visual_main .desc {margin-top:3px; margin-bottom:24px; font-size:var(--fsize18); font-weight:500; color:#666666;}
  1445. .visual_main .time {display:flex; align-items: center; margin-bottom:34px;}
  1446. .visual_main .time > div {padding:0 10px; border:1px solid #878fa3; color:var(--black); font-size:var(--fsize48);}
  1447. .visual_main .dday {margin-right:10px; font-weight:700; }
  1448. .visual_main .dtime {font-weight:300;}
  1449. .visual_main .name {font-size:var(--fsize20); color:var(--black); font-weight:500;}
  1450. .visual_main .info {font-size:var(--fsize18); color:var(--black); }
  1451. .visual_main .price {display:flex; align-items:center;}
  1452. .visual_main .price span {display:inline-block; margin-right:10px; font-size:var(--fsize18); color:var(--gray1); text-decoration:line-through;}
  1453. .visual_main .price strong {color:var(--red); font-size:var(--fsize32); font-weight:700;}
  1454. .visual_main .slide_pager {position:absolute; display: flex; justify-content: flex-end; width:calc(100% / 1.48); max-width:1322px; bottom:0; left:50%; transform: translateX(-50%); z-index:5;}
  1455. .visual_main .slide_pager .outer {display: flex; align-items: center; width: 156px; height: 45px; padding:5px 20px; background: rgba(0, 0, 0, 0.3);}
  1456. .visual_main .swiper-pagination,
  1457. .visual_main .swiper-button-prev,
  1458. .visual_main .swiper-button-next {position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 0; padding: 0; color: #fff;}
  1459. .visual_main .swiper-button-prev:after,
  1460. .visual_main .swiper-button-next:after {color:#fff; font-size:14px; font-weight:900;}
  1461. .visual_main .swiper-pagination-total {opacity:0.6;}
  1462. .visual_main .pic {margin-left:auto; width:46.87%/*450px*/;}
  1463. .visual_main .pic .outer {position:relative; width:100%;}
  1464. .visual_main .pic .img_box {position:relative; width:100%; height:0; padding-top:100%; border-radius:30px; overflow:hidden;}
  1465. .visual_main .pic .img_box img {position:absolute; top:0; left:0; width:100%;}
  1466. .visual_main .pic .tag {position:absolute; top:20px; right:20px; background:#d32e3e; display:flex; align-items:center; justify-content:center; width:100px; height:100px; border-radius:50px; color:#fff; font-weight:700; font-size:var(--fsize40); z-index:2}
  1467. /*메인 중간 배너*/
  1468. .mid-banner {position:relative; width:100%; max-width:1320px; margin:0 auto; padding:100px 100px; overflow:hidden;}
  1469. /*.mid-banner:before {position:absolute; top:0; left:-50%; content:""; width:calc(100% - 600px); height:100%; background:#fff; z-index:2 }
  1470. .mid-banner:after {position:absolute; top:0; right:-50%; content:""; width:calc(100% - 600px); height:100%; background:#fff; z-index:2}*/
  1471. .mid-banner .swiper {position:static;}
  1472. .mid-banner .swiper-slide {display: flex; flex-flow: column nowrap; align-items: center; color}
  1473. .mid-banner .img_box {position:relative; width:130px; height:130px; margin-bottom:15px; border-radius:50%; overflow:hidden;}
  1474. .mid-banner .img_box img {position:absolute; top:0; left:0; width:100%; }
  1475. .mid-banner .swiper-button-prev,
  1476. .mid-banner .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;}
  1477. .mid-banner .swiper-button-prev:after,
  1478. .mid-banner .swiper-button-next:after {font-size:var(--fsize16);}
  1479. .mid-banner a {display:block; text-align:center; color:var(--black);}
  1480. .mid-banner .swiper-pagination {bottom:70px;}
  1481. .mid-banner .swiper-pagination-bullet {transition: all 0.2s;}
  1482. .mid-banner .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius:3px;}
  1483. /*메인 구매자 보호*/
  1484. .main_protection {background:#f8f8f8;}
  1485. .main_protection.pc .cont {width:52%; height: 100%; padding: 80px 50px; padding-right: 0; border-left: 1px solid #e7e7e7;}
  1486. .main_protection.pc .row {position:relative; width:100%; max-width:1320px; margin:0 auto;}
  1487. .main_protection.pc h3 { margin-left:5px; font-size:var(--fsize34); color:var(--black); font-weight:700;}
  1488. .main_protection.pc h3 strong {font-family:var(--monts); font-size:var(--fsize40); }
  1489. .main_protection.pc ul {display:flex; flex-flow:row wrap; margin-left:-5px;}
  1490. .main_protection.pc li {display:flex; align-items:center; width:calc(50% - 10px); height:65px; margin:5px; padding:10px 30px; background:#fff; border: 1px solid var(--border); border-radius:50px; color:var(--black); font-weight:500;}
  1491. .main_protection.pc li > span {display:inline-block; margin-right:10px;}
  1492. .main_protection.pc .cont > a {display: inline-block; margin: 20px 0 35px; margin-left: 5px; color: var(--gray);}
  1493. .main_protection.pc .pic {position:absolute; top:0; right:0; height:100%; border-top-right-radius:30px; overflow: hidden;}
  1494. .main_protection.mob {display:none;}
  1495. /*메인 인기상품*/
  1496. .section-heading {text-align: center; margin-bottom:60px;}
  1497. .section-heading h2 {font-family:var(--monts); font-weight:700; color:var(--black);}
  1498. .section-heading span {display:inline-block; margin-top:10px; font-size:var(--fsize20); color:#666;}
  1499. .product-card {
  1500. width: 100%;
  1501. overflow: hidden;
  1502. position: relative;
  1503. margin-bottom: 25px;
  1504. background: var(--white);
  1505. transition: all linear .3s;
  1506. -webkit-transition: all linear .3s;
  1507. -moz-transition: all linear .3s;
  1508. -ms-transition: all linear .3s;
  1509. -o-transition: all linear .3s;
  1510. cursor:pointer;
  1511. }
  1512. .product-media:hover .product-widget,
  1513. .product-widget.active {opacity: 1;}
  1514. .product-media {
  1515. position: relative;
  1516. }
  1517. .product-label {
  1518. display: -webkit-box;
  1519. display: -ms-flexbox;
  1520. display: flex;
  1521. position: absolute;
  1522. top: 10px; left:10px;
  1523. z-index:1;
  1524. }
  1525. .label-text {margin:2px;
  1526. font-size:12px; font-weight:500; line-height:1;
  1527. padding:3px 5px 2px;
  1528. line-height: 13px;
  1529. border-radius:3px;
  1530. color: var(--white);
  1531. text-align: center;
  1532. text-transform: capitalize;
  1533. }
  1534. /*.label-text.sale {background: var(--red1);}*/
  1535. /*.label-text.new {background: var(--purple);}*/
  1536. .label-text.off {
  1537. background: var(--black);
  1538. }
  1539. .label-text.new {
  1540. background: var(--black);
  1541. }
  1542. .label-text.sale {
  1543. background: var(--orange);
  1544. }
  1545. .product-wish {
  1546. position: absolute; top:10px; right:10px;
  1547. display:flex; justify-content:center; align-items:center; width:32px; height:32px;
  1548. background:#fff; border-radius:50px;
  1549. font-size:16px; color:var(--black);
  1550. z-index:1;
  1551. }
  1552. .product-wish.active {color: var(--danger);}
  1553. .product-wish:hover {color: var(--danger);}
  1554. .product-widget {
  1555. display: -webkit-box;
  1556. display: -ms-flexbox;
  1557. display: flex;
  1558. flex-flow:column nowrap;
  1559. -webkit-box-align: center;
  1560. -ms-flex-align: center;
  1561. align-items: center;
  1562. -webkit-box-pack: center;
  1563. -ms-flex-pack: center;
  1564. justify-content: center;
  1565. position: absolute;
  1566. top: 0px; left: 0px;
  1567. width: 100%; height:100%; padding:20px;
  1568. background:rgba(0, 0, 0, 0.5);
  1569. opacity: 0;
  1570. transition: all linear .3s;
  1571. -webkit-transition: all linear .3s;
  1572. -moz-transition: all linear .3s;
  1573. -ms-transition: all linear .3s;
  1574. -o-transition: all linear .3s;
  1575. }
  1576. .product-widget ul {display:flex; flex-flow:row wrap; justify-content:center; margin-top:40px;}
  1577. .product-widget li {width:46px; height:46px; margin:1px; background:#fff; overflow:hidden;}
  1578. .product-widget li img {width:100%;}
  1579. .product-widget dl {margin-top:10px; margin-bottom:0;}
  1580. .product-widget dt,
  1581. .product-widget dd {text-align:center; font-size:14px; color:#fff; font-weight:500;}
  1582. .product-content {display:flex; flex-direction:column; justify-content:space-between; margin-top:10px;}
  1583. .product-content > a {width:100%;}
  1584. .product-name {margin-bottom: 0; color:var(--black); font-weight:500; text-transform: capitalize;}
  1585. .product-desc {font-weight:500; color:var(--gray); font-size:14px; line-height:1.2;}
  1586. .product-tag {padding:1px 5px; border-radius:3px;}
  1587. .product-tag.quick {align-self:flex-start; display:inline-block; margin-top:5px; background:#e0e9f6; color:#3e6ae9; font-size:12px;}
  1588. .product-btm {margin-top:auto;}
  1589. .product-price {margin-top:10px; margin-bottom:3px;
  1590. display: -webkit-box;
  1591. display: -ms-flexbox;
  1592. display: flex;
  1593. -webkit-box-align: flex-start;
  1594. -ms-flex-align: flex-start;
  1595. align-items: flex-start;
  1596. -webkit-box-pack: flex-start;
  1597. -ms-flex-pack: flex-start;
  1598. justify-content: flex-start;
  1599. -webkit-box-align: baseline;
  1600. -ms-flex-align: baseline;
  1601. align-items: baseline;
  1602. color: var(--black);
  1603. }
  1604. .product-price strong {font-weight:799; color:var(--red);}
  1605. .product-price strong small {font-size:var(--fsize16); font-weight: 400;}
  1606. .product-status {color:#999; font-size:12px;}
  1607. .product-content .time {display:flex; margin-top: 10px; color: var(--primary); font-weight: 500;}
  1608. .product-content .dday {margin-right:8px;}
  1609. .main_popular {padding:100px 15px; padding-top:120px;}
  1610. .main_popular .swiper-slide {height:auto;}
  1611. .main_popular .col {height:100%; margin-bottom:20px;}
  1612. .main_popular .product-card {height:100%;}
  1613. .main_popular .product-content {height:100%;}
  1614. .main_popular .btn_wrap {justify-content:center;}
  1615. .main_popular .btn_wrap button {display:flex; justify-content:center; align-items:center; width:100%; max-width:136px; height:50px; padding:10px 20px; border:1px solid #dbdbdb; border-radius:50px; color:var(--black);}
  1616. .main_popular .btn_wrap button:hover {background:var(--black); color:#fff;}
  1617. .see_option {display:none;}
  1618. /*메인 중간 상품 배너*/
  1619. .banner_products .row {margin:0;}
  1620. .banner_products .swiper-slide a {display:flex; justify-content:center; text-align:center; width:100%; overflow: hidden;}
  1621. .banner_products .swiper-slide a img {display:block; height:100%;}
  1622. .banner_products .swiper-button-prev,
  1623. .banner_products .swiper-button-next {color:#fff; font-weight:300;}
  1624. .banner_products .swiper-button-prev,
  1625. .banner_products .swiper-rtl .swiper-button-next {left:40px;}
  1626. .banner_products .swiper-button-next,
  1627. .banner_products .swiper-rtl .swiper-button-prev {right:40px;}
  1628. .banner_products .swiper-pagination-bullet {width:50px; height:3px; margin:0 1px!important; background:#fff; opacity:0.4; border-radius:0;}
  1629. .banner_products .swiper-pagination-bullet-active {opacity:1;}
  1630. /*메인 베스트 리뷰*/
  1631. .best_review {padding:80px 15px 120px; background:#f6f6f6;}
  1632. .best_review a {display:block;}
  1633. .best_review .swiper-container {position: relative; width: 100%; max-width:1320px; margin:0 auto; padding: 0 100px;}
  1634. .best_review .swiper-button-prev,
  1635. .best_review .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;}
  1636. .best_review .swiper-button-prev:after,
  1637. .best_review .swiper-button-next:after {font-size:var(--fsize16);}
  1638. .best_review .swiper-button-prev {left: 0;}
  1639. .best_review .swiper-button-next {right: 0;}
  1640. .best_review .swiper-pagination {bottom:-54px;}
  1641. .best_review .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;}
  1642. .best_review .img_box {width:100%; background: #f6f6f6;}
  1643. .best_review .img_box img {width:100%; mix-blend-mode: multiply;}
  1644. .best_review .cont {position:relative; height:284px; margin-top:-50%; padding:30px; background:#fff; z-index:10;}
  1645. .best_review .cont > div {width:100%;}
  1646. .best_review .brand {color:var(--black); font-weight:500;}
  1647. .best_review .name {color:var(--gray); font-size:14px;}
  1648. .best_review .product-rating {justify-content:flex-start; margin:16px 0 20px;}
  1649. .best_review .product-rating i {font-size: 18px; margin: 0px 1px;}
  1650. .best_review .writer {display:flex; align-items:center; margin-bottom:5px; font-size:14px; color:#666;}
  1651. .best_review .writer span:last-child {color:#999; font-size:14px;}
  1652. .best_review .writer span:last-child:before {content:""; display:inline-block; width:1px; height:12px; margin:0 5px 0 8px; margin-top:4px; background:#ddd;}
  1653. .best_review .comment {overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:5; -webkit-box-orient: vertical;}
  1654. /*메인 최근 본 상품*/
  1655. .recent {padding:100px 15px; padding-bottom:160px;}
  1656. .recent_swiper {position: relative; width:100%; max-width:1320px; margin:0 auto; padding:0 20px;}
  1657. .recent_swiper .swiper-button-prev,
  1658. .recent_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;}
  1659. .recent_swiper .swiper-button-prev:after,
  1660. .recent_swiper .swiper-button-next:after {font-size:var(--fsize16);}
  1661. .recent_swiper .swiper-button-prev {left: 0;}
  1662. .recent_swiper .swiper-button-next {right: 0;}
  1663. .recent_swiper .swiper-pagination {bottom:-54px;}
  1664. .recent_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;}
  1665. .recent_swiper .product-card {margin-bottom:0;}
  1666. /*풋터*/
  1667. .footer-part > div {border-top:1px solid #ededed;}
  1668. .ft_menu {display:flex; flex-flow:row wrap; align-items:center;}
  1669. .ft_menu a {position:relative; display:inline-block; padding:20px 12px; color:var(--black); font-size:var(--fsize14);}
  1670. .ft_menu a:first-child {margin-left:-12px;}
  1671. .ft_menu a:after {content:""; position:absolute; top:21px; right:0; display:block; width:1px; height:14px; margin-left:12px; background:#ddd;}
  1672. .ft_menu a:last-child:after {display:none;}
  1673. .ft_cont .info_btn,
  1674. .ft_cont .custom_btn {display:none;}
  1675. .ft_cont .info_btn i.active,
  1676. .ft_cont .custom_btn i.active {transform:translateY(-1px) rotate(180deg);}
  1677. .ft_cont .ft_left {margin-right:30px;}
  1678. .ft_cont .ft_left > a {display:inline-block; margin-top:26px; font-size: var(--fsize14); color:var(--black);}
  1679. .ft_cont {padding:40px 0;}
  1680. .ft_cont .container {display:flex; flex-flow:row wrap; align-items:stretch;}
  1681. .ft_cont .ft_logo {display:inline-block; margin-bottom:20px;}
  1682. .ft_cont .info,
  1683. .ft_cont .copyright {font-size:var(--fsize14); color:var(--gray); line-height:1.8;}
  1684. .ft_cont .ft_left > a {display:block; margin-top:10px;}
  1685. .ft_cont .ft_right {display:flex; align-items:center; margin-left:auto; padding-left:50px; border-left:1px solid #ededed;}
  1686. .ft_cont .custom h3 {font-size:var(--fsize16); font-weight:700; color:var(--black); line-height:1;}
  1687. .ft_cont .custom .tel { font-size:var(--fsize40); font-weight:900; color:var(--black);}
  1688. .ft_cont .custom .time {font-size:var(--fsize14); color:var(--gray);}
  1689. /*모바일 메뉴*/
  1690. .mobile-menu {
  1691. position: fixed;
  1692. bottom:-3px;
  1693. left: 0px;
  1694. width: 100%; height:60px;
  1695. z-index:300;
  1696. background: var(--white);
  1697. border-radius: 10px 10px 0px 0px;
  1698. -webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
  1699. box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
  1700. display: -webkit-box;
  1701. display: -ms-flexbox;
  1702. display: flex;
  1703. -webkit-box-align: center;
  1704. -ms-flex-align: center;
  1705. align-items: center;
  1706. -webkit-box-pack: center;
  1707. -ms-flex-pack: center;
  1708. justify-content: center;
  1709. -webkit-box-pack: justify;
  1710. -ms-flex-pack: justify;
  1711. justify-content: space-between;
  1712. display: none;
  1713. transition:all 0.2s;
  1714. }
  1715. .mobile-menu.active {bottom:-100px;}
  1716. .mobile-menu a,
  1717. .mobile-menu button {
  1718. display: -webkit-box;
  1719. display: -ms-flexbox;
  1720. display: flex;
  1721. -webkit-box-align: center;
  1722. -ms-flex-align: center;
  1723. align-items: center;
  1724. -webkit-box-pack: center;
  1725. -ms-flex-pack: center;
  1726. justify-content: center;
  1727. -webkit-box-orient: vertical;
  1728. -webkit-box-direction: normal;
  1729. -ms-flex-direction: column;
  1730. flex-direction: column;
  1731. width: 80px;
  1732. padding: 8px 0px;
  1733. border-radius: 8px;
  1734. position: relative;
  1735. }
  1736. .mobile-menu a:hover,
  1737. .mobile-menu button:hover {
  1738. background: var(--chalk);
  1739. }
  1740. .mobile-menu a:hover i,
  1741. .mobile-menu button:hover i {
  1742. color: var(--primary);
  1743. }
  1744. .mobile-menu a:hover span,
  1745. .mobile-menu button:hover span {
  1746. color: var(--primary);
  1747. }
  1748. .mobile-menu a i,
  1749. .mobile-menu button i {font-size:20px; margin-bottom: 5px; color: var(--black);}
  1750. .mobile-menu a span,
  1751. .mobile-menu button span {font-size:12px; color: var(--black); text-transform: uppercase;}
  1752. .mobile-menu a sup,
  1753. .mobile-menu button sup {
  1754. position: absolute;
  1755. top: -5px;
  1756. left: 75%;
  1757. width: 24px;
  1758. height: 24px;
  1759. font-size: 12px;
  1760. line-height: 20px;
  1761. border-radius: 50%;
  1762. text-align: center;
  1763. -webkit-transform: translateX(-50%);
  1764. transform: translateX(-50%);
  1765. color: var(--white);
  1766. background: var(--primary);
  1767. border: 2px solid var(--green-chalk);
  1768. text-shadow: var(--primary-tshadow);
  1769. }
  1770. .mobile-menu a .fas fa-shopping-basket,
  1771. .mobile-menu button .fas fa-shopping-basket {
  1772. font-size: 18px;
  1773. }
  1774. /*서브*/
  1775. .single-banner {
  1776. background-size: cover !important;
  1777. margin-top:0; margin-bottom:0;
  1778. padding: 100px 0px; padding-bottom:0;
  1779. text-align: center;
  1780. position: relative;
  1781. z-index: 1;
  1782. }
  1783. .single-banner::before {
  1784. position: absolute;
  1785. content: "";
  1786. top: 0px;
  1787. left: 0px;
  1788. width: 100%;
  1789. height: 100%;
  1790. /*background: -webkit-gradient(linear, right top, left top, from(rgba(6, 23, 56, 0.6)), to(rgba(17, 151, 68, 0.6)));
  1791. background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(17, 151, 68, 0.6));*/
  1792. z-index: -1;
  1793. }
  1794. .single-banner h2 {
  1795. font-size: 34px;
  1796. color: var(--black);
  1797. text-transform: uppercase;
  1798. font-weight:700;
  1799. }
  1800. /*갤러리 리스트 .header-part, .navbar-part {opacity:0.3;}*/
  1801. .res_wrap {width:100%; overflow-x:auto;}
  1802. .shop-part {margin-bottom:25px; margin-top:10px;}
  1803. .shop-part .right {min-height:600px;}
  1804. .shop-part .right .conts_top{position:sticky; top:86px; left: 0px; background: var(--white); z-index:1;}
  1805. .shop-part .right .conts_top.active .col-lg-12 {padding:0;}
  1806. .navbar-part.active .navbar-item > .navbar-link {padding: 15px 0px;}
  1807. .shop-part .row-cols-3 .product-card {}
  1808. .shop-part .pricing_box1 {flex:0 0 100%; max-width:100%; padding:50px 0; text-align:center;}
  1809. .shop-part .product-desc {font-weight:400;}
  1810. .shop-part .product-name a {width:100%;}
  1811. .shop-part .product-price strong {font-weight:500; font-size:18px;}
  1812. .shop-part .product-status {font-size:14px;}
  1813. .bottom-paginate {
  1814. padding-top: 25px;
  1815. border-top: 1px solid var(--border);
  1816. display: -webkit-box;
  1817. display: -ms-flexbox;
  1818. display: flex;
  1819. -webkit-box-align: center;
  1820. -ms-flex-align: center;
  1821. align-items: center;
  1822. justify-content:center;
  1823. }
  1824. .bottom-paginate.justify-content-end {justify-content:center!important;}
  1825. .page-info {
  1826. font-weight: 400;
  1827. color: var(--text);
  1828. }
  1829. .pagination-sm .page-item:first-child .page-link {
  1830. border-top-left-radius: 50% !important;
  1831. border-bottom-left-radius: 50% !important;
  1832. }
  1833. .page-item:first-child .page-link, .page-item:last-child .page-link {
  1834. display:flex; align-items:center; justify-content:center;
  1835. border-radius: 50%;
  1836. }
  1837. .page-link {width:40px; height:40px; line-height:40px; padding: 0px; background: var(--white); border: none; border-radius:50px; text-align: center; font-weight: 400; color: var(--text);}
  1838. .page-link button:focus {background: var(--white);}
  1839. .page-link:hover {color: var(--white); background: var(--black);}
  1840. .page-item .active {color: var(--white); background: var(--black);}
  1841. .page-link:focus {-webkit-box-shadow: none; box-shadow: none;}
  1842. .page-item.active .page-link {z-index: unset;}
  1843. .page-item {margin-left: 10px;}
  1844. .page-item.active .page-link {color: white !important; background:var(--black)!important;}
  1845. .page-item.active .page-link:focus {justify-content: center;}
  1846. .page-item.disabled .page-link {color: #999; pointer-events: none; cursor:pointer; background: var(--white);}
  1847. .custom-pagination {
  1848. display: flex;
  1849. justify-content: center;
  1850. margin-left: auto;
  1851. }
  1852. .custom-pagination-page {
  1853. display: flex;
  1854. justify-content: center;
  1855. margin-left: auto;
  1856. }
  1857. .pagination-page.disabled .page-link {
  1858. color: #999;
  1859. pointer-events: none;
  1860. cursor: auto;
  1861. background-color: #fff;
  1862. border-color: #eee;
  1863. }
  1864. .pagination-page.active .page-link {
  1865. color: white !important;
  1866. background: black !important;
  1867. }
  1868. .top-filter {position:sticky; top:0; left:0; z-index:100;}
  1869. .top-filter .filter_result {display:flex; overflow-y: hidden; overflow-x: auto; margin-left:-3px; padding: 5px 0;}
  1870. .top-filter .filter_result > div {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; flex-grow:0; height:36px; font-size:14px; line-height: 1;}
  1871. .top-filter .filter_result .tag {margin:3px; padding:10px 15px; border-radius:50px; border:1px solid #ddd; color:#666;}
  1872. .top-filter .filter_result .tag i {margin-left:5px; color:#666; font-size:12px;}
  1873. .mob_filtershow {margin:3px; padding:10px 15px; border-radius:50px; background:var(--black); color:#fff;}
  1874. .top-filter .short_wrap {display:flex; align-items: center; margin-bottom:20px; padding: 8px 3px; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}
  1875. .top-filter .top_txt {color:var(--black);}
  1876. .filter-short {display: flex; align-items: center; justify-content: center; margin-left:auto;}
  1877. .top-filter .select_grid {display:none; margin-left:15px;}
  1878. .top-filter .select_grid i {width:30px; height:30px; line-height:30px; text-align:center;}
  1879. .top-filter .grid_1 {font-size:16px;}
  1880. .filter-show {
  1881. width: 125px;
  1882. display: -webkit-box;
  1883. display: -ms-flexbox;
  1884. display: flex;
  1885. -webkit-box-align: center;
  1886. -ms-flex-align: center;
  1887. align-items: center;
  1888. -webkit-box-pack: center;
  1889. -ms-flex-pack: center;
  1890. justify-content: center;
  1891. }
  1892. .pagination-sm .page-item:last-child .page-link {
  1893. border-top-right-radius: 50% !important;
  1894. border-bottom-right-radius: 50% !important;
  1895. }
  1896. .filter-label {
  1897. font-size: 14px;
  1898. font-weight: 500;
  1899. margin-right: 8px;
  1900. white-space: nowrap;
  1901. text-transform: uppercase;
  1902. }
  1903. .filter-select {height: 32px; background-color: transparent;}
  1904. .filter-select:focus-within {
  1905. border-color: #ced4da;
  1906. }
  1907. .filter-action {
  1908. display: -webkit-box;
  1909. display: -ms-flexbox;
  1910. display: flex;
  1911. -webkit-box-align: center;
  1912. -ms-flex-align: center;
  1913. align-items: center;
  1914. -webkit-box-pack: end;
  1915. -ms-flex-pack: end;
  1916. justify-content: flex-end;
  1917. }
  1918. .filter-action a i {
  1919. width: 40px;
  1920. height: 40px;
  1921. font-size: 16px;
  1922. line-height: 40px;
  1923. border-radius: 50%;
  1924. text-align: center;
  1925. color: var(--text);
  1926. background: transparent;
  1927. }
  1928. .filter-action a i:hover {
  1929. color: var(--primary);
  1930. }
  1931. .filter-action .active i {
  1932. color: var(--white);
  1933. background: var(--primary);
  1934. }
  1935. .filter-action .active i:hover {
  1936. color: var(--white);
  1937. }
  1938. .pagination-sm .page-link {
  1939. padding: 0 !important;
  1940. font-size: 16px !important;
  1941. line-height: 40px !important;
  1942. }
  1943. .filter {position:sticky; top:86px; left:0; height:100%; text-align:left; overflow-y: scroll; max-height: 820px; }
  1944. .filter::-webkit-scrollbar,
  1945. #brand .accordion-body::-webkit-scrollbar {width: 6px;}
  1946. .filter::-webkit-scrollbar-track,
  1947. #brand .accordion-body::-webkit-scrollbar-track {background-color: transparent;}
  1948. .filter::-webkit-scrollbar-thumb,
  1949. #brand .accordion-body::-webkit-scrollbar-thumb {border-radius: 3px; background-color:#ddd;}
  1950. .filter::-webkit-scrollbar-button,
  1951. #brand .accordion-body::-webkit-scrollbar-thumb {width: 0; height: 0;}
  1952. .filter .container {padding:0;}
  1953. .filter .btn_cls {display:none; position:absolute; top:-15px; left:50%; width:40px; height:40px; line-height:40px; background: var(--white); border-radius:50px; text-align: center; font-size:16px; color: var(--text); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;}
  1954. .filter_header {position: relative; display:flex; flex-flow:row wrap; margin-bottom:34px; padding: 15px 2px; border-bottom: 1px solid var(--border);}
  1955. .filter_header h3 {font-size:22px; font-weight:400; color:var(--black);}
  1956. .filter_header .see_result {display:none; width: 100%; margin: 10px 0 0; padding:5px 10px; background:#ededed; color:#666; border-radius:5px; border:1px solid #ededed; font-size:var(--fsize14);}
  1957. .filter_header .reload {margin-left:auto; font-size:14px; color:var(--gray);}
  1958. .filter_header .nav-close {display:none;}
  1959. .filter_cont .accordion-item {padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border);}
  1960. .filter_cont .accordion-button {padding:0;}
  1961. .filter_cont h2 {line-height:1.3; font-size:var(--fsize16); }
  1962. .filter_cont h2 button {font-size:inherit; color:var(--black); font-weight:700;}
  1963. .filter_cont .accordion-body {margin-top:16px; font-size:14px;}
  1964. .filter_cont .accordion-body li {position:relative; padding:6px 0; padding-left:20px;}
  1965. .filter_cont .category-link {padding:3px 0; font-size:inherit;}
  1966. .filter_cont #category .accordion-body a {display:block; width:100%;}
  1967. .filter_cont #category .accordion-body > li:not(:first-child) {padding-left:0;}
  1968. .filter_cont #category .accordion-body li ul li {padding-left:0;}
  1969. .filter_cont #category .accordion-body li ul li a:before {color:#ccc;}
  1970. .filter_cont #category .category-link {padding-left:0; padding-right:0;}
  1971. .filter_cont #category .dropdown-link.active {font-weight:500;}
  1972. .filter_cont #category .dropdown-link.active + ul {padding-left:10px;}
  1973. .filter_cont #category .dropdown-link.active + ul ul {padding-left:0;}
  1974. .filter_cont #category .dropdown-link.active + ul li a {font-weight:400;}
  1975. .filter_cont #category .dropdown-link::before {content: "\f107"; font-family: var(--awesome); right:0; padding: 0 7px; font-size: 14px; color: var(--gray);}
  1976. .filter_cont #category .dropdown-link.active::before {transform: translateY(-50%) rotate(180deg);}
  1977. .filter_cont #category .dropdown-link:hover {background:none;}
  1978. .filter_cont #category .dropdown-list {padding:0;}
  1979. .filter_cont #category .dropdown-list li {padding-left:0;}
  1980. .filter_cont .accordion-body li span {position:absolute; top:5px; left:0;}
  1981. .filter_cont input[type=checkbox] {opacity:0.6;}
  1982. .filter_cont .accordion-button::after {margin-right:5px;}
  1983. .filter_cont #brand {}
  1984. .filter_cont #brand .accordion-body {height:500px; overflow-y:auto;}
  1985. .filter_cont .brand_search > div {display:flex; margin-top:12px; padding:5px; border:1px solid var(--border);}
  1986. .filter_cont .brand_search input {width: calc(100% - 24px);}
  1987. .filter_cont .brand_search .btn_clear {width:24px;}
  1988. .product-image {display:block; position:relative; width: 100%; height: 0; padding-top: 100%;}
  1989. .product-image img {position: absolute; top: 50%; left: 0; transform: translateY(-50%);width: 100%;}
  1990. .product-image:after {
  1991. content:' ';
  1992. display:block;
  1993. position:absolute; top:0; left:0;
  1994. width:100%; height:100%;
  1995. background:rgba(0, 0, 0,.03);
  1996. }
  1997. /*상품상세*/
  1998. .shop.detail {margin-bottom:25px; margin-top:30px;}
  1999. .shop.detail .container .row {align-items:flex-start;}
  2000. .shop.detail .container .poducts_summery {position:relative; padding-left:30px;}
  2001. .details-gallery {position: relative;}
  2002. .details-gallery .slick-slide {z-index:0!important;}
  2003. .shop.detail .poducts_summery .share i {position:absolute; top:10px; right:0; display:flex; justify-content:center; align-items:center; width:35px; height:35px; border:1px solid #ddd; border-radius:50px;}
  2004. .details-content {background: var(--white);}
  2005. .details-content > div {padding:0 3px;}
  2006. .details-content > div dl:not(:last-of-type) {margin-bottom: 5px;}
  2007. .details-content dl {display:flex; flex-flow:row wrap; }
  2008. .details-content dt {width:100%; max-width:100px; color:#666; font-weight:400;}
  2009. .details-content dd {color:var(--black)}
  2010. .details-content .btn_card {margin-left:16px; text-decoration:underline; color:#4742be; font-size:var(--fsize14); cursor:pointer;}
  2011. .details-content .tooltiptext {width:250px;}
  2012. .details-name {padding-right:40px; font-size: 26px; line-height: 34px; font-weight:700; margin-top:10px; text-transform: capitalize;}
  2013. .details-name a {color: var(--black); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;}
  2014. .details-sub-name {margin-top:10px; margin-bottom:30px; color:var(--black); font-size:inherit;}
  2015. .details-sub-name .share i {display:flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--black); border-radius:50px; font-size:14px;}
  2016. .details-sub-name .share:hover i {border:1px solid #0056b3;}
  2017. .shop.detail .benefits_wrap {padding:0 3px;}
  2018. .shop.detail .price_wrap {display:flex; align-items:center; padding: 10px 0;}
  2019. .shop.detail .price_wrap small {font-size:var(--fsize16);}
  2020. .shop.detail .dbr-discount {margin-right:10px; font-size:var(--fsize28); color:#e56167; font-weight:700;}
  2021. .shop.detail .dbr-sales-price {margin-right:14px; font-size:var(--fsize28); color:var(--black); font-weight:700;}
  2022. .shop.detail .dbr-origial-price {margin-top: 5px; color:#999; }
  2023. .shop.detail .dbr-origial-price > span {text-decoration:line-through;}
  2024. .shop.detail .buy-option-area .option_tit {display:flex; flex-flow:row wrap; align-items:center; margin-bottom:20px; }
  2025. .shop.detail .buy-option-area .option_tit h4 {font-size: var(--fsize16); font-weight: 500;}
  2026. .shop.detail .buy-option-area .option_tit button {margin-left:16px; border: 1px solid var(--black); padding: 2px 16px; font-size:var(--fsize14);}
  2027. #size_chart .modal-title {font-weight: 700; font-size: 20px;}
  2028. #size_chart .modal-title p {margin-top:16px; font-size: 14px; font-weight: 400; color: #787878;}
  2029. #size_chart .nav-tabs {margin-bottom:0;}
  2030. #size_chart .tab-link {font-size:14px;}
  2031. #size_chart .tab-pane {overflow-x: auto;}
  2032. #size_chart .btn-close {font-size:20px;}
  2033. .shop.detail .buy-option-area select {width:100%; padding:10px;}
  2034. .shop.detail .buy-option-area select option {font-size:14px;}
  2035. .shop.detail .buy_amount {flex-flow:row wrap; padding:15px 0; border-bottom: 1px solid #ededed;}
  2036. .shop.detail .buy_amount .col-7 {
  2037. -ms-flex: 0 0 54%;
  2038. flex: 0 0 54%;
  2039. max-width: 54%;
  2040. }
  2041. .product-action {
  2042. display: -webkit-box;
  2043. display: -ms-flexbox;
  2044. display: flex;
  2045. -webkit-box-align: center;
  2046. -ms-flex-align: center;
  2047. align-items: center;
  2048. -webkit-box-pack: center;
  2049. -ms-flex-pack: center;
  2050. justify-content: center;
  2051. }
  2052. .product-action button i {
  2053. width:32px;
  2054. height:32px;
  2055. font-size:10px;
  2056. line-height:32px;
  2057. border-radius: 6px;
  2058. text-align: center;
  2059. display: inline-block;
  2060. color: var(--text);
  2061. background: var(--chalk);
  2062. text-shadow: var(--primary-tshadow);
  2063. transition: all linear .3s;
  2064. -webkit-transition: all linear .3s;
  2065. -moz-transition: all linear .3s;
  2066. -ms-transition: all linear .3s;
  2067. -o-transition: all linear .3s;
  2068. }
  2069. .product-action button i:hover {
  2070. color: var(--white);
  2071. background: var(--black);
  2072. }
  2073. .product-action .icofont-minus {font-size:12px;}
  2074. .product-action input {
  2075. width: 50px;
  2076. margin: 0px 5px;
  2077. padding: 6px 0px;
  2078. border-radius: 6px;
  2079. text-align: center;
  2080. color: var(--black);
  2081. /*text-shadow: var(--primary-tshadow);*/
  2082. }
  2083. .shop.detail .size_guide {display:flex; justify-content:flex-end; margin-bottom:10px;}
  2084. .shop.detail .size_guide button {border-bottom:1px solid #333;}
  2085. .shop.detail .size_guide i {font-size:14px;}
  2086. .shop.detail .sum {display:flex; padding:15px 3px; align-items:center;}
  2087. .shop.detail .sum dt {margin-right:15px; font-weight:700; color:var(--black);}
  2088. .shop.detail .sum dd {margin-left:auto; font-weight:700; color:var(--red); font-size:var(--fsize20);}
  2089. .shop.detail .btn_group {display:flex; justify-content:space-between; align-items:center; margin-right:-3px; margin-left:-3px;}
  2090. .shop.detail .btn_group > * {width:calc(50% - 6px); margin:3px;}
  2091. .shop.detail .wish-list-form {margin-right:3px;}
  2092. .shop.detail .btn_group .btn_gray {width: calc(100% - 2px);}
  2093. .shop.detail .btn_group .btn {display:flex; justify-content:center; align-items:center; height:46px;}
  2094. .item_detail > .container > .row {position:sticky; top:86px; left:0; z-index:999; background:#fff;}
  2095. .item_detail.inner-section {margin-top:30px;}
  2096. .item_detail .container {border-top:1px solid var(--black);}
  2097. .item_detail .nav-tabs {margin-bottom:20px; padding:10px 25px; padding-top:30px;}
  2098. .item_detail .tab-link {position:relative; transition:all 0.3s ease;}
  2099. .item_detail .tab-link.active:after {position:absolute; bottom:0; left:0; content:""; width:100%; height:2px; background:var(--primary); transition:all 0.3s ease;}
  2100. .item_detail .div {margin-top:-120px; height:120px;}
  2101. .item_detail .div#tab-seller {margin-top:-130px; height:120px;}
  2102. .item_detail .tab-pane {display:block; opacity:1; visibility:visible; margin-bottom:150px;}
  2103. .item_detail .tab-pane h4 {margin-bottom:5px; font-size:16px; font-weight:700;}
  2104. .item_detail .tag_cont {margin:0 -5px;}
  2105. .item_detail .tag_cont a {display:inline-block; margin:5px; background: #f6f6f6; padding: 8px 15px; border-radius: 50px; font-size: 14px;}
  2106. .item_detail .product_info_notice {margin-top:40px;}
  2107. .item_detail .product_info_notice table {font-size:14px;}
  2108. .item_detail .product_info_notice th {width:220px; padding:10px 15px; background:#f9f9f9; border-bottom:1px solid #ededed;}
  2109. .item_detail .product_info_notice td {padding:10px 15px; border-bottom:1px solid #ededed;}
  2110. .item_detail .recent {margin-top:40px; padding:0;}
  2111. .item_detail .recent .row {margin-left:-20px; margin-right:-20px;}
  2112. .item_detail .recent_swiper .swiper-button-prev,
  2113. .item_detail .recent_swiper .swiper-button-next {top:-10px; width:24px; height:24px;}
  2114. .item_detail .recent_swiper .swiper-button-prev {left:110px;}
  2115. .item_detail .recent_swiper .swiper-button-next {left:140px; right:auto;}
  2116. .item_detail .recent_swiper .swiper-button-prev:after,
  2117. .item_detail .recent_swiper .swiper-button-next:after {font-size:11px;}
  2118. .item_detail .recent_swiper .swiper-pagination {bottom:-40px;}
  2119. .item_detail .product-name a {width:100%;}
  2120. .item_detail .qna .guide {margin-bottom: 20px; padding: 20px; border: 3px solid #e9e9e9; color: #666;}
  2121. .item_detail .qna .guide h4{margin-top: 20px; color:var(--red);}
  2122. .item_detail .qna .guide .btn_wrap {margin-top:20px;}
  2123. .item_detail .qna ul {display:flex; flex-flow:row wrap; width:100%;}
  2124. .item_detail .qna li {display:flex; align-items:center; justify-content:center; padding:16px 10px;}
  2125. .item_detail .qna .list_head {margin-top:40px; border-top:1px solid var(--black); border-bottom:1px solid #ddd;}
  2126. .item_detail .qna .list_head li {font-size:14px; font-weight:500;}
  2127. .item_detail .qna .status {width:100px;}
  2128. .item_detail .qna .subject {justify-content:flex-start; width:calc(100% - 340px);}
  2129. .item_detail .qna .btn_warning {margin-left:6px; padding:3px 10px; background:rgba(255, 255, 255, 0.8); border:1px solid #ddd; color:#666; font-size:12px; line-height:1; vertical-align:text-bottom;}
  2130. .item_detail .qna .lock {font-size: 14px; display: inline-block; margin-left: 3px; margin-bottom: 3px;}
  2131. .item_detail .qna .writer {width:120px;}
  2132. .item_detail .qna .date {width:120px;}
  2133. .item_detail .qna .item.in .body {display: block;}
  2134. .item_detail .qna .head,
  2135. .item_detail .qna .body {border-bottom:1px solid #ededed; background-color: #fff; box-sizing: border-box;}
  2136. .item_detail .qna .head {display:flex; align-items:center;}
  2137. .item_detail .qna .body {display: none; padding-left:110px; background-color:#f6f6f6;}
  2138. .item_detail .qna .head .status {font-size:14px; font-weight:500; color:#878787;}
  2139. .item_detail .qna .head .status .done {color:var(--primary);}
  2140. .item_detail .qna .q_cont {padding:20px 0; padding-right:20px; border-bottom:1px solid #ededed;}
  2141. .item_detail .qna .q_cont li {padding:16px 10px;}
  2142. .item_detail .qna .a_cont .subject {display:block; width:calc(100% - 280px);}
  2143. .item_detail .qna .a_cont .tag {width:44px;}
  2144. .item_detail .qna .a_cont .tag span {align-self: flex-start; display:flex; align-items:center; justify-content:center; width:24px; height:24px; background:#333; color:#fff; font-size:14px; font-weight:700;}
  2145. .ask_write .modal-dialog {width: 90%; max-width: 600px;}
  2146. .ask_write .modal-header {border-bottom:none;}
  2147. .ask_write .modal-title {font-weight:700;}
  2148. .ask_write th,
  2149. .ask_write td {padding-left:3px; padding-right:3px;}
  2150. .ask_write th {width:100px; padding-top:11px; vertical-align:top;}
  2151. .ask_write input:not([type="radio"]) {width:100%; height:40px; border:1px solid #ddd;}
  2152. .ask_write textarea {width:100%; height:200px; border:1px solid #ddd; }
  2153. .ask_write .uploadPic {margin-bottom: 20px;}
  2154. .ask_write .uploadPic ul {display:flex; flex-flow:row wrap;}
  2155. .ask_write .uploadPic li {position:relative; width: 19.2%; margin-left: 1%; margin-bottom:10px; border:1px solid #ddd; border-radius:5px; overflow:hidden;}
  2156. .ask_write .uploadPic li:nth-of-type(5n+1) {margin-left:0;}
  2157. .ask_write .uploadPic .uploadBtn {min-height:auto; padding:20px 0; border:none; cursor:pointer;}
  2158. .ask_write .uploadPic .dz-message {display:flex; justify-content:center; align-items:center; height: 44px; margin:0; padding: 5px 10px;}
  2159. .ask_write .uploadPic .uploadBtn i {margin-right: 5px; font-size: 20px;}
  2160. .ask_write .uploadPic li div {display:absolute; top:0; left:0; width:100%; height:100%;}
  2161. .ask_write .uploadPic li img {width:100%;}
  2162. .ask_write .uploadPic li span {position:absolute; bottom:0; right:0; display: flex; justify-content: center; align-items: center; width:30px; height:30px; background:rgba(0, 0, 0, 0.6); color:#fff;}
  2163. .ask_write .uploadPic .guide {font-size:14px; color:var(--secondary);}
  2164. .ask_write .uploadPic .guide strong {font-weight:500; color:var(--cuation);}
  2165. .ask_write .btn_wrap {margin-top:20px; margin-left:2px; margin-right:2px; }
  2166. .ask_write .btn {width:calc(50% - 6px);}
  2167. .item_detail .seller .btn_wrap button {margin:2px; padding:5px 10px; border:1px solid #ddd; font-size: 15px; color: #525252;}
  2168. .item_detail .seller .btn_wrap button i {color:var(--black);}
  2169. .item_detail .seller table {margin-top:20px;}
  2170. .item_detail .seller th,
  2171. .item_detail .seller td {padding:10px 20px;}
  2172. .item_detail .seller th {background:#f8f8f8;}
  2173. .item_detail .seller td {border-right:none;}
  2174. .item_detail .seller .go_sellerinfo {cursor:pointer;}
  2175. .item_detail .seller .go_sellerinfo i {font-size:14px; color:#525252; vertical-align: middle; margin-top: -4px;}
  2176. .item_detail .seller .info {display:flex; flex-flow:row wrap; padding:30px 20px; border-bottom:1px solid #ddd;}
  2177. .item_detail .seller .info > div {display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; width:20%; border-left:1px solid #ededed; color:var(--red1);}
  2178. .item_detail .seller .info > div:first-child {border-left:none;}
  2179. .item_detail .seller .info h4 {font-weight:500;}
  2180. .item_detail .seller .info strong {display:inline-block; font-size:28px; font-weight:700;}
  2181. .item_detail .seller .rating strong {color:var(--black);}
  2182. .item_detail .seller .star_bg {position: relative; display: block; width: 175px; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x;}
  2183. .item_detail .seller .star_rate {position: absolute; top: 0; left: 0; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x 0 -33px; overflow: hidden; vertical-align: -1px;}
  2184. .item_detail .seller .certi > div {display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; width:100px; height:100px; background:#f8f8f8; border-radius:50px; font-size:14px; font-weight:700; color:var(--black); cursor:pointer;}
  2185. .item_detail .seller .certi > div img {margin-bottom:10px;}
  2186. .certi_view .modal-dialog {max-width:500px;}
  2187. .certi_view .modal-header {border-bottom:none;}
  2188. .certi_view .modal-body {font-size:14px;}
  2189. .certi_view th,
  2190. .certi_view td {padding:10px 20px; font-size:14px;}
  2191. .certi_view th {width:100px;}
  2192. .certi_view .conts {padding:20px 0; border-bottom:1px solid #ddd; color: var(--caution);}
  2193. .certi_view .conts h4 {font-size:14px; font-weight:500;}
  2194. .certi_view .guide {margin-top:20px; color:#787878;}
  2195. .certi_view .who {display:flex; margin-top:40px;}
  2196. .certi_view .who ul {margin-left:auto;}
  2197. .item_detail .refund .guide {margin-bottom:20px; color:#787878;}
  2198. .item_detail .refund h4 {margin-bottom:10px;}
  2199. .item_detail .refund th,
  2200. .item_detail .refund td {padding:16px;}
  2201. .item_detail .refund th {width:200px; background:#f8f8f8;}
  2202. .item_detail .refund td {border-left:1px solid var(--border);}
  2203. .item_detail .refund td strong {font-weight:500; color:var(--red);}
  2204. .item_detail .refund td li {position:relative; padding:3px 0; padding-left:15px;}
  2205. .item_detail .refund td li:before {content:""; position:absolute; top:15px; left:4px; width:3px; height:3px; background:var(--gray);}
  2206. .item_detail .refund .period_guide {margin-top:10px; font-size:14px; color:var(--gray);}
  2207. .item_detail .refund .period_guide li:before {top:10px}
  2208. .item_detail .refund .tooltiptext {width:300px; color:#666;}
  2209. .item_detail .refund .tooltiptext li {position:relative; padding:2px 0; padding-left:10px;}
  2210. .item_detail .refund .tooltiptext li:before {content:"-"; position:absolute; top:5px; left:0;}
  2211. .seller_info .modal-dialog {max-width:500px;}
  2212. .seller_info .modal-header {padding-bottom: 0; border-bottom:none;}
  2213. .seller_info th,
  2214. .seller_info td {padding:10px 3px; font-size:15px;}
  2215. .seller_info th {width:130px;}
  2216. .seller_info td button {margin: 3px; padding: 4px 10px; font-size: 12px; line-height: 1;}
  2217. .seller_info .btn_verify {border:1px solid var(--blue); background:var(--blue); color:#fff;}
  2218. .seller_info .btn_wrong {border: 1px solid var(--danger); color: var(--danger);}
  2219. .seller_info .conts {background: #f6f6f6; padding: 20px;margin-top: 20px; font-size: 14px; line-height: 1.4;}
  2220. .seller_info .conts strong {color:var(--red);}
  2221. .share_view .share_list {display:flex;}
  2222. .share_view .share_list > div {display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 20px 15px 0; font-size:14px; cursor:pointer;}
  2223. .share_view .share_list img {width:50px; height:50px; margin-bottom:6px; border-radius:50px;}
  2224. .tab-link {
  2225. font-weight: 500;
  2226. text-transform: uppercase;
  2227. color: var(--heading);
  2228. transition: all linear .3s;
  2229. -webkit-transition: all linear .3s;
  2230. -moz-transition: all linear .3s;
  2231. -ms-transition: all linear .3s;
  2232. -o-transition: all linear .3s;
  2233. }
  2234. .tab-link:hover {
  2235. color: var(--primary);
  2236. }
  2237. .tab-link i {
  2238. font-size: 18px;
  2239. margin-right: 3px;
  2240. }
  2241. .tab-link.active {
  2242. color: var(--primary);
  2243. }
  2244. .tab-pane {display: none; width:100%; max-width:1080px; margin:0 auto; padding: 0px;}
  2245. .tab-pane.active {display: block;}
  2246. .modal_card .card_content {height:80vh; padding-top:30px; padding-right: 20px;overflow-y: scroll; border-top: 1px solid #000;}
  2247. .modal_card .card_content > div:not(.guide) {margin-bottom:30px;}
  2248. .modal_card .cardtable {width:100%;}
  2249. .modal_card .cardtable tr {border-bottom: 1px solid #ebebeb;}
  2250. .modal_card .cardtable th {background-color: #f5f5f5; border-top: 1px solid #000; border-bottom: 1px solid #ebebeb; padding: 10px 0; color:var(--black); font-size:var(--fsize14); text-align:center;}
  2251. .modal_card .cardtable td {padding:10px; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; font-size:var(--fsize14);}
  2252. .modal_card .table_info {padding: 10px 0; font-size:var(--fsize14);}
  2253. .details-label-group {
  2254. position: absolute;
  2255. top: 20px;
  2256. left: 20px;
  2257. z-index: 1;
  2258. display: -webkit-box;
  2259. display: -ms-flexbox;
  2260. display: flex;
  2261. -webkit-box-orient: vertical;
  2262. -webkit-box-direction: normal;
  2263. -ms-flex-direction: column;
  2264. flex-direction: column;
  2265. }
  2266. .details-label {
  2267. font-size: 14px;
  2268. padding: 6px 20px;
  2269. margin-bottom: 6px;
  2270. line-height: 13px;
  2271. border-radius: 50px;
  2272. text-transform: capitalize;
  2273. text-align: center;
  2274. color: var(--white);
  2275. }
  2276. .details-label:last-child {
  2277. margin-bottom: 0px;
  2278. }
  2279. .details-label.off {
  2280. background: var(--red);
  2281. }
  2282. .details-label.new {
  2283. background: var(--black);
  2284. }
  2285. .details-label.sale {
  2286. background: var(--orange);
  2287. }
  2288. .details-label.feat {
  2289. background: var(--purple);
  2290. }
  2291. .details-label.rate {
  2292. background: var(--yellow);
  2293. }
  2294. .details-preview {
  2295. margin-bottom: 16px;
  2296. }
  2297. .details-preview li img {
  2298. width: 100%;
  2299. border-radius: 8px;
  2300. }
  2301. .details-thumb li {
  2302. margin: 0px 8px;
  2303. cursor: pointer;
  2304. }
  2305. .details-thumb li img {
  2306. width: 100%;
  2307. border-radius: 8px;
  2308. border: 1px solid var(--white);
  2309. }
  2310. .details-thumb .slick-current img {
  2311. border: 1px solid #5f6472;
  2312. }
  2313. .product-navigation {display:none;
  2314. margin-bottom: 25px;
  2315. padding: 20px 25px;
  2316. border-radius: 8px;
  2317. background: var(--white);
  2318. display: -webkit-box;
  2319. display: -ms-flexbox;
  2320. display: flex;
  2321. -webkit-box-align: center;
  2322. -ms-flex-align: center;
  2323. align-items: center;
  2324. -webkit-box-pack: justify;
  2325. -ms-flex-pack: justify;
  2326. justify-content: space-between;
  2327. }
  2328. .product-navigation li a {
  2329. color: var(--text);
  2330. text-transform: capitalize;
  2331. position: relative;
  2332. transition: all linear .3s;
  2333. -webkit-transition: all linear .3s;
  2334. -moz-transition: all linear .3s;
  2335. -ms-transition: all linear .3s;
  2336. -o-transition: all linear .3s;
  2337. }
  2338. .product-navigation li a:hover {
  2339. color: var(--primary);
  2340. }
  2341. .product-navigation li a:hover .product-nav-popup {
  2342. visibility: visible;
  2343. opacity: 1;
  2344. }
  2345. .product-nav-popup {
  2346. position: absolute;
  2347. top: 30px;
  2348. left: 50%;
  2349. z-index: 3;
  2350. width: 100px;
  2351. height: auto;
  2352. visibility: hidden;
  2353. opacity: 0;
  2354. padding: 10px;
  2355. border-radius: 8px;
  2356. -webkit-transform: translateX(-50%);
  2357. transform: translateX(-50%);
  2358. background: var(--white);
  2359. border: 1px solid var(--border);
  2360. -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  2361. box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
  2362. transition: all linear .3s;
  2363. -webkit-transition: all linear .3s;
  2364. -moz-transition: all linear .3s;
  2365. -ms-transition: all linear .3s;
  2366. -o-transition: all linear .3s;
  2367. }
  2368. .product-nav-popup::before {
  2369. position: absolute;
  2370. content: "";
  2371. z-index: -1;
  2372. top: -3px;
  2373. left: 50%;
  2374. width: 12px;
  2375. height: 12px;
  2376. border-radius: 3px;
  2377. -webkit-transform: rotate(45deg) translateX(-50%);
  2378. transform: rotate(45deg) translateX(-50%);
  2379. background: var(--white);
  2380. border-top: 1px solid var(--border);
  2381. border-left: 1px solid var(--border);
  2382. }
  2383. .product-nav-popup img {
  2384. width: 100%;
  2385. }
  2386. .product-nav-popup small {
  2387. font-size: 14px;
  2388. line-height: 18px;
  2389. display: inline-block;
  2390. }
  2391. .details-meta {
  2392. margin-bottom: 12px;
  2393. display: -webkit-box;
  2394. display: -ms-flexbox;
  2395. display: flex;
  2396. -webkit-box-align: center;
  2397. -ms-flex-align: center;
  2398. align-items: center;
  2399. -webkit-box-pack: start;
  2400. -ms-flex-pack: start;
  2401. justify-content: flex-start;
  2402. flex-wrap: wrap;
  2403. }
  2404. .details-meta p {
  2405. font-size: 13px;
  2406. margin-right: 20px;
  2407. white-space: wrap;
  2408. text-transform: uppercase;
  2409. color: var(--placeholder);
  2410. }
  2411. .details-meta span,
  2412. .details-meta a {
  2413. margin-left: 5px;
  2414. color: var(--placeholder);
  2415. }
  2416. .details-meta a:hover {
  2417. text-decoration: underline;
  2418. color: var(--primary);
  2419. }
  2420. .details-rating {
  2421. display: -webkit-box;
  2422. display: -ms-flexbox;
  2423. display: flex;
  2424. -webkit-box-align: center;
  2425. -ms-flex-align: center;
  2426. align-items: center;
  2427. -webkit-box-pack: start;
  2428. -ms-flex-pack: start;
  2429. justify-content: flex-start;
  2430. margin-bottom: 15px;
  2431. }
  2432. .details-rating i,
  2433. .details-rating a {
  2434. font-size: 15px;
  2435. margin-right: 3px;
  2436. color: var(--gray);
  2437. }
  2438. .details-rating a {
  2439. margin-left: 8px;
  2440. white-space: nowrap;
  2441. text-transform: capitalize;
  2442. transition: all linear .3s;
  2443. -webkit-transition: all linear .3s;
  2444. -moz-transition: all linear .3s;
  2445. -ms-transition: all linear .3s;
  2446. -o-transition: all linear .3s;
  2447. }
  2448. .details-rating a:hover {
  2449. color: var(--primary);
  2450. text-decoration: underline;
  2451. }
  2452. .details-rating .active {
  2453. color: var(--yellow);
  2454. }
  2455. .details-price {
  2456. margin-bottom: 20px;
  2457. }
  2458. .details-price del {
  2459. color: var(--red);
  2460. margin-right: 25px;
  2461. }
  2462. .details-price span {
  2463. color: var(--primary);
  2464. white-space: nowrap;
  2465. }
  2466. .details-price span small {
  2467. font-size: 14px;
  2468. font-weight: 400;
  2469. text-transform: capitalize;
  2470. }
  2471. .details-desc {
  2472. margin-bottom: 25px;
  2473. }
  2474. .details-list-group {
  2475. display: -webkit-box;
  2476. display: -ms-flexbox;
  2477. display: flex;
  2478. -webkit-box-align: center;
  2479. -ms-flex-align: center;
  2480. align-items: center;
  2481. -webkit-box-pack: center;
  2482. -ms-flex-pack: center;
  2483. justify-content: center;
  2484. -webkit-box-pack: start;
  2485. -ms-flex-pack: start;
  2486. justify-content: flex-start;
  2487. margin-bottom: 25px;
  2488. }
  2489. .details-list-group:last-child {
  2490. margin-bottom: 0px;
  2491. }
  2492. .details-list-title {
  2493. font-weight: 500;
  2494. margin-right: 15px;
  2495. color: var(--heading);
  2496. text-transform: capitalize;
  2497. }
  2498. .details-tag-list {
  2499. display: -webkit-box;
  2500. display: -ms-flexbox;
  2501. display: flex;
  2502. -webkit-box-align: center;
  2503. -ms-flex-align: center;
  2504. align-items: center;
  2505. -webkit-box-pack: center;
  2506. -ms-flex-pack: center;
  2507. justify-content: center;
  2508. }
  2509. .details-tag-list li {
  2510. margin-right: 8px;
  2511. }
  2512. .details-tag-list li a {
  2513. font-size: 14px;
  2514. line-height: 12px;
  2515. padding: 8px 10px;
  2516. border-radius: 5px;
  2517. letter-spacing: 0.3px;
  2518. text-transform: capitalize;
  2519. color: var(--text);
  2520. background: var(--chalk);
  2521. transition: all linear .3s;
  2522. -webkit-transition: all linear .3s;
  2523. -moz-transition: all linear .3s;
  2524. -ms-transition: all linear .3s;
  2525. -o-transition: all linear .3s;
  2526. }
  2527. .details-tag-list li a:hover {
  2528. color: var(--white);
  2529. background: var(--primary);
  2530. }
  2531. .details-share-list {
  2532. display: -webkit-box;
  2533. display: -ms-flexbox;
  2534. display: flex;
  2535. -webkit-box-align: center;
  2536. -ms-flex-align: center;
  2537. align-items: center;
  2538. -webkit-box-pack: center;
  2539. -ms-flex-pack: center;
  2540. justify-content: center;
  2541. }
  2542. .details-share-list li {
  2543. margin-right: 8px;
  2544. }
  2545. .details-share-list li a {
  2546. width: 35px;
  2547. height: 35px;
  2548. font-size: 16px;
  2549. line-height: 35px;
  2550. border-radius: 50%;
  2551. text-align: center;
  2552. color: var(--text);
  2553. background: var(--chalk);
  2554. transition: all linear .3s;
  2555. -webkit-transition: all linear .3s;
  2556. -moz-transition: all linear .3s;
  2557. -ms-transition: all linear .3s;
  2558. -o-transition: all linear .3s;
  2559. }
  2560. .details-share-list li a:hover {
  2561. color: var(--white);
  2562. background: var(--primary);
  2563. }
  2564. .details-add-group {
  2565. margin: 0;
  2566. }
  2567. .details-add-group .product-add,
  2568. .details-add-group .action-input,
  2569. .details-buy, .details-buy:hover {
  2570. display:flex;
  2571. padding: 10px 0px;
  2572. color: var(--white);
  2573. background: var(--black);
  2574. border:1px solid var(--black);
  2575. text-transform: uppercase;
  2576. justify-content:center; align-items:center;
  2577. }
  2578. .details-buy i {margin-right: 5px;}
  2579. .details-add-group .action-minus i,
  2580. .details-add-group .action-plus i {
  2581. background: var(--chalk);
  2582. }
  2583. .details-wish.active {
  2584. color: var(--white);
  2585. background: var(--primary);
  2586. }
  2587. .details-wish.active:hover {
  2588. color: var(--white);
  2589. background: var(--primary);
  2590. }
  2591. .product-details-frame {
  2592. width:100%; max-width:1080px; margin:0 auto;
  2593. padding: 50px 0; padding-top:0;
  2594. border-radius: 8px;
  2595. margin-bottom: 30px;
  2596. background: var(--white);
  2597. }
  2598. .product-details-frame:last-child {
  2599. margin-bottom: 0px;
  2600. }
  2601. .frame-title {
  2602. margin-bottom: 30px;
  2603. text-transform: capitalize;
  2604. }
  2605. .tab-descrip {
  2606. position: relative;
  2607. }
  2608. .tab-descrip ul {
  2609. list-style: disc;
  2610. margin-left: 20px;
  2611. margin-top: 25px;
  2612. }
  2613. .tab-descrip ul li {
  2614. margin-bottom: 8px;
  2615. }
  2616. .tab-descrip ul li:last-child {
  2617. margin-bottom: 0px;
  2618. }
  2619. .tab-descrip img {
  2620. width: 100%;
  2621. border-radius: 8px;
  2622. }
  2623. .tab-descrip a {
  2624. position: absolute;
  2625. top: 50%;
  2626. left: 50%;
  2627. z-index: 2;
  2628. width: 80px;
  2629. height: 80px;
  2630. font-size: 22px;
  2631. line-height: 80px;
  2632. border-radius: 50%;
  2633. text-align: center;
  2634. color: var(--white);
  2635. background: rgba(15, 199, 86, 0.8);
  2636. -webkit-transform: translate(-50%, -50%);
  2637. transform: translate(-50%, -50%);
  2638. -webkit-box-shadow: var(--primary-bshadow);
  2639. box-shadow: var(--primary-bshadow);
  2640. text-shadow: var(--primary-tshadow);
  2641. }
  2642. .table-bordered {
  2643. margin-bottom: 0px;
  2644. }
  2645. .table-bordered th,
  2646. .table-bordered td {
  2647. padding: 12px 25px;
  2648. text-align: left;
  2649. }
  2650. .table-bordered th {
  2651. font-weight: 500;
  2652. }
  2653. .table-bordered td:last-child {
  2654. border-right: 1px solid var(--border);
  2655. }
  2656. .review-item {
  2657. display:flex; flex-flow:row wrap; align-items: flex-start;
  2658. padding: 45px 45px;
  2659. border-radius: 8px;
  2660. margin-bottom: 30px;
  2661. background: var(--chalk);
  2662. border: 1px solid var(--border);
  2663. }
  2664. .review-item:last-child {
  2665. margin-bottom: 0px;
  2666. }
  2667. .review-media {
  2668. margin-bottom: 15px;
  2669. display: -webkit-box;
  2670. display: -ms-flexbox;
  2671. display: flex;
  2672. -webkit-box-align: center;
  2673. -ms-flex-align: center;
  2674. align-items: center;
  2675. -webkit-box-pack: start;
  2676. -ms-flex-pack: start;
  2677. justify-content: flex-start;
  2678. }
  2679. .review-avatar {
  2680. margin-right:40px;
  2681. border-radius: 50%;
  2682. border: 2px solid var(--primary);
  2683. }
  2684. .review-avatar img {
  2685. width:60px;
  2686. border-radius: 50%;
  2687. border: 2px solid var(--white);
  2688. }
  2689. .review-meta {
  2690. text-transform: capitalize;
  2691. }
  2692. .review-meta a {
  2693. color: var(--heading);
  2694. text-transform: capitalize;
  2695. transition: all linear .3s;
  2696. -webkit-transition: all linear .3s;
  2697. -moz-transition: all linear .3s;
  2698. -ms-transition: all linear .3s;
  2699. -o-transition: all linear .3s;
  2700. }
  2701. .review-meta a:hover {
  2702. color: var(--primary);
  2703. }
  2704. .review-meta span {
  2705. display: block;
  2706. font-size: 15px;
  2707. font-weight: 400;
  2708. color: var(--text);
  2709. }
  2710. .review-meta span b {
  2711. font-weight: 500;
  2712. color: var(--primary);
  2713. }
  2714. .review-rating {
  2715. margin-bottom: 10px;
  2716. }
  2717. .review-rating li {
  2718. font-size: 16px;
  2719. margin-right: 5px;
  2720. color: var(--yellow);
  2721. display: inline-block;
  2722. }
  2723. .review-desc {
  2724. margin-bottom: 20px;
  2725. }
  2726. .review-reply {
  2727. display: -webkit-box;
  2728. display: -ms-flexbox;
  2729. display: flex;
  2730. -webkit-box-align: center;
  2731. -ms-flex-align: center;
  2732. align-items: center;
  2733. -webkit-box-pack: start;
  2734. -ms-flex-pack: start;
  2735. justify-content: flex-start;
  2736. }
  2737. .review-reply input {
  2738. width: 100%;
  2739. padding: 7px 18px;
  2740. border-radius: 6px;
  2741. margin-right: 20px;
  2742. background: var(--white);
  2743. }
  2744. .review-reply button {
  2745. font-size: 15px;
  2746. padding: 6px 15px;
  2747. border-radius: 6px;
  2748. color: var(--white);
  2749. background: var(--primary);
  2750. text-transform: capitalize;
  2751. transition: all linear .3s;
  2752. -webkit-transition: all linear .3s;
  2753. -moz-transition: all linear .3s;
  2754. -ms-transition: all linear .3s;
  2755. -o-transition: all linear .3s;
  2756. }
  2757. .review-reply button:hover {
  2758. background: var(--heading);
  2759. }
  2760. .review-reply button i {
  2761. margin-right: 5px;
  2762. }
  2763. .review-reply-list {
  2764. margin-left: 80px;
  2765. margin-top: 35px;
  2766. border-top: 1px solid var(--border);
  2767. }
  2768. .review-reply-item {
  2769. display:flex; flex-flow:row wrap; align-items:center;
  2770. padding: 30px 0px;
  2771. border-bottom: 1px solid var(--border);
  2772. }
  2773. .review-reply-item:last-child {
  2774. padding-bottom: 0px;
  2775. border-bottom: none;
  2776. }
  2777. .review-form .btn {
  2778. width: 100%;
  2779. padding: 12px 30px;
  2780. }
  2781. .review .product-details-frame {padding:50px 0;}
  2782. .review .tag_amount {position: absolute; bottom: 0; right: 0; padding: 0 5px; background: rgba(0, 0, 0, 0.4); font-weight: 500; color: #fff; display: block; width: 30px; height: 30px; line-height: 30px; font-size: 12px; text-align: center;}
  2783. .review .tit h3 {display:inline-block; margin-right:5px; font-size: 18px; font-weight: 700; color:#212121; vertical-align:middle;}{}
  2784. .review_guide {display:flex; flex-flow:row wrap; padding:20px; border:1px solid #ddd; border-radius:5px; font-size: 14px; color: #787878;}
  2785. .review_guide > div:last-child {margin-left:auto;}
  2786. .review_guide dl {display:flex; flex-flow:row wrap; margin:0; margin-top:3px;}
  2787. .review_guide dt {font-weight:normal;}
  2788. .review_guide dd {position:relative; margin:0; margin-right:20px; color: var(--caution);}
  2789. .review_guide dd:before {position: absolute; top: 5px; bottom: 5px; right:-10px; width: 1px; background-color: #ccc; content: "";}
  2790. .review_guide dd:last-child:before {display:none;}
  2791. .review_guide button,
  2792. .review_guide button:hover { display: flex; align-items: center; justify-content: center; width: 120px; height: 44px; padding: 5px 10px; background: #191f2e; border: none; color: #fff;}
  2793. .review_rating {margin-top:40px;}
  2794. .review_rating .inner_wrap {display:flex; flex-flow:row wrap; justify-content:center; /*height:210px;*/ padding:35px 30px 29px; background-color: #f8f9fb; border: 1px solid #e0e0e1;
  2795. border-radius: 5px;}
  2796. .review_rating .inner_wrap > div {display:flex; flex-flow:column wrap; align-items:center; overflow:hidden;}
  2797. .review_rating .inner_wrap > div > strong,
  2798. .review_classfied .slick-slide > strong {display:block; color: #212121; font-weight: 500; font-size: 14px; text-align:center; word-break:keep-all;}
  2799. .review_rating .user_total {text-align:center;}
  2800. .review_rating .score {display:block; margin-top:15px; font-size: 38px; color: #c5c5c5; line-height: 1;}
  2801. .review_rating .score strong {color:#212121; font-weight:500;}
  2802. .review_user .star_bg {position: relative; display: block; margin:26px auto 0; width: 175px; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x;}
  2803. .review_user .star_rate {position: absolute; top: 0; left: 0; height: 33px; background: url('/themes/kakemall/pro/resources/images/icon_star.png') repeat-x 0 -33px; overflow: hidden; vertical-align: -1px;}
  2804. .review_total {width: 165px; margin-left:3.5%;}
  2805. .review_total i {margin-top:17px; font-size:42px; color:#d3d6d9;}
  2806. .review_rate {width:170px; margin-left:3.5%;}
  2807. .review_rate ul {display: table; table-layout: fixed; width: 100%; margin-top: 7px; padding: 18px 0 28px;}
  2808. .review_rate li {display: table-cell; position: relative; text-align: center;}
  2809. .review_rate .bar {display: inline-block; position: relative; width: 8px; height: 100px; border-radius: 5px; background-color: #e6e9f0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); vertical-align: top;}
  2810. .review_rate .gauge {position: absolute; right: 0; bottom: 0; left: 0; min-height: 8px;}
  2811. .review_rate .account {position: absolute; bottom: 100%; left: 50%; z-index: 1; height: 19px; opacity:0;}
  2812. .review_rate .gauge.active .account {opacity:1;}
  2813. .review_rate .account em {display: inline-block; position: relative; margin-top: -1px; height: 15px; padding: 0 3px; border-radius: 2px; background-color: #f54a4c; font-family: arial,sans-serif; font-size: 11px; line-height: 15px; color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
  2814. .review_rate .account em:before {position: absolute; bottom: -7px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: #f54a4c; content: "";}
  2815. .review_rate .graph {display: inline-block; width: 100%; height: 100%; border-radius: 5px; background-color: #ced4e1; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); vertical-align: top;}
  2816. .review_rate .gauge.active .graph {background-color: #f54a4c;}
  2817. .review_rate .score {display:block; margin-top:16px; font-size:14px; text-align:center; color:#787878;}
  2818. .review_classfied {display:block!important; width: 316px; margin-left:3.5%;}
  2819. .review_classfied .slick-slide {height:auto;}
  2820. .review_classfied .slick-list {padding:0 40px;}
  2821. .review_classfied .slick-slider {position:relative; width:100%; height:100%;}
  2822. .review_classfied .slick-arrow {position:absolute; top:50%; width:26px; height:51px; margin-top:-25px; background-image: url('/themes/kakemall/pro/resources/images/arrow_gray.svg'); background-repeat:no-repeat; background-position:center; background-size:13px auto; z-index:1; text-indent:-999999px; }
  2823. .review_classfied .slick-next {right:0;}
  2824. .review_classfied .slick-prev {left:0; transform:rotate(-180deg);}
  2825. .review_classfied .slick-dots {margin-top: 6px; text-align: center;}
  2826. .review_classfied .slick-dots li {display: inline-block; width: 4px; height: 4px; margin: 0 2px 0 3px; background-color: #000; border-radius: 50%; vertical-align: top; opacity: .1; text-indent:-9999px; font-size:0; line-height:0;}
  2827. .review_classfied .slick-dots li.slick-active {opacity: 1;}
  2828. .review_classfied .slick-slide ul {height: 91px; margin-top: 27px;}
  2829. .review_classfied .slick-slide ul li {display:flex; margin-top:9px;}
  2830. .review_classfied .slick-slide ul li:first-child {margin-top:0;}
  2831. .review_classfied .slick-slide ul li > div {display:flex; width: 100%;}
  2832. .review_classfied .slick-slider .box1 em {display:inline-block; min-width:66px; height: 22px; margin-top: 1px; margin-right:10px; padding: 0 5px; border:1px solid #a26f59; color:#a26f59; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px; line-height: 20px; vertical-align: top; border-radius: 12px; text-align: center; font-style:normal;}
  2833. .review_classfied .slick-slider .comment {padding-right: 7px; font-size: 13px; color: #000; font-size:13px;}
  2834. .review_classfied .slick-slider .amount {display:flex; margin-left: auto; font-size:12px; color:#777; }
  2835. .review_classfied .slick-slider .amount > span:last-child {margin-left:auto; font-size:11px; color:#959595;}
  2836. .review_classfied .slick-slider .box2 li {display:flex;}
  2837. .review_classfied .slick-slider .box2 li em {color: #aaa; white-space: nowrap; font-style:normal;}
  2838. .review_classfied .slick-slider .box2 li > div {margin-left:auto; width:120px;}
  2839. .review_classfied .slick-slider .box2 .graph {display: inline-block; position: relative; width:100px; height: 6px; margin-top: 5px; background-color: #e6e9f0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); border-radius: 3px; vertical-align: top;}
  2840. .review_classfied .slick-slider .bar {position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); border-radius: 3px; background-color: #ced4e1;}
  2841. .review_classfied .slick-slider .bar.active {background:#1e49c1;}
  2842. .review_classfied .box2 .amount {margin-left:5px; font-size:11px; color: #aaa; white-space: nowrap;}
  2843. .storePick {margin-top:40px;}
  2844. .storePick .tit em {font-size: 14px; font-style: normal; color: #787878; vertical-align:middle;}
  2845. .slideStorePick .slick-slide {height:auto;}
  2846. .slideStorePick .columnWrap {display:flex!important; flex-flow:row wrap; justify-content:space-between; height:auto;}
  2847. .slideStorePick .column {width:calc(50% - 5px); padding: 20px; border: 1px solid #ddd;}
  2848. .slideStorePick .writerInfo {display:flex; padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #ddd;}
  2849. .slideStorePick .writerInfo > div {overflow:hidden;}
  2850. .slideStorePick .writerInfo img {width: 50px; height: 50px; margin-right:15px; border-radius: 50%;}
  2851. .slideStorePick .star_bg {position: relative; display:inline-block; width:80px; height:16px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:16px;}
  2852. .slideStorePick .star_rate {position: absolute; top: 0; left: 0; height: 16px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -15px; background-size:16px; overflow: hidden;}
  2853. .slideStorePick .starRate em {display:inline-block; margin-left:3px; font-weight:700; font-style:normal; color:var(--black);}
  2854. .slideStorePick .summary {font-size:14px; color:var(--graytxt); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
  2855. .slideStorePick .summary span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;}
  2856. .slideStorePick .cont {display:flex; height:100px; overflow:hidden;}
  2857. .slideStorePick .cont img {width:100px;}
  2858. .slideStorePick .cont .comment {margin-right:20px; font-size:15px; }
  2859. .slideStorePick .pic {position:relative;}
  2860. .slideStorePick .slick-arrow,
  2861. .slideStorePick .slick-dots {display:none!important;}
  2862. .storePick .btnWrap {display:flex; justify-content:center; margin: 20px 0 40px;}
  2863. .storePick .btnWrap img {width:9px; margin:0 10px;}
  2864. .storePick .prevBtn {transform:rotate(-180deg);}
  2865. .reviewMedia ul {display:flex;}
  2866. .reviewMedia li {position:relative; width:calc(12.5% - 8px); margin-left:10px;}
  2867. .reviewMedia li:first-child {margin-left:0;}
  2868. .reviewMedia img {width:100%;}
  2869. .reviewMedia .tit span,
  2870. .reveiwSort .tit span {margin-left:3px; color:var(--caution); font-weight:500;}
  2871. .reviewMedia li a {position:relative;}
  2872. .reviewMedia .moreWrap {position:absolute!important; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:1; color:#fff; cursor:pointer;}
  2873. .reviewFilter {margin-top:40px; padding-top:20px; border-top:1px solid #ccc;}
  2874. .reveiwSort {display:flex;}
  2875. .reveiwSort .tit {display:block; margin-right:auto; color:var(--black);}
  2876. .reveiwSort ul {display:flex;}
  2877. .reveiwSort li {position:relative;}
  2878. .reveiwSort li a {padding:3px 8px; color:var(--secondary);}
  2879. .reveiwSort li a.active {color:var(--black);}
  2880. .reveiwSort li a:before {display:none; content:"\f00c"; font-family:var(--awesome); font-weight:900; margin-top:-2px; margin-right:3px; font-size:14px; color:var(--black); vertical-align:middle; }
  2881. .reveiwSort li a.active:before {display:inline-block;}
  2882. .reveiwSort li .tooltipGuide {display:none; position:absolute; top:30px; width:230px; padding:10px; background:#fff; border:1px solid #ddd; border-radius:5px; -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1); font-size:14px;}
  2883. .reveiwSort li:first-child:hover .tooltipGuide {display:block;}
  2884. .reveiwSort li .tooltipGuide strong {color:var(--black);}
  2885. .reviewTabWrap {margin:20px 0;}
  2886. .reviewTabs {display:flex; padding:20px; background:#1d377a; border:1px solid #1d377a; border-bottom:none; border-top-left-radius:5px; border-top-right-radius:5px;}
  2887. .reviewTabs li {flex:1; text-align:center;}
  2888. .reviewTabs a {position:relative; display:inline-block; color:#fff;}
  2889. .reviewTabs a:hover {color:rgba(255, 255, 255, 0.8);}
  2890. .reviewTabs a.active:before {position:absolute; bottom:0; width:100%; display:block; content:""; background:#fff; height:2px;}
  2891. .reviewHash {display:flex; padding:20px; background:#fff; border:1px solid #ddd; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
  2892. .reviewHash .tag {margin:0 5px; padding:3px 15px; border:1px solid #ddd; border-radius:50px; font-size:14px; }
  2893. .reviewHash .tag.active {border:1px solid var(--primary); color:var(--primary);}
  2894. .reviewHash .goodsOption {position:relative;}
  2895. .reviewHash .goodsOption button.active i {transform:rotate(-180deg);}
  2896. .reviewHash .dropdownWrap {position:absolute; display:none; width:250px; margin-top:10px; background:#fff; border:1px solid #ddd; border-radius:5px; overflow:hidden; z-index: 5000;}
  2897. .reviewHash .dropdownWrap > div:first-child {padding:10px 20px; background: #f6f6f6; border-bottom:1px solid #ddd; font-size:14px; color:var(--black);}
  2898. .reviewHash .dropdownWrap ul {height: 160px; margin-top:10px; overflow-y: scroll;}
  2899. .reviewHash .dropdownWrap li {padding:5px 20px; font-size:14px;}
  2900. .reviewHash .dropdownWrap input[type="radio"] {display:none;}
  2901. .reviewHash .dropdownWrap input[type="radio"]:checked + label {color:#133691; font-weight:500;}
  2902. .reviewHash .dropdownWrap label:before {content:"\f00c"; font-family:var(--awesome); font-weight:900; display: none; margin-right: 3px; font-size: 12px; vertical-align: text-bottom; color:#133691;
  2903. }
  2904. .reviewHash .dropdownWrap input[type="radio"]:checked + label:before {display:inline-block;}
  2905. .reviewHash .dropdownWrap .btnWrap {padding:10px 20px; border-top:1px solid #eee; }
  2906. .reviewHash .dropdownWrap .btnWrap button {width:calc(50% - 5px); margin-left:5px; padding:5px; background:var(--primary); color:#fff; font-size:14px; text-align:center;}
  2907. .reviewHash .dropdownWrap .btnWrap button:first-child {margin-left:0; background:#acb0b9;}
  2908. .reviewGuide {margin-bottom:20px; padding:10px 20px; border:1px solid #ddd; border-radius:5px;}
  2909. .reviewGuide i {color:var(--orange);}
  2910. .reviewGuide strong {color: var(--facebook); font-weight:500;}
  2911. .reviewWrite .col-lg-12 {padding-left:0; padding-right:0;}
  2912. .reviewWrite .modal-dialog {width:90%; max-width:600px;}
  2913. .reviewWrite .product-details-frame {padding:20px;}
  2914. .reviewWrite .pointGuide {margin-bottom:10px; background:#f6f6f6; border-radius:5px; font-size:14px; color:#787878; overflow:hidden;}
  2915. .reviewWrite .pointGuide > * {padding:10px 20px; }
  2916. .reviewWrite .pointGuide i {margin-right:3px;}
  2917. .reviewWrite .pointGuide strong {font-weight:500; color:var(--caution);}
  2918. .reviewWrite .pointGuide .fa-angle-down {margin-left:10px;}
  2919. .reviewWrite .pointGuide > div.active .fa-angle-down {transform:rotate(-180deg);}
  2920. .reviewWrite .pointGuide > ul {padding-left: 42; background:#eee; border-top:1px dashed #ddd;}
  2921. .reviewWrite .pointGuide > ul li {position:relative; padding:3px 0 3px 5px;}
  2922. .reviewWrite .pointGuide > ul li:before {position:absolute; top:10px; left:0; content:""; display:block; width:3px; height:3px; border-radius:50%; background:#787878;}
  2923. .reviewWrite .pointGuide .notice {border-top:1px solid #ddd; }
  2924. .reviewWrite .summary {display:flex;}
  2925. .reviewWrite .summary .pic {width:100px; margin-right: 15px;}
  2926. .reviewWrite .summary img {width:100%;}
  2927. .reviewWrite .summary .cont {margin-top:5px;}
  2928. .reviewWrite .summary .store,
  2929. .reviewWrite .summary .option {font-size:14px; color:var(--secondary);}
  2930. .reviewWrite .summary .goodsName {font-weight:500;}
  2931. .reviewWrite .starRate {margin-top:10px; padding:0; padding-top:20px; border-top:1px solid #212121;}
  2932. .reviewWrite .star-rating {display: flex; justify-content: center; padding:30px 20px; background: var(--gray-dark); border-radius:5px;}
  2933. .reviewWrite .star-rating label {width:40px; height:40px; position: relative; margin:0; cursor:pointer;}
  2934. .reviewWrite .star-rating label:hover:after {opacity:1;}
  2935. .reviewWrite .star-rating label:before {content: ""; position: absolute; display: block; top: 0px; left: 0px; width:40px; height:39px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 0; background-size:40px; overflow: hidden;}
  2936. .reviewWrite .star-rating label:after {content: ""; position: absolute; display: block; top: 0px; left: 0px; opacity: 0; width:40px; height:39px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -37.5px; background-size:40px; overflow: hidden;}
  2937. .reviewWrite .star-rating input:checked ~ label::after {opacity:1;}
  2938. .reviewWrite .optionRate {padding-left:5px; padding-right:5px;}
  2939. .reviewWrite .optionRate dl {display:flex; border-bottom: 1px solid var(--border);}
  2940. .reviewWrite .optionRate dt {width:30%; padding:14px 20px 0 5px; font-weight: 500; color: var(--black);}
  2941. .reviewWrite .optionRate dd {width:70%; display:flex; align-items: flex-start;}
  2942. .reviewWrite .optionRate .star-rating {flex-flow:column wrap; align-items:center; justify-content:center; margin: 0 10px; padding:0; background:none; border:none; direction: inherit;}
  2943. .reviewWrite .optionRate .star-rating label {width:26px; height:26px;}
  2944. .reviewWrite .optionRate .star-rating label:before,
  2945. .reviewWrite .optionRate .star-rating label:after{width:26px; height:26px; background-size:26px; }
  2946. .reviewWrite .optionRate .star-rating label:after {background-position:0 -25px;}
  2947. .reviewWrite .optionRate .star-rating span {margin-top: 8px; color: var(--secondary); font-size: 14px; word-break: keep-all; line-height: 1.3;}
  2948. .reviewWrite .comment {padding:0;}
  2949. .reviewWrite .uploadPic {margin-bottom: 20px;}
  2950. .reviewWrite .uploadPic ul {display:flex; flex-flow:row wrap;}
  2951. .reviewWrite .uploadPic li {position:relative; width: 19.2%; margin-left: 1%; margin-bottom:10px; border:1px solid #ddd; border-radius:5px; overflow:hidden;}
  2952. .reviewWrite .uploadPic li:nth-of-type(5n+1) {margin-left:0;}
  2953. .reviewWrite .uploadPic .uploadBtn {display:flex; justify-content:center; align-items:center; margin-left:0px; flex-flow: column wrap;}
  2954. .reviewWrite .uploadPic .uploadBtn a {color:var(--secondary)!important; text-align: center; font-size: 15px; word-break: keep-all; line-height:1.3;}
  2955. .reviewWrite .uploadPic .uploadBtn i {font-size: 26px; margin-bottom: 5px;}
  2956. .reviewWrite .uploadPic li div {display:absolute; top:0; left:0; width:100%; height:100%;}
  2957. .reviewWrite .uploadPic li img {width:100%;}
  2958. .reviewWrite .uploadPic li span {position:absolute; bottom:0; right:0; display: flex; justify-content: center; align-items: center; width:30px; height:30px; background:rgba(0, 0, 0, 0.6); color:#fff;}
  2959. .reviewWrite .uploadPic .guide {font-size:14px; color:var(--secondary);}
  2960. .reviewWrite .uploadPic .guide strong {font-weight:500; color:var(--cuation);}
  2961. .review-list .reviewCont {flex:1;}
  2962. .review-list .reviewSummery {font-size:14px; color:var(--sec);}
  2963. .review-list .reviewSummery a {color:inherit;}
  2964. .review-list .starRate {display:flex; align-items:center;}
  2965. .review-list .star_bg {position: relative; display:inline-block; width:100px; height:20px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:20px;}
  2966. .review-list .star_rate {position: absolute; top: 0; left: 0; height:20px; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -20px; background-size:20px; overflow: hidden;}
  2967. .review-list .starRate em {display:inline-block; margin-left:10px; font-weight:700; font-style:normal; color:var(--black); vertical-align: text-bottom; font-size:16px;}
  2968. .review-list .writer {font-size:14px; color:var(--graytxt); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
  2969. .review-list .writer span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;}
  2970. .review-list .optionRate dl {display:flex; margin-top:10px; padding:10px 15px; border-radius:10px; border:1px dashed #ddd; color: var(--sub-heading);}
  2971. .review-list .optionRate dt {margin-right:5px;}
  2972. .review-list .optionRate dd {margin-bottom:0;}
  2973. .review-list .optionRate dd:after {content:""; width:1px; height:100%; margin:0 10px; background:#ddd;}
  2974. .review-list .reviewSummery {display:flex; align-items: flex-start;}
  2975. .review-list .reviewSummery .pic {position:relative; width:120px; height:0; margin-left:40px; padding-top:120px;}
  2976. .review-list .reviewSummery .pic img {width:100%;}
  2977. .review-list .reviewSummery .imgBox {position:absolute; top:0; left:0; width:100%; height:100%;}
  2978. .review-desc {line-height:1.6;}
  2979. .review-desc img {display:inline-block; max-width:100%; margin:10px;}
  2980. .review-desc .morecontent span {display: none;}
  2981. .review-desc .morelink {display: block;}
  2982. .review-list .btnGood {margin-top:10px; padding:5px 10px; border:1px solid #ddd; border-radius:5px; background:#fff; color:#666; line-height:1.3; font-size:14px;}
  2983. .review-list .btnGood i {color: var(--orange);}
  2984. .review-reply-list .review-media {margin-bottom:0;}
  2985. .review-reply-list .review-avatar {margin-right:20px;}
  2986. .review-reply-list .writer strong {color:var(--black);}
  2987. .review-reply-list .review-desc {margin-top:20px;}
  2988. .reviewPopup .view-details {margin-left:0;}
  2989. .reviewPopup .slick-slide {height:auto;}
  2990. .reviewPopup .view-meta {display:flex; align-items:center;}
  2991. .reviewPopup .review-avatar {margin-right:20px;}
  2992. .reviewPopup .review-avatar img {width:40px;}
  2993. .reviewPopup .summery {flex:1; font-size: 13px; margin-right:0; text-transform: uppercase; color: var(--placeholder);}
  2994. .reviewPopup .starRate {display:flex; align-items:center;}
  2995. .reviewPopup .star_bg {position: relative; display:inline-block; width:100px; height:20px; margin-left:0; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x; background-size:20px;}
  2996. .reviewPopup .star_rate {position: absolute; top: 0; left: 0; height:20px; margin-left:0; background: url('/themes/kakemall/pro/resources/images/star_orange.svg') repeat-x 0 -20px; background-size:20px; overflow: hidden;}
  2997. .reviewPopup .starRate em {display:inline-block; margin-left:10px; font-weight:700; font-style:normal; color:var(--black); vertical-align: text-bottom; font-size:16px;}
  2998. .reviewPopup .writer {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px 0; margin: 5px 0; color:var(--secondary);}
  2999. .reviewPopup .writer span:before {content:""; display:inline-block; width:1; height:12px; margin:0 8px 0 5px; background:#ddd; vertical-align:baseline;}
  3000. .reviewPopup .optionRate {margin-top:10px; margin-bottom:20px; padding:10px; border-radius:10px; border:1px dashed #ddd; color: var(--sub-heading); font-size:14px;}
  3001. .reviewPopup .optionRate dl {display:flex; margin-bottom:2px;}
  3002. .reviewPopup .optionRate dt {margin-right:5px;}
  3003. .reviewPopup .optionRate dd {margin-bottom:0;}
  3004. .reviewPopup .optionRate dd:after {content:""; width:1px; height:100%; margin:0 10px; background:#ddd;}
  3005. .reviewPopup .view-desc {height:260px; overflow-y:scroll;}
  3006. .reviewPopup .option {color: var(--facebook);}
  3007. .reviewPopup .btnGood button {border: 1px solid var(--gray-chalk); border-radius: 50px; font-size: 15px; margin-left:8px; padding: 3px 15px; color: var(--orange);}
  3008. .galleryPopup ul {display:flex; flex-flow:row wrap; margin:30px;}
  3009. .galleryPopup li {position:relative; width:110px; height:110px; margin:5px; background:#f5f5f5; overflow:hidden;}
  3010. .galleryPopup li img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;}
  3011. /*상품상세 - 로그인시 보이는 테이블*/
  3012. .cre_box table {width:100%; margin-bottom:20px;}
  3013. .cre_box table th {padding:6px 10px; background: #f3f4f5; border-top:1px solid #e1dfdf; border-right:1px solid #e1dfdf; text-align:center; word-break:break-all ; font-size: 15px; font-weight: 500; color: #6275a7;}
  3014. .cre_box table th:first-of-type {border-left:1px solid #e1dfdf;}
  3015. .cre_box table td {padding:6px 10px; border-right:1px solid var(--border)!important; word-break:keep-all;}
  3016. .cre_box table td:first-of-type {margin-top:10px; padding-top:10px; border-left:1px solid var(--border)!important;}
  3017. .detail_rel.inner-section {margin-top:60px; padding-bottom:100px; padding-top:90px; background:#f5f6f7;}
  3018. .detail_rel h2 {font-size:30px; font-family:inherit;}
  3019. .detail_rel .product-label {top:10px; left:10px;}
  3020. .detail_rel .product-wish {top:10px; right:10px;}
  3021. .detail_rel .product-card {margin-bottom:40px;}
  3022. .detail_rel .product-image:after {background:none;}
  3023. .detail_rel .product-content {padding:10px;}
  3024. .detail_rel .product-action button i {background:#ccc;}
  3025. .detail_rel .product-action button i:hover {background:var(--black);}
  3026. .details-gallery .slick-slide {height:auto;}
  3027. .inner-section.detail.credit-item {margin-bottom:0;}
  3028. .goods-option-area dl {display:flex; flex-flow:row wrap; margin:10px 0;}
  3029. .goods-option-area dd {margin-left:5px;}
  3030. /*세일*/
  3031. .visual_sale {height:520px; margin-top:20px;}
  3032. .visual_sale .swiper-slide {background:#78ab94;}
  3033. .visual_sale .title {color:#f4fdc5;}
  3034. .visual_sale .desc,
  3035. .visual_sale .time > div,
  3036. .visual_sale .name,
  3037. .visual_sale .info {color:#fff;}
  3038. .visual_sale .time > div {border: 1px solid #fefeff;}
  3039. .visual_sale .price span {color:#b1cbbf;}
  3040. .visual_sale .price strong {color:#b72323;}
  3041. .sale_part {padding:100px 0; padding-bottom:160px;}
  3042. .salepart_swiper {position: relative; width:100%; max-width:1320px; margin:0 auto; padding:0 20px;}
  3043. .salepart_swiper .swiper-slide {padding:10px 0; height:100%; }
  3044. .salepart_swiper .swiper-button-prev,
  3045. .salepart_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;}
  3046. .salepart_swiper .swiper-button-prev:after,
  3047. .salepart_swiper .swiper-button-next:after {font-size:var(--fsize16);}
  3048. .salepart_swiper .swiper-button-prev {left: 0;}
  3049. .salepart_swiper .swiper-button-next {right: 0;}
  3050. .salepart_swiper .swiper-pagination {bottom:-54px;}
  3051. .salepart_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;}
  3052. .salepart_swiper .product-card {margin-bottom:0;}
  3053. .sale_part .product-card,
  3054. .sale_cate .product-card {display:flex; flex-flow:column nowrap;}
  3055. .sale_part .product-content,
  3056. .sale_cate .product-content {flex:1; margin:0; padding:15px 0;}
  3057. .sale_part .product-content > a,
  3058. .sale_cate .product-content > a {display:flex; flex-flow:column nowrap; height: 100%;}
  3059. .sale_part .product-name {font-weight:700;}
  3060. .sale_part .product-desc {font-size:var(--fsize14); color:var(--black); font-weight:400;}
  3061. .sale_part .product-price,
  3062. .sale_cate .product-price {display:flex; flex-flow:row wrap; align-items:center; margin-top:auto;}
  3063. .sale_part .discount,
  3064. .sale_cate .discount {padding-right:5px; font-size:var(--fsize30); color:#d73535; font-weight:500;}
  3065. .sale_part .price > *,
  3066. .sale_cate .price > * {display:block;}
  3067. .sale_part .price span,
  3068. .sale_cate .price span {color:#999999; font-size:var(--fsize14); text-decoration: line-through; font-weight:400; line-height: 1;}
  3069. .sale_part .price strong,
  3070. .sale_cate .price strong {font-size:var(--fsize16); color:var(--black); font-weight:700; line-height: 1;}
  3071. .sale_part .product-card {height:100%; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;}
  3072. .sale_part .product-content {padding:15px;}
  3073. .sale_cate {padding:80px 0; border-top:1px solid var(--border);}
  3074. .sale_cate .container {display:flex; flex-direction:column; align-items: flex-start;}
  3075. .sale_cate .nav-tabs {margin-bottom:0; padding: 15px 25px;}
  3076. .sale_cate .tab {position:sticky; top:86px; background:#fff; z-index:2;}
  3077. .sale_cate .tab {width:calc(100% + 30px); padding-left: 10px; margin-left: -15px; margin-right: -15px; overflow-x: auto;}
  3078. .sale_cate .nav-tabs li,
  3079. .event .nav-tabs li,
  3080. #size_chart .nav-tabs li {padding:0; border-right: none;}
  3081. .sale_cate .tab-link,
  3082. .event .tab-link,
  3083. #size_chart .tab-link {display:flex; align-items:center; justify-content:center; min-width:100px; height:40px; margin:5px 5px; padding:5px 10px;}
  3084. .sale_cate .tab-pane {padding-top:40px;}
  3085. .sale_cate .product-card {height:calc(100% - 25px);}
  3086. /*이벤트*/
  3087. /*.blog-grid.single-banner {padding-bottom:40px;}
  3088. .event .tab-link {min-width:130px; height:50px;}
  3089. .blog-grid .blog-img {position:relative; width:100%; height:0; padding-top:63.68%;}
  3090. .blog-grid .blog-img img {position:absolute; top:0; left:0; width:100%; height:100%;}
  3091. .blog-grid .blog-content {padding:10px 0; text-align:center;}
  3092. .event_tag {display:inline-block; padding:4px 8px; line-height:1; border: 1px solid #bfbfbf; border-radius: 50px; color: #04329f; font-size: 12px; font-weight: 500; vertical-align: middle; margin-top: -3px;}
  3093. .event_tag.comming {color:#9f044a;}
  3094. .event_tag.end {color:#3f3e3e;}
  3095. .blog-grid .blog-title {margin-top: 5px; margin-bottom:0; }
  3096. .blog-grid .blog-title a {width:100%; color:var(--black); font-weight:500; font-size:var(--fsize16);}
  3097. .blog-grid .event_sche {color:var(--gray)}
  3098. .blog-standard .btn {height:45px; line-height:1;}
  3099. .blog-standard .list {padding-left:0; padding-right:0; border-top:2px solid var(--black);}
  3100. .blog-details {border-top:1px solid var(--black);}
  3101. .blog-details-top {margin-bottom:0; padding:25px 0; border-bottom:1px solid var(--border); text-align:center; word-break:keep-all;}
  3102. .blog-details-title {margin-bottom:20px; font-size:22px; font-weight:700; color:var(--black); line-height:1.3;}
  3103. .blog-details-meta {justify-content:center; margin-bottom:0; color:var(--gray);}
  3104. .blog-details-meta .event_tag {margin-right:5px;}
  3105. .blog-details-cont {padding:40px 0; border-bottom:1px solid var(--border); word-break:keep-all;}
  3106. .blog-details-part .btn_wrap {display:flex; flex-flow:row wrap; justify-content:center; align-items:center;}
  3107. .blog-details-part .btn {width:100%; max-width:200px; height:54px;}
  3108. */
  3109. /*구매자보호*/
  3110. .protect .container > div:not(:first-of-type) {padding:20px 0;}
  3111. .protect .container > div:nth-child(even) {flex-direction: row-reverse;}
  3112. .protect .tab-link {padding-left:22px; padding-right:22px;}
  3113. .protect .conts_wrap {display:flex; flex-flow:column nowrap; justify-content:center; width:100%; height:100%; max-width:560px;}
  3114. .protect .container > div:nth-child(even) .conts_wrap {margin-left:auto;}
  3115. .protect .container > div:nth-child(even) .pic {padding-right:30px; padding-left:inherit;}
  3116. .protect .conts h3 {font-size: var(--fsize24); font-weight: 700; }
  3117. .protect .conts h3:after {content: ""; width:100px; display: block; height:1px; margin:20px 0; background: var(--black);}
  3118. .protect .conts h3 span {display:block; margin-bottom:5px; color:#999; font-size:var(--fsize16);}
  3119. .protect .pic {padding-left:30px;}
  3120. .protect .img_wrap {position:relative; width:100%; height:0; padding-top:65.68%; overflow:hidden;}
  3121. .protect .img_wrap img {position:absolute; top:0; left:0; width:100%;}
  3122. .refund_process {padding:0 15px;}
  3123. .refund_process .conts_wrap {display:flex; flex-flow:column nowrap; align-items:center; max-width:none; padding:30px; box-shadow: 0px 0px 8px rgba(0,0,0,0.1);}
  3124. .refund_process h4 {margin-bottom:50px; color:var(--black); font-size:var(--fsize20); font-weight:700;}
  3125. .refund_process ul {display:flex; flex-flow:row wrap;}
  3126. .refund_process ul li {position:relative; width:33.33%; padding:0 50px;}
  3127. .refund_process ul li:not(:last-child):after {position:absolute; top:50%; right:0; font: var(--fa-font-solid); content: "\f105"; font-size: 20px;}
  3128. .refund_process ul li {display:flex; flex-flow:column nowrap; align-items:center;}
  3129. .refund_process ul li i {display:flex; justify-content:center; align-items:center; width:80px; height:80px; margin-bottom: 15px; background:#f0f1f1; border-radius:50px; font-size:24px;}
  3130. .refund_process li strong {margin-bottom:10px; color:var(--black); font-weight:500; text-align:center;}
  3131. .refund_process li strong span {display:block; font-weight:400; color:var(--gray);}
  3132. .protect_review {padding:80px 15px 120px; background:#f6f6f6;}
  3133. .protect_review .title {text-align:center;}
  3134. .protect_review .title h2 {font-weight: 700; color: var(--black); font-size: var(--fsize30);}
  3135. .protect_review .title small {display:block; margin-top:20px; font-size:var(--fsize14);}
  3136. .protect_review a {display:block;}
  3137. .protect_swiper {position: relative; width: 100%; max-width:1320px; margin:0 auto; padding: 0 100px;}
  3138. .protect_swiper .swiper-slide {padding:10px;}
  3139. .protect_swiper .cont_wrap {padding:20px; background:#fff; box-shadow: 0px 0px 8px rgba(0,0,0,0.1);}
  3140. .protect_swiper .meta {display:flex; flex-flow:row wrap; align-items:center; margin-bottom:20px;}
  3141. .protect_swiper .date {margin-left:auto; color:var(--gray); font-size:14px;}
  3142. .protect_swiper .writer {display:flex; flex-flow:row wrap; align-items:center; margin-top:20px;}
  3143. .protect_swiper .pic {display:flex; justify-content:center; align-items:center; width:40px; height:40px; margin-right:10px; padding:0!important; background:#d3d7e1; border-radius:50px; font-size:20px; font-weight:700;}
  3144. .protect_swiper .name {display:block; color:var(--black);}
  3145. .protect_swiper .swiper-button-prev,
  3146. .protect_swiper .swiper-button-next {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; color: var(--black); font-weight: 900;}
  3147. .protect_swiper .swiper-button-prev:after,
  3148. .protect_swiper .swiper-button-next:after {font-size:var(--fsize16);}
  3149. .protect_swiper .swiper-button-prev {left: 0;}
  3150. .protect_swiper .swiper-button-next {right: 0;}
  3151. .protect_swiper .swiper-pagination {bottom:-54px;}
  3152. .protect_swiper .swiper-pagination-bullet-active {background: #2b2b36; width: 30px; border-radius: 3px;}
  3153. .protect_custom {padding: 80px 15px; text-align: center; background: #29364f; color:#fff;}
  3154. .protect_custom h3 {margin-bottom:30px; color:#fff; font-size:var(--fsize30);}
  3155. .protect_custom .btn_wrap {display:flex; justify-content:center; align-items:center; margin-top:40px;}
  3156. .protect_custom button {display:flex; justify-content:center; align-items:center; width:100%; max-width:180px; height:46px; margin:5px; padding:10px; border:1px solid #fff; color:#fff;}
  3157. .faq-part {padding-top:100px;}
  3158. .faq-part h3 {margin-bottom:30px; text-align:center; font-size: var(--fsize30); font-weight:500;}
  3159. .faq-child {
  3160. border-radius: 8px;
  3161. margin-bottom:10px;
  3162. background: var(--white);
  3163. border: 1px solid #717fa5;
  3164. -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  3165. box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  3166. }
  3167. .faq-child:hover .faq-que button {
  3168. color: var(--primary);
  3169. }
  3170. .faq-child:last-child {
  3171. margin-bottom: 0px;
  3172. }
  3173. .faq-que button {
  3174. width: 100%;
  3175. border: none;
  3176. outline: none;
  3177. background: none;
  3178. text-align: left;
  3179. padding: 22px 25px;
  3180. color: var(--black);
  3181. font-weight: 500;
  3182. transition: all linear .3s;
  3183. -webkit-transition: all linear .3s;
  3184. -moz-transition: all linear .3s;
  3185. -ms-transition: all linear .3s;
  3186. -o-transition: all linear .3s;
  3187. }
  3188. .faq-que span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:var(--primary); color:var(--white);}
  3189. .faq-ans {
  3190. padding: 20px 25px;
  3191. border-top: 1px solid var(--border);
  3192. font-weight:400;
  3193. }
  3194. .faq-ans span {display:inline-block; margin-right:10px; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background:#b1bddd; color:var(--white);}
  3195. /*정리필요*/
  3196. /*지워도 됨
  3197. .navbar-focus-list {
  3198. display: -webkit-box;
  3199. display: -ms-flexbox;
  3200. display: flex;
  3201. -webkit-box-align: center;
  3202. -ms-flex-align: center;
  3203. align-items: center;
  3204. -webkit-box-pack: end;
  3205. -ms-flex-pack: end;
  3206. justify-content: flex-end;
  3207. }
  3208. .navbar-focus-list li {
  3209. margin-left: 30px;
  3210. }
  3211. .navbar-focus-list li:first-child {
  3212. margin-left: 0px;
  3213. }
  3214. .navbar-focus-list li a {
  3215. font-weight: 500;
  3216. color: var(--text);
  3217. text-transform: capitalize;
  3218. transition: all linear .3s;
  3219. -webkit-transition: all linear .3s;
  3220. -moz-transition: all linear .3s;
  3221. -ms-transition: all linear .3s;
  3222. -o-transition: all linear .3s;
  3223. }
  3224. .navbar-focus-list li a:hover {
  3225. color: var(--primary);
  3226. }
  3227. .navbar-focus-list li a i {
  3228. font-size: 18px;
  3229. margin-right: 5px;
  3230. }
  3231. .navbar-info-group {
  3232. display: -webkit-box;
  3233. display: -ms-flexbox;
  3234. display: flex;
  3235. -webkit-box-align: center;
  3236. -ms-flex-align: center;
  3237. align-items: center;
  3238. -webkit-box-pack: center;
  3239. -ms-flex-pack: center;
  3240. justify-content: center;
  3241. }
  3242. .navbar-info {
  3243. margin-right: 30px;
  3244. display: -webkit-box;
  3245. display: -ms-flexbox;
  3246. display: flex;
  3247. -webkit-box-align: center;
  3248. -ms-flex-align: center;
  3249. align-items: center;
  3250. -webkit-box-pack: start;
  3251. -ms-flex-pack: start;
  3252. justify-content: flex-start;
  3253. }
  3254. .navbar-info:last-child {
  3255. margin-right: 0px;
  3256. }
  3257. .navbar-info i {
  3258. font-size: 24px;
  3259. margin-right: 10px;
  3260. color: var(--black);
  3261. }
  3262. .navbar-info p small {
  3263. margin-bottom:-2px;
  3264. font-size: 14px;
  3265. line-height: 16px;
  3266. display: block;
  3267. text-align: left;
  3268. text-transform: capitalize;
  3269. color:#707070;
  3270. }
  3271. .navbar-info p span {
  3272. font-size: 15px;
  3273. }
  3274. .navbar-info a, .navbar-info a:hover {
  3275. color:inherit;
  3276. }
  3277. .header-navbar-fixed.active .navbar-part {
  3278. top: 69px;
  3279. background: rgba(0, 0, 0, 0.8);
  3280. }
  3281. .navbar-info p {
  3282. color: #30457d;
  3283. }
  3284. .megamenu-title {
  3285. padding-bottom: 18px;
  3286. margin-bottom: 20px;
  3287. position: relative;
  3288. text-transform: capitalize;
  3289. border-bottom: 1px solid var(--border);
  3290. }
  3291. .megamenu-title::before {
  3292. position: absolute;
  3293. content: "";
  3294. bottom: -2px;
  3295. left: 0px;
  3296. width: 50px;
  3297. height: 2px;
  3298. background: var(--primary);
  3299. }
  3300. .megamenu-list {
  3301. border-left: 1px solid var(--border);
  3302. }
  3303. .megamenu-list li a {
  3304. width: 100%;
  3305. border-radius: 5px;
  3306. padding: 5px 0px 5px 25px;
  3307. color: var(--text);
  3308. white-space: nowrap;
  3309. text-transform: capitalize;
  3310. transition: all linear .3s;
  3311. -webkit-transition: all linear .3s;
  3312. -moz-transition: all linear .3s;
  3313. -ms-transition: all linear .3s;
  3314. -o-transition: all linear .3s;
  3315. }
  3316. .megamenu-list li a:hover {
  3317. color: var(--primary);
  3318. background: var(--chalk);
  3319. }
  3320. .megamenu-promo a img {
  3321. width: 100%;
  3322. border-radius: 3px;
  3323. }
  3324. */
  3325. .privacy-part .nav-link-a {
  3326. width: 100%;
  3327. font-weight: 500;
  3328. padding: 12px 15px;
  3329. border-radius: 8px;
  3330. color: var(--text);
  3331. text-transform: capitalize;
  3332. transition: all linear .3s;
  3333. -webkit-transition: all linear .3s;
  3334. -moz-transition: all linear .3s;
  3335. -ms-transition: all linear .3s;
  3336. -o-transition: all linear .3s;
  3337. }
  3338. .ui-menu
  3339. {
  3340. position: relative;
  3341. list-style: none;
  3342. background-color: white;
  3343. border-radius: 18px;
  3344. z-index:10;
  3345. box-shadow: 5px 0px 8px white;
  3346. width: 214px;
  3347. line-height: 200%;
  3348. font-size: 18px;
  3349. padding: 15px 0;
  3350. border: solid 1px grey;
  3351. }
  3352. .ui-menu .ui-menu-item
  3353. {
  3354. margin: none;
  3355. padding-left: 15px;
  3356. padding-right:10px;
  3357. }
  3358. .typeahead li.active .dropdown-item {
  3359. color: #16181b;
  3360. text-decoration: none;
  3361. background-color: #e9ecef
  3362. }
  3363. #search-form {
  3364. position: relative;
  3365. }
  3366. .typeahead.dropdown-menu {
  3367. width: 100%;
  3368. }
  3369. .cursor-pointer {
  3370. cursor: pointer;
  3371. }
  3372. .value-color-green {
  3373. color: #1ec800 ;
  3374. font-size: 17px;
  3375. }
  3376. .privacy-part .nav-link-a:hover {
  3377. color: var(--primary);
  3378. background: var(--chalk);
  3379. }
  3380. .privacy-part .nav-link-a.active {
  3381. color: var(--primary);
  3382. background: var(--chalk);
  3383. }
  3384. .privacy-part .nav-link-a::before {
  3385. right: 15px;
  3386. }
  3387. .privacy-part .nav-link-a i {
  3388. font-size: 20px;
  3389. margin-right: 12px;
  3390. }
  3391. .privacy-part .nav-link-a.active {
  3392. color: var(--primary);
  3393. background: var(--green-chalk);
  3394. }
  3395. .certi-btn {
  3396. height: 100% !important;
  3397. line-height: 1 !important;
  3398. width: 140px !important;
  3399. border-top-left-radius: 0 !important;
  3400. border-bottom-left-radius: 0 !important;
  3401. font-size: 12px !important;
  3402. }
  3403. .spinner {
  3404. margin-right: 5px;
  3405. display: none;
  3406. }
  3407. .sso-login-btn {
  3408. border: 1px solid #ddd !important;
  3409. }
  3410. .sso-login-btn img {
  3411. width: 25px;
  3412. }
  3413. .page-pc .pay-type-content {
  3414. display:none;
  3415. padding: 25px;
  3416. margin-top:-2px;
  3417. margin-bottom: 25px;
  3418. background: #fff;
  3419. border-color: #b4bdd3;
  3420. border-radius: 8px;
  3421. border: 1px solid var(--border);
  3422. position: relative;
  3423. /*padding: 10px;
  3424. border: 2px solid #c5c7cd;
  3425. background-color: #f4f6fa;
  3426. */
  3427. }
  3428. .pay-type-sections {display:flex; flex-flow:row wrap; justify-content:space-between;}
  3429. .pay-type-sections li {width:49.5%;}
  3430. .pay-type-sections input,
  3431. .pay-type-sections select {width:100%;}
  3432. #paymethod1 {display:block;}
  3433. .cypto2-group li {width:33%;}
  3434. .pay-cypto li {width:42%;}
  3435. .pay-cypto .avail {width:15%; text-align:center;}
  3436. .pay-cypto .avail strong {display:block; margin-top: 0.5rem; line-height:45px;}
  3437. .pay-cypto .avail i {line-height:45px;}
  3438. .page-pc .virtual-account-payment-explain {
  3439. padding-top: 20px;
  3440. margin-bottom: 10px;
  3441. }
  3442. .checkout-part input {
  3443. padding: 0 3px;
  3444. }
  3445. /*.page-pc input:read-only,*/
  3446. /*.page-pc input:disabled {*/
  3447. /* padding: 0 3px;*/
  3448. /* color: black;*/
  3449. /* border-color: #e9e4e4;*/
  3450. /* background: #fff;*/
  3451. /*}*/
  3452. .page-pc .virtual-account-payment-explain dd {
  3453. display: list-item;
  3454. list-style-type: disc;
  3455. list-style-position: inside;
  3456. margin-bottom: 5px;
  3457. line-height: 15px;
  3458. color: #888;
  3459. font-size: 13px;
  3460. }
  3461. .invoice-details li p {
  3462. width: 100%;
  3463. }
  3464. #medium-modal .sort-div {
  3465. margin-right: 10px;
  3466. }
  3467. .account-content .paymethod-div {
  3468. margin-right: 20px;
  3469. }
  3470. .rounded-top-0 {
  3471. border-top-left-radius: 0!important;
  3472. border-top-right-radius: 0!important
  3473. }
  3474. .rounded-bottom-0 {
  3475. border-bottom-right-radius: 0!important;
  3476. border-bottom-left-radius: 0!important
  3477. }
  3478. .rounded-left-0 {
  3479. border-top-left-radius: 0!important;
  3480. border-bottom-left-radius: 0!important
  3481. }
  3482. .rounded-right-0 {
  3483. border-top-right-radius: 0!important;
  3484. border-bottom-right-radius: 0!important
  3485. }
  3486. .radius-r0 {border-top-right-radius:0!important; border-bottom-right-radius:0!important;}
  3487. .radius-l0 {border-top-left-radius:0!important; border-bottom-left-radius:0!important;}
  3488. .weekly-best-image,
  3489. .best-image {
  3490. width: 210px;
  3491. height: 210px;
  3492. }
  3493. .login .login_sns button {
  3494. width: 80%;
  3495. height: 55px;
  3496. margin-bottom: 8px;
  3497. text-align: center;
  3498. border: 1px solid #ddd;
  3499. background-color: white;
  3500. }
  3501. .form-text {
  3502. color: var(--text);
  3503. background: white;
  3504. border: 1px solid black;
  3505. }
  3506. .orderlist-part {
  3507. margin-bottom: 0!important;
  3508. }
  3509. .end-event {
  3510. opacity: 0.3;
  3511. }
  3512. #modal-cancel-dormant-account .btn_ok {
  3513. display:flex; align-items:center; justify-content:center;
  3514. width:100%; height:45px; border-radius:50px; max-width: 230px;
  3515. font-size: 15px !important;
  3516. }
  3517. #modal-cancel-dormant-account-success .modal-footer button,
  3518. #modal-cancel-dormant-account #dormant-cancel-btn {
  3519. background-color: #ff661b;
  3520. }
  3521. #modal-cancel-dormant-account .modal-body {
  3522. background-color: #f5f5f5;
  3523. }
  3524. #modal-cancel-dormant-account .modal-header {
  3525. position: relative;
  3526. background-color: #ff8012 !important;
  3527. display: flex;
  3528. -ms-flex-align: start;
  3529. align-items: flex-start;
  3530. -ms-flex-pack: justify;
  3531. justify-content: space-between;
  3532. padding: 0.5rem 0.938rem;
  3533. border-bottom: 1px solid rgba(0,0,0,.125);
  3534. border-top-left-radius: calc(0.3125rem - 1px);
  3535. border-top-right-radius: calc(0.3125rem - 1px);
  3536. }
  3537. .modal-header .close {
  3538. display: flex;
  3539. flex-flow: row wrap;
  3540. justify-content: center;
  3541. align-items: center;
  3542. padding: 0;
  3543. margin: 0;
  3544. background: rgb(255 255 255 / 90%);
  3545. color: #f33030!important;
  3546. border-radius: 50%;
  3547. width: 30px;
  3548. height: 30px;
  3549. }
  3550. .btn_orange {
  3551. border-color: #d57755 !important;
  3552. background: #d57755;
  3553. font-size: 1.6rem;
  3554. border-radius: 5px;
  3555. color: #fff;
  3556. }
  3557. .btn_orange:hover {
  3558. background: #cf5c33 !important;
  3559. color: #fff;
  3560. }
  3561. @media (min-width: 1400px) {
  3562. }
  3563. @media (max-width:480px) {
  3564. .page-pc .virtual-account-payment-explain dd {
  3565. line-height: 18px;
  3566. }
  3567. .pay-type-sections li {width:100%!important;}
  3568. .pay-cypto .avail {text-align:left;}
  3569. .pay-cypto .avail strong {display:inline-block; line-height: inherit; margin-bottom: 20px;}
  3570. }