@charset "utf-8";

/*********************** PC 및 모든 기기 *************************/

/*폰트*/
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");
html, body {overflow-x:hidden; width:100%; /* You may also want to try adding:*/  margin: 0;  padding: 0;}

body{font-family: 'NanumBarunGothic', sans-serif; font-size:16px; color:#222; }

/*레이아웃 관련 클래스*/
.wrap_screen{min-width: 360px;}

.mt0{margin-top: 0px !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;}
.mb0{margin-bottom: 0px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb100{margin-bottom: 100px !important;}
.mb150{margin-bottom: 150px !important;}
.ml0{margin-left: 0px !important;}
.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.ml30{margin-left: 30px !important;}
.ml40{margin-left: 40px !important;}
.ml50{margin-left: 50px !important;}
.mr0{margin-right: 0px !important;}
.mr10{margin-right: 10px !important;}
.mr20{margin-right: 20px !important;}
.mr30{margin-right: 30px !important;}
.mr40{margin-right: 40px !important;}
.mr50{margin-right: 50px !important;}
.pb0{padding-bottom: 0px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pt0{padding-top: 0px !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pl0{padding-left: 0px !important;}
.pl10{padding-left: 10px !important;}
.pl20{padding-left: 20px !important;}
.pl30{padding-left: 30px !important;}
.pl40{padding-left: 40px !important;}
.pl50{padding-left: 50px !important;}
.pr0{padding-right: 0px !important;}
.pr10{padding-right: 10px !important;}
.pr20{padding-right: 20px !important;}
.pr30{padding-right: 30px !important;}
.pr40{padding-right: 40px !important;}
.pr50{padding-right: 50px !important;}

.left{float:left;}
.right{float:right;}

.tc{text-align: center;}
.tl{text-align: left;}

.red{color: #e85b4c;}
.orange{color: #e96a00;}
.blue{color: #0000ff;}
.font_b{color: #0056ab; font-weight: bold;}

.hide_em {
	display: none;
}


/*메모: 각 기기에서 보여지고 안보여지는 기능은 클래스 hide_pc, hide_tablet, hide_mobile 으로 명명했고 기능은 display:none으로 처리함*/
/*********************** PC만 *************************/
@media screen and (min-width:980px){
	.hide_pc{display: none;}
    html,body{min-width: 1200px;}
    .wrap_screen{width: 1200px; margin: 0 auto; position: relative;}
}

/*********************** 태블릿과 모바일 *************************/
@media screen and (max-width:979px){
    .wrap_tm{padding: 0 20px;}
}

/*********************** 태블릿만 *************************/
@media screen and (min-width:760px) and (max-width:979px){
	.hide_tablet{display: none;}
}

/*********************** 모바일만 *************************/
@media screen and (min-width:320px) and (max-width:760px){
	body{font-size:14px;}
	.hide_mobile{display: none;}
}

/*********************** 모바일만 *************************/
@media screen and (max-width:320px){
	.hide_mobile{display: none;}
}