/********************************************************
■ Basic : 기본
********************************************************/
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Libre+Barcode+39);
/*@import url(https://fonts.google.com/share?selection.family=Libre+Barcode+39);*/
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');


@media screen and (max-width: 390px) 
{
	/*
	.responsive .m-div {display: block;}
	.responsive .pc-div{display: none;}
	.responsive .m-pb_table{width:100%;}
	*/

	.hm_resp_img{width:100%}

}

#container {z-index:4;position:relative}


.nanum-brush-script-regular {
  font-family: "Nanum Brush Script", cursive;
  font-weight: 400;
  font-style: normal;
}


.open-sans-index {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:800;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.w3-margin-bottom-u
{
	margin-bottom:10px;
	padding:0px !important;
}

.f-Abril-Fatface{font-family: 'Abril Fatface', sans-serif;}
.f-open-sans{font-family: 'Open Sans script=all rev=1'}
.f-nanum-brush{font-family: 'Nanum Brush Script';}
.f-nanum-gothic {font-family: 'Nanum Myeongjo', serif; }
.f-nanum-myeongjo {font-family: 'Nanum Myeongjo', serif;}
.f-nanum-pen {font-family: 'Nanum Pen Script', "Segoe UI",Arial,sans-serif; } 

.f-libre-barcode{font-family: 'Libre Barcode 39', cursive;}
.f-color-7b7b7e{color:#7b7b7e;}
.f-color-fc2a00{color:#fc2a00 !important;}
.f-color-ce9a85{color:#ce9a85  !important;}
.f-color-ff5722{color:#ff5722 !important;}
.f-color-14e6be{color:#14e6be !important;}
.f-color-1ec8eb{color:#1ec8eb !important;}
.f-color-5beb1e{color:#5beb1e !important;}
.f-color-black{color:black;}
.f-color-white{color:white !important;}
.f-color-gray{color:gray !important;}
.f-sz-12{font-size:12px !important;}
.f-sz-15{font-size:15px !important;}
.f-sz-20{font-size:20px !important;}
.f-sz-25{font-size:25px !important;}
.f-sz-30{font-size:30px !important;}
.f-sz-35{font-size:35px !important;}
.f-sz-40{font-size:40px !important;}
.f-sz-45{font-size:45px !important;}
.f-sz-55{font-size:55px !important;}
.f-sz-65{font-size:65px !important;}
.f-sz-85{font-size:85px !important;}
.f-wt-100{font-weight:100 !important}
.f-wt-400{font-weight:400 !important}
.f-wt-500{font-weight:500 !important}
.f-wt-600{font-weight:600 !important}
.f-wt-900{font-weight:900 !important}

.inline-block{display:inline-block;}

.main-home-border
{
	border:1px solid #eaeaea;padding:10px;margin-bottom:10px;    border-radius: 17px;margin: 10px;
	box-shadow: 0 4px 10px 0 rgba(101, 72, 72, 0.13), 0 4px 20px 0 rgba(0, 0, 0, 0.13);
}
.main-home-qr-code{float:right;display:inline-block;margin:-10px -11px -20px -20px}

/*.bg-t1{background-image: url("/hm_images/css.jpg");}*/
.bg-t1{background-image: url("/hm_images/food2.png");}
.bg-album{background-image: url("/hm_images/carbon-fibre.png");}
/*.bg-intro{background-image: url("/hm_images/carbon-fibre-big.png");}*/
.bg-intro{background-image: url("/hm_images/carbon-fibre.png");}


.home-list-border-wrap
{
	margin:0px;
	padding:2px;
}
.home-list-border
{
	border:1px dotted red;
	border-radius:10px;
	margin:0px;
	padding:6px;
}

.w3-margin-bottom-u
{
	margin-bottom:10px;
	padding:0px !important;
}

.title-text-gradient {
  /* color: #ED532D; */
  background-image: linear-gradient(45deg,  rgb(30, 200, 235) , rgba(3, 235, 100,0.4) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* display: inline-block;*/
}

.title-text-gradient-math {
  /* color: #ED532D; */
  background-image: linear-gradient(45deg, #ff0, rgb(30, 200, 235) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* display: inline-block;*/
}
.title-text-gradient-english {
  /* color: #ED532D; */
  background-image: linear-gradient(45deg, rgb(30, 200, 235), rgb(235 3 146) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* display: inline-block;*/
}
.title-text-gradient-intro {
  /* color: #ED532D; */
  background-image: linear-gradient(45deg, #ff0, rgb(182 20 230) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* display: inline-block;*/
}
.title-text-gradient-album {
  /* color: #ED532D; */
  background-image: linear-gradient(45deg, rgb(235 30 194), rgb(20, 230, 190) 60%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* display: inline-block;*/
}


.btn-main-link{text-align:center; width:100%; padding:0px;margin:10px 0px 10px 0;}
.btn-main-link > ul {padding: 10px; margin: 0; list-style: none;background-color:rgba(255,0,0,0.1);  font-size: 30px;
  font-family: 'Abril Fatface', sans-serif;box-shadow: 0 4px 10px 0 rgba(101, 72, 72, 0.13), 0 4px 20px 0 rgba(0, 0, 0, 0.13);
  border-radius: 20px;
}

.btn-main-link2 > ul {padding: 10px; margin: 0; list-style: none;}


.btn-main-link > ul > li ,.btn-main-link2 > ul > li 
{
  border: 5px solid #e5e5e5;
  border-radius: 50px;
  background: #ffffff;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0), 0 3px 20px 0 rgba(0, 0, 0, 0);
  display: inline-block;
  text-align: center;
  width: 68px;
  height: 68px;
  padding-top: 5px;
  font-size: 30px;

}

.btn-main-link > ul > li > a ,.btn-main-link2 > ul > li > a
{
  text-decoration: none;
}

.btn-main-link > ul > li.active , .btn-main-link > ul > li:hover ,.btn-main-link2 > ul > li.active , .btn-main-link2 > ul > li:hover , .btn-main-selected
{
  border: 5px solid #efefef !important;
  border-radius: 50px;
  background: #000000 !important;
  box-shadow: 5px 4px 6px 2px rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19) !important;
  display:inline-block;
  text-align:center;
  width:68px;
  height:68px;
  padding-top: 5px;
  color: rgb(30, 200, 235);
  cursor: pointer;

}

.btn-main-link > ul > li.active > a , .btn-main-link > ul > li:hover > a ,.btn-main-link > ul > li.active > a:visited , .btn-main-link > ul > li:hover > a:visited , .btn-main-selected
{
  text-decoration: none;
}

/* .ps-pagination > ul > li.active > a ,  .ps-pagination > ul > li:hover > a {padding:8px; color: #ffe500;font-weight: bold;} */

.page-title
{
	border-radius: 36px;
	width: 250px;
	margin-left:15px;
	margin-bottom: 20px;
	padding-left: 30px;
	background-color: rgb(0 0 0);
	box-shadow: 7px 11px 3px 0px rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);"
}


.mathnote-ui-top{
	height: 45px;
    padding-top: 5px;
    text-align: center;
    
    background: linear-gradient(#fff,#dadada);
    border-top: 1px solid #c7c7c7;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-left: 1px solid #9e9e9e;
    border-right: 1px solid #9e9e9e;
  
}

.mathnote-ui-mid{
	padding:10px;
	border-left: 1px solid #9e9e9e;
    border-right: 1px solid #9e9e9e;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: 1px solid #9e9e9e;

}
.mathnote-ui-wrap
{
	border-radius: 5px;
	box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.19);
	margin: -50px 0px 10px 0px;
}


.my_btn > li {	list-style: none;
					    color: #31708f;
						width: 50px;
						margin: 3px 10px 3px 3px;
						padding: 5px 0;
						text-align: center;
						cursor: pointer;
						font-size: 12px;
						border: 1px solid #31708f;
						font-weight: 600;
						background: #fff;
						border-radius: 4px;
						float: left;

				   }
/*				   
.my_btn > li:hover{ 	color:#fff ; 	background:#31708f; }
.my_btn  li.selected{ 	color:#fff ; 	background:#31708f; }
*/
.my_btn > li:hover , .my_btn  li.selected{ 	color:#fff ; 	background:#000000; }


.mock-chapter-pnum-btn
{
    width:60px;
    text-align: center;
    display:inline-block;
    padding:3px 10px 3px 10px;
    margin-top:10px;
    margin-right:10px;
    border:1px solid gray;    
    background: linear-gradient(#fff,#dadada);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 4px 3px 5px 0px rgba(0,0,0,0.19);
}
.mock-chapter-pnum-btn:active
{
    background: linear-gradient(#dadada,#777) !important;
}
.mock-chapter-pnum-btn-on:active
{
    background: linear-gradient(#fff,#dadada) !important;
}

.mock-chapter-pnum-btn-on
{
    background: linear-gradient(#dadada,#777) !important;
}

.article-wrap
{  
  border-top:1px solid #eaeaea;padding:10px; border-radius: 17px;margin: 10px;
  box-shadow: 0 4px 10px 0 rgba(101, 72, 72, 0.13), 0 4px 20px 0 rgba(0, 0, 0, 0.13);
}
.article-wrap-mid
{
   width: 100%;
   clear:both;
  background-image: url(/hm_images/carbon-fibre.png);
    background-color: #00000087;
  padding: 20px;
  margin: 10px,0px,10px,0px;
  border-radius: 20px;
  box-shadow: 9px 9px 7px 4px rgb(0 0 0 / 24%);

}
.article-wrap-mid-album
{
   width: 100%;
  background-color: rgb(0 0 0 / 55%);
  padding:10px;
  border-radius: 10px;
  box-shadow: 4px 5px 1px 5px rgb(0 0 0 / 18%);

}
.article-wrap-bot
{
  width: 100%;
  padding:10px;
}
.album-ul  {list-style: none;margin-left:-40px !important;}
.album-ul > li {float:left;margin-right:20px;margin-bottom:30px;}
.album-list
{
  border-radius: 10px;padding:3px;background-color: white;
  box-shadow: 4px 5px 1px 5px rgb(0 0 0 / 18%);
  margin-bottom: 15px;
}

.tm_a_selected{
  background-color: #ff0;
  padding: 0px;
  color: #000;
  border-radius: 10px;
  box-shadow: 6px 5px 6px 3px rgb(0 0 0 / 19%);
}

.login-btn
{
  border-radius: 50px;background-color:black;color:white;width:100px;height: 100px;  text-align: center;   font-size: 60px;   border: 5px solid #e5e5e5;
  float:left;
}

 .login-btn2
{
  border-radius: 50px;background-color:black;color:white;width:200px;height: 100px;  text-align: center;  padding-top: 8px; font-size: 50px;   border: 5px solid #e5e5e5;
  float:left;
}
.login-btn3
{
  border-radius: 50px;background-color:black;color:yellow;width:100px;height: 100px;     padding-top: 30px; text-align: center;   font-size: 20px;   border: 5px solid #e5e5e5;
  float:left;
}
.login-btn-blank
{
  width:100px;height: 100px;
}

 .login-btn-open
{
  margin-right: -28px;
  margin-bottom: 15px;
  border-radius: 50px;background-color:black;color:white;width:100px;height: 50px;  text-align: center;  padding-top: 8px; font-size: 20px;   border: 5px solid #e5e5e5;
  float:left;
}
 .logout-btn-open
{
 
  margin-right: -28px;
  margin-bottom: 15px;
  border-radius: 50px;background-color:black;color:white;width:100px;height: 50px;  text-align: center;  padding-top: 8px; font-size: 15px;   border: 5px solid #e5e5e5;
  float:left;
}
.login-name-display-wrap
{
  clear:both;
  float:right;margin-top:20px;
  margin-right:20px;
}
.login-name-display
{
  clear:both;
  background-color: #1ec8eb;
  font-size: 23px;
  /*font-weight: 900;*/
  color: white;
  /*padding: 10px;*/
  border-radius: 20px 0px 0px 20px;
  margin-top: 65px;
  margin-right: -30px;
  text-align: center;
}