@charset "utf-8";
/* ===========================================================
■ 공통 - style 
=============================================================== */
:root {
    /* color */
	--hl-white: #fff;
	--hl-black: #000;
	--hl-primary: #007F7F;
	--hl-secondary: #C73E62;
	--hl-point: #6167C9;
	--hl-danger: #EB003B;
	--hl-warning: #FFB724;
	--hl-success: #008A1E;
	--hl-information: #2768ff;
	--hl-primary-5:  #F3FBFB;
	--hl-primary-10: #D8F3F3;
	--hl-primary-20: #9BE1E0;
	--hl-primary-30: #5ACECD;
	--hl-primary-40: #00B8B7;
	--hl-primary-50: #009C9B;
	--hl-primary-70: #006B6C;
	--hl-primary-80: #005658;
	--hl-primary-90: #004042;
	--hl-secondary-5:  #FFF8FA;
	--hl-secondary-10: #FDE9EE;
	--hl-secondary-20: #FBC7D5;
	--hl-secondary-30: #F8A5BB;
	--hl-secondary-40: #F6809F;
	--hl-secondary-50: #F24F7A;
	--hl-secondary-70: #A83553;
	--hl-secondary-80: #872A42;
	--hl-secondary-90: #642031;
	--hl-point-5:  #F9FAFE;
	--hl-point-10: #ECEDFC;
	--hl-point-20: #D0D2F7;
	--hl-point-30: #B5B8F2;
	--hl-point-40: #9A9EEC;
	--hl-point-50: #7B83E4;
	--hl-point-70: #5756A6;
	--hl-point-80: #494582;
	--hl-point-90: #38325D;
	--hl-icegray-5:  #EFF1F3;
	--hl-icegray-10: #E0E3E8;
	--hl-icegray-20: #C1C7D1;
	--hl-icegray-30: #A2ACB9;
	--hl-icegray-40: #8390A2;
	--hl-icegray-50: #64748B;
	--hl-icegray-60: #505D6F;
	--hl-icegray-70: #3C4653;
	--hl-icegray-80: #282E38;
	--hl-icegray-90: #14171C;
	--hl-gray-5: #F8F8F8;
	--hl-gray-10: #F0F0F0;
	--hl-gray-20: #E4E4E4;
	--hl-gray-30: #D8D8D8;
	--hl-gray-40: #C6C6C6;
	--hl-gray-50: #8E8E8E;
	--hl-gray-60: #717171;
	--hl-gray-70: #555555;
	--hl-gray-80: #2D2D2D;
	--hl-gray-90: #1D1D1D;
	--hl-info-5: #E9F0FF;
	--hl-info-10: #D4E1FF;
	--hl-info-20: #A9C3FF;
	--hl-info-30: #7DA4FF;
	--hl-info-40: #5286FF;
	--hl-info-50: #2768FF;
	--hl-info-60: #1F53CC;
	--hl-info-70: #173E99;
	--hl-info-80: #0C1F4D;
	--hl-info-90: #040A1A;
	--hl-spacer-50: 20rem;
    --hl-spacer-45: 18rem;
    --hl-spacer-40: 16rem;
    --hl-spacer-35: 14rem;
    --hl-spacer-30: 12rem;
    --hl-spacer-25: 10rem;
    --hl-spacer-20: 8.0rem;
    --hl-spacer-15: 6.0rem;
    --hl-spacer-10: 4.8rem;
    --hl-spacer-9: 4.0rem;
    --hl-spacer-8: 3.2rem;
    --hl-spacer-7: 2.4rem;
    --hl-spacer-6: 2.0rem;
    --hl-spacer-5: 1.6rem;
    --hl-spacer-4: 1.2rem;
    --hl-spacer-3: 0.8rem;
    --hl-spacer-2: 0.4rem;
    --hl-spacer-1: 0.2rem;
    --hl-spacer-0: 0;
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
}

/* background 
=============================================================== */
.bg_01 { background: var(--hl-primary-5)!important; }
.bg_02 { background: var(--hl-secondary-5)!important; }
.bg_03 { background: var(--hl-point-5)!important; }
.bg_04 { background: var(--hl-icegray-5)!important; }
.bg_05 { background: var(--hl-gray-5)!important; }
.bg_06 { background: #eef4f8; }

/* margin 
=============================================================== */
.mt0     { margin-top: 0 !important; }
.mt10    { margin-top: 10px !important; }
.mt20    { margin-top: 20px !important; }
.mt30    { margin-top: 30px !important; }
.mt40    { margin-top: 40px !important; }
.mt50    { margin-top: 50px !important; }
.mt60    { margin-top: 60px !important; }
.mb0     { margin-bottom: 0 !important; }
.mb10    { margin-bottom: 10px; }
.mb16    { margin-bottom: 16px; }
.mb20    { margin-bottom: 20px; }
.mb30    { margin-bottom: 30px; }
.mb40    { margin-bottom: 40px; }
.mb50    { margin-bottom: 50px; }
.mb80    { margin-bottom: 80px; }
.ml10    { margin-left: 10px; }
.ml20    { margin-left: 20px; }
.ml30    { margin-left: 30px; }
.mr10    { margin-right: 10px; }
.mr20    { margin-right: 20px; }
.mr30    { margin-right: 30px; }

/* padding 
=============================================================== */
.pt0  { padding-top: 0; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt80 { padding-top: 80px; }
.pb0  { padding-bottom: 0; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb100{ padding-bottom: 100px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pd0 { padding: 0 !important; }
.pd05 { padding: 5px; }
.pd10 { padding: 10px; }
.pd20 { padding: 20px; }
.pd30 { padding: 30px; }

/* text-align 
=============================================================== */
.tal { text-align: left !important; } 
.tac { text-align: center !important; } 
.tar { text-align: right !important; }
.word_keep { word-break: keep-all !important; }

/* text-color 
=============================================================== */
.col_01 { color: var(--hl-primary) !important; }
.col_02 { color: var(--hl-secondary) !important; }
.col_03 { color: var(--hl-point) !important; }
.col_04 { color: var(--hl-danger) !important; }
.col_05 { color: var(--hl-warning) !important; }
.col_06 { color: var(--hl-success) !important; }
.col_07 { color: var(--hl-information) !important; }
.col_08 { color: var(--hl-icegray-60) !important; }
.col_09 { color: var(--hl-gray-50) !important; }
.col_10 { color: var(--hl-point-70) !important; }
.col_11 { color: #03D1FF !important; }


/* border 
=============================================================== */
.brT_no { border-top: 0 none !important; }
.brT_01 { border-top: 1px solid #ddd; }
.brT_02 { border-top: 1px dashed #ccc; }
.brT_03 { border-top: 3px solid var(--hl-point-90);}
.brR_no { border-right: 0 none !important; }
.brR_01 { border-right: 1px solid #ddd !important; }
.brB_no { border-bottom: 0 none !important; }
.brB_01 { border-bottom: 1px solid #ddd; }
.brB_02 { border-bottom: 2px solid var(--hl-point) !important; }
.brL_no { border-left: 0 none !important; }
.brL_01 { border-left: 1px solid #ddd !important; }
.brL_02 { border-left: 1px solid #aaa !important; }
.noline { border: none !important; }

/* width
=============================================================== */
.width_50 { 
	width: 50% !important;
	@media all and (max-width:600px){
		width: 100%;
	} 
} 
.width_60 { 
	width: 60% !important;
	@media all and (max-width:600px){
		width: 100%;
	} 
} 
.width_80 { 
	width: 80% !important;
	@media all and (max-width:600px){
		width: 100%;
	} 
} 
.w60 { 
	width: 60%; margin: 0 auto; 
	@media all and (max-width:1280px){ width: 80%; } 
	@media all and (max-width:1024px){ width: 100%; }
}
.w80 { 
	width: 80%; margin: 0 auto; 
	@media all and (max-width:1024px){ width: 100%; }
}
.w100 { width: 100%; margin: 0 auto; }


/* bullet
=============================================================== */
.square01,
.square02,
.square03,
.square04,
.circle01 { position: relative; }
.square01::before { position: absolute; content: ''; display: block; top: 3px; left: -10px; width: 20px; height: 20px; background: #316d8a; }
.square02::before { position: absolute; content: ''; display: block; top: 3px; left: -10px; width: 20px; height: 20px; background: #777777; }
.square03::before { position: absolute; content: ''; display: block; top: 3px; left: -10px; width: 20px; height: 20px; background: #ff4060; }
.square04::before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 6px; height: 6px; background: #526daa; margin-top: 10px; }
.circle01::before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 6px; height: 6px; background: #526daa; margin-top: 10px; border-radius: 3px;}

/* ul / ol
=============================================================== */
.ol_list01 { 
	padding-left: 30px;
	> li { 
		list-style: decimal; 
		padding-bottom: 7px; 
		word-break: keep-all; 
	}
}
.ul_list01 { 
	padding-left:20px; margin-left: 10px;
	> li { 
		list-style-type:square; 
		padding-bottom: 5px; 
		word-break: keep-all; 
		&:last-child { padding-bottom: 0; }
	}
}
.ul_list02 { 
	padding-left: 20px; padding-bottom: 20px; margin-left: 10px;
	> li { 
		list-style-type: disc; 
		padding-bottom: 5px; 
		word-break: keep-all; 
	} 
}
.ul_list03 {
	> li { 
		position: relative; padding-left: 15px; margin: 0 0 6px 10px;
		&::before { 
			position: absolute; 
			display: block; 
			content: ''; 
			top: 10px; left: 0; 
			width: 6px; height: 6px; 
			border-radius: 3px;
			background: #526daa; 
		}
	}
}

.ul_list04 {
	> li { 
		width:100%; height:auto;
		padding: 5px 10px; 
		background:url("../img/list2.gif") no-repeat 0 14px; 
	}
}

@media screen and (max-width: 600px){
	.ol_list01 > li,
	.ul_list01 > li,
	.ul_list02 > li,
	.ul_list03 > li, 
	.ul_list04 > li { font-size: 1.6rem; }
}

/* 기타
=============================================================== */
.img_center { margin: 0 auto; }
.br_no > br { display: none; }
.h_01 { height: 4rem; }
.h_auto { height: auto !important; }
.select_01 { background: #fff url('../img/sch_arr_icon.png') no-repeat right 16px center; }
.unVisual{ display: none; }
.file_badge { font-size: 1.0rem; padding: 4px; color: #fff; text-align: center; min-width: 36px; border-radius: 4px; background: var(--hl-point); }

a.email { 
	color:#455e99; vertical-align: baseline;
	&:hover,
	&:active { color: #203055; text-decoration: underline; }
}
span.email { color:#034eab; }

/* 모바일 top으로 바로가기 버튼 
------------------------------------------------------- */
.scroll_btn { display: block; position: fixed; bottom: 20px; right: 20px; z-index: 99; }
.scroll_btn > a { display: block; width: 50px; height: 50px; text-align: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); }
.scroll_btn > a > img { padding-top: 18px; }
.scroll_btn > a:active { background: var(--hl-point); }


/* 로딩 css */
#loader {
    position: fixed;
    opacity: 1;
    display: none;
    justify-content: center;
    align-items: center;
	top: 0;
	left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: transparent;
    z-index: 998;
}

.loader {
    border: 4px solid #526daa;
    border-top: 4px solid transparent;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 1.5s linear infinite;
    z-index: 999;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg);}
}