@charset utf-8;

*{
margin:0; padding:0;
}

img {border: none;}

/* viewport 선언 */
@viewport{
width:device-width;
zoom:1;
min-zoom:1;
max-zoom:1;
user-zoom:zoom;
}

/* 글꼴 지정 */

body{
font-family: 'Jeju Gothic', san-serif;
font-size:1rem;
background:#000000;
letter-spacing:-0.05rem;
}

h1{
letter-spacing:0rem;
}


/* 모바일 CSS 코드 */

/* 전체 wrap */

#wrap{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
flex-flow:row wrap;
width:95%;
margin:0 auto;
}

/* header 부분 */

.header{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
-webkit-align-items:flex-start;
align-items:flex-start;
-webkit-order:1;
order:1;
background:black;
color:white;
width:calc(100% - 4px);
margin-top:20px;
margin-left:2px;
margin-right:2px;
margin-bottom:0px;
}

.header img{
height:2rem;
margin-bottom: 0.67rem;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

.intro_website_section{
-webkit-order:3;
order:3;
width:calc(50% - 4px);
height:100px;
background:mediumblue;
}

.intro_fluorf_section{
-webkit-order:4;
order:4;
width:calc(50% - 4px);
height:100px;
background:crimson;
}

.news_section{
-webkit-order:5;
order:5;
width:calc(25% - 4px);
height:100px;
background:gold;
}

.youtube_section{
-webkit-order:8;
order:8;
width:calc(50% - 4px);
height:200px;
}

.youtube_section iframe{
border:0px;
}

.daily_essay_section{
-webkit-order:7;
order:7;
width:calc(50% - 4px);
height:100px;
background:mediumblue;
}

.version_section_08{
display:none;
}

.article_section{
-webkit-order:9;
order:9;
width:calc(50% - 4px);
height:200px;
background:gold;
overflow:hidden;
}

.album_section{
-webkit-order:9;
order:9;
width:calc(50% - 4px);
height:200px;
background-image: url("http://fluorF.net/album/album.jpg");
opacity:0.4; filter:alpha(opacity=40);
background-size: 200%;
}

.guestbook_section{
-webkit-order:12;
order:12;
width:calc(25% - 4px);
height:200px;
background:crimson;
}

.contact_section{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
-moz-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:space-around;
-moz-justify-content:space-around;
justify-content:space-around;
-webkit-align-items:center;
align-items:center;
-webkit-order:13;
order:13;
width:calc(100% - 4px);
height:100px;
background:white;
}

.contact_section img{
height:60px;
}

/* void section 부분 */

.void_01{
-webkit-order:6;
order:6;
width:calc(25% - 4px);
background:white;
display:inline;
}

.void_02{
display:none;
}

.void_03{
display:none;
}

.void_04{
display:none;
}

.void_05{
display:none;
}

.void_06{
-webkit-order:11;
order:11;
width:calc(25% - 4px);
height:200px;
background:white;
display:inline;
}


/* section 오버랩 설정 */

.intro_website_section:hover{background:black;}
.intro_fluorf_section:hover {background:gold;}
.news_section:hover         {background:crimson;}
.daily_essay_section:hover  {background:black;}
.album_section:hover        {opacity:1.0; filter:alpha(opacity=100);}
.article_section:hover      {background:crimson;}
.guestbook_section:hover    {background:gold;}


/* footer 부분 */

.footer{
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-order:14;
order:14;
width:100%;
height:100px;
margin-top:20px;
}

.footer iframe{
width:100%;
height:100%;
margin:0 auto;
border:0px;
}


/* hyperlink 설정 */

section a.whitelink:link {color:white; text-decoration:none;}
section a.whitelink:visited {color:white; text-decoration:none;}
section a.whitelink:hover {color:white; text-decoration:none;}
section a.whitelink:active {color:white; text-decoration:none;}

section a.blacklink:link {color:black; text-decoration:none;}
section a.blacklink:visited {color:black; text-decoration:none;}
section a.blacklink:hover {color:black; text-decoration:none;}
section a.blacklink:active {color:black; text-decoration:none;}

.intro_website_section a{
display:block;
width:calc(100% - 8px);
height:92px;
padding:4px;
}

.intro_fluorf_section a{
display:block;
width:calc(100% - 8px);
height:92px;
padding:4px;
}

.daily_essay_section a{
display:block;
width:calc(100% - 8px);
height:92px;
padding:4px;
}

.news_section a{
display:block;
width:calc(100% - 8px);
height:92px;
padding:4px;
}

.album_section a{
display:block;
width:calc(100% - 8px);
height:192px;
padding:4px;
}

.article_section a{
display:block;
width:calc(100% - 8px);
height:192px;
padding:4px;
}

.guestbook_section a{
display:block;
width:calc(100% - 8px);
height:192px;
padding:4px;
}


/* 태블릿 CSS 코드 선언 */

@media all and (min-width:768px){

/* 전체 wrap */

#wrap{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
flex-flow:row wrap;
width:90%;
margin:0 auto;
}

/* header 부분 */

.header{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
-webkit-align-items:flex-start;
align-items:flex-start;
-webkit-order:1;
order:1;
background:black;
color:white;
width:calc(100% - 4px);
margin-top:20px;
margin-left:2px;
margin-right:2px;
margin-bottom:0px;
}

.header img{
height:2rem;
margin-bottom: 0.67rem;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

.intro_website_section{
-webkit-order:3;
order:3;
width:calc(30% - 4px);
height:144px;
background:mediumblue;
}

.intro_fluorf_section{
-webkit-order:4;
order:4;
width:calc(30% - 4px);
height:144px;
background:crimson;
}

.news_section{
-webkit-order:6;
order:6;
width:calc(20% - 4px);
height:144px;
background:gold;
}

.youtube_section{
-webkit-order:7;
order:7;
width:calc(45% - 4px);
height:288px;
}

.youtube_section iframe{
border:0px;
}

.daily_essay_section{
-webkit-order:8;
order:8;
width:calc(35% - 4px);
height:288px;
background:mediumblue;
}

.version_section_08{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
-webkit-order:9;
order:9;
width:calc(20% - 4px);
display:inline;
}

.version_section_08_01{
-webkit-order:10;
order:10;
width:100%;
height:142px;
margin-bottom:2px;
background:white;
}

.version_section_08_02{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
-webkit-align-items:flex-end;
align-items:flex-end;
-webkit-justify-content:flex-end;
-moz-justify-content:flex-end;
justify-content:flex-end;
-webkit-order:11;
order:11;
width:100%;
height:142px;
margin-top:2px;
background:black;
}

.article_section{
-webkit-order:12;
order:12;
width:calc(30% - 4px);
height:288px;
background:gold;
overflow:hidden;
}

.album_section{
-webkit-order:14;
order:14;
width:calc(55% - 4px);
height:288px;
background-image: url("http://fluorF.net/album/album.jpg");
opacity:0.4; filter:alpha(opacity=40);
background-size: 100%;
}

.guestbook_section{
-webkit-order:15;
order:15;
width:calc(30% - 4px);
height:144px;
background:crimson;
}

.contact_section{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
-moz-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:space-around;
-moz-justify-content:space-around;
justify-content:space-around;
-webkit-align-items:center;
align-items:center;
-webkit-order:17;
order:17;
width:calc(55% - 4px);
height:144px;
background:white;
}

.contact_section img{
height:60px;
}

/* void section 부분 */

.void_01{
-webkit-order:5;
order:5;
width:calc(20% - 4px);
background:white;
display:inline;
}

.void_02{
display:none;
}

.void_03{
display:none;
}

.void_04{
-webkit-order:13;
order:13;
width:calc(15% - 4px);
background:white;
display:inline;
}

.void_05{
-webkit-order:16;
order:16;
width:calc(15% - 4px);
height:144px;
background:white;
display:inline;
}

.void_06{
display:none;
}


/* section 오버랩 설정 */

.intro_website_section:hover{background:black;}
.intro_fluorf_section:hover {background:gold;}
.news_section:hover         {background:crimson;}
.daily_essay_section:hover  {background:black;}
.album_section:hover        {opacity:1.0; filter:alpha(opacity=100);}
.article_section:hover      {background:crimson;}
.guestbook_section:hover         {background:gold;}


/* footer 부분 */

.footer{
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-order:18;
order:18;
width:100%;
height:100px;
margin-top:20px;
}

.footer iframe{
width:80%;
height:100%;
margin:0 auto;
border:0px;
}


/* hyperlink 설정 */

section a.whitelink:link {color:white; text-decoration:none;}
section a.whitelink:visited {color:white; text-decoration:none;}
section a.whitelink:hover {color:white; text-decoration:none;}
section a.whitelink:active {color:white; text-decoration:none;}

section a.blacklink:link {color:black; text-decoration:none;}
section a.blacklink:visited {color:black; text-decoration:none;}
section a.blacklink:hover {color:black; text-decoration:none;}
section a.blacklink:active {color:black; text-decoration:none;}

.intro_website_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.intro_fluorf_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.daily_essay_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.news_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.album_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.article_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.guestbook_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

}



/* 데스크탑 CSS 코드 선언 */

@media all and (min-width:960px){

/* 전체 wrap */

#wrap{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
flex-flow:row wrap;
width:60%;
min-width:960px;
margin:0 auto;
}

/* header 부분 */

.header{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:row;
-moz-flex-direction:row;
flex-direction:row;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
justify-content:space-between;
-webkit-align-items:flex-start;
align-items:flex-start;
-webkit-order:1;
order:1;
background:black;
color:white;
width:calc(100% - 4px);
margin-top:20px;
margin-left:2px;
margin-right:2px;
margin-bottom:0px;
}

.header img{
height:2rem;
margin-bottom: 0.67rem;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

.intro_website_section{
-webkit-order:3;
order:3;
width:calc(25% - 4px);
height:144px;
background:mediumblue;
}

.intro_fluorf_section{
-webkit-order:4;
order:4;
width:calc(25% - 4px);
height:144px;
background:crimson;
}

.news_section{
-webkit-order:6;
order:6;
width:calc(12.5% - 4px);
height:144px;
background:gold;
}

.youtube_section{
-webkit-order:7;
order:7;
width:calc(37.5% - 4px);
height:288px;
}

.youtube_section iframe{
border:0px;
}

.daily_essay_section{
-webkit-order:9;
order:9;
width:calc(37.5% - 4px);
height:288px;
background:mediumblue;
}

.version_section_08{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
-webkit-order:10;
order:10;
width:calc(12.5% - 4px);
display:inline;
}

.version_section_08_01{
-webkit-order:11;
order:11;
width:100%;
height:142px;
margin-bottom:2px;
background:white;
}

.version_section_08_02{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
flex-direction:column;
-webkit-align-items:flex-end;
align-items:flex-end;
-webkit-justify-content:flex-end;
-moz-justify-content:flex-end;
justify-content:flex-end;
-webkit-order:12;
order:12;
width:100%;
height:142px;
margin-top:2px;
background:black;
}

.article_section{
-webkit-order:14;
order:14;
width:calc(37.5% - 4px);
height:288px;
background:gold;
overflow:hidden;
}

.album_section{
-webkit-order:16;
order:16;
width:calc(37.5% - 4px);
height:288px;
background-image: url("http://fluorF.net/album/album.jpg");
opacity:0.4; filter:alpha(opacity=40);
background-size: 100%;
}

.guestbook_section{
-webkit-order:17;
order:17;
width:calc(12.5% - 4px);
height:144px;
background:crimson;
}

.contact_section{
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
-moz-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:space-around;
-moz-justify-content:space-around;
justify-content:space-around;
-webkit-align-items:center;
align-items:center;
-webkit-order:19;
order:19;
width:calc(37.5% - 4px);
height:144px;
background:white;
}

.contact_section img{
height:55px;
}

/* void section 부분 */

.void_01{
-webkit-order:5;
order:5;
width:calc(37.5% - 4px);
background:white;
display:inline;
}

.void_02{
-webkit-order:8;
order:8;
width:calc(12.5% - 4px);
background:white;

-webkit-animation:color_change_box_01 10s;
-webkit-animation-iteration-count:infinite;

animation:color_change_box_01 10s;
animation-iteration-count:infinite;
display:inline;
}

.void_03{
-webkit-order:13;
order:13;
width:calc(12.5% - 4px);
height:288px;
background:white;
display:inline;
}

.void_04{
-webkit-order:15;
order:15;
width:calc(12.5% - 4px);
background:white;
display:inline;
}

.void_05{
-webkit-order:18;
order:18;
width:calc(37.5% - 4px);
height:144px;
background:white;
display:inline;
}

.void_06{
-webkit-order:20;
order:20;
width:calc(12.5% - 4px);
height:144px;
-webkit-animation:color_change_box_02 20s;
-webkit-animation-iteration-count:infinite;

animation:color_change_box_02 20s;
animation-iteration-count:infinite;
display:inline;
}


/* section 오버랩 설정 */

.intro_website_section:hover{background:black;}
.intro_fluorf_section:hover {background:gold;}
.news_section:hover         {background:crimson;}
.daily_essay_section:hover  {background:black;}
.album_section:hover        {opacity:1.0; filter:alpha(opacity=100);}
.article_section:hover      {background:crimson;}
.guestbook_section:hover         {background:gold;}


/* footer 부분 */

.footer{
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-order:21;
order:21;
width:100%;
height:100px;
margin-top:20px;
}

.footer iframe{
width:80%;
height:100%;
margin:0 auto;
border:0px;
}


/* hyperlink 설정 */

section a.whitelink:link {color:white; text-decoration:none;}
section a.whitelink:visited {color:white; text-decoration:none;}
section a.whitelink:hover {color:white; text-decoration:none;}
section a.whitelink:active {color:white; text-decoration:none;}

section a.blacklink:link {color:black; text-decoration:none;}
section a.blacklink:visited {color:black; text-decoration:none;}
section a.blacklink:hover {color:black; text-decoration:none;}
section a.blacklink:active {color:black; text-decoration:none;}

.intro_website_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.intro_fluorf_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.daily_essay_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.news_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

.album_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.article_section a{
display:block;
width:calc(100% - 8px);
height:280px;
padding:4px;
}

.guestbook_section a{
display:block;
width:calc(100% - 8px);
height:136px;
padding:4px;
}

}



/* media query 비적용 코드들 */


/* section 내 스타일 설정 */

.whitecharacter{
color:white;
}


/* section 내 color change box 설정 */

@-webkit-keyframes color_change_box_01 {
0%          {background:white;}
50%         {background:black;}
100%        {background:white;}
}

@keyframes color_change_box_01 {
0%          {background:white;}
50%         {background:black;}
100%        {background:white;}
}

@-webkit-keyframes color_change_box_02 {
0%          {background:crimson;}
33.33333%   {background:mediumblue;}
66.66666%   {background:gold;}
100%        {background:crimson;}
}

@keyframes color_change_box_02 {
0%          {background:crimson;}
33.33333%   {background:mediumblue;}
66.66666%   {background:gold;}
100%        {background:crimson;}
}