@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

:root{
  --main: #3a4370;
  --light-blue1: #f7f8fd;
  --light-blue2: #edeff6;
  --dark-blue1:#50577e;
  --dark-blue2:#3c446e;
  --dark-blue3:#2b2e3c;
  --dark-gray:#79746f;
}
body{
  font-family: "Poppins","Noto Sans KR", snas-serif;
}
h1{font-size: 0;}
b{font-weight: 600;}
.text-main-blue{color: var(--main);}
.serif{font-family: "Noto Serif KR",serif;}
.goudy{font-family: "Sorts Mill Goudy", serif;}
.dpnone{display: none !important;}
.pc{display: block;}
.mo{display: none !important;}
.mo-flex{display: none !important;}
.mo-inline{display: none !important;}
.wrap{max-width: 1600px; width: 95%; margin: 0 auto;}
.lining-nums{font-variant-numeric: lining-nums;}



@media(max-width: 1024px){
  .pc{display: none !important;}
  .mo{display: block !important;}
  .mo-flex{display: flex !important;}
  .mo-inline{display: inline-block !important;}
}


.pop_ft {
  font-family: "Poppins", sans-serif;
  font-style: normal;
}
.nt_sans {
  font-family: "Noto Sans KR", sans-serif!important;
  font-style: normal;
}

:root {
    --vh:100vh;
}

/********************************************************** 
* Fonts
***********************************************************/ 
.pretendard *,.pretendard {
    font-family: 'Pretendard Variable';
}

/********************************************************** 
* Common
***********************************************************/ 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body{
    font-family: 'Pretendard Variable';
	color: #000;
    scroll-behavior: smooth;
}
body.open{width:100%; height:100%;}
body *{box-sizing: border-box; word-break: keep-all;}
a:hover, a:link, a:visited, a:active {text-decoration: none; color: inherit;}
hr{border:0; margin:0; width:100%; height:1px; background: #fff;}
button{font-family: inherit;}
address {font-style: normal;}


/*
input{
  ios대응<!-- 주석해야됌 -->
  appearance: none;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
*/
select{
  /*ios대응*/
  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;

  /*화살표 배경 넣기*/
/*  background: url('../img/select-down-arrow.svg') no-repeat 93% 50% rgba(255, 255, 255, 0); background-size:12px;화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
  display:none; /* 화살표 없애기 for IE10, 11*/
}
a { -webkit-tap-highlight-color:transparent;}
* {-webkit-tap-highlight-color:transparent;}
img {max-width: 100%; vertical-align: top;}

/********************************************************** 
* scrollbar - 스크롤 바
***********************************************************/
/* width */
::-webkit-scrollbar {
	width:8px; height:100vh; background:transparent;
}

/* Track */
::-webkit-scrollbar-track {
    display:none;
    background-color:transparent;
    border-radius:2rem;
    box-shadow:inset 0px 0px 5px transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
	width:8px; background-color:rgba(0, 0, 0, 0.7);
	border-radius: 2rem;
	-webkit-border-radius: 2rem;
	-moz-border-radius: 2rem;
	-ms-border-radius: 2rem;
	-o-border-radius: 2rem;
    background-clip:padding-box;
    border:0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color:rgba(0, 0, 0, 0.7);
}

.container {padding: 0 65px;}

.dp_ib {display: inline-block;}
.dp_none {display: none;}

.p_r{position:relative;}

body > #preview_item{display:none;}
body > #hd_login_msg{display:none;}

/********************************************************** 
* skip
***********************************************************/ 
#skip a {position: absolute; top: 0; left: -9999px; z-index: 1000;}
#skip a:focus, #skip a:active {display: block; top: 0; left: 0;  width: 100%; padding: 10px 0; background: #345243; color: #fff; text-align: center;}

/********************************************************** 
* hide text
***********************************************************/ 
.blind {font-size: 0; line-height: 0; width: 1px; height: 1px; line-height: 1px; text-align: -9999px; overflow: hidden; position: absolute; top: 0; left: -9999px;}
.ir_text{display: block; width: 100%; height: 100%; text-indent: -9999em;}

/********************************************************** 
* font-size
***********************************************************/ 
/* .h1{font-size:2.813rem; line-height: 1.4;}
.h2{font-size:2.5rem; line-height: 1.4;}
.h3{font-size:2.25rem; line-height: 1.4;}
.h4{font-size:1.875rem; line-height: 1.4;}
.h5{font-size:1.563rem; line-height: 1.4;}
.h6{font-size:1.5rem; line-height: 1.4;} */

.fz_10{font-size: 0.625rem;}
.fz_11{font-size: 0.688rem;}
.fz_12{font-size: 0.75rem;}
.fz_13{font-size: 0.813rem;}
.fz_14{font-size: 0.875rem;}
.fz_15{font-size: 0.938rem;}
.fz_16{font-size: 1rem;  }
.fz_17{font-size: 1.063rem; line-height: 1.6;}
.fz_18{font-size: 1.125rem; line-height: 1.6;}
.fz_19{font-size: 1.188rem; line-height: 1.6;}
.fz_20{font-size: 1.25rem; line-height: 1.6;}
.fz_21{font-size: 1.313rem; line-height: 1.6;}
.fz_22{font-size: 1.375rem; line-height: 1.6;}
.fz_23{font-size: 1.438rem; line-height: 1.6;}
.fz_24{font-size: 1.5rem; line-height: 1.6;}
.fz_25{font-size: 1.563rem; line-height: 1.6;}
.fz_26{font-size: 1.625rem; line-height: 1.6;}
.fz_27{font-size: 1.688rem; line-height: 1.6;}
.fz_28{font-size: 1.75rem; line-height: 1.6;}
.fz_29{font-size: 1.813rem; line-height: 1.6;}
.fz_30{font-size: 1.875rem;  }
.fz_31{font-size: 1.938rem;  }
.fz_32{font-size: 2rem;  }
.fz_33{font-size: 2.063rem;  }
.fz_34{font-size: 2.125rem;  }
.fz_35{font-size: 2.188rem;  }
.fz_36{font-size: 2.25rem;  }
.fz_37{font-size: 2.313rem;  }
.fz_38{font-size: 2.375rem;  }
.fz_39{font-size: 2.438rem;  }
.fz_40{font-size: 2.5rem;  }
.fz_42{font-size: 2.625rem;  }
.fz_43{font-size: 2.688rem;  }
.fz_45{font-size: 2.813rem;  }
.fz_46{font-size: 2.875rem;  }
.fz_48{font-size: 3rem;  }
.fz_50{font-size: 3.125rem; line-height: 1.4;}
.fz_51{font-size: 3.188rem; line-height: 1.4;}
.fz_52{font-size: 3.25rem; line-height: 1.4;}
.fz_55{font-size: 3.438rem; line-height: 1.4;}
.fz_58{font-size: 3.625rem; line-height: 1.4;}
.fz_59{font-size: 3.688rem; line-height: 1.4;}
.fz_60{font-size: 3.75rem; line-height: 1.4;}
.fz_68{font-size: 4.25rem; line-height: 1.4;}
.fz_70{font-size: 4.375rem; line-height: 1.4;}
.fz_75{font-size: 4.688rem; line-height: 1.4;}
.fz_80{font-size: 5rem; line-height: 1.4;}
.fz_85{font-size: 5.313rem; line-height: 1.4;}
.fz_90{font-size: 5.625rem; line-height: 1.4;}
.fz_95{font-size: 5.938rem; line-height: 1.4;}
.fz_100{font-size: 6.25rem; line-height: 1.4;}
.fz_110{font-size: 6.875rem;}
.fz_120{font-size: 7.5rem;}
.fz_126{font-size: 7.875rem;}
.fz_130{font-size: 8.125rem;}
.fz_140{font-size: 8.75rem;}
.fz_150{font-size: 9.375rem;}
.fz_170{font-size: 10.625rem;}
.fz_180{font-size: 11.25rem;}
.fz_200{font-size: 12.5rem;}
.fz_210{font-size: 13.125rem;}
.fz_215{font-size: 13.438rem;}
.fz_220{font-size: 13.75rem;}
.fz_230{font-size: 14.375rem;}
.fz_235{font-size: 14.688rem;}



/********************************************************** 
* font style
***********************************************************/
.ta_c{text-align: center;}
.ta_l{text-align: left;}
.ta_r{text-align: right;}

.fw_200{font-weight: 200;}
.light{font-weight: 300;}
.normal{font-weight: 400;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 700;}

.italic{font-style:italic;}


/********************************************************** 
* color
***********************************************************/
.c-w{color:#fff;}
.c-b{color:#000;}
.c-gray {color:#767676;}
.c-010101 {color:#010101;}
.c-a3a3a3 {color:#a3a3a3;}
.c-a7a59d {color:#a7a59d;}
.c-f2f2f3 {color:#f2f2f3;}
.c-f6f6f6 {color:#f6f6f6;}
.c-727272{color:#727272;}
.c-6f6f6f{color: #6f6f6f;}
.c-7f7f7f{color:#7f7f7f;}
.c-2d2d2d{color:#2d2d2d;}
.c-252525{color:#252525;}
.c-233d2d{color:#233d2d;}
.c-303030{color:#303030;}
.c-333{color:#333;}
.c-343434{color:#343434;}
.c-363636{color:#363636;}
.c-444{color:#444;}
.c-4b3b2b{color:#4b3b2b;}
.c-4e4e4e{color:#4e4e4e;}
.c-455e56{color:#455e56;}
.c-525252{color:#525252;}
.c-535353{color:#535353;}
.c-555{color:#555;}
.c-565656{color:#565656;}
.c-595959{color:#595959;}
.c-515c3e{color:#515c3e;}
.c-6d6d6d{color:#6d6d6d;}
.c-6b6b6b{color:#6b6b6b;}
.c-626262{color:#626262;}
.c-676767{color:#676767;}
.c-8b8b8b{color:#8b8b8b;}
.c-868686{color:#868686;}
.c-959595{color:#959595;}
.c-979797{color:#979797;}
.c-60656e{color:#60656e;}
.c-ebebeb{color:#ebebeb;}
.c-edecec{color:#edecec;}
.c-e3e3e3{color:#e3e3e3;}
.c-2f2f2f { color: #2f2f2f;}
.c-282828 {color: #282828;}
.c-2e2e2e {color: #2e2e2e;}
.c-fffcf5 {color: #fffcf5;}
.c-282d60 {color: #282d60;}
.c-3c416f{color: #3c416f;}
.c-5b5b5b{color: #5b5b5b;}
.c-a0a0a0{color: #a0a0a0;}
.c-413f6f{color: #413f6f;}

/********************************************************** 
* line-height
***********************************************************/
.lh_1{line-height: 1;}
.lh_11{line-height: 1.1;}
.lh_12{line-height: 1.2;}
.lh_13{line-height: 1.3;}
.lh_14{line-height: 1.4;}
.lh_15{line-height: 1.5;}
.lh_16{line-height: 1.6;}
.lh_17{line-height: 1.7;}
.lh_18{line-height: 1.8;}
.lh_19{line-height: 1.9;}
.lh_2{line-height: 2;}
.lh_21{line-height: 2.1;}
.lh_22{line-height: 2.2;}
.lh_23{line-height: 2.3;}
.lh_24{line-height: 2.4;}

/********************************************************** 
* letter-spacing
***********************************************************/
.ls_p1{letter-spacing:0.01em;}
.ls_p2{letter-spacing:0.02em;}
.ls_p3{letter-spacing:0.03em;}
.ls_p4{letter-spacing:0.04em;}
.ls_p5{letter-spacing:0.05em;}
.ls_p6{letter-spacing:0.06em;}
.ls_p7{letter-spacing:0.07em;}
.ls_p8{letter-spacing:0.08em;}
.ls_p10{letter-spacing:0.1em;}
.ls_p15{letter-spacing:0.15em;}
.ls_p20{letter-spacing:0.2em;}
.ls_p30{letter-spacing:0.3em;}
.ls_p40{letter-spacing:0.4em;}
.ls_p50{letter-spacing:0.5em;}

.ls_0{letter-spacing:0em;}
.ls_2{letter-spacing:-0.02em;}
.ls_3{letter-spacing:-0.03em;}
.ls_4{letter-spacing:-0.04em;}
.ls_5{letter-spacing:-0.05em;}

/********************************************************** 
* margin-bottom
***********************************************************/
.m_5{margin-bottom: 5px;}
.m_10{margin-bottom: 10px;}
.m_15{margin-bottom: 15px;}
.m_20{margin-bottom: 20px;}
.m_30{margin-bottom: 30px;}
.m_40{margin-bottom: 40px;}
.m_50{margin-bottom: 50px;}
.m_60{margin-bottom: 60px;}
.m_80{margin-bottom: 80px;}
.m_100{margin-bottom: 100px;}
.m_120{margin-bottom: 120px;}
.m_160{margin-bottom: 160px;}
.m_200{margin-bottom: 200px;}

/********************************************************** 
* margin-left
***********************************************************/
.ml_10{margin-left: 10px;}
.ml_20{margin-left: 20px;}
.ml_30{margin-left: 30px;}
.ml_40{margin-left: 40px;}

/********************************************************** 
* padding
***********************************************************/
.pd_60{padding: 60px 0;}
.pd_80{padding: 80px 0;}
.pd_100{padding: 100px 0;}
.pd_120{padding: 120px 0;}
.pd_140{padding: 140px 0;}
.pd_160{padding: 160px 0;}
.pd_200{padding: 200px 0;}

/********************************************************** 
* padding-top
***********************************************************/
.pt_5{padding-top: 5px;}
.pt_10{padding-top: 10px;}
.pt_15{padding-top: 15px;}
.pt_20{padding-top: 20px;}
.pt_30{padding-top: 30px;}
.pt_40{padding-top: 40px;}
.pt_60{padding-top: 60px;}
.pt_80{padding-top: 80px;}
.pt_100{padding-top: 100px;}
.pt_120{padding-top: 120px;}
.pt_140{padding-top: 140px;}
.pt_160{padding-top: 160px;}
.pt_180{padding-top: 180px;}
.pt_200{padding-top: 200px;}
.pt_210{padding-top: 210px;}
.pt_230{padding-top: 230px;}
.pt_250{padding-top: 250px;}

/********************************************************** 
* padding-left
***********************************************************/
.pl_4px{padding-left:4px;}
.pl_5px{padding-left:5px;}
.pl_5{padding-left:5%;}
.pl_10{padding-left:10%;}
.pl_11{padding-left:11%;}
.pl_12{padding-left:12%;}
.pl_13{padding-left:13%;}
.pl_14{padding-left:14%;}
.pl_15{padding-left:15%;}
.pl_16{padding-left:16%;}
.pl_17{padding-left:17%;}
.pl_18{padding-left:18%;}
.pl_19{padding-left:19%;}
.pl_20{padding-left:20%;}
.pl_21{padding-left:21%;}
.pl_22{padding-left:22%;}
.pl_23{padding-left:23%;}
.pl_24{padding-left:24%;}
.pl_25{padding-left:25%;}
.pl_26{padding-left:26%;}

.m_auto{
    margin-left: auto;
    margin-right: auto;
}
.mx300{max-width: 300px;}
.mx400{max-width: 400px;}
.mx500{max-width: 500px;}
.mx520{max-width: 520px;}
.mx540{max-width: 540px;}
.mx550{max-width: 550px;}
.mx570{max-width: 570px;}


/********************************************************** 
* icon
***********************************************************/


/********************************************************** 
* flex-box
***********************************************************/
.flex_row{display: flex; }
.flex_row.fw{flex-wrap:wrap; }
.flex_row.al_fs{display: flex; align-items: flex-start;}
.flex_row.al_fe{display: flex; align-items: flex-end;}
.flex_row.center{display: flex; align-items: center;}
.flex_row.jc_center{justify-content: center;}
.flex_row.jc_fs{justify-content: flex-start;}
.flex_row.jc_fe{justify-content: flex-end;}
.flex_row.sb{justify-content:space-between;}
.flex_row.sa{justify-content:space-around;}
.flex_row.se{justify-content:space-evenly;}
.fd_c{flex-direction:column;}

.column_half{width: 50%;}
.column_half_40{width: 40%;}
.column_third{width: 33.3333%;}
.column_third_30{width: 30%;}
.column_quarter{width: 25%;}
.column_fifth{width: 20%;}
.column_sixth{width: 16.666666%;}

.container-1600{position:relative; width:100%; max-width:1600px; padding:0; margin-left:auto; margin-right:auto;}
.container-1580{position:relative; width:100%; max-width:1580px; padding:0; margin-left:auto; margin-right:auto;}
.container-1500{position:relative; width:100%; max-width:1500px; padding:0; margin-left:auto; margin-right:auto;}
.container-md{width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding:0 40px; position: relative;}
.container-sm{width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding:0 40px; position: relative;}
.container-1400{width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding:0; position: relative;}
.container-1300{width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; padding:0; position: relative;}
.container-1200{width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding:0; position: relative;}
.container-xs{width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; padding:0; position: relative;}
.container-800{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; padding:0; position: relative;}

.pc_cont_1440{display:block; opacity:1; visibility:visible;}
.m_cont_1440{display:none; opacity:0; visibility:hidden;}

.pc_cont_1280{display:block; opacity:1; visibility:visible;}
.m_cont_1280{display:none; opacity:0; visibility:hidden;}

.pc_cont_1024{display:block; opacity:1; visibility:visible;}
.m_cont_1024{display:none; opacity:0; visibility:hidden;}

.pc_cont{display:block; opacity:1; visibility:visible;}
.m_cont{display:none; opacity:0; visibility:hidden;}

.pc_cont_960{display:block; opacity:1; visibility:visible;}
.m_cont_960{display:none; opacity:0; visibility:hidden;}
.pc_cont_960_in{display:inline-block; opacity:1; visibility:visible;}
.m_cont_960_in{display:none; opacity:0; visibility:hidden;}

.pc_cont_640{display:block; opacity:1; visibility:visible;}
.m_cont_640{display:none; opacity:0; visibility:hidden;}

.pc_cont_480{display:block; opacity:1; visibility:visible;}
.m_cont_480{display:none; opacity:0; visibility:hidden;}

.pc_cont_434{display:block; opacity:1; visibility:visible;}
.m_cont_434{display:none; opacity:0; visibility:hidden;}

.pc_cont_400{display:block; opacity:1; visibility:visible;}
.m_cont_400{display:none; opacity:0; visibility:hidden;}

.pc_cont_376{display:block; opacity:1; visibility:visible;}
.m_cont_376{display:none; opacity:0; visibility:hidden;}

/********************************************************** 
* reveal - 텍스트 효과
***********************************************************/
.reveal { transition:transform 0.8s ease-out, opacity 0.8s ease-out; will-change:transform, opacity; transition-delay: .1s;}
.fade-in { opacity:0; }
.fade-up { transform:translateY(50px); opacity:0; }
.fade-down { transform:translateY(-50px); opacity:0; }
.fade-left { transform:translateX(-100px); opacity:0; }
.fade-right { transform:translate(50%,-0%); opacity:0; }
.active.fade-in { opacity:1; }
.active.fade-up { transform:translateY(0); opacity:1; }
.active.fade-down { transform:translateY(0); opacity:1; }
.active.fade-left { transform:translateX(0); opacity:1; }
.active.fade-right { transform:translate(0,-0%); opacity:1; }
.reveal.highlight:before { width:0%; transition:width 0.8s ease-in-out; }
.reveal.highlight.active:before { width:100%; }

@media (max-width:639px) {
    /*.fade-left { transform:translateY(50px); opacity:0; }
    .fade-right { transform:translateY(50%); opacity:0; }
    .active.fade-left { transform:translateY(0); opacity:1; }
    .active.fade-right { transform:translateY(-0%); opacity:1; }*/
}

.active.delay_100{transition-delay: .1s}
.active.delay_200{transition-delay: .2s}
.active.delay_300{transition-delay: .3s}
.active.delay_400{transition-delay: .4s}
.active.delay_500{transition-delay: .5s}
.active.delay_600{transition-delay: .6s}
.active.delay_700{transition-delay: .7s}
.active.delay_800{transition-delay: .8s}
.active.delay_900{transition-delay: .9s}
.active.delay_1000{transition-delay: 1.0s}
.active.delay_2000{transition-delay: 2.0s}
.active.delay_2100{transition-delay: 2.1s}
.active.delay_2200{transition-delay: 2.2s}
.active.delay_2300{transition-delay: 2.3s}
.active.delay_2400{transition-delay: 2.4s}
.active.delay_2500{transition-delay: 2.5s}
.active.delay_2600{transition-delay: 2.6s}
.active.delay_2700{transition-delay: 2.7s}
.active.delay_2800{transition-delay: 2.8s}
.active.delay_2900{transition-delay: 2.9s}
.active.delay_3000{transition-delay: 3.0s}
.active.delay_3500{transition-delay: 3.5s}
.active.delay_4000{transition-delay: 4.0s}


.hamberger {transition: all .3s;transition-duration: .7s;display:flex;align-items:center; justify-content: center;  z-index: 2;}
.hd_menu{display:block;cursor:pointer;z-index:1;}
.hd_menu:after{left:0;top:0;width:100%;}
.hd_menu span{display:block;background:#121212;width:2.9rem;height:2px;border-radius:0px;transition:margin .25s .25s,transform .25s, background .25s;background-size:cover}
.hd_menu span:first-child{margin-bottom:0.6rem;}
.hd_menu span:nth-child(3){margin-top:0.6rem;}

.on .hd_menu span{transition:margin .25s,transform .25s .25s; background:#fff;}
.on .hd_menu span:first-child{margin-top:0;margin-bottom:0;transform:rotate(45deg)}
.on .hd_menu span:nth-child(2){transform:rotate(135deg);margin-top: -3px;}
.on .hd_menu span:nth-child(3){margin-top:6px;transform:rotate(135deg); opacity:0; display: none;}