main.css 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  1. @charset "utf-8";
  2. /* swiper 변환 추가 css */
  3. /* .w700{width:1140px !important;} */
  4. .swi-po_rel{position:relative;}
  5. .version02{position:static;}
  6. .ta_center{text-align:center;}
  7. /*.swiper-button-prev.sbtn01_lb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 0% 50% no-repeat;}
  8. .swiper-button-next.sbtn01_rb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 100% 50% no-repeat;}*/
  9. .swiper-button-prev.sbtn02_lb{pointer-events:none;}
  10. .swiper-button-next.sbtn02_rb{pointer-events:none;}
  11. .swiper-button-prev.sbtn02_lb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 0% 50% no-repeat; position:relative; top:-50px; pointer-events:visible;}
  12. .swiper-button-next.sbtn02_rb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 100% 50% no-repeat; position:relative; top:-50px; pointer-events:visible;}
  13. .swiper-button-prev.sbtn03_lb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 0% 50% no-repeat;}
  14. .swiper-button-next.sbtn03_rb::after{content:""; display:inline-block; width:29px; height:87px; background:url(/images/pc/ico_arr_lg.png) 100% 50% no-repeat;}
  15. .slide-curb {display:inline-block; vertical-align:middle; font-size:0; margin-left:5px;}
  16. .swiper-controls {position:relative; margin:0px; text-align:center; font-size:16px;}
  17. .post-visual .slide-curb {position:absolute; top:5px; right:0;}
  18. .main_visual .slide-curb-play {position:relative; display:none; width:8px;height:12px;font-size:0; cursor:pointer;}
  19. .main_visual .slide-curb-play:after {content:""; position:absolute;top:0; left:0; border:6px solid transparent; border-left:9px solid #888;border-right:0; cursor:pointer;}
  20. .main_visual .slide-curb-pause {width:8px;height:12px;font-size:0;text-align:left;}
  21. .main_visual .slide-curb-pause:after,
  22. .main_visual .slide-curb-pause:before {content:"";display:inline-block;width:2px;height:12px;background:#888;}
  23. .main_visual .slide-curb-pause:before {float:right;}
  24. .main_visual .swiper-controls {/* display: inline-block; */}
  25. .main_visual .swiper-controls .swiper-pagination {position: relative;width:auto;display: inline-block;}
  26. /*
  27. .slider-1[data-slider-1-autoplay-status="Y"] .btn-play {
  28. display:none;
  29. }
  30. .slider-1[data-slider-1-autoplay-status="N"] .btn-stop {
  31. display:none;
  32. }
  33. */
  34. /* 각버튼 테스트2 */
  35. .btn_shape.active{
  36. border-left:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;
  37. border-right:1px solid #f5f5f5;border-top:1px solid #f5f5f5;
  38. background-color:#ffffff;
  39. position:relative;top:0;left:0;z-index:9;
  40. }
  41. .btn_shape.active:after{
  42. content:"";bottom:0px;right:0px;position:absolute;height:0px;width:0;padding:0px 0px 0px 0px;background:#222222;
  43. border-left:0px solid #ffffff;border-top:10px solid #222222;border-right:10px solid #f5f5f5;
  44. }
  45. /* 각버튼 테스트2 종료 */
  46. /* 각버튼 테스트 */
  47. .test_btn{
  48. border-left:1px solid #0183fd;border-bottom:1px solid #0183fd;
  49. border-right:1px solid #0183fd;border-top:1px solid #0183fd;
  50. background-color:#0183fd;
  51. position:relative;top:0;left:0;z-index:9;
  52. }
  53. .test_btn:after{
  54. content:"";bottom:-1px;right:-1px;position:absolute;height:0px;width:0;padding:0px 0px 0px 0px;
  55. border-left:0px solid #0183fd;border-top:10px solid #0183fd;border-right:10px solid #ffffff;
  56. }
  57. /* 각버튼 테스트 종료 */
  58. /* .action{display:block;margin:0px auto;width:100%;text-align:center;} */
  59. /* .action a {display:inline-block;padding:5px 10px; background:#f30;color:#fff;text-decoration:none;} */
  60. /* .action a:hover{background:#000;} */
  61. /* main */
  62. .container.main .wrap {position:relative; width:100%; min-width:auto; max-width:none; padding-left:0px; padding-right:0px;}
  63. .main {}
  64. .main .dpnone {display:none;}
  65. .main .swiper-pagination {margin:0; position:relative;}
  66. .main .wrap .content {padding-top:60px; padding-bottom:60px; padding-left:70px; padding-right:70px;}
  67. .main .wrap .content.wide {padding-left:0; padding-right:0;}
  68. .main .wrap .content.wide:first-child{/*background:#222222;*/ padding:0px !important;}
  69. .main .wrap .content .cont_head {color:#222222; font-size:40px; line-height:1; letter-spacing:-.025em;}
  70. .main .post-visual .swiper-slide::before{display:none;}
  71. .main_visual::before {content:'';display:block;width:100%; /*height:72px;*/ height:172px; position:absolute; top:-100px; left:0; background:#222222; z-index:-1;}
  72. .post-visual .btn {font-weight:300; border:1px solid #a7a7a7;}
  73. .post-visual .txtWrap{position:absolute; top:auto;bottom:100px;left:90px;right:auto;z-index:1; width: 85%;}
  74. .post-visual .txtWrap dl,
  75. .post-visual .txtWrap dl + button {opacity:0; transition:all 200ms ease;}
  76. .post-visual .txtWrap dl {color:#222; line-height:1; padding-bottom:40px;}
  77. .post-visual .txtWrap dl.w,
  78. .post-visual .txtWrap dl.w + button {color:#ffffff; border-color:#fff;}
  79. .post-visual .txtWrap dt {font-size:18px; padding-bottom:20px; font-weight:200;}
  80. .post-visual .txtWrap dd {font-size:62px;line-height:1;font-weight:500; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;}
  81. .post-visual .txtWrap dd.txt_xs {font-size:18px;line-height:1;font-weight:200;padding:20px 0 0px 0; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical; max-height:37px; overflow:hidden;}
  82. /* .post-visual .vrt_txt{width:auto;height:auto;font-size:18px;color:#888888;position:absolute;left:-90px;bottom:-99px;top:0;-webkit-transform:rotate(-90deg);transform:rotate(-180deg); white-space: nowrap; -webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;} */
  83. .post-visual .vrt_txt{width: 500px;height: 20px;box-sizing: content-box;display: inline-block;text-align: left;font-size: 18px;color: #888888;position: absolute;left: -80%;bottom: 160px;position: relative;left: -65%;bottom: -160px;top: auto;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);white-space: nowrap;}
  84. .post-visual.swiper-container {margin-left:-30px;}
  85. .post-visual .swiper-pagination-bullets{bottom:0px;}
  86. .post-visual .swiper-wrapper{width:100%;height:750px; height:auto; margin:0px auto;padding-bottom:65px;filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));}
  87. .post-visual .swiper-slide-active {}
  88. .post-visual .swiper-slide-active .txtWrap dl,
  89. .post-visual .swiper-slide-active .txtWrap dl + button {opacity:1;}
  90. .post-visual .swiper-slide{width:auto;/* margin-right:440px !important; */}
  91. .post-visual .swiper-button-next,
  92. .post-visual .swiper-button-prev {display:inline-block; position:absolute; top:50%; transform:translateY(-50%);}
  93. .main .post-visual .swiper-button-prev {margin-left:-610px; left:50%;}
  94. .main .post-visual .swiper-button-next {margin-right:-628px; right:50%;}
  95. /* 크롬일경우 */
  96. .post-visual .swiper-slide {
  97. /* padding:15px; */
  98. padding-left:30px;
  99. box-shadow:0 0px 30px rgba(0,0,0,0.20), 0 0px 30px rgba(0,0,0,0.20);
  100. position:relative;
  101. /* margin:0 50px; */
  102. mask-image:
  103. linear-gradient(to top right, transparent 49.5%, white 50.5%),
  104. linear-gradient(to top left, transparent 49.5%, white 50.5%),
  105. linear-gradient(white, white),
  106. linear-gradient(white, white);
  107. -webkit-mask-image:
  108. linear-gradient(to top right, transparent 49.5%, white 50.5%),
  109. linear-gradient(to top left, transparent 49.5%, white 50.5%),
  110. linear-gradient(white, white),
  111. linear-gradient(white, white);
  112. mask-size:86.6072% 0%, 13.3928% 21.4285%, 86.6072% 100%, 100% 78.5715%;
  113. -webkit-mask-size:86.6072% 0%, 13.3928% 21.4285%, 86.6072% 100%, 100% 78.5715%;
  114. mask-position:bottom left, bottom right, top left, top right;
  115. -webkit-mask-position:bottom left, bottom right, top left, top right;
  116. mask-repeat:no-repeat;
  117. -webkit-mask-repeat:no-repeat;
  118. }
  119. .post-visual .swiper-slide img{
  120. margin:0px auto;
  121. display:block;
  122. z-index:2;
  123. }
  124. .post-visual .swiper-slide::before{
  125. box-shadow:0 -20px 20px -20px rgba(0,0,0,0.20);
  126. content:'';
  127. width:150px;
  128. height:120px;
  129. }
  130. /* 익스일경우 */
  131. @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
  132. /* Enter your style code */
  133. .main .post-visual {overflow:hidden;}
  134. .main .post-visual .swiper-slide {
  135. margin:0;
  136. box-shadow:none;
  137. padding-left:0;
  138. }
  139. .post-visual .vrt_txt {bottom:-120px !important;}
  140. .post-visual.swiper-container {margin-left:0px;}
  141. .main .post-visual .swiper-slide {padding-bottom:20px;}
  142. .main .post-visual .swiper-slide-prev {}
  143. .main .post-visual .swiper-slide-active {}
  144. .main .post-visual .swiper-slide::before {display:block;}
  145. .main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);}
  146. /* .brand_main .post-visual .swiper-slide img::before{
  147. content:'';
  148. position:absolute;
  149. width:150px;
  150. height:120px;
  151. bottom:-50px;
  152. right:-65px;
  153. border:0px;
  154. transform:rotate(135deg);
  155. /* box-shadow:inset 0 -50px 30px -30px rgba(0,0,0,0.20);
  156. box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,0.20);
  157. box-shadow:inset 0px -60px 30px -50px rgba(0,0,0,0.20);
  158. background:#fff;
  159. background:linear-gradient(0deg, #fff 104px, transparent 0);
  160. z-index:1;
  161. z-index:9999;
  162. display:none;
  163. } */
  164. .main .post-visual .swiper-slide img::after{
  165. content:'';
  166. position:absolute;
  167. width:150px;
  168. height:150px;
  169. bottom:30px;
  170. right:30px;
  171. background:#fff;
  172. border:0px;
  173. box-sizing:border-box;
  174. transform:rotate(135deg);
  175. box-shadow:0 -25px 10px -7px rgba(0,0,0,0.20);
  176. background:linear-gradient(135deg, #fff 80px, transparent 0);
  177. }
  178. .main .post-visual .swiper-slide::before{
  179. content:'';
  180. position:absolute;
  181. width:224px;
  182. height:140px;
  183. bottom:-20px;
  184. right:-85px;
  185. border:0px;
  186. transform:rotate(135deg);
  187. /* box-shadow:inset 0 -50px 30px -30px rgba(0,0,0,0.20); */
  188. box-shadow:inset 0 -30px 20px -30px rgba(0,0,0,0.20);
  189. box-shadow:inset 0px -60px 20px -50px rgba(0,0,0,0.20);
  190. background:#fff;
  191. background:linear-gradient(0deg, #fff 120px, transparent 0);
  192. z-index:1;
  193. /*
  194. border-right:0px;
  195. border-left:0px;
  196. border-top:0px;
  197. border-bottom:1px;
  198. box-sizing:border-box;
  199. border-style:solid;
  200. transform:rotate(135deg);
  201. border-image:linear-gradient(-135deg, transparent 0%,rgb(0 0 0 / 23%) 100% );
  202. border-image-slice:160;
  203. */
  204. }
  205. .main .post-visual .swiper-slide .vrt_txt {left:-50%;left:-354px;}
  206. }
  207. .post-visual .swiper-slide img::after{
  208. content:'';
  209. position:absolute;
  210. width:150px;
  211. height:150px;
  212. bottom:30px;
  213. right:30px;
  214. background:#fff;
  215. border:0px;
  216. box-sizing:border-box;
  217. transform:rotate(135deg);
  218. box-shadow:0 -25px 10px -7px rgba(0,0,0,0.20);
  219. background:linear-gradient(135deg, #fff 106px, transparent 0);
  220. }
  221. .post-visual .swiper-slide::after {
  222. content:'';
  223. position:absolute;
  224. top:0;
  225. bottom:15px;
  226. left:10px;
  227. width:100%;
  228. height:100%;
  229. z-index:-1;
  230. /*
  231. background:#777;
  232. -webkit-box-shadow:0 15px 10px #777;
  233. -moz-box-shadow:0 15px 10px #777;
  234. box-shadow:0 15px 10px #777;
  235. -webkit-transform:rotate(-3deg);
  236. -moz-transform:rotate(-3deg);
  237. -o-transform:rotate(-3deg);
  238. -ms-transform:rotate(-3deg);
  239. transform:rotate(-3deg);
  240. */
  241. }
  242. /*
  243. .post-visual .swiper-slide::after {
  244. content:"";
  245. top:0;
  246. right:-10px;
  247. position:absolute;
  248. border-left:10px solid #0183fd;
  249. border-bottom:10px solid transparent;
  250. border-right:0px solid #0183fd;
  251. height:30px;
  252. width:0;
  253. padding:0px 0px 0px 0px;
  254. box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  255. box-shadow:inset 0 -5px 5px -5px #333, inset 0 5px 5px -5px #333, inset -5px 0 5px -5px #333;
  256. } */
  257. /*
  258. .post-visual .swiper-slide::after {
  259. content:"";
  260. z-index:-1;
  261. position:absolute;
  262. top:0;
  263. left:0;
  264. width:100%;
  265. height:100%;
  266. display:block;
  267. background:currentColor;
  268. clip-path:polygon(40px 0, 40px 30px, 30px 40px, 0 40px, 0 0);
  269. clip-path:polygon(100% 0, 100% 75%, 75% 100%, 0 100%, 0 0);
  270. clip-path:polygon(100% 0, 100% calc( 100% - 10px), calc( 100% - 10px) 100%, 0 100%, 0 0);
  271. }
  272. */
  273. /* main_stylereport */
  274. .main .wrap .content.main_stylereport {margin-top:20px;padding-bottom: 40px;}
  275. .main_stylereport .cont_head {padding-bottom:60px;}
  276. .main_stylereport .cont_body a {text-align:center;color:#222222;}
  277. .main_stylereport .cont_body img {width:100%; height:auto; object-fit:cover;}
  278. .main_stylereport .cont_body dl {}
  279. .main_stylereport .cont_body dt {font-size:24px; font-weight:300; padding:25px 0 17px 0;}
  280. .main_stylereport .cont_body dd {font-size:16px; font-weight:200; line-height:26px;}
  281. @media screen and (max-width:1460px) {
  282. }
  283. /* main_trendy */
  284. .main .wrap .content.main_trendy {background:#f5f5f5; margin-top:60px; margin-bottom:60px; padding-bottom:80px}
  285. .main_trendy .cont_head {padding:60px 0 60px 0;}
  286. .main_trendy .cont_body {position:relative; padding:0 60px;}
  287. .main_trendy .cont_body dl {}
  288. .main_trendy .cont_body dt {font-size:26px;font-weight:400;padding:28px 0 24px 0;}
  289. .main_trendy .cont_body dd {font-size:16px;font-weight:200;padding:10px 0 0;}
  290. .main_trendy .swiper-container {}
  291. .main_trendy .swiper-wrapper{padding-bottom:0px; min-height:670px;}
  292. .main_trendy .swiper-slide {width:calc((100% - 88px)/5 * 0.92); transition:all 200ms ease;}
  293. .main_trendy .swiper-slide.scaleBig {width:calc((100% - 88px)/5 * 1.12)}
  294. .main_trendy .item_state {padding:0;}
  295. .main_trendy .item_prod {width:100%;}
  296. .main_trendy .swiper-controls {padding-bottom:80px;}
  297. .main_trendy .swiper-pagination {margin-top:60px}
  298. .main_trendy .swiper-button-next,
  299. .main_trendy .swiper-button-prev {top:210px;}
  300. .main_trendy .swiper-button-next {right:0px;}
  301. .main_trendy .swiper-button-prev {left:-15px;}
  302. @media screen and (max-width:1460px) {
  303. .main_trendy .swiper-wrapper {min-height:520px;}
  304. }
  305. /* main_it */
  306. .main .wrap .content.main_it {position:relative; min-height:628px; padding-left:70px; padding-right:70px;}
  307. .main_it::after {content:''; display:block; clear:both;}
  308. .main_it .displayH {line-height:52px;}
  309. .main_it .cont_head{float:left; position:relative; width:384px; height:auto; line-height:1.2; margin-top: -4px; margin-left:66px;}
  310. .main_it .cont_head a {margin:22px 0;display:block;line-height:0;padding:0;}
  311. .main_it .cont_head span{font-size:18px;font-weight:300;color:#888888;}
  312. .main_it .cont_head a span::after{content:"";width:20px;height:13px;display:inline-block;background:url(/images/pc/ico_more_lg.png) 0% 0% no-repeat; background-position:10px 0px;}
  313. .main_it .cont_body{position:relative;width:calc(100% - 503px);float:left;margin:0;}
  314. .main_it .item_state {padding:0 0 60px;}
  315. .main_it .item_prod {width:100%;}
  316. .main_it .it_nav {position:absolute; left:-380px; top:195px; width:300px;}
  317. .main_it .it_nav li {margin-top:26px}
  318. .main_it .it_nav li:first-child {margin-top:0}
  319. .main_it .it_nav li .btn {}
  320. .main_it .it_nav li .btn.btn_link {display:inline-block; padding:0; border:none; color:#888888; font-size:20px; font-weight:200; line-height:1; transition:all 100ms ease;}
  321. .main_it .it_nav li .btn.btn_link span::after {content:''; display:none;}
  322. .main_it .it_nav li .btn.btn_link:hover{text-decoration:none;}
  323. .main_it .it_nav li .btn.btn_link.active {color:#222222; font-weight:500;}
  324. .main_it .it_nav li .btn.btn_link.active span {border-bottom:2px solid #222222;}
  325. .main_it .it_item {display:none;}
  326. .main_it .it_item::after {content:'';display:block;clear:both;}
  327. .main_it .it_item.active {display:block;}
  328. .main_it .swiper-slide {position:relative;}
  329. @media screen and (max-width:1460px) {
  330. .main .wrap .content.main_it {padding-left:0; padding-right:0;}
  331. }
  332. /* main_2stage */
  333. .main .wrap .content.main_2stage {}
  334. .main_2stage .cont_body {}
  335. .bnnbox_crop {width:100%;}
  336. .bnnbox_crop::after {content:''; clear:both; display:block;}
  337. .bnnbox_crop > div {width: 100%;height: 230px;float: none;overflow: hidden;}
  338. .bnnbox_crop > .bnn_half {float:left; width:50%;}
  339. .bnnbox_crop > .bnn_half > a {display:block; position:relative; width:100%; height:0%; padding-top:26.0918%; overflow:hidden;}
  340. .bnnbox_crop > .bnn_half > a img {position:absolute; left:50%; right:0; top:50%; bottom:auto; transform:translate(-50%, -50%); width:auto; height:100%;}
  341. @media screen and (max-width:1460px) {
  342. }
  343. /* main_deal */
  344. .main .wrap .content.main_deal {position:relative; width:100%; padding-top:0; padding-bottom:0; margin-top:60px; margin-bottom:60px; background:#444444;}
  345. .main_deal::after {content:'';display:block;clear:both;}
  346. .main_deal .displayH {line-height:1.3;}
  347. .main_deal .cont_head{background:#444444;width:520px;height:auto;line-height:1.2;float:left;padding:100px 0px 0 140px;position:relative;}
  348. .main_deal .cont_head p {color:#ffffff;}
  349. .main_deal .cont_head a {margin:30px 0;display:block;line-height:0;padding:0; color:#ddd; font-size:16px; font-weight:200;}
  350. .main_deal .cont_head a span::after{content:"〉";font-size:12px;padding-left:8px;}
  351. .main_deal .cont_body {width:calc(100% - 520px);float:left;background:#f5f5f5;padding-top:80px;padding-bottom:80px;padding-left:100px;padding-right:140px;}
  352. .main_deal .deal_progress {width:266px; position:relative; margin:95px 0 40px; overflow: visible;}
  353. .main_deal .deal_progress .bar_bg {width:100%; height:4px; background:#fd4802;}
  354. .main_deal .deal_progress .bar_current {background:#333; position:absolute; top:0; left:0; height:4px; z-index:2; max-width:100%;}
  355. .main_deal .deal_progress .bar_current span {width: 62px; z-index: 3; position:absolute; right:-31px; top:-45px; background:#fd4802; padding:8px 10px; font-size:14px; color:#fff; font-weight:300; letter-spacing:0.1em;}
  356. .main_deal .deal_progress .bar_current span:after {content:''; position:absolute; left:50%; bottom:-10px; border:5px solid transparent; transform:translateX(-50%); border-top:5px solid #fd4802;}
  357. .main_deal .count {}
  358. .main_deal .count .hotdeal:after {content:''; display:block; clear:both;}
  359. .main_deal .count .count_tit {display:inline-block; color:#ffffff; font-size:16px; font-weight:500;}
  360. .main_deal .count .count_time {position:relative; left:auto; width:100%;}
  361. .main_deal .count .count_time span{float:left; position:relative; font-size:12px; font-weight:500; color:#888888; width:66px; margin-right:33px; text-align:center;}
  362. .main_deal .count .count_time span:first-child::before,
  363. .main_deal .count .count_time span:first-child::after{content:'';display:none;}
  364. .main_deal .count .count_time span::before,
  365. .main_deal .count .count_time span::after{content:''; display:inline-block; position:absolute; width:5px; height:5px; background:#ffffff; border-radius:100%;}
  366. .main_deal .count .count_time span::before{top:-57px;left:-20px;}
  367. .main_deal .count .count_time span::after{top:-44px;left:-20px;}
  368. .main_deal .count #countdown{text-align:center; margin:auto; position:static; width:auto; top:auto; left:auto; transform:none;}
  369. .main_deal .count #countdown::after, .main_deal #countdown #tiles::after {content:'';display:block;clear:both;}
  370. .main_deal #countdown #tiles{position:relative; z-index:1;}
  371. .main_deal #countdown #tiles span{float:left; display:inline-block; position:relative; width:66px; height:88px; background:url(/images/pc/ico_count_bg.png) no-repeat center; color:#ffffff; font-size:38px; font-weight:bold; text-align:center; letter-spacing:0.1em; text-indent:5px; padding:0; line-height:88px; margin-right:33px; z-index:1;}
  372. #countdown span:nth-child(2) {margin:0;}
  373. .main_deal #countdown #tiles span::before {content:''; position:absolute; left:2px; right:2px; top:50%; margin-top:-4px; border-top:2px solid #222; z-index:10; opacity:0.8;}
  374. .main_deal .item_prod {width:100%;}
  375. .main_deal .item_state {padding-left:0; padding-right:0;}
  376. @media screen and (max-width:1460px) {
  377. .main_deal .cont_head {padding-left:70px;}
  378. .main_deal .cont_body {padding-right:70px;}
  379. }
  380. /* main_pick */
  381. .main .wrap .content.main_pick {}
  382. .main_pick .cont_head {padding-bottom:60px;}
  383. .main_pick .cont_body {padding:0;position:relative;}
  384. .main_pick .cont_body .post-pick-nav {width:1250px; height:auto; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
  385. .main_pick .post-pick-nav .swiper-button-next,
  386. .main_pick .post-pick-nav .swiper-button-prev {position:absolute; top:50%; transform:translateY(-50%); width:13px; height:24px; margin:0; background-image:url('/images/pc/ico_arr_sm.png');}
  387. .main_pick .post-pick-nav .swiper-button-prev {left:0;}
  388. .main_pick .post-pick-nav .swiper-button-next {right:0;}
  389. .main_pick .post-pick-nav .swiper-slide{width:auto; height:auto; text-align:center; cursor:pointer; /* border-bottom:2px solid transparent; */}
  390. .main_pick .post-pick-nav .swiper-slide img {opacity:0.2; width: 100%; height:auto;}
  391. .main_pick .post-pick-nav .swiper-slide.swiper-slide-thumb-active img{opacity:1; }
  392. .main_pick .post-pick-for {margin-top:60px; box-sizing:border-box; border:1px solid #dddddd;}
  393. .main_pick .post-pick-for::after {content:'';display:block; clear:both;}
  394. .main_pick .post-pick-for .pick_look {float:left; width:38.2022%; background:#888888;}
  395. .main_pick .post-pick-for .pick_look .swiper-slide{position:relative; width:100%}
  396. .main_pick .post-pick-for .pick_look .swiper-slide a{display: inline-block; width: 100%; height: 100%;}
  397. .main_pick .post-pick-for .pick_look .swiper-slide .text_box {position:absolute; left:0; right:0; bottom:130px; color:#fff; text-align:center;}
  398. .main_pick .post-pick-for .pick_look .swiper-slide .text_box .title {position:relative; display:block; display:-webkit-box; width:100%; max-height:112px; overflow:hidden; white-space:normal; overflow-wrap:break-word; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:46px; font-weight:500; line-height:56px;}
  399. .main_pick .post-pick-for .pick_look .swiper-slide .text_box .sub_text {margin-top:25px; font-size:18px; font-weight:300; line-height:1.2;max-width: 600px;margin: 25px auto;text-align: center;overflow: hidden;white-space: normal;overflow-wrap: break-word;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
  400. .main_pick .post-pick-for .pick_look .swiper-controls {position:absolute; left:0; right:0; width:100%; bottom:40px;}
  401. .main_pick .post-pick-for .pick_look img{width:100%; height:auto;}
  402. .main_pick .post-pick-for .pick_item {position: absolute;right: 0;width:61.7978%;padding: 0 80px;top: 50%;transform: translateY(-50%);font-size:0;}
  403. .main_pick .post-pick-for .pick_item .item_prod {width:calc((100% - 40px) / 3); margin-left:20px;}
  404. .main_pick .post-pick-for .pick_item .item_prod:first-child {margin-left:0;}
  405. .main_pick .post-pick-for .pick_item .item_prod .item_state {padding:0;}
  406. @media screen and (max-width:1460px) {
  407. .main_pick .post-pick-for .pick_item {padding:0 50px;}
  408. .main_pick .post-pick-for .pick_item .item_prod {width:calc((100% - 60px) / 3); margin-left:30px;}
  409. }
  410. /* main_1stage */
  411. .main .wrap .content.main_1stage {}
  412. .main_1stage .bnnbox{position:relative;}
  413. .main_1stage .txtWrap{margin:0 auto; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);z-index:1; text-align:center;}
  414. .main_1stage .txtWrap p{color:#222222; font-size:40px; font-weight:500; text-align:center; line-height:1.25;}
  415. .main_1stage .txtWrap .btn{position:relative; width:160px; height:52px; border:1px solid #959899; margin:20px auto 0; text-align:center; font-weight:300; }
  416. .main_1stage img {margin:0 auto;width:100%;}
  417. .post-bnnWide .swiper-button-next {right:70px;}
  418. .post-bnnWide .swiper-button-prev {left:70px;}
  419. .post-bnnWide .swiper-button-disabled {display: none;}
  420. @media screen and (max-width:1460px) {
  421. .main_1stage .txtWrap p{font-size:34px;}
  422. }
  423. /* main_recomm */
  424. .main .wrap .content.main_recomm {}
  425. .main_recomm .cont_head {padding-bottom:50px;}
  426. .main_recomm .cont_body {padding:0 70px;}
  427. .main_recomm .sec_head {text-align:center;}
  428. .main_recomm .tag_list {display:inline-block; text-align:center; vertical-align:top;}
  429. .main_recomm .tag_list::after {content:''; clear:both; display:block;}
  430. .main_recomm .tag_list button {float:left; margin-left:12px; transition:none;}
  431. .main_recomm .tag_list button:first-of-type {margin-left:0}
  432. .main_recomm .tag_list button.active {line-height:1; background:#222222; border-color:rgb(245 245 245); position:relative; border-left:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; border-right:1px solid #f5f5f5; border-top:1px solid #f5f5f5; color:#ffffff; border: 0; position:relative; top:0; left:0; z-index:9;}
  433. .main_recomm .tag_list button.active:after{content:""; bottom:0px; right:0px; position:absolute; height:0px; width:0; padding:0px 0px 0px 0px; background:#222222; border-left:0px solid #ffffff; border-top:10px solid #222222; border-right:10px solid #ffffff;}
  434. .main_recomm .tagitem {display:none;}
  435. .main_recomm .tagitem.active {display:block;}
  436. .main_recomm .swiper-slide {}
  437. .main_recomm .item_prod {width:100%;}
  438. .main_recomm .item_state {width:100%; padding:0;}
  439. .main_recomm .swiper-controls {margin-top:60px}
  440. .main_recomm .swiper-button-next {right:60px;}
  441. .main_recomm .swiper-button-prev {left:70px;}
  442. @media screen and (max-width:1460px) {
  443. }
  444. /* main_foryou */
  445. .main .wrap .content.main_foryou {position:relative; display:block; width:100%; height:auto; margin-top:60px; padding:120px 140px; background-color:#f5f5f5;}
  446. .main_foryou::after {content:''; display:block; clear:both;}
  447. .main_foryou .cont_head{position:relative; position:absolute; left:140px; top:120px;}
  448. .main_foryou .cont_head span{color:#888888; font-size:16px;}
  449. .main_foryou .cont_body {position:relative; width:100%; min-height:490px; padding-left:30.6%;}
  450. .fy_nav {position:absolute; left:0; top:22%; width:346px; height:auto; padding-bottom:50px;}
  451. .fy_nav .btn_shape {width:100%; height:60px; padding:20px 115px 20px 30px; background:#fff; transition:none;}
  452. .fy_nav .btn_shape div {display:inline-block; text-align:left; width:100%; line-height:1; vertical-align:top;}
  453. .fy_nav .btn_shape div span {color:#888888; font-size:18px; font-weight:300; line-height:1;}
  454. .fy_nav .btn_shape div .number {padding-right:25px; color:#222222; font-size:20px; font-weight:500;}
  455. .fy_nav .btn_shape + a {display:none;}
  456. .fy_nav .btn_shape.active {position:relative; background:#222222; border-color:rgb(245 245 245);}
  457. .fy_nav .btn_shape.active span {position:relative; color:#ffffff;}
  458. .fy_nav .btn_shape.active + a {display:inline-block; font-size:14px; text-align:right;position:absolute;top:50%;right:45px;transform:translateY(-50%);color:#888888;z-index:10;}
  459. .fy_nav .btn_shape.active + a::after {content:'';width:7px;height: 14px;display:inline-block;position:absolute;top:50%;right: -13px;transform:translateY(-50%);background:url('/images/pc/ico_more_lg.png');background-repeat:no-repeat;background-position: 0px 50%;}
  460. .fy_item {display:none; position:relative; width:100%; min-height:490px; background:rgba(0,0,0,0.5);}
  461. .fy_item::after {content:'';display:block;clear:both;}
  462. .fy_item.active {display:block;}
  463. .fy_item .part {float:left; position:relative; min-height:1px;}
  464. .fy_item .part .item_prod {float:left; width:100%; margin:0; padding:0;}
  465. .fy_item .part .item_state {width:100%; margin:0; padding:0;}
  466. .fy_item .part .itemPic {width:100%; margin:0;}
  467. .fy_item .part {width:20%;}
  468. .fy_item .part.lg {width:40%;}
  469. .fy_item .part .item_state .itemInfo {display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:65%; height:auto; text-align:center; z-index:21;}
  470. .fy_item .part .item_state:hover .itemInfo,
  471. .fy_item .part .item_state:active .itemInfo,
  472. .fy_item .part .item_state:focus .itemInfo {display:block;}
  473. .fy_item .part .itemLink:hover::after{content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index: 19;}
  474. .fy_item .part .itemBrand,
  475. .fy_item .part .itemName,
  476. .fy_item .part .itemPrice {color:#ffffff; width:100%; max-width:none; word-break:keep-all;}
  477. .fy_item .part .itemPercent {position:relative; left:auto; right:auto; padding:0; margin:0}
  478. .post-sug .swiper-slide ul li{position:relative; margin:12px 0 0; background-color:rgb(255 255 255);}
  479. .post-sug .swiper-slide ul li:first-child {margin-top:0;}
  480. .post-sug .swiper-controls {bottom:-50px;}
  481. @media screen and (max-width:1460px) {
  482. .main .wrap .content.main_foryou {padding-left:70px; padding-right:70px}
  483. .main_foryou .cont_head {left:70px}
  484. }
  485. /* main_tv */
  486. .main .wrap .content.main_tv {padding-top:120px; padding-bottom:160px;}
  487. .main_tv::before {content:'';z-index:-1;display:block;width:100%;height:520px;position:absolute;top:0;left:0;background:#444444;}
  488. .main_tv .cont_head {padding-bottom:60px;}
  489. .main_tv .cont_head p {color:#ffffff; font-size:42px;}
  490. .post-tv {width:100%;height:760px; height:auto; margin:0px auto; padding-top:60px; padding-bottom:60px;}
  491. .post-tv .swiper-slide {width:890px;}
  492. .post-tv .swiper-slide .movbox {position:relative; width:100%; height:0; padding-top:56.1818%; overflow:hidden; transition:all 300ms ease; transform:scale(1); pointer-events: none;}
  493. .post-tv .swiper-slide .movbox iframe {position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; z-index:1; }
  494. .post-tv .swiper-slide-active .movbox {transform:scale(1.24); pointer-events:auto;}
  495. .post-tv .swiper-slide-active .movbox iframe {}
  496. .post-tv .swiper-button-next,
  497. .post-tv .swiper-button-prev{opacity:0.5;}
  498. .post-tv .swiper-button-next:hover,
  499. .post-tv .swiper-button-prev:hover{opacity:1; background-image:url('/images/pc/ico_slide_arrow_orange.png');}
  500. .post-tv .swiper-button-next {right:140px;}
  501. .post-tv .swiper-button-prev {left:140px;}
  502. .main_tv .swiper-controls {margin-top:40px}
  503. @media screen and (max-width:1460px) {
  504. .post-tv .swiper-button-next {right:70px;}
  505. .post-tv .swiper-button-prev {left:70px;}
  506. }
  507. /* brand_main */
  508. header .common_header.br_header::after {content:''; display:block; width:100%; height:585px; position:absolute; bottom:-485px; left:0; background:inherit; z-index:-1;}
  509. header.minify .common_header.br_header::after {bottom:-565px;}
  510. .container.brand_main .wrap {position:relative; width:100%; min-width:auto; max-width:auto; padding-left:0px; padding-right:0px;}
  511. .brand_main .dpnone {display:none;}
  512. .brand_main .swiper-pagination {margin:0; position:relative;}
  513. .brand_main .wrap .content {padding-top:60px; padding-bottom:60px; padding-left:70px; padding-right:70px;}
  514. .brand_main .wrap .content.wide {padding-left:0; padding-right:0;}
  515. .brand_main .wrap .content.wide:first-child{/*background:#222222;*/ padding:0px !important;}
  516. .brand_main .wrap .content .cont_head {color:#222222; font-size:40px; line-height:1; letter-spacing:-.025em;}
  517. .brand_main .wrap .content .cont_body {position:relative;}
  518. .brand_main .main_visual::before {display:none;}
  519. .brand_main .swiper-button-next,
  520. .brand_main .swiper-button-prev {top:50%; transform:translateY(-50%); color:transparent;}
  521. .brand_main .swiper-pagination {position:relative; bottom:0; margin:60px 0 0; height:auto;}
  522. .brand_main .swiper-slide .item_prod {width:100%;}
  523. .brand_main .swiper-slide .item_prod .item_state {padding:0;}
  524. .brand_main .swiper-slide .item_prod .item_state a.itemLink {}
  525. /* brand_visual */
  526. .brand_main .wrap .content.brand_visual {max-width:1920px; margin:auto; padding-left:200px}
  527. .brand_main .brand_visual {margin:0}
  528. .brand_main .brand_visual .cont_body {}
  529. .brand_main .brand_visual .swiper-button-prev {left:70px; opacity:0.5;}
  530. .brand_main .brand_visual .swiper-button-next {right:70px; opacity:0.5;}
  531. .brand_main .brand_visual .swiper-button-disabled {display: none;}
  532. .brand_main .post-visual .swiper-container {margin-left:0;}
  533. .brand_main .post-visual .swiper-wrapper {padding-bottom:0;}
  534. .brand_main .post-visual .swiper-slide {position:relative; max-width:1520px; padding-left:28.9473%; mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; -webkit-mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; /*transition:all 200ms ease;*/}
  535. .brand_main .post-visual .swiper-slide img {width:1080px; margin:0;}
  536. .brand_main .post-visual .swiper-slide .txtWrap {opacity:0; position:absolute; padding-left:0px; top:110px; bottom:auto; left:0px; right:auto; z-index:1;}
  537. .brand_main .post-visual .txtWrap dt {font-size:0; padding-bottom:0;}
  538. .brand_main .post-visual .swiper-slide-active {opacity:1 !important;}
  539. .brand_main .post-visual .swiper-slide-active .txtWrap {animation-name: fade-in;animation-duration: 1.5s;animation-delay: 1s;animation-fill-mode: both;}
  540. @keyframes fade-in {
  541. from {
  542. opacity: 0;
  543. left:0;
  544. transform: translateY(100px);
  545. }
  546. to {
  547. opacity: 1;
  548. left:0;
  549. transform: translateY(0);
  550. }
  551. }
  552. .brand_main .post-visual .swiper-slide-prev {opacity:0;}
  553. .brand_main .post-visual .swiper-slide-next {opacity:1 !important; padding-left:0px; padding-right:440px;}
  554. .brand_main .post-visual .swiper-controls {position:absolute; width:auto; bottom:100px; left:190px; padding-right:15px; z-index:10;}
  555. .brand_main .post-visual .swiper-controls .swiper-pagination {margin-top:0}
  556. /* brand_about */
  557. .brand_main .wrap .content.brand_info {margin-top:20px}
  558. .brand_main .brand_info .cont_body {padding:80px 6.7%; background:#f5f5f5;}
  559. .brand_main .brand_info .cont_body .brand_tit, .brand_main .brand_info .cont_body .brand_desc {float:left;}
  560. .brand_main .brand_info .cont_body .brand_tit {width:20%; margin-right:2%;}
  561. .brand_main .brand_info .cont_body .brand_desc {width:78%}
  562. .brand_main .brand_info .cont_body .brand_tit p {margin-bottom:30px; font-size:30px; font-weight:500;}
  563. .brand_main .brand_info .cont_body .brand_tit a {background:url(/images/pc/ico_ic_btn.png) no-repeat right center; padding-right:20px; font-size:16px; color:#666;}
  564. .brand_main .brand_info .cont_body .brand_desc .cate {margin-bottom:25px; font-size:20px; font-weight:500;}
  565. .brand_main .brand_info .cont_body .brand_desc .desc {font-size:16px; font-weight:200; line-height:26px;}
  566. /* brand_newitems */
  567. .brand_main .wrap .content.new_item {}
  568. .new_item .cont_head {margin-bottom:60px}
  569. .new_item .cont_body {position:relative; padding:0 70px;}
  570. .new_item .cont_body dl {}
  571. .new_item .cont_body dt {font-size:26px;font-weight:400;padding:28px 0 24px 0;}
  572. .new_item .cont_body dd {font-size:16px;font-weight:200;padding:10px 0 0;}
  573. .new_item .swiper-container {}
  574. .new_item .swiper-wrapper{padding-bottom:0px; min-height:670px;}
  575. .new_item .swiper-slide {width:calc((100% - 88px)/5 * 0.92); transition:all 200ms ease;}
  576. .new_item .swiper-slide.scaleBig {width:calc((100% - 88px)/5 * 1.12)}
  577. .new_item .item_state {padding:0;}
  578. .new_item .item_prod {width:100%;}
  579. .new_item .swiper-controls {padding-bottom:80px;}
  580. .new_item .swiper-pagination {margin-top:60px}
  581. .new_item .swiper-button-next,
  582. .new_item .swiper-button-prev {top:250px;}
  583. .new_item .swiper-button-next {right:0px;}
  584. .new_item .swiper-button-prev {left:0px;}
  585. @media screen and (max-width:1460px) {
  586. .new_item .swiper-wrapper {min-height:520px;}
  587. }
  588. /* brand_bestitems */
  589. .brand_main .wrap .content.best_item {}
  590. .brand_main .best_item .cont_head {margin-bottom:60px}
  591. .brand_main .best_item .cont_body {padding-left:70px; padding-right:70px;}
  592. .brand_main .best_item .swiper-button-next {right:0px; margin-top:-120px;}
  593. .brand_main .best_item .swiper-button-prev {left:0px; margin-top:-120px;}
  594. @media screen and (max-width:1460px) {
  595. }
  596. /* brand_mditems */
  597. .brand_main .wrap .content.md_item {}
  598. .brand_main .md_item .cont_head {margin-bottom:60px}
  599. .brand_main .md_item .cont_body {padding-left:70px; padding-right:70px;}
  600. .brand_main .md_item .swiper-button-next {right:0px; margin-top:-120px;}
  601. .brand_main .md_item .swiper-button-prev {left:0px; margin-top:-120px;}
  602. @media screen and (max-width:1460px) {
  603. }
  604. /* brand_specialshop */
  605. .brand_main .wrap .content.special_shop {}
  606. .brand_main .special_shop .cont_head {margin-bottom:60px;}
  607. .brand_main .special_shop .cont_body {position:relative; background:#222;}
  608. .brand_main .special_shop .spe_thumb {float:left; position:relative; width:38%;}
  609. .brand_main .special_shop .spe_thumb img {width:100%; height:auto;}
  610. .brand_main .special_shop .spe_thumb .swiper-container {height:100%;}
  611. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide {position:relative;}
  612. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide a {position:relative; display:block;}
  613. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide a:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:342px; background:linear-gradient(0deg, rgba(0,0,0,1) 0%, transparent 50%); z-index:2;}
  614. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide .txtWrap {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:11;}
  615. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide .txtWrap p {font-size:40px; line-height:1.2; color:#fff; font-weight:500;}
  616. .brand_main .special_shop .spe_thumb .swiper-container .swiper-slide .txtWrap span {display:inline-block; margin-top:25px; color:#fff; font-size:18px; font-weight:300;}
  617. .brand_main .special_shop .spe_pr_list {position:absolute; left:38%; top:50%; width:62%; transform:translateY(-50%); padding-left:100px;}
  618. .brand_main .special_shop .spe_pr_list .swiper-slide {width:28%;}
  619. .brand_main .special_shop .spe_pr_list .swiper-slide img {opacity:0.5;}
  620. .brand_main .special_shop .spe_pr_list .swiper-slide.view img {opacity:1;}
  621. .brand_main .special_shop .spe_pr_list .swiper-slide:last-child {opacity:1;}
  622. .brand_main .special_shop .spe_pr_list .swiper-slide .itemLink > * {color:#fff;}
  623. .brand_main .special_shop .spe_pr_list .slide_wrap .spe_sl {position:relative; padding:0 0 50px 0}
  624. .brand_main .special_shop .swiper-scrollbar {position:absolute; left:0; right:12%; bottom:0; margin:0; background:rgba(255,255,255,0.2) !important; height:2px;}
  625. .brand_main .special_shop .swiper-scrollbar-drag {background:rgba(255,255,255,0.6) !important;}
  626. .brand_main .special_shop .swiper-button-next {right:70px; opacity:0.5;}
  627. .brand_main .special_shop .swiper-button-prev {left:70px; opacity:0.5;}
  628. @media screen and (max-width:1460px) {
  629. }
  630. /* brand_lookbook */
  631. .brand_main .wrap .content.br_lookbook {}
  632. .brand_main .br_lookbook {}
  633. .brand_main .br_lookbook .cont_head {margin-bottom:60px}
  634. .brand_main .br_lookbook .swiper-slide {width:auto; height:660px;}
  635. .brand_main .br_lookbook .swiper-slide img {width:100%; height:auto;}
  636. .brand_main .br_lookbook .bt_lb_item {}
  637. .brand_main .br_lookbook .swiper-container {padding-top:60px;}
  638. .brand_main .br_lookbook .swiper-slide .bt_lb_item:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3);}
  639. .brand_main .br_lookbook .swiper-slide-active .bt_lb_item {position:relative; height:618px; margin-top:-60px; transition:all 200ms ease;}
  640. .brand_main .br_lookbook .swiper-slide-active .bt_lb_item:after {display:none;}
  641. .brand_main .br_lookbook .swiper-slide-active .bt_lb_item .item_picker {position:absolute; transform:translate(-50%,-50%);}
  642. .brand_main .br_lookbook .swiper-slide-active .bt_lb_item .item_picker .pick_descr {display:none; position:absolute; background:#fff; z-index:2;}
  643. .brand_main .br_lookbook .swiper-button-next {right:70px; opacity:0.5;}
  644. .brand_main .br_lookbook .swiper-button-prev {left:70px; opacity:0.5;}
  645. .brand_main .br_lookbook .swiper-pagination {margin-top:40px}
  646. @media screen and (max-width:1460px) {
  647. }
  648. /* brand_product */
  649. .brand_main .wrap .content.brand_product {margin-bottom:60px}
  650. .brand_main .brand_product .cont_head {margin-bottom:60px}
  651. .brand_main .brand_product .itemsGrp {margin-left:-10px; margin-right:-10px;}
  652. .brand_main .brand_product .btn_wrap {text-align:center; margin:0}
  653. .brand_main .brand_product .btn_wrap .btn {border:1px solid #a7a7a7; padding:15px 40px;}
  654. .brand_main .brand_product .btn_wrap .btn span {font-weight:300;}
  655. .brand_main .brand_product .btn_wrap .btn span:after {content:''; display:inline-block; margin-left:20px; width:7px; height:13px; background:url(/images/pc/ico_more_lg.png) no-repeat right center;}
  656. @media screen and (max-width:1460px) {
  657. }
  658. /* brand_main_tv */
  659. .brand_main .wrap .content.main_tv {padding-top:120px; padding-bottom:160px;}
  660. .brand_main .main_tv::before {background:#f5f5f5;}
  661. .brand_main .main_tv .cont_head p {color:#222}
  662. @media screen and (max-width:1460px) {
  663. }
  664. /* 브랜드메인_룩북피커_팝업 */
  665. .modal.br_lookbook_popup {max-width:585px; min-height:390px; padding:0;}
  666. .modal.br_lookbook_popup .item_prod {width:100%;}
  667. .modal.br_lookbook_popup .modal-header {margin:0;}
  668. .modal.br_lookbook_popup .itemsGrp {margin-bottom:0;}
  669. .modal.br_lookbook_popup .itemsGrp .item_prod {width:100%; overflow:hidden;}
  670. .modal.br_lookbook_popup .itemsGrp .item_prod .item_state {display:table; padding-left:310px; padding-right:55px; padding-bottom:0; width:100%; min-height:390px;}
  671. .modal.br_lookbook_popup .itemsGrp .item_prod .itemLink {display:table-cell; position:static; vertical-align:middle;}
  672. .modal.br_lookbook_popup .itemsGrp .item_prod .itemPic {position:absolute; top:0; left:0; margin-bottom:0; width:260px; height:390px; padding:0; background:#f5f5f5;}
  673. .modal.br_lookbook_popup .itemsGrp .item_prod.sold_out .itemPic:before {content:'SOLD OUT'; position:absolute; top:50%; left:50%; font-size:20px; color:#fff; background:rgba(0,0,0,.5); width:100%; height:100%; transform:translate(-50%, -50%); line-height:420px; z-index:99; text-align:center;}
  674. .modal.br_lookbook_popup .itemsGrp .item_prod .itemBrand {margin:0px 0px 15px; font-size:14px; font-weight:300;}
  675. .modal.br_lookbook_popup .itemsGrp .item_prod .itemName {margin:0px 0px 25px; font-size:18px; font-weight:300; line-height:28px; height:56px;}
  676. .modal.br_lookbook_popup .itemsGrp .item_prod .itemPrice {font-size:26px; line-height:1; font-weight:500; margin:0;}
  677. .modal.br_lookbook_popup .itemsGrp .item_prod .itemPrice_original {display:inline-block; margin-left:0; margin-bottom:10px; font-size:20px; font-weight:200;}
  678. .modal.br_lookbook_popup .itemsGrp .item_prod .itemPercent {position:relative; font-size:26px; line-height:0.8; bottom:auto; left:auto;}
  679. .modal.br_lookbook_popup .itemsGrp .item_prod .itemLink .btn {margin-top:40px; border:1px solid #a7a7a7; font-weight:300;}
  680. /* brand_main :ie */
  681. @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
  682. .brand_main .post-visual .swiper-slide {
  683. margin:0;
  684. box-shadow:none;
  685. }
  686. .brand_main .post-visual .swiper-slide {z-index:9; padding-bottom:20px;}
  687. .brand_main .post-visual .swiper-slide:before {display:none;}
  688. .brand_main .post-visual .swiper-slide-active {z-index:8;}
  689. .brand_main .post-visual .swiper-slide-active:before {display:block;}
  690. .brand_main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);}
  691. /* .brand_main .post-visual .swiper-slide img::before{
  692. content:'';
  693. position:absolute;
  694. width:150px;
  695. height:120px;
  696. bottom:-50px;
  697. right:-65px;
  698. border:0px;
  699. transform:rotate(135deg);
  700. /* box-shadow:inset 0 -50px 30px -30px rgba(0,0,0,0.20);
  701. box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,0.20);
  702. box-shadow:inset 0px -60px 30px -50px rgba(0,0,0,0.20);
  703. background:#fff;
  704. background:linear-gradient(0deg, #fff 104px, transparent 0);
  705. z-index:1;
  706. z-index:9999;
  707. display:none;
  708. } */
  709. .brand_main .post-visual .swiper-slide img::after{
  710. content:'';
  711. position:absolute;
  712. width:150px;
  713. height:150px;
  714. bottom:30px;
  715. right:30px;
  716. background:#fff;
  717. border:0px;
  718. box-sizing:border-box;
  719. transform:rotate(135deg);
  720. box-shadow:0 -25px 10px -7px rgba(0,0,0,0.20);
  721. background:linear-gradient(135deg, #fff 80px, transparent 0);
  722. }
  723. .brand_main .post-visual .swiper-slide::before{
  724. content:'';
  725. position:absolute;
  726. width:230px;
  727. height:120px;
  728. bottom:-50px;
  729. right:-78px;
  730. border:0px;
  731. transform:rotate(135deg);
  732. /* box-shadow:inset 0 -50px 30px -30px rgba(0,0,0,0.20); */
  733. box-shadow:inset 0 -30px 20px -30px rgba(0,0,0,0.20);
  734. box-shadow:inset 0px -60px 20px -50px rgba(0,0,0,0.20);
  735. background:#fff;
  736. background:linear-gradient(0deg, #fff 104px, transparent 0);
  737. z-index:1;
  738. /*
  739. border-right:0px;
  740. border-left:0px;
  741. border-top:0px;
  742. border-bottom:1px;
  743. box-sizing:border-box;
  744. border-style:solid;
  745. transform:rotate(135deg);
  746. border-image:linear-gradient(-135deg, transparent 0%,rgb(0 0 0 / 23%) 100% );
  747. border-image-slice:160;
  748. */
  749. }
  750. .main .post-visual .swiper-button-prev {margin-right:600px;}
  751. .main .post-visual .swiper-button-next {margin-left:595px;}
  752. }
  753. /* popup_메인공지 */
  754. .popup_main_notice {position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:200;}
  755. .popup_main_notice .swiper-button-prev,
  756. .popup_main_notice .swiper-button-next {position:absolute; top:50%; transform:translateY(-50%); display:inline-block; width:60px; height:60px; background-image:url('/images/pc/btn_main_pop_arrow.png'); background-repeat:no-repeat; background-size:auto 100%; z-index:2;}
  757. .popup_main_notice .swiper-button-prev {left:0; background-position:0 50%;}
  758. .popup_main_notice .swiper-button-next {right:0; background-position:100% 50%;}
  759. .popup_main_notice .swiper-button-prev::after,
  760. .popup_main_notice .swiper-button-next::after {display:none; color:transparent;}
  761. .popup_main_notice .popup_content {position:relative; line-height:1; vertical-align:top; width:auto; min-width:400px; max-width:1200px;}
  762. .popup_main_notice .popup_content .popup_body {position:relative; background:#fff;}
  763. .popup_main_notice .popup_content .popup_body .swiper-slide {width:400px;}
  764. .popup_main_notice .popup_content .popup_footer {background:#222; height:60px; padding:23px 30px 0; box-sizing:border-box;}
  765. .popup_main_notice .popup_content .popup_footer::after {content:''; clear:both; display:block;}
  766. .popup_main_notice .popup_content .popup_footer a.btn_underline {display:inline-block; float:left; color:#888; font-size:14px; font-weight:200; border-color:#888}
  767. .popup_main_notice .popup_content .popup_footer a.btn_popup_close {display:inline-block; float:right; color:#fff; font-size:14px; font-weight:300;}
  768. .popup_main_notice .popup_body.onlyNotice .swiper-button-prev,
  769. .popup_main_notice .popup_body.onlyNotice .swiper-button-next {display:none;}