/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,500,700,800,900');
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);


.main-back1{
  background:url(../images/main_back.png) no-repeat top center #f6f5f5;
  background-size:auto;
}

.main-back2{
  /*background:url(../images/main_back2.png) no-repeat top center #f6f5f5;*/
  background-size:auto;
}

.main-back3{background:#eefcff;}

.bg-fix{background-attachment:fixed}

.icon-block img{
	width:40%;
}

.icon-block .material-icons {
	font-size: inherit;
}

.main-box {
  padding:10px 20px;
}

.device-box {
  height:150px;
}

.device-box img{
  max-width: 100%;
  max-height:150px;
}

.main-box ul li {
    list-style-type:disc;
	list-style-position:inside;
	font-size:16px;
 }

.main_banner {
    width:100%;
}

.main_visual {
	height:560px;
	background:url(../images/main_visual.png) no-repeat top center;
    background-size:auto;
}

.code-tit {
    border-radius: 10px 10px 0 0;
	padding:20px 30px;
	margin:0 -30px;
}

.level-block {
	border-radius: 10px;
	margin-top:20px;
	background-color:#fff;
	padding:0 30px 10px 30px;
	text-align:center;
	border:1px solid #e0e0e0;
}

.level-enter {
	padding: 10px;
	margin-bottom: 20px;
	display: block;
	text-align: center;
	font-size:18px;
	border-radius: 6px;
}
.profile-photo {
	border:1px solid #ccc;
	width:200px;	
	height:200px;
	padding-top:50px;
	border-radius:5px;
	margin:20px auto;
}
.project-photo {
	margin-bottom:10px;
}
.project-photo img{
	width:50%;
}
.level-menu {
	margin-left:200px;
}
.level-menu-block {
	padding:0 30px;
	font-size:18px;
	font-weight:500;
}

.pad-rl-10 {
	padding:0 10px;
}
.pad-r10 {
	padding-right:10px;
}
.pad-l10 {
	padding-left:10px;
}
.pad-l30 {
	padding-left:30px;
}
.pad-top-100 {
	padding-top:100px;
}
.pad-top-50 {
	padding-top:50px;
}
.pad-top-20 {
	padding-top:20px;
}
.pad-tb-50 {
	padding:50px 0 50px 0;
}
.pad-tb-30 {
	padding:30px 0 30px 0;
}
.pad-tb10 {
	padding:10px 0;
}
.pad-5 {
	padding:5px;
}
.mrg-t20 {
	margin-top:20px;
}
.mrg-tb30 {
	margin:30px 0;
}
.mrg-t50 {
	margin-top:50px;
}
.mrg-r100 {
	margin-right:100px;
}
.mrg-r50 {
	margin-right:50px;
}
.mrg-l20 {
	margin-left:20px;
}

.search-input {
	width:100px;
}

.result_ox {
	font-size: 6.2rem
}

.row .col.board{
	width:16%;
    margin-right:0.8%;
    left: auto;
    right: auto;		
}

.row .col.last{margin-right:0;}

@media only screen and (min-width: 993px) {
.row .col.thumb-list {
  width:20%;
  margin-left: auto;
  left: auto;
  right: auto;  	
}
}

.main-title{color:#1d89e4}
.main {position:relative;}
.mission-lock{position:absolute; top:0; right:0; z-index:9;}

.module-box{border-radius:14px; line-height:2.0rem; padding:1px; font-size:1.5rem;}

.mission-title {color:#333; padding:0 0 20px 0; border-bottom:3px solid #b7e5f4;}
.mission-num{color:#1d89e4;}
.mission-title img{width:51px; vertical-align:bottom; margin-right:10px;}

.coding-title {font-size:1.4rem; margin-bottom:10px;}

.mission-box {padding:30px; border-radius:16px;}
.mission-txt {line-height:3.0rem; width:100%; font-size:2.0rem;}

.mission-area{padding:20px 20px 0 20px;}
.mission-step{position:relative; margin-top:20px;}
.mission-step span{position:absolute; display:block; right:0; top:12px;}

.scratch-img{padding:10px;}
.scratch-img img{border-radius:20px; border:6px solid #c8ccd1;}
.module-img img{border-radius:16px;}
.assembly-img img{max-width:100%;}

.popup{position:relative;}
.popup h4{border:2px solid #FFF; padding:10px; line-height:2.0rem;}
.popup .close{position:absolute; right:-20px; top:-20px;}
.hint-area{padding:20px;}
.hint-area p img{width:auto;}
.hint-area span{font-size:1.4rem; line-height:1.8rem;}


@media only screen and (max-width: 992px) {
.level-block2 {
    margin-top: 20px;
  }
}

.footer-container { border-top: 1px solid #eee }
.footer-container .email-container { padding: 30px 0 }
.footer { text-align: center;}
.footer-area { background-color: #f7f9fb; border-top: 1px solid #e8eaed; padding: 44px 0 30px; }
.footer-bottom { background-color: #eef1f4; padding: 18px 0; }
.footer .footer-col { margin-bottom: 40px; }
.footer h5 { font-size:16px; margin-bottom: 18px; color: #15233b; text-transform: uppercase; letter-spacing: .3px; }
.footer p { color: #5b6b80; }
.footer a { color: #5b6b80; }
.footer a:hover { color: #1f8bf0; }
.footer-bottom p { color: #8a94a3; }
.footer .footer-share {margin-top: 30px;}
.footer .footer-share li { display: inline-block; float: none; }
.footer .footer-share a { border: 1px solid #d8dde3; border-radius: 8px; color: #8a94a3; display: block; font-size: 18px; height: 40px; line-height: 40px; margin-right: 5px; text-align: center; width: 40px; transition: all .15s; }
.footer .footer-share a:hover { background-color: #1f8bf0; border-color: #1f8bf0; color: #fff; }
.footer .fa-heart { color: #1f8bf0; font-size: 11px; margin: 0 2px; }

/* ===== 헤더 nav 톤 통일 (브랜드 블루) ===== */
nav { background-color: #1f8bf0; box-shadow: 0 2px 10px rgba(15,95,165,.18); }
.level-menu .main-menu a { transition: background .15s; border-radius: 10px; }
.level-menu .main-menu a:hover { background: rgba(255,255,255,.14); }
.level-menu .main-menu.active a { background: rgba(255,255,255,.20); }