common_m.css 121 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008
  1. @charset "UTF-8";
  2. /* fonts */
  3. @font-face {
  4. font-family: 'Noto Sans KR';
  5. font-style: normal;
  6. font-weight: 100;
  7. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Thin.otf") format('opentype');
  8. }
  9. @font-face {
  10. font-family: 'Noto Sans KR';
  11. font-style: normal;
  12. font-weight: 200;
  13. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Light.otf") format('opentype');
  14. }
  15. @font-face {
  16. font-family: 'Noto Sans KR';
  17. font-style: normal;
  18. font-weight: 300;
  19. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Regular.otf") format('opentype');
  20. }
  21. @font-face {
  22. font-family: 'Noto Sans KR';
  23. font-style: normal;
  24. font-weight: 500;
  25. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Medium.otf") format('opentype');
  26. }
  27. @font-face {
  28. font-family: 'Noto Sans KR';
  29. font-style: normal;
  30. font-weight: 600;
  31. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Bold.otf") format('opentype');
  32. }
  33. @font-face {
  34. font-family: 'Noto Sans KR';
  35. font-style: normal;
  36. font-weight: 900;
  37. src: url("//image.istyle24.com/Style24/ux/fonts/NotoSansKR-Black.otf") format('opentype');
  38. }
  39. /* lato */
  40. @font-face {
  41. font-family: 'LATO';
  42. src:
  43. url("//image.istyle24.com/Style24/ux/fonts/Lato-Light.eot") format('eot'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Light.woff") format('woff'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Light.ttf") format('ttf');
  44. font-weight: 200;
  45. font-style: normal;
  46. }
  47. @font-face {
  48. font-family: 'LATO';
  49. src:
  50. url("//image.istyle24.com/Style24/ux/fonts/Lato-Regular.eot") format('eot'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Regular.woff") format('woff'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Regular.ttf") format('ttf');
  51. font-weight: 300;
  52. font-style: normal;
  53. }
  54. @font-face {
  55. font-family: 'LATO';
  56. src:
  57. url("//image.istyle24.com/Style24/ux/fonts/Lato-Medium.eot") format('eot'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Medium.woff") format('woff'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Medium.ttf") format('ttf');
  58. font-weight: 500;
  59. font-style: normal;
  60. }
  61. @font-face {
  62. font-family: 'LATO';
  63. src:
  64. url("//image.istyle24.com/Style24/ux/fonts/Lato-Semibold.eot") format('eot'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Semibold.woff") format('woff'), url("//image.istyle24.com/Style24/ux/fonts/Lato-Semibold.ttf") format('ttf');
  65. font-weight: 600;
  66. font-style: normal;
  67. }
  68. #load {width: 100%;height: 100%;top: 0;left: 0;position: fixed;display: block;text-align: center;opacity: 0.8;background: #ffffff;background-image: url('//image.istyle24.com/Style24/images/mo/movloading.gif');background-repeat: no-repeat;background-position: 50% 50%;background-size: 3.7rem 2.4rem;z-index: 99999;}
  69. /* Basic setting */
  70. html {overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
  71. body {margin: 0; -webkit-overflow-scrolling: touch;}
  72. article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,address {display: block;}
  73. address {font-style: normal;}
  74. a {color: inherit;background-color: transparent;text-decoration: none;}
  75. a:active,a:hover {outline: 0;}
  76. h1,h2,h3,h4,h5 {margin: 0;font-weight: 400;}
  77. h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {color: #222222;padding: 0;margin: 0;line-height: 1;}
  78. img {border: 0;max-width: 100%;vertical-align: top;}
  79. hr {height: 0;-webkit-box-sizing: content-box;box-sizing: content-box;}
  80. button,input,optgroup,select,textarea {margin: 0;font: inherit;color: inherit;}
  81. button {overflow: visible;background: none;border: none;padding: 0;}
  82. button,select {text-transform: none;}
  83. button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
  84. button[disabled],html input[disabled] {cursor: default;pointer-events: none;}
  85. button:focus {outline: transparent;}
  86. button::-moz-focus-inner,input::-moz-focus-inner {padding: 0;border: 0;}
  87. input {line-height: normal;}
  88. input[type="checkbox"],input[type="radio"] {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0;}
  89. input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
  90. input[type="search"] {-webkit-box-sizing: content-box;box-sizing: content-box;-webkit-appearance: textfield;}
  91. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
  92. fieldset {padding: .35em .625em .75em;margin: 0 0.2rem;border: 0.1rem solid #c0c0c0;}
  93. legend {padding: 0;border: 0;}
  94. textarea {overflow: auto;}
  95. optgroup {font-weight: bold;}
  96. table {border-spacing: 0;border-collapse: collapse;}
  97. td,th {padding: 0;}
  98. ul,ol {padding: 0;margin: 0;list-style: none;}
  99. dl,dt,dd {margin: 0;}
  100. p {padding: 0;margin: 0;}
  101. i,em {font-style: normal;}
  102. .block {display:block;}
  103. .inblock {display:inline-block;*display:inline;zoom:1;}
  104. .clear {*zoom:1; clear:both;}
  105. .clear:after {content:""; display:block; clear:both;}
  106. .fr::after, .fl::after{content: '';display: block;clear: both;}
  107. .fl {float:left !important;}
  108. .fr {float:right !important;}
  109. .t_c {text-align:center !important;}
  110. .t_l {text-align:left !important;}
  111. .t_r {text-align:right !important;}
  112. .btn_center {text-align:center; margin-top:3.0rem;}
  113. .btn_right {text-align:right; margin-top:1.0rem; margin-bottom:1.5rem;}
  114. .btn_border {border-top:0.1rem solid #e1e1e1; padding-top:3.0rem;text-align:center; margin-top:3.0rem;}
  115. .bkn {background:0 none !important;}
  116. /* column*/
  117. .ui_row{width:100%; margin-left: 0 !important; margin-right: 0 !important;margin-bottom: 1.5rem;position: relative;}
  118. .ui_row [class^='ui_col_'] {min-height: 0.1rem;margin-left:0.4rem; margin-right:0.4rem;}
  119. .ui_row [class^='ui_col_']:first-child {margin-left: 0;}
  120. .ui_row [class^='ui_col_']:last-child {margin-right: 0;}
  121. .ui_col_1, .ui_col_2, .ui_col_3,
  122. .ui_col_4, .ui_col_5, .ui_col_6,
  123. .ui_col_7, .ui_col_8, .ui_col_9,
  124. .ui_col_10, .ui_col_11, .ui_col_12{
  125. position: relative;
  126. min-height: 0.1rem;
  127. }
  128. .ui_col_1, .ui_col_2, .ui_col_3,
  129. .ui_col_4, .ui_col_5, .ui_col_6,
  130. .ui_col_7, .ui_col_8, .ui_col_9,
  131. .ui_col_10, .ui_col_11, .ui_col_12 {
  132. float: left;
  133. }
  134. .ui_col_1{width:8.33333333%}
  135. .ui_col_2{width:16.66666667%}
  136. .ui_col_3{width:25%}
  137. .ui_col_4{width:33.33333333%}
  138. .ui_col_5{width:41.66666667%}
  139. .ui_col_6{width:50%}
  140. .ui_col_7{width:58.33333333%}
  141. .ui_col_8{width:66.66666667%}
  142. .ui_col_9{width:75%}
  143. .ui_col_10{width:83.33333333%}
  144. .ui_col_11{width:91.66666667%}
  145. .ui_col_12{width:100% !important;}
  146. /* font color */
  147. i {font-family:'Noto Sans kr', 'LATO', sans-serif !important; letter-spacing:0;}
  148. .base i {position:relative; top:0.1rem;}
  149. i.big {font-size:1.8rem; position:relative; top:0.2rem;}
  150. .bold {font-weight:500;} /* 중복확인 */
  151. .normal {font-weight:300;} /* 중복확인 */
  152. .light {font-weight:200;} /* 중복확인 */
  153. .ptxt01 {color:#666666;}
  154. .ptxt02 {color:#999999;}
  155. .ptxt03 {color:#333333;}
  156. .c_primary {color:#fd4802 !important;} /* 중복확인 */
  157. .c_blue{color:#2b62c2 !important}
  158. .c_pink {color:#bd484a !important;}
  159. .c_white {color:#ffffff !important;}
  160. .c_yellow {color:#f09614 !important;}
  161. .c_orange{color: #ff634c !important;}
  162. .c_green{color:#6a9913 !important;}
  163. .c_mint{color:#05B9AA !important;}
  164. .c_mint2{color:#37b4be !important;}
  165. .c_red{color:#ff0000 !important;}
  166. .c_red2{color:#f30e0e !important;}
  167. .c_black{color:#000000 !important;}
  168. .c_black2{color:#222222 !important;}
  169. .c_gray{color:#888888 !important;}
  170. .c_gray2{color:#666666 !important;}
  171. .c_ygreen{color:#5fc332 !important;}
  172. .f_size14{font-size:1.4rem;}
  173. .f_size13{font-size:1.3rem;}
  174. .f_size12{font-size:1.2rem;}
  175. .f_size10{font-size:1.0rem;}
  176. .f_normal {font-weight:normal;}
  177. /* text state */
  178. .t_muted {color: #ccd0d9 !important;}
  179. .t_req {color: #fd4802 !important;}
  180. .t_help {color: #888888 !important;}
  181. .t_info {color: #888888 !important;}
  182. .t_err {color: #fd4802 !important;}
  183. .t_err::before {content: '';display: inline-block; width:1.5rem; height:1.5rem; background:url('//image.istyle24.com/Style24/images/mo/ico_err.png') no-repeat right top;margin: 0 0.6rem 0 0;position: relative;top: 0.3rem;left: 0;right: auto;bottom: auto; background-size: 100%;}
  184. .t_success {color: #333333 !important;}
  185. /* textarea */
  186. textarea {background-color:transparent; border:0.1rem solid #d7d7d7; width:99%; overflow-y:auto;}
  187. .textarea_full {width:83.2rem; padding:1.0rem;}
  188. .textarea_md {width:65.6rem; width: 30%; height:10.8rem; padding:1.0rem; line-height:1.8rem;}
  189. .textarea_sm {width:36.0rem; width: 18%; padding:1.0rem;}
  190. .txt_cnt {text-align: right;margin-top: 1.0rem;}
  191. /* form */
  192. .form_wrap::after,
  193. .form_field:after,
  194. .input_wrap::after {content: ''; display: block; clear: both;}
  195. select,
  196. .form_full input[type="text"],
  197. .form_full input[type="select"],
  198. .form_full input[type="number"],
  199. .form_full input[type="password"]{ width: 100%;}
  200. .form_full .input_wrap,
  201. .form_full.input_wrap{display: block;}
  202. .form_col_w {width: 100%;}
  203. .form_col_c {width: 53.0rem; margin: 0 auto;}
  204. .form_field {width: 100%;margin-left: 0 !important;margin-right: 0 !important;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;}
  205. .input_wrap{position: relative;display: table;border-collapse: separate;}
  206. .input_wrap,
  207. .input_label {vertical-align: top;text-align: left;}
  208. .input_label { line-height: 3.0; font-size: 1.6rem; font-weight: 300;}
  209. .input_label span[class*="t_"]{display: inline !important;text-indent: -1.0rem;margin-left: -1.0rem;}
  210. .input_wrap .form_control,
  211. .input_group_addon,
  212. .input_group_btn {display: table-cell;float: left;}
  213. .form_control{height: 4.5rem;font-size: 1.2rem;line-height: 4.3rem;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;border: 0.1rem solid #D5D5D5;position: relative;}
  214. .form_control.err {border: 0.1rem solid #fd4802 !important; background: #fff6f2;}
  215. .usable {display: none;}
  216. .form_control.usable + .usable:before {content:'사용가능'; position:absolute; top:50%; bottom: auto; right: 2.0rem; left: auto; transform: translateY(-50%); padding-left:1.5rem; background: url('//image.istyle24.com/Style24/images/mo/ico_usable1.png') no-repeat 0 40%; color:#222; font-size:1.2rem; font-weight:200; line-height:1;}
  217. .sr-only {position: absolute!important;width: 0.1rem;height: 0.1rem;padding: 0!important;margin: -0.1rem;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
  218. /* form style */
  219. input, textarea {font-size:1.2rem; font-family:'Noto Sans KR', 'LATO', sans-serif; color:#666666; vertical-align:middle;}
  220. select{font-size:1.2rem; font-family:'Noto Sans KR', 'LATO', sans-serif; color:#666666; vertical-align:middle;}
  221. input[type="text"], input[type="password"] {padding:0 1.5rem; border:0.1rem solid #dddddd;box-sizing: border-box; -webkit-appearance: none; -webkit-border-radius: 0;}
  222. input[type="text"]:focus, input[type="password"]:focus,
  223. input[type="text"].active, input[type="password"].active {border-color: #aaaaaa;}
  224. input[type="text"]:disabled, input[type="password"]:disabled, input[type="select"]:disabled,
  225. input[type="text"]:read-only, input[type="password"]:read-only, input[type="select"]:read-only {background: #F9F9F9;border-color: #dddddd;}
  226. table input[type="text"], table input[type="password"] {padding:0.6rem 0 0.6rem 0.9rem;}
  227. input[type="checkbox"], input[type="radio"] {width:1.3rem; height:1.3rem; margin-right:0.3rem; position:relative; top:0.1rem;}
  228. input[type=search]::-webkit-search-cancel-button{display:none;}
  229. input[type="reset"], input[type="button"], input[type="submit"], button {line-height:normal !important;}
  230. .input_wrap > .btn, .input_wrap + .btn, .form_field.form_full .btn {border-color: #222222;margin-left: 1.0rem;float: left;display: inline;}
  231. .input_wrap > .btn:hover, .input_wrap > .btn:focus, .input_wrap > .btn:active, .input_wrap > .btn.active,
  232. .input_wrap + .btn:hover, .input_wrap + .btn:focus, .input_wrap + .btn:active, .input_wrap + .btn.active,
  233. .input_wrap > .open > .tgl_dropdown.btn , .input_wrap + .open > .tgl_dropdown.btn {border-color: rgb(34 34 34 / 0.6);}
  234. /* 체크박스 */
  235. .form_field input[type="checkbox"]{ position:absolute; width:0.1rem; height:0.1rem; padding:0; margin:-0.1rem; overflow:hidden; clip:rect(0,0,0,0); border:0;}
  236. .form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:2.6rem; cursor:pointer; font-size: 1.2rem; line-height: 2.0;font-weight: 300;letter-spacing: 0;text-align: right;}
  237. .form_field input[type="checkbox"] + label:before{
  238. content:''; position:absolute; left:0; top:50%; margin-top:-1.0rem; width:2.0rem; height:2.0rem; text-align:center; background:#fff; border-radius: 100%; box-sizing:border-box; background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat; background-position: 0 0;}
  239. .form_field input[type="checkbox"]:Disabled + label,
  240. .form_field input[type="radio"]:Disabled + label{cursor: default;opacity: .45;}
  241. .form_field input[type="checkbox"]:checked + label:after{content: ''; position:absolute; top:50%; margin-top:-1rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800; border-radius: 100%; box-sizing:border-box; background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat; background-position: -2rem 0;}
  242. .form_field input[type="checkbox"]:Disabled + label:after{
  243. content: ''; position:absolute; top:-1.0rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800; border-radius: 100%; box-sizing:border-box; background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat; background-position: -4rem 0;}
  244. /* 라디오 */
  245. .form_field input[type="radio"]{ position:absolute; width:0.1rem; height:0.1rem; padding:0; margin:-0.1rem; overflow:hidden; clip:rect(0,0,0,0); border:0;}
  246. .form_field input[type="radio"] + label{ display:inline-block; position:relative; padding-left:2.5rem; cursor:pointer; font-size: 1.3rem;line-height: 1.5;font-weight: 300;letter-spacing: 0;}
  247. .form_field input[type="radio"] + label:before{content:''; position:absolute; left:0; top:50%; margin-top:-1.0rem; width:2.0rem; height:2.0rem; text-align:center; background:#fff; border-radius: 100%; box-sizing:border-box; background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat; background-position: -6.0rem 0;}
  248. /* 보여질 부분의 스타일을 추가 */
  249. .form_field input[type="radio"]:checked + label:after{content: ''; position:absolute; top:50%; margin-top:-1.0rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800;background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat; background-position: -8.0rem 0; border-radius: 100%;}
  250. .form_field input[type="radio"]:Disabled + label:after{content: ''; position:absolute; top:50%; margin-top:-1.0rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800; background: url('//image.istyle24.com/Style24/images/mo/ico_chk_rdi.png') no-repeat;background-position: -10.0rem 0; border-radius: 100%;}
  251. /* 이미지 체크박스 */
  252. .chk_img+label span {border: 0.2rem solid transparent; padding: 1.0rem; box-sizing: border-box;}
  253. .chk_img:checked+label span {border: 0.2rem solid #fd481a; padding: 1.0rem; box-sizing: border-box;}
  254. /* input-File-Add */
  255. .imgUpload {position: relative;}
  256. .imgUpload::after {content: '';display: block;clear: both;}
  257. input[type="file"] {
  258. position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem;
  259. overflow: hidden; clip:rect(0,0,0,0); border: 0;
  260. }
  261. .fileAdd{
  262. width: 7.2rem;height:7.2rem;border: 0.1rem solid #dddddd;float: left;font-size: 0;
  263. background: url('//image.istyle24.com/Style24/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
  264. -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:3.0rem;
  265. }
  266. .fileAdds {
  267. padding: 1.4rem 1.0rem;font-size: 1.4rem;color: #222222;border: 0.1rem solid #dddddd;box-sizing: border-box;
  268. float: right; -webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: pointer;
  269. }
  270. .pics {
  271. display: inline !important;float: left;margin: 0 1.0rem 0 0;width: 7.2rem;height:7.2rem;
  272. border: 0.1rem solid #dddddd;box-sizing: border-box;position: relative; overflow: hidden;
  273. }
  274. .pics.mov::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(221,221,221,1) url('//image.istyle24.com/Style24/images/mo/ico_play.png') no-repeat 50% 50%; z-index:0;}
  275. .picsThumbs {
  276. width: auto;height: auto;max-height: 7.1rem;max-width:7.1rem;margin: auto 0;
  277. position: absolute;top: 50%;bottom: auto;left: 50%;right: 0;
  278. transform: translate(-50%, -50%);cursor: pointer;
  279. }
  280. .removes {
  281. display: block;width:2rem;height:2rem;font-size: 0;text-align: center;cursor: pointer;background-color: #666666;
  282. position: absolute;top: 0;bottom: auto;left: auto;right: 0; z-index: 1;
  283. }
  284. .removes::after {
  285. content: '';display: inline-block;width: 2rem;height: 2rem;
  286. background: url('//image.istyle24.com/Style24/images/mo/ico_btn_cls1.png') no-repeat;background-position: 50% 50%;
  287. background-size:2rem;
  288. }
  289. /* toggle - Share */
  290. .setShare {padding: 2rem 2rem 3.0em;position: relative;}
  291. .setShare span {display: block;text-align: center;}
  292. .setShare button {width: 4.5rem;height: 5.5rem;background: url('//image.istyle24.com/Style24/images/mo/ico_share.png') no-repeat;background-position-x: 0%;background-position-y: 0%;background-size: 23.5rem 3.33rem;position: relative;}
  293. .setShare button.kk {background-position: 0.75rem 0;}
  294. .setShare button.fb {background-position: -6.0rem 0;}
  295. .setShare button.tw {background-position: -12.5rem 0;}
  296. .setShare button.url {width: 5.0rem;background-position: -18.8rem 0;}
  297. .setShare button ~ button {margin-left: 2rem;}
  298. .setShare button span {display: block;font-size: 1.2rem;position: absolute;top: auto;bottom: -0.5rem;left: 50%;right: 50%;transform: translateX(-50%);text-align: center;margin: 0 auto;width: 100%;}
  299. /* select */
  300. .select {cursor: pointer;display: inline-block;position: relative;font-size: 1.6rem;color: #333333;width: 100%;height: 4.0rem;}
  301. .select+.select{margin-left: 1.0rem;}
  302. .select_hidden {display: none;visibility: hidden;padding-right: 1.0rem;}
  303. .select_dress {
  304. position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 1.2rem 1.5rem;
  305. background-color: #ffffff;border: 0.1rem solid #dddddd;box-sizing: border-box;
  306. -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
  307. -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
  308. }
  309. .select_dress:after {
  310. content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top: 1.6rem;right: 1.0rem;
  311. border: 0.6rem solid transparent; border-color: #888888 transparent transparent transparent;
  312. }
  313. .select_options {
  314. display: none;position: absolute;top: 100%;right: 0;left: 0;z-index: 2;
  315. margin: 0;padding: 0;list-style: none;background-color: #ffffff;
  316. box-sizing: border-box;border: 0.1rem solid #222222;border-top: 0 solid #222222;
  317. }
  318. .select_options li {
  319. margin: 0;padding: 1.2rem 0;text-indent: 1.5rem;
  320. -moz-transition: all 0.08s ease-in;-o-transition: all 0.08s ease-in;
  321. -webkit-transition: all 0.08s ease-in;transition: all 0.08s ease-in;
  322. }
  323. .select_options li:hover{background-color: #dddddd;}
  324. .select_options li[rel="hide"] {display: none;}
  325. .select_options li.disabled {text-decoration:line-through; background:#f5f5f5; color:#bbb}
  326. .select_options li.disabled:hover,
  327. .select_options li.disabled:active {cursor:default;}
  328. .select_dress:active, .select_dress.active {background-color: #ffffff;border: 0.1rem solid #222222;border-bottom: 0.1rem solid #dddddd;}
  329. .select_dress:active:after, .select_dress.active:after {top: 0.9rem;border-color: transparent transparent #888888 transparent;}
  330. /* select-pure */
  331. /* pure-setting */.select.pure select {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;outline: 0;box-shadow: none;border: 0 !important;background-image: none;}
  332. /* Remove IE arrow */.select.pure select::-ms-expand {display: none;}
  333. .select.pure {position: relative;display: flex;line-height: 3;overflow: hidden;width: 10rem;right: 0;top: 0;}
  334. .select.pure select {flex: 1;padding: 0 .5em;cursor: pointer;position: relative;box-sizing: border-box;height: 4.5rem;line-height: 1;cursor: pointer;padding: 0.5rem;background-color: #ffffff;border: 0 solid #dddddd;font-size: 1.2rem;}
  335. .select.pure::after {content: '';width: 0;height: 0;box-sizing: border-box;position: absolute;top: 2.0rem;right: 0rem;border: 0.4rem solid transparent;border-color: #222222 transparent transparent transparent;cursor: pointer;pointer-events: none;-webkit-transition: .25s all ease;-o-transition: .25s all ease;transition: .25s all ease;}
  336. .select.pure:hover::after {color: #666666;}
  337. /* select-custom */
  338. .select_custom {
  339. cursor: pointer;
  340. display: inline-block;
  341. position: relative;
  342. font-size: 1.3rem;
  343. color: #333333;
  344. width: 100%;
  345. height: 4.5rem;
  346. }
  347. .select_custom .combo {
  348. display: inline-block;
  349. position: relative;
  350. width: 100%;
  351. }
  352. .select_custom .combo .select {
  353. position: relative;
  354. box-sizing: border-box;
  355. height: 4.5rem;
  356. line-height: 1;
  357. cursor: pointer;
  358. padding: 1.5rem 1.5rem;
  359. background-color: #ffffff;
  360. border: 0.1rem solid #dddddd;
  361. }
  362. .select_custom .combo .select:after {
  363. content: '';
  364. width: 0;
  365. height: 0;
  366. box-sizing: border-box;
  367. position: absolute;
  368. top: 1.9rem;
  369. right: 1.5rem;
  370. border: 0.6rem solid transparent;
  371. border-color: #888888 transparent transparent transparent;
  372. }
  373. .select_custom.on .combo .select {
  374. border: 0.1rem solid #999999;
  375. }
  376. .select_custom.on .combo .select:after {
  377. top: 0.9rem;
  378. border-color: transparent transparent #888888 transparent;
  379. }
  380. .select_custom .combo .list {
  381. display: none;
  382. overflow-y: auto;
  383. position: absolute;
  384. top: 4.5rem;
  385. left: 0;
  386. z-index: 10;
  387. border: 0.1rem solid #999999;
  388. border-top: 0;
  389. box-sizing: border-box;
  390. width: 100%;
  391. max-height: 50.0rem;
  392. background-color: #fff;
  393. }
  394. .select_custom .combo .list::-webkit-scrollbar {
  395. width: 1.0rem;
  396. height: 0;
  397. }
  398. .select_custom .combo .list::-webkit-scrollbar-button:start:decrement,
  399. .select_custom .combo .list::-webkit-scrollbar-button:end:increment {
  400. display: block;
  401. height: 0;
  402. }
  403. .select_custom .combo .list::-webkit-scrollbar-track {
  404. background: rgba(0, 0, 0, .05);
  405. -webkit-border-radius: 1.0rem;
  406. border-radius: 1.0rem;
  407. }
  408. .select_custom .combo .list::-webkit-scrollbar-thumb {
  409. height: 5.0rem;
  410. width: 5.0rem;
  411. background: rgba(0, 0, 0, .2);
  412. -webkit-border-radius: 5.0rem;
  413. border-radius: 5.0rem;
  414. }
  415. .select_custom[disabled] {
  416. pointer-events: none;
  417. }
  418. .select_custom[disabled] .select {
  419. pointer-events: none;
  420. color: #bbb;
  421. background-color: #f5f5f5 !important;
  422. }
  423. .select_custom .combo .list>li[aria-disabled="true"] {
  424. text-decoration: line-through;
  425. background: #ffffff;
  426. color: #bbb;
  427. pointer-events: none;
  428. }
  429. .select_custom .combo .list>li[data-soldout="true"] {
  430. pointer-events: none;
  431. }
  432. .select_custom .combo .list>li[data-soldout="true"]::after {
  433. content: '품절';
  434. display: inline-block;
  435. font-size: 1.2rem;
  436. color: #bbbbbb;
  437. position: absolute;
  438. right: 1.5rem;
  439. top: 0;
  440. bottom: 0;
  441. }
  442. .select_custom .combo .list>li {
  443. box-sizing: border-box;
  444. padding: 0 1.5rem;
  445. width: 100%;
  446. height: auto;
  447. line-height: 4.5rem;
  448. cursor: pointer;
  449. position: relative;
  450. }
  451. .select_custom .combo .list>li:hover {
  452. background-color: #ccc;
  453. }
  454. /* select-custom-sup : table sub */
  455. .select_custom.sup {width: auto;width: 12rem;display: inline-block;position: absolute;right: 0rem;}
  456. .select_custom.sup .combo {display: inline-block;position: absolute;width: auto;right: 2.5rem;top: 0;}
  457. .select_custom.sup .combo .select {position: relative;box-sizing: border-box;height: 4.5rem;line-height: 1;cursor: pointer;padding: 1.5rem 1.5rem;background-color: #ffffff;border: 0 solid #dddddd;font-size: 1.2rem;}
  458. .select_custom.sup .combo .select:after {content: '';width: 0;height: 0;box-sizing: border-box;position: absolute;top: 2.0rem;right: 0rem;border: 0.4rem solid transparent;border-color: #222222 transparent transparent transparent;}
  459. .select_custom.sup.on .combo .select {border: 0.1rem solid #999999;}
  460. .select_custom.sup.on .combo .select:after {top: 0.9rem;border-color: transparent transparent #888888 transparent;}
  461. .select_custom.sup .combo .list {display: none;overflow-y: auto;position: absolute;top: 4.5rem;left: 0;z-index: 10;border: 0 solid #999999;border-top: 0;box-sizing: border-box;width: 100%;max-height: 50.0rem;background-color: #fff;font-size: 1.2rem;}
  462. .select_custom.sup .combo .list::-webkit-scrollbar {width: 1.0rem;height: 0;}
  463. .select_custom.sup .combo .list::-webkit-scrollbar-button:start:decrement,
  464. .select_custom.sup .combo .list::-webkit-scrollbar-button:end:increment {display: block;height: 0;}
  465. .select_custom.sup .combo .list::-webkit-scrollbar-track {background: rgba(0, 0, 0, .05);-webkit-border-radius: 1.0rem;border-radius: 1.0rem;}
  466. .select_custom.sup .combo .list::-webkit-scrollbar-thumb {height: 5.0rem;width: 5.0rem;background: rgba(0, 0, 0, .2);-webkit-border-radius: 0.5rem;border-radius: 0.5rem;}
  467. .select_custom[disabled].sup {pointer-events: none;}
  468. .select_custom[disabled].sup .select {pointer-events: none;color: #bbb;background-color: #f5f5f5 !important;}
  469. .select_custom.sup .combo .list>li[aria-disabled="true"] {text-decoration: line-through;background: #f5f5f5;color: #bbb;pointer-events: none;}
  470. .select_custom.sup .combo .list>li[data-soldout="true"] {pointer-events: none;}
  471. .select_custom.sup .combo .list>li[data-soldout="true"]::after {content: '품절';display: inline-block;font-size: 1.2rem;color: #bbbbbb;position: absolute;right: 1.5rem;top: 0;bottom: 0;}
  472. .select_custom.sup .combo .list>li {box-sizing: border-box;padding: 0 1.5rem;width: 100%;height: auto;line-height: 3.5rem;cursor: pointer;position: relative;}
  473. .select_custom.sup .combo .list>li:hover {background-color: #ccc;}
  474. /* TAG, Label */
  475. .tag {display: inline-block;height: 1.7rem;padding: 0rem 0.4rem;border: 0.1rem solid #ddd;color: #666;font-size: 1.1rem;font-weight: 300;text-align: center;line-height: 1.7rem;}
  476. .tag.primary {background: #fd4802;border-color: #fd4802;color: #fff;}
  477. .tag.deepgray {background: #aaa;border-color: #aaa;color: #fff !important;}
  478. .my .point .amount_plus {color: #fd4802;}
  479. /* ico */
  480. .ico {position: relative;display: inline-block; font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
  481. .ico:before {display: inline-block; background-repeat:no-repeat; background-size:contain; background-position:0% 0%; vertical-align:middle;}
  482. .btn_ico {display: inline-block;position: relative;}
  483. .btn .ico {font-size: 1.4rem;margin-right: 0.5rem;}
  484. [class^="ico_"]:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
  485. [class^="ico_content_"]::before {content:''; display:block;}
  486. .ico_logo:before {content: ""; display:block; width:18.4rem; height:2.8rem; background-image: url('//image.istyle24.com/Style24/images/mo/logo_STYLE24.png');}
  487. .ico_logo_ft:before {content: ""; display:block; width:15.0rem; height:2.3rem; background-image: url('//image.istyle24.com/Style24/images/mo/logo_STYLE24_footer.png');}
  488. .ico_search:before {content: ""; display: inline-block; width:2.2rem; height:2.6rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_sch.png');}
  489. .ico_bag:before {content: ""; display: inline-block; width:2.2rem; height:2.6rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_bag.png');}
  490. .ico_content_order::before {width:4.0rem; height: 4.6rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_order.png') no-repeat 50% 50%;}
  491. .ico_content_find::before {width:3.6rem; height: 4.6rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_find.png') no-repeat 50% 50%;}
  492. .ico_content_none::before {width:3.6rem; height: 4.6rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_none.png') no-repeat 50% 50%;}
  493. .ico_content_security::before {width:3.8rem; height: 4.3rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_security.png') no-repeat 50% 50%;}
  494. .ico_content_mail::before {width:4.8rem; height: 4.0rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_mail.png') no-repeat 50% 50%;}
  495. .ico_content_dormant::before {width:3.6rem; height: 4.6rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_dormant.png') no-repeat 50% 50%;}
  496. .ico_content_dormant2::before {width:3.6rem; height: 4.6rem; background: url('//image.istyle24.com/Style24/images/mo/ico_content_dormant2.png') no-repeat 50% 50%;}
  497. .ico_blank::before {content: ""; width:1.3rem; height:1.3rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_blank.png');}
  498. .ico_ft_arrow_r:before {content: ""; width:1.1rem; height:1.1rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_ft_arrow.png');}
  499. .ico_ft_arrow_b:before {content: ""; width:1.1rem; height:1.1rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_ft_arrow.png'); transform: rotate(90deg);}
  500. .ico_ft_arrow_t:before {content: ""; width:1.1rem; height:1.1rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_ft_arrow.png'); transform: rotate(-90deg);}
  501. .ico_kcl::before {content: ""; width:3.2rem; height:5.0rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_kcl.png');}
  502. .ico_picker::before {content: ""; width:100%; height:100%; background:url('//image.istyle24.com/Style24/images/mo/ico_picker.png') no-repeat 50% 50%;}
  503. .ico_trash::before {content: ""; width:1.3rem; height:1.6rem; background:url('//image.istyle24.com/Style24/images/mo/ico_trash.png') no-repeat 50% 50%;}
  504. .ico_like::before {content: ""; width: 1.9rem;height:1.6rem;background: url('//image.istyle24.com/Style24/images/mo/ico_like.png') no-repeat 0% 50%; background-size:cover;}
  505. .active .ico_like::before {background-position:100% 50%;}
  506. .ico_saletag::before {content: ""; width:3.6rem;height:1.6rem;background: url('//image.istyle24.com/Style24/images/mo/ico_saletag.png') no-repeat 50% 50%; background-size:cover;}
  507. .ico_calender::before {content: ""; width:1.5rem;height:1.6rem;background: url('//image.istyle24.com/Style24/images/mo/ico_calender.png') no-repeat 50% 50%; background-size:cover;}
  508. .ico_snslogin::before {content: ""; background-image: url('//image.istyle24.com/Style24/images/mo/ico_snslogin.png'); background-size:auto 100%;}
  509. .ico_snslogin.kakao::before {width:2.0rem; height:2.2rem; background-position:0 0;}
  510. .ico_snslogin.naver::before {width:1.6rem; height:2.2rem; background-position:-2.0rem 0;}
  511. .ico_snslogin.yes24::before {width:3.4rem; height:2.2rem; background-position:-3.6rem 0;}
  512. .ico_check::before {content: ""; width:1.0rem; height:0.8rem; background-image: url('//image.istyle24.com/Style24/images/mo/ico_check.png'); background-size:100% auto; margin-bottom:0.2rem;}
  513. .ico_check.black::before {content: ""; background-position:0 0;}
  514. .ico_check.red::before {content: ""; background-position:0 -0.8rem;}
  515. .ico_check.gray::before {content: ""; background-position:0 -1.6rem;}
  516. .ico_phone::before {content: ""; width:1.5rem; height:2.0rem; background:url('//image.istyle24.com/Style24/images/mo/ico_join_bg.png') no-repeat 0 0; background-size:cover;}
  517. .ico_ipin::before {content: ""; width:2.0rem; height:2.0rem; background:url('//image.istyle24.com/Style24/images/mo/ico_join_bg.png') no-repeat -2.0rem 0; background-size:cover;}
  518. /* btn : btn_default, btn_more, btn_go, btn_waiting */
  519. .btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1 !important; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 0.1rem; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer;}
  520. .btn.mini{width: auto !important; display: inline-block !important; height: 3.0rem; font-size: 1.2rem; font-weight: 300;}
  521. .btn_gost{position: relative; display: block; width: 100%; height: 5.0rem; color: #333333; border-color: #dddddd; background-color: transparent;}
  522. .btn_more{position: relative; display: block; width: 100%; height: 5.0rem; color: #888; border:0.1rem solid #999;}
  523. .btn_more::after{content: ''; position: absolute; right: -0.4rem; bottom: -0.1rem; display: block; width: 0; height: 0; border-top: 0.6rem solid none; border-bottom: 0.6rem solid #b7b7b7; border-right: 0.6rem solid transparent; border-left: 0.6rem solid transparent; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
  524. .btn_go{position: relative; display: block; width: 100%; height: 5.0rem; color: #ffffff; border:0.1rem solid #222222; background-color: #222222;}
  525. .btn_waiting{position: relative; display: block; width: 100%; height: 5.0rem; color: #cd0c0d; border:0.1rem solid #05937b;}
  526. .btn_waiting::after{content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 1.0rem; background: url("//image.istyle24.com/Style24/images/icon_download2.png") no-repeat center; background-size: 1.2rem auto;}
  527. .btn_primary{color: #ffffff; background-color: #fd4802; border-color: #fd4802;}
  528. .btn_primary_line{color: #fd4802; background-color: #fff; border-color: #fd4802;}
  529. .btn_default{color: #333333;background-color: #ffffff;border-color: #dddddd;}
  530. .btn_dark {color: #ffffff; background-color: #222222; border-color: #222222;}
  531. .btn_underline {display:inline-block; border-bottom:0.1rem solid #222; color:#222; font-size:1.4rem; line-height:1 !important;}
  532. .btnIcon_more:after,
  533. .btnIcon_brand:after,
  534. .btnIcon_detail:after{content:''; display:inline-block; margin-left:0.8rem; width:1.1rem; height:1.1rem; background-position:center center; background-repeat:no-repeat; background-size:contain; vertical-align:middle;}
  535. .btnIcon_more:after{background-image:url('//image.istyle24.com/Style24/images/mo/ico_btn_more.png');}
  536. .btnIcon_brand:after{background-image:url('//image.istyle24.com/Style24/images/mo/ico_btn_brand.png');}
  537. .btnIcon_detail:after{background-image:url('//image.istyle24.com/Style24/images/mo/ico_btn_detail.png');}
  538. /* btn hover, focus */
  539. .btn:hover, .btn:focus, .btn.focus {color: #333333;text-decoration: none;}
  540. .btn:hover, .btn:focus, .btn:active, .btn.active,
  541. .open > .tgl_dropdown.btn {background-color: rgb(255 255 255 / 0.4);border-color: rgb(221 221 221 / 0.6);}
  542. .btn:active, .btn.active {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
  543. /* btn active */
  544. .btn_default:hover, .btn_default:focus,
  545. .btn_default:active, .btn_default.active,
  546. .open > .tgl_dropdown.btn_default {background-color: #fff;border-color: #dddddd;color:#333333;}
  547. .btn_dark:hover, .btn_dark:focus,
  548. .btn_dark:active, .btn_dark.active,
  549. .open > .tgl_dropdown.btn_dark {background-color: #2f2f2f;border-color: #2f2f2f;color:#ffffff;}
  550. .btn_primary:hover, .btn_primary:focus,
  551. .btn_primary:active, .btn_primary.active,
  552. .open > .tgl_dropdown.btn_primary {background-color: #dc4308;border-color: #dc4308;color:#ffffff;}
  553. .btn_primary_line:hover, .btn_primary_line:focus,
  554. .btn_primary_line:active, .btn_primary_line.active,
  555. .open > .tgl_dropdown.btn_primary_line {background-color: #fff;border-color: #fd4802;color:#fd4802;}
  556. /* button flex */
  557. .btn_group_flex {display:flex; flex-wrap: wrap; width:100%; align-items:stretch; flex-direction:row; margin-top: 3rem;}
  558. .btn_group_flex > div {flex-basis:auto; flex-grow:1; margin:0 0.4rem; flex:1;}
  559. .btn_group_flex > div:first-child {margin-left:0;}
  560. .btn_group_flex > div:last-child {margin-right:0;}
  561. .btn_group_flex > div > .btn {display:block; width:100%; height:100%; border:0.1rem solid #a7a7a7; font-size: 1.4rem; padding:1rem 1.3rem; font-weight: 500;}
  562. .btn_group_flex > div > .btn.btn_dark {border-color:#222;}
  563. .btn_block {width: 100%;}
  564. /* Page setup */
  565. /* disable bounce effect,scrolling */
  566. html {font-family: 'LATO', 'Noto Sans kr', sans-serif;font-weight: 300;color: #222;font-size: 10px; line-height: 1.4;letter-spacing: -.025em;word-break: keep-all;}
  567. body, .app {height: calc(100% - 10px);overscroll-behavior-y: none;-webkit-overflow-scrolling: touch;}
  568. .container {overscroll-behavior-y: none;-webkit-overflow-scrolling: touch;}
  569. body.gnb_on {height: 100vh;overflow: hidden !important;}
  570. .app {height: 100vh;font-size: 1.4rem;}
  571. .skipNav {overflow: hidden;position: absolute;left: -999.9rem;width: 0;height: 0.1rem;margin: 0;padding: 0;}
  572. .inner {padding: 0 2.0rem 1.3rem 2.0rem;position: relative;}
  573. .inner.wide {padding: 0 0rem 1.3rem 0rem;position: relative;}
  574. .inner::after {content: '';display: block;clear: both;}
  575. .inner.bg_gray {background-color: #f5f5f5 !important;}
  576. .inner.bg_beige {background-color: #ffeee7 !important;}
  577. .inner.bg_dark {background-color: #222222 !important;margin-bottom: -3rem;}
  578. .inner.bg_dark .titWrap>* {color: #ffffff !important;}
  579. .inner.bg_dark .titWrap a H2{color: #ffffff !important;}
  580. /* header, htop, btn_gnb, header.main, hmenu, bng, bnb */
  581. header {
  582. position: fixed;left: 0;top: 0; width: 100%;z-index: 101;
  583. width: 100%;transition: top 0.3s; transform: translate3d(0,0,0);
  584. } /* 210526_ main.container 여백 때문에 sticky 속성. */
  585. header::after{content: '';display: block;clear: both;}
  586. header .htop {position: relative;height: 5.5rem;-webkit-box-sizing: border-box;box-sizing: border-box;/*border: rgba(0, 0, 0, 0.1) solid 0.1rem;*/ border-bottom: 0.1rem solid rgba(0, 0, 0, 0.0); background-color: #fff;}
  587. header .htop:after {content: '';display: block; clear: both;}
  588. header .htop.trans{position:absolute; background:transparent !important;}
  589. header #htopSub{top:0px;border-bottom: 0 solid #e5e5e5;box-sizing: border-box;}
  590. header #htopSubs{border-bottom: 0 solid #000000;box-sizing: border-box;}
  591. header #htopSub.my_main {background-color: #f5f5f5; border-bottom: 0.1rem solid rgba(0, 0, 0, 0.0)!important;}
  592. header .htop h1 {display: inline-block;position: relative;width:auto;max-width: calc(100% - 14.5rem);height: 5.5rem;line-height: 5.5rem;vertical-align: middle;margin: 0 0 0 2.0rem;font-size: 1.8rem;color: #222;}
  593. header .htop h1#htopTitle {display: inline-block;position: relative;max-width: 18rem;width: auto;height: 100%;line-height: 5.8rem;vertical-align: middle;padding: 0 1.5rem 0 0rem;font-size: 1.8rem;color: #222;}
  594. header .htop h1 a {height: 100%;width: 100%;display: block;}
  595. header .htop h1 img {margin: 0;width: 11.5rem;height: 1.5rem;line-height: 1.6rem;vertical-align: middle;}
  596. header .htop h1 a p{color: #222;line-height: 5.5rem;font-size: 2.0rem;height: 5.5rem;display: inline;vertical-align: middle;display: -webkit-box;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
  597. header .htop .btn_back {margin: 1.0rem 0 0 1.5rem;width: 3.5rem;height: 3.5rem; float: left;}
  598. header .htop .btn_back span {display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;}
  599. header .htop .btn_back span i {display: block;position: absolute;background: #222;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
  600. header .htop .btn_back span i.gl1 {left: -0.2rem;top: 0.7rem;width: 1.2rem;height: 0.2rem;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
  601. header .htop .btn_back span i.gl2 {left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 2.4rem;height: 0.2rem;}
  602. header .htop .btn_back span i.gl3 {left: -0.2rem;bottom: 0.7rem;width: 1.2rem;height: 0.2rem;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
  603. header .htop .btn_back:active span i {left: -2.0rem;}
  604. header .htop .button_wrap {height: 5.5rem; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
  605. header .htop .button_wrap .home {display:none;}
  606. header .htop .button_wrap .home {margin: 0 1.1666rem 0 0;}
  607. header .htop .button_wrap .home img{width: 2.0rem;}
  608. header .htop .button_wrap .search { margin:0 1.1666rem 0 1.1666rem;}
  609. header .htop .button_wrap .search img{width: 2.2rem;}
  610. header .htop .button_wrap .store{position: relative;margin: 0 0 0 1.1666rem;}
  611. header .htop .button_wrap .store img{width: 1.8rem;}
  612. header .htop .button_wrap .store img:nth-child(1) { height: 2.2rem;}
  613. header .htop .button_wrap .store span { width: 2.1rem; height: 1.4rem; position: absolute; top: -0.5rem; right: -1.0rem; background: #fd4802; border-radius: 0.8rem; font-size: 0.8rem; color: #fff; line-height: 1.6rem;}
  614. /* 210827_ 고객요청 _ 상품상세에서만 헤더 홈버튼 위치 이동 */
  615. header .htop .button_wrap.pd {position: relative; width: 78%; height: 5.5rem; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
  616. header .htop .button_wrap.pd .home {margin: 0 1.1666rem 0 1.2rem;}
  617. header .htop .button_wrap.pd .search {margin:0 1.1666rem 0 1.1666rem; position: absolute; top: auto;right: 4rem;}
  618. header .htop .button_wrap.pd .store{margin: 0 0 0 1.1666rem;position: absolute;top: auto;right: 0.0rem;}
  619. header .btn_gnb {position: absolute;top: 0;right: -3.5rem;width: 3.5rem;height: 100%;z-index: 10;}
  620. header .btn_gnb span {display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;}
  621. header .btn_gnb span i {display: block;position: absolute;left: 0;width:100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  622. header .subs .btn_gnbs {position: absolute;top: 0.8rem;right: -2.0rem;width: 3.5rem;height: 4rem;z-index: 10;}
  623. header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  624. header .subs .btn_gnbs span {display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;}
  625. header .subs .btn_gnbs span i {background: url('//image.istyle24.com/Style24/images/mo/ico_btn_more.png') no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
  626. header .subs .btn_gnbs.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
  627. header .subs .dp_list_btn_gnbs {position: absolute;top: 0;right: -2.0rem;width: 3.5rem;height: 4.5rem;z-index: 10;}
  628. header .subs .dp_list_btn_gnbs span i {display: block;position: absolute;left: 0;width: 100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  629. header .subs .dp_list_btn_gnbs span {display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;}
  630. header .subs .dp_list_btn_gnbs span i {background: url('//image.istyle24.com/Style24/images/mo/ico_btn_more.png') no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
  631. header .subs .dp_list_btn_gnbs.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
  632. header.hide {display: none;}
  633. header.main .htop {border: rgba(255, 255, 255, 0.2) solid 0;background-color: #fefefe;}
  634. header.main .htop.bright {background-color: transparent;}
  635. header.main .btn_gnb span i {background: url('//image.istyle24.com/Style24/images/mo/ico_btn_more.png') no-repeat; background-size: 1.1rem 0.63rem;background-position: 50% 50%;}
  636. header.main .btn_gnb.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
  637. header .hmenu {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;z-index: -1;}
  638. header .hmenu .inner {padding: 0;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  639. header .hmenu.on {bottom: 0;}
  640. header .hmenu.on .inner {top: 100%; position: fixed; width: 100%;}
  641. header .hmenu .scrollWrap {height: calc(100vh - 9.7rem);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto; border-bottom: 8.5rem solid #fff;}
  642. header .hmenu .bng{background: #ffffff;}
  643. header .hmenu .bng .d1 > li{position: relative;height: 7.2rem;border-bottom: 0.1rem solid #eeeeee;}
  644. header .hmenu .bng .d1 > li > a{display: block;padding: 0 2.0rem;line-height: 7.2rem;font-size: 1.8rem;font-weight: 400; font-family: 'Lato'; color: #222;}
  645. header .hmenu .bng .d1 > li > a::after{content: '';display: block; clear:both;}
  646. header .hmenu .bng .d1 > li > a span{float: right;}
  647. header .hmenu .bng .d1 > li > a span img{opacity: 0.3;max-width: 8.333rem;max-height: 4.533rem;width: auto;height: auto;vertical-align: middle;}
  648. header .hmenu .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 0.5rem; top: 1.5rem; width: 0.1rem; height: 1.2rem; background-color: #222;}
  649. header .hmenu .bng .d1 > li.folder::after{content: ''; display: block; position: absolute; right: 0; top: 2.0rem; width: 1.2rem; height: 0.1rem; background-color: #222;}
  650. header .hmenu .bng .d1 > li.folder.on::before{display: none;}
  651. header .hmenu .bng .d1 > li.folder.on::after{background-color: #9f7952;}
  652. header .hmenu .bng .d1 > li.folder.on > a{color: #9f7952;}
  653. header .hmenu .bng .d1 > li.folder.on .d2{display: block;}
  654. header .hmenu .bng .d2{display: none; border-top: #e5e5e5 solid 0.1rem; border-bottom: #e5e5e5 solid 0.1rem; padding: 2.0rem 0; height: 0;}
  655. header .hmenu .bng .d2 > li{position: relative; padding-left: 1.5rem;}
  656. header .hmenu .bng .d2 > li::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
  657. header .hmenu .bng .d2 > li > a{display: block; padding: 0.8rem 0; font-size: 1.7rem; color: #222;}
  658. header .hmenu .bng .d2 > li.folder::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
  659. header .hmenu .bng .d2 > li.folder.on::after{top: 1.6rem; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
  660. header .hmenu .bng .d2 > li.folder.on .d3{display: block;}
  661. header .hmenu .bng .d3{display: none; padding: 0 0 0 1.0rem; height: 0;}
  662. header .hmenu .bng .d3 > li{position: relative; padding-left: 1.5rem;}
  663. header .hmenu .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 0.2rem; top: 1.5rem; width: 0.4rem; height: 0.4rem; background-color: #999;}
  664. header .hmenu .bng .d3 > li > a{display: block; padding: 0.8rem 0; font-size: 1.5rem; color: #222;}
  665. header .hmenu .bnb{background-color: #f5f5f5; position: relative;}
  666. header .hmenu .bnb ul > li{position: relative;}
  667. header .hmenu .bnb ul > li::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #9f7952 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
  668. header .hmenu .bnb ul > li > a{display: block; padding: 0.8rem 0; font-size: 1.5rem; color: #9f7952;}
  669. header .hmenus {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100vw;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
  670. header .hmenus .inner {padding: 0 2.5rem;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  671. header .hmenus.on {bottom: 0;}
  672. header .hmenus.on .inner {top: 100%;}
  673. header .hmenus .scrollWrap {height: calc(100vh - 5.0rem);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;}
  674. header .hmenus .bng{background: #ffffff;}
  675. header .hmenus .bng .d1 > li{position: relative;}
  676. header .hmenus .bng .d1 > li > a{display: block; padding: 0.8rem 0; font-size: 2.8rem; font-family: 'Lato'; color: #222;}
  677. header .hmenus .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 0.5rem; top: 1.5rem; width: 0.1rem; height: 1.2rem; background-color: #222;}
  678. header .hmenus .bng .d1 > li.folder::after{content: ''; display: block; position: absolute; right: 0; top: 2.0rem; width: 1.2rem; height: 0.1rem; background-color: #222;}
  679. header .hmenus .bng .d1 > li.folder.on::before{display: none;}
  680. header .hmenus .bng .d1 > li.folder.on::after{background-color: #9f7952;}
  681. header .hmenus .bng .d1 > li.folder.on > a{color: #9f7952;}
  682. header .hmenus .bng .d1 > li.folder.on .d2{display: block;}
  683. header .hmenus .bng .d2{display: none; border-top: #e5e5e5 solid 0.1rem; border-bottom: #e5e5e5 solid 0.1rem; padding: 2.0rem 0; height: 0;}
  684. header .hmenus .bng .d2 > li{position: relative; padding-left: 1.5rem;}
  685. header .hmenus .bng .d2 > li::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
  686. header .hmenus .bng .d2 > li > a{display: block; padding: 0.8rem 0; font-size: 1.7rem; color: #222;}
  687. header .hmenus .bng .d2 > li.folder::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
  688. header .hmenus .bng .d2 > li.folder.on::after{top: 1.6rem; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
  689. header .hmenus .bng .d2 > li.folder.on .d3{display: block;}
  690. header .hmenus .bng .d3{display: none; padding: 0 0 0 1.0rem; height: 0;}
  691. header .hmenus .bng .d3 > li{position: relative; padding-left: 1.5rem;}
  692. header .hmenus .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 0.2rem; top: 1.5rem; width: 0.4rem; height: 0.4rem; background-color: #999;}
  693. header .hmenus .bng .d3 > li > a{display: block; padding: 0.8rem 0; font-size: 1.5rem; color: #222;}
  694. header .hmenus .bng{position: relative; width:100%; height:100%;background:rgba(0,0,0,.0); z-index:600;}
  695. header .hmenus .bng .lap{position:absolute; top:0; left:0; padding:0; width:100%; background:#fff;}
  696. header .hmenus .bng .nav_list{min-height:15rem; max-height:40rem; overflow-y:auto;}header .hmenus .bng .nav_list {padding:0;}
  697. header .hmenus .bng .nav ul > li .daps1{display:block; font-size:1.4rem; color:#666; font-weight:300; line-height:5rem; border-bottom:0.1rem solid #ddd;}
  698. header .hmenus .bng .nav ul > li .daps2 li > a{display:block; font-size:1.4rem; font-weight:300; color:#222; line-height:4rem;position: relative;}
  699. header .hmenus .bng .nav ul > li .daps2 li > a::after {content: '';display: inline-block;width: 2.0rem;height: 2.0rem;background: url('//image.istyle24.com/Style24/images/mo/ico_full.png') no-repeat;background-size: 0.566rem 0.933rem;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);position: absolute;right: 0.5rem;top:1.0rem;background-position: right center;}
  700. header .hmenus .bng .nav ul > li .daps2 li.on > a{color:#fd4802; font-weight:500; line-height:5rem;}
  701. header .hmenus .bnb{background-color: #f5f5f5; margin: 3.0rem -2.5rem 0 -2.5rem; padding: 3.0rem 2.5rem; position: relative;}
  702. header .hmenus .bnb ul > li{position: relative;}
  703. header .hmenus .bnb ul > li::after{content: ''; display: block; position: absolute; right: 0.2rem; top: 2.0rem; width: 1.0rem; height: 1.0rem; border: #9f7952 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
  704. header .hmenus .bnb ul > li > a{display: block; padding: 0.8rem 0; font-size: 1.5rem; color: #9f7952;}
  705. /* gnb */
  706. body.header-show .app .gnb{top: 5.0rem;}
  707. .app .gnb {position: -webkit-sticky; position: sticky; top: 0; top:5.5rem; padding-right: 3.0rem; background-color: #fefefe; z-index: 9; width: 100%;height: auto;}
  708. .app .gnb {background-color:#fefefe; position:relative; z-index:100;} /* layout_m 재확인 */
  709. .app .gnb.expand{padding-right: 3.0rem;}
  710. .app .gnb .gnb-inner{position: relative; width: 100%; padding: 0.9rem 1.0rem; overflow-x: scroll;}
  711. .app .gnb .gnb-inner::-webkit-scrollbar {display: none;}
  712. .app .gnb.expand .gnb-inner{width: 100%; overflow: unset; overflow-x: unset;}
  713. .app .gnb .gnb-inner ul{display: inline-block; white-space: nowrap;}
  714. .app .gnb.expand .gnb-inner ul{white-space: normal;}
  715. .app .gnb .gnb-inner ul li{display: inline-block; height: auto; padding: 1.0rem; line-height: 1.7rem;}
  716. .app .gnb .gnb-inner ul li a{color: #999; font-size: 1.6rem;}
  717. .app .gnb .gnb-inner ul li.on a{color: #222222;}
  718. .app .gnb .btn-expand{position: absolute; right: 0.2rem; top: 0.2rem; width: 5.0rem; height: 5.0rem;}
  719. .app .gnb .btn-expand::before{content: '';position: absolute;top: 0;left: 0;width: 3.0rem;height: 5.0rem;background: linear-gradient(90deg, rgba(254,254,254,0) 0%, #fefefe 100%);}
  720. .app .gnb .btn-expand::before{background: linear-gradient(90deg, rgba(254,254,254,0) 0%, #fefefe 100%);} /* layout_m 재확인 */
  721. .app .gnb .btn-expand::after{content: '';position: absolute;left: 50%;top: 25%;width: 1.8rem;height: 2.0rem;background: url('//image.istyle24.com/Style24/images/mo/ico_btn_expand.png') center top/1.8rem 2.0rem no-repeat;}
  722. .app .gnb.expand .btn-expand::before{display:none;}
  723. .app .gnb.expand .btn-expand::after {background: url('//image.istyle24.com/Style24/images/mo/ico_btn_narrow.png') center bottom/1.8rem 2.0rem no-repeat;}
  724. main.container{margin-top: 0; overflow: hidden;}
  725. main.container.mb {margin-top: -5.5rem;}
  726. main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;}
  727. /* 페이지별 헤더 세팅 */
  728. main.app-only section.sett, main.app-only section.notice, section.content {margin-top: 5.5rem;}
  729. section.main, section.ev_list, section.dp_exhibition, section.dp_lookbook, section.dp_outlets, section.dp_submain, section.dp_hotdeal, section.br_main, section.dp_best, section.br_lookbook {margin-top: 11rem;}
  730. /* section.main.scr, section.ev_list.scr, section.dp_exhibition.scr, section.dp_lookbook.scr, section.dp_outlets.scr, section.dp_submain.scr, section.dp_hotdeal.scr, section.br_main.scr, section.dp_best.scr, section.br_lookbook.scr {margin-top: 5.5rem;} */
  731. /* .tabbar */
  732. .tabbar{-webkit-transform: translate(0, 4.3rem);-ms-transform: translate(0, 4.3rem);-moz-transform: translate(0, 4.3rem); transform: translate(0, 4.3rem);transition-duration: 0.25s; position: fixed;width: 100%;bottom: -4.24rem;background-color: #f8f8f8;z-index: 100; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
  733. /* .tabbar.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);} */
  734. .tabbar.fixed{bottom: 4.25rem; -webkit-transform: translate(0, 4.3rem);}
  735. .tabbar .tabbar-inner{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify;-moz-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; padding: 0.6rem 2.0rem;}
  736. .tabbar .tabbar-inner [class*=btn-]{display: block;width: 4.2rem; height: 3.0666rem; font-size: 0;position: relative;background: url('//image.istyle24.com/Style24/images/mo/ico_tabbar.png') no-repeat center;background-size: 18.0rem 2.16rem;padding: 0rem 1rem;}
  737. .tabbar .tabbar-inner [class*=btn-]:after{content: ''; display: block;padding: 3.5rem;margin: -0.5rem -2.5rem;}
  738. .tabbar .tabbar-inner [class*=btn-].btn-menu{background-position: 0.5rem;}
  739. .tabbar .tabbar-inner [class*=btn-].btn-my{background-position: -3.2rem;}
  740. .tabbar .tabbar-inner [class*=btn-].btn-home{background-position: -6.7rem;}
  741. .tabbar .tabbar-inner [class*=btn-].btn-wish{background-position: -10.5rem;}
  742. .tabbar .tabbar-inner [class*=btn-].btn-history{background-position: -14rem;}
  743. .tabbar + footer .btn_top,.tabbar + footer .btn_back { bottom:1.4rem;}
  744. .tabbar.fixed + footer .btn_top,.tabbar.fixed + footer .btn_back {bottom: calc(env(safe-area-inset-bottom) + 5.5rem);bottom: clac(constant(safe-area-inset-bottom) + 5.5rem);}
  745. /* Full메뉴 */
  746. #menuFull{width: 100%;height: 0;z-index: 999;visibility: hidden;background: rgba(255, 255, 255, 1);transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;}
  747. #menuFull.on{ height: 100%; visibility: visible; top: 0;}
  748. .menu_cls {position: absolute;top: 1.8rem;right: 2.0rem;display: block;width: 1.6rem;height: 1.6rem;text-indent: -999.9rem;background-size: contain;background-repeat: no-repeat;background-position: center center;z-index: 98;background-image: url('//image.istyle24.com/Style24/images/mo/ico_pop_cls.png');}
  749. .appSett {position: absolute;top: 1.6rem;right: 5.5rem;display: block;width: 2.0rem;height: 2.0rem;text-indent: -999.9rem;background-size: contain;background-repeat: no-repeat;background-position: center center;z-index: 98;background-image: url('//image.istyle24.com/Style24/images/mo/ico_app_setting.png');}
  750. .fullHead {height: 5.2rem;}
  751. .fullHead .goHome {display: inline-block;width: auto;padding:2.4rem 2rem;}
  752. .fullHead a {display: inline-block;}
  753. .fullHead img {width: 10.666rem; height:1.6rem;}
  754. .fullBody {background:#ffffff;min-height: calc(100% - 5.2rem);max-height: calc(100% - 5.2rem); padding-bottom: 4.2rem; overflow-y: scroll;}
  755. .fullBody .inner {background:#ffffff;margin:0;padding:0;}
  756. .fullBody .inner .flow{display: inline-block;width: 100%;height: 100%;vertical-align: top;padding:2.5rem 0;}
  757. .fullBody .fullCate::after{content: '';display: block;width: 100%;height: 1.2rem;background-color: #f5f5f5;}
  758. .fullBody .inner .flow li{width:49.0%;height:3.1333rem;line-height:3.1333rem;padding:0 0 0 2rem;border: 0;box-sizing: border-box;text-align: left;display: inline-block;}
  759. .fullBody .inner .flow li a{width: 100%; height:auto; display:block;}
  760. .fullBody .inner .flow span{font-size: 1.333rem;color: #666666;}
  761. .fullBody .inner:last-child .btn_group{position: fixed;bottom: 0;left: auto; right: auto;}
  762. .fullBody .btn_group {margin: 0;}
  763. .fullBody .btn_group div {margin:0;position: relative;}
  764. .fullBody .btn_group div button{border: 0;background: #f5f5f5;font-size: 1.2rem;}
  765. .fullBody .btn_group div button span{width: 100%;}
  766. .fullBody .btn_group div:first-child button::after{content: '';display: inline-block;width: 0.3rem;height: 2.0rem;background: #dddddd;position: absolute;top: 1.0rem;right: -0.2rem;}
  767. /* Full메뉴_카테고리 */
  768. .fullBody .fullCate > li > ul {display: none; background: #f5f5f5;}
  769. .fullBody .fullCate > li > a {position:relative;display: block; padding:1.6rem 2.0rem; font-size: 1.4rem; font-weight: 400;font-family: 'Noto Sans kr', sans-serif;}
  770. .fullBody .fullCate > li > a::after {content: '';display: inline-block;width: 2.0rem;height: 2.0rem;background: url('//image.istyle24.com/Style24/images/mo/ico_full.png') no-repeat;background-size: 0.8rem 1.4rem;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);position: absolute;right: 1.2rem;background-position: left center;}
  771. .fullBody .fullCate > li > a:active span {color: #fd4802; border-bottom: 0.1rem solid #fd4802;}
  772. .fullBody .fullCate > li.hasCate > a::after {right: 1.8rem;background: url('//image.istyle24.com/Style24/images/mo/ico_full.png') no-repeat;background-position: center;background-size: 0.8rem 1.4rem;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}
  773. .fullBody .fullCate > li.hasCate > a.on {font-size: 1.4rem; color: #fd4802;}
  774. .fullBody .fullCate > li.hasCate > a.on span {border-bottom: 0.1rem solid #fd4802;}
  775. .fullBody .fullCate > li.hasCate > a.on::after {background: url('//image.istyle24.com/Style24/images/mo/ico_full_on.png') no-repeat;background-size: 1.4rem 0.8rem; background-position: center;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
  776. .fullBody .fullCate > li.hasCate > ul {padding: 1.5rem 0;}
  777. .fullBody .fullCate > li.hasCate > ul > li > a {display: block; font-size: 1.3rem; color: #888; padding:0.87rem 4.3rem;}
  778. .fullBody .fullCate > li.hasCate > ul > li > a:hover span {color: #fd4802; border-bottom: 0.1rem solid #fd4802;}
  779. .fullBody .quick_cate_txt {border-top: 0.1rem solid #ddd; padding:3.0rem;}
  780. .fullBody .quick_cate_txt a {display: inline-block; position: relative; font-size: 1.4rem; color: #888; margin-right: 2.0rem;}
  781. .fullBody .quick_cate_txt a:after {content:''; position: absolute; top: 0.2rem; right: -1.2rem; width: 0.1rem; height: 0.8rem; background: #ddd;}
  782. .fullBody .quick_cate_txt a:last-child:after {display: none;}
  783. /* Full메뉴_최근본상품 */
  784. #hstrFull{width: 100%;height: 0;z-index: 999;visibility: hidden;background: rgba(255, 255, 255, 1);transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;}
  785. #hstrFull.on{ height: 100%; visibility: visible; top: 0;}
  786. .hstr_cls {position: absolute;top: 1.4rem;right: 2.0rem;display: block;width: 2.0rem;height: 2.0rem;text-indent: -999.9rem;background-size: contain;background-repeat: no-repeat;background-position: center center;z-index: 98;background-image: url('//image.istyle24.com/Style24/images/mo/ico_pop_cls.png');}
  787. #hstrFull .fullHead h1 {display: inline-block;position: relative;max-width: calc(100% - 14.5rem);width: auto;height: 100%;line-height: 5.2rem;vertical-align: middle;padding: 0 1.5rem 0 0rem;margin: 0 0 0 2.0rem;font-size: 1.8rem;color: #222;}
  788. #hstrFull .fullBody .count_wrap {padding: 2rem 0;}
  789. #hstrFull .fullBody .count_wrap p{font-size: 1.2rem;color: #888;}
  790. #hstrFull .fullBody .count_wrap p span {color: #fd4802;font-weight: 600;}
  791. #hstrFull .fullBody .inner {padding: 0 2.0rem 1.3rem 2.0rem;position: relative;}
  792. #hstrFull .fullBody .list_content.nodata .lookbookGrp, #hstrFull .fullBody .list_content.nodata .itemsGrp, #hstrFull .fullBody .list_content.nodata .list_item, #hstrFull .fullBody .list_content.nodata .list_last, #hstrFull .fullBody .list_content.nodata .count_wrap {display: none;}
  793. #hstrFull .fullBody .list_content.nodata .list_defult {display: block;}
  794. #hstrFull .fullBody .list_content .list_defult {display: none;text-align: center;padding: 11rem 0;}
  795. #hstrFull .fullBody .list_content .list_defult p {text-align: center;font-size: 1.3rem;color: #888888;font-weight: 300;}
  796. #hstrFull .fullBody .itemsGrp .item_prod {width: 48.75%;float: left;margin-right: 2.5%;margin-bottom: 0rem;}
  797. #hstrFull .fullBody .itemsGrp .item_prod:nth-child(2n){margin-right: 0;}
  798. #hstrFull .fullBody .itemsGrp:after {display: block;content: '';clear: both;}
  799. /* footer */
  800. footer{background-color: #f1f1f1;}
  801. footer .btn_top{position: fixed; bottom: 9%; right: 2.0rem; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 4.1rem; height: 4.0rem; font-size: 0; z-index: 499; background:url('//image.istyle24.com/Style24/images/mo/mo_btn_top.png') no-repeat;}
  802. footer .btn_top span{display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;opacity: 1;color: #222222;font-size: 1.1rem;font-weight: 600;line-height: 3.4rem;letter-spacing: -0.025em;}
  803. footer .btn_back{position: fixed; bottom: 9%; left: 2.0rem; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 4.1rem; height: 4.0rem; font-size: 0; z-index: 499; background:url('//image.istyle24.com/Style24/images/mo/mo_btn_back.png') no-repeat; bottom: calc(env(safe-area-inset-bottom) + 6.5rem);}
  804. footer .btn_back span{display: block;width: 2.4rem;height: 2.4rem;margin: 0 0.6rem;position: relative;opacity: 1;color: #222222;font-size: 1.1rem;font-weight: 600;line-height: 3.4rem;letter-spacing: -0.025em; text-indent:-999rem;}
  805. footer .f1{background-color: #f1f1f1;padding: 0 0 4.5rem; position: relative;}
  806. footer .f1 .inner{padding: 0 2.0rem 2.0rem;}
  807. footer .f1 .link{padding-top: 2.0rem;}
  808. footer .f1 .link::after{content: ''; display: block; clear: both;}
  809. footer .f1 .link > li{float: left; position: relative; padding: 0 1.2rem;}
  810. footer .f1 .link > li::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0.2rem; height: 1.4rem; background-color: #e3e3e3;}
  811. footer .f1 .link > li:first-child{padding-left: 0;}
  812. footer .f1 .link > li:first-child::before{display: none;}
  813. footer .f1 .link > li.fn{clear: both; padding-left: 0;}
  814. footer .f1 .link > li.fn::before{display: none;}
  815. footer .f1 .link > li a{display: block; padding: 0.5rem 0; color: #222; font-size: 1.3rem; font-weight: 200;}
  816. footer .f1 .wider > li{padding: 0 1.5rem;}
  817. footer .f1 .wider > li a{color: #666; font-weight: 300; font-size: 1.5rem;}
  818. footer .f1 .info::after{content: ''; display: block; clear: both;}
  819. footer .f1 .info > li{float: left; position: relative; padding: 0.5rem 0.4rem; color: #666; font-size: 1.5rem; font-weight: 200;}
  820. footer .f1 .info > li:first-child::before{display: none;}
  821. footer .f1 .info > li.fn{clear: both; padding-left: 0;}
  822. footer .f1 .info > li.fn::before{display: none;}
  823. footer .f1 .copy{font-weight: 100; font-size: 1.2rem; color: #888888; padding-top: 1.0rem; letter-spacing: -0.025rem;}
  824. footer .f1 .sns{font-size: 0; padding-top: 2.0rem;}
  825. footer .f1 .sns::after{content: ''; display: block; clear: both;}
  826. footer .f1 .sns > li{float: left; margin-left: 1.0rem;}
  827. footer .f1 .sns > li:first-child{margin-left: 0;}
  828. footer .f1 .sns > li > a{display: block; width: 2.5rem; height: 2.5rem; border-radius: 0%;}
  829. footer .f1 .sns > li > a.insta{background: #fff url("//image.istyle24.com/Style24/images/mo/ico_ft_insta.png") 50% 50% no-repeat; background-size: auto 2.5rem;}
  830. footer .f1 .sns > li > a.facebook{background: #fff url("//image.istyle24.com/Style24/images/mo/ico_ft_facebook.png") 50% 50% no-repeat; background-size: auto 2.5rem;}
  831. footer .collapse{position: relative; border-bottom: 0.1rem solid #dadada;}
  832. footer .collapse .btnWrap .btn_infos{position: relative; width: 100%; height: 6.7rem; background-color: #f1f1f1; font-size: 1.5rem; font-weight: 400; text-align: left; color: #222;}
  833. footer .collapse .btnWrap .btn_infos::after{content: ''; display: inline-block; margin-left: 1.0rem; margin-bottom: 0; width: 1.4rem; height: 0.8rem; background: #f1f1f1 url('//image.istyle24.com/Style24/images/mo/ico_fold_arrow1.png') 50% 0% no-repeat; background-size: 1.4rem; /* background-size: auto 3.9rem; */ -webkit-transform: rotate(180deg); transform: rotate(180deg);}
  834. footer .collapse .btnWrap .btn_infos.on::after{margin-bottom: 0; -webkit-transform: rotate(0); transform: rotate(0);}
  835. footer .collapse .infos{width: 100%; height: 0; overflow: hidden;-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
  836. footer .collapse .infos::after{content: ''; display: block; clear: both;}
  837. footer .collapse .infos > li{float: left; position: relative; padding: 0.5rem 0.4rem; color: #666; font-size: 1.2rem; font-weight: 200;}
  838. footer .collapse .infos > li.fn{clear: both; padding-left: 0;}
  839. footer .collapse .infos.on{padding: 0 0 2.0rem 0; height: 20.2rem}
  840. /* sub page slide nav */
  841. .lnb{padding: 1.46rem 2.0rem 1.0rem 2.0rem; border-bottom: 0.1rem solid #e5e5e5; box-sizing: border-box;}
  842. .lnb .swiper-wrapper{transform: translate3d(0, 0, 0);}
  843. .lnb ul > li{width: auto; text-align: center;}
  844. .lnb ul > li button,
  845. .lnb ul > li a{padding: 1.46rem 0.5rem 1.3rem 0.5rem; position: relative;}
  846. .lnb ul > li.on button,
  847. .lnb ul > li.on a{color: #fd4802;}
  848. .lnb ul > li.on button::after,
  849. .lnb ul > li.on a::after{content: ''; display: block; width: 100%; height: 0.3rem; background-color: #fd4802; color: #fd4802; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translate(-50%);}
  850. /* category nav : Collection */
  851. .cnb{background-color: #f5f5f5; padding: 0 2.5rem;}
  852. .cnb.folder{position: relative; height: 5.0rem; overflow: hidden; display: block;}
  853. .cnb.folder.on .btn_cnb::before{content: ''; width: 0; height: 0; display: none;}
  854. .cnb.folder.on .btn_cnb::after{top: 2.0rem; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
  855. .cnb.folder.on .tit{display: block;}
  856. .cnb.folder.on ul{width: 100%; display: block; height: 100%;}
  857. .cnb.folder.on{display: table; padding: 0 2.5rem 1.0rem; -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}
  858. .cnb .tit{display: none; padding-top: 1.5rem; font-size: 1.7rem; font-weight: 600;}
  859. .cnb .btn_cnb{position: absolute; top: 0.8rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; z-index: 9;}
  860. .cnb .btn_cnb::before{content: ''; width: 7.0rem; height: 7.0rem; position: absolute; right: -2.0rem; top: -1.0rem; background: #ffffff; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffffff), color-stop(50%, #ffffff)); background: linear-gradient(to right, white 50%, white 50%); box-shadow: -3.5rem 0 2.0rem rgba(255, 255, 255, 0.9); -moz-box-shadow: -3.5rem 0 2.0rem rgba(255, 255, 255, 0.9); -webkit-box-shadow: -3.5rem 0 2.0rem rgba(255, 255, 255, 0.9);}
  861. .cnb .btn_cnb::after{content: ''; display: block; position: absolute; left: 1.2rem; top: 1.5rem; width: 1.0rem; height: 1.0rem; border: #222 solid; border-width: 0.2rem 0.2rem 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
  862. .cnb ul{width: -webkit-max-content; width: -moz-max-content; width: max-content;}
  863. .cnb ul::after{content: ''; display: block; clear: both;}
  864. .cnb ul > li{float: left; margin: 1.0rem 1.0rem 0 0;}
  865. .cnb ul > li button{background-color: #fff; padding: 0.5rem 1.0rem; color: #666; border-radius: 10.0rem; font-size: 1.5rem;}
  866. .cnb ul > li button.on{background-color: #3d3d3d; color: #fff;}
  867. /* page nav */
  868. .pnb {margin-top: 5.5rem;}
  869. .pnb + section {margin-top: 0;}
  870. .pnb ul{border-bottom: 0.1rem solid #e5e5e5;}
  871. .pnb ul::after{content: ''; display: block; clear: both;}
  872. .pnb ul > li{float: left; width: auto; padding: 0 1.6rem;}
  873. .pnb ul > li:first-child{padding: 0 1.6rem 0 1.0rem;}
  874. .pnb ul > li a{display: block; width: 100%; padding: 1.46rem 0 1.3rem 0; text-align: center; position: relative;}
  875. .pnb ul > li a.on{color: #fd4802;}
  876. .pnb ul > li a.on::after{content: ''; display: block; width: 100%; height: 0.3rem; background-color: #fd4802; color: #fd4802; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translate(-50%);}
  877. .pnb ul > li a.prev{color: #666; font-size: 1.4rem;}
  878. .pnb ul > li a.prev::before{content: ''; display: block; position: absolute; left: 20%; top: 50%; width: 0.6rem; height: 0.6rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg);}
  879. .pnb ul > li a.next{color: #666; font-size: 1.4rem;}
  880. .pnb ul > li a.next::before{content: ''; display: block; position: absolute; right: 20%; top: 50%; width: 0.6rem; height: 0.6rem; border: #666 solid; border-width: 0.1rem 0.1rem 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
  881. .pnb ul > li a.list{color: #9f7952; font-weight: 600; font-size: 1.5rem;}
  882. .pnb ul > li a.list::before{content: ''; display: block; position: absolute; left: 20%; top: 50%; width: 1.2rem; height: 0.6rem; border: #9f7952 solid; border-width: 0.2rem 0 0.2rem 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
  883. /* AD area (광고 문구 또는 배너) */
  884. .ADwrap {padding: 0.5rem 0 1.5rem 0rem;}
  885. .ADwrap .adcopy {font-weight: 400;margin-top: 1.5rem;display: inline-block;} /* my_review 참고 */
  886. /* Mesage Custom */
  887. .once {padding: 2.33rem 2.0rem;background: #ffffff;}
  888. .alert {padding: 1.5rem;border: 0.1rem solid transparent; border-radius: 0.4rem;margin-bottom: 1.0rem;line-height: 2.1rem; background-color: #dddddd;color: #666666;border-color: #dddddd;}
  889. button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background: 0 0;border: 0;}
  890. .alertCls {float: right;font-size: 2.1rem;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 0.1rem 0 #fff;filter: alpha(opacity=20);opacity: .2;}
  891. .alertCls:hover, .alertCls:focus {color: #000;text-decoration: none;cursor: pointer;filter: alpha(opacity=50);opacity: .5;}
  892. /* module setup */
  893. /* .imgWrap */
  894. .imgWrap{position: relative;}
  895. .imgWrap .btn_play{position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 3.2rem; font-size: 0; background-color: rgba(0, 0, 0, 0.5);}
  896. .imgWrap .btn_play::before{content: ''; display: block; position: absolute; left: 1.2rem; top: 1.0rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.8rem solid none; border-left: 0.8rem solid #fff;}
  897. .txt_counter{padding-top: 3.0rem; font-size: 1.4rem;}
  898. .txt_counter em{color: #9f7952;}
  899. .noData{height: 50vh; font-size: 2.0rem; text-align: center;}
  900. .noData::before{content: ''; display: block; background: url("//image.istyle24.com/Style24/images/icon_nodata.png") no-repeat 50% 50%; background-size: 7.5rem auto; height: 20.0rem;}
  901. /* titWrap, .tit */
  902. .titWrap{padding: 2.0rem 0 0 0; text-align: center; font-size: 1.8rem;}
  903. .tit{font-size: 1.4rem; font-weight: 400; color: #222222;}
  904. .exp{font-size: 1.1rem; font-weight: 200; color: #666666;}
  905. .list1 > li{font-size: 1.5rem; position: relative; padding-left: 0.8rem; -webkit-box-sizing: border-box; box-sizing: border-box;}
  906. .list1 > li::after{content: ''; display: block; clear: both;}
  907. .list1 > li::before{content: ''; display: block; position: absolute; left: 0; top: 0.5em; width: 0.3rem; height: 0.3rem; background-color: #666;}
  908. .list_col2::after{content: ''; display: block; clear: both;}
  909. .list_col2 > li{float: left; width: 50%;}
  910. .list_col3::after{content: ''; display: block; clear: both;}
  911. .list_col3 > li{float: left; width: 33.33%;}
  912. .txt_ref{margin-top: 1.5rem;padding-left: 1.5rem;font-size: 1.1rem;color: #666;font-weight: 200;position: relative;}
  913. .txt_ref::before{content: '※'; display: block; position: absolute; left: 0; top: 0;}
  914. .txt_blt{padding-left: 0.8rem; position: relative;}
  915. .txt_blt::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0.3rem; height: 0.3rem; background-color: #666;}
  916. /* Tab */
  917. .tabIndex {width: 100%; box-sizing: border-box;-webkit-box-sizing: border-box;display: inline-flex;justify-content: space-around;}
  918. .tabIndex:after {content: "";clear: both;display: table;}
  919. .tabIndex {background: #ffffff;border-bottom: 0.1rem solid #e5e5e5;}
  920. .tabIndex li {float: left;flex: auto;text-align: center;}
  921. .tabIndex li a {display: block;color:#222222; font-weight: 400; padding: 1.0rem 2.0vw;}
  922. .tabIndex li.active a {border-bottom: 0.3rem solid #fd4802; color: #fd4802;}
  923. .tab_cont {width: 100%;height:100%; background: #f5f5f5;text-align: left;box-sizing: border-box;}
  924. .tab_cont .inner {margin-bottom: 2.3rem;}
  925. .tab_cont {display: none;}
  926. .tab_cont.active {display: block;}
  927. /* table title */
  928. .tbltitWrap{margin-top: 3.0rem;}
  929. .tbltitWrap::after{content: ''; display: block; clear: both;}
  930. .tbltitWrap h2{float: left; padding: 0 !important; font-size: 2.4rem;}
  931. .tbltitWrap h3{float: left; font-size: 1.7rem;}
  932. .tbltitWrap .exp{float: right; padding-top: 0.5rem; font-size: 1.4rem; color: #888;}
  933. .tbltitWrap h2 + .exp{padding-top: 1.4rem !important;}
  934. /* table */
  935. .tblWrap{margin-top: 1.0rem;}
  936. .tblWrap + .tblWrap{margin-top: 3.0rem;}
  937. .tblWrap table{width: 100%; border-top:0.1rem solid #222;}
  938. .tblWrap table tr th, .tblWrap table tr td{border-left: 0.1rem solid #e5e5e5; border-bottom:0.1rem solid #e5e5e5; padding: 1.4rem 0.5rem; text-align: center; color: #666; font-size: 1.5rem;}
  939. .tblWrap table tr th:first-child, .tblWrap table tr td:first-child{border-left: none;}
  940. .tblWrap table tr th.tL, .tblWrap table tr td.tL{text-align: left;}
  941. .tblWrap table tr th.tR, .tblWrap table tr td.tR{text-align: left;}
  942. .tblWrap table tr th strong, .tblWrap table tr td strong{font-weight: 400;color: #222;}
  943. .tblWrap table tr th.lB, .tblWrap table tr td.lB{border-bottom: none;}
  944. .tblWrap table tr.sum th, .tblWrap table tr.sum td{color: #222; font-weight: 400;}
  945. .tblWrap table tr.sum2 th, .tblWrap table tr.sum2 td{color: #fd4802;}
  946. .tblWrap table tr.lB th, .tblWrap table tr.lB td{border-bottom: none;}
  947. .tblWrap table thead th, .tblWrap table thead td{font-weight: 400;color: #222;}
  948. /* 테이블 type1 수평 행,열별 구분선 없음 */
  949. .tbl.type1 {padding:1.5rem 0; border-top:0.1rem solid #000; border-bottom:0.1rem solid #ddd;}
  950. .tbl.type1 table {text-align:left; word-break:keep-all;}
  951. .tbl.type1 table th,
  952. .tbl.type1 table td {position:relative; /*padding:1.0rem 4.0rem;*/ font-weight:200; font-size:1.6rem; letter-spacing:-0.025em;}
  953. .tbl.type1 table th {padding:1.0rem 0rem 1.0rem 4.0rem; font-weight:300;}
  954. .tbl.type1 table td {padding:1.0rem 4.0rem 1.0rem 0rem;}
  955. /* 테이블 type2 - 수직형 행,열별 구분선 있음 */
  956. .tbl.type2 {padding:0; border-top:0.1rem solid #000;}
  957. .tbl.type2 table {word-break:keep-all;}
  958. .tbl.type2 table th,
  959. .tbl.type2 table td {position:relative; padding:2.0rem 0; border-bottom:0.1rem solid #ddd; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; text-align:center;}
  960. .tbl.type2 table th {font-weight:500;}
  961. /* 테이블 type3 - 결제정보 (구 버전) */
  962. .tbl.type3 {padding:0; border:0.1rem solid #000;}
  963. .tbl.type3 table {word-break:keep-all;}
  964. .tbl.type3 table th,
  965. .tbl.type3 table td {position:relative; padding:2.5rem 4.0rem; border-bottom:0.1rem solid #ddd; border-left:0.1rem solid #ddd; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; text-align:left; vertical-align:top;}
  966. .tbl.type3 table th {font-weight:300;}
  967. .tbl.type3 table tr:last-child td {border-bottom:none;}
  968. /* 테이블 type4 - 수평 th 컬러구분 */
  969. .tbl.type4 table {border-top:0.1rem solid #000;}
  970. .tbl.type4 table th,
  971. .tbl.type4 table td {padding-top:2.5rem; padding-bottom:2.5rem; border-bottom:0.1rem solid #ddd; font-size:1.6rem; letter-spacing:-0.05rem; text-align:center;}
  972. .tbl.type4 table th {background:#f5f5f5; color:#222; font-weight:500;}
  973. .tbl.type4 table td {position:relative; font-weight:200;}
  974. /* 테이블 type5 - 수직형 행,열별, th구분선 있음 */
  975. .tbl.type5 {padding:0; border-top:0.1rem solid #000;}
  976. .tbl.type5 table {word-break:keep-all;}
  977. .tbl.type5 table th,
  978. .tbl.type5 table td {position:relative; padding:2.0rem 0; font-size:1.3rem; letter-spacing:0; text-align:center;}
  979. .tbl.type5 table td {border-bottom:0.1rem solid #ddd; font-weight:300;font-size:1.2rem;}
  980. .tbl.type5 table th {border-bottom:0.1rem solid #000; font-weight:500;font-size:1.3rem;}
  981. /* 테이블 type6 - 결제정보 (신 버전) */
  982. .tbl.type6 {padding:3.5rem 0; border-top:0.1rem solid #000; border-bottom:0.1rem solid #ddd;}
  983. .tbl.type6 table {text-align:left; word-break:keep-all;}
  984. .tbl.type6 table th,
  985. .tbl.type6 table td {position:relative; padding:0rem 4.0rem; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; border-left:0.1rem dashed #ddd; vertical-align:top;}
  986. .tbl.type6 table th {font-weight:500;}
  987. .tbl.type6 table tr td:first-child {border-left:none;}
  988. .tbl.type6 table tr td dl::after,
  989. .tbl.type6 table tr td dl > div::after {content: '';display: block;clear: both;}
  990. .tbl.type6 table tr td > dl {margin-top:2.0rem;}
  991. .tbl.type6 table tr td > dl:first-child {margin-top:0rem;}
  992. .tbl.type6 table td dl dt {float:left; font-size:1.6rem; font-weight:300; color:#222;}
  993. .tbl.type6 table td dl dd {float:right; font-size:1.5rem; font-weight:200; color:#222;}
  994. .tbl.type6 table td dl dd em {font-size:1.6rem;}
  995. .tbl.type6 table td dl dd .btn.btn_sm {height:3.4rem; margin-top:-0.8rem; margin-left:1.0rem; padding:1.0rem 1.4rem; font-size:1.4rem;}
  996. .tbl.type6 table td dl dd .btn.btn_sm:first-child {margin-left:0;}
  997. .tbl.type6 table td dl dd .btn.btn_sm span {vertical-align:top; font-weight:200; line-height:1;}
  998. .tbl.type6 table td dl dd .btn.btn_sm.btn_default {color:#222; border:0.1rem solid #a7a7a7;}
  999. .tbl.type6 table td dl .price {font-size:2.2rem; font-weight:700;}
  1000. .tbl.type6 table td dl .price em {font-size:2.4rem;}
  1001. .tbl.type6 table td dl .price .oder_total_price {color:#222;}
  1002. .tbl.type6 table td dl .price .pay_total_price {color:#fd4802;}
  1003. .tbl.type6 table td dl .price .return_total_price {color:#fd4802;}
  1004. .tbl.type6 table td dl .save_point {position:relative; padding-left:2.2rem;}
  1005. .tbl.type6 table td dl .save_point::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.6rem; height:1.6rem; background:url('//image.istyle24.com/Style24/images/pc/ico_point.png') no-repeat 0 50%;}
  1006. .tbl.type6 table td dl > div {margin-top:2.0rem;}
  1007. .tbl.type6 table td dl > div:first-child {margin-top:0rem;}
  1008. .tbl.type6 table td dl > div.include_item dt {padding-left:1.5rem; background:url('//image.istyle24.com/Style24/images/pc/ico_bracket2.png') no-repeat 0 50%;}
  1009. /* 테이블 내용 나열 폼 */
  1010. .tbl th,
  1011. .tbl td {vertical-align:top;}
  1012. .tbl td .single_line::after {content:''; clear:both; display:block;}
  1013. .tbl td .single_line ul li {float:left; position:relative; padding:0rem 1.5rem; margin:0;}
  1014. .tbl td .single_line ul li::before {content:''; position:absolute; width:0.1rem; height:1.4rem; left:0rem; top:50%; transform:translateY(-50%); background:#ddd;}
  1015. .tbl td .single_line ul li:first-child {padding-left:0;}
  1016. .tbl td .single_line ul li:first-child::before {display:none;}
  1017. .tbl td .single_line ul li > span {margin-right:0;}
  1018. .tbl td .block_line {position:relative;}
  1019. .tbl td .block_line ul li {margin-top:0.5rem; height:1.625em;}
  1020. .tbl td .block_line ul li:first-child {margin-top:0;}
  1021. .tbl td .block_line ul li > span {vertical-align:top;}
  1022. .tbl td .block_line ul li .tag {margin-left:0.6rem; margin-top:0.2rem; vertical-align:top;}
  1023. .tbl td .block_line ul li .btn.btn_sm {height:3.4rem; margin-top:-0.6rem; padding:1.0rem 1.4rem; font-size:1.4rem; font-weight:200;}
  1024. /* fold-list : list_cate */
  1025. .list_cate{margin: 0 -2.5rem; padding: 5.0rem 2.5rem 0 2.5rem; border-bottom: #e5e5e5 solid 0.1rem;}
  1026. .list_cate > li{border-top:0.1rem solid #e5e5e5; margin: 0 -2.5rem; padding: 0 2.5rem; position: relative;}
  1027. .list_cate > li::after{content: ''; display: block; position: absolute; right: 2.5rem; top: 3.0rem; width: 1.0rem; height: 1.0rem; border: #222 solid; border-width: 0.2rem 0.2rem 0 0; transform: translateY(-50%) rotate(135deg);}
  1028. .list_cate > li.on::after{top: 3.5rem; border: #666 solid; border-width: 0.2rem 0.2rem 0 0; transform: translateY(-50%) rotate(-45deg);}
  1029. .list_cate > li dl > dt button {width: 100%; padding: 2.0rem 0; text-align: left; font-size: 1.6rem; font-weight: 400; line-height: 1.4;}
  1030. .list_cate > li dl > dd{margin: 0 -2.5rem; padding: 0 2.5rem; box-sizing: border-box; height: 0; overflow: hidden; background-color: #f5f5f5; border-top: 0.1rem solid transparent;}
  1031. .list_cate > li.on dl > dd{height: auto; padding-bottom: 3.0rem; border-top: 0.1rem solid #666;}
  1032. .list_cate > li dl > dd .tit{padding-top: 3.0rem; font-size: 1.4rem; line-height: 1.5;}
  1033. .list_cate > li dl > dd ol li{margin-top: 1.5rem; font-size: 1.4rem; position: relative; padding-left: 0.8rem;}
  1034. .list_cate .imgWrap {position: relative;}
  1035. .list_cate .imgWrap::after {content: ''; display: block; clear: both;}
  1036. .list_cate .imgWrap span{display: inline !important; float: left; margin: 0 1.0rem 0 0; width: 7.0rem; height: 7.0rem;background: #ffffff; border: 0.1rem solid #dddddd; box-sizing: border-box; position: relative;}
  1037. .list_cate .imgWrap img{width: auto; height: auto; max-height: 6.8rem; max-width: 6.8rem; margin: auto 0; position: absolute; top: 50%; bottom: auto; left: 50%; right: 0; transform: translate(-50%, -50%); cursor: pointer;}
  1038. /* folding Group */
  1039. .foldGroup {width: 100%; margin-bottom: 2.0rem;}
  1040. .foldGroup > ul > li {position: relative; width: 100%; margin: 0; border: 0; border-top: 0.1rem solid #dddddd; border-bottom: 0.1rem solid #dddddd; box-sizing: border-box;}
  1041. .foldGroup > ul > li:first-child {border-top: 0.1rem solid #fff;}
  1042. .foldGroup > ul > li+li {margin:0; border-top:0 solid; box-sizing:border-box;}
  1043. .foldGroup .fold_head,
  1044. .foldGroup .fold_foot,
  1045. .foldGroup .fold_cont {width:100%;}
  1046. .foldGroup .fold_cont {display:none; padding: 0; position: relative; color:#000; font-weight:200; font-size:1.4rem; line-height:1.625;}
  1047. .foldGroup .fold_head {position: relative; width:100%; border-bottom: 0;}
  1048. .foldGroup .fold_head a {display:block; width:inherit; height:100%; padding:1.4rem 2rem; box-sizing:border-box;}
  1049. .foldGroup.case2 .fold_answer{padding-top:1.8rem;}
  1050. .fold_head {padding: 0; border-bottom: 0.1rem solid transparent;}
  1051. .fold_head::after {content: ''; position: absolute; display: inline-block; top:50%; left: auto; right:2.0rem; transform: translateY(-50%); width:1.3rem; height:0.7rem; background: url('//image.istyle24.com/Style24/images/mo/ico_fold_arrow1.png'); background-repeat: no-repeat; background-position: 0 100%; background-size: cover;}
  1052. .fold_head.on::after {background-repeat: no-repeat; background-position:0 0%;}
  1053. .fold_head a::after ,
  1054. .fold_head a div::after,
  1055. .fold_head .fold_tit::after {content: ''; display: block; clear: both;}
  1056. .fold_head .fold_tit {position:relative;}
  1057. .fold_head .fold_tit span { position: relative; height: auto; display:inline-block; font-size:1.3rem; font-weight:300; color: #222; text-decoration: none; letter-spacing:-0.025em;}
  1058. .fold_head .fold_tit span.prod{font-size:1.2rem; font-weight:200; color: #888; /*white-space:nowrap; text-overflow:ellipsis; overflow:hidden;*/}
  1059. .fold_head .fold_state {display:inline-block!important; width:auto; box-sizing:border-box; text-align: center; font-size:1.2rem; font-weight: 300; color:#888;}
  1060. .fold_head .fold_state .important {display:inline-block; position:relative; padding:0.2rem 1.0rem; background-color: #fd4802; color:#fff; font-size:1.4rem; font-weight:300; padding:0.4rem 1.0rem 0.2rem;}
  1061. .fold_head .fold_state.fix {color:#222;}
  1062. .fold_head .fold_state.done {color:#fff; background-color:#fd4801;}
  1063. .fold_head .fold_state.doing {color:#fff; background-color:#aaa;}
  1064. .fold_head .fold_category {width:10.0rem; font-weight:200; text-align:center; color:#888;}
  1065. .fold_head .data,
  1066. .fold_head .id{font-size:1.2rem; font-weight: 200; color:#888;}
  1067. .fold_head .id{position:relative; padding-right:1rem; margin-right:1rem;}
  1068. .fold_head .id:after{display:block; content:''; position:absolute; right:0; top:0.2rem; width:0.1rem; height:0.8rem; background-color:#dddddd;}
  1069. .fold_cont > div:first-of-type {border-top:none;}
  1070. .fold_cont .img_group .thumb_pic {position:relative; display:inline-block; width:7.4rem; height:7.4rem; border:0.1rem solid #ddd; margin-right:0.4rem; box-sizing:border-box; overflow:hidden;}
  1071. .fold_cont .img_group .thumb_pic img {position:absolute; top:50%; transform: translateY(-50%); width:100%; height: auto;}
  1072. .fold_cont .fold_detail,
  1073. .fold_cont .fold_answer {position:relative; padding:1.8rem 2rem;}
  1074. .fold_cont .fold_answer {border-top:0.1rem solid #ddd;}
  1075. .fold_cont .fold_detail .btn {margin-top:2.5rem; padding:0.6rem 1.3rem; color:#222; border-color:#a1a1a1; font-size:1.2rem; font-weight:200; background:none;}
  1076. .fold_cont .fold_detail .img_group {margin-top: 2.4rem; overflow: hidden;}
  1077. .fold_cont .fold_answer > div {position:relative;}
  1078. .fold_detail,
  1079. .fold_answer{background:#f5f5f5;}
  1080. .fold_answer .data, .fold_detail .data{font-size:1.2rem; font-weight: 200; color:#888;}
  1081. .fold_answer div.answer_head{color:#222; font-weight:300;}
  1082. .fold_answer .answer_body{font-weight:200;}
  1083. .fold_answer .answer_foot{position:relative;}
  1084. .fold_answer .btn_delete, .fold_detail .btn_delete{position:absolute; right:0; bottom:0; font-size:1.2rem; color:#777;}
  1085. .fold_answer .btn_delete > span, .fold_detail .btn_delete > span{position:relative; display:inline-block;}
  1086. .fold_answer .btn_delete > span:after, .fold_detail .btn_delete > span:after{display:block; content: ''; position:absolute; left:0; bottom:-0.2rem; width:100%; height:0.1rem; background-color:#777777;}
  1087. .fold_head .fold_state{padding:0.3rem 0.5rem; margin-right:0.5rem;}
  1088. .fold_head .prod{padding:0.3rem 0;}
  1089. .fold_head .fold_state{background-color:#000; color:#fff;}
  1090. .fold_head .fold_tit > div{padding-right:3rem;}
  1091. .fold_head .fold_tit > div.lap1{margin-bottom:0.3rem;/* display:flex;*/}
  1092. .fold_head .fold_tit > div.lap2{margin-bottom:0.3rem;/* white-space:nowrap; text-overflow:ellipsis; overflow:hidden;*/}
  1093. .case1 .fold_head .prod{padding-bottom:0;}
  1094. .case1 .fold_head .prod{padding-left:0;}
  1095. .case2 .fold_head::after{margin-top:-1.0rem;}
  1096. .case2 .fold_cont .fold_detail > div,
  1097. .case2 .fold_cont .fold_answer > div{position:relative; padding-left:1.7rem;}
  1098. .case2 .fold_cont .fold_detail > div:before,
  1099. .case2 .fold_cont .fold_answer > div:before{content:''; position:absolute; left:0; top:0; font-size:1.4rem; font-weight:400;}
  1100. .case2 .fold_cont .fold_detail > div:before{content:'Q.'; color:#222222;}
  1101. .case2 .fold_cont .fold_answer > div:before{content:'A.'; color:#fd4802;}
  1102. /* popover style Tooltip */
  1103. .tip_tit{background-color: transparent;border-radius: 100%;border: 0.1rem solid #888888;color: #fd4802;cursor: default;display: inline-block;font-size: 1.2rem;font-weight: 600;line-height: 1.4rem;position: relative;text-align: center;width: 1.5rem;height: 1.5rem;}
  1104. .tip_wrap {position: relative;display: inline-block;}
  1105. .tip_contents {width: auto;opacity: 0;visibility: hidden;position: absolute;transform: scale(.6) translateX(-45%) translateY(90%);color:#888888;border: 0.1rem solid #ffe4d9;background-color: #fff6f2;padding: 1.5rem;}
  1106. .tip_contents:before {position: absolute;z-index: -1;content: "";right: calc(50% - 1.0rem);top: -0.8rem;border-style: solid;border-width: 0 1.0rem 1.0rem 1.0rem;border-color: transparent transparent #fff6f2 transparent;transition-duration: 0.3s;transition-property: transform;}
  1107. .tip_contents:after, .tip_contents:before {transform: scale(1) translateY(0);}
  1108. .tip_contents:after, .tip_contents:before {bottom: 100%;left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
  1109. .tip_contents:after {border-color: rgba(255, 246, 242, 0);border-bottom-color: #fff6f2;border-width: 1.0rem;margin-left: -1.0rem;}
  1110. .tip_contents:before {border-color: rgba(255, 228, 217, 0);border-bottom-color: #ffe4d9;border-width: 1.1rem;margin-left: -1.1rem;top: -2.2rem;}
  1111. .tip_wrap:hover .tip_contents {z-index: 10;opacity: 1;visibility: visible;transform: translate(-45%, 1.0rem);transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);}
  1112. .tip_txt {text-align: center;min-width: 20.0rem;}
  1113. /* bottom popup */
  1114. .btPop_full {background: #ffffff;width: 100%;height: 100%;/* height: auto; */margin: 0;padding: 0;transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;text-align: left;z-index: 999;}
  1115. .btPop_full .btPop_head {padding: 2.0rem;border-bottom: 0.1rem solid #ddd;font-size:1.8rem;position: relative;}
  1116. .btPop_full .btPop_body {padding: 2.0rem;font-size:1.4rem;}
  1117. .btPop {background: #ffffff;width: 100%;height: 100%;/* height: 100% */margin: 0;padding: 0;transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;text-align: left;z-index: 999;}
  1118. .btPop .btPop_head {padding: 2.0rem;border-bottom: 0.1rem solid #ddd;font-size:1.8rem;position: relative;}
  1119. .btPop .btPop_body {padding: 2.0rem;font-size:1.4rem;/*max-height: 24rem;*/overflow-x: hidden;overflow-y: auto;}
  1120. .container .btPop_full .btPop_full_close,
  1121. .container .btPop .btPop_close{transition: all 10ms ease;opacity: 0;}
  1122. .container.btPop_full_open .btPop_full {top: 0;/* top: auto; */top: 5.5rem;}
  1123. .container.btPop_full_open .btPop_full .btPop_full_close,
  1124. .container.btPop_open .btPop .btPop_close{
  1125. opacity: 1;position: absolute;z-index: 98;
  1126. top:-3.8rem;left:50%;transform: translate(-50%);display:block;border: 0;
  1127. width:2.7rem;height:2.7rem;text-indent:-999.9rem;background-size:1.6rem;
  1128. background-repeat:no-repeat;background-position:center center;
  1129. background-image: url('//image.istyle24.com/Style24/images/mo/ico_pop_cls.png');background-color: transparent;
  1130. padding: 2rem;
  1131. }
  1132. .container.btPop_open .btPop {top: 0;/* top: auto; top: 55%;*/}
  1133. .container.btPop_full_open::after,
  1134. .container.btPop_open::after {
  1135. content: '';width: 100%;height: 100%;display: inline-block;
  1136. background: #333;opacity: 0.7;position: absolute;top: 0;left: 0;z-index: 82;
  1137. }
  1138. /* ALERT, CONFIRM Plugin custom */
  1139. .dialog-mobile-bg {
  1140. position: fixed;
  1141. top: 0;
  1142. left: 0;
  1143. z-index: 1000;
  1144. width: 100%;
  1145. height: 100%;
  1146. background-color: rgba(0, 0, 0, 0.3);
  1147. -ms-transform: translate3d(0, 0, 0);
  1148. -webkit-transform: translate3d(0, 0, 0);
  1149. transform: translate3d(0, 0, 0);
  1150. }
  1151. /*alert confirm*/
  1152. .dialog-mobile {
  1153. padding: 0;
  1154. margin-left: -45%;
  1155. text-align:center;
  1156. position: fixed;
  1157. top: 50%;
  1158. left: 0;
  1159. z-index: 1001;
  1160. width: 90%;
  1161. background-color: rgba(255, 255, 255,1);
  1162. border-radius: 0;
  1163. -ms-transform: translate3d(0, 0, 0);
  1164. -webkit-transform: translate3d(0, 0, 0);
  1165. transform: translate3d(0, 0, 0);
  1166. }
  1167. /*
  1168. .dialog-mobile {
  1169. box-shadow: 0 0 3.0rem rgb(0 0 0 / 20%), 0 0 3.0rem rgb(0 0 0 / 20%);
  1170. mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
  1171. -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
  1172. mask-size: 86.6072% 0%, 6.3% 13.3%, 93.7% 100%, 100% 86.5%;
  1173. -webkit-mask-size: 86.6072% 0%, 6.3% 13.3%, 93.7% 100%, 100% 86.5%;
  1174. mask-position: bottom left, bottom right, top left, top right;
  1175. -webkit-mask-position: bottom left, bottom right, top left, top right;
  1176. mask-repeat: no-repeat;
  1177. -webkit-mask-repeat: no-repeat;
  1178. }
  1179. */
  1180. .dialog-mobile .dialog-title {
  1181. padding: 0.8em 1em 0.5em;
  1182. text-align: center;
  1183. color: #333333;
  1184. font-size: 1.8rem;
  1185. font-weight: 400;
  1186. border-radius: 0.5rem 0.5rem 0 0;
  1187. }
  1188. .dialog-mobile .dialog-content {
  1189. position: relative;
  1190. padding:5.0rem 2.0rem 4.0rem 2.0rem;
  1191. line-height: 2em;
  1192. text-align: left;
  1193. color: #333333;
  1194. font-size:1.4rem;
  1195. text-align:center;
  1196. }
  1197. .dialog-mobile .dialog-content em {
  1198. color:#df6400
  1199. }
  1200. .dialog-mobile .dialog-button,
  1201. .dialog-mobile .dialog-sure-button,
  1202. .dialog-mobile .dialog-cancel-button {
  1203. display:inline-block;
  1204. position: relative;
  1205. margin:0;
  1206. padding:0;
  1207. width: 100%;
  1208. height: 3.8rem;
  1209. line-height: 3.8rem;
  1210. text-align: center;
  1211. font-size:1.4rem;
  1212. font-weight: 200;
  1213. cursor:pointer;
  1214. border-radius:0rem;
  1215. }
  1216. .dialog-mobile .dialog-button{
  1217. color: #fff;
  1218. background:#000;
  1219. border:0.1rem solid #000;
  1220. min-width:10.0rem;
  1221. }
  1222. .dialog-mobile .dialog-cancel-button {
  1223. color: #000;
  1224. background: #fff;
  1225. border:0;
  1226. border-top:0.1rem solid #dddddd;
  1227. /* min-width:10.0rem; */
  1228. }
  1229. .dialog-mobile .dialog-sure-button{
  1230. color: #fff;
  1231. background:#000;
  1232. border:0.1rem solid #000;
  1233. /* min-width:10.0rem; */
  1234. }
  1235. .dialog-mobile button[i='1']{
  1236. color: #000 !important;
  1237. background:#fff !important;
  1238. border: 0;
  1239. border-top: 0.1rem solid #dddddd;
  1240. /* border:0.1rem solid #777; */
  1241. /* min-width:10.0rem; */
  1242. }
  1243. .dialog-mobile button[class$='-button']:nth-last-child(2){width: 50%;}
  1244. .dialog-mobile button[class$='-button'] + button[class$='-button']{width: 50%;}
  1245. /* alert 투명도 */
  1246. .dialog-mobile.trans {
  1247. padding: 0 1.2rem 2.5rem 1.2rem;
  1248. margin-left: -45%;
  1249. text-align:center;
  1250. position: fixed;
  1251. top: 50%;
  1252. left: auto;
  1253. right: auto;
  1254. z-index: 1001;
  1255. min-width:13.3rem;
  1256. max-width: 90%;
  1257. background-color: rgb(14 14 14 / 0.8);
  1258. border-radius: 0;
  1259. -ms-transform: translate3d(0, 0, 0);
  1260. -webkit-transform: translate3d(0, 0, 0);
  1261. transform: translate3d(0, 0, 0);
  1262. }
  1263. .dialog-mobile.trans .dialog-title {
  1264. padding: 0em 1em 0.5em;
  1265. text-align: center;
  1266. color: #ffffff;
  1267. font-size: 1.6rem;
  1268. font-weight: 200;
  1269. border-radius: 0.5rem 0.5rem 0 0;
  1270. }
  1271. .dialog-mobile.trans .dialog-content {
  1272. position: relative;
  1273. padding:2.5rem 0 0rem 0;
  1274. line-height: 2em;
  1275. text-align: left;
  1276. color: #ffffff;
  1277. font-size:1.4rem;
  1278. text-align:center;
  1279. }
  1280. .dialog-mobile.trans .dialog-content em {
  1281. color:#df6400
  1282. }
  1283. .dialog-mobile.trans .dialog-button,
  1284. .dialog-mobile.trans .dialog-sure-button,
  1285. .dialog-mobile.trans .dialog-cancel-button {
  1286. display:inline-block;
  1287. position: relative;
  1288. margin:0 0.5rem;
  1289. padding:0 3.0rem;
  1290. min-width: 7.0rem;
  1291. height: 3.8rem;
  1292. line-height: 3.8rem;
  1293. text-align: center;
  1294. font-size:1.4rem;
  1295. font-weight: 200;
  1296. cursor:pointer;
  1297. border-radius:0rem;
  1298. }
  1299. .dialog-mobile.trans .dialog-button{
  1300. color: #fff;
  1301. background: transparent;
  1302. border: 0.1rem solid #dddddd;
  1303. min-width:10.0rem;
  1304. width: auto;
  1305. }
  1306. .dialog-mobile.trans .dialog-cancel-button {
  1307. color: #fff;
  1308. background: transparent;
  1309. border: 0.1rem solid #dddddd;
  1310. min-width:10.0rem;
  1311. width: auto;
  1312. }
  1313. .dialog-mobile.trans .dialog-sure-button{
  1314. color: #fff;
  1315. background: transparent;
  1316. border: 0.1rem solid #dddddd;
  1317. min-width:10.0rem;
  1318. width: auto;
  1319. }
  1320. .dialog-mobile.trans button[i='1']{
  1321. color: #000 !important;
  1322. background:#fff !important;
  1323. border:0.1rem solid #777;
  1324. min-width:10.0rem;
  1325. width: auto;
  1326. }
  1327. /* 닫기 아이콘 */
  1328. .dialog-close-btn {
  1329. display: none;
  1330. position:absolute;
  1331. top:0;
  1332. right:0;
  1333. padding:2.0rem;
  1334. /* padding:25rem 16rem; */
  1335. width: 1.5rem;
  1336. height: 1.5rem;
  1337. cursor:pointer;
  1338. background:url('//image.istyle24.com/Style24/images/mo/ico_pop_cls.png') no-repeat 50% 50%;
  1339. background-size: 1.5rem;
  1340. }
  1341. /*bottom dialog*/
  1342. .dialog-mobile-bottom {
  1343. position: fixed;
  1344. left: 0;
  1345. bottom: 0;
  1346. z-index: 10001;
  1347. width: 100%;
  1348. color: #333333;
  1349. background-color: #EEEEEE;
  1350. }
  1351. .dialog-mobile-bottom .bottom-btn-item {
  1352. text-align: center;
  1353. }
  1354. .bottom-btn-item .dialog-item-btn {
  1355. background: #FFFFFF;
  1356. padding: 0.5em 0;
  1357. border-bottom: 0.1rem solid #EEEEEE;
  1358. }
  1359. .bottom-btn-item .dialog-item-btn:last-child {
  1360. border-bottom: none;
  1361. }
  1362. .dialog-mobile-bottom .dialog-cancel-btn {
  1363. margin-top: 0.6em;
  1364. text-align: center;
  1365. background: #FFFFFF;
  1366. padding: 0.5em 0;
  1367. }
  1368. /*toast*/
  1369. .dialog-mobile-toast {
  1370. position: fixed;
  1371. bottom: 5em;
  1372. }
  1373. .dialog-mobile-toast .toast-content {
  1374. padding: 0.5em 1em;
  1375. color: #FFFFFF;
  1376. border-radius: 0.2rem;
  1377. background-color: #333333;
  1378. }
  1379. /*loading*/
  1380. .mobile-loading-bg {
  1381. position: fixed;
  1382. top: 0;
  1383. left: 0;
  1384. z-index: 10000;
  1385. width: 100%;
  1386. height: 100%;
  1387. background-color: rgba(0, 0, 0, 0.3);
  1388. -webkit-transform: translate3d(0, 0, 0);
  1389. transform: translate3d(0, 0, 0);
  1390. }
  1391. .mobile-loading {
  1392. position: fixed;
  1393. top: 0;
  1394. left: 0;
  1395. z-index: 10001;
  1396. min-width: 2em;
  1397. min-height: 2em;
  1398. padding: 0.8em 1.6em;
  1399. text-align: center;
  1400. border-radius: 0.2rem;
  1401. color: #FFFFF0;
  1402. background-color: #0A0A0A;
  1403. -webkit-transform: translate3d(0, 0, 0);
  1404. transform: translate3d(0, 0, 0);
  1405. }
  1406. /*animation*/
  1407. .animation-zoom-in, .animation-zoom-out,
  1408. .animation-bottom-in, .animation-bottom-out,
  1409. .animation-bg-fadeIn {
  1410. -webkit-animation-duration: 0.3s;
  1411. -webkit-animation-fill-mode: both;
  1412. animation-duration: 0.3s;
  1413. animation-fill-mode: both;
  1414. }
  1415. .animation-fade-in, .animation-fade-out {
  1416. -webkit-animation-duration: 1s;
  1417. -webkit-animation-timing-function: ease-out;
  1418. -webkit-animation-fill-mode: both;
  1419. animation-duration: 1s;
  1420. animation-timing-function: ease-out;
  1421. animation-fill-mode: both;
  1422. }
  1423. .animation-zoom-in {
  1424. -webkit-animation-name: zoomIn;
  1425. animation-name: zoomIn;
  1426. }
  1427. .animation-zoom-out {
  1428. -webkit-animation-name: zoomOut;
  1429. animation-name: zoomOut;
  1430. }
  1431. .animation-fade-in {
  1432. -webkit-animation-name: fadeIn;
  1433. animation-name: fadeIn;
  1434. }
  1435. .animation-fade-out {
  1436. -webkit-animation-name: fadeOut;
  1437. animation-name: fadeOut;
  1438. }
  1439. .animation-bottom-in {
  1440. -webkit-animation-name: bottomIn;
  1441. animation-name: bottomIn;
  1442. }
  1443. .animation-bottom-out {
  1444. -webkit-animation-name: bottomOut;
  1445. animation-name: bottomOut;
  1446. }
  1447. .animation-bg-fadeIn {
  1448. -webkit-animation-name: fadeIn;
  1449. animation-name: fadeIn;
  1450. }
  1451. @-webkit-keyframes zoomIn {
  1452. from{
  1453. opacity: 0;
  1454. -webkit-transform: scale(0, 0);
  1455. }
  1456. to{
  1457. opacity: 1;
  1458. -webkit-transform: scale(1, 1);
  1459. }
  1460. }
  1461. @-webkit-keyframes zoomOut {
  1462. from{
  1463. opacity: 1;
  1464. -webkit-transform: scale(1, 1);
  1465. }
  1466. 90%{
  1467. -webkit-transform: scale(0.3, 0.3);
  1468. }
  1469. to{
  1470. opacity: 0;
  1471. -webkit-transform: scale(0, 0);
  1472. }
  1473. }
  1474. @keyframes zoomIn {
  1475. from{
  1476. opacity: 0;
  1477. transform: scale(0, 0);
  1478. }
  1479. to{
  1480. opacity: 1;
  1481. transform: scale(1, 1);
  1482. }
  1483. }
  1484. @keyframes zoomOut {
  1485. from{
  1486. opacity: 1;
  1487. transform: scale(1, 1);
  1488. }
  1489. 90%{
  1490. transform: scale(0.3, 0.3);
  1491. }
  1492. to{
  1493. opacity: 0;
  1494. transform: scale(0, 0);
  1495. }
  1496. }
  1497. @-webkit-keyframes fadeIn {
  1498. from{
  1499. opacity: 0;
  1500. }
  1501. to{
  1502. opacity: 1;
  1503. }
  1504. }
  1505. @-webkit-keyframes fadeOut {
  1506. from{
  1507. opacity: 1;
  1508. }
  1509. 30%{
  1510. opacity: 0.3;
  1511. }
  1512. to{
  1513. opacity: 0;
  1514. }
  1515. }
  1516. @keyframes fadeIn {
  1517. from{
  1518. opacity: 0;
  1519. }
  1520. to{
  1521. opacity: 1;
  1522. }
  1523. }
  1524. @keyframes fadeOut {
  1525. from{
  1526. opacity: 1;
  1527. }
  1528. 30%{
  1529. opacity: 0.3;
  1530. }
  1531. to{
  1532. opacity: 0;
  1533. }
  1534. }
  1535. @-webkit-keyframes bottomIn {
  1536. from{
  1537. bottom: -100.0rem;
  1538. }
  1539. to{
  1540. bottom: 0;
  1541. }
  1542. }
  1543. @-webkit-keyframes bottomOut {
  1544. from{
  1545. bottom: 0;
  1546. }
  1547. to{
  1548. bottom: -100.0rem;
  1549. }
  1550. }
  1551. @keyframes bottomIn {
  1552. from{
  1553. bottom: -100.0rem;
  1554. }
  1555. to{
  1556. bottom: 0;
  1557. }
  1558. }
  1559. @keyframes bottomOut {
  1560. from{
  1561. bottom: 0;
  1562. }
  1563. to{
  1564. bottom: -100.0rem;
  1565. }
  1566. }
  1567. /* .popWrap, .popup */
  1568. .popWrap{position: relative; height: 100%; padding: 3.0rem 0; background-color: #fff;}
  1569. .popup{display: none; position: fixed; left: 0; top: 5.5rem; width: 100%; height: auto; background-color: #ffffff; padding: 0; z-index: 80;overscroll-behavior-y: none;}
  1570. .popup::before{content: ''; display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);}
  1571. .popup .btn_popClose{position: absolute; top: -4.5rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; background-color: black; z-index: 10;}
  1572. .popup .btn_popClose span{display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto; position: relative;}
  1573. .popup .btn_popClose span i{display: block; position: absolute; left: 0; top: 1.0rem; width: 2.4rem; height: 0.2rem; background: #fff; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
  1574. .popup .btn_popClose span i.gl1{-webkit-transform: rotate(45deg); transform: rotate(45deg);}
  1575. .popup .btn_popClose span i.gl2{-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
  1576. /* modal */
  1577. /* modal popup */
  1578. .blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:999;padding:0;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center;}
  1579. .blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
  1580. .blocker.behind{background-color:transparent;}
  1581. .modal{display:none; vertical-align:middle;position:relative;z-index:2;max-width:96.0rem;box-sizing:border-box;width:90%;background:#fff;padding:0;text-align:left; -webkit-box-shadow:0 0 1.0rem #000;-moz-box-shadow:0 0 1.0rem #000;-o-box-shadow:0 0 1.0rem #000;-ms-box-shadow:0 0 1.0rem #000;box-shadow:0 0 1.0rem #000;overscroll-behavior-y: none;}
  1582. .modal a.close-modal{position: absolute;top:2.4rem;right:2.1rem;display:block;width:1.7rem;height:1.7rem;text-indent:-999.9rem;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg=='); z-index: 98; background-image: url('//image.istyle24.com/Style24/images/mo/ico_pop_cls.png');}
  1583. .modal .modal-header{margin-top: 0;margin-bottom: 0; padding: 2.4rem 1.88rem 2.0rem;}
  1584. .modal .modal-header > *{font-size: 1.7rem;font-weight: 400;}
  1585. .modal .modal-body{box-sizing: border-box; padding: 0rem 1.33rem;}
  1586. .modal .modal-body .pop_cont{overflow: auto;max-height: 45.0rem; font-size: 1.6rem; line-height: 1.62; font-weight: 200; color:#666;overscroll-behavior-y: none;}
  1587. .modal .modal-body .fx_r {position: fixed;right: 0;top: auto;bottom: auto;left: auto;}
  1588. .modal .modal-footer{margin-top: 3.0rem;}
  1589. .modal .modal-footer .btn{width: 100%; border-width: 0;}
  1590. .modal.pop_full {width: 100%; max-width: 100%; height: 100%; padding: 0; overflow: auto; position: relative;}
  1591. .modal.pop_full .modal-header {width: 100%;height:5.2rem;box-sizing: border-box;border-bottom: 0.1rem solid #dddddd;z-index:98;position: fixed;top: 0;left: 0;bottom: auto;right: auto;background: #fff;padding: 1.6rem 1.33rem 1.6rem 1.33rem;}
  1592. /* .modal.pop_full .modal-header .modal-title {padding: 4.0rem 0 0 3.7rem;} */
  1593. .modal.pop_full .modal-body{margin-top: 6.7rem;}
  1594. .modal.pop_full .modal-body .pop_cont{max-height: 100%;}
  1595. .modal.pop_full a.close-modal {position: fixed;top: 1.6rem;}
  1596. .modal.pop_fullCol { width: 100%; max-width: 100%;padding: 0; position: relative;}
  1597. .modal.pop_fullCol .modal-header{width: 100%;height: 5.2rem;box-sizing: border-box;border-bottom: 0.1rem solid #dddddd;z-index:98;position: fixed;top: 0;left: 0;bottom: auto;right: auto;background: #fff;}
  1598. .modal.pop_fullCol .modal-header .modal-title {padding: 4.0rem 0 0 3.7rem;}
  1599. .modal.pop_fullCol a.close-modal {position: fixed;}
  1600. .modal.pop_fullCol .modal-body {margin-top: 6.7rem;}
  1601. .modal.pop_fullCol .modal-body .pop_cont{max-height: 100%;}
  1602. .modal.pop_fullCol .modal-body [class^="ui_col_"]{margin: 0;}
  1603. .pop_cont .nodata {padding:8.0rem 0 10.0rem; text-align:center;}
  1604. .pop_cont .nodata .txt_box {color:#666; font-size:1.6rem; font-weight:300; line-height:2.6rem;}
  1605. .pop_cont .nodata .txt_box::before {content:''; display:block; width:3.6rem; height:4.6rem; margin:0 auto 2.4rem; background:url('//image.istyle24.com/Style24/images/mo/ico_content_none.png') no-repeat;}
  1606. .pop_cont .nodata .txt_box span {color:#fd4802; font-weight:500;}
  1607. .pop_cont .nodata .btn_box {margin-top:4.0rem;}
  1608. .pop_cont .nodata .btn_box .btn span {color:#222; font-size:1.4rem; font-weight:300;}
  1609. .modal::-webkit-scrollbar,.pop_cont::-webkit-scrollbar {width: 0.2rem;}
  1610. .modal::-webkit-scrollbar-thumb,.pop_cont::-webkit-scrollbar-thumb {background-color: #888888;border-radius: 0;background-clip: padding-box;border: 0 solid transparent;}
  1611. .modal::-webkit-scrollbar-track, .pop_cont::-webkit-scrollbar-track{background-color: #dddddd;border-radius: 0;}
  1612. .modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:1.2rem 1.6rem;border-radius:0.5rem;background-color:#222;height:2.0rem;}
  1613. .modal-spinner>div{border-radius:10.0rem;background-color:#fff;height:2.0rem;width:0.2rem;margin:0 0.1rem;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}
  1614. .modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
  1615. .modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
  1616. .modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
  1617. @-webkit-keyframes sk-stretchdelay{
  1618. 0%,40%,100%{
  1619. -webkit-transform:scaleY(0.5)
  1620. }
  1621. 20%{
  1622. -webkit-transform:scaleY(1.0)
  1623. }
  1624. }
  1625. @keyframes sk-stretchdelay{
  1626. 0%,40%,100%{
  1627. transform:scaleY(0.5);-webkit-transform:scaleY(0.5)
  1628. }
  1629. 20%{
  1630. transform:scaleY(1.0);-webkit-transform:scaleY(1.0)
  1631. }
  1632. }
  1633. /* 제거할 클래스 */
  1634. .btnL{width:100%; height:4.5rem; line-height:4.5rem; font-size:1.4rem;}
  1635. .btnM{width:100%; height:4rem; height:4rem; line-height:4rem;}
  1636. .btnS{width:100%; height:3rem; height:3rem; line-height:3rem;}
  1637. /* .inner, .inner.bg_gray 등을 응용 */
  1638. .blockLyout{background-color:#f5f5f5;}
  1639. .blockLyout > .block{padding:3.0rem 0; margin-top:1.5rem; background-color:#Fff;}
  1640. .blockLyout > .block:first-child{margin-top:0;}
  1641. .txC1{color:#222222!important;}
  1642. .txC2{color:#666666!important;}
  1643. .txC3{color:#888888!important;}
  1644. .txC4{color:#ffffff!important;}
  1645. .bgC1{background-color:#222222!important;}
  1646. .bgC2{background-color:#444444!important;}
  1647. .bgC3{background-color:#dddddd!important;}
  1648. .bgC4{background-color:#fff6f2!important;}
  1649. .bgC5{background-color:#f5f5f5!important;}
  1650. .bgC6{background-color:#f1f1f1!important;} /* footer */
  1651. /* 사용금지, 비상용 */
  1652. .mgc {margin:0 auto;}
  1653. .mt0 {margin-top:0 !important;}
  1654. .ml0 {margin-left:0 !important;}
  1655. .ml5 {margin-left:0.5rem !important;}
  1656. .ml10{margin-left:1.0rem !important;}
  1657. .ml15 {margin-left:1.5rem !important;}
  1658. .ml20 {margin-left:2.0rem !important;}
  1659. .ml30 {margin-left:3.0rem !important;}
  1660. .mr0{margin-right:0 !important;}
  1661. .mr20 {margin-right:2.0rem !important;}
  1662. .mt5 {margin-top:0.5.0rem !important;}
  1663. .mt10 {margin-top:1.0rem !important;}
  1664. .mt15 {margin-top:1.5.0rem !important;}
  1665. .mt20 {margin-top:2.0rem !important;}
  1666. .mt30 {margin-top:3.0rem !important;}
  1667. .mt35 {margin-top:3.5rem !important;}
  1668. .mt40 {margin-top:4.0rem !important;}
  1669. .mt45 {margin-top:4.5rem !important;}
  1670. .mt50 {margin-top:5.0rem !important;}
  1671. .mt60 {margin-top:6.0rem !important;}
  1672. .mt100 {margin-top:10.0rem !important;}
  1673. .mb0 {margin-bottom:0 !important}
  1674. .mb5 {margin-bottom:0.5rem !important}
  1675. .mb10 {margin-bottom:1.0rem !important;}
  1676. .mb15 {margin-bottom:1.5rem !important;}
  1677. .mb20 {margin-bottom:2.0rem !important;}
  1678. .mb30 {margin-bottom:3.0rem !important;}
  1679. .mb40 {margin-bottom:4.0rem !important;}
  1680. .mb50 {margin-bottom:5.0rem !important;}
  1681. .mb60 {margin-bottom:6.0rem !important;}
  1682. .mb100 {margin-bottom:10.0rem !important;}
  1683. .mr5 {margin-right:0.5rem !important;}
  1684. .mr10 {margin-right:1.0rem !important;}
  1685. .mr15 {margin-right:1.5rem !important;}
  1686. .ml10 {margin-left:1.0rem !important;}
  1687. .ml35 {margin-left:3.5rem !important;}
  1688. .mtm3 {margin-top:-0.3rem !important;}
  1689. .mtm10 {margin-top:-1.0rem !important;}
  1690. .mtm20 {margin-top:-2.0rem !important;}
  1691. .mbm10 {margin-bottom:-1.0rem !important;}
  1692. .mbm30{margin-bottom:-3.0rem !important;}
  1693. .pt0 {padding-top:0 !important;}
  1694. .pt10 {padding-top:1.0rem !important;}
  1695. .pt20 {padding-top:2.0rem !important;}
  1696. .pt30 {padding-top:2.0rem !important;}
  1697. .pt40 {padding-top:4.0rem !important;}
  1698. .pt100 {padding-top:10.0rem !important;}
  1699. .pl0 {padding-left:0 !important;}
  1700. .pl10 {padding-left:1.0rem !important;}
  1701. .pr20 {padding-right:2.0rem !important;}
  1702. .pb10 {padding-bottom:1.0rem !important;}
  1703. .pb20 {padding-bottom:2.0rem !important;}
  1704. .pb30 {padding-bottom:3.0rem !important;}
  1705. .pb40 {padding-bottom:4.0rem !important;}
  1706. .pb50 {padding-bottom:5.0rem !important;}
  1707. .pb100 {padding-bottom:10.0rem !important;}
  1708. .shape.ranker {background: #fd4802;}
  1709. .shape.ranker::after {
  1710. border-left:1.0rem solid #fd4802 !important;
  1711. border-right:0 solid #fd4802 !important;
  1712. }
  1713. .shape{
  1714. background: #222222;width: 3rem;max-width: 3rem;min-height: 4rem;display: block;position: absolute;top: 0;left: 0;z-index: 9;border-radius: 0 0 0.2rem 0;
  1715. }
  1716. .shape:after{
  1717. content: "";top: 0;right: -0.94rem;position: absolute;
  1718. border-left: 1.0rem solid #222222;border-bottom: 1.0rem solid transparent;border-right: 0 solid #0183fd;
  1719. height: 3rem;width: 0;padding: 0 0 0 0;
  1720. }
  1721. .shape span{
  1722. color: #ffffff;text-align: center;text-indent: 1.0rem;font-size: 1.1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 4.0rem;z-index: 2;
  1723. }
  1724. .shape.dealdetail{
  1725. width: 100%;max-width: 4.0rem;
  1726. }
  1727. .shape.dealdetail span{
  1728. line-height: 1;text-align: center;width: 100%;display: inline-block;text-indent: 0;margin-left: 0.5rem;
  1729. }
  1730. /* Notch */ /*제거 .my .my_delivery .inner > .btn_group,.cs_contactUs_my_footer */
  1731. @media only screen and (min-width: 375px) and (max-width: 415px) and (min-height: 722px) and (max-height: 897px){/* footer{padding-bottom: 8rem;} *//* footer .f1 {padding: 0 0 8.5rem;} *//* footer .btn_top {bottom: 20.5%;} */.my .my_delivery .inner > .btn_group,.adrsAdd_pop .modal-footer .btn,.shopping_bag .od_calc_wrap{padding-bottom: 8.8rem; background-color: #f5f5f5; background-color: #aa2020;}.cs_contactUs_my_footer,.product_floormenu,.product_floormenu.fixed{/*height: calc(env(safe-area-inset-bottom) + 8.8rem);height: calc(constant(safe-area-inset-bottom) + 8.8rem);*/ background: #38c056; padding-bottom: 8.8rem;}}footer,footer .f1 {padding-bottom: calc(env(safe-area-inset-bottom) + 3.5rem);padding-bottom: clac(constant(safe-area-inset-bottom) + 3.5rem);}footer .btn_top {bottom: calc(env(safe-area-inset-bottom) + 6.5rem);bottom: clac(constant(safe-area-inset-bottom) + 6.5rem);}/*.my .my_delivery .inner > .btn_group,.cs_contactUs_my_footer*/.safer,.adrsAdd_pop .modal-footer .btn,.shopping_bag .od_calc_wrap,.product_floormenu,.product_floormenu.fixed{/* background: #f5f5f5; height: 5.8rem; height: calc() + 5.8rem); height: calc() + 5.8rem); */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); background: #f5f5f5; background: #000000;}
  1732. /* APP ONLY */
  1733. /* etc_goApp */
  1734. .adApp {width: 100%;height: 100%;z-index: 99999;overflow: hidden;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.85);/* IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(255, 231, 204) ff, endColorstr=rgb(255, 229, 204) ff);/* IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@filter_a, endColorstr=@filter_a)";}
  1735. .adApp .adWrap {display: table;width: 100%;height: 100%;}
  1736. .adApp .adWrap .cont {padding: 0 2rem;display: table-cell;vertical-align: middle;}
  1737. .adApp .cont button {width: 100%;}
  1738. .adApp .viewWeb {margin-top: 10%;font-size: 1.4rem;font-weight: 100;line-height: 1.2;color: #ffffff;text-align: center;text-decoration: underline;}
  1739. .adApp .viewWeb a {color: #ffffff;}
  1740. /* etc_consentAlarm */
  1741. .etcApp {width: 100%;height: 100%;z-index: 99999;text-align: center;overflow: hidden;position: fixed;left: 0;top: 0;background-color: #ffffff;}
  1742. .etcApp .titWrap{margin-bottom: 2.0rem;}
  1743. .etcApp .titWrap h2{font-size: 2.0rem;color: #333333;}
  1744. .etcApp .alramWrap {display: table;width: 100%;height: 100%;padding-top: 4.0rem;}
  1745. .etcApp .alramWrap .inner {padding: 0rem;}
  1746. .etcApp .alramWrap .btn_group_flex {position: fixed;bottom: 0;}
  1747. .etcApp .alramWrap .btn_group_flex button{padding: 1.8rem 0;}
  1748. .etcApp .btn_group_flex > div > .btn.btn_primary {background-color: #fd4802;border-color: #fd4802;color: #ffffff;}
  1749. .etcApp .btn_group_flex > div > .btn.btn_primary{color: #ffffff;font-weight: 200;}
  1750. .etcApp .alramClose {margin-top: 0;font-size: 1.4rem;font-weight: 100;line-height: 1.4;color: #ffffff;text-align: center;text-decoration: underline;}
  1751. .etcApp .alramClose a {color: #888888;}
  1752. /* etc_accessApp */
  1753. .etcApp .accWrap {display: table;width: 100%;height: 100%;padding-top: 4.0rem;}
  1754. .etcApp .accWrap .inner {padding: 0rem;}
  1755. .etcApp .accWrap .btn_group_flex {position: fixed;bottom: 0;}
  1756. .etcApp .accWrap .btn_group_flex button{padding: 1.8rem 0;}
  1757. .etcApp .accClose {margin-top: 10%;font-size: 1.4rem;font-weight: 100;line-height: 1.4;color: #ffffff;text-align: center;text-decoration: underline;}
  1758. .etcApp .accClose a {color: #888888;}
  1759. /* etc_coachApp (Coach Marks) */
  1760. #coachHide {background: transparent;}
  1761. .etcApp .coach {position: relative;width: 100%;height: 100%;}
  1762. .etcApp .coach::after {content:'';display: block; width: 100%;height: 100%;background-color: black;opacity: 0.75;z-index: -1;}
  1763. .etcApp .coach span{position:absolute;width: 100%;height: 100%;background-repeat: no-repeat;z-index: 10;}
  1764. .etcApp .coach #coachmask01{top:1.4rem; bottom:auto; left:1.8rem; right:auto; background: url('//image.istyle24.com/Style24/images/mo/coachmask01.png')no-repeat; background-size: 14.0666rem 12.0666rem; width: 14.0666rem; height: 12.0666rem;}
  1765. .etcApp .coach #coachmask02{top:5.2rem; bottom:auto; left:auto; right:0.15rem; background: url('//image.istyle24.com/Style24/images/mo/coachmask02.png')no-repeat; background-size: 12.6666rem 13.3000rem; width: 12.6666rem; height: 13.3000rem;}
  1766. .etcApp .coach #coachmask03{top:auto; bottom:0.8rem; left:auto; right:1.8rem; background: url('//image.istyle24.com/Style24/images/mo/coachmask03.png')no-repeat; background-size: 19.2666rem 10.5000rem; width: 19.2666rem; height: 10.5000rem;}
  1767. .etcApp .coach button{width: 100%; height: auto;}
  1768. /* etc_settingApp */
  1769. .app-only .sett {background: #f5f5f5;}
  1770. .app-only .sett .inner{background: #ffffff; margin-bottom: 2.0rem;}
  1771. .app-only .sett dl{width: 100%;}
  1772. .app-only .sett dl dd {border-bottom:0.1rem solid #eeeeee;}
  1773. .app-only .sett dl dd:last-child {border-bottom:0}
  1774. .app-only .sett dl dd:first-child:nth-last-child(1) {border-bottom:0.1rem solid #eeeeee;}
  1775. .app-only .sett dl dd .setItems {display: flex;align-items: center;padding: 1.0rem;}
  1776. .app-only .sett dl dd .setItems .set_opt {flex-grow: 1; padding: 0 0 0 0;}
  1777. .sett .form_field input[type="checkbox"] + label:before {content: 'OFF';background: none;color: #ffffff;left: auto;right: 0.4rem;font-size: 1.0rem;line-height: 2.0rem;}
  1778. .sett .form_field input[type="checkbox"]:checked + label:before {content: 'ON';background: none;color: #ffffff;left: 0.4rem;right: auto;font-size: 1.0rem;line-height: 2.0rem;}
  1779. .sett .switch {width: 4.8rem;position: relative;}
  1780. .sett .switch input[type="checkbox"] {visibility: hidden;}
  1781. .sett .switch label {width: 100%;height: 2.4rem;border-radius: 5.0rem;background-color: #dddddd;position: absolute;top: 0;left: 0;cursor: pointer;}
  1782. .sett .switch input[type="checkbox"]:checked + label {background-color: #fd4802;}
  1783. .sett .switch label::after {content: "";width: 2.0rem;height: 2.0rem;border-radius: 50%;background: white;position: absolute;top: 0.2rem;left: 0.2rem;transition: all 0.1s;}
  1784. .sett .switch input[type="checkbox"]:checked + label::after {background: #ffffff;position: absolute;top: 0.2rem;left: auto;right: 0.2rem;margin: 0;}
  1785. .sett .alink {display: inline-block;text-align: center;cursor: pointer;}
  1786. .sett .alink input[type="button"] {visibility: hidden;}
  1787. .sett .alink input[type="button"] + label::after {content: '업데이트';position: relative;top: 0;right: 0;color: #fd4802;font-size: 1.2rem;display: inline-block;background: url('//image.istyle24.com/Style24/images/mo/ico_app_arr2.png')no-repeat;background-size: 0.7rem 1.3rem;width: auto;height: 1.4rem;line-height: 1.4rem;background-position: 5.5rem 0;padding-right: 2.0rem;}
  1788. .sett .alink input[type="button"]:disabled + label::after {content: '최신버전입니다';color: #888888;background: none;padding: 0;}
  1789. .sett .alink label {width: 0.2rem;height: 0.2rem;cursor: pointer;}
  1790. .sett .alink a {display: inline-block;width:5rem;height:1.2rem;}
  1791. .sett .alink a::after {content: '';display: inline-block;background: url('//image.istyle24.com/Style24/images/mo/ico_app_arr.png')no-repeat;background-position: 4.2rem 0;background-size: 0.7rem 1.3rem; width: 100%;height: 1.4rem;line-height: 1.4rem;}
  1792. .sett p {font-size: 1.2rem;color: #888888;width: calc(100% - 7rem);padding-left: 1rem;padding-bottom: 0.8rem;}
  1793. .sett p.pot {position: relative;padding-left: 1.8rem;margin: 0;font-size: 1.1rem;font-weight: 200;color: #888888;}
  1794. .sett p.pot::before {content: '';position: absolute;top: 0.7rem;left: 1rem;background: #888888;width: 0.3rem;height: 0.3rem;}
  1795. /* etc_noticeApp */
  1796. .app-only .notice {background: #f5f5f5;position: relative;}
  1797. .app-only .notice.nodata{min-height: 58vh;}
  1798. .app-only .notice.nodata::after{content: '알림이 없습니다.';width: 100%;height: auto;display: inline-block;position: absolute;top:13.6rem;left: auto;text-align: center;color: #888888;font-size: 1.3rem;}
  1799. .app-only .notice .inner{background: #ffffff; margin-bottom: 0rem;padding-bottom:0;border-bottom:0.1rem solid #eeeeee;}
  1800. .app-only .notice .inner:last-child{padding-bottom: 0rem;}
  1801. .app-only .notice dl {font-size: 1.3rem;padding: 2.3rem 0;}
  1802. .app-only .notice dt {color: #222222;}
  1803. .app-only .notice dd {font-size: 1.2rem;color: #666666;padding-bottom: 1.5333rem;}
  1804. .app-only .notice dt {line-height: 1.2;padding-bottom: 1.1rem;}
  1805. .app-only .notice dt.tit, .app-only .notice dd.cont_txt {word-wrap: break-word;word-break: keep-all;}
  1806. .app-only .notice dd.cont_data {font-size: 1.1rem; color: #888888;font-family: 'LATO';}
  1807. .app-only .notice dd.cont_img {width: 100%;height: auto;}
  1808. .app-only .notice dd:last-child {padding-bottom: 0;}
  1809. /* etc_closingApp */
  1810. .app-only .guidance{width: auto;}
  1811. .app-only .guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
  1812. .app-only .guidance:after{content: '';position: absolute;top: 0;bottom: 1.5rem;left: 1.0rem;width: 100%;height: 100%;z-index: -1;}
  1813. .app-only .guidance{
  1814. box-shadow: 0 0 3.0rem rgb(0 0 0 / 20%), 0 0 3.0rem rgb(0 0 0 / 20%);
  1815. /* 마스크 미사용
  1816. mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
  1817. -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
  1818. mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
  1819. -webkit-mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
  1820. mask-position: bottom left, bottom right, top left, top right;
  1821. -webkit-mask-position: bottom left, bottom right, top left, top right;
  1822. mask-repeat: no-repeat;
  1823. -webkit-mask-repeat: no-repeat;
  1824. */
  1825. }
  1826. .app-only .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
  1827. .app-only .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
  1828. .app-only .guidance p.date{opacity: 0.7;font-size:1.1rem;margin-bottom: 1.2rem;}
  1829. .app-only .guidance p.tit + p.date + p {font-size:1.1rem;}
  1830. .app-only .guidance p:first-child {padding-top: 2.0rem;}
  1831. .app-only .guidance p:last-child {padding-bottom: 2.0rem;}
  1832. .app-only .guidance p:first-child:nth-last-child(1) { padding-top: 0;padding-bottom: 0;}
  1833. .app-only .guidance.ontoast {animation: onpop 6s .2s forwards; -webkit-animation: onpop 6s .2s forwards;}
  1834. @keyframes onpop {
  1835. 0% {bottom:0rem; opacity:1; z-index:99999;}
  1836. 10% {bottom:10.0rem;}
  1837. 20% {bottom:8.0rem;}
  1838. 80% {bottom:8.0rem; opacity:1; z-index:99999;}
  1839. 100% {opacity:0; z-index:0;}
  1840. }
  1841. /* mobile type */
  1842. /* etc_toastPopup */
  1843. .guidance{width: auto;}
  1844. .guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
  1845. .guidance:after{content: '';position: absolute;top: 0;bottom: 1.5rem;left: 1.0rem;width: 100%;height: 100%;z-index: -1;}
  1846. .guidance{box-shadow: 0 0 3.0rem rgb(0 0 0 / 20%), 0 0 3.0rem rgb(0 0 0 / 20%);}
  1847. .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
  1848. .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
  1849. .guidance p.date{opacity: 0.7;font-size:1.1rem;margin-bottom: 1.2rem;}
  1850. .guidance p.tit + p.date + p {font-size:1.1rem;}
  1851. .guidance p:first-child {padding-top: 2.0rem;}
  1852. .guidance p:last-child {padding-bottom: 2.0rem;}
  1853. .guidance p:first-child:nth-last-child(1) { padding-top: 0;padding-bottom: 0;}
  1854. .guidance.ontoast {animation: onpop 6s .2s forwards; -webkit-animation: onpop 6s .2s forwards;}
  1855. @keyframes onpop {
  1856. 0% {bottom:0rem; opacity:1; z-index:99999;}
  1857. 10% {bottom:10.0rem;}
  1858. 20% {bottom:8.0rem;}
  1859. 80% {bottom:8.0rem; opacity:1; z-index:99999;}
  1860. 100% {opacity:0; z-index:0;}
  1861. }