/* #40AE2B #38dd6c g #FF6161 r #FFD856 y aliceblue #F0F8FF #FBFBFB w #81DDFF #4dc7dd b*/


/*tooltip*/
.tooltip .tooltiptext { visibility: hidden; width: 7em;	font-size: 0.5em;  background-color: #393939; color: #FBFBFB; text-align: center; padding: 5px 0;
	margin-left: 1em;	margin-top: 0em; position: absolute; z-index: 1; }

.tooltip:hover .tooltiptext { visibility: visible; }
	
/*wrapper*/

#wmwrapper{ display: none; }

/*fonts*/

@font-face {
	
  font-family: hong8B;
  src: url('./images/hong.woff') format('woff'),
		 	 url('./images/hong.woff2') format('woff2'),
       url('./images/hong.oft') format('opentype');}

@font-face {
	
  font-family: notosanssubset;
  src: url('./images/notosanssubset.woff') format('woff'),
		 	 url('./images/notosanssubset.woff2') format('woff2'),
       url('./images/notosanssubset.oft') format('opentype');}


@font-face {
	
  font-family: notoserifsubset;
  src: url('./images/notoserifsubset.woff') format('woff'),
		 	 url('./images/notoserifsubset.woff2') format('woff2'),
       url('./images/notoserifsubset.oft') format('opentype');}

@font-face {
	
  font-family: notosanssubsetmed;
  src: url('./images/notosanssubsetmed.woff') format('woff'),
		 	 url('./images/notosanssubsetmed.woff2') format('woff2'),
       url('./images/notosanssubsetmed.oft') format('opentype');}


/*global*/

* {	appearance: none;	-webkit-appearance: none;	-moz-appearance: none; }

body { background-color: #FFD856;	margin:0px; }

a:hover{ cursor:pointer; text-decoration: none; }
a:link { text-decoration: none;	color: #393939; }
a:visited { text-decoration: none; color: #393939; }
a:active { text-decoration: none;	color: #393939; }

.topdeco{ width: 100%; height : 6vw; margin: 0; padding: 0; transform: translateY(-99.5%); overflow: hidden; }

::-moz-selection { /* Code for Firefox */
  color: #393939;
  background: #FFD856;
}

::selection {
  color: #393939; 
  background: #FFD856;
}

#sound:hover{ cursor: pointer;  }

#bgm{ display: none; }

/*reset for mobile browsers */
h1, h2, h3, h4, h5, h6 { 	font-weight: normal; margin:0;}

/*티스토리내장*/

.another_category { display: none; }
.container_postbtn{ display: none; }


/*article*/

p{ text-indent: calc(15px + 1.2 * ((80vw - 15.5px) / 680)); }

.entry { margin-bottom: -15vw; }

.fakebackground{ width: 100%; height: 100vh; top:0; position: absolute; background-color: transparent; z-index: -100; }

.articlewrapper{ margin: auto; margin-top: 75vh; margin-bottom: 0; background-color: #f1f1f1;	}

	.article-line{ width: 87%; margin: auto; max-width:1020px; text-align: center; display:block;	margin-top: 5vh; margin-bottom: 10vh; padding-bottom: 5vh;}

		.article-titlewrap{ max-width:1020px; margin: auto; width:100%; margin-top:3vh; display:block; }
			.watermelontitlewrap{ margin: 0 auto 5vh; width: 100%; transform:translateX(-0.02em); }
			.watermelontitle{ font-family: "hong8B"; font-size:calc(12px + 2 * ((100vw - 14px) / 680)); letter-spacing: -0.05em; color: #FBFBFB; }
			
			.categorywrap{ margin: auto; width: 100%; margin-top: 8vh; margin-bottom: 10vh; }
			.categorystyle{ font-size: calc(14px + 2 * ((100vw - 16px) / 680)); font-family: "notosanssubset"; letter-spacing: -0.02em; color: #FBFBFB; }	
			
			.titlewrap{	margin: auto; width: 100%; margin-top: 0.5em; display: block;}
			.titlestyle{ letter-spacing: -0.02em; font-size: calc(16px + 4 * ((100vw - 20px) / 680)); font-family: "notosanssubsetmed"; color: #393939; }
			
			.nameWrap{ width: 80%; margin: auto; margin-top: 7vh; display: inline-block;}
			.namestyle{ font-size: calc(13px + 2 * ((100vw - 15px) / 680)); font-family: "notosanssubset"; color: #FBFBFB; }

		.articleWrap{ margin: auto; padding: 0% 6% 1% 6%; display:block; max-width:1020px; width:87%; position: relative; z-index:1000; margin-top: 0; }
			.articlestyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: calc(16px + 1.2 * ((80vw - 16px) / 680)); letter-spacing: -0.005em; line-height: calc(29px + 4 * ((90vw - 32px) / 680)); margin: 0em auto 6em; width: 100%; color: #292929; }


/*protect*/


.entryProtected{ padding-top: 30vh; }
.protectmessage{ width: 70%; margin:auto; margin-top: -5vw margin-bottom: 3em; text-align: center; font-family:'hong8B'; font-size: calc(2em + 2 * ((100vw - 4em) / 680)); color: #393939; }
.passwordinput{ width: 100%; margin: auto; text-align: center; }
.passwordtype{ border: none; border-bottom: 2px solid #393939; text-align: center; font-family:'hong8B'; font-size: 1em; background-color:transparent; letter-spacing: 0.2em; }
.passwordbutton{ border: none; text-align: center; font-family:'notosanssubset'; font-size: 1em; background-color:transparent; margin: 1em;}


/*navigation*/

.navbutton { margin:auto; width: 100%; height: 2em; width:1.5em; margin: 1em; bottom:0;  right:0; z-index: 100000; text-align: center ; position: fixed;}
.navbutton:hover { cursor:pointer; }
	.upbutton {  color: #393939; font-size: 1.8em; font-family: "notosanssubset"}
	.plusbutton {  color: #393939; font-size: 2em; display: none; }
	.minusbutton {  color: #393939; font-size: 2em; display: none; }




/*desctop display*/
@media only screen and (min-width: 1400px), handheld and (orientation: landscape){
			
h1{	font-family: "hong8B"; color: #393939; font-size: 5em; letter-spacing: -0.00em;}
h2{ font-family: "notosanssubset"; color: #393939; font-size: 1.1em; text-align: center; letter-spacing: -0.00em; }
h3{ font-family: "hong8B"; color: #393939; font-size: 2em; text-align: center;}
h4{	}
h5{ font-family: "notosanssubset", sans-serif; color: #393939; font-size: 2em; text-align: center; }
	
#icon{ width:100%; position: fixed; top:0; text-align: center; overflow: hidden; }
	.iconstyle{ margin-top: 35vh; width: 260px; }
	
	
#title{   max-width: 90em; width: 70%; position: relative; text-align: center; margin: auto; }
	
	.title{ display: inline-block; width: 50%; }
		.watermelontogether{ margin-top: 45em; display: none; }
		.winter{ margin-top: 43vh; margin-right: 0%; text-align: left;}
		.watermelon{ margin-top: 43vh; margin-left: 0%; text-align: right;}
	
#topfixedtitle{ display:none; width:100%; position: fixed; top: 2em; text-align: center; margin: auto; z-index: 100; color: #393939; transition: 0.2s;}
						
#sidebar{ display:block; width:80%; position: fixed; top: 3.5em; left: 50%; transform: translateX(-50%); z-index: 100; text-align: center; }
	
#sidebar2{ display: none; }
			
	.sidebarcom{ height: 5.8em; display: inline-block; margin: 0 0.5em 0 0.5em; }

#category{ width: 100%; top: 100vh; display: block; position: absolute; }
	
	.categorywrapper{						
						box-shadow:0px 0px 10px 5px rgb(0, 0, 0, 0.1);				
						-moz-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1);
						-webkit-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1); }

			.textscategory{ background-color: #38dd6c; padding-bottom: 10vw; }	
			.illustrationcategory{ background-color: #FF6161; padding-bottom: 10vw; }
			.comicscategory{ background-color: #4dc7dd; padding-bottom: 10vw; }
			.creditscategory1{ background-color: #FFD856; }
		
	.category-title{ max-width:90em; width: 70%; margin: auto; margin-top: -1vh; margin-bottom: 0; text-align: center; font-family: "hong8B"; letter-spacing:-0.03em; }	
	
		.texttitle{ color: #FF6161; font-size: 5em; width:70%; display:inline-block; }
		.textnumber{ font-family: "notosanssubset"; color: #FF6161; font-size: 1em; width:29%; display:inline-block; }
	
		.illusttitle{ color: #FBFBFB; font-size: 5em; width:70%; display:inline-block;}	
		.illustnumber{ font-family: "notosanssubset"; color: #FBFBFB; font-size: 1em; width:29%; display:inline-block;  }
	
		.comictitle{ color: #FF6161; font-size: 5em; width:70%; display:inline-block;}
		.comicnumber{ font-family: "notosanssubset"; color: #FF6161; font-size: 1em; width:29%; display:inline-block;  }
	
	  .creditstitle{ color: #393939; font-size: 5em; }
	
	.category-table{ max-width:90em; width: 70%; margin: auto; text-align: center; display: block; margin-top: 5em; padding-bottom: 5em; }	
		.lineupwrapstyle { width: 100%; height: 3em; text-overflow: ellipsis; vertical-align:top; margin: auto; margin-bottom: 1.5em; display: block; }
	
						.text-lineupwrap{ border-bottom: 1px solid #FFD856; }
						.illust-lineupwrap{ border-bottom: 1px solid #FBFBFB; }
						.comic-lineupwrap{ border-bottom: 1px solid #FFD856; }

		.lineupnamestyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em; text-align: left;				
					
			width: 14%; text-overflow: ellipsis; margin: 0 0 0.3em 0; display: inline-block; }	
	
						.text-lineupname{ color: #FFD856; }
						.illust-lineupname{ color: #FBFBFB; }
						.comic-lineupname{ color: #FFD856; }

		.lineuptitlestyle{ font-family: "notosanssubsetmed", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em;  text-align: center;
						
						width: 70%; text-overflow: ellipsis; margin: 0 0 0.3em 0; display: inline-block; transition:0.5s; }
	
	.lineuptitlestyle:hover{ width: 60%; }	
	
		.lineupidstyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em; color: #FF6161; text-align: right;
						width: 14%; text-overflow: ellipsis; margin: 0 0 0.3em 0; display: inline-block; }
	
						.text-lineupid{ color: #FFD856; }	
						.illust-lineupid{ color: #FBFBFB; }
						.comic-lineupid{ color: #FFD856; }
	
		
	
	.credits-table{ max-width:100em; width: 90%; margin: auto; padding-bottom: 5em; padding-top: 3em; text-align: center; }
			
			.participant{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-weight: 300; color: #393939; display: inline-block; padding: 2em; padding-top: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #393939; }	

#thanksmessage{ margin: auto; text-align: center; width: 100%; font-family: "notosanssubset"; font-size: 1em; padding-top: 3em; padding-bottom: 3em; }

#footer{ width:100%; padding-bottom: 3em; padding-top: 3em; display: block; position: absolute; text-align: center; background-color: #FFD856; }
	
	.footerimgstyle{ width: 150px; }
	
	.footerblah1{ font-family: "hong8B"; font-size: 1.3em; color: #393939; }
	.footerblah1-5{ font-family: "hong8B"; font-size: 1em; color: #393939; padding: 0.5em; }
	.footerblah2{ font-family: "notosanssubset"; font-size: 0.8em; color: #393939; letter-spacing: -0.05em; padding: 0.5em; }
	
#contacts{ width:80%; position: relative; text-align: center; margin:auto; margin-top: 1em; }
	
	.contact { font-family: "hong8B"; display: inline-block; margin: 0 1em 0 1em; }

}
	
	


/*medium width*/
@media only screen and (min-width: 700px) and (max-width:1400px){

h1{ font-family: "hong8B"; color: #393939; font-size: calc(20px + 20 * ((100vw - 70px) / 680)); }
h2{ font-family: "notosanssubset"; color: #393939; font-size: 1.1em; text-align: center; letter-spacing: -0.00em; }
h3{ font-family: "hong8B"; color: #393939; font-size: 2em; text-align: center;}
h4{ }
h5{ font-family: "notosanssubset", sans-serif; font-weight: 300; color: #393939; font-size: 2em; text-align: center; margin: 0; }
		
#icon{ width:100%; text-align: center; overflow: hidden; position: fixed; top:0; }
	.iconstyle{ margin-top: 40vh; width: 18vw; }
				
#title{ width: 100%; position: relative; text-align: center; margin: auto; }
			
	.title{ display: inline-block; width: 50%; }
	.watermelontogether{ display: none; }
	.winter{ margin-top: 45vh; margin-right: 0%; }
	.watermelon{ margin-top: 45vh; margin-left: 0%; }
	
#topfixedtitle{ display:none; width:100%; position: fixed; top: -4em; text-align: center; margin: auto; z-index: 100; }
						
#sidebar{ width:90%; position: fixed; top: 3.5em; left: 50%; transform: translateX(-50%); z-index: 100; text-align: center; }
	
#sidebar2{ display: none; }

	.sidebarcom{ height: 5.8em; display: inline-block; margin: 0 0.5em 0 0.5em; }

#category{ width: 100%; top: 100vh; display: block; position: absolute; }
		
	.category-title{ letter-spacing:-0.03em; max-width:90em; width: 70%; margin: auto; margin-top: -1vh; margin-bottom: 0; text-align: center; font-family: "hong8B"; }	
	
		.texttitle{ color: #FFD856; font-size: 3.5em; width:70%; display:inline-block; }
		.textnumber{ font-family: "notosanssubset"; color: #FF6161; font-size: 1em; width:30%; display:inline-block; text-align: right; }
		.illusttitle{ color: #FBFBFB; font-size: 3.5em; width:70%; display:inline-block; }
		.illustnumber{ font-family: "notosanssubset"; color: #FBFBFB; font-size: 1em; width:30%; display:inline-block; text-align: right; }
		.comictitle{ color: #FF6161; font-size: 3.5em; width:70%; display:inline-block; }
		.comicnumber{ font-family: "notosanssubset"; color: #FF6161; font-size: 1em; width:30%; display:inline-block; text-align: right; }
		.creditstitle{ color: #393939; font-size: 3.5em; }
	
	.category-table{ width: 70%; min-width: 800px; margin: auto; margin-top: 5em; text-align: center; display: block; }	

		.lineupwrapstyle { width: 100%; height: 3em; text-overflow: ellipsis; vertical-align:top; margin: auto; margin-bottom: 1.5em; display: block; padding:0; }
	
						.text-lineupwrap{ border-bottom: 1px solid #FFD856; }
						.illust-lineupwrap{ border-bottom: 1px solid #FBFBFB; }
						.comic-lineupwrap{ border-bottom: 1px solid #FFD856; }

		.lineupnamestyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em; text-align: left; width: 20%; margin: 0 0 0.7em 0; display: inline-block; }	
	
						.text-lineupname{ color: #FFD856; }
						.illust-lineupname{ color: #FBFBFB; }
						.comic-lineupname{ color: #FFD856; }

		.lineuptitlestyle{ font-family: "notosanssubsetmed", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em;  text-align: center; width: 60%; text-overflow: ellipsis; margin: 0 0 0.3em 0; display: inline-block; }	
	
		.lineupidstyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: 1.1em; letter-spacing: -0.03em; color: #FF6161; text-align: right; width: 20%; margin: 0 0 0.3em 0; display: inline-block; }
	
						.text-lineupid{ color: #FFD856; }	
						.illust-lineupid{ color: #FBFBFB; }
						.comic-lineupid{ color: #FFD856; }

	.categorywrapper{						
						box-shadow:0px 0px 10px 5px rgb(0, 0, 0, 0.1);				
						-moz-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1);
						-webkit-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1);}

		.textscategory{ background-color: #38dd6c; padding-bottom: 10vw; }
		.illustrationcategory{ background-color: #FF6161; padding-bottom: 10vw; }
		.comicscategory{ background-color: #4dc7dd; padding-bottom: 10vw;	}
		.creditscategory1{	background-color: #FFD856;	}	
	
		.credits-table{ padding-left: 1em; padding-right: 1em; width: 90%; margin: auto; padding-bottom: 5em; text-align: center; }
		
		.participant{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-weight: 300; color: #393939; display: inline-block; padding: 2em; padding-top: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid #393939; }
	
#thanksmessage{ margin: auto; text-align: center; width: 100%; font-family: "notosanssubset"; font-size: 1em; padding-top: 3em; padding-bottom: 3em; }

#footer{ width:100%; padding-bottom: 3em; padding-top: 3em; display: block; position: absolute; text-align: center; background-color: #FFD856; }
	
	.footerimgstyle{ width: 150px; }
	.footerblah1{ font-family: "hong8B"; font-size: 1.3em; color: #393939; }
	.footerblah1-5{ font-family: "hong8B"; font-size: 1em; color: #393939; padding: 0.5em; }
	.footerblah2{ font-family: "notosanssubset"; font-size: 0.8em; color: #393939; letter-spacing: -0.05em; padding: 0.5em; }
		
#contacts{ width:80%; position: relative; text-align: center; margin:auto; margin-top: 1.5em; }
	
	.contact { font-family: "hong8B"; display: inline-block; margin: 0 1em 0 1em; }
	
}
	

	
/*mobile display*/
@media only screen and (max-width: 700px) {

h1{	font-family: "hong8B"; color: #393939; font-size: 11vw; }
h2{ font-family: "hong8B"; color: #393939; font-size: 5.5vw; text-align: center; letter-spacing: -0.05em; }
h3{ font-family: "hong8B"; color: #393939; font-size: 2em; text-align: center; }
h4{	}
h5{ font-family: "notosanssubset", sans-serif; font-weight: 300; color: #393939; font-size: 2em; text-align: center; margin: 0; }
	
#icon{ width:100%; text-align: center; overflow: hidden; position:relative; top:0; }

	.iconstyle{ margin-top: 33vh; width: 50vw; }
	
#title{	width: 100%; position: absolute; text-align: center; margin: auto; }
			
	.title{ display: inline-block; width: 85%; text-align: center; }
	.watermelontogether{ margin-top: 25vw; }
	.winter, .watermelon{	display: none; }
	
#topfixedtitle{ display:none; width:100%; position: fixed; top: 1em; text-align: center; margin: auto; z-index: 100; }
						
#sidebar{ display: none; }
	
#sidebar2{ display: none; width:100%; position: fixed; top: 3.5vw; z-index: 100; text-align: center; }	
	
	.sidebarcom{ height: 5.8vw; display: inline-block; margin: 0 1vw 0 1vw; }	

#contacts{ width:80%; position: relative; text-align: center; margin:auto; margin-top: 1.5em; }
	
	.contact { font-family: "hong8B"; display: inline-block; margin: 0 1em 0 1em; font-size: 0.8em; }
	
#category{ width: 100%; top: 85vh; display: block; position: absolute; }
		
	.category-title{ letter-spacing:-0.03em; width: 85%; margin: auto; margin-top: 0vw; margin-bottom: 0; text-align: center; }	
	
		.texttitle{ font-family: "hong8B"; color: #FFD856; font-size: 9vw; width: 100%; }
		.illusttitle{ font-family: "hong8B"; color: #FBFBFB; font-size: 9vw; width: 100%; }
		.comictitle{ font-family: "hong8B"; color: #FF6161; font-size: 9vw; width: 100%; }
		.creditstitle{ font-family: "hong8B"; color: #393939; font-size: 9vw; width: 100%; }
	
	.category-table{ display:none; width: 85%; margin: auto; margin-top: 7vh; margin-bottom: 10vh; text-align: center; }	

		.lineupwrapstyle { width: 100%; text-overflow: ellipsis; margin: auto; margin-bottom: 5vw; display: block; padding:0; text-align: center; }
	
						.text-lineupwrap{ border-bottom: 1px solid #FFD856; }
						.illust-lineupwrap{ border-bottom: 1px solid #FBFBFB; }
						.comic-lineupwrap{ border-bottom: 1px solid #FFD856; }

		.lineupnamestyle{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-size: calc(12px + 4 * ((100vw - 16px) / 680)); letter-spacing: -0.03em; text-align: left; vertical-align: top; width: 30%; margin: 0 0 0.7em 0; display: inline-block; }	
	
								.text-lineupname{ color: #FFD856; }
								.illust-lineupname{ color: #FBFBFB; }
								.comic-lineupname{ color: #FFD856; }

		.lineuptitlestyle{ font-family: "notosanssubsetmed", "나눔고딕", "맑은 고딕", sans-serif; font-size: calc(12px + 4 * ((100vw - 16px) / 680)); letter-spacing: -0.03em; color: #393939; text-align: right; width: 67%; text-overflow: ellipsis; margin: 0 0 5vw 0; display: inline-block;}
	

		.lineupidstyle{ display:none; }



	.categorywrapper{						
						box-shadow:0px 0px 10px 5px rgb(0, 0, 0, 0.1);				
						-moz-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1);
						-webkit-box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.1); }

		.textscategory{ background-color: #38dd6c; padding-bottom: 10vw; padding-top:0; }	
		.illustrationcategory{ background-color: #FF6161; padding-bottom: 10vw; }
		.comicscategory{ background-color: #4dc7dd; padding-bottom: 10vw; }
		.creditscategory1{ background-color: #FFD856; }
	
		.credits-table{ padding-left: 1em; padding-right: 1em; width: 90%; margin: auto; padding-bottom: 7em; text-align: center; }
		
			.participant{ font-family: "notosanssubset", "나눔고딕", "맑은 고딕", sans-serif; font-weight: 300; font-size: 4vw; color: #393939; display: inline-block; padding: 2em; padding-top: 1em; padding-bottom: 1em; border-bottom: 1px solid #393939; }
	
#thanksmessage{ margin: auto; text-align: center; width: 100%; font-family: "notosanssubset"; font-size: 0.9em; padding-top: 1em; padding-bottom: 3em; }

#footer{ width:100%; padding-bottom: 3em; padding-top: 3em; display: block; position: absolute; text-align: center; background-color: #FFD856; }
	
	.footerimgstyle{ width: 60px; margin-top: 3vh; }
	.footerblah1{ font-family: "hong8B"; font-size: 1.4em; color: #393939; }
	.footerblah1-5{ font-family: "hong8B"; font-size: 1.1em; color: #393939; padding: 0.3em; }
	.footerblah2{ font-family: "notosanssubset"; font-size: 0.9em; color: #393939; letter-spacing: -0.05em; padding: 0.5em;}
	
}