@charset "euc-kr";

/*±¸±Û ÆùÆ® ºÒ·¯¿À±â */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
font-family: 'Noto Sans KR', sans-serif;
@font-face {font-family:MalgunGothic; src:url(https://fonts.googleapis.com/earlyaccess/MalgunGothic.css);}


/* CSS Document */

body{
	margin:0px; 
	padding:0px;
	text-size-adjust: none; 
	word-break: keep-all; 
	vertical-align: top; 
	border: 0px none; 
	width:100%;
	max-width: 100%; 
	width:100%;
	}

body, div, font, input, h1, h2, h3, h4, h5, span, ul, li,ol{

	font-family:'Noto Sans KR', '¸¼Àº °íµñ', 'Malgun Gothic', Dotum;;
	color:#000;
	text-overflow: clip;
}

h5{
	font-weight:normal;
}


a:link { text-decoration: none;color:#000;	} 
a:visited { text-decoration: none;color:#000;	} 
a:active { text-decoration: none;color:#000;	} 
a:hover { text-decoration: none;color:#0068b7;	} 

/*wrap*/
.allmiddlenote{
width:100%; 
margin:0 auto;

}

.topmenulogosearch{
	width:100%; 
	height:60px; 
	background-color:#ffffff;
	position:relative;
	border-bottom:1px solid #cccccc;
	}
	
/*»ó´Ü¸Þ´º °íÁ¤ÇÏ±â*/


.menufix_sub{
	width:100%;
	background-color:#ffffff;	
}	

.menufix{
	width:100%;
	position:fixed;
	background-color:#ffffff;	
	z-index:100;
}	

/*»ó´Ü¸Þ´º ¸¸Å­ ³ôÀÌ°ªÁÖ°í º»¹® ³ª¿À°Ô*/
.menufixheight{
	height:70px;
}

/*Ã¹ÁÙ*/


/*¿ÞÂÊ¸Þ´º*/

.topleftmenu{
	font-size:0.8em;
	position:absolute;
	top:10px;	
	border:1px solid #ddd;
	
	
	padding:7px 8px;
	border-radius:5px;
	left:20px! important;
	
}


/*·Î°í*/
.toplogo{
	width:50%; 
	height:45px; 
	background-image:url('../images/toplogo2.png'); 
	background-size:contain;
	background-position:bottom;
	background-repeat:no-repeat;	
	margin:0 auto;
	margin-top:10px;

	
}

/*·Î°í*/
.ptoplogo{
	width:40%; 
	height:60px; 
	background-image:url('../images/toplogo2.png'); 
	background-size:contain;
	background-position:bottom;
	background-repeat:no-repeat;

}

/*·Î°í*/
.login{
	position:relative;

	border-radius: 20px;
	margin-top:-43px;
	width:18%; 
	left:68%;
	text-align: center;background: #2ea9eb;color: #fff !important; font-size: 1.0em;padding: 5px 0 10px 0 ;
	z-index:9999;
}

.login a{
	text-align: center;background: #2ea9eb;color: #fff !important; font-size:1.0em;padding: 5px 0 10px 0 ;

}


/*¼­ºê°íÁ¤ ·Î°í*/
.ptoplogo_sub{
	width:30%; 
	height:80px; 
	background-image:url('../images/toplogo.png'); 
	background-size:contain;
	background-position:bottom;
	background-repeat:no-repeat;
	margin-top:30px;
	margin-left:15px;
}

/*·Î°í±Û¾¾*/
.toplogotext{
	position:absolute;
	font-size:48px;	
	top:30px;
	left:260px;
	font-weight:500;
}


/*°ü½É¸Þ´º*/
.favormenu{
	font-size:52px; 
	position:absolute;
	top:50px;
	right:390px; 
	color:#666666;	
}

/*·©Å·*/
.lankstar{
	font-size:52px; 
	position:absolute;
	top:50px;
	right:280px; 
	color:#666666;	
}
/*¾Ë¸²*/
.noticebell{
	font-size:52px; 
	position:absolute;
	top:50px;
	right:170px; 
	color:#666666;	
}


/*»ó´Ü °Ë»ö*/

.topsearch{
	font-size:60px;
	color:#0064b2;
	
	position:absolute! important;
	
	top:40px;
	right:50px! important;
}


/* ÇÏ´Ü¸Þ´º */

.mainbottommenu{
	
	 width:100%; 
	margin-top:10px;
	 
}

.mainbottommenubg{
	
	height:180px; 
	background-color:#ffffff; 
	position:relative;
	
  text-align: center;
	
}

.homemenu{
	font-size:60px; 
	position:absolute; 
	top:40px; 
	left:0%; 
	color:#666666; 
	text-align: center;	
		
	width:25%! important;
}

.levelmenu{
	font-size:60px; 
	position:absolute; 
	top:40px; 
	left:25%; 
	color:#666666; 
	text-align: center;
	
	width:25%! important;
}


.menumenu{
	
	 font-size:60px; 
	 position:absolute; 
	 left:50%;  
	 top:40px; 
	 color:#666666; 
	 text-align: center;
	 
	 width:25%! important; 
	 
}

.mymenu{
	font-size:60px; 
	position:absolute; 
	top:40px;  
	left:75%; 
	color:#666666; 
	text-align: center;
	
	width:25%! important;
}

.menutextset{
	
	font-size:36px; 
	font-weight:100;
	color:#333333;
}

/*footer*/

/*ÇÏ´Ü·Î°í*/
.bottomlogo{
	width:250px; 
	height:101px; 
	background-image:url('../images/middlenote_logo_bottom.png'); 
	background-size:contain;
	background-position:bottom;
	background-repeat:no-repeat;	
	
	margin:0px 0px 0px 0px;
	
	margin:0 auto;
}



/*ÇªÅÍ*/
.footerbg{
	background-color:#495058; 
	text-align:center; 
	color:#ffffff; 
	font-size:32px; 
	padding-bottom:50px;
	
	
	
}

.footerbg ul{
	padding:0px; 
	margin:0px; 
	color:#999999; 
	font-size:32px; 
	list-style:none; 
	width:90%; 
	margin:0 auto; 
	text-align:center;
	
}

.footerbg li{
	
	float:left; 
	text-align:center; 
	padding:30px 20px; 
	border-bottom:1px solid #999999;
	
}

.footerbg li a{
	color:#b1b2b7	
}

/*¸»Ç³¼±*/

.balloon {
        position: relative;
        display: inline-block;
         width:57%;
    }
 
    .balloon span {
        display: inline-block;
        padding: 30px;
        color: #fff;
        background: #999999;
        border-radius: 20px;
        font-size:40px;
       
    }
 
    .balloon:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }
 
    .balloon.right:after, .balloon.left:after {
        border-width: 10px 15px;
        top: 50%;
        margin-top: -10px;
    }
 
    .balloon.top:after, .balloon.bottom:after {
        border-width: 15px 10px;
        left: 50%;
        margin-left: -10px;
    }
 
    .balloon.top:after {
        border-color: #999999 transparent transparent transparent;
        bottom: -29px;
    }
 
    .balloon.bottom:after {
        border-color: transparent transparent #999999 transparent;
        top: -29px;
    }
 
    .balloon.left:after {
        border-color: transparent #999999 transparent transparent;
        left: -29px;
        top:30px;
    }
 
    .balloon.right:after {
        border-color: transparent transparent transparent #999999;
        right: -29px;
        top:30px;
    }


/*±ÛÀÚ¼ö Á¦ÇÑ */
.txt_post { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: box; 
	margin-top:1px; 
	max-height:80px; 
	overflow:hidden; 
	vertical-align:top; 
	text-overflow: clip; 
	word-break:break-all; 
	-webkit-box-orient:vertical; 
	-webkit-line-clamp:3 
	}

.txt_line { 
	width:70px; 
	padding:0 5px; 
	overflow:hidden;
	 text-overflow:clip; 
	 white-space:nowrap; 
	 }


	 .support-box {width:95%;margin:1rem auto;padding:1.25rem;border:1px solid #ccc;border-radius:.625rem;box-sizing:border-box;}

.support-box .spt-title {position:relative;margin-bottom:1.25rem;text-align:center;font-size:50px;font-weight:700;letter-spacing:-.08em;color:#4a8bf5;}
.support-box .spt-li {margin-bottom:.313rem;padding:.813rem 1.25rem;background:#eee;border-radius:.313rem;text-align:center;font-weight:bold;font-size:40px;list-style-type: none;}
.support-box .spt-li:last-child {margin-bottom:0}
.support-box .spt-li a {display:block;font-size:40px;color:#333}
.support-box .spt-li:hover {background:#4a8bf5;color:#fff;}
.support-box .spt-li:hover a {color:#fefefe;text-decoration:none}
.support-box .spt-li:last-child{background:url('../image/hw_btn_bg.png') #fff center center repeat;padding:0.3em 0.2em 0.3em 0.2em;background:#4a8bf5;color:#fff;}
.support-box .spt-li:last-child a{text-shadow:1px 1px 1px rgba(0,0,0,.4);color:#fff;}



