@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

.red{ color: #cb9744;}
.wap_abuse{ width: 100%; height: 100%; background-color: #fff; overflow: hidden; font-size: 0;}
.abuse_contents .inner{ width: 1280px; margin: auto; position: relative; }
.abuse_contents .section{ font-family: 'Noto Sans KR', sans-serif;  position: relative; z-index: 1; width: 100%; font-size: 16px; }

.abuse_contents .float_sign_w{ position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 9;  width: 1280px; margin: auto; }
.abuse_contents .float_sign_w.on{ position: fixed;  }
.abuse_contents .float_sign{ position: absolute; top: 40px; right: 40px; width: 192px; height: 254px; background: url(../../img/abuse/sec02_participants.png) no-repeat center; background-size: cover; text-align: center;  }
.abuse_contents .float_sign .sign_top{ height: 50%; font-size: 24px; font-weight: 600; color: #fff; }
.abuse_contents .float_sign .sign_top .total{ font-size: 28px; }
.abuse_contents .float_sign .sign_bottom{ padding-top: 40px;}
.abuse_contents .float_sign .sign_bottom a{ font-size: 22px; font-weight: 600; color: #698923; text-decoration: none;  }
.abuse_contents .float_sign .sign_bottom a:hover{ color: #425a0c; }

/*seciton01*/
.abuse_contents .section01{ height: 1814px; padding-top: 445px; box-sizing: border-box; overflow: hidden; }
.abuse_contents .section01 .bg01{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec01_bg01.jpg) no-repeat center; background-size: cover;}
.abuse_contents .section01 .bg02{ position: absolute; top: 0; right: 50%; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec01_bg02.png) no-repeat center; background-size: cover;}
.abuse_contents .section01 .bg03{ position: absolute; top: 0; left: 50%; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec01_bg03.png) no-repeat center; background-size: cover;}
.abuse_contents .section01 .txt_w{ margin-bottom: 150px; }
.abuse_contents .section01 .txt_w p{ font-size: 24px; color: #fff; text-align: center; line-height: 1.5; } 
.abuse_contents .section01 .txt_w p .yellow{ color: #ffe67b; }
.abuse_contents .section01 .press_w{ position: relative;  width: 100%; height: 250px; margin-bottom: 150px; }
.abuse_contents .section01 .press_w .press_img01{ opacity: 0; position: absolute; top: 0; left: 40px; }
.abuse_contents .section01 .press_w .press_img02{ opacity: 0; position: absolute; top: 0; right: 40px; }
.abuse_contents .section01 .press_w .press_img03{ opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.abuse_contents .section01 .press_w .press_img04{ opacity: 0; position: absolute; bottom: 0; left: 40px; }
.abuse_contents .section01 .press_w .press_img05{ opacity: 0; position: absolute; bottom: 0; right: 40px; }
.abuse_contents .section01 .graph_w{ text-align: center; }
.abuse_contents .section01 .graph_w .graph_tit{ display: block; font-size: 36px; font-weight: 600; color: #fff; margin-bottom: 30px; }
.abuse_contents .section01 .graph_w .graph{ display: inline-block; position: relative; margin-bottom: 30px;  }
.abuse_contents .section01 .graph_w .graph div.graph_body{ position: inherit; }
.abuse_contents .section01 .graph_w .graph div.graph_line{ overflow: hidden; position: absolute; top: 0; left: 0; width: 0;}
.abuse_contents .section01 .graph_w .graph div.graph_now{ overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0;}
.abuse_contents .section01 .graph_w .graph div img{ }
.abuse_contents .section01 .graph_w .graph_txt{ font-family: 'Nanum Myeongjo', serif; font-size: 24px; font-weight: 400; color: #fff; line-height: 1.5; }
/*애니메이션 적용*/
.abuse_contents .section01.on .bg02{ animation: showBgRight 1.5s forwards; }
.abuse_contents .section01.on .bg03{ animation: showBgLeft 1.5s 1s forwards; }
.abuse_contents .section01 .press_w.on .press_img01{ animation: fade 1s forwards; }
.abuse_contents .section01 .press_w.on .press_img02{ animation: fade 1s 0.3s forwards; }
.abuse_contents .section01 .press_w.on .press_img03{ animation: fade 1s 0.6s forwards; }
.abuse_contents .section01 .press_w.on .press_img04{ animation: fade 1s 0.9s forwards; }
.abuse_contents .section01 .press_w.on .press_img05{ animation: fade 1s 1.2s forwards; }
.abuse_contents .section01 .graph_w .graph.on div.graph_line{ animation: showRight 1.5s forwards;  }
.abuse_contents .section01 .graph_w .graph.on div.graph_now{ animation: fade 0.5s 1s forwards; }
@keyframes showBgLeft{
	0%{ left: 50%; }
	100%{ left: 0; }
}
@keyframes showBgRight{
	0%{ right: 50%; }
	100%{ right: 0; }
}
@keyframes fade{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}
@keyframes showRight{
	0%{ width: 0; }
	100%{ width: 100%; }
}


/*section02*/
.abuse_contents .section02 {  overflow: hidden; position: relative; }
.abuse_contents .section02 .bg01{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec02_bg01.jpg) no-repeat center; background-size: cover;}
.abuse_contents .section02 .bg02{ position: absolute; top: 0; left: 50%; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec02_bg02.png) no-repeat center; background-size: cover;}
.abuse_contents .section02 .sec_con{ display: table; overflow: hidden; position: relative; width: 100%; height: 810px; text-align: center; }
.abuse_contents .section02 .txt_w{ display: table-cell; vertical-align: middle; }
.abuse_contents .section02 .txt_w .tit{ font-size: 28px; font-weight: 400; color: #fff; text-shadow: 0px 1px 12px #222; }
.abuse_contents .section02 .txt_w .tit .tit_em{ font-size: 36px; font-weight: 500; }
.abuse_contents .section02 .txt_w .tit .yellow{ font-size: 42px; font-weight: 600; color: #ffe67b; }
.abuse_contents .section02 .txt_w .txt_con{ font-family: 'Nanum Myeongjo', serif; font-size: 24px; font-weight: 400; color: #fff; line-height: 1.5; }
.abuse_contents .section02 .txt_w .txt_con .txt01{ display: block; color: #ddd; margin-bottom: 20px; }
.abuse_contents .section02 .txt_w .txt_con .txt02{ display: inline-block; padding: 20px 30px; border: 1px solid #fff; font-size: 28px;  }
.abuse_contents .section02 .txt_w .txt_con .txt02 .yellow{  font-family: 'Noto Sans KR', sans-serif; color: #d9e021; font-weight: 500; text-shadow: 0px 1px 12px #222; }
.abuse_contents .section02 .txt_w .txt_con .txt02 .fade{  opacity: 0; }
.abuse_contents .section02 .txt_w .txt_con .txt03{ display: inline-block; margin-top: 20px; line-height: 2; border-bottom: 1px solid #fff;  }
.abuse_contents .section02 .bottom_w{ width: 100%; padding: 15px; box-sizing: border-box; background-color: #ccc; }
.abuse_contents .section02 .bottom_w p{ font-size: 24px; color: #000; text-align: center; line-height: 1.3; margin: 0; }
.abuse_contents .section02 .bottom_w p span{ font-weight: 700;}
/*애니메이션 적용*/
.abuse_contents .section02.on .bg02{ animation: showBgLeft 1.5s forwards; }
.abuse_contents .section02.on .fade01{ animation: fade 1s 1.2s forwards; }
.abuse_contents .section02.on .fade02{ animation: fade 1s 1.6s forwards; }



/*seciton03*/
.abuse_contents .section03{ height: 1376px; padding: 150px 0; box-sizing: border-box; text-align: center; }
.abuse_contents .section03 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url(../../img/abuse/sec03_bg.jpg) no-repeat center; background-size: cover;}
.abuse_contents .section03>.txt_w{}
.abuse_contents .section03>.txt_w .tit{ display: inline-block; margin: 0 0 10px;; padding: 10px 60px; border-radius: 30px; background: #7c9900; font-size: 32px; font-weight: 600; color: #fff; }
.abuse_contents .section03>.txt_w .txt{ font-family: 'Nanum Myeongjo', serif; font-size: 22px; font-weight: 700; color: #5f4a2e; line-height: 1.5; }
.abuse_contents .section03 .progress_w{ margin: 30px 0; }
.abuse_contents .section03 .progress_num_w{ overflow: hidden; width: 867px; margin: 20px auto 10px; }
.abuse_contents .section03 .progress_num_w .progress_num{ float: left; font-size: 28px; font-weight: 600; color: #463621;  }
.abuse_contents .section03 .progress_num_w .progress_num .now{ color: #cb9744;  }
.abuse_contents .section03 .progress_num_w .progress_per{ float: right; font-size: 28px; font-weight: 600; color: #678200;    }
.abuse_contents .section03 .progress_bar{ position: relative; width: 867px; height: 36px; margin: auto; background: #fff; border-radius: 30px; overflow: hidden; }
.abuse_contents .section03 .progress_bar .progress{ position: absolute; top: 0; left: 0; height: 100%; background: #cb9744; border-radius: 30px;  }
.abuse_contents .section03 .way_w{ position: relative; width: calc(100% - 200px); margin: 40px 100px 20px;  }
.abuse_contents .section03 .way{ width: 100%; padding: 40px; box-sizing: border-box; border-radius: 50px; background-color: rgba(225,230,213,0.8); border: 10px solid rgba(103,130,0,0.5);  }
.abuse_contents .section03 .way .txt_w{ color: #513b37;}
.abuse_contents .section03 .way .txt_w .tit{ }
.abuse_contents .section03 .way .txt_w .sub_tit{ font-size: 22px; font-weight: 700;}
.abuse_contents .section03 .way .privacy_w input{ height: 45px; padding: 5px 10px; box-sizing: border-box; border: 0; background-color: #fff; font-size: 18px; }
.abuse_contents .section03 .way .privacy_w .input_name{ width: 150px; }
.abuse_contents .section03 .way .privacy_w .input_phone{ width: 310px; }
.abuse_contents .section03 .way .privacy_w .input_mail{ width: 410px; }
.abuse_contents .section03 .way .sign_w{ padding: 10px 0; font-size: 16px; font-weight: 600; color: #333;}
.abuse_contents .section03 .way .sign_w span a{ text-decoration: none; font-size: 16px; font-weight: 600; color: #333;}
.abuse_contents .section03 .way .sign_w span a:hover{ color: #666; }
.abuse_contents .section03 .way .submit_w{ padding: 20px 0 10px; }
.abuse_contents .section03 .way .submit_w .btn_submit{ width: 300px; height: 60px; border-radius: 5px; border: 0; background-color: #7C9900; font-size: 28px; font-weight: 600; color: #fff; }
.abuse_contents .section03 .way .submit_w .btn_submit:hover{ background-color: #5f7500; }
.abuse_contents .section03 .way_bottom{ display: block; margin-top: 20px; font-size: 16px; font-weight: 400; color: #5A6617; opacity: 0.8;}

.abuse_contents .section03 .way_popup{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px; box-sizing: border-box; background-color: rgba(255,255,255,0.9); border: 10px solid #73a000;  }
.abuse_contents .section03 .way_popup .btn_close{ cursor: pointer; position: absolute; top: 20px; right: 30px; width: 30px; height: 30px;}
.abuse_contents .section03 .way_popup .btn_close .line{ position: absolute; top: 15px; left: 0; width: 100%; height: 3px; background-color: #000; border: none;}
.abuse_contents .section03 .way_popup .btn_close .line01{ transform: rotate(45deg); }
.abuse_contents .section03 .way_popup .btn_close .line02{ transform: rotate(-45deg); }
.abuse_contents .section03 .way_popup .txt_w{ color: #333;}
.abuse_contents .section03 .way_popup .txt_w .tit{ font-size: 26px; font-weight: 700;}
.abuse_contents .section03 .way_popup .txt_w .tit strong{ font-size: 28px; font-weight: 700; color: #73a000;}
.abuse_contents .section03 .way_popup .txt_w .txt{ font-family: 'Nanum Myeongjo', serif; font-size: 22px; font-weight: 700; line-height: 1.8;}
.abuse_contents .section03 .sns_w ul{ position: relative; display: inline-block; padding: 10px 20px; background-color: #f5ffd7; border-radius: 15px; border: 3px solid #73a000; border-style: dashed; }
.abuse_contents .section03 .sns_w ul li{ float: left; margin-right: 10px; }
.abuse_contents .section03 .sns_w ul li:nth-child(4){ margin-right: 0; }
.abuse_contents .section03 .sns_w ul li:nth-child(5){ position: absolute; left: 0; bottom: -40px; width: 100%;}
.abuse_contents .section03 .sns_w ul li:nth-child(5) #copy_input{ padding: 5px;}
.abuse_contents .section03 .sns_w ul li:nth-child(5) #copy_url{ border: 0;background-color: #73a000;color: #fff;margin-left: 10px;padding: 5px 10px;font-size: 14px;}
.abuse_contents .section03 .sns_w .bubble{ display: block; width: 205px; height: 65px; margin: 20px auto 10px; background: url(../../img/missing/icon_sns_bubble.png) no-repeat center; background-size: cover; }


/*seciton04*/
.abuse_contents .section04{ width: 100%; height: auto; padding: 50px 0; background-color: #d1d4cd; text-align: center; }
.abuse_contents .section04 .btn_w .btn_link{ display: inline-block; padding: 20px 40px; background-color: #7c9900; border-radius: 8px; font-size: 28px; font-weight: 600; color: #fff; text-decoration: none; }
.abuse_contents .section04 .btn_w .btn_link:hover{ background: #5f7500; }
.abuse_contents .section04 .btn_w .btn_link a{display: block; }

/*seciton05*/
.abuse_contents .section05{ width: 100%; height: auto; padding: 30px 0 50px; background-color: #8a766d; text-align: center; }
.abuse_contents .section05 .txt_w p{ font-size: 24px; font-weight: 600; color: #fff;}
.abuse_contents .section05 .sns_bottom{ text-align: center;}
.abuse_contents .section05 .sns_bottom .sns_w .txt{ display: block; font-size: 28px; font-weight: 600; color: #fff;  }
.abuse_contents .section05 .sns_bottom .sns_w ul{ display: inline-block; overflow: hidden; background-color: rgba(117,76,36,0.2); border: 0; border-radius: 50px; margin-top: 20px; padding: 10px 80px; }
.abuse_contents .section05 .sns_bottom .sns_w ul li{ float: left; margin-right: 10px; }
.abuse_contents .section05 .sns_bottom .sns_w ul li:nth-child(4){ margin-right: 0; }
.abuse_contents .section05 .sns_bottom .sns_w ul li a{ display: block; width: 55px; }
.abuse_contents .section05 .sns_bottom .sns_w ul li a img{ width: 100%; }
.abuse_contents .section05 .sns_bottom .sns_w ul li:last-child{ display: block; float: none; margin-right: 0; }
.abuse_contents .section05 .sns_bottom .sns_w ul li:last-child input{ background-color: rgba(255,255,255,0.2); border: 0; box-shadow: 0 0 black; padding: 6px 5px; color: #563c26; }
.abuse_contents .section05 .sns_bottom .sns_w ul li:last-child button{ background-color: rgba(117,76,36,0.5); border: 0; color: #fff; vertical-align: middle; padding: 5px 10px;}

.abuse_contents .way_privacy{ display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 99; background-color: rgba(0,0,0,0.8); }
.abuse_contents .way_privacy .content{ width: 900px; height: calc(100vh - 200px); margin: 100px auto; background-color: #fff; }
.abuse_contents .way_privacy .wap_introduce{ width: 100%}
.abuse_contents .way_privacy table{ width: 100%}
.abuse_contents .way_privacy .content .con_top{ width: 100%; height: 40px; background-color: #999; }
.abuse_contents .way_privacy .content .con_top .close{ position: relative; width: 50px; height: 40px; padding: 5px; box-sizing: border-box; float: right;}
.abuse_contents .way_privacy .content .con_top .close .line{ position: absolute; top: 18px; left: 7px; width: 45%; height: 1px; background-color: #fff; border: 0; }
.abuse_contents .way_privacy .content .con_top .close .line01{ transform: rotate(45deg);}
.abuse_contents .way_privacy .content .con_top .close .line02{ transform: rotate(-45deg);}
.abuse_contents .way_privacy .content .con_top .close:hover{ background-color: #73a000}
.abuse_contents .way_privacy .content .con{ width: 100%; height: calc(100% - 40px);  padding: 20px; box-sizing: border-box; overflow: auto;  font-size: 16px; color: #222;}