@charset "utf-8";

button { 
	cursor: pointer; 
    border: none;
    background-color: transparent;
    padding: 0;
}
	

/*-----------------------------------------------------------------------------------
	button size Properties
-----------------------------------------------------------------------------------*/
.buttonSS, 
a.buttonSS {
    display: inline-block;
    border-radius: 2px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 0 5px;
}



.buttonS, 
a.buttonS {
    display: inline-block;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
}

.buttonM, 
a.buttonM {
    display: inline-block;
    border-radius: 2px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
}

.btnBigWide{display:inline-block;font-size:24px;height:100px;line-height:100px;padding:0 10px;border-radius:10px;text-align:center;border:1px solid #c9c9c9;cursor:pointer;box-sizing:border-box;}
.btnBigWide.red{background:#e11a31;color:#fff;border-color:#c3182c;}
.btnBigWide.red:hover{background:#c3182c;}
.btnBigWide.mint{background:#109fb0;color:#fff;border-color:#168795;}
.btnBigWide.mint:hover{background:#168795;}



/*-----------------------------------------------------------------------------------
	button color Properties
-----------------------------------------------------------------------------------*/
.bWhite { border: 1px solid #c3c3c3;background: #ffffff;color:#6f6f6f;}
.bGreen { border-bottom: 2px solid #426211;background-color: #669818; font-weight:600;}
.bRed { border: 1px solid #a95151;background: #c57979;}
.bBlue { border: 1px solid #6c9bed;background-color: #5ba5cb;}
.bGold { border: 1px solid #c4853e;background: #d5a44c;}
.bGrey { border: 1px solid #636363;background: #808080;}

.bgGreen {
    border: 1px solid #68a341;
    box-shadow: 0 1px 2px 0 #a4ca6c inset;
    background: #96c161;
    background: -moz-linear-gradient(top,  #96c161 0%, #609c3d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96c161), color-stop(100%,#609c3d));
    background: -webkit-linear-gradient(top, #96c161 0%,#609c3d 100%);
    background: -o-linear-gradient(top, #96c161 0%,#609c3d 100%);
    background: -ms-linear-gradient(top, #96c161 0%,#609c3d 100%);
    background: linear-gradient(top, #96c161 0%,#609c3d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96c161', endColorstr='#609c3d',GradientType=0 );
}
.bgGreen:active {
    background: #74aa49;
    box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bgRed {
    border: 1px solid #a95151;
    box-shadow: 0 1px 2px 0 #cd8787 inset;
    background: #c57979;
    background: -moz-linear-gradient(top,  #c57979 0%, #a34c4c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c57979), color-stop(100%,#a34c4c));
    background: -webkit-linear-gradient(top,  #c57979 0%,#a34c4c 100%);
    background: -o-linear-gradient(top,  #c57979 0%,#a34c4c 100%);
    background: -ms-linear-gradient(top,  #c57979 0%,#a34c4c 100%);
    background: linear-gradient(top,  #c57979 0%,#a34c4c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c57979', endColorstr='#a34c4c',GradientType=0 );
}
.bgRed:active {
    background: #b15e5e;
    box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bgBlue {
    border: 1px solid #6c9bed;
    background: #5ba5cb;
    background: -moz-linear-gradient(top,  #87b7f8 0%, #66a7fb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87b7f8), color-stop(100%,#66a7fb));
    background: -webkit-linear-gradient(top,  #87b7f8 0%,#66a7fb 100%);
    background: -o-linear-gradient(top,  #87b7f8 0%,#66a7fb 100%);
    background: -ms-linear-gradient(top,  #87b7f8 0%,#66a7fb 100%);
    background: linear-gradient(top,  #87b7f8 0%,#66a7fb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87b7f8', endColorstr='#66a7fb',GradientType=0 );
}
.bgBlue:active {
    background: #6c9bed;
}

.bgGold {
    border: 1px solid #c4853e;
    box-shadow: 0 1px 2px 0 #ddb65b inset;
    background: #d5a44c;
    background: -moz-linear-gradient(top,  #d5a44c 0%, #c07833 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5a44c), color-stop(100%,#c07833));
    background: -webkit-linear-gradient(top,  #d5a44c 0%,#c07833 100%);
    background: -o-linear-gradient(top,  #d5a44c 0%,#c07833 100%);
    background: -ms-linear-gradient(top,  #d5a44c 0%,#c07833 100%);
    background: linear-gradient(top,  #d5a44c 0%,#c07833 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5a44c', endColorstr='#c07833',GradientType=0 );
}
.bgGold:active {
    background: #ca8e40;
    box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

.bgWhite {
	color:#6f6f6f;
    border: 1px solid #c3c3c3;
    background: #ececec;
    background: -moz-linear-gradient(top,  #fdfdfd 0%, #ececec 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#ececec));
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#ececec 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#ececec 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#ececec 100%);
    background: linear-gradient(top, #fdfdfd 0%,#ececec 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#ececec',GradientType=0 );
}
.bgWhite:active { background: #ececec; }

.bgGrey {
    border: 1px solid #636363;
    box-shadow: 0 1px 2px 0 #c0c0c0 inset;
    background: #808080;
    background: -moz-linear-gradient(top,  #808080 0%, #636363 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#808080), color-stop(100%,#636363));
    background: -webkit-linear-gradient(top,  #808080 0%,#636363 100%);
    background: -o-linear-gradient(top,  #808080 0%,#636363 100%);
    background: -ms-linear-gradient(top,  #808080 0%,#636363 100%);
    background: linear-gradient(top,  #808080 0%,#636363 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#636363',GradientType=0 );
}
.bgGrey:active {
    background: #6d7787;
    box-shadow: 0 0 2px #707070 inset, 0 1px 0 #fff;
}

/*-----------------------------------------------------------------------------------
	etc button 
-----------------------------------------------------------------------------------*/
.loginBtn{
	display: inline-block;
    border-radius: 2px;
    width:110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    padding: 0 10px;
    border: 1px solid #6c9bed;
    background: #5ba5cb;
}

.searchBtn{
	position:absolute;
	display: inline-block;
    border-radius: 2px;
    width:80px;
    height: 35px;
    line-height: 33px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    padding: 0 10px;
    border: 1px solid #990000;
    background: #bf0000;
}
/*둥근*/
.roundBtn {border-radius: 12px; display: inline-block;font-size:18px;
 background: #e5e5e7;border:1px solid #ff8040; width:120px;
 text-align: center;height: 30px; line-height: 28px; color: #333;font-weight: bold; margin-bottom: 10px;}

/* 나의 강의실 버튼 */
.card-btn{
    display: block;
    width: 100%;
    height: 37px;
    line-height: 37px;
    text-align: center;
    font-size: 14px;
    background-color: #109fb0;
    font-weight: 600;
     border-radius:5px;
}
.card-btn.red{
	background-color:#e11a31;;
}
.card-btn a{
	display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}
.file-btn{
    width: 68px;
    height: 25px;
    background-color: #9a86a4;
    box-sizing: border-box;
    border-bottom: 3px solid #6c5b75;
    text-align: center;
    color:#fff;
    font-weight:500;
}
.plan-btn{
	 width:210px;
	 height:100%;
	 padding-left:30px;
	 background:url(/resources/home/images/mypage/plan-icon.png) no-repeat left 50px center;
	 color:#fff;
	 font-size:18px;
}
.plan-btn.red{
    background-color: #d32955;
   /*  border-bottom: 2px solid #721e34; */
}

/* 제출버튼 */
.submit-btn{
    position: relative;
    width: 100px;
    height: 55px;
    color: #fff;
    background-color: #bb7300;
    z-index: 1;
    font-size:17px;
    font-weight:500;
    overflow:hidden;
}
.submit-btn::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #c23200;
  /* background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%); */
    transition: all 0.3s ease;
}
.submit-btn:hover:after{
    top: auto;
    bottom: 0;
    height: 100%;
}
.submit-btn:active {
    top: 2px ;
}
.learning-btn{
	position: relative;
  	display: inline-block;
    width: 210px;
    height: 100%;
    background-color: #009ba9;
    color: #fff;
    font-size: 20px;
    border-radius:10px;
    overflow:hidden;
}
.btn-effect:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.learning-btn.blue{
	 background-color: #6c9bed;
}