/*---common css---*/

:root {
	/*color*/
	--color-base: #5ca0d8;
	--color-kakao: #ffc401;
	--color-kakao-text: #442f01;
	--color-naver: #00c13a;

	/*font-size*/
	--font-size-14: 0.875rem;
	--font-size-16: 1rem; 
	--font-size-17: 1.0625rem; 
	--font-size-18: 1.125rem;
	--font-size-19: 1.188rem;
	--font-size-20: 1.25rem; 
	--font-size-21: 1.313rem; 
	--font-size-22: 1.375rem; 
	--font-size-23: 1.438rem; 
	--font-size-25: 1.563rem;
	--font-size-26: 1.625rem;
	--font-size-27: 1.688rem; 
	--font-size-31: 1.938rem; 
	--font-size-32: 2rem; 
	--font-size-34: 2.125rem; 
	--font-size-35: 2.188rem; 
	--font-size-37: 2.313rem; 
	--font-size-38: 2.375rem; 
	--font-size-42: 2.625rem; 
	--font-size-60: 3.75rem; 
	--font-size-65: 4.063rem; 
	--font-size-70: 4.375rem; 
	--font-size-80: 5rem;
	--font-size-110: 6.875rem;
	--font-size-112: 7rem;


	/*font-weight*/
	--font-l: 300;
	--font-r: 400;
	--font-m: 500;
	--font-sb: 600;
	--font-b: bold;
	--font-bl: 900;
}

/*font size*/

.fs_14{font-size: var(--font-size-14);}
.fs_16{font-size: var(--font-size-16);} 
.fs_17{font-size: var(--font-size-17);} 
.fs_18{font-size: var(--font-size-18);}
.fs_19{font-size: var(--font-size-19);}
.fs_20{font-size: var(--font-size-20);} 
.fs_21{font-size: var(--font-size-21);} 
.fs_22{font-size: var(--font-size-22);}
.fs_23{font-size: var(--font-size-23);}
.fs_25{font-size: var(--font-size-25);} 
.fs_26{font-size: var(--font-size-26);}
.fs_27{font-size: var(--font-size-27);} 
.fs_31{font-size: var(--font-size-31);}
.fs_32{font-size: var(--font-size-32);}
.fs_34{font-size: var(--font-size-34);}
.fs_35{font-size: var(--font-size-35);}
.fs_37{font-size: var(--font-size-37);}
.fs_38{font-size: var(--font-size-38);}
.fs_42{font-size: var(--font-size-42);}
.fs_60{font-size: var(--font-size-60);}
.fs_65{font-size: var(--font-size-65);}
.fs_70{font-size: var(--font-size-70);}
.fs_80{font-size: var(--font-size-80);}
.fs_110{font-size: var(--font-size-110);}
.fs_112{font-size: var(--font-size-112);}

@media screen and (max-width:1020px){
.fs_110 {font-size:60px;}
}

@media screen and (max-width:720px){
.fs_110 {font-size:35px;}
}

/*font weight*/
.font_l{font-weight: var(--font-l);}
.font_r{font-weight: var(--font-r);}
.font_m{font-weight: var(--font-m);}
.font_sb{font-weight: var(--font-sb);}
.font_b{font-weight: var(--font-b);}
.font_bl{font-weight: var(--font-bl);}

/*text-motion*/
.j_motion.common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion.on {transform: translateY(0);opacity: 1;}

.j_motion.common_motion02{transform: translateY(100px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.j_motion.common_motion.on {transform: translateY(0);opacity: 1;}

.j_delay_01{transition-delay: .2s !important;}
.j_delay_02{transition-delay: .4s !important;}
.j_delay_03{transition-delay: .6s !important;}
.j_delay_04{transition-delay: .8s !important;}
.j_delay_05{transition-delay: 1s !important;}
.j_delay_06{transition-delay: 1.2s !important;}
.j_delay_07{transition-delay: 1.4s !important;}
.j_delay_08{transition-delay: 1.6s !important;}
.j_delay_09{transition-delay: 1.8s !important;}
.j_delay_10{transition-delay: 2s !important;}
.j_delay_11{transition-delay: 2.2s !important;}


.mt34 {margin-top:34px;}

/*color*/

.fc01 {color:var(--color-base);}


/*common*/
.j_inner {width:92%; margin:0 auto; max-width:1600px; position:relative;}

/*header*/

#j_header {height:100px; width:100%; background:#fff; position:absolute; left:0; top:0; z-index:90; transition:0.28s;}
#j_header.active {position:fixed;}
.hd_inner {max-width:1600px; width:96%; margin:0 auto; height:100%;}
.hd_Wrap {display:flex; justify-content:space-between; align-items:center; height:100%;}
.j_nav {height:100%;}
.j_nav > .j_gnb {display:flex; align-items:center;}
.j_nav > .j_gnb > li a {display:block; height:100%; line-height:100px; padding:0 20px; font-size:1.125rem; font-weight:700; transition:0.28s;}
.j_nav > .j_gnb > li a:hover {color:#023cc2;}

.j_nav > .j_gnb > li:first-child a {padding-left:0;}
.j_nav > .j_gnb > li:laist-child a {padding-right:0;}
.j_nav > .j_gnb > li a i {position:relative;}
.j_nav > .j_gnb > li a i::after{content: "";position: absolute;bottom: -3px;left: auto;right: 0;width: 0;height: 2px;background: #5ca0d8;z-index: 1;transition: width .45s ease;}
.j_nav > .j_gnb > li a:hover i::after {left:0; right:auto;width:100%;}

#j_header.nav-down {top:0px;}
#j_header.nav-up {top:-100px;}


@media screen and (max-width:1380px){
.j_nav > .j_gnb > li a {padding:0 10px;}
}

@media screen and (max-width:1280px){
#j_header {height:80px;}
.j_nav > .j_gnb > li a {line-height:80px;}
}


@media screen and (max-width:1180px){
.hd_Wrap > .j_nav {display:none;}
#j_header {height:60px;}
.j_nav > .j_gnb > li a {line-height:60px;}
.hd_logo img {width:80%;}
}


/*overray*/

.mo_btn {width:26px; height:21px; float:right; position:relative; display:none;}
.mo_btn span {display:block; background:#5ca0d8; width:100%; height:3px;position: absolute;}
.mo_btn span:nth-of-type(1) {transform:translateY(6px);}
.mo_btn span:nth-of-type(2) {transform:translateY(0px);}
.mo_btn span:nth-of-type(3) {transform:translateY(-6px);}

.mobile_wrap {position:fixed;  width:30%; height:100vh; top:0; right:0; padding:40px; background:#fff ;transition: transform 0.4s; transform:translateX(100%); box-shadow: 5px 20px 24px 0px rgba(0, 0, 0, 0.11); z-index:99; border-radius:15px;}
.mobile_wrap.on {transform:translateX(0);}
.mo_inner {height:100%; color:#000;}
.mo_inner > .j_gnb {height:100%; display: flex; height: 100%;  flex-direction: column;  align-items: center; width: 100%; text-align: center;justify-content: center; gap: 40px; }
.mo_inner > .j_gnb > li {font-size: 1.188rem; word-break: keep-all; font-weight:700; transition:0.28s; }
.mo_inner > .j_gnb > li > a {color:#000; font-family: 'GmarketSans';}
.mo_inner > .j_gnb > li:hover a {color:#5ca0d8;}
.close_btn {position:absolute; right:10px; top:10px; width: 30px; height: 30px;}
.close_btn span {background:#5ca0d8; width:20px; height:2px;  display:block;  position:absolute; transform:translate(0);}
.close_btn span:nth-of-type(1) {transform: rotate(45deg);}
.close_btn span:nth-of-type(2) {transform: rotate(-45deg);}


@media screen and (max-width:1180px){
.hd_Wrap > .j_nav {display:none;}
.mo_btn {display:block;}
}


@media screen and (max-width:767px){
.mobile_wrap {padding:20px;}
.mo_inner > .j_gnb > li {font-size:12px;}
.mo_inner > .j_gnb {    justify-content: flex-start; margin-top: 40px;}

}


/*mv*/

.mainDesc {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center; width:100%;}
.mainDesc h2 {margin-top:15px;}
.mainDesc h2 b {color:#fff;}
.mainDesc h3 {margin-bottom:10px; color:#fff;}
.mainDesc p {color:#fff; line-height:1.52em;}

@media screen and (max-width:1180px){
.mainDesc h4{font-size:30px;}
.mainDesc h2 b{font-size:50px;}
.mainDesc h2 em{font-size:50px;}
.mainDesc h3{font-size:30px;}
.mainDesc p {font-size:25px;}
}

@media screen and (max-width:1080px){
.mainDesc h4{font-size:25px;}
.mainDesc h2 b {font-size:35px;}
.mainDesc h2 em {font-size:35px;}
.mainDesc h3{font-size:25px;}
.mainDesc p {font-size:20px;}
}

@media screen and (max-width:767px){
.mainDesc h4{font-size:20px;}
.mainDesc h2 b {font-size:30px;}
.mainDesc h2 em {font-size:30px;}
.mainDesc h3{font-size:20px;}
.mainDesc p {font-size:16px;}

}



/*sec01*/

#hioSec01 {background:url(/img/pc_img/sec01_bg.jpg) no-repeat center / cover;}

@media screen and (max-width:767px){

#hioSec01 {background:url(/img/mo_img/sec01_bg_mo.jpg) no-repeat center / cover;}

}




/*sec02*/

#hioSec02 {background:url(/img/pc_img/sec02_bg.jpg) no-repeat center / cover; padding-bottom:103px;}
.hio02Swip {padding-bottom:10px;}
.hio02Swip .swiper-slide {transform: scale(0.8); opacity:0.5; transition:0.28s;}
.hio02Swip .swiper-slide.swiper-slide-active {transform: scale(1); opacity:1;}
.hio02Swip .swiper-slide figure {border-radius:20px; overflow:hidden;box-shadow: 2px 8px 16px 7px rgba(0, 0, 0, 0.1);}
.hio02Swip .swiper-slide figure img {width:100%; }
.swiper-button-next.hio02_next {background: url(/img/icon/hio02_next.png) no-repeat center / cover; width:13px; height:22px;}
.swiper-button-prev.hio02_prev {background: url(/img/icon/hio02_prev.png) no-repeat center / cover; width:13px; height:22px;}
.swiper-button-next::after,.swiper-button-prev::after { display: none;}

.hio02Swip02 .swiper-wrapper{transition-timing-function: linear;}
.hio02Swip02 .swiper-slide figure {border-radius:15px; overflow:hidden;}
.hio02Swip02 .swiper-slide figure img {width:100%;}

@media screen and (max-width:767px){
#hioSec02 {padding-bottom:100px;}
.hio02Swip .swiper-slide figure {border-radius:25px; overflow:hidden;box-shadow: 2px 8px 16px 7px rgba(0, 0, 0, 0.1);}
.hio02Swip {padding-bottom:0;}
.swiper-button-next.hio02_next {display:none;}
.swiper-button-prev.hio02_prev {display:none;}
}



/*sec03*/
#hioSec03 {background:url(/img/pc_img/sec03_bg.jpg) no-repeat center / cover; padding:145px 0;}
.sec03_inner {max-width:1340px; margin:0 auto; width:92%; position:relative;}
.blink_sec03 {animation: blink01 1s infinite step-end;}

@keyframes blink01 {
    0%{opacity: 1}
    50%{opacity: 0}
    100%{opacity: 1}
}

@media screen and (max-width:767px){
	#hioSec03 {background:url(/img/mo_img/sec03_mo_bg.jpg) no-repeat center / cover; padding:100px 0;}
}



/*sec04*/
#hioSec04 {background:url(/img/pc_img/sec04_bg.jpg) no-repeat center / cover; padding-bottom:160px}
.hio04Swip .swiper-slide figure img {width:100%;}


@media screen and (max-width:1080px){
	#hioSec04 { padding-bottom:120px}
}

@media screen and (max-width:767px){
	#hioSec04 {background:url(/img/pc_img/sec04_bg.jpg) no-repeat center / cover; padding-bottom:100px}
}
/*sec05*/

#hioSec05 {background:url(/img/pc_img/sec05_bg.jpg) no-repeat center / cover;}

@media screen and (max-width:1180px){

}

@media screen and (max-width:767px){
#hioSec05 {background:url(/img/pc_img/sec05_bg_mo.jpg) no-repeat center / cover;}
}


/*sec06*/

#hioSec06 {background:#e7eefa; width:100%; padding-bottom:160px; position:relative;}
.sec06Swip {padding:80px 32px;}
.sec06Swip .swiper-slide > figure {border-radius:20px; border:1px solid #6d95bb; overflow:hidden;}
.sec06Swip .swiper-slide > figure img {width:100%;}
.swiper-button-next.hio06_next {background: url(/img/icon/hio06_next.png) no-repeat center / cover; width:13px; height:22px; right:-15px;}
.swiper-button-prev.hio06_prev {background: url(/img/icon/hio06_prev.png) no-repeat center / cover; width:13px; height:22px; left:-15px;}

.sec06HoverBox {cursor:pointer;}
.sec06HoverBox figure {position:absolute; right: -7%; top: -11%; width:138px; height:138px;}
.sec06HoverBox figure img { position: absolute; top: 0; left: 0;width: 100%;height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out;}
.sec06HoverBox figure img:first-child { animation: smoothBlink 1s infinite; }
.sec06HoverBox figure img:nth-child(2) { animation: smoothBlinkReverse 1s infinite;}
.sec06Hover_img {position:absolute;     top: 18%;left: -91%; opacity:0; transition: opacity 0.5s ease-in-out; border:1px solid #7898df;}
.sec06Hover_img figure img {width:100%;}
.sec06HoverBox:hover + .sec06Hover_img {opacity: 1; /* HoverBox에 마우스 호버 시 나타나도록 설정 */}
.sec06Hover_img_mo {display:none; position:absolute; top:33%; z-index:70;  width:300px; left: 50%;transform: translateX(-50%); }
.sec06Hover_img_mo figure {text-align:center;}
.sec06Hover_img_mo figure img {width:100%;}
@keyframes smoothBlink {
  0%, 49% {
    opacity: 1; /* 처음엔 보임 */
  }
  50%, 100% {
    opacity: 0; /* 점진적으로 사라짐 */
  }
}

@keyframes smoothBlinkReverse {
  0%, 49% {
    opacity: 0; /* 처음엔 보이지 않음 */
  }
  50%, 100% {
    opacity: 1; /* 점진적으로 보이게 함 */
  }
}


@media screen and (max-width:1080px){

.sec06HoverBox figure img {width:100px; height:100px; left:42px;}
#hioSec06 {padding-bottom:120px;}
}


@media screen and (max-width:767px){
#hioSec06 {padding-bottom:60px;}
.sec06Swip {padding:32px 10px;}
.sec06HoverBox figure img {width:80px; height:80px; left:70px;}
.sec06Hover_img {display:none;}
}



/*sec07*/

#hioSec07 {background:url(/img/pc_img/sec07_bg.jpg) no-repeat center / cover; padding-bottom:83px;}
.hio07Swip {padding:75px 0;}
.hio07Swip .swiper-wrapper{transition-timing-function: linear;}
.hio07Swip .swiper-slide figure {box-shadow: 5px 20px 24px 0px rgba(0, 0, 0, 0.11);}
.hio07Swip .swiper-slide figure img {width:100%;}

@media screen and (max-width:1080px){
#hioSec07 {background:url(/img/pc_img/sec07_bg.jpg) no-repeat center / cover; padding-bottom:83px;}
.hio07Swip {padding:40px 0 0 0;}
}

@media screen and (max-width:767px){

.hio07Swip {padding:0;}
}


/*sec08*/
#hioSec08 {position:relative;}
.sec08Box {position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:405px; height:660px; }
.sec08Box:after {content:''; position:absolute; left:0; top:0; height:100%; width:100%; background:url(/img/pc_img/sec08_mock.png) no-repeat center / cover; z-index:1;}
.sec08Swip {max-width: 361px; margin-top: 15px;}
.sec08Swip .swiper-slide figure {position:relative; border-radius:20px 20px 0 0; overflow:hidden;}
.sec08Swip .swiper-slide figure img {width:100%;}


@media screen and (max-width:1810px){
  .sec08Box{  max-width: 312px;    height: 531px;}

}

@media screen and (max-width:1460px){
	.sec08Box{  max-width: 312px;    height: 450px; border:10px solid #222; border-radius:40px 40px 0 0; overflow:hidden; border-bottom:0;}
	.sec08Swip {margin-top:0;}
	.sec08Box::after {display:none;}
}
@media screen and (max-width:1220px){
	.sec08Box{  max-width: 312px;    height: 380px;}
}

@media screen and (max-width:1020px){
	.sec08Box{ height: 300px;max-width: 214px;}
	.sec08Swip {max-width:200px}
}

@media screen and (max-width:767px){
#hioSec08 {background:url(/img/mo_img/sec08_bg_mo.jpg) no-repeat center / cover;}
.sec08Box {max-width:150px;  height: 207px; border-radius:20px 20px 0 0;}

.sec08Swip .swiper-slide figure {border-radius:0;}
}




/*sec09*/
#hioSec09 {position:relative; overflow:hidden; height:860px; background:url(/img/pc_img/sec09_bg.jpg) no-repeat center / cover;}

:root{
	--size: clamp(10rem, 1rem + 40vmin, 30rem);
	--gap: calc(var(--size) / 14);
	--duration: 40s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
}


/*wrapper*/
.wrapper{ gap:23px; display: flex;flex-direction: column;  margin: auto; max-width: 100vw;}
.wrapper--vertical{flex-direction: row;height: 187vh;}

.rail_wrap{position: absolute;top: 0vh;left: 70px;}
.rail_wrap *{box-sizing: border-box;}
.marquee{position: relative; display: flex;user-select: none;gap: var(--gap);}
.marquee__group{flex-shrink: 0;display: flex;align-items: center;justify-content: space-around;gap: var(--gap);min-width: 100%;animation: scroll-x var(--duration) linear infinite;}

.marquee__group>li{border-radius: 15px;overflow: hidden;box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);}
.marquee__group>li>figure>img{display: block;}

@media(prefers-reduced-motion: reduce){
	.marquee__group{animation-play-state: paused;}
}
.marquee--vertical{
  --mask-direction: to bottom;
}
.marquee--vertical, .marquee--vertical .marquee__group{flex-direction: column;}
.marquee--vertical .marquee__group{animation-name: scroll-y;}
.marquee--reverse .marquee__group{animation-direction: reverse; animation-delay: -3s;}

@keyframes scroll-y{
  from{transform: translateY(var(--scroll-start));}
  to{transform: translateY(var(--scroll-end));}
}

.sec09_Rt {    position: absolute;  right: 70px; top: 50%; transform: translateY(-50%);}

@media screen and (max-width:1520px){
.sec09_Rt {right:10px;}
}

@media screen and (max-width:1480px){
.sec09_Rt {z-index:20;}
#hioSec09::after {  content: ""; position: absolute;   top: 0;  left: 0; width: 100%; height: 100%; z-index: 19;background: linear-gradient(to top, rgb(0 0 0 / 95%) 20%, transparent);}
.marquee__group>li>figure>img {width:280px;}
}

@media screen and (max-width:1240px){
.sec09_Rt {z-index:20; right:-25%; width:100%;}

}

@media screen and (max-width:1020px){
.sec09_Rt {z-index:20; right:-18%; width:100%;}

}

@media screen and (max-width:820px){
#hioSec09 {height:560px;} 
.sec09_Rt {z-index:20; right:-15%; width:100%;}
.sec09_Rt > figure > img {width:70%;}
}


@media screen and (max-width:767px){
#hioSec09 {height:300px;}
.marquee__group>li>figure>img {width:90px;}
}



/*sec10*/


#hioSec10 {background:#f7f7f7; position:relative;}
.sec10Box {overflow:hidden; width:calc(100% - 737px); max-width:1185px;}
.sec10Swip .swiper-wrapper {transition-timing-function: linear;}
.sec10Swip .swiper-slide figure img {width:100%;}
.sec10Wrap {display: flex; align-items:center;justify-content: center;}
.sec10Cont {width:737px;}
.sec10Cont img {width:100%;}

.sec10BotSlide{position:relative; background-color:#5ca0d8; overflow:hidden; height:60px;}
.sec10BotSlide .sec10Slide_wrap{height:100%; display:flex; align-items:center; position:absolute; left:0; top:0; animation-name:logo_motion; animation-duration:25s; animation-timing-function:linear; animation-iteration-count: infinite;}
.sec10BotSlide img{display:block; margin-right:100px; }


@keyframes logo_motion{ 
    0% { left: -100%; }
    100% { left: 0; }
}

@media screen and (max-width:1480px){
.sec10Cont {width:590px;}
.sec10Box {width:calc(100% - 590px);}
}

@media screen and (max-width:1280px){
.sec10Cont {width:450px;}
.sec10Box {width:calc(100% - 450px);}
}
@media screen and (max-width:1080px){
.sec10Wrap  {flex-wrap:Wrap;}
.sec10Box {width:100%;}
.sec10Cont {width:450px; margin-right:60px;}
}

@media screen and (max-width:767px){
.sec10BotSlide {height:35px;}
.sec10BotSlide img {width:970px; }
}

/*sec11*/

#hioSec11 {background: url(/img/pc_img/sec11_bg.jpg) no-repeat center / cover;padding: 160px 0;}
#hioSec11.sec11_mo {background:none; padding:0; display:none;}
.sec11ContWrap {padding: 100px 60px;border-radius: 50px; background: #fff;}
.sec11_graph {width: 0;overflow: hidden; /* 애니메이션 중 내용이 넘치지 않도록 설정 */}
.sec11_cont01 img,.sec11_cont02 img,.sec11_cont03 .sec11_cont03_img {max-width: 100%; margin: 0 auto; display: block;}
.sec11_cont02 {margin-top: 68px;}
.sec11_cont03 {position: relative;}
.sec11_line {position: absolute;top: 161px; /* 원하는 위치로 조정 */ left: 8%;width: 0px; /* 초기 width */overflow: hidden; /* 내용이 넘치지 않도록 설정 */}
.sec11Stamp {position: absolute;right: 36px;top: 28%;opacity: 0; /* 처음에 보이지 않도록 설정 */transform: translateY(-100px); /* 위에서 시작하도록 설정 */}


@media screen and (max-width:1760px){
#hioSec11.sec11_pc {display:none;}

#hioSec11.sec11_mo {display:block;}
}



/*sec13*/

#hioSec13 {background:url(/img/pc_img/sec13_bg.jpg) no-repeat center / cover; padding:120px 0 109px; }
.sec13_inner {max-width:1239px; width:96%; margin:0 auto;}
.allStoreDate {position:absolute; width:293px; height:50px; top:0; left:50%; transform:translateX(-50%); border-radius:0 0 40px 40px; background:#000; color:#fff; text-align:center; line-height:50px;}
.sec13Content {display:flex; justify-content:space-between; margin-top:60px;}
.sec13Tit {color:#fff; text-align:center;}
.mapBox {width:609px; margin-right:90px;}
.allStoreListBox {height:636px; width:540px;border-radius:40px; border:10px solid #f0f0f0; overflow:hidden; background:url(/img/pc_img/allStoreList_bg.png) no-repeat center / cover; position:relative; padding:52px 25px; box-sizing:border-box;}
.storeBox{margin-top:45px;     max-height: 480px; /* 최대 높이 설정 */ overflow-y: scroll;}
.storeBox::-webkit-scrollbar { width: 8px;  /* 스크롤바의 너비 */}
.storeBox::-webkit-scrollbar-thumb {height: 72px; /* 스크롤바의 길이 */background: #023cc2; /* 스크롤바의 색상 */border-radius: 4px;}
.storeBox::-webkit-scrollbar-track {background: rgba(0, 0, 0, .15);  /*스크롤바 뒷 배경 색상*/}
.allStoreList {display:flex; margin-top:33px; flex-wrap:wrap; row-gap: 10px;letter-spacing: -0.09em;}
.allStoreList li {width:33.33%;}
.allStoreList li span {color:#444444;}

.storeArea {margin-top:45px;}

.storePinBox {position:relative;}
.storePin {position:absolute ; width:77px; height:117px; background:url(/img/pc_img/storePin.png); background-repeat: no-repeat;background-position: center;background-size: contain; text-align:Center; z-index:20;     opacity: 0; transform: translateY(-20px); transition: all 0.4s ease;}
.storePin.on {    opacity: 1;transform: translateY(0);}
.storePin.seo {left:21%; top:9%;}
.storePin.gang {left:52%; top:9%;}
.storePin.in {left:11%; top:15%;}
.storePin.gyeon {left:30%; top:19%;}
.storePin.Chung {left: 17%;top: 31.3%;}
.storePin.gwang {    left: 13%;top: 59%;}
.storePin.jae {left: 18%;top: 82%;}
.storePin.jeonbuk{left: 27.4%;top: 46%;}
.storePin.jeonnam{left: 27.7%; top: 61%;}
.storePin.gyeongbuk{left: 63%;top: 31.7%;}
.storePin.gyeongnam {left: 48.5%; top: 53.7%;}
.storePin.dae {    left: 56.4%; top: 46%;}
.storePin.ul {left: 74.5%;top: 50%;}
.storePin.bu {    left: 67%; top: 58%;}
.storePin h4 {margin-top:16px; margin-right:2px;}
.storePin p {color:#023cc2; margin-right:2px;}



@media screen and (max-width:1280px){
	.sec13Content {flex-wrap:Wrap;        justify-content: center; row-gap: 30px;}
	.mapBox {margin-right:0;}
}

@media screen and (max-width:767px){
#hioSec13 {padding:100px 0;}
.allStoreList li {width:50%;}
.mapImg {width:100%;}
.storePin {    width: 55px; height: 85px;}
.storePin h4 {font-size:12px; position: absolute; left: 50%;transform: translateX(-50%);  top: 15px; margin-top:0; margin-right:0;}
.storePin p {font-size:12px;position: absolute; left: 50%;transform: translateX(-50%);  top: 30px;}
.allStoreListBox {height:497px;}
}




/*sec14*/

#hioSec14.sec14_pc {padding:160px 0; background:url(/img/pc_img/sec14_bg.jpg) no-repeat center / cover;}
.hio14_inner {max-width:1350px; width:96%; margin:0 auto;}
.sec14_cont01 img {max-width: 100%;margin: 0 auto;display: block;}
.sec14_cont02 {margin-top:70px; position:relative;}
.sec14_line{  position: absolute; top: 3%;  left: 12.5%; width: 0; overflow: hidden;}
.sec14_up {position: absolute; left: 12%; /* 왼쪽 위치 */ width: 1080px; /* 고정된 너비 */ height: 0; /* 초기 높이 */overflow: hidden; /* 내용 숨기기 */ bottom: 109px; /* 아래 위치 */ background-image: url(/img/pc_img/sec14_up.png); /* 배경 이미지 */  background-position: bottom left; /* 아래 왼쪽에서 시작 */background-repeat: no-repeat; /* 반복 없음 */background-size: cover; /* 전체 영역을 커버하도록 설정 */}
.sec14_icon {position:absolute; right: 5%; top: 32%; animation: bounce_ani 0.4s alternate infinite; opacity: 0;}
@keyframes bounce_ani{0%{transform: scale(0.9);} 100%{transform: scale(1.1);}}

#hioSec14.sec14_mo {display:none;}

@media screen and (max-width:1430px){
#hioSec14.sec14_pc {display:none;}
#hioSec14.sec14_mo {display:block;}
}



/*sec16*/
#hioSec16 {padding:160px 0; background:#f5f5f5;}
.sec16_inner {max-width:1494px; width:96%; margin:0 auto;}
.sec16_tit {max-width:100%; display:block; margin:0 auto;}

.tabnavSec16 {display:flex; gap:28px; justify-content:center; padding:100px 0;}
.tabnavSec16 li a {display:block; width:245px; height:65px; text-align:center; border-radius:32.5px; border:2px solid #0383f1; background:#fff; color:#0383f1; line-height:65px; font-size:2.375rem; font-family: 'GmarketSans'; font-weight:700; transition:0.28s; }
.tabnavSec16 li a.active {color:#fff; background:#0383f1;}
.tabcontentSec16 div {position:relative;}
.sec16Blink {animation: blink-animation 0.7s ease-in-out infinite;}
@keyframes blink-animation {
    0%, 20% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    80%, 100% {
        opacity: 1;
    }
}
.tabcontentSec16 div img {width:100%;}

@media screen and (max-width:1430px){
#hioSec16 {padding:120px 0;}
.tabnavSec16 {padding:80px 0;}
}

@media screen and (max-width:830px){
.tabnavSec16 {gap:12px;}
.tabnavSec16 li a {width:230px;}
}

@media screen and (max-width:767px){
.tabnavSec16 li a {width:90px; height:40px; line-height:40px; font-size:16px;}
.tabnavSec16 {padding:40px 0;}
#hioSec16 {padding:80px 0;}
}
/*sec17*/

#hioSec17 {background:#212121; padding-bottom:160px;}
.sec17FormBox {border-radius:30px; background:rgba(255,255,255,0.10); overflow:hidden; max-width:1097px; padding:55px 80px 100px; box-sizing:border-box; margin:0 auto; }
.sec17FormBox > h2 {color:#fff; text-align:center;}

@media screen and (max-width:767px){
#hioSec17 {padding-bottom:100px;}
}


/*문의*/
.w573{max-width:573px;}
.di_f {display:flex; align-items: end;}

.inq_box {margin:0 auto; width:100%; margin-top:35px;}
.inq_box h2 {color:#fff;}
.inq_box h2 b {color:#c2c2c2; margin-left:26px; position:relative;}
.inq_box h2 b:before {content:'';width:6px; height:6px; background:#0383f1; border-radius:50%; position:absolute; top:50%; left:-15px; transform:translateY(-50%);}

.inq_box ul li + li {margin-top:19px;}
.j_form_box {display:flex; align-items:center;}
.j_form_box label {width:191px;}
.j_form_box label i {position:relative; color:#fff;}
.j_form_box label i:after {right:-13px; top:0px; position:absolute; content:''; width:6px; height:6px; background:#0383f1; border-radius:50%}
.j_form_box .field_box {width:calc(100% - 191px);}
.j_form_box .field_box input {width:100%; box-sizing:border-box; padding:10px 20px; background:rgba(255, 255, 255, 0.3); border-radius:3px; color:#fff;}
.j_form_box .field_box input::placeholder {font-size:16px;color:#c2c2c2;}
.j_form_box .field_box textarea {padding:16px 20px; box-sizing:border-box; background:rgba(255, 255, 255, 0.3); border-radius:3px; width:100%; color:#fff;}
.j_form_box .field_box textarea::placeholder {font-size:16px; color:#c2c2c2;}
.j_form_box .field_box.di_f p {margin-left:16px;} 


.j_radio_list {display:flex; align-items:center;}
.j_radio_list > div {width:191px; color:#fff;}
.j_radio_list .j_radio_field {width:calc(100% - 191px); display:flex;}
.j_radio_list .j_radio_field .radio_box {width:50%; text-align:center; color:#fff;}
.j_radio_list .j_radio_field .radio_box:nth-of-type(1) {border-radius:5px 0px 0 5px; overflow:hidden;} 
.j_radio_list .j_radio_field .radio_box:nth-of-type(2) {border-radius:0px 5px 5px 0px; overflow:hidden;} 
.j_radio_field .radio_box input[type=radio] + label span {    background:rgba(255, 255, 255, 0.3); display: block;line-height: 47px; transition: all .3s; cursor:pointer;}
.j_radio_field .radio_box input[type=radio] {position: absolute;top: 0; left: 0; width: 0;height: 0; opacity: 0;  outline: 0; z-index: -1; overflow: hidden; display:none;}
.j_radio_field .radio_box input[type=radio]:checked + label span {background-color:#023cc2; color:#fff;}

.j_form_box label {color:#fff;}
.j_form_box label.ag_box {display:flex; width:100%; align-items:center;}
.agree_box input[type=checkbox] {position: absolute;top: 0; left: 0; width: 0;height: 0; opacity: 0;  outline: 0; z-index: -1; overflow: hidden; display:none;}
.agree_box input[type=checkbox] + label span {width:22px; height:22px; border-radius:50%; background:url('/img/pc_img/inq_icon.png') no-repeat center / cover; display:block; margin-right:9px; cursor:pointer; display:block;}
.agree_box input[type=checkbox]:checked + label span {background:url('/img/pc_img/inq_chk.png') no-repeat 50% 50%;}
.agree_box input[type=checkbox] + label b {color:#999;margin-right: 5px; cursor:pointer;}
.ag_box {margin-top:20px;}
.ag_box a {color:#fff;}
.form_btn {width:100%; height:75px; line-height:75px; text-align:center; background:#023cc2; border-radius:10px; color:#fff; margin-top:40px;}

.new_field_box {display:flex; gap:6px;}

.j_form_box.new_textare_box {align-items:unset;}
.j_form_box .field_box textarea {height:165px;}



@media screen and (max-width:767px){
.sec17FormBox {padding:15px;}
.j_form_box {flex-wrap:Wrap;}
.j_form_box label {width:100%;}
.j_radio_list {flex-wrap:wrap;}
.j_radio_list > div {width:100%;}
.j_form_box .field_box {width:100%; margin-top:10px;}
.j_form_box .field_box textarea {width:100%;}
.j_radio_list .j_radio_field {width:100%; margin-top:10px;}
.j_form_box .field_box input {width:100%;}
.inq_box {margin-top:20px;}
.form_btn {height:40px; line-height:40px; font-size:18px; margin-top:20px;}
}






/*게시판 이너*/
.bo_pd {padding:150px 0;}
.bo_section {max-width:1400px; margin:0 auto;}

/*footer*/
.hioFoot {background:#000; margin-bottom:95px;}
.ft_wrap {padding:55px 0; display:flex; align-items:center;     justify-content: space-between;}
.ft_wrap p {color:#656565; font-size:1rem; font-weight:400;}
.mt10 {margin-top:10px;}
.copy_p {margin-top:20px;}
.ml20 {margin-left:20px;}


@media screen and (max-width:1460px){
.hioFoot {margin-bottom:0;}
}
 

@media screen and (max-width:1080px){
.ml20 {margin-left:10px;}
}

@media screen and (max-width:1030px){
.ft_wrap {flex-wrap:Wrap; row-gap:20px;  flex-direction: column-reverse;}
.ft_lt {width:100%;}
.ft_rt {width:100%;}
}




@media screen and (max-width:767px){
.ml20 {margin-left:0;}
.mt10 {margin-top:0px;}
.ft_rt {text-align:center;}
.ft_wrap {padding:20px; 0}
.ft_wrap p {font-size:14px; font-weight:500; text-align:center; line-height:1.2em;}

}


/*---개인정보처리방침, 이용약관 팝업 추가---*/
.add_pop_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.9);z-index: 9999;display: none;}
.add_pop_wrap *{color: #fff;}
.add_pop_inner{position: absolute;top: 50%;left: 50%;width: 94%;max-width: 800px;height: 600px;border-radius: 15px;overflow: hidden;transform: translate(-50%,-50%) scale(.9);transition: transform .3s ease;}
#add_wrap_02 .add_pop_inner{height: 250px;}
.add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);}

.add_pop_tit{background: #023cc2;color: #FFF;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 25px;}
.add_pop_close{width: 20px;height: 60px;position: relative;}
.add_pop_close span{position: absolute;top: 29px;left: 0;width: 20px;height: 2px;background: #fff;z-index: 1;transition: transform .3s ease; }
.add_pop_close span:nth-child(1){transform: rotate(45deg);}
.add_pop_close span:nth-child(2){transform: rotate(-45deg);}

.add_pop_close:hover span{transform: rotate(0);}

.add_pop_con{background: #FFF;padding: 22px 25px;overflow-y: scroll;height: calc( 100% - 60px );}
.add_pop_con h5{font-size: 1rem;font-weight: bold;margin-bottom: 10px; color:#000;}
.add_pop_con p{font-size: 14px;line-height: 160%;margin-bottom: 25px; color:#000;}

@media (max-width: 780px){ 
	
	.add_pop_con p{font-size: 12px;}
}


/*--- quick_bar ---*/

.quick_bar {width:100%; background:#ab0f1b; height:95px; position:fixed; bottom:0; left:0; background:#023cc2; z-index:50; }
.quick_inner {display:flex; align-items:center; height:100%;}
.quick_input_box {display:flex; align-items:center; margin-left:40px;}
.quick_input_box ul {display:flex; align-items:center; gap:10px;}
.quick_input_box li input {height:50px; padding:13px; box-sizing:border-box; border:1px solid #fff; color:#000; max-width:167px; border-radius:5px;}
.w176 {max-width:176px !important;}
.w225 {max-width:225px !important;}
.w167 {max-width:167px !important;}
.quick_inner {display:flex;     justify-content: space-between;}
.q_form_btn_wrap  {margin-left:22px;}
.q_form_btn_wrap button{width:150px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:5px; background:#000000; color:#fff; }
.q_form_btn_wrap button i {margin-left:13px;}
.agree_box2 input {position: absolute;top: 0; left: 0; width: 0;height: 0; opacity: 0;  outline: 0; z-index: -1; overflow: hidden; display:none;}
.agree_box2 input[type=checkbox] + label {display:flex; align-items:center;}
.agree_box2 input[type=checkbox] + label span {width:24px; height:24px; display:block; border-radius:3px; background:#fff; cursor:pointer;}

.agree_box2 input[type=checkbox] + label b {margin-left:10px;}
.agree_box2 input[type=checkbox] + label a {cursor:pointer;}
.agree_box2 input[type=checkbox]:checked + label span {background:url('/img/pc_img/inq_chk.png') no-repeat 50% 50%;}

.callBox {display:flex; align-items:center; gap:13px; margin-right:31px;}
.callBox h2 {color:#fff; margin-top:8px;}

@media (max-width: 1720px){ 
	.callBox  {margin-right:10px;}
.w176 {max-width:150px !important;}
.w225 {max-width:150px !important;}
.w167 {max-width:150px !important;}
}

@media (max-width: 1550px){ 
.callBox  {margin-right:10px;}
.w176 {max-width:150px !important;}
.w225 {max-width:150px !important;}
.w167 {max-width:150px !important;}
.callBox h2 {font-size:20px;}
.callBox a {font-size:30px;}
.q_form_btn_wrap {margin-left:0;}
}

@media (max-width: 1460px){ 
.quick_bar {display:none;}
}

/*@media screen and (max-width: 768px){*/
/*  .hd_pops {top:100px !important; left:30px !important;}*/
/*  .hd_pops_con {width:307px !important; height:218px !important;}*/
/*}*/

@media screen and (max-width:720px){
	
	#hd_pop .hd_pops{top: 120px !important;left: 50% !important;transform: translateX(-50%);width: 80%;}
	#hd_pop .hd_pops .hd_pops_con{width: 100% !important;height: auto !important;line-height: 0;}
	#hd_pop .hd_pops .hd_pops_con br{display: none;}
}

.quick_side {display:none; width:134px; height:134px; border-radius:134px; color:#fff; background:#023cc2; font-weight:700; justify-content: center; font-size: 30px; align-items: center;  top: 84%;right: 20px; position:fixed;  box-shadow: 6px 9px 24px 0px rgba(0, 0, 0, 0.11); z-index:80;}
.quick_side a {display:flex; width:100%; height:100%;align-items: center;justify-content: center;}


#popup_form_02 {position: fixed;top: 0; left: 0; width: 100%; height: 100vh; background: rgba(2, 60, 194, .95);z-index: 2000; display: none;}

.pf_wrap {display: flex;justify-content: center; align-items: center;flex-direction: column;  height: 100%;}
.pf_form {    width: 100%; max-width: 650px;}
.pf_form_box ul {margin-top:30px;}
.pf_form_box ul li input{width:100%; background:rgba(255, 255, 255, 0.7); padding:13px; color:#fff;}
.pf_form_box ul li input::placeholder {color:#fff;}
.pf_form_box ul li + li {margin-top:20px;}
.q_btn {    background: #000;color: #fff; width: 100%;height: 50px; text-align: center;border-radius: 3px;line-height: 50px;}
.quick_btn {position:absolute; top:10%; left:0%; cursor:pointer;}
.quick_btn span {width:40px; height:7px; background:#fff; display:block; position:Absolute;}
.quick_btn span:nth-child(1) {transform: rotate(45deg);}
.quick_btn span:nth-child(2) {transform: rotate(-45deg);}

.pf_wrap h2 {font-size:var(--font-size-31); font-weight:700; color:#fff; margin-top:30px;}

@media screen and (max-width:1460px){
.quick_side {display:flex;}
}


@media screen and (max-width:1080px){
.bc_side_bar {right:-10px;}
.bc_side_bar ul li figure {width:80%;}
.quick_side {width:107px; height:107px;}
}

@media screen and (max-width:720px){
.quick_side {width:70px; height:70px; font-size:19px;}
.bc_side_bar {right:-50px;}
.bc_side_bar ul li figure {width:50%;}
.quick_btn {left:0%; top:10%;}
}

@media screen and (max-width: 768px){
  .hd_pops {top:100px !important; left:30px !important;}
  .hd_pops_con {width:307px !important; height:218px !important;}
}

.j_site_bg {position: fixed; left: 0; top: 0;width: 100%; height: 100%;  background-color: rgba(0, 0, 0, .8); display: none; z-index: 40;}
.j_site_bg.on {display:block;}

.video-wrap {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}


/*20241029*/

@media screen and (max-width: 768px){
.mainVisual  {margin-top:60px;}
.mainDesc h4 {font-size:18px;}
.mainDesc h2 {margin-top:0;}
.mainDesc h2 b {font-size:20px;}
.mainDesc h2 em {font-size:24px;}
.mainDesc h3 {margin-bottom:0;}
}