@charset "UTF-8";
@import url("font/NotoSans.css");
@import url("animate.css");

/*!
 * Design by sky
 * kakao : rrrrrrr0105
 * e-mail : hahahoho9@nate.com
 */


* { margin:0; padding:0; box-sizing:border-box; }
*[onclick] { cursor:pointer; }

h1, h2, h3, h4, h5, h6 { font-weight:600; }
th { text-align: center; }
body { font-size: .85em; color: #444; line-height:1.6; overflow:hidden; font-family: 'Noto Sans KR'; font-weight: 500; }
img { border:none; vertical-align:middle; }
input, select, textarea { font-size:.9em; font-family: 'Noto Sans KR'; resize:none; border:1px solid #ddd; padding:5px; }
button { font-size:1rem; font-weight:600; border:0; background:none; vertical-align:top; line-height:1; }
ul, li { list-style:none; vertical-align: middle; }

/* 링크 설정 */
a:link { color: #444; text-decoration: none; -webkit-transition: all .3s ease-in 0s; -moz-transition: all .3s ease-in 0s; -ms-transition: all .3s ease-in 0s; -o-transition: all .3s ease-in 0s; transition: all .3s ease-in 0s; }
a:visited { color: #444; text-decoration: none; }
a:active { color: #444; text-decoration: none; }
a:hover { color: #444; text-decoration: none; }

/* html5속성 선언 ie8용 */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block; } 



.wrap { width:500px; margin:0 auto; position:relative; }
.wrap2 { padding:0 10px; }

@media screen and (max-width:500px){
.wrap { width:100%; }
}


.border-radius5 { border-radius:5px; }
.border-radius50 { border-radius:50px; }


/****** 헤더 ******/
header { width:100%; background:rgba(102, 102, 102, .7); height:13vh; }
header > div { position:relative; height:100%; }
header .logo { position:relative; top:50%; transform:translateY(-50%); }
header .logo img { width:50%; }
header img { vertical-align:middle; }


#showLeft, #showRight { position:fixed; z-index:9999; width:40px; height:40px; cursor:pointer; top:3vh; }
#showLeft { left:10px; text-align:left; background:url('../images/left_menu.png') no-repeat center left/80%; }
#showRight { right:10px; text-align:right; background:url('../images/right_menu.png') no-repeat center right/80%; }

#showLeft:before, #showLeft:after, #showRight:before, #showRight:after { content:""; position:absolute; width:100%; height: 5px; border-radius:10px; top:40%; left:0; }

.cbp-spmenu {	 background: rgba(0, 0, 0, .85); position: fixed; padding:0; text-align:left; overflow-y:auto; }

.cbp-spmenu-vertical { width: 80%; height: 100%; top: 0; z-index: 1000; }
.cbp-spmenu-vertical ul a { display:block; border-bottom: 1px solid #474a50; color:#fff; width:100%; height:50px; line-height:50px; padding:0 5%; }
.cbp-spmenu-vertical ul a:hover { color:#aaa; }


/*왼쪽슬라이드*/
.cbp-spmenu-left { left: -100%; }
.cbp-spmenu-left.cbp-spmenu-open {	left: 0; }

.cbp-spmenu-left.cbp-spmenu-open #showLeft { position:absolute; right:10px; top:10px; left:auto; background:none; width:30px; height:30px; }
.cbp-spmenu-left.cbp-spmenu-open #showLeft:before {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  background-color: #fff;
  }
  .cbp-spmenu-left.cbp-spmenu-open #showLeft:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  background-color: #fff;
  }

/*오른쪽슬라이드*/
.cbp-spmenu-right { right: -100%; }
.cbp-spmenu-right.cbp-spmenu-open { right: 0; }

.cbp-spmenu-right.cbp-spmenu-open #showRight { position:absolute; right:10px; top:10px; left:auto; background:none; width:30px; height:30px; }
.cbp-spmenu-right.cbp-spmenu-open #showRight:before {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  background-color: #fff;
  }
  .cbp-spmenu-right.cbp-spmenu-open #showRight:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  background-color: #fff;
  }

.cbp-spmenu { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }




/****** 푸더 ******/
footer { position:fixed; bottom:0; width:100%; left:0; }
footer ul li { float:left; width:calc(20% - 1px); margin-right:1px; background:rgba(102, 102, 102, .7); }
footer ul li a { height:100%; display:block; padding:1vh 0; color:#fff !important; }
footer ul li a img { margin:0 auto; display:block; }
footer ul li:last-child { width:20%; margin-right:0; }
footer ul li:nth-child(3) { background:rgba(251, 203, 29, .7); }
footer ul li:nth-child(3) a { color:#333 !important; }