@charset "utf-8";

/* CSS Document */
html{-ms-text-size-adjust: var(--html-font-size-1);-webkit-text-size-adjust: var(--html-font-size-1); overflow-x:hidden; overflow-y:scroll}
html,body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,form,input,select,textarea,button,label,fieldset,table,tr,td,th,tbody,thead,tfoot,caption,video,strong,em,i,b{margin:0;padding:0; font-size:inherit}
ul,ol,li{list-style:none}
img { border:none; max-width:100%}
em,i{ font-style:normal}
table{ border-collapse:collapse; border-spacing:0}
span, strong, a, em, i, b, input, button, textarea, select, label{ display:inline-block; font-size:inherit; font-family:inherit; color:inherit; vertical-align: middle}
strong,h1,h2,h3,th{ font-weight:inherit}
i{ vertical-align: baseline;}
input[type=button], button, textarea, select{ appearance:none;-webkit-appearance:none; -moz-appearance: none; max-width:100%; cursor:pointer}
select{ max-width:100%; background:url(../images/inc/arrow_down.svg) right .75em center no-repeat #fff; background-size:.85em auto}
a, input, button, textarea, select, li{ -webkit-tap-highlight-color:transparent}
a:focus, input:focus, button:focus, textarea:focus, select:focus{ outline:none}
a:focus:not(:focus-visible), input:focus:not(:focus-visible), button:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible){ outline: none}
iframe{ border:none}
a,
a:active,
a:hover{text-decoration:none}

body{ font-family:'pretendard',sans-serif; font-weight:400; line-height:1.3; color:var(--color-black); word-break: keep-all; letter-spacing: -0.05rem; font-size:16px; -webkit-font-smoothing:antialiased}
html.hidden{ overflow-y:hidden}

.wrapHide{ position:absolute; opacity:0; width:0; z-index:-1; visibility:hidden}


/* ====== POP ====== */
.dwrap{ position:relative; width:2000px; left:50%; margin-left:-1000px}

.layerWrap{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:1003}
.layerWrap .layerBg{position:absolute; z-index:9999; width:100%; height:100%; left:0; top:0; background:#000; opacity:.5}
.layerWrap .layerFrame{ position:absolute; z-index:10000; left:0; top:0; width:100%; height:100%}
html.pop{background:transparent; display:flex; justify-content:center; align-items:center; width:100%; height:100vh}
html.pop .popWrap{ position:relative; display:flex; flex-direction:column; justify-content:center; max-width:96vw; height:90vh; margin: auto 0;}
html.pop .popWrap .popTit{ position:relative; z-index:1; padding:1em 1em 1em 2em; display:flex; background:var(--color-point); border-radius:.5em .5em 0 0; color:#fff; transform:translateY(1px)}
html.pop .popWrap .popTit .tit{ flex:1 1 100%; padding-top:1em}
html.pop .popWrap .popTit .tit .t1{ font-weight:700; font-size:1.5em}
html.pop .popWrap .popTit .popClose{ flex:0 0 auto; text-align:center; width:3em; line-height:3em; border-radius:100%; text-align:center; color:#fff}
html.pop .popWrap .popTit .popClose .xi{ transition:.3s; font-size:1.75em}
html.pop .popWrap .popTit .popClose .xi:before{ content:"\e9af"}
html.pop .popWrap .popTit .popClose:hover .xi{ transform:rotate(180deg)}
html.pop .popWrap .popIn{ box-sizing:border-box;  border-radius: 0 0 .5em .5em; box-shadow:1px 1px 10px #333; position:relative}
html.pop .popWrap .popIn .popCon{ min-height:5em; padding:2em 2em 3em 2em; background:#fff;}
html.pop .popWrap .popIn .popCon strong{font-weight: 700;}
html.pop .popWrap .popBtn{ position:relative; z-index:1; display:flex; background:#fff; border-radius:0 0 .5em .5em; transform:translateY(1px); overflow:hidden; padding-top:.5em; margin-top:-.5em; box-sizing:border-box}
html.pop .popWrap .popBtn:before{ content:""; position:absolute; left:0; top:0; height:.5em; width:100%; background:#fff}
html.pop .popWrap .popBtn .input_st{ border-radius:0}

html.pop .popWrap.st1{ width:100%; background:rgba(0,0,0,.5); max-width:100vw; height:100vh; position:fixed; left:0; top:0}
html.pop .popWrap.st1 .popIn{ padding:0; background:none; border-radius:0; box-shadow:none}

html.pop .popWrap.popAgree{ width: 900px;}

html.pop .popWrap.img {width: 25vw; opacity: 0; transform: scale(0.5); transition: 0.5s;}
html.pop .popWrap.img.ani {opacity: 1; transform: scale(1);}
html.pop .popWrap.img .popTit {background: transparent; padding: 0 0 1em 0; justify-content: flex-end;}
html.pop .popWrap.img .popTit .popClose{ width: auto;}
html.pop .popWrap.img .popTit .popClose .xi {color: #fff; text-align: right;}
html.pop .popWrap.img .tit .t1 {display: inline-block; font-size: 1.125rem; color: #fff; font-weight: 500; margin-top: 1rem;}

/* new pop movie */
.mainYt_wrap{}
.mainYt_wrap .wrapIn{ gap: 2em;}
.mainYt_wrap .videoBox{ width: 100%;}
.mainYt_wrap .videoBox .video{ padding-bottom:56.52%; border-radius: 1em; position:relative; overflow: hidden; }
.mainYt_wrap .videoBox .video iframe{ position:absolute; left:0; top:0; }
.mainYt_wrap .thumbBox{ flex:1; order: -1; display:flex; flex-direction: column; justify-content: flex-end; padding: 1em 0 1em; box-sizing:border-box; align-items: center; text-align: center; } 
.mainYt_wrap .thumbBox .main_tit{ margin: 0 0 2em;}
.mainYt_wrap .thumbBox .txt{ margin-bottom:2.5em; }
.mainYt_wrap .thumbBox.st1 .main_tit{margin-bottom: 1em;}
.mainYt_wrap .thumbBox .txt .t1{ font-weight:600; font-size:2em; color:#333; word-break:keep-all }
.mainYt_wrap .thumbBox .txt .t2{ margin-top: 0.5em; font-size: 1.125em; color:#555; }
.mainYt_wrap .thumbBox .txt .t3{ font-size: 1.125em; color:#555;}
.mainYt_wrap .thumbBox .thumbList{ gap:.5em;}
.mainYt_wrap .thumbBox .thumbList > li{ flex: 1; position: relative; }
.mainYt_wrap .thumbBox .thumbList > li::after{ content: ''; width: 100%; height: 100%; box-sizing: border-box; border:3px solid var(--color-point); position: absolute; left: 0; top: 0; opacity: 0; transition: all .3s; }
.mainYt_wrap .thumbBox .thumbList > li .img{ padding-bottom: 56.25%; border-radius: 1em; }
.mainYt_wrap .thumbBox .thumbList > li:hover::after{ opacity: 1;}

.popWrap.onClass{ width:/*  61.5vw */ 100vw; max-width: 50vw !important;}

html.pop .popWrap .popMvTit{ position:relative; z-index:1; padding:.5em 1em .5em 2em; display:flex; align-items:center; background:var(--color-point); border-radius:.5em .5em 0 0; transform:translateY(1px); color:#fff}
html.pop .popWrap .popMvTit .tit{ flex:1 1 100%}
html.pop .popWrap .popMvTit .tit .t1{ font-weight:700; font-size:1.375em}
html.pop .popWrap .popMvTit .tit .t2{ font-weight:700; font-size:1.125em}
html.pop .popWrap .popMvTit .popClose{ flex:0 0 auto; text-align:center; width:3em; line-height:3em; border-radius:100%; text-align:center; opacity:.6}
html.pop .popWrap .popMvTit .popClose .xi{ transition:.3s; font-size:1.75em}
html.pop .popWrap .popMvTit .popClose .xi:before{ content:"\e9af"}
html.pop .popWrap .popMvTit .popClose:hover{ opacity:1}
html.pop .popWrap .popMvTit .popClose:hover .xi{ transform:rotate(180deg)}

html.pop .popWrap .mvIn.popIn{ box-sizing:border-box; padding:2em 2em 3em 2em;  background:#fff; border-radius:0 0 .5em .5em; box-shadow:1px 1px 10px #333; position:relative}
html.pop .popWrap .mvIn.popIn .popCon{ min-height:5em}
html.pop .popWrap .mvIn .popBtn{ position:relative; z-index:1; display:flex; background:#fff; border-radius:0 0 .5em .5em; transform:translateY(1px); overflow:hidden; padding-top:.5em; margin-top:-.5em; box-sizing:border-box}
html.pop .popWrap .mvIn .popBtn:before{ content:""; position:absolute; left:0; top:0; height:.5em; width:100%; background:#fff}
html.pop .popWrap .mvIn .popBtn .input_st{ border-radius:0}
html.pop .popWrap .mvIn.popIn .popCon iframe{ height: 50vh;}


/* ====== Scroll css ====== */
.scrollst{overflow-y:auto; scrollbar-width: thin; scrollbar-color: gray transparent;scrollbar-face-color: #666;
scrollbar-track-color: #f1f1f1;
scrollbar-arrow-color: none;
scrollbar-highlight-color: #f1f1f1;
scrollbar-3dlight-color: none;
scrollbar-shadow-color: #fff;
scrollbar-darkshadow-color: none;}
.scrollst::-webkit-scrollbar  { width: 5px}
.scrollst::-webkit-scrollbar-track  { background-color:#f5f5f5}
.scrollst::-webkit-scrollbar-thumb  { border-radius: 10px; background-color:var(--color-point); background-clip: padding-box; border:none}
.scrollst::-webkit-scrollbar-button  { width: 0; height: 0;}
.scrollst.c1::-webkit-scrollbar-track{ background:#aaa}
.scrollst.c1::-webkit-scrollbar-thumb{ background-color:#333}

html::-webkit-scrollbar{ width: 5px; }
html::-webkit-scrollbar-thumb{ background-color: #000; border-radius:100px;}
html::-webkit-scrollbar-track{ background: #fff;}


:root{

/* ====== Head Height ====== */
--headH: 5.75rem;
--linkH: 2.5rem;
--headAll: 9rem;

/* ====== Color Invert ====== */
--crWhitefil: brightness(0) invert(1);
--crBlackfil: brightness(0) invert(0);
--crfilRE: invert(1);


/* ====== SNS Color ====== */
    --snsIn:#e82155;
    --snsFb:#2167be;
    --snsYt:#ed3023;
    --snsKa:#f7e111;
    --snsNv:#07bb58;
    --snsTw:#1d9bf0;


/* ====== ====== Font Size ====== ======*/

/* ====== html Font-Size 100% 기준 (1rem = 16px) ====== */
/*고령층 대상 서비스, 접근성이 중요한 서비스*/
--html-font-size-1 : 100%;
/*콘텐츠 밀도가 높은 서비스 (포털, 뉴스 등)*/
--html-font-size-2 : 87.5%;
/*미니멀 UI, 대시보드, 내부 툴처럼 공간이 부족한 UI에 적합*/
--html-font-size-3 : 75%;
/*대규모 프로젝트, 유지보수 중심 코드베이스*/
--html-font-size-4 : 62.5%;


/* ====== Fluid Typography (rem, vw, rem) ====== */

/* 1rem = 16px 기준 */
--font-size-xxxs: clamp(0.5rem, 0.5vw, 0.625rem);       /* 8px ~ 10px */
--font-size-xxs: clamp(0.625rem, 0.6vw, 0.75rem);       /* 10px ~ 12px */
--font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem);        /* 12px ~ 14px */
--font-size-sm-1: clamp(0.8125rem, 0.9vw, 0.9375rem);   /* 13px ~ 15px */
--font-size-sm: clamp(0.875rem, 1vw, 1rem);             /* 14px ~ 16px */
--font-size-base: clamp(1rem, 1.2vw, 1.125rem);         /* 16px ~ 18px */
--font-size-md-1: clamp(1.0625rem, 1.3vw, 1.25rem);     /* 17px ~ 20px */
--font-size-md: clamp(1.125rem, 1.4vw, 1.375rem);       /* 18px ~ 22px */
--font-size-lg-1: clamp(1.375rem, 1.7vw, 1.625rem);     /* 22px ~ 26px */
--font-size-lg: clamp(1.5rem, 2vw, 1.75rem);            /* 24px ~ 28px */
--font-size-lg-2: clamp(1.75rem, 2.5vw, 2rem);          /* 28px ~ 32px */
--font-size-xl-1: clamp(1.875rem, 2.7vw, 2.25rem);      /* 30px ~ 36px */
--font-size-xl: clamp(2rem, 3vw, 2.5rem);               /* 32px ~ 40px */
--font-size-xxl: clamp(2.5rem, 3.5vw, 2.85rem);         /* 40px ~ 45.6px */
--font-size-xxl-2: clamp(2.9rem, 3.9vw, 3.25rem);       /* 46.4px ~ 52px */
--font-size-xxxl: clamp(3rem, 4vw, 4rem);               /* 48px ~ 64px */
--font-size-xxxxl: clamp(4rem, 6vw, 6rem);              /* 64px ~ 96px */

/* ====== Line Heights ====== */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;


/* ====== Spacing (margin, padding, gap) - 8px 기반 ====== */
    --space-0: 0;   /* 0px */
    --space-1: 0.4rem;  /* 4px */
    --space-2: 0.8rem;  /* 8px */
    --space-3: 1.2rem;  /* 12px */
    --space-4: 1.6rem;  /* 16px */
    --space-5: 2.4rem;  /* 24px */
    --space-6: 3.2rem;  /* 32px */
    --space-7: 4.8rem;  /* 48px */
    --space-8: 6.4rem;  /* 64px */


/* ====== Border Radius ====== */
    --radius-none: 0; 
    --radius-sm: 0.4rem;    /* 6.4px */
    --radius-md: 0.8rem;    /* 12.8px */
    --radius-base: 1.25rem; /* 20px */
    --radius-lg: 1.6rem;    /* 25.6px */
    --radius-xl: 2.4rem;    /* 38.4px */
    --radius-pill: 9999px;  /* 9999px */


/* ====== Gaps (Grid / Flexbox) ====== */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-3);
    --gap-lg: var(--space-4);
    --gap-xl: var(--space-5);


/* ====== Container Widths (max-width 기준) ====== */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    --container-xxxl: 1420px;
    --container-ultra: 1520px;
    --container-ultra-xl: 1560px;
    --container-ultra-xxl: 1620px;
    --container-ultra-xxxl: 1760px;
    --container-ultra-xxxxl: 1820px;


/* ====== Color Palette (light mode 기본) ====== */
    --color-point: #003087;
    /* --color-black: #1e292d; */
    --color-black: #1e292d;
    --color-black-1: #000000;
    --color-black-2: #111111;
    --color-black-3: #171717;
    --color-black-4: #222222;
    --color-black-5: #333333;
    --color-black-6: #444444;
    --color-black-7: #555555;
    --color-black-8: #666666;
    --color-black-9: #777777;
    --color-black-10: #888888;
    --color-black-11: #999999;
    --color-back-1: #d9e8ff;
    --color-gray: #ededed; 
    --color-gray-1: #f7f7f7; 
    --color-gray-2: #f5f5f5; 
    --color-gray-3: #f3f3f3; 
    --color-gray-4: #f1f1f1; 
    --color-bg-1: #f2fbff; 
    --color-bg-2: #eff2f5; 
    --color-bg-3: #f7f8fa; 
    --color-bg-4: #f3f4f6;
    --color-text: #111111;
    --color-primary: #0052cc;
    --color-primary-hover: #003d99;
    --color-secondary: #f5f5f5;
    --color-border: #dddddd;
    --color-error: #cc0000;
    --color-success: #00aa00;
    --color-warning: #ffaa00;

/* ====== animation ====== */
    --ani-1: cubic-bezier(0.25, 0.46, 0.45, 0.94);


/* ====== Media Query Breakpoints (px 단위) ====== */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}


/* ====== ====== Font Class ====== ======*/

/* ====== Swiper css ====== */
.fwEL { font-weight: 100 !important; } 
.fwTL { font-weight: 200 !important; } 
.fwL { font-weight: 300 !important; }  
.fwR { font-weight: 400 !important; }  
.fwM { font-weight: 500 !important; }  
.fwML { font-weight: 600 !important; } 
.fwB { font-weight: 700 !important; }  
.fwBL { font-weight: 800 !important; } 
.fwEB { font-weight: 900 !important; }


/* ====== Utility Class ====== */
.al { text-align: left !important; } 
.ac { text-align: center !important; } 
.ar { text-align: right !important; } 

.vt { vertical-align:top !important; } 
.vm { vertical-align:middle !important; } 
.vb { vertical-align:bottom !important; } 
.vBase { vertical-align:baseline !important } 


/* ====== Color Class ====== */
.cp-1{ color: var(--color-point);}
.cp-2{ color: var(--color-point1);}
.cp-3{ color: var(--color-point3);}


/* ====== Font Point Class ====== */
.ffEN { font-family: "Montserrat", "Pretendard", sans-serif;} 
.ffNS { font-family:ns,sans-serif } 
.ffSerif {} 

/* ====== ====== ====== ====== */


/* ====== Swiper css ====== */
.swiperBtn{ width:2.5em; height:2.5em; position: static; display:flex; align-items:center; justify-content:center; z-index:100; cursor:pointer; font-size:1.45em; opacity:1; transition:.3s}
.swiperBtn:before{font-family:xeicon; font-size: var(--font-size-lg-1);}
.swiperBtn.prev:before{content:"\e93c"}
.swiperBtn.next:before{content:"\e93f"}
.swiperBtn.pause:before{content:"\ea3b"}
.swiperBtn.play:before{content:"\ea3e"}
.swiperBtn.ab{ position:absolute; top:50%;}
.swiperBtn.ab.prev{ left:0; transform:translate(-100%, -50%)}
.swiperBtn.ab.next{ right:0; transform:translate(100%, -50%)}
.swiperBtn.ab.in.prev{ transform:translate(.5em, -50%)}
.swiperBtn.ab.in.next{ transform:translate(-.5em, -50%)}
.swiperBtn.line{ border:1px solid #ddd}
.swiperBtn.round{ border-radius: var(--radius-sm);}
.swiperBtn.s1{ font-size:2em}
.swiperBtn.s2{ font-size:1em; width:2em; height:2em}
.swiperBtn.ico1.prev:before{ content:"\e908"}
.swiperBtn.ico1.next:before{ content:"\e90b"}
.swiperBtn:hover{ background:#111; color:#fff}
.swiperBtn.white{ color:#fff; border-color:rgba(255,255,255,.5)}
.swiperBtn.c1{ background: rgba(255,255,255, .2); backdrop-filter: blur(15px); color: #fff;}
.swiperBtn.c1:hover{ background: #fff; color: var(--color-point);}
.swiperBtn.c2{ color: #666;}
.swiperBtn.c2:hover{ color: #111;}
.swiperBtn.line.white:hover,
.swiperBtn.line.white.play{ background:#1f5aa7; border-color:rgba(255,255,255,.2)}

.swiperBtn.bgn{ width: auto; height: auto;}
.swiperBtn.bgn:hover{ background: transparent;} 

.swiperPauseWrap .play{ display: none}
.swiperPauseWrap.pause .play{ display: flex}
.swiperPauseWrap.pause .pause{ display: none}
.swiperPaging span.swiper-pagination-progressbar-fill{ background:#111}
.swiperPaging.white{ background:rgba(255,255,255,.2)}
.swiperPaging.white span.swiper-pagination-progressbar-fill{ background:#fff}


/* ====== Loading ====== */
.loading_st{position:fixed; left:0; top:0; width:100%; height:100%; z-index:1001; text-align:center; transition:.3s}
.loading_st .xi:before{ content:"\ec34"; font-size:3em; color:var(--color-point)}
.load .loading_st{ display:none}


/* ====== Button ====== */
.IconBtn .btn { --background: var(--color-black); --text: #fff; --font-size: var(--font-size-sm); --duration: .25s; --font-shadow: var(--font-size); --y: 0;
 padding: 16px 24px; font-weight: 500; line-height: var(--font-size); border-radius: 100px;
 display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
 outline: none; appearance: none; border: none; text-decoration: none; cursor: pointer;
 font-size: var(--font-size); letter-spacing: .5px; background: var(--background); color: var(--text); box-shadow: var(--shadow);
 transform: translateY(var(--y)) translateZ(0); transition: transform var(--duration) ease, box-shadow var(--duration) ease; } 
.IconBtn .btn > .xi{ font-size: var(--font-size-base);}
.IconBtn .btn .iconimg{}
.IconBtn .btn .iconimg > img{ filter: var(--crWhitefil); height: 25px; object-fit: contain;}
.IconBtn .btn .tit { overflow: hidden; } 
.IconBtn .btn .tit div { display: flex; text-shadow: 0 var(--font-shadow) 0 var(--text); font-weight: 600;} 

.IconBtn .btn.h1{ padding: 20px 24px;}

.IconBtn .btn .tit div span { display: block; backface-visibility: hidden; font-style: normal; white-space: pre; transition: transform var(--duration) ease; transform: translateY(var(--m)) translateZ(0); } 
.IconBtn .btn .tit div span:nth-child(1) { transition-delay: 0.025s; } 
.IconBtn .btn .tit div span:nth-child(2) { transition-delay: 0.05s; } 
.IconBtn .btn .tit div span:nth-child(3) { transition-delay: 0.075s; } 
.IconBtn .btn .tit div span:nth-child(4) { transition-delay: 0.1s; } 
.IconBtn .btn .tit div span:nth-child(5) { transition-delay: 0.125s; } 
.IconBtn .btn .tit div span:nth-child(6) { transition-delay: 0.15s; } 
.IconBtn .btn .tit div span:nth-child(7) { transition-delay: 0.175s; } 
.IconBtn .btn .tit div span:nth-child(8) { transition-delay: 0.2s; } 
.IconBtn .btn .tit div span:nth-child(9) { transition-delay: 0.225s; } 
.IconBtn .btn .tit div span:nth-child(10) { transition-delay: 0.25s; } 
.IconBtn .btn .tit div span:nth-child(11) { transition-delay: 0.275s; } 
.IconBtn .btn .tit div span:nth-child(12) { transition-delay: 0.3s; } 
.IconBtn .btn .tit div span:nth-child(13) { transition-delay: 0.325s; } 
.IconBtn .btn .tit div span:nth-child(14) { transition-delay: 0.35s; } 
.IconBtn .btn .tit div span:nth-child(15) { transition-delay: 0.375s; } 

.IconBtn .btn:hover { } 
.IconBtn .btn:hover .tit div span { --m: calc(var(--font-size) * -1); } 

.IconBtn .btn.bg { --text: #fff;} 
.IconBtn .btn.bg.bg1{ background: var(--color-point);}
.IconBtn .btn.bg.bg2{ background: var(--color-point1);}
.IconBtn .btn.white { --background: #fff; --text: var(--color-point);} 

.IconBtn .btn.reverse { --font-shadow: calc(var(--font-size) * -1); } 
.IconBtn .btn.reverse:hover .tit div span { --m: calc(var(--font-size)); } 

/* ====== Soon ====== */
.soon{background:#f5f5f5; border:1px solid #f5f5f5; height:50vh; padding:1em}
.soon .img{ width:10em; padding-bottom:120%; margin-right:2em}
.soon .xi{ font-size:16em; opacity:.1}
.soon .tt .t1{ display:block; font-weight:700; font-size:3em; color:#333}
.soon .tt .t2{ display:block; font-size:1.25em; color:#999}

/* ====== Utility Class ====== */
.va_wrap { display:block; text-align:center; white-space: nowrap } 
.va_wrap:before { content:""; display:inline-block; *display:inline; zoom:1; vertical-align:middle; width:0; height:100% } 
.va { display:inline-block; *display:inline; zoom:1; vertical-align:middle; max-width:100%; height:auto; white-space:normal } 
.va_wrap img { vertical-align:middle; display:inline-block; *display:inline; zoom:1; max-width:100%; max-height:100% } 


/* ====== Flex ====== */
.flex { display:flex } 
.flex.wrap { flex-wrap:wrap } 
.flex.col { flex-direction:column } 
.flex.col > * { width:100%; box-sizing:border-box } 
.flex.space { justify-content: space-between } 
.flex.vspace { align-content:space-between } 
.flex.hc { justify-content:center } 
.flex.hr { justify-content:flex-end } 
.flex.vt { align-content:flex-start; align-items:flex-start } 
.flex.vc { align-content:center; align-items:center } 
.flex.vb { align-content:flex-end; align-items:flex-end } 
.flex .mgL { margin-left:auto } 
.flex .mgR { margin-right:auto } 
.flex .mgT { margin-top:auto } 
.flex .grow { flex:1 1 0%; min-width:0 } 
.flex .fix { flex:0 0 auto } 
.flex.fc { justify-content:center; align-items:center } 

/* ====== Flex box====== */
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1rem -1rem; } 
.flex_box.s1 li > .in{ margin: 0 0 1rem 1rem;}
.flex_box.s2 { margin: 0 0 -2rem -2rem; } 
.flex_box.s2 li > .in{ margin: 0 0 2rem 2rem;}
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } 
.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst8 > li { flex: 1 1 12.5%; max-width: 12.5%; } 

.flex_box li > a { display: block; } 
.flex_box li > .in.st1 { margin: 0; } 


/* ====== Resize ====== */
.resize { display:block; height:0; padding-bottom:100%; position:relative } 
.resize svg { position:absolute; width:100%; height:100%; left:0; top:0 } 
.resize .re { position:absolute; left:0; top:0; width:100%; height:100% } 
.resize.vod { padding-bottom:56.25% } 
.resize.photo { padding-bottom:66.66% } 
.resize.photo2 { padding-bottom: 87.4%; } 
.resize.poster { padding-bottom:141.4% } 
.resize.poster2 { padding-bottom:24.4% } 
.resize .re:not(.va_wrap) img { width:100%; height:100%; object-fit: cover } 


/* ====== Text Cut ====== */
.row { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } 
.row.r1 { -webkit-line-clamp: 1 } 
.row.r2 { -webkit-line-clamp: 2 } 
.row.r3 { -webkit-line-clamp: 3 } 
.row.r4 { -webkit-line-clamp: 4 } 
.row.r2.fix { line-height:1.25em; height:2.5em } 


/* ====== Width ====== */
.w10 { width:10% !important; } 
.w20 { width:20% !important; } 
.w30 { width:30% !important; } 
.w40 { width:40% !important; } 
.w50 { width:50% !important; } 
.w60 { width:60% !important; } 
.w70 { width:70% !important; } 
.w80 { width:80% !important; } 
.w90 { width:90% !important; } 
.w100 { width:100% !important; } 


/* ====== Background Cover ====== */
.bgfix { background-repeat:no-repeat; background-position:center center; background-size:cover; } 
.bgfix.fix{ background-attachment: fixed;}
.bgfix.ct { background-size:contain } 

/* ====== img Cover ====== */
.imgfit{ width: 100%; height: 100%; object-fit: cover;}

/* ====== Margin ====== */
.mt-0 { margin-top: var(--space-0) !important} 
.mt-1 { margin-top: var(--space-1) !important} 
.mt-2 { margin-top: var(--space-2) !important} 
.mt-3 { margin-top: var(--space-3) !important} 
.mt-4 { margin-top: var(--space-4) !important} 
.mt-5 { margin-top: var(--space-5) !important} 
.mt-6 { margin-top: var(--space-6) !important} 

.mb-0 { margin-bottom: var(--space-0) !important} 
.mb-1 { margin-bottom: var(--space-1) !important} 
.mb-2 { margin-bottom: var(--space-2) !important} 
.mb-3 { margin-bottom: var(--space-3) !important} 
.mb-4 { margin-bottom: var(--space-4) !important} 
.mb-5 { margin-bottom: var(--space-5) !important} 
.mb-6 { margin-bottom: var(--space-6) !important} 

.mr-0 { margin-right: var(--space-0) !important} 
.mr-1 { margin-right: var(--space-1) !important} 
.mr-2 { margin-right: var(--space-2) !important} 
.mr-3 { margin-right: var(--space-3) !important} 
.mr-4 { margin-right: var(--space-4) !important} 
.mr-5 { margin-right: var(--space-5) !important} 
.mr-6 { margin-right: var(--space-6) !important} 

.ml-0 { margin-left: var(--space-0) !important} 
.ml-1 { margin-left: var(--space-1) !important} 
.ml-2 { margin-left: var(--space-2) !important} 
.ml-3 { margin-left: var(--space-3) !important} 
.ml-4 { margin-left: var(--space-4) !important} 
.ml-5 { margin-left: var(--space-5) !important} 
.ml-6 { margin-left: var(--space-6) !important} 


/* ====== Padding ====== */
.pt-0 { padding-top: var(--space-0) !important} 
.pt-1 { padding-top: var(--space-1) !important} 
.pt-2 { padding-top: var(--space-2) !important} 
.pt-3 { padding-top: var(--space-3) !important} 
.pt-4 { padding-top: var(--space-4) !important} 
.pt-5 { padding-top: var(--space-5) !important} 
.pt-6 { padding-top: var(--space-6) !important} 

.pb-0 { padding-bottom: var(--space-0) !important} 
.pb-1 { padding-bottom: var(--space-1) !important} 
.pb-2 { padding-bottom: var(--space-2) !important} 
.pb-3 { padding-bottom: var(--space-3) !important} 
.pb-4 { padding-bottom: var(--space-4) !important} 
.pb-5 { padding-bottom: var(--space-5) !important} 
.pb-6 { padding-bottom: var(--space-6) !important} 

.pr-0 { padding-right: var(--space-0) !important} 
.pr-1 { padding-right: var(--space-1) !important} 
.pr-2 { padding-right: var(--space-2) !important} 
.pr-3 { padding-right: var(--space-3) !important} 
.pr-4 { padding-right: var(--space-4) !important} 
.pr-5 { padding-right: var(--space-5) !important} 
.pr-6 { padding-right: var(--space-6) !important} 

.pl-0 { padding-left: var(--space-0) !important} 
.pl-1 { padding-left: var(--space-1) !important} 
.pl-2 { padding-left: var(--space-2) !important} 
.pl-3 { padding-left: var(--space-3) !important} 
.pl-4 { padding-left: var(--space-4) !important} 
.pl-5 { padding-left: var(--space-5) !important} 
.pl-6 { padding-left: var(--space-6) !important} 


/* ====== Padding ====== */
.gap-0 { gap: var(--space-0) !important} 
.gap-1 { gap: var(--space-1) !important} 
.gap-2 { gap: var(--space-2) !important} 
.gap-3 { gap: var(--space-3) !important} 
.gap-4 { gap: var(--space-4) !important} 
.gap-5 { gap: var(--space-5) !important} 
.gap-6 { gap: var(--space-6) !important} 


/* ====== Hide ====== */
.hideT { position: absolute; z-index: -1; display: inline-block; overflow: hidden; height: 1px; width: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-break: initial; word-wrap: initial; } 
.hideT.close { display:none } 

/* ====== SNS ====== */
.sns_st { display:flex; align-items:center; gap:.25em } 
.sns_st > li > a { width:2.5em; height:2.5em; background:#f1f1f1; display:flex; align-items:center; justify-content:center; border-radius:50% } 
.sns_st > li > a .xi,
.sns_st > li > a img { opacity:.5 } 
.sns_st > li > a .xi { font-size:1.25em } 
.sns_st > li > a img { height:40% } 
.sns_st > li > a:hover { color:#fff; transition:.3s } 
.sns_st > li > a:hover .xi,
.sns_st > li > a:hover img { opacity:1 } 
.sns_st > li > a:hover img { filter:brightness(0) invert(1) } 
.sns_st > li > a:hover.fb { background:#395398 } 
.sns_st > li > a:hover.in { background:#a9309d } 
.sns_st > li > a:hover.yt { background:#f70000 } 
.sns_st > li > a:hover.tt { background:#111 } 
.sns_st > li > a:hover.nb { background:#29a139 } 

.ch .sns_st > li > a .xi,
.ch .sns_st > li > a img { opacity: 1; filter: brightness(0) invert(1); } 
.ch .sns_st > li > a.fb { background:#395398 } 
.ch .sns_st > li > a.in { background:#a9309d } 
.ch .sns_st > li > a.yt { background:#f70000 } 
.ch .sns_st > li > a.tt { background:#111 } 
.ch .sns_st > li > a.nb { background:#29a139 } 


/* ====== Board Class ====== */
.boardIco { font-family:xeicon; font-size:1.375em; width:1.5em; text-align:center } 
.boardIco.file { transform:rotate(45deg) } 
.boardIco.file:before { content:"\ea6a"; color:var(--color-point) } 
.boardIco.lock:before { content:"\e966"; color:#777 } 
.boardIco.notice:before { content:"\ea5a" } 
.boardIco.new:before { content:"\e9a9"; color:var(--color-point) } 
.boardIco.reply:before { content:"\e981"; color:#777 } 
.boardIco.prev:before { content:"\e945" } 
.boardIco.next:before { content:"\e942" } 

.board_pg { display:flex; align-items:center; justify-content:center; margin-top:4em; padding:0 1px 1px 0 } 
.board_pg button { width:2.5em; height:2.5em; border:1px solid #ddd; background:#fff; color:#666; margin:0 -1px -1px 0; position:relative } 
.board_pg button:hover,
.board_pg button:focus { z-index:1 } 
.board_pg button.on { background:#111; color:#fff; border-color:transparent; z-index:2; position:relative } 
.board_pg button.on:after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:.5em; width:1em; height:1px; background:#fff } 
.board_pg button.btn.first { border-radius:.5em 0 0 .5em } 
.board_pg button.btn.last { border-radius:0 .5em .5em 0 } 
.board_pg button.btn .ico { font-size:1em } 
.board_pg button.btn.first .ico:before { content:"\ea47" } 
.board_pg button.btn.prev .ico:before { content:"\e93c" } 
.board_pg button.btn.next .ico:before { content:"\e93f" } 
.board_pg button.btn.last .ico:before { content:"\ea48" } 

.board_search { display:flex; align-items:center; justify-content:space-between; margin-bottom:1em } 
.board_search .total { display:flex; align-items:center; justify-content:space-between } 
.board_search .total .ico { font-size:1em; width:2em; height:2em; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-right:.5em } 
.board_search .total .ico:before { content:"\e91c" } 
.board_search .total .t2 { font-weight:700; font-size:1.125em; color:var(--color-point); margin-left:.25em } 
.board_search .search { display:flex; align-items:center; justify-content:space-between; gap:0 .25em } 
.board_search .search .btn { padding:0 1.5em } 
.board_search .search .btn .ico { font-size:1em; margin: 0;} 
.board_search .search .btn .ico:before { content:"\e97a" } 


/* ====== Label Class ====== */
.form_chk .label_st input[type=checkbox],
.form_chk .label_st input[type=radio] { width: auto; height: auto; overflow: visible; margin-bottom: auto; } 

.label_st { display:flex; align-items:center; min-height:1em; cursor:pointer; line-height:1; box-sizing:border-box; font-weight:500 } 
.label_st .xi { font-size:1.5em; margin-right:.125em } 
.label_st .xi ~ span { padding:.125em 0; word-break:keep-all; flex:1 1 0%; min-width:0 } 
.label_st input:checked ~ .xi:before,
.label_st input:checked ~ span { color:var(--color-point) } 
.label_st.c1 input:checked ~ .xi:before { color:var(--color-point) } 
.label_st input[type=checkbox] ~ .xi:before { content:"\e98f" } 
.label_st input[type=checkbox]:checked ~ .xi:before { content:"\e92d" } 
.label_st input[type=radio] ~ .xi:before { content:"\e9c6" } 
.label_st input[type=radio]:checked ~ .xi:before { content:"\e9c7" } 
.label_st input[type=checkbox]{}
.label_st input[type=radio] { width:0; height:0; overflow:hidden; position:absolute; z-index:-1 } 

.label_st { display:inline-flex; align-items:center; min-height:1em; gap:0 .25em; cursor:pointer; line-height:1; box-sizing:border-box; } 
.label_st input { zoom:1.5; margin-bottom:auto; cursor:pointer; } 
.label_st input ~ .tt { flex:1; font-weight:500; padding-left: 1.5em; } 
.label_st input:checked { accent-color:var(--color-point); } 
.label_st input:checked ~ .tt { color:var(--color-point); } 

.label_st.st1 { position:relative; text-align:center; justify-content:center; flex-direction:column; padding:.5em .125em; gap:.5em 0 } 
.label_st.st1 .bg { position:absolute; left:1px; top:1px; width:calc(100% - 2px); height:calc(100% - 2px); box-sizing:border-box; border-radius:.5em; border:1px solid transparent } 
.label_st.st1 .tt { display:block; width:100%; text-align:center; font-size:.813em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-weight:500 } 
.label_st.st1 .img { height:2.5em; box-sizing:border-box; padding:.5em } 
.label_st.st1 .img img { max-height:100% } 
.label_st.st1 input:checked ~ .bg { border-color:var(--color-point) } 
.label_st.st1 input:checked ~ .tt { color:var(--color-point) } 

.label_st.st2 { position:relative; height:3em; padding:.5em 1em; display:flex; align-items:center; justify-content:center; flex-direction:column } 
.label_st.st2 .bg { position:absolute; left:-1px; top:-1px; width:calc(100% + 1px); height:calc(100% + 1px); box-sizing:border-box; border:1px solid #ddd } 
.label_st.st2 .tt { font-weight:500 } 
.label_st.st2 input:checked ~ .bg { border-color:var(--color-point); z-index:1 } 
.label_st.st2 input:checked ~ .tt { color:var(--color-point); font-weight:700 } 


/* ====== Input Class ====== */
.input_st { border:1px solid #ddd; color:#111; padding:.5em .75em; box-sizing:border-box; height:3em; border-radius:.25em; font-weight:500 } 
.input_st[type=file] { background:none; border:1px solid #ddd; padding:0; width:100% } 
.input_st[readonly] { background:#f5f5f5 } 
select.input_st { padding-right:2.5em !important } 

.input_st .xi { margin:0 .5em; margin-top:-.188em } 
.input_st .xi:first-child { margin-left:0 } 
.input_st .xi:last-child { margin-right:0 } 

.input_st.s1{ height:3.5em; padding:.5em 1.5em; font-size:1.125em; font-weight:500; font-weight:600}
.input_st.s1 .xi { margin-right: 0.5em; margin-top:0; }
.input_st.s2{ height:2.25em; padding:.25em .75em; font-size:.938em}
.input_st.s2 .xi{ font-size:1em}
.input_st.s3{ height:auto; font-size:.875em;}

.input_st.c1 { background:var(--color-point); border-color:var(--color-point); color:#fff } 
.input_st.c1.re { background:#fff; border-color:var(--color-point); color:var(--color-point) } 
.input_st.c2 { background:#999; border-color:#999; color:#fff } 
.input_st.c2.re { background:#fff; border-color:#ccc; color:#888 } 
.input_st.c3 { background:#333; border-color:#333; color:#fff } 
.input_st.c3.re { background:#fff; border-color:#333; color:#333 } 
.input_st.c4 { background:var(--color-point); border-color:var(--color-point); color:#fff } 
.input_st.c4.re { background:#fff; border-color:var(--color-point); color:var(--color-point) }