@charset "utf-8";
/* ===========================================================
■ 공통 - style 
=============================================================== */
:root {
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	--hl-white-fixe: #fff;
	--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-white: #fff;
	--hl-text: #333;
	--hl-black: #000;
	--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;
} 


/* 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; }

/* margin 
=============================================================== */
.mt0     { margin-top: 0 !important; }
.mt10    { margin-top: 10px; }
.mt20    { margin-top: 20px; }
.mt30    { margin-top: 30px; }
.mt40    { margin-top: 40px; }
.mt50    { margin-top: 50px; }
.mt60    { margin-top: 60px; }
.mb0     { margin-bottom: 0 !important; }
.mb10    { margin-bottom: 1.0rem; }
.mb16    { margin-bottom: 1.6rem; }
.mb20    { margin-bottom: 2.0rem; }
.mb24    { margin-bottom: 2.4rem; }
.mb30	 { margin-bottom: 3.0rem; }
.mb40    { margin-bottom: 4.0rem; }
.mb50    { margin-bottom: 5.0rem; }
.mb60    { margin-bottom: 6.0rem;}
.mb80    { margin-bottom: 8.0rem; }
.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; }
.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; }
.pd10 { padding: 10px; }
.pd20 { padding: 20px; }
.pd30 { padding: 30px; }

/* text-align 
=============================================================== */
.tal { text-align: left; } 
.tac { text-align: center; } 
.tar { text-align: right; }
.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; }

/* border
=============================================================== */
.brT_no { border-top: 0 none !important; }
.brT_01 { border-top: 1px solid var(--hl-icegray-10); }
.brR_no { border-right: 0 none !important; }
.brR_01 { border-right: 1px solid var(--hl-icegray-10) !important; }
.brB_no { border-bottom: 0 none !important; }
.brB_01 { border-bottom: 1px solid var(--hl-icegray-10); }
.brB_02 { border-bottom: 2px solid var(--hl-gray-80); }
.brL_no { border-left: 0 none !important; }
.brL_01 { border-left: 1px solid var(--hl-icegray-10) !important; }

/* width
=============================================================== */
.width_30 { width: 30%; } 
.width_50 { width: 50% !important; } 
.width_60 { width: 60% !important; } 
.width_80 { width: 80% !important; } 
.width_100 { width: 100%; }

.min_400 { min-width: 400px; }
.min_500 { min-width: 500px; }
.min_600 { min-width: 600px; }
.min_800 { min-width: 800px; }
.min_1000 { min-width: 1000px; }

.w50  { width: 50%; margin: 0 auto; }
.w60  { width: 60%; margin: 0 auto; }
.w70  { width: 70%; margin: 0 auto; }
.w80  { width: 80%; margin: 0 auto; }
.w100 { width: 100%; margin: 0 auto; }
@media all and (max-width:1280px){
	.w60 { width: 80%; }
} 
@media all and (max-width:1024px){ 
	.w50,
	.w60 {width: 100%;}
	.w80 {width: 100%;}
}
@media all and (max-width:600px){
	.w50, 
	.w60,  
	.w70,  
	.w80,  
	.width_30,
	.width_50,
	.width_60,
	.width_80 { width: 100%; }
} 


/* bullet
=============================================================== */
.square01,
.square02,
.square03,
.square04,
.bottom_line,
.circle01 { position: relative; }
.square01::before { position: absolute; content: ''; display: block; width: 20px; height: 20px; background: #316d8a; margin: 5px 0 0 -30px; }
.square02::before { position: absolute; content: ''; display: block; width: 20px; height: 20px; background: #777777; margin: 5px 0 0 -30px; }
.square03::before { position: absolute; content: ''; display: block; width: 20px; height: 20px; background: #ff4060; margin: 5px 0 0 -30px; }
.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: 20px; 
	> li { list-style: decimal; padding-bottom: 7px; word-break: keep-all; }
}
.ul_list01 { 
	padding-left:20px; 
	> li { 
		list-style-type:square; padding-bottom:10px; font-size: 1.7rem; word-break: keep-all; 
		&:last-child { padding-bottom: 0; }
	}
}
.ul_list02 { 
	padding-left: 20px; padding-bottom: 20px;
	> li { list-style-type: disc; padding-bottom: 5px; font-size: 1.7rem; word-break: keep-all;  } 
}
.ul_list03 > li { 
	position: relative; padding-left: 15px; margin-bottom: 6px;
	&::before { position: absolute; content: ''; display: block; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 3px; background: #526daa; }
}
.ul_list04 > li { width: 100%; height: auto; font-size: 1.6rem; padding: 5px 10px; background:url("../img/list_01.png") no-repeat 0 14px; }
.ul_list05 > li { padding: 0 0 2px 13px; background: url('../img/list_02.png') no-repeat 0 8px; -webkit-padding-before: 0; }

@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; }
}

.list_p > p { margin-bottom: 16px; }


/* 기타
=============================================================== */
caption > div, 
legend, 
.hide { display: block; position: absolute; overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.blind { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 
.br_no > br { display: none; }
.display_no { display: none !important; }
.center { margin: 0 auto; }
.flex_email { display: inline-flex; align-items: flex-start; word-break: break-all;
	> img { margin-right: 5px; padding-top: 7px; }
}
.flex_inline { display: flex; align-items: flex-start; gap: 5px; 
	> img { margin-top: 5px; }
}

a.tel::before { content:"Tel : " }
a.email { 
	color:#455e99; vertical-align: baseline;
	&:hover,
	&:active { color: #203055; text-decoration: underline; }
}
.clr { 
	clear: both;
	&:after { display: block; content: ""; clear: both; }
}

.badge { font-size: 1.4rem; border-radius: 4px; color: var(--hl-text); padding: 4px 10px; background: var(--hl-point-20);}
.balanced { white-space: unset; text-wrap: balance; }
.mobile { display: none !important; }
@media screen and (max-width: 1024px){
	.mobile { display: block !important; }
	.pc { display: none !important; }
}
@media screen and (max-width: 800px){
	.img_100 { width: 100%; }
}

/* 새창으로 보기 - hover, dark*/
.newpage_svg { width: 14px; height: 14px; margin-left: 5px; transition: all 0.3s; }
a:hover > .newpage_svg { filter: brightness(0) contrast(100) invert(1); }
/* 새창으로 보기 - dark*/
.newpage_svg01 { width: 14px; height: 14px; margin-left: 5px; }
/* 새창으로 보기 - 둘다 안됨*/
.newpage_svg02 { width: 14px; height: 14px; margin-left: 5px; }

/* 줄임말 */
.ellipsis_text {
	width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	@media screen and (max-width: 1280px){ width: 500px; }
	@media screen and (max-width: 1024px){ width: 400px; }
	@media screen and (max-width: 800px){ width: 350px; }
}


/* 모바일 top으로 바로가기 버튼 
------------------------------------------------------- */
.scroll_btn { display: block; position: fixed; bottom: 20px; right: 20px; z-index: 100; }
.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: #526daa; }

@media screen and (max-width: 1000px){
	.w_scroll { position: relative; width: 100%; overflow: auto; }
	.w_scroll::-webkit-scrollbar { width: 100%; height: 4px; }
	.w_scroll::-webkit-scrollbar-track { background-color: #eee; border-radius: 2px; }
	.w_scroll::-webkit-scrollbar-thumb { background-color: #aab2ca; border-radius: 2px; }
	.w_scroll::-webkit-scrollbar-thumb { background-color: #aab2ca; border-radius: 2px; margin: 0 20px; }
	.w_scroll:after { position: absolute; display: block; content: ''; right: 0; top: 0; width: 40px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0)0%, rgba(255,255,255,0.8)50%);}
}