/* 
Project : 
Author  : 
Date    :
*/



/* Common */
/*html, body {font-family:'Nanum Square',Dotum,sans-serif;
font-size:1em;-webkit-font-smoothing:antialiased;background:#fff;line-height:1;color:#000;font-weight:400;}*/
*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {font-family:'Spoqa Han Sans', 'Source Sans Pro', Apple SD Gothic Neo, Nanum Barun Gothic, Nanum Gothic, '???', Dotum, Verdana, Arial, sans-serif;
font-size:1em;-webkit-font-smoothing:antialiased;background:#fff;line-height:1.35;color:#000; font-weight:400;letter-spacing:0px;}

<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet">
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400');
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean');
font-family: 'Black Han Sans', sans-serif;

@font-face{
	font-family:'Black Han Sans';
	src:url('https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean');
}
@font-face {  font-family: 'Roboto';  font-style: normal;  font-weight: 100;
  src: url(../font/Roboto-Thin.woff2) format('woff2'),
       url(../font/Roboto-Thin.woff) format('woff'),
       url(../font/Roboto-Thin.otf) format('opentype');}
@font-face {  font-family: 'Roboto';  font-style: normal;  font-weight: 300;
  src: url(../font/Roboto-Light.woff2) format('woff2'),
       url(../font/Roboto-Light.woff) format('woff'),
       url(../font/Roboto-Light.otf) format('opentype');}
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 400;
   src: url(../font/Roboto-Regular.woff2) format('woff2'),
        url(../font/Roboto-Regular.woff) format('woff'),
        url(../font/Roboto-Regular.otf) format('opentype'); }
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 500;
   src: url(../font/Roboto-Medium.woff2) format('woff2'),
        url(../font/Roboto-Medium.woff) format('woff'),
        url(../font/Roboto-Medium.otf) format('opentype'); }
@font-face {   font-family: 'Roboto';   font-style: normal;   font-weight: 700;
   src: url(../font/Roboto-Bold.woff2) format('woff2'),
        url(../font/Roboto-Bold.woff) format('woff'),
        url(../font/Roboto-Bold.otf) format('opentype'); }            
			
			

img{border:0;margin:0;padding:0;max-width:100%; max-width:100%;}
a{margin:0;padding:0; text-decoration:none;}
a[name]{height:0;}

*:focus {
    outline: none;
}
.hidden { display: none; }
.fleft{float:left;}
.fright{float:right;}
.alternative{z-index: -1;width: 0;height: 0;overflow: hidden;visibility: hidden;}
.txtleft{text-align:left !important;}
.txtcenter{text-align:center !important;}
.txtright{text-align:right !important;}
.txtbold{font-weight:bold !important;}
.txtnormal{font-weight:normal !important;}
.prelative{position:relative;}
.pabsolute{position:absolute !important;}
.line_height{ line-height:0px;}
.verttop{ vertical-align:top;}
.vertbottom{ vertical-align:bottom;}
ul, li{ margin:0;}
li img { vertical-align:middle; }
.maright{ margin-right:20px;}
.total{ background-color:#f2f2f2; }
.textcolor{ color:#d9453d}

/*반응??? 공통*/

/*버튼*/
button{ background:#835e32; border:0;padding:25px 90px 25px 65px; color:#fff; margin:0 3px; border-radius:500px; letter-spacing:-1px;font-family:'Spoqa Han Sans', 'Source Sans Pro';position: relative;
-webkit-padding-before:20px;
-webkit-padding-after:20px; }
button img{ margin-left:7px;  /* -webkit-perspective: 9px;*/top: 50%;transform: translateY(-50%);position:absolute;}
button.bgblue{background:#2368dd;}
button.bgorange{background:#ff9c00;}
button.bgpink{background:#fa4874;}

/*?????????*/
/*h2{font-size:50px;}*/
h1{font-size:76px; font-family:'Black Han Sans'; letter-spacing:-6px;}
h3{font-size:30px; font-weight:normal;}
h4{font-size:22px; font-weight:normal; letter-spacing:-1px;}
h5{font-size:18px; font-weight:normal; }
.martopvhpc{margin-top:2vh;}
.section{padding:8vh 0;}
.section0{padding-top:0;}	
.sectionarea{background:#fff; width:100%; margin:2vh;  position:relative;}	
.fontwhite{color:#fff;}	
/*-----------*/




.poincolor{color:#e18006;}

/* Layout */
.container{position:relative;width:1170px;margin:0 auto; text-align:center; }
.container-fluid{position:relative;width:100%;margin:0 auto;  text-align:center;}


.header{background:url(../images/top_bg.png) 50% 95%;  overflow:hidden; padding:100px 0 70px; text-align:center; position:relative;}
.header .logo{text-align:left; position:absolute; top:1vw; left:1vw }
.header h4.extit{margin-top:-10px; }
	
.virus1{
	position:fixed;
	z-index:9;
	top:17%;
	left:9%;
	animation:ani 1s infinite alternate;  
}
@keyframes ani{
   0%{transform:translate(0,0);}
   100%{transform:translate(0,50px);}
}  	

.virus2{
	position:fixed;
	z-index:9;
	top:30%;
	right:18%;
	animation:vaani2 0.6s infinite alternate;  
}
@keyframes vaani2{
   0%{transform:translate(0,0);}
   100%{transform:translate(20px,0);}
}  
.virus3{
	position:fixed;
	z-index:9;
	bottom:20%;
	left:13%;
	animation:vaani3 0.7s infinite alternate;  
}
@keyframes vaani3{
   0%{transform:translate(0,0);}
   100%{transform:translate(30px,0);}
}  
.virus4{
	position:fixed;
	z-index:9;
	bottom:22%;
	right:10%;
	animation:vaani4 0.8s infinite alternate;  
}
@keyframes vaani4{
   0%{transform:translate(0,40px);}
   100%{transform:translate(0,0);}
}  

.floating{position:relative; position:fixed; position:fixed; top:150px; right:30px; z-index:9; width:104px;}
	.numberagg{/*margin-top:136px;*/ font-size:25px; font-weight:bold; color:#ffff99;}
	.numberagg span{font-size:17px;font-weight:normal;}
	
	.floating .promisewing{ width:104px; background:url(../images/promiseBn.png); height:144px; margin:0 auto; text-align:center; display:inline-block;}
		.floating .promisewing a{display:inline-block;}
		.floating .numberagg{margin-top:136px; font-size:25px; font-weight:bold; color:#ffff5a; background:#0060f0; padding-bottom:17px; border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
		.floating .numberagg a{display:inline-block;}
		.floating .numberagg span{font-size:17px;font-weight:normal;}
		.floating .safetyBn{width:104px; background:url(../images/safetyBn.png); height:71px; display:inline-block; margin-top:27px;}
		.floating .realtimeBn{ width:104px; margin-top:4px;display:inline-block;}
		
.floating .corobox{position:absolute; top:150px; right:127px; z-index:9;}
.coronic{ background:#fff; border:1px solid #dcdcdc; text-align:center; width:670px; height:348px;}	
	.coronic h4{font-size:28px; font-weight:bold; text-align:center; margin-top:18px;}
	.coronic .world{background:#f6f7fb; border:1px solid #eeeff0;  width:593px;  border-radius:10px; text-align:center; margin:0 auto; margin-top:7px; margin-bottom:15px;}
		.coronic .world ul{display:inline-block; width:100%; }
		.coronic .world ul li{display:inline-block; font-size:18px; width:49%; height:50px; line-height:50px;}
		.coronic .world ul li:first-child{border-right:1px solid #eeeff0; color:#ff6600;}
		.coronic .world ul li:last-child{color:#ae37e1;}
	.coronic .ratebox{text-align:center;}
		.coronic .ratebox ul{border:1px solid #eeeff0; display:inline-block; padding:30px 10px;}
			.coronic .ratebox ul li{display:inline-block; border-right:1px solid #edf0f2; padding:0 10px; width:140px;}
			.coronic .ratebox ul li:last-child{border-right:none; }
			.coronic .ratebox h3{font-size:20px; height:27px;}
			.coronic .ratebox h5{font-size:15px; height:20px;}
			.coronic .ratebox h2{font-size:29px; font-weight:700; font-family:'Roboto'; letter-spacing:-1px; margin:10px 0 7px;}
			.coronic .ratebox p{font-size:14px;}
			.coronic .ratebox .colred{color:#f11600;}
			.coronic .ratebox .colblue{color:#3e67dd;}
			.coronic .ratebox .colyello{color:#ff9a19;}


#teachpopup{width:488px; height:296px; position:relative;}
	#teachpopup .close{position:absolute;top:-28px; right:4px;}
	
.topcon{text-align:center; margin:30px 0 0;}
.topcon ul{display:inline-block;}
.topcon ul li{display:inline-block;}
.topcon ul li{display:inline-block; margin:10px 0;}
	#sdf{position:relative;}
	#info{width:377px; height:647px;}
		#info img{width:377px; height:647px; position:absolute; left:0%; top:0%;}
/*.topcon ul li a{width:377px; height:647px; background:url(https://www.kidkids.net/event/COVID19_campaign/images/top_contents.png) 0 0; display:inline-block;}
.topcon ul li a.tbtn2{background-position-x:-403px;}
.topcon ul li a.tbtn3{background-position-x:-806px;}
.topcon ul li a:hover{background-position-y:-662px;}*/
.topcon p{text-align:right; float:right; margin-right:1.4vw;margin-top: -5px; font-size:15px; color:#5e5e5e;} 

 



.view_list .btn_view_list{text-align: left; padding: 10px;  height:40px;  width: 275px;  background: #fff;  cursor: pointer;  line-height: 10px;   font-size: 15px;   font-weight: normal;position:absolute; top:1vw; right:1vw  }
	.view_list .btn_view_list li{height:28px;}
	.view_list .campaign_list{ display:none; position:absolute;   
		margin-right: 30px !important;
		margin-top: 43px !important;
		top: 1vw !important; 
		right: 1vw !important;width:275px; color:#3d3d3d; background:#fff;  padding:10px; font-size:1+px;  margin:0px 0 0 10px;  line-height:30px;z-index:999;}
	.view_list .campaign_list li{height:30px;list-style:none;}
	.view_list .campaign_list li a{color:#3d3d3d; text-decoration:none;}
	.view_list .campaign_list li a:hover{text-decoration:underline;}
	.view_list .btn_view_list li.arrow {    float: right;    display: inline-block;    margin: 3px 10px;	}
	.view_list .btn_view_list li.campaign {    font-size: 16px;    font-weight:normal;   margin: 5px 0 0 8px;    display: inline-block;    color: #3d3d3d; overflow:visible;}

.way{background:#ffe8f0;/*background:url(../images/explan_bg.png);*/ padding-top:8vh;}	
	.waytit{position:absolute; top:-47px; left:50%;transform:translateX(-50%);}
	.way h4 img{margin-right:5px; position:relative; top:4px;}	
	.way .sectionarea{margin:8vh 0; padding:6vh 0 0;}
	.wayimg {margin:0 30px 0 105px; float:left;} 
	.waytext {width:501px; padding-top:37px;}
	.waytext p{margin-left:1.5vw; font-size:19px; color:#000;}
	.waytext .poincolor{color:#f83187;}
	
	.knowhow{width:846px;margin:0 auto;}
	.knowhow div img{margin:0 10px;}
	.knowhow div span{padding:10px 20px 0; display:inline-block;}
	.way .sectionarea1{padding-bottom:4vh; margin-bottom:3vh;}
	.knowhow .slick-prev, .knowhow .slick-next{width:29px; height:49px; top:40%; }
	.knowhow .slick-prev{background:url(../images/slick-prev.png) 0 0; left:-60px;}
	.knowhow .slick-next{background:url(../images/slick-next.png) 0 0; right:-60px;}
	.knowhow .slick-prev:before, .slick-next:before{display:none;}
	
	.source{position:absolute; top:10px; right:10px;font-size:14px; color:#626262;}
/*안전교육*/
.safetydata{background:#ffeedb;}	
		.safetydata ul{float:left; margin:30px 0 0 20px;}
		.safetydata ul li{margin-top:3px;}
		.safetydata ul li:first-child{margin-top:0;}
		.safetydata ul li a{width:150px; height:47px; background:url(../images/safetydata_btn.png) 0 0; display:inline-block; }
		.safetydata ul li a.actg{background-position-x:-160px;}
		.safetydata ul li a.songg{background-position-x:-320px;}
		.safetydata ul li a.safetyg{background-position-x:-480px;}
		.safetydata ul li a.washg{background-position-x:-640px;}
		.safetydata ul li a:hover{background-position-y:-56px;}
		.safetydata .sectionarea{margin:35px 10px 30px; width:500px;display:inline-block; padding:34px 20px 20px; height:290px;}
			.safetydata p{position:relative; top:60px;}
		/*.safetydata .sectionarealeft{margin-right:20px;}*/
		.safetydata .waytit{top:-25px;}
		.safetydata .mov{width:290px; position: relative; height:210px;  background:url(../images/knowhow_mov01.png) ;  cursor:pointer; float:left;}
		.safetydata .overlay{top:10px; left:10px; right:auto;}
		.safetydata .mov2{background:url(../images/knowhow_mov02.png) ;}
		
	#lean_overlay {
		position: fixed;
		z-index:500;
		top: 0px;
		left: 0px;
		height:100%;
		width:100%;
		background: #000;
		display: none;		
	}

	.modal{display:none;}

/*교육지원*/
.eduapply{}
	.eduapply ul{display:inline-block; margin-top:30px;}
		.eduapply ul li{display:inline-block; width:50%; padding:7vh 2.6vw; float:left;}
		.eduapply .bona{height:750px;}
		.eduapply ul .lbg{background:#b4ff7d; border-top-left-radius:15px; border-bottom-left-radius:15px;}
		.eduapply ul .rbg{background:#ffff6e; border-top-right-radius:15px; border-bottom-right-radius:15px;}
		.eduapply .sub_tt{margin:0 0 20px;}
		.eduapply .daydaytt{margin:2px 0 2px; display:inline-block;}
		.eduapply .phoneimg{margin:7px 0 12px; display:inline-block;}
/*스토아영역*/
.section05mall{background:url(../images/mall_bg.png); padding:40px 0;} 
		
.footer{background:#363431; padding:1vw 0; color:#fff; letter-spacing:2px; font-size:14px;}	
	
#promise_popup{width:321px; height:232px; position:relative;}
	#promise_popup .btn{position:absolute;bottom:30px; left:50%; transform:translateX(-50%);}
	#promise_popup .close{position:absolute;top:40px; right:10px;}
	
.show_m{display:none!important;}
.hide_m{display:block!important;}
.hide_im{display:inline-block!important;}
.show_im{display:none!important;}	
.mob_only{display:none!important;}
.show_big{display:block!important;}

.cccc{float:left;}

@media screen and (max-width: 1024px){
	.container{width:90%;}
	.knowhow{width:90%;}
	.ox_pan{width:100%;}
	.ox_quiz, .dark, .score, .score .score_pan{width:100%;}
	
	
	.show_m{display:block!important;}
	.show_im{display:inline-block!important;}
	.hide_m{display:none!important;}
	.hide_im{display:none!important}
	.mob_only{display:none!important;}
	.show_big{display:block!important;}
	
	h2{font-size:40px;}
	h3{font-size:40px;}
	
	h5{font-size:16px; font-weight:normal;}
	
	.header{padding-top:13vh; padding-bottom:0vh;}
	
	.header{background:url(../images/mob_top_bg.png) ;  }
	.header h1{width:80%;}
	.header .logo{top: 2vw;  left: 2vw;}
	.logo img{width:100%;}

	#info{width:303px; height:505px;}
	#info img{width:auto; height:auto;}
	
	.section{padding:12vh 0;}	
	.explan .sectionarea{width:95%; margin:2vh auto 0; padding-bottom:2vh;}
	.explansize_area{width:90%;}
	.explan_size{float:none; width:100%; margin:0; margin-bottom:10px;}
	
	.way .sectionarea{margin:11vh 0;}
	.way .sectionarea{padding:11vh 3vw;}
	.waytext{width:95%; padding-top:0px;}
	.wayimg{margin:0 auto; float:none;}
	
	.source{bottom:13px; top:auto;}
	
	.knowhow .slick-prev{left:-8%;}
	.knowhow .slick-next{right:-8%;}
	.knowhow div img{margin:0 auto;}
	
	.safetydata .sectionarea{width:100%;height:auto;}
	.safetydata ul{float:none; margin-top:1vh; }
	
	.footer{padding:2vh 0;}
	
	button{width:50%; padding:25px 0 25px 0; text-align:center;}
	button h4{ text-align:center; margin:0 auto;}
	
	.floating{position: static; background:#f45629; width:100%; height:auto; margin-top:5vh; padding:3vh 0; }
	.promise_agg {width:100%;}
	.numberagg{margin-top:0px; background:#fff; margin:1vh 0; color:#f45629; padding:1vh 0;}
	h5.promise_agg_mob{color:#fff; font-size:18px;}
	
	.dark{top:0; left:0;}
	
	.virus img{width:70%;}
	.virus1{left:3%; top:20%;}
	.virus3{left:0;}
	.virus2{right:7%;}
	.virus4{bottom:22%; right:2%;}
	
	
}
@media screen and (max-width: 768px){
.section{padding:7vh 0;}
.mob_only{display:none!important;}
.show_big{display:block!important;}

.virus1{left:3%; top:25%;}

.header{padding-top:10vh; padding-bottom:4vh;}
.header .mov{width:100%; max-width: 623px; margin-top:3vh;background-size:cover;background-position: 50% 50%; height:auto;}
	.main-video-dimensions { width: 100%; }
	.mov video, .mov .video{}
	
	.safetydata .mov{float:none; margin:0 auto 1vh; width:100%; background-size:cover; background-position:50% 50%;height:auto;}
	button{width:90%; padding:25px 0 25px 0; text-align:center;}
	button h4{ text-align:center; margin:0 auto;}
	.way .sectionarea{margin:7vh 0 2vh;}
	.way .sectionarea{padding:6vh 2vh;}
	
	.cccc{float:none;}
	.section0{padding-top:0;}
	
	#info{width:228px; height:390px;}
	.way h2{padding:70px 0 0px;}
	.eduapply ul{margin-top: 14px;}
	.eduapply .bona {height:555px;}
	.safetydata .sectionarea{margin:0;}
	.sectionarealeft{margin:6px 0 15px!important;}
	.safetydata ul{margin:0;margin-top:35px;}
	.safetydata ul li{display:inline-block;}
	.safetydata p{position:relative; top:27px;}
	.section03_btn{margin-top:23px; display:inline-block;}
	

}


@media screen and (max-width: 602px){
	.virus img{width:50%;}
	.virus1{left:0%; top:25%;}
	
	
	#info { width: 177px; height: 303px;}
	.mob_only{display:none!important;}
	.show_big{display:block!important;}
	
	.eduapply .bona{height:388px;}
	.eduapply ul li{padding:7vh 4vw;}
	.eduapply .sub_tt{margin:-16px 0 20px;}

}
@media screen and (max-width: 480px){
	.virus img{width:65%;}
	.virus1{left:-3%; top:11%;
		animation:ani 1s infinite alternate; }
@keyframes ani{
   0%{transform:translate(0,0);}
   100%{transform:translate(0,30px);}
}  

.virus2 {
    top: 39%;
    right:7%;
    animation: vaani2 0.8s infinite alternate;
}
.virus4 {bottom: 33%;right: 58%;}
.virus3{
	bottom: 7%;
	left:77%;
animation:vaani3 0.8s infinite alternate;  
}
@keyframes vaani3{
   0%{transform:translate(0,0);}
   100%{transform:translate(0,30px);}
}  


	#teachpopup{width:90%; height:auto;}
	
	
	h2{font-size:25px;}
	h3{font-size:20px;}
	h4{font-size:16px!important; font-weight:normal; line-height:20px;}
	h5{font-size:15px;}
	.mob_only{display:block!important;}
	.show_big{display:none!important;}
	
	.logo img{width:80%;}
	.header h1{width:100%;}
	.main-video-dimensions { height:34vh; }

	h2 img{width:100%;}
	h2 img.vvv{width:73%;}
	.way .waytit{width:80%;}
	.way h2{padding:45px 0 7px;}
	
	.topcon p{margin-right:5.4vw;}
	.safetydata .sectionarea{margin:0;}
	.sectionarea{margin:0;}
	.sectionarealeft{margin:6px 0 15px!important;}
	.safetydata ul{margin:0; margin-top:35px;}
	.safetydata ul li{display:block;}
	.safetydata p{position:relative; top:27px;}
	.section03_btn{margin-top:23px; display:inline-block;}
	.eduapply .bona{height:auto;}
	.eduapply ul li{float:inherit; width:100%; padding:7vh 8vw;}
		.eduapply ul li:first-child{margin-bottom:16px;}
	.eduapply ul .lbg{border-top-right-radius:15px; border-bottom-right-radius:15px;}
	.eduapply ul .rbg{border-top-left-radius:15px; border-bottom-left-radius:15px;}
	
	
	.martopvhpc{margin-bottom:1vh;padding:0 4vw;}
	.waytext p{font-size:14px; padding:0 4vw;}
	
	
	button{width:90%; padding:20px 0 20px 0; text-align:center;}
	button h4{font-size:18px!important;  text-align:center; margin:0 auto;}
	
	.way .sectionarea1{margin-top:11vh;}
	.waytit{top:-37px;}
	.source{font-size:12px;}
	
	
	#info{width:300px; height:505px;}

}


@media screen and (max-width: 320px){
	.presentlist li{padding-bottom:12vw;}
	h2{font-size:20px}
	.day{font-size:28px;}	
	h5{font-size:13px;}
	
	.ox_quiz .ox_check .o_img a, .ox_quiz .ox_check .x_img a{width:120px; height:120px; }
	
}