@charset "utf-8";/* CSS Document */ .box0 { width:1760px; margin:0 auto } .box1 { width:1420px; margin:0 auto } .box2 { width:1200px; margin:0 auto } .box3 { width: 1580px; margin: 0 auto; } .box4 { width: 720px; margin: 0 auto; } .hideT { display: none; } .gnb li.m_hide { display:none } .PHONE { display: none; } .visual_pc { display: block; } .visual_mo { display: none; } /*body:not(.pop) { display:flex; flex-wrap:wrap } */ body:not(.isIE) { height:100vh } body.body_adm { flex-wrap:nowrap; } #header, #footer, #contents { width:100%; box-sizing:border-box; /*overflow-x:hidden; */ } #footer { margin-top:auto; z-index:1 } #header { position: fixed; left:0; top:0; width:100%; z-index:1000; background: #fff; transition: transform .5s ease; } #header .etc_wrap { background: #111; } #header .etc_wrap .logo { } #header .etc_wrap .logo .in { } #header .etc_wrap .logo .in > img { height: 52px; object-fit: contain; } #header .etc_wrap .wrapH { height: var(--headerA); } #header .etc_wrap .wrapH > * { flex:1 } #header .etc_wrap .add_wrap { display: flex; } #header .etc_wrap .add .icon { position:relative; margin-right:.75em; margin-left: 1.5em; flex: unset; } #header .etc_wrap .add .icon .line { width:1px; margin-right:4px; position:relative } #header .etc_wrap .add .icon .line:before { content:""; position:absolute; left:0; bottom:0; width:100%; background:#fff; animation-name: lineAni; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate } #header .etc_wrap .add .icon .line.line1 { height:.625em; } #header .etc_wrap .add .icon .line.line2 { height:1.25em; } #header .etc_wrap .add .icon .line.line3 { height:1em; } #header .etc_wrap .add .icon .line.line4 { height:.3125em; } #header .etc_wrap .add .icon .line.line1:before { animation-delay: .2s; } #header .etc_wrap .add .icon .line.line2:before { animation-delay: .4s; } #header .etc_wrap .add .icon .line.line3:before { animation-delay: .6s; } #header .etc_wrap .add .icon .line.line4:before { animation-delay: .8s; } @keyframes lineAni {from { height:0 } to { height:100% } } #header .headerAddSlider { width: 100%; display: flex; align-items: center; } #header .headerAddSlider .el { display:flex; align-items:center; } #header .headerAddSlider .el .t1 { font-size:1.125em } #header .headerAddSlider .swiperPauseWrap { flex: unset; display: flex; align-items: center; justify-content: center; height: 100%; width: 2.5em; background: var(--siteC3); } #header .headerAddSlider .swiperPauseWrap .swiperBtn { border-radius: 0; width: auto; height: auto; color: #111; } #header .headerAddSlider .swiperPauseWrap .swiperBtn:hover { background: transparent; color: #111; } #header .headerAddSlider .audio_container { } #header .headerAddSlider .audio_container .tt { font-size: 1.063em; color: #fff; } #header .etc_wrap .menu_wrap { display:flex; justify-content:flex-end; color: #fff; } #header .etc_wrap .menu_wrap .menu > li > a { font-size:1.15em; opacity:1; padding:1.25em; margin:0 -1.25em 0 1.25em; font-family: 'Teko'; } #header .etc_wrap .menu_wrap .menu > li:hover > a { opacity: 1; text-decoration: underline; } #header .menu_wrap .gnb { font-family: 'Teko'; } #header .top_wrap .wrapH, #header .menu_wrap .gnb > li > .dp1 { height:var(--headerH); box-sizing:border-box; padding-bottom: 1.5em; } #header .menu_wrap .gnb > li > .dp1.layer { display: none; } #header .menu_wrap .gnb > li .dp2 .layer { display: none; } #header .top_wrap .wrapH { gap:3em; padding: 1.5em 0; } #header .top_wrap .logo > a { display:block; padding-left: 1.5em; } #header .top_wrap .logo > a .in { display:block } #header .top_wrap .logo > a .in img { display:block; height:3.15em; object-fit: contain; } #header .top_wrap .search_wrap { position:relative; margin-left:auto; } #header .top_wrap .search_wrap .btn { text-align:center; border:none; background:none; font-size: 1.25em; } #header .top_wrap .search_wrap .btn:hover { opacity:1 } #header .top_wrap .search_wrap .search_container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99; } #header .top_wrap .search_wrap .search_container .search_close { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0, .615); } #header .top_wrap .search_wrap .search_box { padding: 2.5em 0; position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index:12; } #header .top_wrap .search_wrap .search_box .inp { width:100%; height: 3.5em; border:1px solid #ccc; border:1px solid #ccc; padding:5px 10px; box-sizing:border-box; font-size:0.95em; color: #000; } #header .top_wrap .search_wrap .search_box .txtTop { margin-bottom: .5em; } #header .top_wrap .search_wrap .search_box .txtTop > .sech_close { font-size: 1.15em; cursor:pointer; opacity: .8; } #header .top_wrap .search_wrap .search_box .p1 { font-size: .938em; opacity: .8; font-weight:600; display:inline-block; padding-left:2px; } #header .top_wrap .search_wrap .search_box .p1 .st1 { color:#156ed2; font-size:1em; } #header .top_wrap .search_wrap .search_box .search_wrap { position: relative; display: flex; } #header .top_wrap .search_wrap .search_box .search_wrap > .inp { border: 2px solid #111; border-radius: .25em; } #header .top_wrap .search_wrap .search_box .search_wrap .sch { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); border: none; background: none; } #header .top_wrap .search_wrap_phone { position:relative; margin-left:auto; color:#fff } #header .top_wrap .search_wrap_phone .inp { height:2.875em; border-radius:2.5em; width:18em; padding:.5em 4em .5em 1.5em; border:none; background:rgba(255,255,255,.2); font-size:.875em; box-sizing:border-box; } #header .top_wrap .search_wrap_phone .inp::placeholder { opacity:.5; color:#fff } #header .top_wrap .search_wrap_phone .btn { position:absolute; right:0; top:0; width:4em; height:100%; text-align:center; border:none; background:none; opacity:.5 } #header .top_wrap .search_wrap_phone .btn:hover { opacity:1 } .searchOn .top_wrap .search_wrap .search_container { display: block !important; } #header .top_wrap .icon_wrap { display: flex; align-items: center; gap: 1em; } #header .top_wrap .icon_wrap .icon { gap: 0.5em; } #header .top_wrap .icon_wrap .icon > li > a { padding:.75em .75em; position:relative; border-radius: 50%; } #header .top_wrap .icon_wrap .icon > li > a .xi { font-size:2em } #header .top_wrap .icon_wrap .icon > li > a img { height:1.5em; } #header .top_wrap .icon_wrap .icon > li > a .no_wrap { position:absolute; left:50%; top:50%; transform:translate(25%, -100%); padding:0 .625em; border-radius:1em; background: var(--siteC3); color:#fff; font-size:.813em; box-sizing:border-box; height:1.75em; min-width:1.75em; display:flex; align-items:center } #header .top_wrap .icon_wrap .icon > li > a .ment { position:absolute; left:50%; top:100%; transform:translate(-50%, 25%); display:inline-flex; height:1.5em; background:var(--siteC4); color:#fff; border-radius:1em; white-space:nowrap; line-height:1; align-items:center; padding:0 1em; animation-name: mentAni; animation-duration: 2s; animation-iteration-count: infinite } #header .top_wrap .icon_wrap .icon > li > a .ment .t1 { font-size:.75em; font-weight:700 } #header .top_wrap .icon_wrap .icon > li > a .ment .arrow { position:absolute; left:50%; transform:translate(-50%, .25em); font-size:1em; bottom:100%; color:var(--siteC4) } @keyframes mentAni {0% { top:100% } 50% { top:calc(100% - .5em) } 100% { top:100% } } #header .cate_wrap .all_wrap .allBtn, #header .cate_wrap .mall_wrap .gnb > li > .dp1 { font-weight:500; font-size:1.125em; padding:.5em 1.5em } #header .cate_wrap .mall_wrap .gnb > li > .dp1 .va { position:relative } #header .cate_wrap .mall_wrap .gnb .dp2 { display:none } #header .cate_wrap .all_wrap .allBtn { padding-left:0 } #header .cate_wrap .all_wrap .allBtn .xi { font-size:1.75em; margin-right:.25em } #header .cate_wrap .mall_wrap .gnb > li.on > .dp1 { color:var(--siteC) } #header .cate_wrap .mall_wrap .gnb > li.on > .dp1 .va:after { content:""; position:absolute; left:100%; bottom:100%; width:1em; height:1em; border-radius:50%; background:var(--siteC); font-size:.375em } #header .menu_wrap { } #header .menu_wrap .gnb > li { position:relative; } #header .menu_wrap .gnb > li > .dp1 { position:relative; padding: 0 2em; font-weight:800; display:flex; align-items:center } #header .menu_wrap .gnb > li > .dp1:before { display:none } #header .menu_wrap .gnb > li > .dp1 .va { font-size:1.15em; font-weight: 600; text-transform:uppercase; position:relative; display:flex; align-items:center; gap:.5em } #header .menu_wrap .gnb > li.more > .dp1 .va:after { content:"\e943"; font-family:xeicon; font-size:.875em } #header .menu_wrap .gnb > li > .dp2 { position:absolute; left: 50%; transform: translateX(-50%); top:90%; width:10em; background: #111; padding:.5em 0 .5em 0; box-shadow:0 .5em .5em rgba(0,0,0,.05); display:block; transition:.3s; visibility:hidden; opacity:0; box-sizing:border-box } #header .menu_wrap .gnb > li > .dp2 > li > a { font-weight:700; color: #fff; } #header .menu_wrap .gnb > li > .dp2 > li .dp3, #header .menu_wrap .gnb > li > .dp2 > li .dp4 { display:none } #header .menu_wrap .gnb > li.on > .dp1 .va, #header .menu_wrap .gnb > li:hover > .dp1 .va { opacity:1 } #header .menu_wrap .gnb > li:hover > .dp2 { visibility:visible; opacity:1; top:100% } #header .menu_wrap .gnb > li > .dp2 > li > a { padding: .5em; text-align: center; } #header .menu_wrap .gnb > li > .dp2 > li > a .va { white-space:nowrap; font-size:1.063em; font-weight: 400; } #header .menu_wrap .gnb > li > .dp2 > li:hover > a { color: var(--siteC3); } #header .menu_wrap .gnb > li.st1 > .dp2 { display:flex; left:0; transform:none; width:auto; padding:1em 3em; gap:2em } #header .menu_wrap .gnb > li.st1 > .dp2 a { text-align:left } #header .menu_wrap .gnb > li.st1 > .dp2 > li { min-width:8em } #header .menu_wrap .gnb > li.st1 > .dp2 > li > a { position:relative; padding:0 } #header .menu_wrap .gnb > li.st1 > .dp2 > li > a .va:after { content:""; position:absolute; left:0; top:100%; width:100%; height:1px; background:#111 } #header .menu_wrap .gnb > li.st1 > .dp2 > li > a .va { font-weight:700; font-size:1.125em; position:relative } #header .menu_wrap .gnb > li.st1 > .dp2 > li .dp3 { display:flex; flex-direction:column; justify-content:flex-start; padding:1em 0 } #header .menu_wrap .gnb > li.st1 > .dp2 > li .dp3 > li > a { display:block; padding:.5em 0; color:#666 } #header .menu_wrap .gnb > li.st1 > .dp2 > li .dp3 > li > a .va { font-size:.938em } #header .menu_wrap .gnb > li.st1 > .dp2 > li .dp3 > li:hover > a { font-weight:700; color:var(--siteC) } #header .langWrap { position:relative } #header .langWrap .langBtn { border-radius:1.25em; height:2.5em; box-sizing:border-box; display:flex; align-items:center; gap:.25em; border:1px solid #666; width:6em; padding:0 .75em } #header .langWrap .langBtn .t1 { font-weight:800; font-size:.813em } #header .langWrap .langBtn .xi { font-size:1em } #header .langWrap .langBtn .arrow { margin-left:auto } #header .langWrap .list { position:absolute; width:100%; left:50%; transform:translateX(-50%); border:1px solid #666; box-sizing:border-box; border-radius:0 0 1em 1em; border-top:none; top:100%; background:#fff; visibility:hidden; opacity:0; overflow:hidden } #header .langWrap .list > li > a { padding:.5em 1em; display:flex; align-items:center } #header .langWrap .list > li > a .t1 { font-weight:800; font-size:.75em } #header .langWrap .list > li > a .ico { font-size:1em; margin-left:auto } #header .langWrap .list > li > a .ico:before { content:"\e980" } #header .langWrap .list > li > a:hover { background:#f1f1f1 } #header .langWrap.on .langBtn { border-radius:1em 1em 0 0; background:#666; color:#fff } #header .langWrap.on .list { visibility:visible; opacity:1 } #header .all_btn { position:relative; display:block; } #header .all_btn { width: 2em; height: 1.125em; display: block; } #header .all_btn .ham, #header .all_btn .ham:before, #header .all_btn .ham:after { display:block; width:100%; height:2px; background:#111; transition:.2s, background 0s; } #header .all_btn .ham:before, #header .all_btn .ham:after { content:""; position:absolute; left:0; } #header .all_btn .ham:before { top:calc(50% - 1px); width:75%; } #header .all_btn .ham:after { top:calc(100% - 2px); width:88%; } #header .all_btn:hover .ham:before { width:100%; } #header .all_btn:hover .ham:after { width:100%; } #header .all_wrap .all_layer { position:fixed; top:0; left: 0; height:100vh; width: 100%; opacity:0; visibility:hidden; pointer-events:none; } #header .all_wrap .all_layer .all_close { position:absolute; top:0; right:100%; width:100%; height:100%; background:rgba(0,0,0,.4); left: 30em; opacity:0; } #header .all_wrap .all_layer .all_close .all_btn { z-index:999; position:absolute; top:1em; left: 2em; width:3em; height:3em; transition:.3s; } #header .all_wrap .all_layer .all_close .all_btn .ham { background:transparent !important; transition:0s; } #header .all_wrap .all_layer .all_close .all_btn .ham:before, #header .all_wrap .all_layer .all_close .all_btn .ham:after { height:2px; width:100% !important; top:50% !important; background:#fff; } #header .all_wrap .all_layer .all_close .all_btn .ham:before { transform:rotate(45deg); } #header .all_wrap .all_layer .all_close .all_btn .ham:after { transform:rotate(-45deg); } #header .all_wrap .all_layer .all_close .all_btn:hover { transform:rotate(180deg); } #header .all_wrap .all_layer .all_inner { position:relative; width:30em; max-width:100%; height:100%; background:#fff; box-shadow:.5em 0 1em rgba(0,0,0,.15); } #header .all_wrap .all_layer .all_inner > .wrap_in { } #header .all_wrap .all_layer .wrap_top { padding-top:1.5em; } #header .all_wrap .all_layer .wrap_top .logo {margin-bottom: 1em;} #header .all_wrap .all_layer .wrap_top .logo img {width: 13em;} #header .all_wrap .all_layer .wrap_top a { transition:.2s; } #header .all_wrap .all_layer .wrap_top .all_name { gap:1em; padding:.5em 1em; } #header .all_wrap .all_layer .wrap_top .all_name .ico { font-size:2.500em; } #header .all_wrap .all_layer .wrap_top .all_name .name { flex:1; } #header .all_wrap .all_layer .wrap_top .all_name .name .tt { } #header .all_wrap .all_layer .wrap_top .all_name .name .t1 { font-size:1em; color:#555; } #header .all_wrap .all_layer .wrap_top .all_name .name .t2 { font-size:1.625em; } #header .all_wrap .all_layer .wrap_top .all_name .name .po { font-weight:700; vertical-align:baseline; } #header .all_wrap .all_layer .wrap_top .all_name .name a[href]:hover { text-decoration:underline; } #header .all_wrap .all_layer .wrap_top .all_name .info { display:flex; align-items:center; gap:1em } #header .all_wrap .all_layer .wrap_top .all_name .info .t1 { color:#999 } #header .all_wrap .all_layer .wrap_top .all_name .info .t1 .po { font-weight:700; color:#111 } #header .all_wrap .all_layer .wrap_top .all_name .info .t2 { font-weight:500; color:var(--siteC4) } #header .all_wrap .all_layer .wrap_top .all_mem { gap:.25em; padding:1em 1em; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in { height:2.25em; padding:0 1em; border:1px solid #ddd; border-radius:.25em; line-height:normal; display:flex; align-items:center } #header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size:.938em; font-weight:500; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { background:var(--siteC); border-color:var(--siteC); color:#fff; } #header .all_wrap .all_layer .wrap_top .all_menu { border:solid #eee; border-width:1px 0; } #header .all_wrap .all_layer .wrap_top .all_menu > li { flex:1; } #header .all_wrap .all_layer .wrap_top .all_menu > li .in { gap:.375em; height:4.5em; padding:0 .5em; } #header .all_wrap .all_layer .wrap_top .all_menu > l#header .all_wrap .all_layer .wrap_middlei .ico { padding-top: .7em; } #header .all_wrap .all_layer .wrap_top .all_menu > li .ico img { height:1.25em; } #header .all_wrap .all_layer .wrap_top .all_menu > li .tt { font-size:.875em; font-weight:500; } #header .all_wrap .all_layer .wrap_top .all_menu > li .in:hover { background: var(--siteC); } #header .all_wrap .all_layer .wrap_top .all_menu > li .in:hover .ico img { filter: invert(1); } #header .all_wrap .all_layer .wrap_top .all_menu > li .in:hover .tt { color: #fff; } #header .all_wrap .all_layer .wrap_middle { padding:1em 1em 1em 1em; background:#f4f4f4; } #header .all_wrap .all_layer .wrap_middle .all_cate { } /* #header .all_wrap .all_layer .wrap_middle .all_gnb { margin-top:1em; } */ #header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap:wrap; } #header .all_wrap .all_layer .wrap_middle .gnb > li { flex:1 1 100%; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_best, #header .all_wrap .all_layer .wrap_middle .gnb > li.m_new { flex:1 1 50%; margin-top:1em; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1, #header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1 { display:flex; align-items:center; justify-content:center; gap:0 .25em; border-left-width:1px; margin-left:-1px; text-align:center; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1 .arrow, #header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1 .arrow { order:-1; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_best .dp1 .arrow:before { content:"\ec0d"; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_new .dp1 .arrow:before { content:"\ea16"; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_member { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb ul.flex { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb a { position:relative; text-align:left; font-weight:500; transition:.2s; } #header .all_wrap .all_layer .wrap_middle .gnb .m_hide { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb li.more { } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link { display:none; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display:block !important; padding-right:2.5em; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow { position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before { content:"\e943"; font-size:1.250em; display:block; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > ul { display:none; } #header .all_wrap .all_layer .wrap_middle .gnb li.more.open > a .arrow:before { transform:rotate(-180deg); } #header .all_wrap .all_layer .wrap_middle .gnb li.more.open > ul { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb li.m_guide { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb > li:hover .dp1, #header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1, #header .all_wrap .all_layer .wrap_middle .gnb > li.more.open .dp1 { background:var(--siteC); color:#fff; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.more.open > a { color:var(--siteC); } #header .all_wrap .all_layer .wrap_middle .gnb ul { padding:1em 1em; } #header .all_wrap .all_layer .wrap_middle .gnb ul li > a { padding:.75em .5em; } #header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow { right:.5em; } #header .all_wrap .all_layer .wrap_middle .gnb > li { background:#fff; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { height:3.75em; line-height:3.75em; padding:0 1.5em; border-width:1px 0; margin-bottom:-1px; text-transform:uppercase } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_brand .dp1.layer { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_mall { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .va { font-size:.938em } #header .all_wrap .all_layer .wrap_middle .gnb > li .min_dp1 { background: #8c9295 !important; height: 3em; line-height: 3em; } #header .all_wrap .all_layer .wrap_middle .gnb > li .min_dp1:before { background: #fff !important; } #header .all_wrap .all_layer .wrap_middle .gnb > li .min_dp1 .va { font-size: 1em; } #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > .dp2 { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a { padding-left:1.5em; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li:hover > a { background: #d5e8f1; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before { content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC); border-radius:50%; transform:translateY(-50%); } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a.layer { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .va { font-size:.938em; } #header .all_wrap .all_layer .wrap_middle .gnb > li.more .dp1 { position:relative; padding-right:2em } #header .all_wrap .all_layer .wrap_middle .gnb > li.more .dp1:after { font-family:xeicon; position:absolute; right:1em; top:50%; transform:translateY(-50%); content:"\e943" } #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > .dp3 { display: block; background: #f4f4f4; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a { color:#444; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a { border-top:1px dashed #ddd; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li:hover > a .va { text-decoration:underline; } #header .all_wrap .all_layer .wrap_middle .gnb .dp4 { display: none !important; } #header .all_wrap .all_layer .wrap_middle .gnb li.m_shop .dp3 > li:hover { background: #f4f4f4; } #header .all_wrap .all_layer .wrap_middle.st2 .gnb > li.m_shop { display:none } #header .all_wrap .all_layer .wrap_bottom { padding:1em 1em 3em 1em; background:#fff; gap: 0.5em; } #header .all_wrap .all_layer .wrap_bottom li { width: 50%; text-align: center; border: 1px solid #ddd; } #header .all_wrap .all_layer .wrap_bottom li > a { padding: 0.8em; font-weight: 700; display: block; } #header .all_wrap .all_layer .wrap_bottom li:hover > a, #header .all_wrap .all_layer .wrap_bottom li.on > a { background: var(--siteC); color: #fff; } .scroll #header { transform: translateY(-100%); } .scroll.up #header { transform: translateY(0%); } .allGnbOn { overflow-y:hidden } .allGnbOn body { overflow-y:scroll } .allGnbOn #header .all_wrap .all_layer { z-index:99; opacity:1; visibility:visible; pointer-events:all; } .allGnbOn #header .all_wrap .all_layer .all_close { opacity:1; transition:.4s; } .allGnbOn #header .all_wrap .all_layer .all_inner { transform:translateX(0%); transition:.4s; } #footer { background:#111; } #footer .gotop { position:fixed; right:1em; bottom:1em; width:3.5em; line-height:3.5em; background:#000; text-align:center; color:#fff; border-radius:50%; transition:.3s; transform:translateY(100%); opacity:0; visibility:hidden; border:1px solid rgba(255,255,255,.2); z-index:3; } #footer .gotop .xi { font-size:1.5em } #footer .gotop:hover { background: #aaa; color:#000 } body.scroll #footer .gotop { transform:translateY(0); opacity:1; visibility:visible } #footer .wrapIn { display:flex; align-items:flex-start; gap:4em; padding:4em 0; color: #fff; } #footer .logo_wrap { display:flex; flex-wrap:wrap; align-items:center; gap:3em; flex:1 1 0%; min-width:0 } #footer .logo_wrap .logo img { display:block; height:3em; filter: brightness(0) invert(1); } #footer .info { width:100% } #footer .info > li { float:left; margin-right:2em; font-size: .938em; font-weight:400; opacity:.8; margin-bottom:.5em; } #footer .info > li.br { clear:left } #footer .info:after { content:""; display:block; clear:both } #footer .info > li.copyright { font-size:.75em; opacity:.5; text-transform:uppercase; letter-spacing:0; margin-top:1.5em } #footer .menu { display:flex; gap:3em } #footer .menu > li > a { font-weight:500; color:#777; font-family: 'Teko'; } #footer .menu > li.point > a { font-weight:600; color:#fff } #footer .menu > li:hover > a { color:#fff } #footer .menu > li.point:hover > a { color:var(--siteC3) } #footer .menu_wrap, #footer .etc_wrap { margin-top:1em } #footer .menu_wrap .gnb { font-family: 'Teko'; } #footer .menu_wrap .gnb > li:not(.m_shop, .m_community), #footer .menu_wrap .gnb > li.st1 > .dp1, #footer .menu_wrap .gnb > li:not(.st1) .dp3, #footer .menu_wrap .gnb > li .dp4 { display:none } #footer .menu_wrap .gnb a { text-align:left } #footer .menu_wrap .gnb a.layer { display: none; } #footer .menu_wrap .gnb > li.st1 .dp2 > li, #footer .menu_wrap .gnb > li:not(.st1) { min-width:10em } #footer .menu_wrap .gnb > li.st1 .dp3, #footer .menu_wrap .gnb > li:not(.st1) .dp2 { flex-direction:column } #footer .menu_wrap .gnb > li.st1 .dp2 > li > a .va, #footer .menu_wrap .gnb > li:not(.st1) .dp1 .va { font-weight:600; margin-bottom:1em; text-transform:uppercase } #footer .menu_wrap .gnb > li.st1 .dp3 > li > a .va, #footer .menu_wrap .gnb > li:not(.st1) .dp2 > li > a .va { font-weight:500; font-size:1.063em; padding-bottom: .35em; color:#777 } #footer .menu_wrap .gnb > li.st1 .dp3 > li:hover > a .va, #footer .menu_wrap .gnb > li:not(.st1) .dp2 > li:hover > a .va { color:#fff } #footer .etc_wrap { display:flex; flex-direction:column; align-items:flex-start; gap:1em; width: 25%; } #footer .cs_wrap .t1 { font-weight:500; font-size:1.125em; color:#fff } #footer .cs_wrap .call { display:flex; align-items:center; gap:.5em; } #footer .cs_wrap .call .xi { width:2em; height:2em; background:#111; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1em } #footer .cs_wrap .call .no { font-weight:700; font-size:2.25em; } #footer .cs_wrap .t2 { font-size:.875em; line-height:1.5 } #footer .sns_wrap { display:flex; gap:1em } #footer .sns_wrap > li > a { color:#999; width:2em; height:2em; border-radius:50%; display:flex; align-items:center; justify-content:center } #footer .sns_wrap > li > a .xi { font-size:1.5em } #footer .sns_wrap > li:hover > a { color: #fff; } #footer .site_wrap { position:relative; z-index:1 } #footer .site_wrap .btn { display:block; padding:.75em 1em; padding-right:3em; background:#fff; width:9em; position:relative; } #footer .site_wrap .btn .xi { position:absolute; right:0; width:2.5em; text-align:center; top:50%; line-height:1em; margin-top:-.5em; transition:.3s; font-size:1em } #footer .site_wrap .btn .tt { font-weight:700; font-size:.875em; color:#666 } #footer .site_wrap .siteBtn { border:1px solid rgba(255,255,255,.2); font-weight:500 } #footer .site_wrap .list { position:absolute; bottom:100%; width:100%; transition:.3s; opacity:0; visibility:hidden } #footer .site_wrap .list .btn { overflow:hidden } #footer .site_wrap .list .btn .xi { right:-2em } #footer .site_wrap .list .btn .xi:before { transform:scale(.75) } #footer .site_wrap .list .btn:hover { background:#ddd; color:#111 } #footer .site_wrap .list .btn:hover .xi { right:0 } #footer .site_wrap.on .list { opacity:1; visibility:visible } #footer .site_wrap.on .siteBtn .xi { transform:rotate(180deg) } #contents .sub_nav_st { display:flex; justify-content:center; align-items:center; gap:.5em; margin-top:1.5em } #contents .sub_nav_st > li { color:#666; display:flex; gap: inherit; font-size: 1.063em; align-items:center; text-transform: uppercase; } #contents .sub_nav_st > li > .tt { } #contents .sub_nav_st > li:before { content:""; display:block; width:1em; height:1px; background:#ccc } #contents .sub_nav_st > li:first-child:before { display:none } #contents .sub_nav_st > li.home { background: transparent; color: var(--siteC3); border-radius:50%; display:flex; align-items:center; justify-content:center; width:2em; height:2em; } #contents .sub_tit { /* text-align:center; padding:5vmin 0; background:#f5f5f5 */ font-family: 'Teko'; padding-top: 3.5em; } #contents .sub_tit .t1 { font-size:1.125em; text-transform:uppercase; font-weight:300; margin-bottom:.25em; color:#999 } #contents .sub_tit .t2 { font-size:3.515em; line-height: 1; font-weight:500; text-transform:uppercase } #contents .sub_tab { margin-top:2em } #contents .sub_tab .gnb > li, #contents .sub_tab .gnb > li.st1 > .dp2 > li { width:100% } #contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3, #contents .sub_tab .gnb > li:not(.st1) > .dp2 { justify-content:center; gap:1em } #contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li { width:calc(16.66% - .83333em) } #contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li > a, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a { display:flex; justify-content:center; align-items:center; height:4.25em; background:#fff; padding:.5em; color:#777; position:relative; box-sizing:border-box; border: 1px solid #ddd; } #contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li:hover > a, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li:hover > a { background: #ddd; color: #333; } #contents .sub_tab .gnb > li.st1 > .dp2 > li .dp3 > li > a.layer, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a.layer { display: none; } #contents .sub_tab .gnb > li.st1 > .dp2 > li > .dp3 > li > a .va, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li > a .va { font-weight:700; font-size:1.125em } #contents .sub_tab .gnb > li.st1 > .dp2 > li.on .dp3 > li.on > a, #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li.on > a { background:#111; color:#fff; padding-top:.25em } #contents .sub_tab.dp2on .dp3, #contents .sub_tab.dp3on .dp4 { display:none } #contents .sub_tabS { } #contents .sub_tabS .gnb .flex { justify-content:center } #contents .sub_tabS .gnb > li.on { width:100% } #contents .sub_tabS .gnb > li.st1 .dp4 > li.on, #contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on { width:auto } #contents .sub_tabS .gnb > li.st1 .dp4 > li > a, #contents .sub_tabS .gnb > li:not(.st1) .dp3 > li > a { padding:1em 2em } #contents .sub_tabS .gnb > li.st1 .dp4 > li > a .va, #contents .sub_tabS .gnb > li:not(.st1) .dp3 > li > a .va { font-weight:800; color:#999; font-size:1.438em; position:relative } #contents .sub_tabS .gnb > li.st1 .dp4 > li.on > a .va, #contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on > a .va { color:#111 } #contents .sub_tabS .gnb > li.st1 .dp4 > li.on > a .va:before, #contents .sub_tabS .gnb > li:not(.st1) .dp3 > li.on > a .va:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#111 } #contents .sub_tab li.m_mall, #contents .sub_tabS li.m_mall { display:none !important } #contents .sub_tit > div { display:flex; justify-content:space-between; align-items:center; } #contents .sub_tit .sub_nav_st { margin-top:0 } #contents .sub_tit { } #contents .sub_tab .gnb > li:not(.st1) > .dp2 { justify-content:flex-start; font-size:.875em } #contents .sub_tab .gnb > li:not(.st1) > .dp2 > li { width:calc(12.5% - .0875em) } .dp1on .gnb .dp2 { display:none!important } .dp2on .gnb > li, .dp2on .gnb > li .dp1, .dp2on .gnb > li .dp3 { display:none!important } .dp2on .gnb > li.on { display:block!important } .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a { display:none!important } .dp3on .gnb > li.on, .dp3on .gnb > li.on .dp2 > li.on { display:block!important } .dp4on .gnb > li, .dp4on .gnb > li .dp1, .dp4on .gnb > li .dp2 > li, .dp4on .gnb > li .dp2 > li > a, .dp4on .gnb > li .dp2 > li > .dp3 > li, .dp4on .gnb > li .dp2 > li > .dp3 > li > a { display:none!important } .dp4on .gnb > li.on, .dp4on .gnb > li.on .dp2 > li.on, .dp4on .gnb > li.on .dp2 > li.on .dp3 > li.on { display:block!important } .dp1_mall #contents .doc { padding:1.5em 0 10em 0 } #contents .doc { padding: 3em 0 10em 0; } /**/ .login_wrap .login { width:32em; max-width:94%; margin:0 auto } .login_wrap .login.w1 { width:38em } .login_wrap .login .tabIdx { margin-bottom:1em } .login_wrap .link_wrap { padding:0 .5em; margin:1em 0 } .login_wrap .link_wrap .link { font-size:.938em; margin:0 1em; color:#666 } .login_wrap .link_wrap .link .tt { padding:0 .25em; display:inline-block } .login_wrap .link_wrap .link:hover .tt { text-decoration:underline; color:#111 } .login_wrap .check_wrap { margin:.75em 0 0 0 } .login_wrap .btn_wrap { margin-top:2em } .login_wrap .btn_wrap + .btn_wrap { margin-top:.5em } .login_wrap .btn_wrap .btn { padding:0 2em; height:3.5em; box-shadow:1px 1px 2px rgba(0,0,0,.2); background:#111; color:#fff; border:none; width:100%; box-sizing:border-box; border:2px solid transparent; margin-bottom:.5em; font-size:1.063em; font-weight:500; border-radius:.25em; font-weight:700 } .login_wrap .btn_wrap .btn.c1 { border-color:#333; color:#333; background:#fff } .login_wrap .btn_wrap .btn.c2 { background:var(--siteC); border-color:var(--siteC); color:#fff } .login_wrap .btn_wrap .btn:hover { } .login_wrap .btn_wrap .btn.c1:hover { } .login_wrap .btn_wrap .btn.c2:hover { } .login_wrap .btn_wrap .btn.s1 { font-size:1em } .login_wrap .btn_wrap .btn.s2 { font-size:.875em } .login_wrap .btn_wrap .btn.w1 { width:49% } .login_wrap .btn_wrap .btn.sns_naver { background:#2db400; } .login_wrap .btn_wrap .btn.sns_kakao { background:#ffe812; color:#000 } .login_wrap .tt_st { color:var(--siteC) } .form_wrap { border:1px solid #ddd; border-radius:1em; padding:3em } .form_wrap .tit_wrap { float:left; width:20% } .form_wrap .tit_wrap .in { border-top:2px solid #333; padding:1.125em } .form_wrap .con_wrap { float:right; width:75% } .form_st { } .form_st > li { margin-top:1em } .form_st > li:first-child { margin-top:0 } .form_st > li .in { position:relative; padding:0 1em 0 4em; margin-top:.5em } .form_st > li .in .icon { position:absolute; left:0; top:50%; width:3em; line-height:3em; margin-top:-1.5em; text-align:center; color:#666 } .form_st > li .in .icon:before { font-size:1.313em } .form_st > li .in .lab { position:absolute; left:4em; top:50%; line-height:1em; margin-top:-.5em; color:#999; background:#fff; padding:0 .25em } .form_st > li .in .inp { width:100%; box-sizing:border-box; padding:1em 0; height:4em; border:none; position:relative; z-index:1; background:none; font-weight:bold; color:#666 } .form_st > li .in .inp[type=file] { padding:0 !important; height:3em } .form_st > li .in .inp[readonly=readonly] { background:#f5f5f5 } .form_st > li .in textarea.inp { height:10em; padding:1em !important } .form_st > li .in .line { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; transition:.3s; border-radius:.25em } .form_st > li .in .inp:focus ~ .lab, .form_st > li .in .inp.on ~ .lab { transform:scale(.9,.9); top:0; color: #111; margin-left:-.5em; transition:.3s } .form_st > li .in .inp:focus ~ .icon, .form_st > li .in .inp.on ~ .icon { color:#333 } .form_st > li .in .inp:focus ~ .line, .form_st > li .in .inp.on ~ .line { border-color: #111; } .form_st > li .in .inp.c1 { background:#f1f1f1 } .form_st.st1 > li { display:flex; flex-wrap:wrap; align-items:center } .form_st.st1 > li:not(.btn_wrap) { margin-top:1em } .form_st.st1 > li.line { margin-top:1.25em; padding-top:1.25em; border-top:1px solid #111 } .form_st.st1 > li.line > .label_st { width:100%; margin-top:-1em } .form_st.st1 > li.line2 { border-top:1px solid #ddd; padding-top:1em !important } .form_st.st1 > li .in { padding:0; flex:1 1 1%; min-width:0; word-break:break-all } .form_st.st1 > li .in_sec { width:1.5em; text-align:center; color:#999; display:inline-block } .form_st.st1 > li .in_sec2 { width:.5em } .form_st.st1 > li .in_br { flex-basis:100% } .form_st.st1 > li .in_tit { font-weight:600; font-size:1em; width:100% } .form_st.st1 > li .in_tit .ess:before { font-size:.875em; margin-left:.5em } .form_st.st1 > li .in_tit.c1 { color:#777 } .form_st.st1 > li .in_tit.s1 { font-size:1.25em } .form_st > li .in_tt { width:100%; color:#777; font-size:.938em; margin-top:1em; line-height:1.5 } .form_st.st1 > li .in.fix { flex:0 0 auto } .form_st.st1 > li .in .inp { padding:1em 1em; height:3.5em; font-size:.938em; font-weight:400 } .form_st.st1 > li .in .inp[type=file] { height:3em } .form_st.st1 > li .in .inp.s1 { font-size:1em } .form_st.st1 > li .in .btn { color:#fff } .form_st.st1 > li .in .btn + .line { background:#333; border-color:transparent } .form_st.st1 > li .in .w100 { width:100% } .form_st.st1 > li .in.w1 { max-width:26% } .form_st.st1 > li .in.w50 { max-width:50% } .form_st.st1 > li .in.w100 { flex-basis:100% } .form_st.st1 > li .agree { border:1px solid #ddd; width:100%; margin:.75em 0; border-radius:.25em } .form_st.st1 > li .agree > li { padding:.75em 1em; position:relative; transition:.3s } .form_st.st1 > li .agree > li.all { border-bottom:1px solid #ddd } .form_st.st1 > li .agree > li .more { background:#aaa; color:#fff; padding:.25em 1em; font-size:.875em } .form_st.st1 > li .agree > li .more:before { content:"보기" } .form_st.st1 > li .agree > li .agree_box { display:none } .form_st.st1 > li .agree > li .on .more { background:#333 } .form_st.st1 > li .agree > li .on .more:before { content:"접기" } .form_st.st1 > li .agree > li .on .agree_box { display:block } .form_st.st1 > li.flex { padding:0 .5em } .form_st.st1 > li.flex .in_tit { flex-basis:8em; font-size:.938em; padding-left:0; height:4em; display:flex; align-items:center } .form_st.st1 > li.flex .in { margin-top:0 } .form_st.st1 > li.flex .in.w100 { margin-left:8em } .form_st.st1 > li.flex .in .inp { font-size:.938em } .form_st.text { border-bottom:1px solid #ddd } .form_st.text > li { border-top:1px solid #ddd; margin-top:0 } .form_st.text > li .in .t1 { font-size:.938em; color:#666 } .form_st.text > li .in a:hover { text-decoration:underline } .fin_wrap { border:1px solid #ddd; padding:2em 4em 4em 4em; text-align:center; box-sizing:border-box } .fin_wrap.w1 { width:70em; margin:0 auto; max-width:94%; padding:2em 2em 4em 2em; } .fin_wrap .fin_icon { opacity:.1; font-size:4em } .fin_wrap .fin_tit { font-weight:300; font-size:2em; } .fin_wrap .fin_tit:after { content:""; display:block; margin:.75em auto; width:1em; height:1px; background:#aaa } .fin_wrap .fin_tt { color:#888; line-height:1.6 } .fin_wrap .fin_tt.t1 { color:#666; font-size:1.188em } .fin_wrap.st1 { border:none; padding:0 } .agree_box { border:1px solid #ddd; box-shadow:1px 1px 1em rgba(0,0,0,.2); padding:2em } .agree_box .tit { font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em } .agree_box .tit:first-child { margin-top:0 } .agree_box .con { font-size:.938em; color:#666; line-height:1.8em } .agree_box .con.h1 { height:10.8em; overflow-y:auto } .agree_box .con * { vertical-align: top } .agree_box .check { border-top:1px solid #ddd; margin-top:1.5em; padding-top:1em } .agree_box .con h3, .agree_box .con h4 { margin-top:1em; font-weight:700 } .agree_box.st1 { box-shadow:none; padding:1.5em; background:#f9f9f9 } .label_st.agree_box ul { margin-top:1em } .agree_box table { margin:1em 0; width:100% } .agree_box table th, .agree_box table td { border:1px solid #ddd; padding:1em } .agree_box table th { background:#f5f5f5 } .agree_box p strong { font-size:1.125em; color:#333 } .agree_box a { vertical-align:top; color:#666; text-decoration:underline } .agree_box a:hover { opacity:.6 } .agree_box strong { vertical-align:top; font-weight:500 } /**/ .mall_list_top { padding:0 0 2.5em 0 } .mall_list_top .tit_wrap { padding:1em 0; border-bottom:1px solid #222 } .mall_list_top .tit_wrap .tit { font-size:2.25em; font-weight:700 } .mall_list_top .tit_wrap .sub_nav_st { margin-left:auto } .mall_list_top .gnb_wrap { position:relative } .mall_list_top .gnb_wrap:before { content:""; position:absolute; right:0; bottom:0; width:100%; height:1px; background:#eee } .mall_list_top .gnb_wrap:after { content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff } .mall_list_top .gnb_wrap .gnb > li.on { display:flex; flex-wrap:wrap; width:100%; } .mall_list_top .gnb_wrap .all { width:14.28%; position:absolute; left:0; top:0 } .mall_list_top .gnb_wrap .gnb > li .dp2 { flex-wrap:wrap } .mall_list_top .gnb_wrap .gnb > li .dp2 > li { width:14.28% } .mall_list_top .gnb_wrap .gnb > li .dp2 > li:first-child { margin-left:14.28% } .mall_list_top .gnb_wrap a { padding:.5em 1.5em; height:4em; border-bottom:1px solid #eee; box-sizing:border-box; display:flex; align-items:center; font-weight:300; color:#666; position:relative } .mall_list_top .gnb_wrap a:after { content:""; position:absolute; right:-1px; top:0; width:1px; height:100%; background:#eee } .mall_list_top .gnb_wrap a.dp1 { font-weight:500; color:#111 } .mall_list_top .gnb_wrap .all.on, .mall_list_top .gnb_wrap .dp2 > li.on a { font-weight:500; color:#111 } .mall_list_top .gnb_wrap a .va:after { content:"\e942"; font-family:xeicon; margin:0 .5em; vertical-align:middle } .mall_list_top .gnb_wrap a .va { font-size:1.063em } .mall_prod_wrap { } .prod_list { gap: 2em; } .prod_list > li { width: calc((100% - 4em) / 3); margin-bottom: 2.5em; } .prod_list > li .wrap_in { cursor:pointer } .prod_list > li .wrap_in .wrap_img { overflow:hidden; position:relative; background: var(--siteGray); } /* .prod_list > li:hover .wrap_in .wrap_img .resize { transform: scale(1.2); transition: .3s; } */ .prd_icon_wrap { position:absolute; left:0; top:0; display:flex; font-family: 'Teko'; } .prd_icon_wrap .prd_icon { display:flex; justify-content:center; align-items:center; padding:.415em 1em; color:#fff; font-size:.938em; text-transform: uppercase; } .userHome .prd_icon_wrap .prd_icon { font-weight:500 } .prd_icon_wrap .prd_icon.icon_sold { background:#111; } .prd_icon_wrap .prd_icon.icon_best { background: var(--siteC3); } .prd_icon_wrap .prd_icon.icon_sale { background: #d91313; } .prd_icon_wrap .prd_icon.icon_new { background: var(--siteC2); } .prod_list > li .wrap_in .wrap_con { padding-top: 1.5em; text-align: center; } .prod_list.d1 > li { width:20% } .prod_list.d1 > li .wrap_in .wrap_con { font-size:.813em } .mall_view_top { padding:0 0 5em 0; gap: 4em; } .mall_view_top .prod_img { width: 55%; } .mall_view_top .prod_info { width: 45%; } .mall_view_top .prod_img .imgBig { background:#f5f5f5 } .mall_view_top .prod_img .imgBig img { display:block; width:100%; height: 70vh; object-fit: contain; } .mall_view_top .prod_img .prodImgList { display: flex; gap: 2em; flex-wrap: wrap; } .mall_view_top .prod_img .prodImgList > li { width: calc((100% - 2em) / 2); } .mall_view_top .prod_img .prodImgList > li > .imgCon { background: var(--siteGray); height: 54vh; } .mall_view_top .prod_img .prodImgList > li > .imgCon > img { width: 100%; height: 100%; object-fit: cover; } .mall_view_top .prod_info { padding:0 0 } .mall_view_top .prod_info .tit_wrap { font-family: 'Teko'; } .mall_view_top .prod_info .tit_wrap .tit { font-weight: 600; font-size: 3.15em; line-height: 1.1; } .mall_view_top .prod_info .tit_wrap .t1 { opacity:.3; font-size:1.125em; margin-bottom:.375em; word-spacing:.125em } .mall_view_top .prod_info .tit_wrap .t2 { font-size:1.063em; font-weight:500; margin-top:1em; color:#777 } .mall_view_top .prod_info .tit_wrap .t3 { font-size:1.05em; font-weight:500; margin-top:1em; color:#777 } .mall_view_top .prod_info .prod_price { margin-top:1.5em; font-family: 'Teko'; } .mall_view_top .prod_info .info_wrap { margin:1em 0 2em 0 } .mall_view_top .prod_info .info_wrap .list { border-top:1px solid #eee; padding:.5em 0 } .mall_view_top .prod_info .info_wrap .list > li { padding:.75em 0 } .mall_view_top .prod_info .info_wrap .list .tit { width:7em; margin-right:1em } .mall_view_top .prod_info .info_wrap .list .tit .t1 { font-weight:700; font-size:1.063em } .mall_view_top .prod_info .info_wrap .list .con .t1 { font-weight:400; color:#666 } .mall_view_top .prod_info .op_wrap { } .mall_view_top .prod_info .op_wrap > li { } .mall_view_top .prod_info .op_wrap > li:not(:first-child) { margin-top:1em } .mall_view_top .prod_info .op_wrap > li .wrap_in { display:flex; align-items:center; padding:.5em 2em; background:#f5f5f5 } .mall_view_top .prod_info .op_wrap > li .wrap_in:first-child { padding-top:1.5em } .mall_view_top .prod_info .op_wrap > li .wrap_in:last-child { padding-bottom:1.5em } .mall_view_top .prod_info .op_wrap > li .wrap_in .wrap1 { width:10em } .mall_view_top .prod_info .op_wrap > li .wrap_in .wrap2 { flex:1 } .mall_view_top .prod_info .op_wrap > li .wrap_in .tit { font-size:1.063em; letter-spacing: 0; } .mall_view_top .prod_info .op_wrap > li .wrap_in .tt_price { text-align: right; width:120px; } .mall_view_top .prod_info .op_wrap > li .wrap_in .option_btns .tt_price { font-size:1em } .mall_view_top .prod_info .total_price { margin:2.5em 0 } .mall_view_top .prod_info .total_price .tt_price { font-size:1em } .mall_view_top .prod_info .buy_btn_wrap .btn { height:3.5em; min-width:3.5em; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; border:1px solid transparent; background:#fff; font-size:1.188em; font-weight:700 } .mall_view_top .prod_info .buy_btn_wrap .btn:before { font-family:xeicon; font-weight:normal; font-size:1.25em; margin-right:.25em } .mall_view_top .prod_info .buy_btn_wrap > li.btnWish { margin-left:1em } .mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn { color:#111; background:#fff; border-color:#111 } .mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn { color:#fff; background:#111; border-color:#111 } .mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn:hover { } .mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:hover { } .mall_view_top .prod_info .buy_btn_wrap > li.btnCart .btn:before { content:"\e9fb" } .mall_view_top .prod_info .buy_btn_wrap > li.btnBuy .btn:before { content:"\ea77" } .mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn { background:#f1f1f1 } .mall_view_top .prod_info .buy_btn_wrap > li.btnWish .btn:hover { } .mall_view_top .prod_info .buy_btn_wrap.on { position:fixed; left:50%; bottom:0; z-index:1; width:50em; max-width:100%; transform:translateX(-50%) } .mall_view_top .prod_info .buy_btn_wrap.on > li.btnWish { margin-left:0 } .mall_view_con .view_tab { max-width:none } .mall_view_con .view_tab.on { position:fixed; top:0; z-index:1; left: 0; width: 100%; } .mall_view_con .view_con { padding:4em 0; } .mall_view_con .view_con img { } .vol_st { padding-left:1px } .vol_st .btn, .vol_st .inp { width:2.5em; line-height:2.5em; height:2.5em; text-align:center; border:1px solid #ddd; background:#fff; margin-left:-1px } .vol_st .inp { width:3.5em; box-sizing:border-box; font-family:gs,sans-serif } .vol_st .btn:hover { background: #333; color: #fff; } .vol_st .btn .xi { font-size:1em } .vol_st .btn.down .xi:before { content:"\e91a" } .vol_st .btn.up .xi:before { content:"\e913" } .vol_st.st1 { font-size:.875em } .vol_st.st1 .inp { width:3em } .zoomWrap { position: relative; } .zoomWrap .magnifierWrap { position:absolute; left:100%; margin-left:5em; top:0; width:100%; height:100%; overflow:hidden; z-index: 5; box-shadow:0 0 1em rgba(0,0,0,.1); display: none; background-color:#fff } .zoomWrap .magnifierWrap .magnifier { position:absolute; background-repeat:no-repeat; background-size:100% 100%; } .zoomWrap .pointer { position:absolute; width:30%; height:30%; background:rgba(0,0,0,.1); transform:translate(-50%,-50%); display:none } .zoomThumbWrap { margin-top: .5em; display: flex; gap: .5em; } .zoomThumbWrap > li { width: calc((100% - 3.5em) / 8); } .zoomThumbWrap > li .in { border:2px solid transparent; background: var(--siteGray); height: 6.36em; overflow: hidden; } .zoomThumbWrap > li.on .in { border-color:var(--siteC3); } .tooltipWrap { position:relative } .tooltipWrap .tooltip { position:absolute; background:#fff; border:2px solid #333; bottom:calc(100% + 1em); padding:2em 1.5em; min-width:18em; box-sizing:border-box; display:none; box-shadow:0 0 1em rgba(0,0,0,.1); z-index:3; } .tooltipWrap.on .tooltip { display:block } .tooltipWrap .tooltip:after { content:""; width:1em; height:1em; border:2px solid #333; position:absolute; left:2.5em; bottom:0; transform:rotate(45deg); transform-origin:left bottom; background:#fff; border-top:none; border-left:none; margin-bottom:-2px } .tooltipWrap .tooltip .twrap { margin-bottom:.75em } .tooltipWrap .tooltip .twrap .t1 { font-weight:700; font-size:1.063em } .tooltipWrap .tooltip .twrap .t2 { color:#999; font-size:.938em; margin-top:.25em } .tooltipWrap .tooltip .closeBtn { position:absolute; right:0; top:0; width:2.5em; line-height:2.5em; text-align:center } .tooltipWrap .tooltip .closeBtn:before { font-family:xeicon; content:"\e921" } .mall_total_wrap { padding:1em 2em; text-align:right; background:#f5f5f5; border-bottom:1px solid #ddd } .mall_total_wrap .tt_price { display: flex; } .mall_total_wrap .tt_price .tn { font-size: 1.215em; } .mall_order_wrap { position:relative; padding-right:24em } .mall_order_wrap .mall_order_con { position:relative; z-index:1 } .mall_order_wrap .mall_order_fix { position:absolute; right:0; top:0; width:100%; display:flex } .mall_order_wrap .mall_order_fix .fix_wrap { position:relative; width:20em; background:#fff; margin-left:auto; border:1px solid #ddd; box-sizing:border-box } .mall_order_wrap .mall_order_fix.on { position:fixed } body.footerCheck .mall_order_wrap .mall_order_fix.on { position:absolute; bottom:0; top:auto } .mall_order_wrap .mall_order_fix .fix_wrap .add_wrap { background:#f5f5f5; padding:1em 1.5em } .mall_order_wrap .mall_order_fix .fix_wrap .con_wrap { padding:1.5em } .mall_order_wrap .mall_order_fix .fix_wrap .wrap_t1 { font-weight:500 } .mall_order_wrap .mall_order_fix .fix_wrap .wrap_t2 { font-size:.938em; color:#666 } .mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl:not(:first-child) { margin-top:.5em } .mall_order_wrap .mall_order_fix .fix_wrap .price_wrap > dl.line { border-top:1px solid #ddd; margin-top:1em; padding-top:1em } .mall_order_wrap .mall_order_fix .fix_wrap .payment_wrap { border:2px solid #333; padding:.75em 1.5em; margin:1.5em 0 } .up .mall_order_wrap .mall_order_fix.on { top: var(--headerAll); } /* 후기 모달창 */ .after_modal { display: none; position: fixed; padding-top: 5em; border-radius: 1em; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50vw; height: 80vh; overflow: auto; background-color: rgba(0, 0, 0, 0.8); } .modal_content { margin: auto; display: block; width: 50%; height: auto; max-width: 1000px; border-radius: 10px; animation-name: zoom; animation-duration: 0.8s; } @keyframes zoom {from { transform: scale(0) } to { transform: scale(1) } } .after_modalclose { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .after_modalclose:hover, .after_modalclose:focus { color: #bbb; text-decoration: none; cursor: pointer; } .page_sec_list > li:not(:first-child) { margin-top:5em } /* 제품상세 영문 */ .prod_con_wrap { } .prod_con_wrap .list_wrap { border-top: 2px solid var(--siteC); } .prod_con_wrap .list_wrap .list { border-bottom:1px solid #ccc; } .prod_con_wrap .list_wrap .list.on dt { background:#fff; border-bottom:1px solid #ddd; } .prod_con_wrap .list_wrap .list dd { display:none; } .prod_con_wrap .list_wrap .list.on dd { display:block; background:#f5f5f5 } .prod_con_wrap .list_wrap .list .tt { color:#000; font-size:1.375em; font-weight:600 } .prod_con_wrap .list_wrap .list .t_xi { font-size:1.250em; text-align:center; background:var(--siteC); color:#fff; width:30px; height:30px; line-height:30px; margin-right:10px; border-radius:100%; } .prod_con_wrap .list_wrap .list > dt { position:relative; padding:25px 50px 20px 25px; cursor:pointer; } .prod_con_wrap .list_wrap .list > dt i { vertical-align:middle; } .prod_con_wrap .list_wrap .list > dt .more_xi { position:absolute; top:50%; right:20px; margin-top:-18px; text-align:right; } .prod_con_wrap .list_wrap .list > dt .more_xi:before { content:"\e913"; font-family:xeicon!important; font-size:1.375em; color:#333; } .prod_con_wrap .list_wrap .list.on > dt .more_xi:before { content:"\e91a"; } .prod_con_wrap .list_wrap .list .pro_info .tx_w { padding:20px 60px 40px 60px; border-bottom:none; line-height:1.5; color:#333; } .prod_con_wrap .list_wrap .list .pro_info .tx_w * { word-break:break-all } .prod_con_wrap .list_wrap .list .pro_info .tx_w .t_ul { } .prod_con_wrap .list_wrap .list .pro_info .tx_w .t_ul li { font-size:0.938em; color:#666; line-height:1.3; position:relative; padding-left:15px; } /**/ .tab_st1 { padding-bottom:1em } .tab_st1 > li { flex:1 1 1% } .tab_st1 > li > a { display:flex; justify-content:center; align-items:center; height:3.5em; border:2px solid transparent; background:#f5f5f5; position:relative; font-size:1.125em; font-weight:600; color:#888; box-sizing:border-box } .tab_st1 > li:not(:first-child):not(.on) > a { border-left:none; padding-left:2px } .tab_st1 > li:not(:last-child):not(.on) > a { border-right:none; padding-right:2px } .tab_st1 > li:first-child > a { border-radius:.25em 0 0 .25em } .tab_st1 > li:last-child > a { border-radius:0 .25em .25em 0 } .tab_st1 > li.on > a { border-color:#111; color:#111; background:#fff; z-index:1; box-shadow:0 0 1em rgba(0,0,0,.2); z-index:1 } .tab_st1 > li > a:before { content:""; position:absolute; left:-3px; top:50%; height:50%; width:1px; background:#ddd; transform:translateY(-50%) } .tab_st1 > li:first-child > a:before, .tab_st1 > li.on > a:before { display:none } .tab_st1.c1 > li > a { background:#fff; border-color:#111; color:#111 } .tab_st1.c1 > li:hover > a, .tab_st1.c1 > li.on > a { background:#111; color:#fff } .tab_st1.c2 > li > a { background:#fff; color:#999; border-top:1px solid #111; border-bottom:1px solid #ddd; border-radius:0; border-left:none; border-right:none; box-shadow:none } .tab_st1.c2 > li:hover > a, .tab_st1.c2 > li.on > a { color:#111; } .tab_st1.arrow > li.on > a:after { content:"\e935"; font-family:xeicon; position:absolute; left:50%; top:100%; transform:translate(-50%,-.313em); color:#333 } .tab_st1.arrow.c1 > li.on > a:after { color:#111 } /*main*/ .mainVisualWrap { height:640px; position:relative; } .mainVisualWrap .slides { height:100%; } .mainVisualWrap .slides .el { height:100%; cursor:pointer; } /* .mainVisualWrap .slides .el:not(.swiper-slide-active) { position:relative; } .mainVisualWrap .slides .el:not(.swiper-slide-active):after { content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,.5); position:absolute; left:0; top:0; } */ .mainVisualWrap .slides .el .img { width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; } .mainVisualWrap .mV_button_wrap { position:absolute; left:50%; bottom:0; transform:translateX(-50%); margin-left:calc(-700px + 95px); background:#2f2e2d; z-index:3; display:flex; } .mainVisualWrap .mV_button_wrap .mV_pagination { width:90px; height:50px; color:#fff; display:flex; justify-content:center; align-items:center; border-left:1px solid #666; border-right:1px solid #666; box-sizing:border-box; } .mainVisualWrap .mV_button_wrap .mV_pagination .swiper-pagination-current { margin-right:.25em; font-weight:bold; } .mainVisualWrap .mV_button_wrap .mV_pagination .swiper-pagination-total { margin-left:.25em; } .mainVisualWrap .mV_button_wrap .btn_prev, .mainVisualWrap .mV_button_wrap .btn_next { width:50px; height:50px; display:flex; justify-content:center; align-items:center; color:#fff; opacity:.7; background:rgba(255,255,255,0); cursor:pointer; transition:.3s; } .mainVisualWrap .mV_button_wrap .btn_prev:hover, .mainVisualWrap .mV_button_wrap .btn_next:hover { opacity:1; background:rgba(255,255,255,.2); } .mainVisualWrap .btn { position:absolute; top:50%; transform:translateY(-50%); z-index:100; width:4em; height:4em; display:flex; align-items:center; justify-content:center; opacity:.5 } .mainVisualWrap .btn .xi { font-size:3em } .mainVisualWrap .btn.prev { left:0 } .mainVisualWrap .btn.next { right:0 } .mainVisualWrap .btn:hover { opacity:1 } .mainVisualWrap .paging { position:absolute; bottom:1em !important; width:auto !important; left:50% !important; transform:translateX(-50%); display:flex; gap:1em; z-index:100; align-items:center } .mainVisualWrap .paging > span { width:1em; height:1em; background:#fff; opacity:1; font-size:.75em; box-shadow:0 0 1em rgba(0,0,0,.1); margin:0 !important } .mainVisualWrap .paging > span.swiper-pagination-bullet-active { border:3px solid var(--siteC) } /* 카피된메인 */ .main_prod { margin-bottom:5.375rem; } .main_prod .main_prod_title { font-size:2.25em; font-weight:bold; margin-bottom:.75rem; } .main_prod .main_prod_title .fr { font-size:1rem; font-weight:bold; color:#888; transition:.3s; } .main_prod .main_prod_title .fr:hover { color:var(--siteC); } .main_prod .main_prod_title .fr .xi { margin-top:-2px; transition:.3s; colro:#888; } .main_prod .main_prod_title .fr:hover .xi { margin-left:12px; transform:rotate(180deg); color:var(--siteC); } .main_prod .prod_list_wrap { } .main_prod .prod_list_wrap .prod_cover { width:25%; max-width:330px; margin-bottom:3.375rem; cursor:pointer; margin-right:26px; } .main_prod .prod_list_wrap .prod_cover:nth-of-type(4n) { margin-right:0; } .main_prod .prod_list_wrap .prod_cover:nth-of-type(n+5) { margin-bottom:0; } .main_prod .prod_list_wrap .prod_cover .thumb_wrap { border:1px solid #ddd; box-sizing:border-box; width:100%; height:330px; margin-bottom:1rem; transition:.3s; overflow:hidden; } .main_prod .prod_list_wrap .prod_cover:hover .thumb_wrap { border-color:var(--siteC); box-shadow:0 0 8px 3px rgba(0,0,0,.2); } .main_prod .prod_list_wrap .prod_cover .thumb_wrap .thumb { width:270px; height:270px; margin:30px auto; background-position:center; background-size:cover; background-repeat:no-repeat; transition:.3s; } .main_prod .prod_list_wrap .prod_cover:hover .thumb_wrap .thumb { transform:scale(1.1); } .main_prod .prod_list_wrap .prod_cover .info_wrap { } .main_prod .prod_list_wrap .prod_cover .info_wrap .prod_sum { font-size:.9375em; color:#888; margin-bottom:.25rem; } .main_prod .prod_list_wrap .prod_cover .info_wrap .prod_name { font-size:1.125em; color:#111; margin-bottom:1.125em; } .main_prod .prod_list_wrap .prod_cover .info_wrap .prod_price { } .main_prod .prod_list_wrap .prod_cover .info_wrap .prod_price .price_num { font-weight:bold; font-size:1.125em; } .main_mid_banner_wrap { width:100%; height:360px; } .main_mid_banner_wrap .img { width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; cursor:pointer; } .main_md_wrap { /*width:1760px; margin:0 auto; */ margin-bottom:70px; } .main_md_wrap .main_md_top { width:100%; /* margin-bottom:100px; */ } .main_md_wrap .main_md_top .main_md_in { width:100%; } .main_md_wrap .main_md_in { padding-top:86px; } .main_md_wrap .main_md_in .main_md_img_wrap { width:660px; } .main_md_wrap .main_md_in .main_md_img_wrap .img { width:100%; height:440px; background-size:cover; background-repeat:no-repeat; background-position:center; } .main_md_wrap .main_md_in .main_md_img_wrap .main_md_title { font-size:2.25em; margin-bottom:.5rem; } .main_md_wrap .main_md_in .main_md_list_wrap { width:calc(100% - 660px); padding-left:80px; padding-top:54px; box-sizing:border-box; } .main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap { padding-left:0; padding-right:80px; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash { font-size:1.375em; color:#aaa; padding-top:.5rem; margin-bottom:1.25rem; } .main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_hash { display:flex; align-items:center; justify-content:flex-end; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash { margin-right:1.75em; position:relative; padding-left:.875em; box-sizing:border-box; font-weight:bold; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash:last-of-type { margin-right:0; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_hash .hash:before { content:'#'; font-size:1em; position:absolute; left:0; top:0; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap { width:calc(100% + 180px); overflow:hidden; } .main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap { margin-left:-180px; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides { width:100%; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el { width:260px; height:340px; border:1px solid #ddd; box-sizing:border-box; transition:.3s; cursor:pointer; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el:hover { border-color:var(--siteC); box-shadow:0 0 8px 3px rgba(0,0,0,.2); } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el .img { width:100%; height:260px; background-size:contain; background-position:center; background-repeat:no-repeat; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .slides .el .md_prod_name { font-size:1.0625em; font-weight:bold; text-align:center; margin-top:1rem; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap { display:flex; align-items:center; margin-top:.5rem; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div { cursor:pointer; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div.btn_play.off, .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div.btn_pause.off { display:none; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi { font-size:1.5em; color:#555; transition:.3s; opacity:.7 } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap > div:hover .xi { color:var(--siteC); opacity:1; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi.xi-pause, .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi.xi-play { padding-top:2px; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS1_button_wrap .xi:not(.xi-pause):not(.xi-play) { font-size:1.75em; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap { display:flex; align-items:center; margin-top:.5rem; flex-direction:row-reverse; } .main_md_wrap .main_md_bottom .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap { flex-direction:row; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div { cursor:pointer; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div.btn_play.off, .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div.btn_pause.off { display:none; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi { font-size:1.5em; color:#555; transition:.3s; opacity:.7 } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap > div:hover .xi { color:var(--siteC); opacity:1; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi.xi-pause, .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi.xi-play { padding-top:2px; } .main_md_wrap .main_md_in .main_md_list_wrap .main_md_prod_slide_wrap .mdPS2_button_wrap .xi:not(.xi-pause):not(.xi-play) { font-size:1.75em; } .main_cate_tab_wrap { margin-bottom:35px; } .main_cate_tab_wrap .main_cate_tab { padding:0 55px; height:60px; border-radius:4px; font-size:1.1875em; transition:.3s; background:#eeeeee; color:#adadad; cursor:pointer; margin-right:10px; font-weight:bold; } .main_cate_tab_wrap .main_cate_tab:last-of-type { margin-right:0; } .main_cate_tab_wrap .main_cate_tab:hover { background:#d6dded; color:#111; } .main_cate_tab_wrap .main_cate_tab.on { background:#1e3b76; color:#fff; box-shadow:0 0 8px 2px rgba(0,0,0,.1); } .main_brand_wrap { padding-top:85px; margin-bottom:160px; } .main_brand_wrap .main_wrap_title { font-size:2.25em; text-align:center; margin-bottom:40px; font-weight:bold; } .main_brand_wrap .brand_link_wrap { } .main_brand_wrap .brand_link_wrap .brand_link { flex:1 1 25%; margin-right:26px; height:330px; background-position:center; background-size:cover; background-repeat:no-repeat; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; position:relative; color:#fff; cursor:pointer; } .main_brand_wrap .brand_link_wrap .brand_link:before { content:''; display:block; width:100%; height:100%; background:#000; opacity:.3; position:absolute; left:0; top:0; z-index:0; transition:.3s; } .main_brand_wrap .brand_link_wrap .brand_link:hover:before { opacity:.6; } .main_brand_wrap .brand_link_wrap .brand_link:last-of-type { margin-right:0; } .main_brand_wrap .brand_link_wrap .brand_link.n1 { background-image:url('../images/main/main_brand_bg01.jpg'); } .main_brand_wrap .brand_link_wrap .brand_link.n2 { background-image:url('../images/main/main_brand_bg02.jpg'); } .main_brand_wrap .brand_link_wrap .brand_link.n3 { background-image:url('../images/main/main_brand_bg03.jpg'); } .main_brand_wrap .brand_link_wrap .brand_link.n4 { background-image:url('../images/main/main_brand_bg04.jpg'); } .main_brand_wrap .brand_link_wrap .brand_link p { position:relative; z-index:1; transition:.45s; } .main_brand_wrap .brand_link_wrap .brand_link p.bl_title { font-size:1.5em; margin-bottom:-3rem; } .main_brand_wrap .brand_link_wrap .brand_link:hover p.bl_title { font-size:1em; margin-bottom:2.5rem; } .main_brand_wrap .brand_link_wrap .brand_link p.bl_text { font-size:1.3125em; font-weight:bold; height:55px; padding-top:55px; box-sizing:border-box; overflow:hidden; } .main_brand_wrap .brand_link_wrap .brand_link:hover p.bl_text { padding-top:0; margin-bottom:2rem; } .main_brand_wrap .brand_link_wrap .brand_link p.more_btn { font-size:.8125em; font-weight:bold; } .main_brand_wrap .brand_link_wrap .brand_link p.more_btn .xi { font-weight:400; } .main_cs_wrap { height:300px; padding-top:60px; background:#f5f5f5; box-sizing:border-box; } .main_cs_wrap .box1 { display:flex; } .main_cs_wrap .box1 .main_cs_title { font-size:1.375em; font-weight:bold; margin-bottom:30px; } .main_cs_wrap .box1 .main_cs_info_wrap { width:450px; } .main_cs_wrap .box1 .main_cs_info_wrap .cs_num { font-size:1.5em; font-weight:bold; margin-bottom:.875rem; } .main_cs_wrap .box1 .main_cs_info_wrap .cs_time { font-size:.9375em; color:#777; } .main_cs_wrap .box1 .main_cs_notice_wrap { width:400px; } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st { display:flex; flex-direction:column; } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li { margin-bottom:.5rem; font-size:.875em; cursor:pointer; } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_title { width:calc(100% - 80px); padding-left:8px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li:hover .notice_title { text-decoration:underline; } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_title:before { content:''; display:block; width:4px; height:1px; background:#111; position:absolute; left:0; top:50%; transform:translateY(-50%); } .main_cs_wrap .box1 .main_cs_notice_wrap .ul_board_st li .notice_date { width:80px; text-align:right; opacity:.5; } .main_cs_wrap .box1 .main_cs_sns_wrap { width:calc(100% - 850px); display:flex; justify-content:flex-end; align-items:center; } .main_cs_wrap .box1 .main_cs_sns_wrap .sns_wrap { } .main_cs_wrap .box1 .main_cs_sns_wrap .sns_wrap li { margin-left:10px; cursor:pointer; } .mall_prod_wrap { } /* new main */ .main_con { padding: 3em 0; } .main_con.bg1 { background: #f5f5f5; } .main_con.bg2 { background:#f0f9fe; } .main_tit { margin-bottom: 2em; } .main_tit .t1 { font-size: 2em; font-weight: 600; } .main_tit .t2 { font-size: 1.125em; font-weight: 500; margin-top: 1em; color: #727272; } .main_tit .t3 { font-size: 2.4em; font-weight: 800; } .best_cate { gap: 2em; } .best_cate li { width: 9%; } .best_cate li .in { display: block; text-align: center; } .best_cate li .in .img { border: 1px solid #ddd; border-radius: 1em; overflow: hidden; margin-bottom: 1em; } .best_cate li:hover .in .img img, .best_cate li:focus .in .img img { transform: scale(1.2); transition: .3s; } .best_cate li .in .tt { font-size: 0.96em; } .best_cate li:hover .in .tt, .best_cate li:focus .in .tt { font-weight: 700; } .project_list { gap: 1.5em; } .project_list li { border-radius: 1em; overflow: hidden; flex: 1 33.3%; box-shadow: 0 0 1em rgba(0, 0, 0, .1); } .project_list li .in { background: #fff; display: block; position: relative; } .project_list li .in .tit { padding: 1em; font-size: 1.4em; font-weight: 600; color: #969696; } .project_list li .in .img { position: relative; overflow: hidden; } .project_list li .in .img::before { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3)); } .project_list li:hover .in .img img, .project_list li:focus .in .img img { transform: scale(1.2); transition: .5s; } .project_list li:hover .in .tit, .project_list li:focus .in .tit { color: #000; } .project_list li .in .price_box { position: absolute; bottom: 5%; right: 8%; gap: 1em; } .project_list li .in .price_box .price1 { position: relative; color: #fff; } .project_list li .in .price_box .price1::before { width: 100%; height: 1px; position: absolute; top: 50%; left: 0; content: ''; background: #fff; } .project_list li .in .price_box .price2 { font-size: 1.5em; font-weight: 800; color: #fff; } .project_list li .in .price_box .per { font-size: 1.4em; font-weight: 800; color: #f81816; } .main_best .prod_list2 { gap: 1.5em; } .main_best .prod_list2 li { flex: 1 23%; } .main_best .prod_list2 li .in { } .prod_list2 li .in .prod_img { border: 1px solid #ddd; position: relative; overflow: hidden; } .prod_list2 li:hover .in .prod_img img, .prod_list2 li:focus .in .prod_img img { transform: scale(1.2); transition: .3s; } .prod_list2 li .in .prod_img .tag { position: absolute; background: var(--siteC); color: #fff; padding: 1em; z-index: 10; text-align: center; font-size: 0.9em; } .prod_list2 li .in .prod_img .tag .num { font-weight: 800; font-size: 1.4em; margin-top: .1em; } .prod_list2 li .in .prod_info { margin-top: 1em; } .prod_list2 li .in .prod_info .cate { font-size: 0.9em; margin-bottom: .5em; color: #727272; } .prod_list2 li .in .prod_info .tit { font-size: 1.125em; font-weight: 600; margin-bottom: 1em; } .prod_list2 li .in .prod_info .price_box { gap: 1em; } .prod_list2 li .in .prod_info .price_box .price { font-weight: 800; } .prod_list2 li .in .prod_info .price_box .per { font-weight: 700; color: #f81816; } .prod_list2 li .in .prod_info .price_box .per > i { font-size: 1em; } .main_arrival { } .main_arrival .flex { gap: 6em; } .main_arrival .left_box { width: 43%; } .main_arrival .right_box { } .main_arrival .right_box .t1 { background: #1e1916; display: inline-block; color: #fff; padding: 0.3em 1.5em; border-radius: 3em; font-size: 0.86em; font-weight: 500; margin-bottom: 2em; } .main_arrival .right_box .t2 { font-size: 2em; font-weight: 600; margin-bottom: 1.5em; } .main_arrival .right_box .detail_list { } .main_arrival .right_box .detail_list li { margin-bottom: 1em; font-size: 1.125em; color: #6f7478; } .main_arrival .right_box .detail_list li:last-child { margin-bottom: unset; } .main_arrival .right_box .detail_list li i { background: var(--siteC); color: #fff; width: 1.4em; height: 1.4em; border-radius: 50%; text-align: center; font-size: 1.6em; margin-right: 0.5em; } .main_arrival .right_box .btn_box { margin-top: 7em; } .main_arrival .right_box .more_btn { font-size: 1.125em; font-weight: 600; } .main_arrival .right_box .more_btn i { background: #1e1916; color: #fff; width: 2em; height: 2em; border-radius: 50%; text-align: center; line-height: 2em; margin-left: 0.5em; } .main_arrival .right_box .more_btn:hover i, .main_arrival .right_box .more_btn:focus i { background: #62c7ff; transition: .3s; } .keyword_list { gap: 1.3em; } .keyword_list li { text-align: center; overflow: hidden; border-radius: 3em; } .keyword_list li .in { display: block; background: #eeeeee; padding: 0.9em 1.2em; font-size: 1.125em; font-weight: 600; } .keyword_list li:hover .in, .keyword_list li:focus .in { background: var(--siteC); color: #fff; transition: .3s; } .main_event { } .main_event .plus { background: var(--siteC); color: #fff; margin-left: 0.5em; cursor: pointer; width: 1em; height: 1em; text-align: center; line-height: 1em; font-size: 0.7em; border-radius: 50%; font-weight: 400; } .main_event .plus:hover { background: #1e1916; transition: .3s; } .main_event .review_list { gap: .8em; } .main_event .review_list li { flex: 1 20%; max-width: 20%; border: 1px solid #ddd; } .main_event .review_list li .in { display: block; } .main_event .review_list li .in .detail { padding: 1em; } .main_event .review_list li .in .detail .t1 { font-size: 0.86em; margin-bottom: 1em; min-height: 2em; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .main_event .review_list li .in .prod_info { gap: .5em; padding-top: 0.5em; border-top: 1px solid #ddd; } .main_event .review_list li .in .prod_info .left_img { width: 20%; border-radius: 50%; overflow: hidden; } .main_event .review_list li .in .prod_info .left_img img { width: 100%; } .main_event .review_list li .in .prod_info .right_tit { font-size: 0.9em; font-weight: 500; color: #7d7d7d; } .main_event .review_list li:hover .in .detail .t1, .main_event .review_list li:focus .in .detail .t1, .main_event .review_list li:hover .in .prod_info .right_tit, .main_event .review_list li:focus .in .prod_info .right_tit { color: #000; } .main_event .review_list li .in .review_img { min-height: 16.8em; overflow: hidden; } .main_event .review_list li:hover .in .review_img img, .main_event .review_list li:focus .in .review_img img { transform: scale(1.2); transition: .3s; } .main_event .review_list li .in .vod_wrap { position: relative; } .banner_wrap { width: 65%; margin: 0 auto; } .banner_wrap .left { color: #fff; } .banner_wrap .left .t1 { font-size: 2.4em; font-weight: 800; } .banner_wrap .left .t2 { font-size: 1.25em; font-weight: 300; margin-top: 1em; } .applyBanner { z-index:10; width:12em; height: 12em; z-index: 999; position: relative; } .applyBanner .svgtt { width:100%; height:100% } .applyBanner .svgtt .tt { font-weight:500; text-transform:uppercase; letter-spacing:.25em; font-size:.75em; fill:#fff; } .applyBanner .in { position:absolute; cursor: pointer; left:50%; top:50%; width:100%; height: 100%; line-height: 10em; color:#fff; font-weight: 600; border-radius:50%; transform:translate(-50%, -50%); text-align:center; box-sizing:border-box; padding:1em; transition: .3s; } .applyBanner .in:hover, .applyBanner .in:focus { transition: .3s; background: rgba(255, 255, 255, .1); } /**/ .subscribe_wrap { } .subscribe_wrap .subscribe_head .img_wrap { height:350px; } .subscribe_wrap .subscribe_head .img_wrap .img { width:100%; height:100%; } .subscribe_wrap .subscribe_head .text_wrap { width:1200px; padding:2em 3em; box-sizing:border-box; background:#fff; margin:-3rem auto 0; box-shadow:0px 4px 22px 2px rgba(0,0,0,.2); } .subscribe_wrap .subscribe_head .text_wrap .tt { font-size:2.5em; width:300px; letter-spacing:-2.5px; } .subscribe_wrap .subscribe_head .text_wrap .tt .first { vertical-align:baseline; letter-spacing:9px; font-weight:bold; } .subscribe_wrap .subscribe_head .text_wrap .t1 { width:calc(100% - 310px); font-size:1.25em; color:#777; line-height:1.6; padding-top:.25em; } .subscribe_wrap .subscribe_body { margin-top:3rem; } .subscribe_wrap .subscribe_body .subscribe_title { font-size:1.25em; margin-bottom:2rem; } .subscribe_wrap .subscribe_body .subscribe_title i.xi { margin-right:6px; margin-top:-2px; } .subscribe_wrap .subscribe_body .subscribe_sel_list { display:flex; justify-content:space-between; } .subscribe_wrap .subscribe_body .subscribe_sel_list li { width:30%; cursor:pointer; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap { border-radius:8px; position:relative; overflow:hidden; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap:before { content:''; display:block; width:30px; height:30px; border-radius:50%; background:#fff; position:absolute; left:-18px; top:50%; transform:translateY(-50%); z-index:5; border:2px solid #f69500; box-sizing:border-box; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap:before { border-color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap:before { border-color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap:before { border-color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap:after { content:''; display:block; width:30px; height:30px; border-radius:50%; background:#fff; position:absolute; right:-18px; top:50%; transform:translateY(-50%); z-index:5; border:2px solid #f69500; box-sizing:border-box; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap:after { border-color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap:after { border-color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap:after { border-color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_check { position:absolute; right:.5em; top:-1em; font-size:1.375em; color:#aaa; transition:.3s; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c1 .subscribe_sel_wrap .ssw_check { color:#f69500; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .ssw_check { color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .ssw_check { color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .ssw_check { color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li:hover .subscribe_sel_wrap .ssw_check, .subscribe_wrap .subscribe_body .subscribe_sel_list li:not(.off) .subscribe_sel_wrap .ssw_check { top:.375em; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape { width:20px; height:20px; background:#fff; border:2px solid #f69500; box-sizing:border-box; position:absolute; transform:rotate(45deg); z-index:10; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .ssw_shape { border-color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .ssw_shape { border-color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .ssw_shape { border-color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape.s1 { left:63px; top:-17px; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .ssw_shape.s2 { left:63px; bottom:-17px; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in { border:2px solid #f69500; box-sizing:border-box; border-radius:8px; overflow:hidden; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in { border-color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in { border-color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in { border-color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l { width:70px; display:flex; justify-content:center; align-items:center; background:#f7c476; border-right:3px dotted #fff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l { background:#ffafae; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l { background:#a6bef7; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l { background:#ddd; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_l img { transform:rotate(-90deg) scale(1.4); } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r { padding:2em; box-sizing:border-box; width:calc(100% - 70px); overflow:hidden; position:relative; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r:before { content:'\ea7d'; font-family:'xeicon'; font-size:6em; color:#ddd; position:absolute; left:0; bottom:-.375em; transform:rotate(-12deg); } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name { display:inline-flex; padding:.25em .75em; background:#f69500; color:#fff; justify-content:center; align-items:center; border-radius:18px; margin-bottom:1rem; font-size:1.125em; margin-top:-.5rem; position:relative; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name { background:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name { background:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name { background:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before { content:''; display:; width:80px; height:100%; background:#f69500; position:absolute; left:-50px; top:0; z-index:-1; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before { background:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before { background:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_name:before { background:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_ori_price { font-size:1.25em; color:#999; text-decoration:line-through; text-align:right; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price { text-align:right; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price span { vertical-align:baseline; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount { display:inline-flex; width:55px; height:26px; justify-content:center; align-items:center; border:1px solid #f69500; color:#f69500; border-radius:15px; box-sizing:border-box; padding-top:2px; margin-right:12px; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c2 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount { border-color:#ff4d4b; color:#ff4d4b; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.c3 .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount { border-color:#2667ff; color:#2667ff; } .subscribe_wrap .subscribe_body .subscribe_sel_list li.off .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .ssw_discount { border-color:#aaa; color:#aaa; } .subscribe_wrap .subscribe_body .subscribe_sel_list li .subscribe_sel_wrap .subscribe_sel_wrap_in .ssw_r .ssw_price .tt { font-size:1.625em; font-weight:bold; } .notice_wrap { height:140px; border: 1px solid #ddd; box-sizing:border-box; border-radius:12px; } .notice_wrap .xi { font-size:1.5em; color:#999; margin-bottom:.5rem; } .notice_wrap .notice_ctt { font-size:1.125em; color:#777; } .subscribe_prod_list { display:flex; flex-direction:column; } .subscribe_prod_list > li { width:100%; padding:1em 2em; border-radius:12px; border:1px solid #ddd; margin-bottom:.75rem; box-sizing:border-box; transition:.3s; } .subscribe_prod_list:not(.noHover) > li:hover, .subscribe_prod_list:not(.noHover) > li:focus-within { border-color:var(--siteC); } .subscribe_prod_list > li .subscribe_prod_in { } .subscribe_prod_list > li .subscribe_prod_in .spi_month { font-size:1.25em; color:var(--siteC); } .subscribe_prod_list > li .subscribe_prod_in .spi_sel_box { } .subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div { } .subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div .tt { margin-right:1rem; } .subscribe_prod_list > li .subscribe_prod_in .spi_sel_box > div.same_check { width:120px; } .price_st { font-size:1.25em; } .price_st .num { color:#f70847; vertical-align:baseline; } /*txt_setting*/ .bg_gray { background:#f5f5f5; } .txt_bold { font-weight:bold; vertical-align:baseline; } .txt_small { font-size:.875em; vertical-align:baseline; } .txt_light { font-weight:200; vertical-align:baseline; } .ttdot { position: relative; padding-left: 1.5em; } .ttdot::before { width: 6px; height: 6px; border-radius: 50%; background: var(--siteC); position: absolute; top: 50%; left: 0%; content: ''; transform: translate(-50%, -50%); } .vb { vertical-align:baseline; } .about_index_wrap { } .about_index_wrap .sub_page_bg_wrap { } .about_index_wrap .sub_page_bg_wrap .img_wrap { height:580px; } .about_index_wrap .sub_page_bg_wrap .img_wrap .img { width:100%; height:100%; } .sub_page_wrap { padding-top:70px; padding-bottom:100px; } .sub_page_wrap.st2 { padding-bottom:150px; } .sub_page_wrap.st3 { padding:0; } .sub_page_wrap.st4 { padding:120px 0; } .sub_page_wrap .sub_page_title_wrap { margin-bottom:40px; } .sub_page_wrap .sub_page_title_wrap .title_sub { opacity:.5; font-size:.9375em; letter-spacing:.5px; margin-bottom:24px; } .sub_page_wrap .sub_page_title_wrap .title { font-size:2.375em; margin-bottom:24px; } .sub_page_wrap .sub_page_title_wrap .t1 { font-size:1.375em; color:#555; line-height:1.6; } .sub_page_wrap .sub_page_ctt_wrap { } .sub_page_wrap .sub_page_ctt_wrap .box_st { background:#fff; box-shadow:0 0 15px 2px rgba(0,0,0,.1); padding:30px 0; width:300px; text-align:center; margin-bottom:2rem; } .sub_page_wrap .sub_page_ctt_wrap .box_st .t1 { font-size:1.0625em; color:var(--siteC); font-weight:bold; margin-bottom:1rem; } .sub_page_wrap .sub_page_ctt_wrap .box_st .t2 { font-size:1.1250em; color:#666; } .sub_page_wrap .sub_page_ctt_wrap .box_st .t3 { font-size:1.3750em; font-weight:bold; } .sub_page_wrap .sub_page_ctt_wrap .t_caption { font-size:.875em; color:#777; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap { margin-top:4rem; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st { cursor:pointer; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1 { background:var(--siteC); color:#fff; width:240px; padding:18px 0; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1 .tt { font-size:1.1875em; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1 .xi { margin-left:1rem; transition:.3s; } .sub_page_wrap .sub_page_ctt_wrap .btns_wrap .btn_st.st1:hover .xi { margin-left:2rem; margin-right:-1rem; } .sp_brand { } .sp_brand .brand_ctt_wrap { margin-top:60px; } .sp_brand .brand_ctt_wrap > div { width:570px; } .sp_brand .brand_ctt_wrap > div .img_wrap { height:380px; } .sp_brand .brand_ctt_wrap > div .img_wrap .img { width:100%; height:100%; } .sp_brand .brand_ctt_wrap > div .txt_wrap { margin-top:30px; text-align:center; } .sp_brand .brand_ctt_wrap > div .txt_wrap .t1 { opacity:.5; font-size:.9375em; letter-spacing:.5px; margin-bottom:1.125rem; } .sp_brand .brand_ctt_wrap > div .txt_wrap .t2 { font-size:1.0625em; letter-spacing:-.5px; color:#555; font-weight:200; margin-bottom:20px; } .sp_brand .brand_ctt_wrap > div .txt_wrap .t3 { font-size:1.5em; margin-bottom:24px; } .sp_product { position:relative; } .sp_product .sp_product_bg_wrap { height:400px; } .sp_product .sp_product_bg_wrap > div { width:50%; height:100%; } .sp_product .sp_product_bg_wrap > div .img { width:100%; height:100%; } .sp_product .sp_product_ctt_wrap { position:absolute; left:0; top:0; height:400px; width:100%; color:#fff; transition:.3s; transition-delay:.3s; } .sp_product .sp_product_ctt_wrap.on { background:rgba(0,0,0,.4); } .sp_product .sp_product_ctt_wrap .box2 { height:100%; position:relative; } .sp_product .sp_product_ctt_wrap .box2 > div:not(.sp_product_in_wrap) { width:50%; height:100%; padding-top:4rem; box-sizing:border-box; } .sp_product .sp_product_ctt_wrap .box2 > div:not(.sp_product_in_wrap).off { transform:translateY(30px); opacity:0; transition-delay:0s; } .sp_product .sp_product_ctt_wrap .box2 > div.product_ctt_r { padding-left:80px; } .sp_product .sp_product_ctt_wrap .box2 > div .product_Q { font-weight:200; font-size:3.125em; } .sp_product .sp_product_ctt_wrap .box2 > div .product_title { font-size:1.875em; margin-top:-.5rem; margin-bottom:46px; } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap { } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st { cursor:pointer; } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2 { background:#fff; color:#555; width:140px; padding:6px 0; } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2 .tt { } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2 .xi { margin-top:2px; margin-left:8px; transition:.3s; } .sp_product .sp_product_ctt_wrap .box2 > div .btns_wrap .btn_st.st2:hover .xi { margin-left:14px; margin-right:-6px; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap { width:100%; height:100%; padding:0; transition:.3s; transition-delay:.9s; opacity:0; position:absolute; left:0; top:30px; z-index:-3; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap.on { display:flex; opacity:1; top:0; z-index:1; transition-delay:0; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .sp_product_in_close { position:absolute; right:0; top:2em; color:#ccc; font-size:1.5em; cursor:pointer; transition:.3s; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .sp_product_in_close:hover { color:#fff; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap > .flex { height:100%; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .title { font-size:1.5em; margin-bottom:1rem; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .t1 { line-height:1.6; padding-right:3em; opacity:.8; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st { padding-left:80px; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap.n2 .gram_st { padding-left:30px; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st li:not(:nth-last-of-type(-n+2)) { margin-bottom:1.5rem; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .icon_wrap { width:80px; height:80px; background:rgba(31,59,119,.7); color:#ddd; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:0; font-size:2.5em; border-radius:50%; display:flex; justify-content:center; align-items:center; margin-right:1rem; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .icon_wrap .num { padding-bottom:.25em; box-sizing:border-box; } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .gram_txt { width:calc(calc(100% - 80px) - 1rem); } .sp_product .sp_product_ctt_wrap .box2 .sp_product_in_wrap .gram_st .gram_txt .t1 { padding-right:0; font-size:1.125em; } .sp_contact { } .sp_contact .btns_wrap { } .sp_contact .btns_wrap .btn_st { cursor:pointer; } .sp_contact .btns_wrap .btn_st.st1 { background:var(--siteC); color:#fff; width:240px; padding:18px 0; } .sp_contact .btns_wrap .btn_st.st1.c2 { background:#333; } .sp_contact .btns_wrap .btn_st.st1 .tt { font-size:1.1875em; } .sp_contact .btns_wrap .btn_st.st1 .xi { margin-left:1rem; transition:.3s; margin-top:2px; } .sp_contact .btns_wrap .btn_st.st1:hover .xi { margin-left:2rem; margin-right:-1rem; } /*secAni*/ .conSection .ani { opacity:0; transition:.5s; } .conSection .ani.aniT { transform:translateY(60px) } .conSection .ani.aniB { transform:translateY(-60px) } .conSection .ani.aniL { transform:translateX(30px) } .conSection .ani.aniR { transform:translateX(-30px) } .conSection.secAni .ani { opacity:1; } .conSection.secAni .ani.aniT { transform:translateY(0) } .conSection.secAni .ani.aniB { transform:translateY(0) } .conSection.secAni .ani.aniL { transform:translateX(0) } .conSection.secAni .ani.aniR { transform:translateX(0) } .conSection.secAni .ani.delay1 { transition-delay:.3s; } .conSection.secAni .ani.delay2 { transition-delay:.6s; } .conSection.secAni .ani.delay3 { transition-delay:.9s; } .conSection.secAni .ani.delay4 { transition-delay:1.2s; } .conSection.secAni .ani.delay5 { transition-delay:1.5s; } .conSection.secAni .ani.delay6 { transition-delay:1.8s; } .conSection.secAni .ani.delay7 { transition-delay:2.1s; } .conSection.secAni .ani.delay8 { transition-delay:2.4s; } .conSection.secAni .ani.delay9 { transition-delay:2.7s; } .conSection.secAni .ani.delay10 { transition-delay:3.0s; } .flex.dv50 { } .flex.dv50 > * { width:50%; } .location_wrap { } .location_wrap .location_in { } .location_wrap .location_in:not(:last-of-type) { margin-bottom:4rem; } .location_wrap .location_in .location_title { overflow:hidden; font-size:1.25em; position:relative; margin-bottom:1rem; } .location_wrap .location_in .location_title:after { content:''; display:block; width:100%; height:3px; background:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:-1; } .location_wrap .location_in .location_title .xi { color:var(--siteC); padding-right:.125em; background:#fff; } .location_wrap .location_in .location_title .tt { background:#fff; padding-right:1rem; } .location_wrap .location_in .map_cv { box-shadow:0 0 12px 2px rgba(0,0,0,.2); border-radius:0 0 10px 10px; overflow:hidden; } .location_wrap .location_in .map_box { padding:1.5em; box-sizing:border-box; border-top:2px solid var(--siteC); } .location_wrap .location_in .map_box .root_daum_roughmap { width:100% !important; } .location_wrap .location_in .map_info { padding:1.5em; box-sizing:border-box; border-top:1px solid #ddd; } .location_wrap .location_in .map_info li:not(:last-of-type) { margin-right:2rem; } .location_wrap .location_in .map_info .map_icon { display:flex; justify-content:center; align-items:center; background:var(--siteC); color:#fff; width:36px; height:36px; border-radius:50%; margin-right:6px; } .location_wrap .location_in .map_info .map_icon .xi { font-size:1.125em; } .sub_page_head_img_wrap { position:relative; margin-bottom:3.5rem; max-height:320px; overflow:hidden; } .sub_page_head_img_wrap img { margin-top:-4rem; } .sub_page_head_img_wrap .img_cover { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4); color:#fff; } .sub_page_head_img_wrap .img_cover .sub_page_head_title { font-size:2.5em; font-weight:bold; position:relative; } .sub_page_head_img_wrap .img_cover .sub_page_head_title:before { content:''; display:block; width:120px; height:4px; background:#fff; position:absolute; left:-150px; top:48%; transform:translateY(-50%); } .sub_page_head_img_wrap .img_cover .sub_page_head_title:after { content:''; display:block; width:120px; height:4px; background:#fff; position:absolute; right:-150px; top:48%; transform:translateY(-50%); } .sub_page_body_wrap { } .sub_page_body_wrap > div:not(.info_wrap) { width:50%; } .sub_page_body_wrap > div.grt_box { padding-left:3rem; padding-right:3rem; box-sizing:border-box; } .sub_page_body_wrap > div.grt_box .c_point { font-weight:bold; display:inline; } .sub_page_body_wrap > div .tt { font-size:1.75em; margin-bottom:1.25rem; } .sub_page_body_wrap > div.grt_box .t1 { line-height:1.6; color:#777; margin-bottom:1.5rem; } .sub_page_body_wrap > div.grt_box .t2 { font-size:1.25em; font-weight:bold; margin-bottom:.875rem; } .sub_page_body_wrap > div.grt_box .t3 { color:#999; font-weight:bold; } .sub_page_body_wrap > div.grt_box .t_centerline { display:inline-block; width:20px; height:1px; background:#333; margin:0 .5rem; } .sub_page_body_wrap > div.graphic_wrap { padding-top:3rem; } .sub_page_body_wrap > div.graphic_wrap .title { font-size:1.375em; colro:#555; line-height:1.6; text-align:center; } .sub_page_body_wrap > div.graphic_wrap .box_st { background:#fff; box-shadow:0 0 15px 2px rgba(0,0,0,.1); padding:30px 0; width:80%; text-align:center; margin-bottom:2rem; } .sub_page_body_wrap > div.graphic_wrap .box_st .t1 { font-size:1.0625em; color:var(--siteC); font-weight:bold; margin-bottom:1rem; } .sub_page_body_wrap > div.graphic_wrap .box_st .t2 { font-size:1.1250em; color:#666; } .sub_page_body_wrap > div.graphic_wrap .box_st .t3 { font-size:1.3750em; font-weight:bold; } .sub_page_body_wrap > div.graphic_wrap .t_caption { font-size:.875em; color:#777; } .link_st { color:var(--siteC); font-size:1.125em; font-weight:bold; } .link_st .xi { transition:.3s; font-weight:400; } .link_st:hover .xi { transform:rotate(45deg); } .mall_banner_wrap { } .mall_banner_wrap > div { width:682px; max-width:48.5%; height:220px; background-size:100%; background-position:center; background-repeat:no-repeat; cursor:pointer; position:relative; transition:.3s; } .mall_banner_wrap > div:before { content:''; display:block; width:100%; height:100%; background:#000; opacity:.3; position:absolute; left:0; top:0; z-index:1; } .mall_banner_wrap > div:hover { background-size:110%; } .mall_banner_wrap > div .mb_in { display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100%; position:relative; color:#fff; z-index:2; } .mall_banner_wrap > div .mb_in .mb_title { font-size:1.5em; font-weight:bold; letter-spacing:1px; margin-bottom:2rem; } .mall_banner_wrap > div .mb_in .mb_ctt { text-align:center; line-height:1.6; font-size:1.125em; } .option_prd_name { font-size:.9375em; /* padding-bottom:.75rem; */ /*border-bottom:2px solid #777; */ flex:1 1 auto; width:calc(100% - 332px); } /*.option_prd_name > span:first-of-type { max-width:60%; } */ /*.option_prd_name > span:nth-of-type(2) { max-width:40%; } .option_prd_name > span.prd_count { margin-left:auto; } */ .option_prd_name span { /*margin-right:2em; */ position:relative; line-height:1.6; } /*.option_prd_name span:not(:last-of-type):after { content:'\e93f'; font-family:'xeicon'; font-size:.9375em; color:#333; position:absolute; right:-1.5em; top:50%; transform:translateY(-50%); } */ .option_prd_name span:last-of-type { margin-right:0; } .opt_cancle { font-size:1.25em; cursor:pointer; margin-left:10px; } .opt_cancle:hover { color:#0b54bb; } .mall_prod_cate_name { font-size:1.25em; font-weight:bold; position:relative; display:inline-block; margin-top:2em; margin-bottom:1em; } .mall_prod_cate_name:before { content:''; display:block; width:calc(100% + 1em); height:100%; background:#fff; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:-1; } .mall_prod_cate_name:after { content:''; display:block; width:100vw; height:4px; background:#a8a8a8; position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:-2; } .subscribe_history_wrap { } .subscribe_history_wrap .subscribe_history { } .subscribe_history_wrap .subscribe_history th { background:#f5f5f5; border-top:2px solid #666; } .subscribe_history_wrap .subscribe_history td { text-align:center; } .subscribe_history_wrap .subscribe_history td:not(:last-of-type) { border-right:1px solid #ddd; } .subscribe_history_wrap .subscribe_history td.viewDetail { cursor:pointer; } .subscribe_history_wrap .subscribe_history td.viewDetail:hover { text-decoration:underline; color:var(--siteC); } .coupon_list_pop .table_notice { display:none; font-size:.875em; color:#555; margin-bottom:.5rem; } .order_notice { display:none; font-size:.875em; color:#555; margin-top:1rem; margin-bottom:-2rem; } .board_tit ~ .table_notice { display:none; font-size:.875em; color:#555; margin:.5rem 0; } .subscribe_title ~ .table_notice { display:none; font-size:.875em; color:#555; margin:.5rem 0; } .sub #footer .info_wrap .cs_wrap .cs .wrap_in.sub_dn { display:none; } #footer .info_wrap .cs_wrap .cs .wrap_in.main_dn { display:block; } .main #footer .info_wrap .cs_wrap .cs .wrap_in.main_dn { display:none; } .dp2_best .tt_price.before { display:none; } .page_con { padding: 6em 0; } .page_con.p1 { padding: 8em 0; } .sub_title { margin-bottom: 3em; } .sub_title .ti { font-size: 2.4em; font-weight: 800; text-transform: uppercase; } .brand_top_bg { height: 33em; overflow: hidden; } .brand_intro { } .brand_intro .bottom_tx { margin-bottom: 3em; } .brand_intro .bottom_tx .t1 { font-size: 1.6em; font-weight: 700; margin-bottom: 1em; } .brand_intro .bottom_tx .t2 { font-size: 1.25em; margin-bottom: 1em; } .brand_intro .bottom_tx .t2:last-child { margin-bottom: unset; } .brand_list { gap: 1em; } .brand_list li { background: #fff; padding: 4em 1em 2em; border-top-left-radius: 10em; border-top-right-radius: 10em; flex: 1 25%; } .brand_list li .tit { font-size: 1.125em; font-weight: 700; min-height: 3em; } .brand_list li .img { margin: 2em auto; width: 80%; border: 1px solid #ddd; border-radius: 50%; overflow: hidden } .brand_list li .txt { } /*flex box*/ .flex_box { } .flex_box.s1 { margin: 0 0 -1em -1em; } .flex_box.s2 { margin: 0 0 -2em -2em; } .flex_box.s3 { } .flex_box.s4 { } .flex_box.s5 { } .flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } .flex_box .fst1 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } .flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } .flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } .flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } .flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } .flex_box .fst8 > li > .in { margin: 0 0 1em 1em; } .flex_box li > a { display: block; } .flex_box li > .in.st1 { margin: 0; } /**/ .visualSlide_wrap { background: var(--siteGray); } /* .visualSlide_wrap { padding:1.5em 0 .5em 0; background:#777 } */ .visualSlide_wrap .swiperControl { margin-top:.5em } .visualSlide .el { width:100%; height: 80vh; } /* .visualSlide .el { width:120vmin } */ .visualSlide .el[onclick] { cursor:pointer } .visualSlide .el .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover} .visualSlide .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.215)} .visualSlide .el .bg { height: 100%; position:relative } /* .visualSlide .el .bg { padding-bottom:56.25%; position:relative } */ .visualSlide .el .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.3 } .visualSlide .el .twrap { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; color:#fff; background: linear-gradient(90deg, rgba(0,0,0,.7) 10%, rgba(0,0,0,0) 100%); opacity:0; display:flex; align-items:center } .visualSlide .el .twrap .in { display:flex; flex-direction:column; align-items:flex-start; gap:1vmin; width: 100%; } .visualSlide .el .twrap .t1 { font-weight:700; color:#aaa } .visualSlide .el .twrap .t2 { font-weight:600; line-height: 1; font-size:6.5em; letter-spacing: .1em; text-transform: uppercase; } .visualSlide .el .twrap .t3 { font-size: 3vmin; line-height:1.3; opacity:.7; margin:2vmin 0 0 0; } .visualSlide .el .twrap .more { height:4vmin; border:1px solid var(--siteC3); display:flex; align-items:center; padding:0 2vmin; font-size:1.315em; gap:1em; margin:4vmin 0; background: var(--siteC3); color: var(--crBlack); } .visualSlide .el .twrap .more .arrow { font-size:1em } .visualSlide .el .twrap .more .arrow:before { content:"\e907" } .visualSlide .el .twrap .in > * { opacity:0; transform:translateY(1em) } .visualSlide .el.swiper-slide-active .bg:after { } .visualSlide .el.swiper-slide-active .twrap { opacity:1; transition:1s } .visualSlide .el.swiper-slide-active .twrap .in > * { opacity:1; transform:translateY(0); transition:1s } .visualSlide .el.swiper-slide-active .twrap .in > :nth-child(1) { transition-delay:.3s } .visualSlide .el.swiper-slide-active .twrap .in > :nth-child(2) { transition-delay:.6s } .visualSlide .el.swiper-slide-active .twrap .in > :nth-child(3) { transition-delay:.9s } .visualSlide .el.swiper-slide-active .twrap .in > :nth-child(4) { transition-delay:1.2s } .mainBox { padding:8vmin 0 } .mainBox.p1 { padding: 4vmin 0; } .mainBox.ptN { padding-top: 0; } .mainBox.bg1 { background:#f1f1f1 } .mainBox.bg2 { background:#222 } .mainBox .wrapF { } .mainBox .wrapF > * { flex:1 } .maiTit_Wrap { margin-bottom: 3.5em; } .maiTit { display:flex } .maiTit.hc { justify-content:center } .maiTit .t1 { font-size:6.5vmin; word-spacing:.05em; font-weight: 500; } .maiTit .logo { height:.75em } .maiTit.white { color:#fff } .maiTit.white .logo { filter:brightness(0) invert(1); margin:0 .125em } .prodList { display:flex; flex-wrap:wrap; gap: 2em; } .prodList .li { width: calc((100% - 4em) / 3); margin-bottom: 2.5em; } .prodList.swiper-container { margin:-1.5vmin; display:block } .prodList.swiper-container .li.swiper-slide { width:33.3333% } .prodList.swiper-container .li.swiper-slide .prodSt { margin:1.5vmin } .main-tab { gap: .5em; } .main-tab > li { display: flex; align-items: center; height: 2.324em; border: 1px solid #ddd; padding: 0 2em; box-sizing: border-box; cursor: pointer; font-family: 'Teko'; } .main-tab > li > .tt { font-size: 1.215em; text-transform: uppercase; } .main-tab > li.on { background: #111; color: #fff; border: 1px solid #111; } .prodSt { position:relative; box-shaodw:0 0 1em rgba(0,0,0,.1); background:#fff; box-sizing:border-box; height:100%; display:flex; flex-direction:column; } .prodSt.c1 { background:#777; color:#fff; border-color:transparent } .prodSt[onclick] { cursor:pointer } .prodSt .imgW { background:#f7f7f7; position:relative } .prodSt .imgW .rank { position:absolute; left:-1px; top:-1px; width:4vmin; height:4vmin; display:flex; align-items:center; justify-content:center; color:#fff; background:#111; font-weight:800; z-index:1 } .prodSt .conW { box-sizing:border-box; padding-top: 1.5em; display:flex; flex-direction:column; gap:1vmin; justify-content:center; flex:1; text-align: center; } .prodSt .conW .prodT_price { padding-top:1vmin; font-size: 1.315em; justify-content: center; } .prodSt .conW .mgT { margin-top:auto } .wish_like { position: absolute; right: 1.5em; top: 1.5em; z-index: 99; } .wish_like .wishIcon { } .wish_like .wishIcon > img { display: block; height: 22px; object-fit: contain; opacity: .4; } .wish_like .wishIcon > img.cn { display: block; } .wish_like .wishIcon > img.cr { display: none; } .wish_like.on .wishIcon > img.cr { display: block; opacity: 1; } .wish_like.on .wishIcon > img.cn { display: none; } .prodSt.cate .bgW.resize { padding-bottom:62.2222% } .prodSt.cate .conW { position:absolute; left:0; top:0; width:100%; height:100%; padding:10%; padding-right:40%; gap:2vmin; color:#fff } .prodSt.cate .conW .t1 { font-weight:800; font-size:1.5em } .prodSt.cate .conW .t2 { line-height:1.5; opacity:.8 } .prodSt.cate .conW .more { margin-top:auto; width:3em; height:3em; border-radius:50%; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center } .prodSt.cate .conW .more .arrow:before { content:"\e907" } .prodSt:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; } /* .prodSt:hover:after { border-color: #aaa; transition:.3s } */ .prodT_cate { font-weight:700; opacity:.6 } .prodT_tit { font-size: 1.515em; letter-spacing: 1px; color: #333; } .prodT_price { display:inline-flex; align-items:baseline; gap:.125em; } .prodT_price .tw { font-weight:600; } .prodT_price .tn { font-weight:600; } .prodT_price .tt { font-weight: 400; margin-left: 3px; } .mainBanner a { display:block } .mainBanner a[href] { cursor:pointer } .mainBanner a:first-child { } .mainBanner a:last-child { } .mainBanner.mb0 a { margin-bottom:0 } .mainBanner a img { display:block } /*main best*/ .bestcate_container { padding-top: 2em; margin-bottom: 0 !important } .bestcate_container .bestcateList { } .bestcate_container .bestcateList > li { } .bestcate_container .bestcateList > li > .in { position:relative; display: flex; align-items: center; justify-content: center; gap: 1em; height: 18em; padding: 2em 3.5em; box-sizing: border-box; margin: 0 0 2em 2em; background: var(--siteC2); } .bestcate_container .bestcateList > li > .in > .imgCon { position: absolute; left: 3em; width: 35%; height: 100%; } .bestcate_container .bestcateList > li > .in > .imgCon > img { width: 100%; height: 100%; object-fit: contain; } .bestcate_container .bestcateList > li > .in > .titBox { width: 60%; margin-left: auto; } .bestcate_container .bestcateList > li > .in > .titBox > .tit { font-size: 3.15em; letter-spacing: 2px; line-height: 1.1; text-align: center; font-weight: 500; text-transform: uppercase; color: #fff; } .bestcate_container .bestcateList > li > .in > .titBox > .moreBtn { margin-top: 1em; text-align: center; } /*main info*/ .mainInfocon { padding-bottom: 14vmin; } .mainInfocon .info_contianer { display: flex; gap: 2em; margin-bottom: 2em; align-items: center; padding: 2em 0; border-top: 2px solid var(--siteC3); border-bottom: 2px solid var(--siteC3); } .mainInfocon .info_contianer .leftCon { width: 35%; text-align: center; } .mainInfocon .info_contianer .leftCon > .tit { font-size: 3.515em; font-weight: 700; } .mainInfocon .info_contianer .leftCon > .desc { font-size: 1.315em; font-weight: 400; opacity: .45; } .mainInfocon .info_contianer .leftCon > .lineHf { margin-top: 1.5em; font-weight: 500; text-decoration: underline; text-transform: uppercase; font-size: 1.15em; } .mainInfocon .info_contianer .rightCon { width: 65%; } .mainInfocon .info_contianer .rightCon > .imgCon { width: 100%; height: 55vh; } .mainInfocon .info_contianer .rightCon > .imgCon > img { width: 100%; height: 100%; object-fit: cover; } .mainInfocon .subscribe_wrap { display: flex; gap: 2em; align-items: center; padding: 3em; box-sizing: border-box; background: var(--siteC3); } .mainInfocon .subscribe_wrap > .icon { width: 10%; } .mainInfocon .subscribe_wrap > .icon > img { width: 100%; height: 100%; object-fit: contain; } .mainInfocon .subscribe_wrap > .titleCon { width: 35%; } .mainInfocon .subscribe_wrap > .titleCon > .tit { font-size: 2.15em; font-weight: 600; text-transform: uppercase; } .mainInfocon .subscribe_wrap > .titleCon > .txt { font-size: 1.615em; line-height: 1.1; opacity: .7; } .mainInfocon .subscribe_wrap > .formWrap { width: 55%; } .mainInfocon .subscribe_wrap > .formWrap .mailContainer { display: flex; } .mainInfocon .subscribe_wrap > .formWrap .mailContainer > .input_st { background: transparent; border: 1px solid #111; height: 3.614em; width: 100%; } .mainInfocon .subscribe_wrap > .formWrap .mailContainer > .input_st::placeholder { font-size: 1.315em; color: #111; font-family: 'Teko'; } .mainInfocon .subscribe_wrap > .formWrap .mailContainer #btn_submit { height: 3.614em; background: var(--siteC2); color: #fff; font-size: 1em; border: 1px solid var(--siteC2); } .mainInfocon .subscribe_wrap > .formWrap .mailContainer #btn_submit > .tt { font-size: 1.215em; } /*main contact*/ .main_contact { position:relative; padding: 15vmin 0; } .main_contact:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .3); content: ''; } .main_contact .main_contactInfo { position: relative; } .main_contact .main_contactInfo .tit { font-size: 3.415em; letter-spacing: 3px; font-weight: 600; line-height: 1.1; text-align: center; text-transform: uppercase; color: #fff; } /*컬러선택*/ .option_container { margin: 1em 0; padding-top: 1em; border-top: 1px solid #eee; } .option_container .item { margin-bottom: 1.5em; } .option_container .item:last-of-type { margin-bottom: 0; } .option_container .item > .tit { font-size: 1.215em; margin-bottom: .35em; font-weight: 600; font-family: 'Teko'; } .option_container .item > .BtnList li .inner{ cursor: pointer;} .option_container .item > .BtnList li .inner .input_option{ display: none;} .option_container .item > .BtnList { display: flex; flex-wrap: wrap; gap: .8em; } .option_container .item > .BtnList.color li { width: calc((100% - 1.6em) / 3); } .option_container .item > .BtnList.color li label{ width: 100%;} .option_container .item > .BtnList.color li .inner { display: flex; gap: .75em; border: 2px solid #ddd; } .option_container .item > .BtnList.color li .inner .crB { width: 3em; height: 2.515em; } .option_container .item > .BtnList.color li .inner .tt { position:relative; top: 9px; padding-bottom: .5em; font-size: 1.15em; font-family: 'Teko'; flex: 1; padding-right: .5em; } .option_container .item > .BtnList.color li .inner .crB.bl { background: var(--crBlack); } .option_container .item > .BtnList.color li .inner .crB.ye { background: var(--siteC3); } .option_container .item > .BtnList.color li .inner .crB.gn { background: var(--siteC2); } .option_container .item > .BtnList.size li .inner { display: flex; align-items: center; justify-content: center; height: 2.515em; padding: 0 1em; box-sizing: border-box; min-width: 3em; font-family: 'Teko'; font-size: 1.063em; font-weight: 500; color: #444; } .option_container .item > .BtnList.size li .inner > .tx { } .option_container .item > .BtnList.size li .inner { border: 2px solid var(--crBlack); } .option_container .item > .BtnList.size li .inner.non { background: #ebebeb; border: 2px solid #ebebeb; } .option_container .item > .BtnList.size > li.on .inner { background: var(--crBlack); } .option_container .item > .BtnList.size > li.on .inner.non { background: #ebebeb; } .option_container .item > .BtnList.size > li.on .inner > .tx { color: #fff; } .option_container .item > .BtnList.size > li.on .inner.non > .tx { border: 2px solid #ebebeb; color: #444; } .option_container .item > .BtnList.color > li.on .inner { border: 2px solid var(--crBlack); } /**/ .add_wrap #musicListWrap { position: relative; } .add_wrap #musicListWrap .arrowBtn { width: 2.5em; cursor: pointer; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: var(--siteC2); } .add_wrap #musicListWrap .arrowBtn > .xi { color: #fff; font-size: .956em; } .add_wrap #musicListWrap .listWrap { position: absolute; left: 0; min-width: 20em; max-width: 30em; background: #111; border-radius: 0 0 2em 2em; font-size: .915em; overflow: hidden; height: 0; opacity: 0; transition: .3s ease; } .add_wrap #musicListWrap.on .listWrap { height: auto; opacity: 1; } .add_wrap #musicListWrap .listWrap > .all { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em; box-sizing: border-box; border-bottom: 2px solid rgba(255,255,255, .215); } .add_wrap #musicListWrap .listWrap > .all .list { display: flex; align-items: center; gap: .5em; color: rgba(255,255,255, .3); } .add_wrap #musicListWrap .listWrap > .all .list > .num { font-size: .915em; font-weight: 600; } .add_wrap #musicListWrap .listWrap > .all .tx { font-size: .915em; font-weight: 400; color: rgba(255,255,255, .3); } .add_wrap #musicListWrap .musicList { max-height: 20em; overflow-y: scroll; } .add_wrap #musicListWrap .musicList::-webkit-scrollbar { height: 10px; width: 3px; } .add_wrap #musicListWrap .musicList::-webkit-scrollbar-thumb { background: #999; } .add_wrap #musicListWrap .musicList::-webkit-scrollbar-track { background: #111; } .add_wrap #musicListWrap .musicList > li { padding: .75em 0; border-bottom: 1px solid rgba(255,255,255, .15); transition: .3s;} .add_wrap #musicListWrap .musicList > li:last-of-type { border-bottom: none; } .add_wrap #musicListWrap .musicList > li > .inner { width: 100%; } .add_wrap #musicListWrap .musicList > li > .inner > .con { width: 100%; display: flex; align-items: center; gap: .5em; color: #fff; padding: 0 1em; box-sizing: border-box; } .add_wrap #musicListWrap .musicList > li > .inner > .con > .tit { font-size: .965em; font-weight: 500; color: rgba(255,255,255, .9); flex: 1; } .add_wrap #musicListWrap .musicList > li > .inner > .con > .playTime { } .add_wrap #musicListWrap .musicList > li > .inner > .con > .playTime > .tt { font-size: .815em; color: rgba(255,255,255, .515); } .add_wrap #musicListWrap .musicList > li > .inner > .con .swiperBtn { position:relative; width: 2em; height: 2em; border: 1px solid rgba(255,255,255, .2); border-radius: .25em; } .add_wrap #musicListWrap .musicList > li > .inner > .con .swiperBtn:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .add_wrap #musicListWrap .musicList > li.on, .add_wrap #musicListWrap .musicList > li:hover{ background: rgba(0,0,0,.9);}