@charset "utf-8";
@font-face{
	font-family:'ssro';
	src:url('./font/establish Retrosans.ttf') format('truetype');
}
@font-face{
	font-family:'jalnan';
	src:url('./font/Jalnan.ttf') format('truetype');
}
@font-face{
	font-family:'dream3';
	src:url('./font/SCDream3.otf') format('truetype');
}
@font-face{
	font-family:'dream7';
	src:url('./font/SCDream7.otf') format('truetype');
}

/**/
html{
	scroll-behavior: smooth;
}
#wrap { width:100%; height:100%; margin:0;padding:0;}
#wrap .gpweb{margin-bottom:50px;}

/*Top CSS*/
.cssTop{
	height:80px;
	text-align: center;
	width:100%;
	margin-top:20px;
	font-family: dream3;
	vertical-align: middle;
	position: relative;
}   
.cssTopMenu{
	height:80px;
	width:80vw;
	text-align: center;
	position: absolute;
	left:50%;
	transform:translate(-50%);
}   
.cssTopLeftDiv{
	height:70px;
	width:30%;
	text-align: right;
	float:left;
}
.cssTopRightDiv{
	position:relative;
	height:70px;
	width:70%;
	float:left;
}
.cssTopRightTopDiv{
	position:absolute;
	height:40px;
	right:0; 
}
.cssEZBtn{
	width:120px;
	height:35px;
	text-align:center;
	font-size: 13px;
	font-weight: bolder;
	float:right;
	background-color:#0000BD;
	color:white;
	border-radius:4px;
	line-height:35px;	
	margin-top:0px;
}
.cssEZBtn:hover{
	cursor:pointer;
	background-color:#00005e;
	font-family: dream7;
}
.cssTopRightBottomDiv{
	position:absolute;
	float:right;
	height:50px;
	width:100%;
	bottom: 0px; 
	line-height:60px; 
	text-align: center; 
}
.cssTopBtn{
	width:180px;
	height:60px;
	float:left;
	text-align:center;
	font-size: 20px;
	font-weight: bolder;
}
.cssTopBtn:hover{
	cursor:pointer;
	border-bottom:2px solid #008000;
	font-family: dream7;
}
.aImgView:hover{
	cursor:pointer;
	font-weight: bolder;
}
/*************/


/* BOTTOM CSS*/
.cssBottom{
	width:100%;
	height:150px;
	background-color:#f7f7f7;
	text-align: center;
	color:#808080;
} 
.cssBottomDiv{
	position:relative;
	height:150px;
	display: inline-block;
}  
.cssBottomLeftDiv{
	height:110px;
	text-align: left;
	width:70vw;
	margin:20px;
	line-height: 21px;
	font-weight: bolder;
	float:left;
	font-size: 13px;
}
.cssBottomRightDiv{
	position:absolute;
	width:150px;
	right:0px;
	bottom:0px;
	padding:20px;
	font-size: 11px;
}
/*************/



/* MAIN CSS */
#mainViewDiv{
	width:100vw; 
	min-height:550px;
	max-height:550px;
	text-align: center; 
	background-color:white;
	background-image: url('../img/main_img_bg.png');  
	background-size: cover;
	background-repeat : no-repeat; 
	background-position: 50% 50%;
}  
#mainViewTxtDiv{
	font-weight:bolder;	 
	color:white;
	display: inline-block;
}
#homeBtn{
	cursor: pointer;
}
.cssDemoBtn{
	width:200px;
	height:60px;
	text-align:center;
	font-size: 18px; 
	border-radius:8px;
	border:1px solid #bfbf00;
	line-height:60px;	
	margin-top:10px;
	display: inline-block;
	font-family: dream7;
	color: #bfbf00;
}
.cssDemoBtn:hover{
	cursor: pointer;
	background-color:#bfbf00;
	color:white;
	border: 1px solid white;
}
#mainItemViewDiv1{ 
	width:100%; 
	text-align: center;
}
#mainItemViewDiv2{ 
	width:100%; 
	text-align: center;
	padding-top:2vh;
}
#mainItemListDiv1{
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}
#mainItemListDiv2{
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}

/** 고객센터 전화번호 **/
#mainTelDiv{
	width:100%;
	height:310px;
	background-color: #fafafa; 
	position: relative;
	text-align: center; 
}	
#mainTelTxt {
	position: absolute;
	width:100%; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}
#mainTelTxt h1{
	font-size: 3.7em;
	font-family: dream7;
}
#mainTelTxt p{
	font-size: 3em;
	font-family: dream3;
}

/** 그린피웹 특징 **/

.cssItemDiv1{
	width:100%;
	min-height:500px;
	display: block;
	font-size:0px;
	margin-top:3.5vh;
}
.mainTxtDiv{
	width:40%;
	min-width:400px;
	height:300px;
	display: inline-block;
	padding: 0 5px;
	vertical-align: middle;
	box-sizing: border-box; 
	text-align: left;
}
.mainTxtDiv h1{
	font-size: 50px;
	font-family: dream7;
}
.mainTxtDiv p{
	font-size: 23px;
	font-family: dream3;
}
.mainTxtDiv p b{
	font-size: 25px;
	font-family: dream4;
}
.mainVideoDiv{
	width:60%;
	height:420px;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}

.cssItemCardDiv1:hover{
	cursor:pointer;
	background-color:#fdfdf7;
	border:2px solid #494949;	
	box-shadow: 4px 4px 4px #949494 ;
}
.cssItemTxtDiv1{
	width:100%;
	margin-top:40px;
	text-align:center;
	line-height: 40px;
}

/** 그린피웹 주요메뉴 **/
.cssItemDiv{
	width:100%;
	height:240px;
	border-bottom: 1px solid #e7e7e7;
	display: block;
	font-size: 0;	
	text-align: left;
}
.cssItemCardDiv{
	width:40%;
	vertical-align: middle; 
	box-sizing: border-box;
	display: inline-block;
	text-align:center;
	position: relative;
}
.cssItemCard{
	width:24vw;
	height:200px;
	border:2px solid #bebebe;	
	border-radius:1.3vw;
	font-family: 'ssro';
	text-align:center;
	position: absolute;
	left:50%;
	transform:translate(-50%,-50%);
	
}
.cssItemCard:hover{
	cursor:pointer;
	background-color:#fdfdf7;
	border:2px solid #494949;	
	box-shadow: 4px 4px 4px #949494 ;
}
.cssItemTxtDiv{
	width:100%;
	margin-top:70px;
	line-height: 40px;
	
}
.cssItemContDiv{
	width:60%;
	height:200px;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle; 
	position: relative;
}
.cssItemContSpan{
	bottom:0%;
	font-family: 'jalnan';
	color:#8b8b8b; 
	position: absolute;
	font-size:1.3vw;
	line-height: 0.8vh;
}

.cssItemHeadDiv1{
	text-align:left;
	margin-left:15px;
	margin-top:30px;
	margin-bottom:50px;
	font-family: 'jalnan';
	font-size:43px;
	color:#ff0000;
}
.cssItemHeadDiv2{
	text-align:left;
	margin-left:15px;
	margin-top:30px;
	margin-bottom:50px;
	font-family: 'jalnan';
	font-size:43px;
	color:#000000;
}


/** 그린피웹페이지 **/

#gpwebViewDiv{
	width:100vw; 
	height:950px;
	background-color:#f8f8f8;  
	display: block;
	font-size:0px;
	margin-bottom:5vh;
}  
#gpwebViewTxtDiv{
	width:50%;
	min-width:350px;
	height:100%;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box; 
	text-align: right;
	background-color: white;
}
#gpwebViewTxtDiv .innerBox{
	width:60%;
	min-width:350px;
	height:100%;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
  	position : relative;
}
#gpwebViewTxtDiv .innerBox .inner{
	width:100%;
  	position : absolute;
  	top:50%;
  	transform: translate(0, -50%);
}
#gpwebViewTxtDiv .inner h1{
	font-size: 80px;
	margin : 0px 0px 0px 0px;
	font-family: jalnan;
	color:#004800;
	text-shadow: 4px 4px 4px #a1a1a1 ;
}
#gpwebViewTxtDiv .inner p{
	font-size:19px;
	margin : 10px 0px 50px 0px;
	font-family: ssro;
	color:#9b9f9d;
	
}
#gpwebViewTxtDiv .inner div{
	width:200px;
	height:70px;
	font-size: 25px;	
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	line-height: 70px;
	font-family: dream3;
}

#gpwebViewTxtDiv .inner .divtxt1{
	border:0px;
	background-color:#006400;
	color:white; 
	margin:10px;
	margin-left:0px;
	margin-right:20px;
}

#gpwebViewTxtDiv .inner .divtxt1:hover{
	background-color:#005b00;
	color:#ebebeb;
	cursor: pointer;
}

#gpwebViewTxtDiv .inner .divtxt2{
	border:2px solid #006400;
	background-color:white;
	color:#006400;
	margin:10px;
	margin-left:0px;
}
#gpwebViewTxtDiv .inner .divtxt2:hover{
	border:2px solid #005b00;
	background-color:#ebebeb;
	color:#005b00;
	cursor: pointer;
}

#gpwebViewTxtDiv .inner .divtxt3{
	width:230px;
	height:40px;
	background-color:white;
	color:black;
	margin-left:4px;
	margin-top:20px;
	line-height: 30px;
	font-size:20px;
	text-align:left;
}
#gpwebViewTxtDiv .inner .divtxt3:hover{
	color:black;
	font-family: dream7;
	cursor: pointer;
}

#gpwebViewImgDiv{
	width:50%;
	height:100%;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box; 
	text-align: right;
}
#gpwebViewImg{
	 transform: translate(0%, 11%);
}

/********* 그린피웹 신청서 *********/
#applyDocDiv{
	width: 100%;
	height: 1000px;
	text-align: center;
}
#applyDocDiv .title{
	text-align: center;
	font-family: dream7;
	font-size: 30px;
	color:black
}

/*******************************/

/********* 개발의뢰 페이지 *********/
#requestViewDiv{
	width:100vw; 
	height:700px;
	background-color:#003100;  
	display: block;
	font-size:0px;
}

#requestViewTxtDiv{
	width:100%;
	min-width:350px;
	height:100%;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box; 
	text-align: center;
}
#requestViewTxtDiv .innerBox{
	width:60%;
	min-width:350px;
	height:100%;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
  	position : relative;
}
#requestViewTxtDiv .innerBox .inner{
	width:100%;
  	position : absolute;
  	top:50%;
  	transform: translate(0, -50%);
}
#requestViewTxtDiv .inner h1{
	font-size: 2.8vw;
	margin : 0px 0px 0px 0px;
	font-family: jalnan;
	color:#ffffff;
}
#requestViewTxtDiv .inner h2{
	font-size: 20px;
	margin : 0px 0px 0px 0px;
	font-family: dream7;
	color:#eaea00;
	line-height: 50px;
}
#requestViewTxtDiv .inner h3{
	line-height: 10px;
}
#requestViewTxtDiv .inner p{
	font-size:19px;
	margin : 10px 0px 50px 0px;
	font-family: ssro;
	color:#9b9f9d;
	
}

#requestProgramDiv{
	height:1000px;
}
/*******************************/

.input-group-text{
	width: 23vw;
	text-align: center;
}

.ft25{
	font-size: 20px;	
}
.ft40{ 
	font-size:40px;	
}
.ft30vw{ 
	font-size:3vw;	
	text-shadow: 2px 2px 2px #757575 ;
}
.ft35vw{ 
	font-size:3.5vw;	
	text-shadow: 2px 2px 2px #757575 ;
}
.ftred{
	color:red;
}
.ftgray{
	color:#686868;
}
.ftblack{
	color:black;
}
.pdr3vw{
	padding-right:3vw;
}
.pdl3vw{
	padding-left:3vw;
}
.mgb3vh{
	margin-bottom:3vh;
}
.mgb7{
	margin-bottom:7px;
}
.mgb14{
	margin-bottom:14px;
}
.mgb35{
	margin-bottom:35px;
}