/* 
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:#835e32;font-weight:400;letter-spacing:0px;}

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;}*/
h3{font-size:30px; font-weight:normal;}
h4{font-size:21px; font-weight:normal;}
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:1024px;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:6vw 0 4vw; text-align:center;  }
	.header .logo{text-align:left; position:absolute; top:1vw; left:1vw }
	.header h4.extit{ margin-top:1vw; }		
	.header .mov{width:623px; position: relative; height: 350px;  background:url(../images/mov.png) ;background-size:cover; margin:5vh auto 3vh; cursor:pointer;}
	.mov video, .mov .video{ position:relative; width:100%; height:100%; }
	.mov .overlay { position:absolute;  top:10px;  right:10px;  z-index:1; color:#fff;}

.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;}

.explan{background:url(../images/explan_bg.png);}
	.explan .sectionarea{padding:6vh 0;}
	.explansize_area{display:inline-block; text-align:center;}
	.explan_size{border:1px solid #e3dcc2; background:#fff;text-align:center; height:113px; width:400px; float:left; margin:10px; font-size:18px;}
	.exsize{background:#e3dcc2; height:100%; line-height:113px; width:30%;}
	.exsizer{text-align:center; margin:0 auto;  width:70%;}
	.exsizer span{text-align:center; margin:0 auto; margin-top:33px; display:inline-block;}
	
	.source{position:absolute; top:10px; right:10px;font-size:14px; color:#b69773;}

.way{/*background:#f9ae2c;*/background:url(../images/explan_bg.png);}	
	.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:0px 30px 0 50px; float:left;} 
	.waytext {width:470px; padding-top:50px;}
	.waytext  p{ color:#b69773;}
	.waytext .poincolor{color:#e22909;}
	
	.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;}

.safetydata{background:#5191ff;}	
		.safetydata ul{float:left; margin-left: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.safeedu{background-position-x:-160px;}
		.safetydata ul li a.page1{background-position-x:-320px;}
		.safetydata ul li a.page2{background-position-x:-480px;}
		.safetydata ul li a:hover{background-position-y:-56px;}
		.safetydata .sectionarea{margin:4vh 0px 0; width:500px; padding:; float:left; padding:40px 20px 20px; height:273px;}
		.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;}



.product{background:/*#01c826*/#fff; padding-left:50px;}
	.product ul{display:inline-block; margin-left:-20px; }
	.product li{width:241px; margin-left:20px; float:left; margin-top:10px; margin-bottom:20px; }
	.product li a{color:#835e32;}
	.product li img{border:1px solid #e5e5e5; display:inline-block;}
	.product li h5{margin-top:1vh;}
	
.footer{background:#363431; padding:1vw 0; color:#fff; letter-spacing:2px; font-size:14px;}	

.OX{background-color:#fafcd2; padding-bottom:110px;}	
	.ox_qu{text-align:center; }
	.ox_pan{position:relative; width:994px;  margin:0 auto;margin-top:2vh;}
		.ox_quiz{width:994px; background:#fff; overflow:hidden; text-align:center; margin:0 auto; padding:6vh 3vw 3vh;}
		.ox_quiz .ox_qu_tt{text-align:center; /*margin:40px 0 0 61px;*/}
		.ox_quiz .ox_check{text-align:center; margin:0 auto; display:inline-block;}
		.ox_quiz .ox_check{margin-top:10px; margin:10px auto 0; text-align:center; display:inline-block;}
		.ox_quiz .ox_check li{float:left; }
		.ox_quiz .ox_check .o_img a{width:312px; height:312px; display:inline-block; overflow:hidden; background:url(https://www.kidkids.net/event/finedust_event/images/img_o.png) 0 0; margin-right:70px;}
		.ox_quiz .ox_check .o_img a:hover{background-position:0 312px;}
		.ox_quiz .ox_check .x_img a{width:312px; height:312px; display:inline-block; overflow:hidden; background:url(https://www.kidkids.net/event/finedust_event/images/img_x.png) 0 0;}
		.ox_quiz .ox_check .x_img a:hover{background-position:0 312px;}
		.dark{position:absolute; top:0px; left:0px; width:100%; height:100%;background:url(https://www.kidkids.net/event/finedust_campaign2019/images/bg_gray.png); overflow:hidden; text-align:center; margin:0 auto;}
			.ans_panarea{float: left;  position: relative;  left: 50%; height:100%; text-align:center;}
			.dark .answer{float: left;    position: relative;   left: -50%; padding:13vh 8vw; width:100%;}
			.dark .answer li{float:left;}
			.dark .answer .ans_pan{padding:0px 30px 0 0px; width:30%;}
			.dark .answer .ans_tt{ color:#fff; font-size:21px; text-align:left;width:70%; margin-top:15px;}
			.dark .answer .ans_tt span{color:#ffd200}
			.dark .answer .ans_tt p{padding-bottom:3vh;}
		.score{background-color:#fff; width:969px;  position:absolute; top:0px; left:0px; font-size:40px; font-weight:bold;padding:5vh 3vw 3vh;}
			.score h4{ color:#000; margin:0 0 1vh 0;}
			.score input{width:265px; height:104px; border-radius:10px; font-size:70px; border:3px solid #ee5157; color:#835e32;  text-align:center; margin-right:5px;}
			.score p{display:inline-block; margin-bottom:5px; font-size:60px;}
			.score .score_pan{background-color:#f1f1f1; width:780px; height:160px; margin:0 auto; margin-top:50px;}
			.score .score_pan ul{display:inline-block; margin:0 auto; text-align:center; margin-top:24px;}
			.score .score_pan li{float:left; margin-right:40px;  text-align:center;}
			.score .score_pan .correct_answer{margin-bottom:-20px;}
			.score .score_pan p{font-size:20px; color:#000;}
			.score .score_pan p.colred{color:#b72c24;}
			
		.qz_next_btn{position:absolute; bottom:300px; right:-71px;}
	.ox_qu .period{position:absolute;  margin:10px 0 0 100px;}	
	.ox_qu .cul{font-family:'Dotum'; font-size:14px; color:#000;font-weight:normal; margin:3px 0 0 210px;}
	
	
	.floating{position:fixed; top:150px; right:30px; z-index:100;width:104px;background:url(../images/floating_01_bg.png); height:457px; margin:0 auto; text-align:center;}
		.promise_agg{width:104px;}
		.numberagg{margin-top:136px; font-size:25px; font-weight:bold; color:#ffff99;}
		.numberagg span{font-size:17px;font-weight:normal;}
		.ox_quiz_w{margin-top:50px;}
		#dust{ margin:10px auto 10px; text-align:center;}
	
.dustall .bx-wrapper .bx-viewport{
    -moz-box-shadow: 0 0 0px #ccc;
    -webkit-box-shadow: 0 0 0px #ccc;
    box-shadow: 0 0 0px #ccc;
    border:0px solid #fff;
    left:0px;
    background:0;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}	
	
.dustall .bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 30px;
    height: 51px;
    text-indent: -9999px;
    z-index: 9999;
}	
.dustall .bx-wrapper .bx-prev {
    left:-50px;
    background: url(../images/dust_info_btn_prev.png) no-repeat;
}	
.dustall .bx-wrapper .bx-next {
    right:-50px;
    background: url(../images/dust_info_btn_next.png) no-repeat;
	hover:none;
}	
.dustall .bx-wrapper .bx-next:hover {
	background-position:0;
}
	
#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;}	

.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}
	
	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%;}

	
	
	.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; }
	
	
	
	.ox_quiz{background:none; background:#fff;}
	/*.score, .dark{height:auto; top:0; left:0; border-radius: 0px; /*background:url(../images/bg_gray.png);*/
	
	.product ul{margin-left:0; display:inline-block;}
	.product li{width:22%;}
	.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;}
	.source1{bottom:-25px;}
	
	
}
@media screen and (max-width: 768px){
.section{padding:7vh 0;}
.header{padding-top:10vh; padding-bottom:0vh;}
.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;}
	
	.product li{width:43%;}
	.score input{width:60%;}
	
	.dark .answer{padding:8vh 8vw;}
	.ox_quiz .ox_check .o_img a{width:230px; height:230px; background-size:cover; margin-right:0;}
	.ox_quiz .ox_check .x_img a{width:230px; height:230px; background-size:cover;}
	.ox_quiz .ox_check .x_img a:hover, .ox_quiz .ox_check .o_img a:hover{background-position:0 0;}
	.score .score_pan li{width:18%; margin-right:2%;}
	.dark .answer .ans_tt{font-size:20px;}
	.score .score_pan{margin-top:2vh;}
		.score input{height:auto;    font-size: 40px;}
	.score p {  font-size: 20px;}
	.score .score_pan{height:auto;}
	.score .score_pan ul{margin-top:15px;}
	.score{padding:2vh;}
	
	.cccc{float:none;}
	.section0{padding-top:0;}
	

}
@media screen and (max-width: 480px){
	
	h2{font-size:25px;}
	h3{font-size:20px;}
	h4{font-size:16px!important; font-weight:normal; line-height:20px;}
	h5{font-size:15px;}
	
	.logo img{width:80%;}

	.main-video-dimensions { height: 34vh; }

	h2 img{width:80%;}
	h2 img.vvv{width:60%;}
	.way .waytit{width:80%;}
	
	.martopvhpc{margin-bottom:1vh;padding:0 4vw;}
	.explan_size{font-size:16px;}
	.explan .sectionarea{padding-bottom:3vh;}
	
	.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;}
	
	.ox_quiz .ox_qu_tt{}	
	.ox_quiz .ox_check .o_img a{width:140px; height:140px; background-size:cover; margin-right:0;}
	.ox_quiz .ox_check .x_img a{width:140px; height:140px; background-size:cover;}
	.ox_quiz .ox_check .x_img a:hover, .ox_quiz .ox_check .o_img a:hover{background-position:0 0;}
	
	.ox_quiz .ox_check{margin-top:0;}
	.dark .answer{padding:2vh 2vw;}
	.dark .answer li{float:none;}
	.dark .answer .ans_pan{text-align:center; margin:0 auto; padding:0;}
	.dark .answer .ans_tt{font-size:15px; line-height:18px; width:100%; text-align:center; margin-top:0.5vh;}
	.dark .answer .ans_pan{width:20%;}
	.btn_my_score_1{width:50%; margin:0 auto;}
	.dark .answer .ans_tt p { padding-bottom: 1vh;}
	.score input{height:auto;    font-size: 40px;}
	.score p {  font-size: 20px;}
	.score .score_pan{height:auto;}
	.score .score_pan ul{margin-top:15px;}
	.score{padding:2vh;}
	.source{font-size:12px;}

}


@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; }
	
}