:root { 
 --main-padding:3.54166666667%; 
 --inner-padding:7.91666666667%; 
 --border-radius: 30px; 
 --point-color:#0029FF; 
 --point-s-color:#36A1F3; 
 --gray-l-color:#A5A5A5; 
 --gray-d-color:#535353; 
 --light-bg-color:#EFF1F2; 

 } 

 @media screen and (max-width:1200px) { 
:root { --border-radius: 1em; } 
 } 

 @media screen and (max-width:768px) { 
 :root { --inner-padding:5.54166666667%; } 
 } 

 #sub { background: none; } 
 #wrapper { width: 100%; height: 100%; } 
 #wrapper #wrap { position: relative; width: 100%; height: 100%; } 
.inner { height: 100%; padding-left: var(--main-padding); padding-right: var(--main-padding); } 
.flex { display: flex; align-items: center; } 
.img_m { display: none; } 

@media (max-width:1400px) { 

 } 

/*************************** header ***************************/
header.header { position: fixed; width: 100%; height: 116px; z-index: 9997; transition: .3s; } 
header.header .logo { width: 207px; height: 100%; background: url(../img/logo_bla.png)no-repeat center / contain; transition: .3s; } 
header.header .inner { line-height: 119px; transition: .3s; } 

header.header ul.gnb { margin-left: 119px; } 
header.header ul.gnb > li { position: relative; margin-right: 56px; } 
header.header ul.gnb > li:last-child { margin-right: 0; } 
header.header ul.gnb > li > a { font-size: 1.8rem; line-height: 26px; color:#000; transition: .3s; } 
header.header ul.gnb > li > .depth-wr { position: absolute; top: 90px; left: 50%; z-index: -1; width: 143px; height: 0; margin-left: -70px; border-radius: 1em; background-color: #1a1a1a; opacity: 0; overflow: hidden; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } 
header.header ul.gnb > li:hover > .depth-wr { padding: 1em; height: auto; z-index: 99; opacity: 1; } 
header.header ul.gnb > li > .depth-wr li { width: 100%; display: block; } 
header.header ul.gnb > li > .depth-wr li a { display: block; padding: 2px 0; line-height: 2; color: rgba(255,255,255,0.7); font-size: 1.6rem; word-break: break-word; white-space: normal; text-align: center; } 
header.header ul.gnb > li > .depth-wr li a:hover { color: rgba(255,255,255,1); } 

header.header .right-btn-wr { margin-left: auto; color: #000; } 
header.header .right-btn-wr li { margin-left: 1.2em; } 
header.header .right-btn-wr a { color: #000; transition: .3s; } 
header.header .right-btn-wr a .material-symbols-rounded { vertical-align: sub; } 

header.header.on { height: 90px; background: #fff; border-bottom: 1px solid #ddd; } 
header.header.on .inner { height: 90px; line-height: 90px; } 
header.header.on .logo { background: url(../img/logo_b.png)no-repeat center / contain; } 
header.header.on ul.gnb > li > a { line-height: 90px; color: inherit; } 
header.header.on ul.gnb > li > .depth-wr { top: 70px; } 
header.header.on .right-btn-wr { color: initial; } 
header.header.on .right-btn-wr.flex li a { color: initial; } 

header.header.h-w .logo { background: url(../img/logo_w.png)no-repeat center / contain; } 
header.header.h-w .right-btn-wr ,
header.header.h-w .right-btn-wr a,
header.header.h-w ul.gnb > li > a { color: #fff; } 

header.header.on.h-w .logo { background: url(../img/logo_b.png)no-repeat center / contain; } 
header.header.on.h-w .right-btn-wr ,
header.header.on.h-w .right-btn-wr a,
header.header.on.h-w ul.gnb > li > a { color: #000; } 

/*hambtn*/
.ham_menu_btn { display: none; align-content: space-between; } 
.ham_menu_btn span { color:#242b44; font-size: 4rem; font-weight: 500; } 
.ham_menu_btn .material-symbols-rounded { vertical-align: sub; } 
.ham_menu_btn.close_ham { display: block; text-align: right; width: 100%; height: 100px; padding-right: var(--main-padding); background: var(--color-y); border-radius: 0; } 
.ham_menu_btn.close_ham span { color: #242b44; font-size: 4rem; font-weight:500; line-height: 100px; } 
.ham_menu { position: fixed; right: 0; top: 0; z-index: 9999; width: 0; height: 100vh; border-radius: var(--border-ra) 0 0 var(--border-ra); background:#fff url(/dw3/img/ham-bg.png)no-repeat 0 100% / 95%; overflow: hidden; visibility: hidden; transition: .3s; } 
.ham_menu a { color: var(--light-color); } 
.ham_menu > ul { padding: 30px; } 
.ham_menu > ul > li { width: 100%; line-height: 2; position: relative; } 
.ham_menu > ul > li:after { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 1.5em; background: #ccc; transform:rotate(0deg); transition-duration: 0.4s } 
.ham_menu > ul > li:before { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 1.5em; background: #ccc; transform:rotate(90deg); transition-duration: 0.4s } 
.ham_menu > ul > li:nth-child(1).active .gnb-depth { height: 177px; } 
.ham_menu > ul > li:nth-child(2).active .gnb-depth { height: 180px; } 
.ham_menu > ul > li:nth-child(4).active .gnb-depth { height: 177px; } 
.ham_menu > ul > li > .gnb-depth { height: 0; overflow: hidden; padding:0 15px; border: 0 solid #dee2e6; background: #f9fafb; transition-duration: 0.4s } 
.ham_menu > ul > li > a { font-size: 2.5rem; font-weight: 600; } 
.ham_menu > ul > li > .gnb-depth a { display: block; line-height: 36px } 
.ham_menu > ul > li > .gnb-depth { position: relative; } 
.ham_menu > ul > li.active:after { transform:rotate(180deg); transition-duration: 0.4s } 
.ham_menu > ul > li.active:before { transform:rotate(360deg); transition-duration: 0.4s } 
.ham_menu > ul > li:nth-child(3):after,.ham_menu > ul > li:nth-child(4):after,
.ham_menu > ul > li:nth-child(3):before, .ham_menu > ul > li:nth-child(4):before { display: none; } 
.ham_menu > ul > li.active .gnb-depth { padding: 15px; border-radius: 0.5em; height: auto; } 
.ham_menu > ul > li.active > .gnb-depth { border: 1px solid #dee2e6; } 
.ham_menu .login-wr { margin: 0 30px; } 
.ham_menu .login-wr a { display: block; margin:0.5em 0; padding: 1em 1.5em; background: var(--light-bg-color); border: 1px solid var(--border-light-gray); border-radius: 50px; text-align: center; } 
.ham_menu .login-wr a .material-symbols-rounded { vertical-align: bottom; } 



@media (max-width:1200px) { 
header.header ul.gnb { margin-left: auto; } 
header.header ul.gnb > li { margin-right: 3em; } 
header.header.on ul.gnb > li > a { font-size: 1.6rem; } 
header.header.on .right-btn-wr.flex li a { font-size: 1.5rem; } 
 } 

@media (max-width:1024px) { 
 /*900*/
 header.header { height: 100px; } 
 header.header .inner { line-height: 100px; } 
 header.header ul.gnb { display: none; } 
 header.header.on .inner { height: 70px; line-height: 70px; } 
 header.header.on { height: 70px; } 

 header.header .right-btn-wr .ham_menu_btn { display: flex; } 
 .ham_menu .login-wr { display: none; } 
 .ham_menu.active { width: 60%; visibility: visible; } 
 .ham_bg.active { position: fixed; width: 100%; background:rgba(30, 29, 42, 0.7); backdrop-filter: blur(3px); left: 0; top: 0; height: 100%; z-index: 9998; } 
 } 

 @media (max-width:768px) { 
 header.header { height: 80px; } 
 header.header .logo { width: 163px; } 
.right-btn-wr .log-btn { display: none; } 
.ham_menu .login-wr { display: block; } 

.ham_menu > ul > li { line-height: 2.5; } 
.ham_menu > ul > li > a { font-size: 2.3rem; letter-spacing: -0.03em; } 
.ham_menu > ul > li > .gnb-depth a { font-size: 1.8rem; } 
.ham_menu.active { width: 80%; } 
.ham_menu_btn.close_ham { height: 65px; } 
.ham_menu_btn.close_ham span { height: 65px; line-height: 65px; } 
 } 

/*하단*/
#ft { background:#000; text-align:left; line-height:1.5em; margin-top: 110px; } 
#ft h2 { position:absolute; font-size:0; text-indent:-9999em; line-height:0; overflow:hidden } 
#ft h3 { margin:0 0 15px; color:#fff; font-size:1.8rem; font-family: 'Montserrat'; font-weight: 400; } 
#ft .ft_wr { margin:0 auto; } 
#ft .ft_wr:after { display:block; visibility:hidden; clear:both; content:"" } 
#ft .ft_con { width:25%; height: 334px; float:left; padding:3em 2.3em; color:#828282; font-size:1.5rem; line-height:1.5; word-wrap:break-word; border-left:1px solid #242424; min-height:230px } 
#ft .ft_con:last-child { border-right:1px solid #242424; } 
#ft .ft_con .lat li { border: 0; margin-left: 0.35em; padding: 0.1em 0; list-style: '·'; } 
#ft .ft_con .lat ul { border: 0; } 
#ft .ft_con .lat h3 { display: none; } 
#ft .ft_con .lat a { color: #828282; } 
#ft .ft_con .lat .new_icon { display: none; } 
#ft .adm-btn { display: none; color: var(--gray-d-color); } 
#ft p span { display: inline-block; width: 66px; color: #fff; font-weight: 200; } 
#ft_cs { border-left:0 } 
#ft_if p { font-size: 1.3rem; } 
#ft_if p span { width: auto; margin-right: 0.5em; } 
#ft_if p a { color: #828282; } 
#ft_if p.name { font-size: 1.6rem; } 
#ft_cs p.call { margin-bottom: 0.5em; font-size: 1.9rem; color: var(--point-s-color); } 
#ft_cs p.call span { font-size: 1.3rem; white-space: nowrap; } 
#ft_cs p.call a { color: var(--point-s-color); } 
#ft_cs strong { color:#000; font-size:1.5em } 
.ft_copy { font-size:1.3rem; clear:both; padding:10px 0; text-align:center; color:#6a6a6a; border-top:1px solid #242424; } 

@media (max-width:1300px) { 
#ft #ft_cs.ft_con { border-left: 0; } 
#ft .ft_con:last-child { border-right: 0; } 
 } 
@media (max-width:1200px) { 
#ft { margin-top: 3em; } 
#ft .ft_con { width: 33.333%; height: auto; padding: 2em 1.3em; } 
#ft #ft_if { display: flex; align-content: flex-start; flex-wrap: wrap; border-left: 0; border-top: 1px solid #444; } 
#ft #ft_if.ft_con { width: 100%; height: auto; min-height: auto; } 
#ft #ft_if .name { margin-bottom: 0.4em; } 
#ft #ft_if .name,
#ft #ft_if h3 { width: 100%; } 
#ft #ft_if p { margin-right: 1.5em; margin-bottom: 0.2em; } 
 } 
@media (max-width:1024px) { 
 #ft .ft_con { min-height: 177px; } 
#ft_if p { font-size: 1.5rem; } 
 } 
@media (max-width:768px) { 
#ft h3 { margin: 0 0 0.5em; font-weight: 600; } 
#ft .ft_con { width:100%; padding:1em 0; min-height:auto; border-left:0; border-top:1px solid #444 } 
#ft .ft_wr { padding:10px } 
#ft_cs { border-top:0 } 
#ft_cs a { width:100%; text-align:center } 
#ft_cs p.call a { font-size: 2.5rem; font-weight: 500; } 
#ft_link { padding:15px } 
#ft_link li { padding:0 5px } 
#ft #ft_cs.ft_con { border-top: 0; } 
 } 

/* 네비버튼 */
.right-navi { position: fixed; bottom: 55px; z-index: 3; right:var(--main-padding); width: auto; height: auto; transition: .5s; visibility: hidden; opacity: 0; } 
.right-navi .navi-box { display: flex; justify-content: center; align-items: center; margin-left: auto; transition: .5s; } 
.right-navi .navi-box.buy-btn { position: relative; z-index: 2; transition: .5s; transform: translateY(40px); } 
.right-navi .navi-box.buy-btn p { position: absolute; color: #fff; font-family: 'Poppins'; font-size: 2.5rem; font-weight: 700; z-index: 1; } 
.right-navi .navi-box.buy-btn img { animation:buy-ani 30s linear infinite; transform-origin: 50% 50%; } 
.right-navi .navi-box.spec-btn { margin: 0.533em 0; transition: .5s; transform: translateY(20px); } 
.right-navi .navi-box.spec-btn img { width: 126px; height: 136px; } 
.right-navi .navi-box.go-top { width: 0; height: 0; border-radius: 100%; border:1px solid var(--gray-l-color); background: #fff; color: #000; cursor: pointer; opacity: 0; transition: .3s; } 
.right-navi .navi-box.go-top span { font-weight: 200; } 

.right-navi.on { visibility: visible; opacity: 1; } 
.right-navi.on .navi-box.buy-btn { transform: translateY(0); } 
.right-navi.on .navi-box.spec-btn { transform: translateY(0); } 

.right-navi.nofixed { bottom: 452px; } 
.right-navi.top-nofixed .navi-box.go-top { width: 50px; height: 50px; opacity: 1; } 


body.wishlist .right-navi .navi-box.buy-btn,
body.orderinquiry .right-navi .navi-box.buy-btn,
body.register_form .right-navi .navi-box.buy-btn,
body.member_confirm .right-navi .navi-box.buy-btn,
body.mypage .right-navi .navi-box.buy-btn,
body.mypage .right-navi .navi-box.spec-btn,
body.item .right-navi .navi-box.buy-btn,
body.list .right-navi .navi-box.buy-btn { display: none; } 



@media (max-width:1024px) { 
.right-navi .navi-box.buy-btn img { width: 90px; } 
.right-navi .navi-box.spec-btn img { width: 90px; height: auto; } 
 } 
 @media (max-width:768px) { 
 .right-navi { bottom: 2em; } 
 .right-navi.nofixed { bottom: 2em; } 
 .right-navi .navi-box.spec-btn img,
 .right-navi .navi-box.buy-btn img { width: 73px; } 
 .right-navi .navi-box.buy-btn p { font-size: 2rem; } 
 } 



/* 슬로건 */
.ab_slogan { position:relative; background-color: var(--point-s-color); height:41px; overflow:hidden; transition:3s; -webkit-transition:3s; } 
.ab_slogan.on { letter-spacing:-0.5px; } 
.ab_slogan:before { content:""; position:absolute; left:0; top:0; bottom:0; z-index:1; width:500px; } 
.ab_slogan:after { content:""; position:absolute; right:0; top:0; bottom:0; width:500px; } 
.ab_slogan mark { color:#fff; } 
.ab_slogan .ab_marquee { position:absolute; display:inline-block; overflow:hidden; top: 4px; left:0; white-space:nowrap; } 
.ab_slogan .ab_marquee span { background-color: var(--point-s-color); } 
.ab_slogan .ab_marquee01 { animation:mrqueev1 50s linear infinite; } 
.ab_slogan .ab_marquee02 { animation:mrqueev2 50s linear infinite; } 
.ab_slogan .ab_marquee.t2 { animation-delay:-25s; } 

.ab_slogan .ab_marquee span { display:inline-block; box-sizing:border-box; padding:0 5px; /*opacity: 0.5; */ } 
.ab_slogan .ab_marquee span img { width: auto; } 

@media screen and (max-width:768px) { 
.ab_slogan .ab_marquee01 { animation: mrqueev1 300s linear infinite; } 
.ab_slogan .ab_marquee02 { animation:mrqueev2 300s linear infinite; } 
.ab_slogan .ab_marquee.t2 { animation-delay: -150s; } 
.ab_slogan .ab_marquee span { width: 968px; } 

 }