/* 
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.2;color:#000;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;
}

.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:#000; 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.bgviolet{background:#8162fa;}
button.bgsky{background:#77bae4;}
button.bgorange{background:#ff790f;}
button.bgblue{background:#3172b4;}


/*타이틀*/
/*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;}
h6{font-size:16px; font-weight:normal;}
p{font-size:15px;}
.martopvhpc{margin-top:2vh;}
.section{padding:8vh 0;}	

.fontwhite{color:#fff;}	
/*-----------*/
.disinline{display:inline-block;}
.disblock{display:block;}



.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%; height:795px;  overflow:hidden; padding:10vw 0 0vw; text-align:center; background-size:cover; }
	.header .logo{text-align:left; position:absolute; top:1vw; left:1vw }
	.header h4.extit{ margin-top:0.5vw; color:#fff;}		
	.header .mov{width:622px; position: relative; height:323px;  background:url(../images/mov.png) ;background-size:cover; margin:3vh auto; cursor:pointer;}
	.mov video{ position:relative; width:100%; height:100%; }
	.mov .overlay { position:absolute;  bottom:10px;  right:10px;  z-index:1; color:#fff;}
	.law{position:absolute; bottom:40px; right:20%;}
	
	.flyban { position: fixed;  right: 5%;  top: 150px;  z-index: 400;  text-align: center;}
		.flyban .total{  margin-top:10px; background:none;}
		.flyban .total .total_num_area{background:url(../images/flybna_bg.png)no-repeat;  width:127px; height:241px;padding-top:40px;}
		.flyban .total .total_num_area p{font-size:14px;}
		.flyban .total .total_num{ font-family:Tahoma; font-size:27px; font-weight:bold; color:#16a762; letter-spacing:-1px;}

.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:0; right:0;  }
	.view_list .btn_view_list li{height:28px;}
	.view_list .campaign_list{ display:none; position:absolute; top:42px; right:30px;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;}
	
.section02{background:url(../images/section02_bg.png) 50% 100% repeat-x; overflow:hidden; text-align:center; padding-bottom:0;}
	.section02 h2{margin-bottom:40px;}
 .source{position:absolute;right:0; bottom:20px; color:#666666;}
	

.section03{background:url(../images/section03_bg.png) 50% 100% repeat-x; overflow:hidden; text-align:center;margin-top:-4px;}
	.section03 .role_card{margin:0 auto; text-align:center; width:100%;} 
		.section03 .role_card li{  margin:10px;text-align:center; display:inline-block;}
		.section03 h3{padding-top:1vh; }
		.section03 .source{position:absolute;right:0; bottom:-50px; color:#666666;}
	
.section04{background:#fff;}			
	.section04 .playdat li{display:inline-block; width:28%; margin:20px -1% ; padding:30px 50px; background:#ff7800; border-radius:100px; color:#fff;font-size:20px;  letter-spacing:-1px; }		
	.section04 .playdat li span{color:#fcff00;}
	.section04 .playdat li.bg_green{background:#16a661;}
	.section04 .playdat li.bg_yellow{background:#fbb732;}
	.commentto .container{padding-top:0;}	
	.commentto .comform{padding-top:20px;}
	   .commentto .comform h3{text-align:left; margin-bottom:5px; font-size:20px; /*color:#c83f2e;*/}
	   .commentto .comform .sdsdfff{width:100%; overflow:hidden; box-sizing: border-box;}
	   .commentto .comform .sdsdfff textarea{ float:left; border:1px solid #d9d9d9; padding:15px; height:94px; width:87%; font-size:14px; color:#808080; overflow:auto;box-sizing:border-box;}
	   .commentto .comform .sdsdfff .combtn { border-radius:0; float:left;color:#FFF; text-decoration:none; padding:0;font-size:14px; font-family:'Dotum';color:#FFF; background-color:#c83f2e;  width:10%;  line-height:94px;  height:94px;}
	   .commentto .comment{ margin-top:50px; text-align:left;}
	   .commentto .comment p{ padding-bottom:10px; border-bottom:1px solid #808080; font-size:14px; font-family:'Dotum';}
	   .commentto .comment .text li{ padding:20px 5px 13px 0; border-bottom:1px  solid #d9d9d9;}
	   .commentto .comment .text li .comform1{ width:100%; }
	   .commentto .comment .text li .name{ font-weight:bold; font-size:12px; font-family:'Dotum';}
	   .commentto .comment .text li .writ{  color:#666666; font-size:12px; font-family:'Dotum'; margin-top:10px; line-height:20px;}
	   .commentto .comment .text li .time{ margin-left:15px; position:relative; top:1px; font-size:11px; color:#b2b2b2; vertical-align:middle; font-weight:normal;}
	   .commentto .point_50p{font-size:15px;font-weight:normal;}	
	.commentto .comform{padding:0;}
	.commentto .comform .sdsdfff {margin-top:2vh;}
	.commentto .comform .sdsdfff textarea{height:118px;font-family:'Spoqa Han Sans', 'Source Sans Pro'; font-size:1.125em;}
	.commentto .comform .sdsdfff .combtn{height:118px; line-height:118px;background-color: #88b642;width:13%;}


/* paging */
.pagingWrap {position:relative; margin:20px 0 0 0; border:1px #d9d9d9 solid;}
.pagingWrap:after {content:"";display:block;clear:none;}
.pagingWrap .firstPrev {position:absolute; left:0; top:0;}
.pagingWrap .prev {position:absolute; left:51px; top:0;}
.pagingWrap .lastNext {position:absolute; right:0; top:0;}
.pagingWrap .next {position:absolute; right:51px; top:0;}
.pagingWrap .paging {width:100%;text-align:center;overflow:hidden;}
.pagingWrap .paging a {display:inline-block; font-size:16px; color:#999; padding:0 23px; line-height:48px; border-bottom:2px #fff solid;}
.pagingWrap .paging a.on {color:#88b642; border-bottom:2px #88b642 solid;}
.pagingWrap.mgN {}

.section05{background:#fff3de; overflow:hidden; text-align:center; }			
.section05 h5{padding:1vh 0; color:#555555;}
	.section05 .pro_plus{}
		.section05 .pro_plus li{float:left; width:48%; margin:1%; background:#fff; border-radius:10px; position:relative; height:445px;}
		.section05 .pro_plus li .pro_plusarea{padding:40px 40px 60px 40px;}
		.section05 .pro_plus li h1.tit{background:#f7b93e; padding:20px; text-align:center;border-top-right-radius:10px; border-top-left-radius:10px;}
		.section05 .pro_plus li .pro_plusarea .vod{width:100%; background:#000; height:187px; margin-top:10px;}
		.section05 .pro_plus li .pro_plusarea .vod .mov{width:300px; position:relative;  height:186px; margin:0 auto; }
		.section05 .pro_plus li .pro_plusarea .vod .mov .play{position:absolute; left:50%; transform:translateX(-50%); display:inline-block;bottom:40%}
		.section05 .pro_plus li a.plusbtn{position:absolute; bottom:-30px; display:inline-block; left:50%; transform:translateX(-50%)}
		.section05 .pro_plus li p{margin-top:20px;}


.section06{background:#c4f78b; padding:2vh 0;}

	#lean_overlay {
		position: fixed;
		z-index:500;
		top: 0px;
		left: 0px;
		height:100%;
		width:100%;
		background: #000;
		display: none;		
	}

	.modal{display:none;}
.footer{background:#363431; padding:1vw 0; color:#fff; letter-spacing:2px; font-size:14px;}	


.show_m{display:none!important;}
.hide_m{display:block!important;}
.hide_im{display:inline-block!important;}
.show_im{display:none!important;}	

@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 .logo{top:15px;  left:15px;}
	.logo img{width:100%;}

	
	
	.section{padding:12vh 0;}	
	
	.source{bottom:13px; top:auto;}
	
	.knowhow .slick-prev{left:-8%;}
	.knowhow .slick-next{right:-8%;}
	.knowhow div img{margin:0 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;}
	
	
}
@media screen and (max-width: 768px){
.section{padding:7vh 0 9vh;}
.header{padding-top:10vh; padding-bottom:8vh; height:568px; margin:0 auto; text-align:center;}
.header h1{text-align:center; margin:10vh auto 0; }

	
	
	.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;}
	
	.section02{ padding-bottom:0;}
		.section02 h2, .section03 h2, .section05 h2{ width:90%;}
		.section02 h2{margin-bottom:20px;}
	.source{position:absolute;right:0; /*top:-6vh;*/ font-size:0.7em; padding:2px;background:#fff}
		
	.section03 .bx-wrapper{margin:0 auto; text-align:center;margin-top:10px;}
	.section03 .bx-wrapper .bx-viewport{background:none;box-shadow: 0 0 0px #ccc;  border: 0px solid #fff;  left: 0px; margin:0 auto;}
	.section03 .bx-wrapper .bx-viewport li img{width:100%;}
	.section03 .role_card li{margin:0;}
	.bx-wrapper .bx-pager.bx-default-pager a{margin:0 2px; background:#a1ceb8;}
	.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active{background:#16a661;}
		
	.section04{ height:auto;}

	
	.pagingWrap {margin:10px 0 0 0;}
		.pagingWrap .firstPrev img {width:31px;}
		.pagingWrap .prev {left:32px;}
		.pagingWrap .prev img {width:31px;}
		.pagingWrap .lastNext img {width:31px;}
		.pagingWrap .next {right:32px;}
		.pagingWrap .next img {width:31px;}
		.pagingWrap .paging a {font-size:13px; padding:0 10px; line-height:29px;}
		
		.disinline{display:block;}
.disblock{display:inline-block;}

.section04 .playdat{margin-top:5px;}
.section04 .playdat li{padding:10px 20px; font-size:14px; width:100%;margin:5px 0;}

.commentto .comform .sdsdfff textarea{font-size:15px; width:100%;}
.commentto .comform .sdsdfff .combtn{width:100%; height:40px;line-height:40px;}

.section05 .pro_plus li{width:100%; height:auto; padding-bottom:20px; margin-top:10px;}
.section05 .pro_plus li .pro_plusarea .vod{height:auto;}
.section05 .pro_plus li .pro_plusarea .vod .mov{width:100%;background-size:cover; height:auto;}
.section05 .pro_plus li h1.tit img{}
.section05 .pro_plus li .pro_plusarea{padding:10px;}
.section05 .pro_plus li a.plusbtn{position:static; left:auto;transform: translateX(0%);}
.section05 .pro_plus li a.plusbtn img{width:70%;}

.law{right:auto;left:50%; transform:translateX(-50%);}

}
@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%;}
	
	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:100%; 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;}
	
	
}


@media screen and (max-width: 320px){
	.presentlist li{padding-bottom:12vw;}
	h2{font-size:20px}
	.day{font-size:28px;}
	
	
	h5{font-size:13px;}
	
	
}