@charset "utf-8";

/* Link normalize CSS */
@import url(normalize.css-master/normalize.css);

/* font load */
/* @import url(Nanumsquare-master/nanumsquare.css); */
@import url(nanumGothicV4.css);

*{
	font-family: Nanum Gothic,dotum,'Noto Sans KR',"맑은 고딕",sans-serif,dotum,굴림,'Spinnaker',gulim,Vertical,Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -moz-font-feature-settings:"liga", "kern";
    font-weight:400;
}

*{margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;}

a {
	text-decoration:none
}



#bgwrap{display:block;width:100%;height:100%;position:relative;
	}
#bgwrap .bgwrap-box{
	display:block;width:100%;height:90%;position:relative;
	background:url(../images/bg.png) 50% 70% no-repeat;background-size:cover;}
#bgwrap #topmenu-box{position:absolute;top:15px;right:15px;z-index:100;}
#bgwrap #topmenu-box ul {}
#bgwrap #topmenu-box ul li {display:block;float:left;font-size:12px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;}
#bgwrap #topmenu-box ul li a {color:#FFFFFF;}
#bgwrap #topmenu-box ul li a:hover,
#bgwrap #topmenu-box ul li a:active {color:#FFFFFF;}
#bgwrap #topmenu-box ul li a.homelink{color:#000000;color:#FFFFFF;}
#bgwrap #topmenu-box ul li a.education{color:#87B02E;color:#FFFFFF;}
#bgwrap #topmenu-box ul li a.shopping{color:#2495d2;color:#FFFFFF;}
#bgwrap #topmenu-box ul li span {display:inline-block;padding:0 7px;font-size:10px;font-weight:normal;color:#FFFFFF;}

#bgwrap #content-box-wrap{
	  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%; }
#bgwrap #content-box{position:absolute;right:30px;bottom:100px;bottom:10vh;}

#bgwrap #content-box{min-width:633px;}
#bgwrap #content-box #title-box{margin-top:113px;margin-top:0px;}
#bgwrap #content-box #link-box{margin-top:53px;margin-left:45px;position:relative;}
#bgwrap #content-box #link-box ul {;margin:0;padding:0;list-style:none}
#bgwrap #content-box #link-box ul li{float:left;width:243px;height:357px;position:relative;
	-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.4);
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.4);
	
	}
#bgwrap #content-box #link-box ul li a{display:inline-block;width:100%;}
#bgwrap #content-box #link-box .overbox{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  z-index: 10;
}
#bgwrap #content-box #link-box .overbox .over-titlebox{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 60px;
  padding: 0 32px;
}
#bgwrap #content-box #link-box .overbox .over-title{
	display:none;color:#FFFFFF;line-height:13px;
	font-size:13px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;}

#bgwrap #content-box #link-box ul.hover li:not(.hover) .overbox{
	visibility: visible;opacity:0.5;background-color:rgba(0,0,0,0.5);transform: scale(1);}

#bgwrap #content-box #link-box li .bgbox{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
	background-color:rgba(0,0,0,1);
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	opacity: 1;
    visibility: visible;
	 transform: scale(1);
	-webkit-animation-name: inboxhover;
	-webkit-animation-duration: 0.3s;
	        animation-name: inboxhover;
	        animation-duration: 0.3s;
}
#bgwrap #content-box #link-box li.hover .bgbox{
    transform: scale(1.05);
	-webkit-animation-name: outboxhover;
	-webkit-animation-duration: 0.3s;
	        animation-name: outboxhover;
	        animation-duration: 0.3s;
}
#bgwrap #content-box #link-box ul.hover li:not(.hover) .bgbox{
	transform: scale(1);	
}

@-webkit-keyframes outboxhover {
  0% {
    transform: scale(1);}
  100% {
    transform: scale(1.05);}
}

@keyframes outboxhover {
  0% {
    transform: scale(1);}
  100% {
    transform: scale(1.05);}
}

@-webkit-keyframes inboxhover {
  0% {
    transform: scale(1.05);}
  100% {
    transform: scale(1);}
}

@keyframes inboxhover {
  0% {
    transform: scale(1.05);}
  100% {
    transform: scale(1);}
}


#bgwrap #content-box #link-box li:hover .overbox .over-title{display:block;}
#bgwrap #content-box #link-box li#edulink:hover .overbox{background-color:#339fd0;}
#bgwrap #content-box #link-box li#shoplink:hover .overbox{background-color:#83b84c;}
#bgwrap #content-box #link-box .contbox{position:absolute;z-index:9;width:100%;}
#bgwrap #content-box #link-box .link-titlebox{text-align:center;margin-top:26px;height:45px;}
#bgwrap #content-box #link-box .link-titlebox img{max-height:45px;}
#bgwrap #content-box #link-box .link-icon{text-align:center;margin-top:50px;height:85px;}
#bgwrap #content-box #link-box .link-icon img{max-height:85px;}
#bgwrap #content-box #link-box #shoplink .link-icon img{max-height:85px;}
#bgwrap #content-box #link-box .link-button{
	min-width:130px;
	display:table;
	margin:0 auto;
	margin-top:50px;
	height:30px;line-height:30px;
	font-size:12px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;
	border:1px solid #FFFFFF;
	color:#FFFFFF;
	vertical-align:middle;
	position:relative;
	-webkit-backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale;
	text-align:center;
	
}
#bgwrap #content-box #link-box .link-titlebox2{text-align:center;margin-top:5px;color:#FFFFFF;
font-size:12px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;}
#bgwrap #content-box #link-box #edulink,#bgwrap #content-box #link-box #edulink .bgbox{
	background-color:#339fd0;background:url(../images/box_bg.png) 50% 100% no-repeat #339fd0;}
#bgwrap #content-box #link-box #shoplink{background-color:#83b84c;margin-left:36px;}
#bgwrap #content-box #link-box #shoplink .bgbox{background-color:#83b84c;background:url(../images/box_bg.png) 50% 100% no-repeat #83b84c;}

#bgwrap footer{position:absolute;bottom:0px;width:100%;}
#bgwrap #footer {display:block;position:relative;width:100%;background:#a59b9c;border:0px none;z-index:100;overflow:hidden;}
#bgwrap #footer #copyright {display:block;padding:25px 0px;font-size:12px;color:#FFFFFF;line-height:18px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;text-align:center;}
#bgwrap #footer #copyright a {color:#dcdcdc;}


@media screen and (max-height:745px){

	#bgwrap #content-box #link-box{margin-top:7vh;}
}



#bgwrap-mobile{display:none;width:100%;height:100%;position:relative;}
@media screen and (max-width:767px){
	#bgwrap{display:none;}
	#bgwrap-mobile{display:block;}
	
	.intro-wrapper {
		width:100%;
		height:100%;
		min-height:500px;
		position:fixed;
		top:0;
		left:0;
		right:0;
		-webkit-transition:all .6s ease;
		-moz-transition:all .6s ease;
		-ms-transition:all .6s ease;
		-o-transition:all .6s ease
	}
	
	.intro-wrapper .intro-shopping-side,.intro-wrapper .intro-education-side {
		width:100%;
		height:50%
	}
	.intro-wrapper .intro-education-side {
		top:0;
		background-color:#339fd0;http://joyschooledu.com/r2017/shopping/
	}
	.intro-wrapper .intro-shopping-side {
		bottom:0;
		top:auto;
		background-color:#83b84c;
	}
	.intro-shopping-side,.intro-education-side {
		width:50%;
		height:100%;
		position:absolute;
		top:0;
		color:#fff
	}
	.intro-shopping-side .block-link,.intro-education-side .block-link {
		display:block;
		width:100%;
		height:100%;
		background-size:100%;
		background-position:center center;
	/*	background-repeat:no-repeat; */
		-webkit-transition:all .25s ease-in;
		-moz-transition:all .25s ease-in;
		-ms-transition:all .25s ease-in;
		-o-transition:all .25s ease-in
		transition:all .25s ease-in;
	}
	.intro-shopping-side .intro-content,.intro-education-side .intro-content {
		position:absolute;
		left:50%;
		padding:0 1em;
		width:50%;
		cursor:pointer;
		-webkit-transform:translateY(-50%)translateX(-50%);
		transform:translateY(-50%)translateX(-50%);
		z-index:5
	}
	.intro-shopping-side .content-icon,.intro-education-side .content-icon {
		width:100%;
		position:absolute;
		left:50%;
		top:0;
		margin-top:-140px;
		-webkit-transition:all .15s ease-out;
		-moz-transition:all .15s ease-out;
		-ms-transition:all .15s ease-out;
		-o-transition:all .15s ease-out;
		transition:all .15s ease-out;
	}
	.intro-shopping-side .content-icon img,.intro-education-side .content-icon img {
		width:100%;
		height:auto
	}
	.intro-shopping-side .sides,.intro-education-side .sides {
		display:block;
		width:100%;
		height:100%;
		position:relative
	}
	.intro-shopping-side .screen-overlay,.intro-education-side .screen-overlay {
		position:absolute;
		top:0
	}
	.intro-shopping-side a .button,.intro-education-side a .button {
		color:#fff
	}
	.intro-shopping-side .block-link:hover .intro-content .content-icon,.intro-education-side .block-link:hover .intro-content .content-icon {
		margin-top:-140px;
		-webkit-transform:scale(1.1);
		-moz-transform:scale(1.1);
		-ms-transform:scale(1.1);
		-o-transform:scale(1.1)
	}
	.intro-education-side {
		left:0
	}
	.intro-education-side .intro-content {
		top:55%
	}
	.intro-education-side .content-icon {
		max-width:84px;
		margin-left:-42px
	}
	.intro-education-side .screen-overlay {
		left:40px;
		right:0;
		bottom:80px;
	}
	.intro-shopping-side {
		right:0
	}
	
	.intro-wrapper .intro-shopping-side #intro-shopping .intro-content {
		top:60%
	}
	.intro-wrapper .intro-shopping-side #intro-shopping .intro-content .content-icon,.intro-wrapper .intro-education-side #intro-education .intro-content .content-icon {
		width:60px;
		margin-left:-30px
	}
	.intro-wrapper .intro-education-side #intro-education .intro-content .content-icon,.intro-wrapper .intro-education-side #intro-education .intro-content:hover .content-icon {
		margin-top:-70px
	}
	.intro-wrapper .intro-shopping-side #intro-shopping .intro-content .content-icon,.intro-wrapper .intro-shopping-side #intro-shopping .intro-content:hover .content-icon {
		margin-top:-70px
	}
	.intro-content .section-text,.section-content .section-text {
		width:100%;
		max-width:190px;
		padding-bottom:45px;
		border-bottom:1px solid #FFFFFF;
		margin:25px auto 169px;
		opacity:.7
	}

	.intro-content .section-text,.section-content .section-text {
		padding-bottom:0px;
		border-bottom:0px;
		margin:25px auto;
	}
	
	.intro-content img {
		border:0;
		max-width:100%;
		height:auto;
		-ms-interpolation-mode:bicubic;
		display:inline-block;
		vertical-align:middle
	}
	
	.link-titlebox{text-align:center;height:45px;}
	.link-titlebox img{max-height:45px;}
	.link-icon{text-align:center;margin-top:50px;height:85px;}
	.link-icon img{max-height:85px;}
	
	.link-button{
		min-width:130px;
		display:table;
		margin:0 auto;
		margin-top:30px;
		height:30px;line-height:30px;
		font-size:12px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;
		border:1px solid #FFFFFF;
		color:#FFFFFF;
		vertical-align:middle;
		position:relative;
		-webkit-backface-visibility:hidden;
		-moz-osx-font-smoothing:grayscale;
		text-align:center;
		
	}

	.link-titlebox2{
		text-align:center;margin-top:5px;color:#FFFFFF;
		font-size:12px;font-family:'Dotum','돋움',Nanum Gothic,Helvetica,sans-serif;letter-spacing:-0.5px;
	}
	
	@media screen and (min-width:0em)and (max-width:39.9375em) {
		.intro-content .section-text,.section-content .section-text {
			max-width:120px
		}
	}
}