.Hallym {font-family: 'Hallym', sans-serif;}
.Pretendard {font-family: 'Pretendard', sans-serif;}
.NotoSansKR {font-family: 'Noto Sans KR', sans-serif;}
.Roboto {font-family: 'Roboto', sans-serif;}
.Manrope {font-family: 'Manrope', sans-serif;}
  
:root {  
  --point:#be2237; 
  --black:#000000;
  --white: #ffffff;

  --font1: "archivo", sans-serif;
  --font2: "Pretendard", sans-serif;
  --transition : all 0.4s ease;

  --marquee_gap: 1.25rem;
}


/* common */
 * { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none;}
html::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
html, body {font: 400 16px/1.3 "Pretendard", sans-serif; color: #000000; width: 100%; position: relative; }
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}
img {max-width: 100%;}
a[href^="tel"] {text-decoration: none !important; }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {display: none;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99; transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}
  
#wrapper {width: 100%; position: relative; }
.pc {display: block;}
.tablet {display: none !important;}
.mobile { display: none !important;}
.inner {position: relative; width:90%; max-width: 1440px; margin: auto;}


/* 테스트 */
#preview_item {display: none;}

  
/*header*/
.header { width: 100%; height: 6.25rem; position: fixed; left: 0; top: 0; z-index: 90; transition: var(--transition); --font_color: var(--white)}
.header .h_inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; width: 100%; max-width: 100%; padding: 0 3.75rem;}
.header .h_logo {width: 30%; max-width: 92px;}
.header .h_logo .link { width: 100%; display: flex; align-items: center; justify-content: center; }
.header .h_logo .link > img { transition: all 0.35s ease; }
.header .h_nav { display: flex; align-items: center; gap: 5.313rem;}
.header .h_nav > li{position: relative;}
.header .h_nav > li > .link { font-weight: 600; font-size: 1.125rem; color: var(--font_color); display: inline-block; transition: var(--transition); letter-spacing: 0.05rem; }
.header .h_nav > li > .link:hover {color: #dddddd;}
.header .h_nav > li > .link_e { font-weight: 600; font-size: 1.125rem; color: var(--font_color); display: inline-block; transition: var(--transition); letter-spacing: 0.05rem; font-family: var(--font1);}
.header .h_nav > li > .link_e:hover {color: #dddddd;}
.header .h_nav > li.mall > .link { width: 8.125rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;  gap: 0.5rem; border: 1px solid var(--font_color); border-radius: 100px; font-size: 0.875rem;}
.header .h_nav > li.mall > .link:hover { background-color: var(--point); color: var(--white); border-color: var(--point);}
.header .h_nav > li.mall > .link .icon { width: 1rem; display: inline-block;transition: all 0.35s ease; }
.header .h_nav > li.mall > .link:hover .icon {filter: invert(0);}
.header .nav_menu {display: flex; align-items: center; justify-content: center; width: 2rem; aspect-ratio: 1 / 1; cursor: pointer; display: none; font-size: 2rem; color: var(--font_color); transition: var(--transition);}

.lang_btn { display: flex; position: relative; }
.lang_btn a { display: block; color: #777; font-size: 1rem; font-family: var(--font1); }
.lang_btn a.on { color: #be2237; font-weight: 700; }
.lang_btn a:nth-of-type(2) { margin-left: 38px; }
.lang_btn:after { content: ''; width: 1px; height: 12px; background: #777777; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }


.section-PRODUCTS .header,
.section-NEWS .header { --font_color: var(--black);}
.section-PRODUCTS .header .h_logo .link > img,
.section-NEWS .header .h_logo .link > img {filter: invert(1);}
.section-PRODUCTS .header .h_nav > li.mall > .link .icon,
.section-NEWS .header .h_nav > li.mall > .link .icon {filter: invert(1);}
.section-PRODUCTS .header .h_nav > li.mall > .link:hover .icon,
.section-NEWS .header .h_nav > li.mall > .link:hover .icon {filter: invert(0);}

.sub_wrap .header.down {background-color: var(--white); --font_color: var(--black);}
.sub_wrap .header.down .h_logo .link > img {filter: invert(1);}
.sub_wrap .header.down .h_nav > li.mall > .link .icon {filter: invert(1);}
.sub_wrap .header.down .h_nav > li.mall > .link:hover .icon { filter: invert(0);}

.header.open {--font_color: var(--black);}
.header.open .h_logo .link > img {filter: invert(1);}
.header.open .h_nav > li.mall > .link .icon {filter: invert(1);}
.header.open .h_nav > li.mall > .link:hover .icon { filter: invert(0);}

  
/* nav box */
.nav_box { width: 100%; height: 100%; box-sizing: border-box;  position: fixed; top: 0; left: 0; background-color: var(--white); overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; z-index: 100; display: flex; flex-direction: column; transition: all 0.4s ease; padding: 0 1.875rem 3rem; pointer-events: none; opacity: 0;}
.nav_box.open { pointer-events: auto;  opacity: 1; }
.nav_box::-webkit-scrollbar { display: none; }  
.nav_box .top { width: 100%; height: 5rem; display: flex; align-items: center;  justify-content: space-between; gap: 2.5rem;}
.nav_box .top .logo {width: 30%; max-width: 92px;}
.nav_box .top .logo .link { width: 100%; display: flex; align-items: center; justify-content: center; }
.nav_box .top .logo .link > img {transition: all 0.35s ease; filter: invert(1);}
.nav_box .top .nav_menu {display: flex; align-items: center; justify-content: center; width: 2rem; aspect-ratio: 1 / 1; cursor: pointer; font-size: 2rem; color: var(--black); transition: var(--transition);}
.nav_box .nav {width: 100%; display: flex; flex-direction: column; border-top: 1px solid #ddd; margin-top: 1rem;}
.nav_box .nav > li { position: relative; width: 100%; min-height: 7rem; padding: 0 1.5rem; }
.nav_box .nav > li > .link {position: relative;width: 100%; height: 100%; display: flex; align-items: center; /* justify-content: center; */ font-size: 1.875rem; line-height: 1.5; font-weight: 700; color: var(--black); cursor: pointer; gap: 0;  font-family: var(--font2);}
.nav_box .nav > li > .link .arrow_icon {font-size: 1.875rem; color: #be2237; position:absolute; right:0; }
.nav_box .nav > li > .link_e {position: relative;width: 100%; height: 100%; display: flex; align-items: center; /* justify-content: center; */ font-size: 1.875rem; line-height: 1.5; font-weight: 700; color: var(--black); cursor: pointer; gap: 0;  font-family: var(--font1);}
.nav_box .nav > li > .link_e .arrow_icon {font-size: 1.875rem; color: #be2237; position:absolute; right:0; }
  
  

/* footer */
.footer { position: relative; background: #141414; padding: 5rem 0;}
.footer .f_inner { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; max-width: 100%; padding: 0 4.5rem;}
.footer .f_top { display: flex; justify-content: space-between; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.footer .f_top .logo { font-size: 1.15rem; font-weight: 600; color: var(--white);}
.footer .f_top .logo .txt { position: relative; display: inline-flex; align-items: end; gap: 0.125rem; line-height: 1; }
.footer .f_top .logo .txt::after { content: ""; display: inline-block; width: 0.25rem; aspect-ratio: 1 / 1; background: var(--point); border-radius: 50%;}
.footer .f_top .logo .txt_e { position: relative; display: inline-flex; align-items: end; gap: 0.125rem; line-height: 1; font-family: var(--font1);}
.footer .f_top .logo .txt_e::after { content: ""; display: inline-block; width: 0.25rem; aspect-ratio: 1 / 1; background: var(--point); border-radius: 50%;}
.footer .f_top .side_nav { display: flex; gap: 1.75rem; font-size: 0.938rem; color: var(--white);}
.footer .f_top .side_nav .link{display: inline-block;}
.footer .f_top .side_nav .link:hover{text-decoration: underline;}
.footer .f_top .side_nav_e { display: flex; gap: 1.75rem; font-size: 0.938rem; color: var(--white); font-family: var(--font1);}
.footer .f_top .side_nav_e .link{display: inline-block;}
.footer .f_top .side_nav_e .link:hover{text-decoration: underline;}
.footer .f_bottom { display: flex; flex-direction: column; gap: 1.65rem;}
.footer .f_bottom .f_infobox { display: flex; gap: 1.75rem; flex-wrap: wrap;}
.footer .f_bottom .f_infobox .info_txt { font-size: 0.938rem; font-weight: 500; color: var(--white);}
.footer .f_bottom .copyright { font-size: 0.813rem; color: #555555;}
.footer .f_bottom .f_infobox .info_txt_e { font-size: 0.938rem; font-weight: 500; color: var(--white); font-family: var(--font1);}
.footer .f_bottom .copyright_e { font-size: 0.813rem; color: #555555; font-family: var(--font1);}
  
  

/* fixed button */
.fixed_btnbox { position: fixed; right: 4rem; bottom: 5%; display: flex; flex-direction: column; gap: 0.5rem; z-index: 50;}
.fixed_btnbox .fixed_btn { width: 4.063rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 100px;  cursor: pointer; transition: var(--transition); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);}
.fixed_btnbox .fixed_btn:hover { box-shadow: 0 0 0.5rem rgba(0,0,0,0.4);}
.fixed_btnbox .fixed_btn.channel_btn { background: var(--point);}
.fixed_btnbox .fixed_btn.channel_btn .icon { width: 50%; max-width: 2.063rem;}
.fixed_btnbox .fixed_btn.top_btn {background: var(--white);}
.fixed_btnbox .fixed_btn.top_btn .icon { width: 25%; max-width: 1rem;}



/* page common */
#container_title {display: none;}
#hd_login_msg {position: absolute; top: 0; left: 0; font-size: 0; line-height: 0; overflow: hidden;}
.skipNav { position: absolute; top: -500px; width: 100%; padding: 10px; box-sizing: border-box; background: #2e3a57; color: #fff; font-size: 1.5em; text-align: center;}

.m_txt1 { font-size: 1.375rem; font-weight: 600; color: var(--point); font-family: var(--font1);}
.m_txt2 { font-size: 3rem; line-height: 1.25; color: var(--black); word-break: keep-all;}
.m_txt2 .bold{font-weight: 700;}
.m_txt3 { font-size: 1.25rem; line-height: 1.5; color: var(--black);}
.m_txt1.white,.m_txt2.white, .m_txt3.white {color: #fff;}
.m_txt1 + .m_txt2 { margin-top: 2.7rem;}
.m_txt2 + .m_txt3 { margin-top: 2.5rem;}

.m_morebox { position: relative;  display: flex; justify-content: center;}
.m_more { display: flex; align-items: center; justify-content: center; min-width: 7.813rem; height: 3.125rem; font-size: 1rem; font-weight: 600; color: var(--black); border: 1px solid #ddd; border-radius: 0.125rem; transition: var(--transition);}
.m_more:hover { background: var(--point); color: var(--white); border-color: var(--point);}

.m_viewbox{position: relative;}
.m_view { display: flex; align-items: center; justify-content: center; position: relative; width: 4.375rem; aspect-ratio: 1 / 1; border-radius: 50%; line-height: 1; background: var(--point); filter: drop-shadow(0 0 0.75rem rgb(190, 34, 55, 0.5)); font-size: 0.938rem; font-weight: 600; color: var(--white);}
.m_view > .circle{position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; border: 1px solid rgb(190, 34, 55, 0.17); border-radius: 50%;  animation: active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite;}
.m_view > .circle:nth-child(2) { animation-delay: 0.5s;}
.m_view .txt { transition: var(--transition);}
.m_view:hover .txt { opacity: 0.8;}

@keyframes active-circle{
  0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.5}
  50%{opacity:1.0}
  100%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}
}


/* marquee */
.marquees_box {display: flex; flex-direction: column; gap: var(--marquee_gap); margin: auto; overflow-x: hidden; width: 100%;}
.marquee { position: relative; display: flex; gap: var(--marquee_gap);}
.marquee .marquee_group { flex-shrink: 0; display: flex; align-items: center; gap: var(--marquee_gap); min-width: 100%;}


/* tabs */
.tab_wrap {position: relative;}
.tab_navbox { display: flex; gap: 1rem; flex-wrap: wrap;}
.tab_navbox .tab_nav { display: flex; align-items: center; justify-content: center; border-radius: 100px; font-size: 0.938rem; line-height: 1; padding: 0.875rem 1.25rem; text-align: center; color: #000; background: #fff; border: 1px solid #ededed; transition: all 0.4s ease; cursor: pointer;}
.tab_navbox .tab_nav.on { background-color: #be2237; color: #fff;}
.tab_navbox .tab_nav > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.tab_contbox { position: relative;}
.tab_contbox .tab_cont { display: none; animation: 1.2s ease 0s fadeIn;}
.tab_contbox .tab_cont.on {display: block;}

@keyframes fadeIn {
	0% {opacity:0}
	100% {opacity:1;}
}