@charset "UTF-8";
html, body, header, footer, input, a, img, div, video, h1, h2, h3, h4, h5, font, p, ul, ol,li{
	margin: 0px;
	padding: 0px;
	position:static;
	display:block;
}

html,body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

header{
	background-color: white;
	border-bottom: 1px solid lightgray;
	width:100%;
	height:150px;
}

p{
	font-size:30pt;
	font-weight:normal;
	color:rgb(38,38,38);
}

input{
	background-color:white;
}

header > a{
	font-size: 40pt;
}

footer{
	position:fixed;
	bottom:0;
	width:100%;
	height: 150px;
	background-color: white;
	border-top:1px solid lightgray;	
}

a{
	color:rgb(38,38,38);
}

a,button{
	text-decoration:none;
	font-weight:bold;
	cursor: pointer;
}

table,tbody{
	width:100%;
	height:auto;
}

td>img{
	width:3.5em;
	height:3.5em;
	background-color: transparent;
}

video{
	width:100%;
	height:auto;
}

.bar_button{
	width:900px;
	height:120px;
	border:none;
	background:transparent;
	background-image:url("../image/groupbar_black.png");
	background-size:100%;
	background-repeat:no-repeat;
	color:white;
	font-size:30pt;
}

.accept_button{
	width:300px;
	height:120px;
	border:none;
	background:transparent;
	background-image:url("../image/accept.png");
	background-size:100%;
	background-repeat:no-repeat;
	color:white;
	font-size:30pt;
}

.enter_button{
	float:right;
	width:300px;
	height:inherit;
	border:none;
	background:transparent;
	background-image:url("../image/accept.png");
	background-size:100%;
	background-repeat:no-repeat;
	color:white;
	font-size:30pt;
}

.square_button{
	width:120px;
	height:120px;
	border:none;
	background:transparent;
	background-image:url("../image/searchAccept.png");
	background-size:100%;
	background-repeat:no-repeat;
	color:white;
	font-size:30pt;
}

.grey-qo-regular {
  font-family: "Grey Qo", cursive;
  font-weight: 400;
  font-style: normal;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: rgb(38,38,38);
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(38,38,38);
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: rgb(38,38,38);
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.shadows-into-light-regular {
  font-family: "Shadows Into Light", cursive;
  font-weight: 400;
  font-style: normal;
}

.rubik-dirt-regular {
  font-family: "Rubik Dirt", system-ui;
  font-weight: 400;
  font-style: normal;
}

.zeyada-regular {
  font-family: "Zeyada", cursive;
  font-weight:bolder;
  font-style: normal;
}

.icon{
	margin: 0;
	padding: 0;
	position: static;
	display: block;
	width: 1.75cm;
	height: 1.75cm;
	border: transparent;
}

.article{
	background-color: white;
	position: static;
	display: block;
	margin: 0;
	padding: 0;
}

.article>div:nth-child(4){
	float:left; 
	width:100%; 
	height:40px;
	margin-left:10px;
}

div.meBtn{
	background:rgb(100,100,100);
	height:150px !important;
	color:white;		
}


div.meBtn>img, div.meBtn>div>img{
	border: none; 
	width:130px; 
	height:130px;
	display:inline-block;
	cursor:pointer;
	align-content:center;
	margin-right:10px; 
}

div.meBtn>div:nth-child(2){
	width:50%; 
	height:100px; 
	float:left;
}

div.enterInput{
	width:100%; 
	height:150px;
}

div.enterInput>input{
	border:5px solid rgb(100,100,100);
	border-radius:10px; 
	width:83%;
	height:130px;
	float:left;
	margin-left:10px;
	padding-left:3px;
	font-size:30pt;
	font-weight:bold;
}

div.enterInput>img{
	width:130px;
	height:130px;
	float:right;
	cursor: pointer;
	display: inline;
	margin-right:10px;
}

td>input{
	border:2px solid black;
	display:block;
	border-radius: 5px; 
	width:98%; 
	height:3.5em;
	font-size:small;
	font-weight:bolder;
	margin-left:5px;
	margin-top:3px;
	padding-left:3px;
}

.groupbar{
	width:100%; 
	height:200px; 
	color:black;
	text-decoration: none;
	background:transparent;
	background-image:url('../image/pattern search bar.png');
	background-repeat: round;
	background-size: 100%;
}

.groupbar>div>img {
    width: 163px;
    height: 163px;
    float: left;
    margin-top: 19px;
    margin-left: 50px;

}

.groupbar>a{
	width:100%;
	text-align:left;
	font-weight:bolder;
	color:black;
	text-decoration:none;
}

.apply{
	width:900px;
	height:120px !important;
	margin-top:10px;
}

.apply > button:nth-child(1){
	width:430px; 
	height:100px; 
	background-image: url('../image/enter.png'); 
	background-repeat: round;
	text-align: center; 
	color:white !important;
	align-content:center;
	font-size:30pt;
	display:inline-block;
}

.apply>a{
	width:300px; 
	height:120px; 
	background-image: url('../image/enter.png'); 
	background-repeat: round;
	text-align: center; 
	color:white !important;
	align-content:center;
	font-size:30pt;
	display:inline-block;
}

#container{
	background-image: url('../image/Le Noire Mobile.jpg'); 
	background-size:100%;
	background-repeat:round;
	border:1px solid gray;
	border-radius:5px;
	width:100%;
	height:100%;
	margin:0 auto;
	min-width:400px;
}

#container>header>a{
	width: 250px;
	height:80px;
	text-align: center; 
	display: inline-block;
}

#container>header>img{
	float:right;
	width: 200px; 
	height: 200px; 
	cursor: pointer;
}

#container>div:nth-child(3){
	overflow:hidden;
	height:auto;
}

#index>div:nth-child(1)>font:nth-child(1){
	font-size:110pt; 
	text-align:center;
}

#index>div:nth-child(1)>font:nth-child(2){
	font-size: 35pt; 
	text-align:center;
}

#index>div:nth-child(2){
	width:618px;
	height:150px;
	margin:0 auto;
}

#index>div>img{
	width:auto;
	height:auto;
	display:inline;
	cursor: pointer;
}

#container > footer > a{
	font-size:50pt;
	float:right;
	padding-top:5px;
	padding-right:10px;
}

#myGroup,#mkGroup{
	width:98%; 
	height:200px; 
	text-align: center; 
	background-image:url('../image/menubar.png'); 
	background-repeat: no-repeat;
	background-size:100%; 
	margin:0 auto;
	background-color:white;
}

#myGroup>button,#mkGroup>button{
	width:100%; 
	height:100%;
	border:5px solid white;
	border-radius:20px;
	font-size:40pt; 
	font-weight: bolder;  
	align-content:center;
	background:transparent;
	background-color:#444444;
	color: white !important;
}

#moniter > tbody > tr > td{
	display:inline-block;
}

#moniter > tbody > tr > td:nth-child(2){
	width:70%;
	height:auto;
}

#shoot,#gallery,#rotate,#photo,#video{
	width: 400px; 
	height: 400px; 
	display:block;
	background:transparent;
	background-repeat:no-repeat;
	background-size:100%; 
	align-content:center; 
}

/*
#shoot{
	background-image: url('/resources/image/shoot.png');
}

#gallery{
	background-image: url('/resources/image/gallery.png');
}
*/

#shoot>font,#gallery>font,#photo>font,#video>font{
	color: white;  
	text-align: center;
	font-size: 30pt;
	font-weight:bolder; 
	width:100%;
	height:100%;
	align-content:center;
}

#search,#camera,#me,#meeting{
	display:inline-block;
	border:none;
	width:150px;
	height:150px;
	background-repeat:no-repeat;
	background-size:100%;
}

#search_content{
	height:400px;
	align-content:center;
}

#search_content>div:nth-child(1){
	height:300px;
	text-align: center;
}

#search_content>font:nth-child(1),#search_content>div>font:nth-child(1){
	font-size:100pt;
	vertical-align:middle;
}

#search_content>font:nth-child(2),#search_content>div>font:nth-child(2){
	font-size:45pt;	
	vertical-align:middle;
}

#search_input{
	width:700px;
	height:120px;
	margin:0 auto;
}

#search_input>input[type=search]{
	float:left;
	position:static;
	display:block;
	border:2px solid rgb(38,38,38); 
	border-radius:10px; 
	width:80%; 
	height:120px;
	font-size:medium;
	font-weight:bolder;
	padding-left:10px;
	margin-left:10px;
	font-size:40pt;
	color: rgb(38,38,38);
}

#apply_img{
	position:static;
	display:block;
	width:120px; 
	height:120px; 
	float:right;
}

#search_title{
	font-size:medium;
	align-content:flex-start;
	font-weight:bold;
}

#moniter>tbody>tr>td:nth-child(1),#moniter>tbody>tr>td:nth-child(3){
	width:10%;
	height:3.5em;
}

#arrow_left,#arrow_right{
	width:3.5em;
	height:3.5em;
}

#camera_button{
	height:100%;
	width:900px;
	align-content:center;
	margin:0 auto;
}

#camera_button>div:nth-child(1),#camera_button>div:nth-child(2){
	width:auto; 
	height:150px;
	margin:0 auto;
}

#resolution{
	width:300px; 
	height:150px; 
	margin-top:75px; 
	float:left; 
	background-image:url('../image/resolution.png'); 
	background-repeat: round;	
}

#resolution1, #resolution2{
	width:150px; 
	height:150px;  
	background-size:100%;
	background-repeat: no-repeat;
}

#rotate>div{
	width:100%; 
	height:100%;
	align-content:center;
}

#membership{
	align-content:center;
}

#membership>div{
	width:700px;
	height:100px;
	margin:0 auto;
}

#membership>div>a{
	width:700px;
	height:120px;
	border:1px solid gray;
	border-radius:15px;
	background:transparent;
	background-color:white;
	/*background-image:url("../image/groupbar.png");*/
	background-size:100%;
	background-repeat:no-repeat;
	text-align:center;
	align-content:center;
	font-size:30pt; 
	font-weight:bolder;
	vertical-align:middle;
}

#membership>form>input, #membership>form>a{
	width:700px; 
	height:120px; 
	border:1px solid gray;
	border-radius:15px;
	background:transparent;
	background-color:white;
	background-size:100%;
	background-repeat:no-repeat;
	color:rgb(38,38,38); 
	text-align: center;
	font-size:30pt; 
	font-weight:bolder;
	margin-top:10px;
}

#membership>font:nth-child(1){
	font-size:110pt;
	text-align:center;
}

#membership>font:nth-child(2){
	font-size:40pt;
	font-weight:bold;
	text-align:center;
	color:rgb(38,38,38);
}

#home{
	width:100%;
	height:35px;
	margin:10px auto;
}

#home>a{ 
	width:300px; 
	height:120px; 
	background-image: url('../image/enter.png'); 
	background-repeat: round; 
	font-size:40px;
	text-align: center;
	align-content:center;
	color:white !important;
}

.wrapper{
	margin:0 auto;
	align-content:center;
}

#wrapper{
	margin:0 auto;
	align-content:center;
}

#wrapper>img, #homme{
	position:static;
	display:block;
	width:100%;
	height:70%;
	background-image:url('../image/homme.jpg'); 
	background-repeat: no-repeat;
	background-size:100%;
}

#wrapper>font:nth-child(2),#myName{
	position:static;
	display:block;
	padding-left:10px;
	font-size:40pt;
	font-weight:bolder; 
}

#wrapper>font:nth-child(3),#mySentence{
	position:static; 
	display:block;
	padding-left:10px;
	font-size:30pt;
	font-weight:normal;
	color:black;
}

#wrapper > div:nth-child(6){
	width:100%;
	height:auto;
}

#wrapper > div:nth-child(7) > input[type=text]{
	border:3px solid black;
	border-radius:10px;
	width:83%;
	height:150px;
	margin-left:3px;
	padding-left:10px;
	font-size:30pt;
	float:left;
}

#inputMessage{
	border:5px solid rgb(100,100,100);
	border-radius:10px;
	width:82%;
	height:130px;
	margin-left:10px;
	padding-left:10px;
	font-size:30pt;
	float:left;
}

#subject{
	width:inherit;
	height:auto;
}

#subject>font:nth-child(1){
	font-size:110pt;
	text-align:center;
}

#subject>font:nth-child(2){
	font-size:40pt;
	font-weight:bold;
	text-align:center;
	color: rgb(38,38,38);
}

#information,#range,#article,#event,#accept{
	width:100%;
	height:auto;
}

#information>button,#range>button,#member>button,#member>div,#article>button,#article>form,#article>form>input,
#article>input,#event>button,#event>input,#me>button,#me>form,#form>form>input,#addMeForm>font:nth-child(1),
#addMeSubject,#memberSubject,#addMeSentence{
	width:700px;
	height:120px;
	border:0px;
	background:transparent;
	background-image:url("../image/groupbar_black.png");
	background-repeat:no-repeat;
	background-size:100%;
	font-size:30pt;
	color:white;
}

#addMeSubject, #addMeSentence, #addEventDatetime, #addEventSubject{
	border:1px solid gray !important;
	border-radius:20px !important;
	background:transparent !important;
	background-color:rgb(55,55,55) !important;
	margin-top:5px;
}

#information>button:nth-child(1),#range>button:nth-child(1),#memberSubject,#article>button:nth-child(1),
#event>button:nth-child(1),#me>button:nth-child(1),#memberSubject{
	background-image:url("../image/groupbar.png") !important;
	color:rgb(38,38,38) !important;
	margin-top:10px !important;
}

#information>input,#information>form>input,#information>form{
	width:100%;
	height:120px;
	border:none;
	background:transparent;
	background-image:url("../image/groupbar_black.png");
	background-repeat:no-repeat;
	background-size:100%;
	font-size:30pt;
	color:white;
	text-align: center;
}

#enterSubject, #enterTitle, #addArticleName, #addArticleSentence, #addArticleName, #addArticleSentence{
	border:1px solid gray !important;
	border-radius:20px !important;
	background:transparent !important;
	background-color:rgb(55,55,55) !important;
	margin-top:5px;
}

#info > div > font{
	font-size:26pt;
	display:inline;
}

#confirm>button{
	width:300px;
	height:120px;
	border:none;
	background:transparent;
	background-image:url("../image/accept.png");
	background-repeat:no-repeat;
	background-size:100%;
	font-size:30pt;
	color:white;
}

#person_apply{
	border: none; 
	background-color: transparent; 
	width: 130px; 
	height: 130px; 
	float:right;
	margin-right:10px;
}

#login_main>div>font{
	height: 80px;
	color: black;
	text-align:center;
}

#login_main>div:nth-child(2){
	height: 32px;
	color: black;
	text-align:center;
}

#login{
	width:700px; 
	height:auto;
	margin:0 auto;
}

#login> form> input{
	width:700px; 
	height:120px; 
	border:1px solid gray;
	border-radius:15px;
	background-color:white;
	background-size:100%;
	background-repeat:no-repeat;
	text-align: center;
	font-size:40px;
	font-weight:bolder;
	margin-top:10px;
}

#login>form> div{
	height:100px;
	margin-top:10px; 
}

#login>form>div>a:nth-child(1),#login>form>div>a:nth-child(2){
	float:left; 
	color:rgb(38,38,38);
	font-size:40px; 
	font-weight:bold;
	text-decoration:underline;
	height:100px;
	margin-left:10px;
	align-content:center;
}

#login>form>div>div{
	float:right;
	width:auto;
	height:auto;
}

#login>form>div>div>a:nth-child(1),#login>form>div>div>a:nth-child(2){
	display:inline-block;
	width:200px; 
	height:90px; 
	font-size:30pt;
	background-image: url('../image/enter.png'); 
	background-repeat: round; 
	text-align: center;
	align-content:center; 
	color:white !important;
}

#person > input[type=text]{
	border: 2px solid black; 
	border-radius: 5px; 
	width:85%; 
	height: 50px; 
	font-size: 14px;
	float:left;
}

#art > div:nth-child(1) > img{
	width:100%;
	height:100%;
}

div#confirm{
	height:auto;
	margin:0 auto;
}

#confirm > div{
	margin:0 auto;	
	width:700px;
}

#confirmId,#descSelectImage{
	width:490px;
	height:120px;
	border:1px solid gray;
	border-radius:15px;
	background:transparent;
	background-color:white;
	background-repeat: no-repeat;
	background-size:100%;
	text-align: center;
	font-weight:bolder;
	color:black;
	font-size: 30pt;
	display:inline-block;
	position:absolute;
}

#descSelectImage{
	border:1px solid gray;
	width:700px !important;
	height:120px !important;
	align-content:center !important;
	background-color:white !important;
}

#formdata{
	width:670px;
	height:100px;
	border:none;
	text-align: center;
	font-weight:bolder;
	color:black;
	font-size: 30pt;
	display:inline-block;
	align-content:center;
}
	
#formdata > button, #confirmBtn{
	border:none;
	width:200px; 
	height:120px; 
	background:transparent;
	background-image: url('../image/enter_confirm.png'); 
	background-repeat: no-repeat;
	background-size:100%; 
	text-align:center; 
	font-size:40px; 
	color:white;
	align-content: center;
	display:inline-block;
}

#content{
	height:150px;
	background: gray;
}

#content>div:nth-child(1){
	width: 400px; 
	height:100%;
	float:left;
	align-content:center;
}

#content > div:nth-child(1) > font:nth-child(1){
	margin-left: 10px;  
	font-size:30pt;
	font-weight: bolder; 
	color: white;
}

#content > div:nth-child(1) > font:nth-child(2){
	margin-left: 10px;  
	font-size:20pt;
	font-weight: bold; 
	color: white;
}

#content>div.meBtn{
	width:580px;
	height:150px;
	float:right;
}

#article_media,#article_media>video,#article_media>img{
	width:100%; 
	height:auto;
}

#article_input>input{
	border: 5px solid grey; 
	border-radius: 10px;
	width:83%;
	height:130px; 
	margin-left:10px;
	font-size: 30pt;
	font-weight:bolder;
	float:left;
}

#article_input>img{
	border: none; 
	background-color: transparent; 
	width:150px; 
	height:150px;
	position:static;
	display:block;
	float:right;
}

#introduce>font{
	font-size:40px;
}

#introduce > div > img:nth-child(1),#introduce > div > img:nth-child(2),#introduce > div > img:nth-child(3){
	width:300px;
	height:300px;
	display:inline;
}

#no_page{
	height:500px;
	align-content: center;
}

#no_page>font{
	text-align:center;
	font-size:50pt;
}

#makeArticle,#makeMe{
	text-align:center;
	font-size:30pt;
}

#share{
	background-image:url('../image/share.png');
	background-size:100%;
	background-repeat:no-repeat;
}

#location{
	background-image:url('../image/location.png');
	background-size:100%;
	background-repeat:no-repeat;
}

#chat{
	background-image:url('../image/chat.png');
	background-size:100%;
	background-repeat:no-repeat;
}

#like{
	background-image:url('../image/like.png');
	background-size:100%;
	background-repeat:no-repeat;
}

/**
 * 검색 버튼 설정
*/
#search_button>button,#search_button>div>div>button{
	border:none;
	background:transparent;
	width:700px;
	height:120px;
	background-image:url('../image/groupbar.png');
	background-size:100%;
	background-repeat:no-repeat;
	font-size:30pt;
	margin:0px;
}

div#nopage{
	width:100%;
	height:100%;
	background-image:url('../image/Le Noire Mobile.jpg');
	background-size:100%;
	background-repeat:no-repeat;
}

/**
 * 검색 버튼 설정
*/
#search_button>div>div>button{
	background-image:url('../image/groupbar_black.png');
	color:white;
}

#search_data > div{
	font-size:30pt;
}

#changePassword > tbody > tr{
	width:50%;
	height:100px;
}