@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic:wght@400;800&display=swap');

@font-face{
    font-family: 'CookieRunOTF-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/CookieRunOTF-Bold00.woff') format('woff');
    font-weight: normal;
    font-style: normal;}   

body,h1,h2,h3,h4,h5,h6,p,ul,li,button{
	margin:0; padding:0;
	list-style:none;
	border:0;}
img{border:0;}
button{border:0; cursor:pointer;}

body{
	font-family: 'Nanum Gothic', 'Roboto', sans-serif;
    font-size:18px;
	background:#000; color:#fff;}

.header_wrap, .section_wrap, .footer_wrap{
	width:1100px; margin:0 auto;}


#header{
		position:fixed; z-index:1;
		left:0; top:0;
		width:100%;
	/* ↑ 원페이지 형식에 콘텐츠 이용시 헤더 영역을 고정형태로 제공*/
	
		overflow:hidden;
	
	height:80px;
	background:rgba(0,0,0,0.7);
	border-bottom:1px solid rgba(255,255,255,0.6);}
.header_wrap{height:80px;}

h1 button{
	height:80px;
	background:none; color:#fff;}

.gnb li{float:left;}
.gnb li button{
	margin:20px; padding:5px 10px;
    font-family: 'CookieRunOTF-Bold';
    font-size:20px;
	background:none; color:#f26622;}
.gnb li button:hover{
    opacity:0.4;}


#container{clear:both; margin-top:80px;}
#container h2{
    padding:40px 0; color:#F26622;
	font-family: 'CookieRunOTF-Bold';
	font-size:45px;
	text-align:center;
	text-shadow:1px 1px 2px rgba(0,0,0,0.7);}

#container section{height:1000px;}

.install{background:url(../images/bg_install.jpg) no-repeat center top/cover fixed;}
.install p{
    width:1000px; margin:0 auto;
    padding-top:40px;
    text-align:center; line-height:30px;
    border-top:1px solid #f26622;}
.install h3{
    margin-top:100px;
    font-size:32px; color:#f26622;
	font-family: 'CookieRunOTF-Bold';
    text-align:center;
    text-shadow:1px 1px 2px rgba(0,0,0,0.7);}
.install li{
	float:left;
	margin:50px 150px;}


.campaign_info{background:url(../images/bg_info.jpg) no-repeat center top/cover fixed;}
.campaign_info p:not(:nth-of-type(4)){
	float:left;
	margin:100px 100px 50px 100px;}
.campaign_info p:nth-of-type(4){
	text-align:center;
    line-height:30px;
	clear:both;}


.how_to table{text-align:center; margin:0 auto;}
.how_to td{width:360px;}
.how_to tr:nth-child(2){
    height:100px;
	font-size:30px; color:#f26622;
    font-family: 'CookieRunOTF-Bold';
	font-weight:bold;}
.how_to tr:nth-child(3){line-height:26px;}


.closeup{width:1000px; height:300px; overflow:hidden; margin-bottom:50px;}
.closeup{margin:0 auto;}

.news_slide{
	overflow:hidden;
	width:1000px; height:300px; margin:0 auto;}
.news_list{
    margin-top:60px;
	width:4000px; height:300px;}
.news_list li{
	float:left;
	width:1000px; height:300px;
	text-align:center;}
.news_list h3{
	font-size:30px; color:#f26622;
	font-family: 'CookieRunOTF-Bold';}
.news_list p{
	margin-top:120px; line-height:30px;}

.news_btn{
	position:absolute; left:50%;
	margin:-230px 0 0 -500px;
	width:1000px; height:55px;}
.news_btn li:first-child{
	float:left;
	width:30px; height:55px;
	background:url(../images/btn_news_before.gif) #000;}
.news_btn li:last-child{
	float:right;
	width:30px; height:55px;
	background:url(../images/btn_news_after.gif) #000;}
.news_btn button{
	width:30px; height:55px;
	background:none; color:rgba(0,0,0,0);}

.news_shortcut{
	position:absolute; left:50%;
	margin:-340px 0 0 -500px;
	width:1000px; height:20px;
	background:url(../images/bg_newsshortcut.gif) #000;}
.news_shortcut li{float:left;}
.news_shortcut button{
	width:20px; height:20px;
	border-radius:10px;
	background:#fff;}
.news_shortcut button:hover{background:#f26622;}
.news_shortcut li:not(:last-child){margin-right:306px;}
.news_shortcut span{display:none;}

.ns0{background:url(../images/ns1.png) no-repeat #000;}
.ns1{background:url(../images/ns2.png) no-repeat #000;}
.ns2{background:url(../images/ns3.png) no-repeat #000;}
.ns3{background:url(../images/ns4.png) no-repeat #000;}


.adoption{background:url(../images/background_adoption.gif) no-repeat right bottom fixed #f26622;}
#container .adoption h2{
	padding:50px 0px;
	text-align:left; color:#000;
	line-height:55px;}
.adoption p{
	width:700px;
	line-height:30px;
	border-top:2px solid #000;
	padding-top:50px;}
.adoption li{float:left; margin:50px 50px 0 0;}
.adoption li:hover{opacity:0.4;}

.top_btn{
	width:40px; height:40px;
	position:fixed;
	left:50%; bottom:10px;
	margin-left:510px;}

.top_btn button{
	width:40px; height:40px;
	color:rgba(0,0,0,0);
	background:url(../images/top_btn.gif) #f26622;
    box-shadow:1px 1px 2px rgba(0,0,0,0.7);}

#footer{height:100px;}
.footer_wrap>p{float:left;}
.footer_wrap p:first-child{margin-top:18px;}
.footer_wrap p:last-child{margin:42px 0 0 20px;}