/*---------------------------------------
    해더
----------------------------------------*/
#head {position: absolute; top: 0; display: block; z-index: 999; width: 100%; height: 100px; transition: all .1s ease;}
#head .header-inner {margin: 0; padding: 0;}
#logo {position: absolute; float:left; padding: 29px 0; line-height: 42px;z-index: 998;}
#logo img {width: auto; max-height: 42px; vertical-align: middle;} 

#nav {width: 100%; padding: 29px 0;}
#nav #mainMenu {float: right;}
#mainMenu li {float: left; transition: all .3s ease; margin-left: 20px;}
#mainMenu li a {position: relative; display: block; padding: 10px 5px; text-transform: uppercase; font-family:'NanumSquare', Sans-serif; font-size: 16px; line-height: 20px; font-weight: 400; letter-spacing: 0.5; color: #fff; border:1px solid transparent; transition: all .3s ease; border-radius: 2px; transition: all .4s ease-in-out; text-decoration: none;}
#mainMenu li a:hover {border-bottom: 1px solid rgba(255,255,255,0.5);}

#mainMenu li a.login {border: 1px solid rgba(255,255,255,0.2); padding: 10px 15px;}
#mainMenu li a.demo {border: 1px solid rgba(255,193,7,0.2); padding: 10px 15px; color:#ffc107;}

#mainMenu li a.login:hover {border: 1px solid rgba(255,255,255,0.5);}
#mainMenu li a.demo:hover {border: 1px solid rgba(255,193,7,0.5);}


#mainMenu .memberdiv {position: absolute; right: 10px; top: 10px; padding:0;}
#mainMenu .memberdiv li {margin: 0;}
#mainMenu .memberdiv li a {display: inline-block; background: rgba(0,0,0,0.3); padding: 3px 10px; color:#ddd; font-size: 12px; border: 0; border-radius: 0;}
#mainMenu .memberdiv li a.nav-admin {background: rgba(255,80,106,0.4);}

#mainMenu .memberdiv li a:hover {color: #fff;}



/*-----sticky---------*/

#head.sticky {position: fixed; height: 80px; background: rgba(255,255,255,1.0); -webkit-box-shadow:2px 2px 5px 3px rgba(0,0,0,0.1);-moz-box-shadow:2px 2px 5px 3px rgba(0,0,0,0.1);box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.1);z-index: 998; }

#head.sticky #nav {padding: 0;}
#head.sticky #mainMenu {padding: 19px 0;}
#head.sticky #logo {float:left; padding: 24px 0; line-height: 32px;}
#head.sticky #logo img {width: auto; max-height: 32px; vertical-align: middle;} 

#head.sticky #mainMenu li a {color: #222;}
#head.sticky #mainMenu li a:hover {border-bottom: 1px solid rgba(0,0,0,0.5);}

#head.sticky #mainMenu li a.login {border: 1px solid rgba(0, 0, 0, 0.1);  }
#head.sticky #mainMenu li a.demo {border: 1px solid rgba(255,193,7,0.4); color:#ffc107; }

#head.sticky #mainMenu li a.login:hover {border: 1px solid rgba(0,0,0,0.3);}
#head.sticky #mainMenu li a.demo:hover {border: 1px solid rgba(255,193,7,0.8);}


#head.sticky #mainMenu .memberdiv {position: absolute; right: 10px; top: 10px; padding:0;}
#head.sticky #mainMenu .memberdiv li {margin: 0;}
#head.sticky #mainMenu .memberdiv li a {display: inline-block; background:none; padding: 3px 10px; color:#777; font-size: 12px; border: 0; border-radius: 0; opacity: 0.7;}
#head.sticky #mainMenu .memberdiv li a.nav-admin {color: #ff506a}

#head.sticky #mainMenu .memberdiv li a:hover {opacity: 1.0;}


/*-----모바일메뉴---------*/

#nav .mobile-trigger {position: absolute; display:none; padding: 18px 20px; right: 0; top: 0;z-index:999;}

/* .hamburger-icon */
.hamburger-icon {width: 30px; height: 23px; position: relative; margin: 0px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.hamburger-icon span {display: block; position: absolute; height: 3px; width: 100%; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.hamburger-icon span {background: #fff; }
.hamburger-icon span:nth-child(1) {top: 0px;}
.hamburger-icon span:nth-child(2) {top: 10px;}
.hamburger-icon span:nth-child(3) {top: 20px; }
.hamburger-icon.open span:nth-child(1) {top: 11px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.hamburger-icon.open span:nth-child(2) {opacity: 0; left: -60px; }
.hamburger-icon.open span:nth-child(3) {top: 11px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }


/*-----responsive---------*/
@media (max-width: 1024px){     
	#mainMenu li a.nav-admin i {display: none;}
}
@media (max-width: 768px){  
	#nav #mainMenu {display: none;}
    #nav .mobile-trigger {display: block;}

    #logo {left: 0; top: 0;width: 100%; text-align: center; padding: 18px 0; line-height: 23px;}
    #logo img {max-height: 23px;} 

    #mainMenu {position: absolute; left: 0; top:0; width: 100%; padding-top: 59px; padding-bottom: 20px; background-color: #333;}
    #mainMenu li {float: none; transition: all .3s ease; margin: 0;}
    #mainMenu li a {display: block; color: #ccc !important; background: #333 !important; padding: 20px 20px !important;  text-decoration: none;  font-size: 17px; border: none !important;}
    #mainMenu li a:active {background-color: #222; color: white;}
    #mainMenu li:first-child a {border-top:1px solid rgba(0,0,0,0.3) !important;}
    
	#mainMenu li a.nav-admin {display: none}
	
    #head.sticky {height: 59px; }
    #head.sticky #logo { padding: 18px 0; line-height: 23px;}
    #head.sticky #logo img {max-height: 23px;}  
    #head.sticky .hamburger-icon span {background: #333; }
    #head.sticky #mainMenu {top:59px; padding: 0; z-index: 997;}
}

/*-----로그인 모달---------*/  

#myModal .modal-dialog {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); margin:0px auto; width: 80%;}
#myModal .close  {position: absolute; right: 10px; top: 10px; font-size: 30px; width: 40px; height: 40px; line-height: 40px; padding: 0; text-align: center; z-index: 2;}

/*---------------------------------------
    푸터
----------------------------------------*/

.footer {background: #222222; padding: 70px 0; }
.footer h3.title {font-family:'NanumSquare', Sans-serif; color:rgba(255,255,255,0.6); font-size: 17px;  line-height: 24px; vertical-align: middle; margin-bottom: 30px; font-weight: 600; text-transform: uppercase;}
.footer h3.title img {max-height: 24px;}

.f-info {}
.f-info ul li   {font-size: 13px; line-height: 23px; font-weight: 300; color:rgba(255,255,255,0.25);}
.f-info ul li a {font-size: 13px; line-height: 23px; font-weight: 300; color:rgba(255,255,255,0.3);}
.f-info ul li a:hover { color: #ffc107; }
.f-info .f-logo ul li {font-size: 17px; line-height: 27px;}

.f-copy {position: relative; border-top: 1px solid #333; margin-top: 30px; padding-top: 20px;}

.f-social {position: relative; font-size: 0; text-align: left;}
.f-social a {display: inline-block; margin-right: 10px; width: 20px; height: 20px; line-height: 0px; overflow: hidden; background-image: url("/main/img/icon-sns.png"); background-repeat: no-repeat; background-position: 0 0;-webkit-transition: all .3s ease;-o-transition: all .3s ease; transition: all .3s ease;}
.f-social a:hover {background-position-y: -20px;}

.f-social a.f-youtube   {background-position-x: 0px;}
.f-social a.f-instagram {background-position-x: -20px;}
.f-social a.f-twitter   {background-position-x: -40px;}
.f-social a.f-facebook  {background-position-x: -60px;}
.f-social a.f-email     {background-position-x: -80px;}

.f-copyright {font-size: 13px; line-height: 20px; font-weight: 300; color:rgba(255,255,255,0.2); text-align: right;}

@media (max-width: 768px){
    .footer {padding: 30px 10px;}
    .footer h3.title {margin-bottom: 5px;}    
    .f-social a {background-position-y: -20px;}

    .f-copy { margin-top: 20px; }
}
@media (max-width: 425px){
	.hidden-xs {display: none !important;}
	.f-info div:last-child h3.title {margin-top: 20px;}
	.f-copyright {text-align:left; margin-top:10px;}
}

/*-----------------------------------------
    체크박스 디자인변경 
-----------------------------------------*/

/* 체크박스1 디자인변경 
.chkbox {position: relative; height: 20px; line-height: 20px;vertical-align: middle;}
/* 기본 체크박스 없애기 
.chkbox input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
/* 웹의 경우 커서에 pointer 설정 
.chkbox input[type="checkbox"] + label {display: inline-block; position: relative; cusor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* 새로운 디자인의 체크박스 만들기
.chkbox input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 20px; height: 20px; line-height: 20px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #333;  border-radius: 50%; border: 1px solid #777; }

.chkbox input[type="checkbox"] + label:active:before,
.chkbox input[type="checkbox"]:checked + label:active:before {}
.chkbox input[type="checkbox"]:checked + label:before {content: '\2713'; border: 1px solid #fcd204; color: #222; background: #fcd204;}
*/

/* 체크박스2 디자인변경 */
.chkbox2 {position: relative; height: 16px; line-height: 16px; vertical-align: middle;}
.chkbox2 input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.chkbox2 input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.chkbox2 input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 16px; height: 16px; line-height: 16px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #eee;  border-radius:2px; border: 1px solid #ccc; }
.chkbox2 input[type="checkbox"] + label:active:before,
.chkbox2 input[type="checkbox"]:checked + label:active:before {}
.chkbox2 input[type="checkbox"]:checked + label:before {content: '\2713'; border: 1px solid #fcd204; color: #222; background: #fcd204;}