/* ------------ font ------------*/
/* Ogg-font */
@font-face {
    font-family: 'Ogg';
    src: url('https://assets.website-files.com/643052002ca347e0ff92ee23/643059ad4ee6bc55901e353f_Ogg-Regular.ttf') format('truetype'), url('https://assets.website-files.com/643052002ca347e0ff92ee23/643059ad19a1af8cde6dd641_Ogg-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ogg';
    src: url('https://assets.website-files.com/643052002ca347e0ff92ee23/64305cf5a2b39f49a82d9469_Ogg%20Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* 필기체 */
@font-face {
    font-family: 'Leitmotivscript';
    src: url('https://assets.website-files.com/643052002ca347e0ff92ee23/64ae8888a955398d00806d1c_LeitmotivScript.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Lust Pro-font */
@font-face {
    font-family: 'Lust Pro';
    src: url('https://uploads-ssl.webflow.com/6423ffa824c4cf8b7b4f57db/6423ffb921b96c153fc36fe9_LustPro-No3.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* 프리텐다드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* 어그로 */
@font-face {
    font-family:'SBAggroB'; 
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff'); 
    font-weight:normal; 
    font-style:normal; 
}
@font-face {
    font-family:'SBAggroM'; 
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff'); 
    font-weight:normal; 
    font-style:normal; 
}
@font-face {
    font-family:'SBAggroL'; 
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff'); 
    font-weight:normal; 
    font-style:normal; 
}

/* ------------ root ------------ */
:root {
    /* font */
    --fs-xl: clamp(2.8rem, 12vw, 18rem);
    --fs-l: clamp(2.5rem, 5vw, 7rem);
    --fs-m: clamp(1rem, 2.5vw, 2rem);
    --fs-sm: clamp(0.9rem, 2vw, 1.5rem);
    --fs-s: clamp(0.8rem, 1.5vw, 1.25rem);
    --fs-300: 1rem;
    --fs-200: 0.875rem;
    --fw-light: 300;
    --fw-regular: 400;
    --font_style: Ogg, sans-serif;
    --font_k:'pretendard';
    /* --f_lust: 'Lust Pro'; */
    
    /* color */
    /*--bg-1:#2196f3;*/
    --bg-2:#4f4f4f;
    --bg-1:#7fb9e7;
    --bg-3:#e3f3ff;
    --transparent:transparent; 
    --white:#ffffff;
    --black:#000000;
    
    /* filter */
    --ft-1:invert(69%) sepia(70%) saturate(447%) hue-rotate(178deg) brightness(93%) contrast(95%);
    --ft-2:invert(55%) sepia(84%) saturate(3665%) hue-rotate(185deg) brightness(98%) contrast(94%);

    /* nav */
    --t-btn: 400ms;
    --side-offset: 32px;
    --m-side-offset: 24px;
    --m-bottom-offset: 16px;
}


/* ------------ color ------------ */
.dog_green{background-color:#5A8D26;}
.dog_blue{background-color:#A5DBE5;}
.dog_yellow{background-color:#FCC21B;}
.dog_orange{background-color:#FFAC32;}

.dp_navy{ background-color:#060A16;}
.dp_purple{ background-color:#332387;}
.dp_Lpurple{ background-color:#8976FF;}
.dp_Sblue{ background-color:#A6BFFF;}


.pl_red{ background-color:#dc3545;}
.pl_orange{ background-color:#ffc107;}
.pl_green{ background-color:#28a745;}
.pl_blue{ background-color:#007bff;}


.j_dblue{ background-color:#3d464b;}
.j_hblue{ background-color:#12cfca;}
.j_hgreen{ background-color:#00d255;}
.j_Scarlet{ background-color:#fe5356;}


.p_dblue{ background-color:#1A3598;}
.p_blue{ background-color:#123DFC;}
.p_skyblue{ background-color:#1697E5;}
.p_hblue{ background-color:#6ADADB;}


/* margin */
.m_auto {margin: auto;}
.m_10 {margin: 10px;}
.m_20 {margin: 20px;}
.m_30 {margin: 30px;}
.m_40 {margin: 40px;}

.mx_10 {margin: 0 10px;}
.mx_20 {margin: 0 20px;}
.mx_30 {margin: 0 30px;}
.mx_40 {margin: 0 40px;}

.mt_10 {margin-top: 10px;}
.mt_20 {margin-top: 20px;}
.mt_30 {margin-top: 30px;}
.mt_40 {margin-top: 40px;}

.mb_10 {margin-bottom: 10px;}
.mb_20 {margin-bottom: 20px;}
.mb_30 {margin-bottom: 30px;}
.mb_40 {margin-bottom: 40px;}

.mr_5 {margin-right: 5px;}
.mr_10 {margin-right: 10px;}

/* padding */
.pt_10 {padding-top: 10px;}

/* show */
.w1440_hide {display: block;}
.w1024_hide {display: block;}
.w768_hide {display: block;}
.w425_hide {display: block;}
.w375_hide {display: block;}

.w1024_show {display: none;}
.w768_show {display: none;}
.w680_show {display: none;}
.w425_show {display: none;}
.w375_show {display: none;}


/* title&text */
#subContent .titleArea {position:relative; display:inline-block; font-family:'Ogg'; font-size:2.8rem; text-align: center; margin-bottom: 10px;}
#subContent .textArea {font-size:1.05rem; letter-spacing:-0.025em; word-break: break-all; text-align: center;}
#subContent .textArea1 {font-size: 1rem; text-align: center; letter-spacing:-0.025em; margin-top: 5px;}
#subContent .textArea2 {font-size: 2rem; letter-spacing:-0.025em;}

#subContent .textArea_C{text-align: center;}
#subContent .textArea_R{text-align: right;}
#subContent .textArea_L{text-align: left;}

/* img*/
#subContent .imgArea {text-align:center; margin-bottom:25px;}
#subContent .imgArea img {max-width:100%;}

#subContent .imgAreaBetween {width:100%; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:space-between; align-items:center;}
#subContent .imgAreaBetween.ver2 > * {width:calc((100% - 10px) / 2); margin-bottom:20px; text-align: center;}
#subContent .imgAreaBetween.ver3 > * {width:calc((100% - 20px) / 3); margin-bottom:20px;}
#subContent .imgAreaBetween.ver4 > * {width:calc((100% - 30px) / 4); margin-bottom:20px;}

#subContent .imgAreaCenter {width:100%; display:flex; flex-flow:row no-wrap; justify-content:center; align-items:flex-start;}
#subContent .imgAreaCenter > * {margin-right: 20px;}
#subContent .imgAreaCenter > *:last-child {margin-right: 0;}
#subContent .imgAreaCenter > img {max-width:100%;}

/* flex */
#subContent .flexArea {width:100%; display:flex; flex-flow:row wrap; justify-content:space-between;}
#subContent .flexArea.type2 .flexBox {width:49.5%;}
#subContent .flexArea.type3 .flexBox {width:32.8%;}
#subContent .flexArea.type4 .flexBox {width:24.5%;}
#subContent .flexArea.type5 .flexBox {width:19%;}
/* line */
#subContent .border_y05 {border-top:1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5);}





/* @media */
@media only screen and (max-width: 1920px) {
    #subContent .textArea2 {font-size: 1.75rem;}
}

@media only screen and (max-width: 1440px) {
    #subContent .textArea2 {font-size: 1.3rem;}
}
@media only screen and (max-width: 1024px) {
    .w1024_show {display: block;}
    #subContent .textArea2 {font-size: 1.2rem;}
}
@media only screen and (max-width: 768px) {
    #subContent .titleArea {font-size: 2rem;}
    #subContent .textArea {font-size: 1rem;}
    #subContent .textArea2 {font-size: 1.1rem;}

    
    .w768_show {display: block;}
}

@media only screen and (max-width: 600px) {
    #subContent .textArea1 {font-size: 0.8rem;}
    
}

@media only screen and (max-width: 425px) {
    
    .w425_show {display: block;}

    #subContent .textArea{font-size:0.85rem;}
    #subContent .textArea2 {font-size: 1rem;}
}

@media only screen and (max-width: 375px) {
    
    .w375_show {display: block;}

    #subContent .textArea1 {font-size:0.8rem; margin-top: 3px;}
}


@media only screen and (max-width: 350px) {
    #subContent .titleArea {letter-spacing: -0.08rem;}
    #subContent .textArea2 {font-size: 0.9rem;}
}