@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;
}

/* 글꼴 지정 */

@font-face{font-family:'Nanum Gothic'; src:url('/webfonts/NanumGothic.woff')}

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

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;
}


/* subheader section 부분 */

.subheader_01{
-webkit-order:3;
order:3;
width:calc(65% - 4px);
height:50px;
margin:2px;
background:gold;
display:inline;
}

.subheader_02{
-webkit-order:4;
order:4;
width:calc(35% - 4px);
height:50px;
margin:2px;
background:white;
display:inline;
}

.subheader_03{
display:none;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

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

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

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

.youtube_section{
display:none;
}

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

.version_section_08{
display:none;
}

.article_section{
-webkit-order:11;
order:11;
width:calc(25% - 4px);
height:200px;
background:gold;
}

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

.guestbook_section{
-webkit-order:13;
order:13;
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:14;
order:14;
width:calc(100% - 4px);
height:100px;
background:white;
}

.contact_section img{
height:60px;
}

.contents_section{
-webkit-order:5;
order:5;
width:100%;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
background:white;
border-radius:10px;
}


/* void section 부분 */

.void_01{
-webkit-order:9;
order:9;
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{
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:15;
order:15;
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;
}

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

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


/* CCL 설정 */

.ccl{
width:100%;
margin-top:20px;
margin-bottom:20px;
margin-left:4px;
margin-right:4px;
}

.cclimg{
width:100px;
margin: 4px;
}

.cclphrase{
margin: 4px;
font-family: 'Nanum Gothic', san-serif;
font-size:0.85rem;
letter-spacing:-0.03rem;
}

/* 태블릿 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;
}

/* subheader section 부분 */

.subheader_01{
-webkit-order:3;
order:3;
width:calc(50% - 4px);
height:72px;
margin:2px;
background:gold;
display:inline;
}

.subheader_02{
-webkit-order:4;
order:4;
width:calc(25% - 4px);
height:72px;
margin:2px;
background:white;
display:inline;
}

.subheader_03{
-webkit-order:5;
order:5;
width:calc(25% - 4px);
height:72px;
margin:2px;
background:crimson;
display:inline;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

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

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

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

.youtube_section{
display:none;
}

.youtube_section iframe{
border:0px;
}

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

.version_section_08{
display:none;
}

.article_section{
-webkit-order:10;
order:10;
width:calc(20% - 4px);
height:100px;
background:gold;
}

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

.guestbook_section{
-webkit-order:13;
order:13;
width:calc(60% - 4px);
height:50px;
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:14;
order:14;
width:calc(40% - 4px);
height:50px;
background:white;
}

.contact_section img{
height:35px;
}

.contents_section{
-webkit-order:5;
order:5;
width:100%;
padding-left:50px;
padding-right:50px;
padding-top:50px;
padding-bottom:50px;
background:white;
border-radius:10px;
}


/* void section 부분 */

.void_01{
display:none;
}

.void_02{
display:none;
}

.void_03{
display:none;
}

.void_04{
-webkit-order:11;
order:11;
width:calc(20% - 4px);
height:100px;
background:white;
display:inline;
}

.void_05{
display:none;
}

.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:15;
order:15;
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:42px;
padding:4px;
}

.intro_fluorf_section a{
display:block;
width:calc(100% - 8px);
height:42px;
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:42px;
padding:4px;
}

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

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

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

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

.subheader_02 a{
display:block;
width:calc(100% - 8px);
height:64px;
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;
}

/* subheader section 부분 */

.subheader_01{
-webkit-order:3;
order:3;
width:calc(50% - 4px);
height:72px;
margin:2px;
background:gold;
display:inline;
}

.subheader_02{
-webkit-order:4;
order:4;
width:calc(25% - 4px);
height:72px;
margin:2px;
background:white;
display:inline;
}

.subheader_03{
-webkit-order:5;
order:5;
width:calc(25% - 4px);
height:72px;
margin:2px;
background:crimson;
display:inline;
}


/* contents section 부분 */

#wrap section{
margin:2px;
}

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

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

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

.youtube_section{
display:none;
}

.youtube_section iframe{
border:0px;
}

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

.version_section_08{
display:none;
}

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

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

.guestbook_section{
-webkit-order:14;
order:14;
width:calc(25% - 4px);
height:100px;
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:15;
order:15;
width:calc(25% - 4px);
height:100px;
background:white;
}

.contact_section img{
height:40px;
}

.contents_section{
-webkit-order:6;
order:6;
width:100%;
padding-left:150px;
padding-right:150px;
padding-top:100px;
padding-bottom:100px;
background:white;
border-radius:10px;
}



/* void section 부분 */

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

.void_02{
display:none;
}

.void_03{
display:none;
}

.void_04{
display:none;
}

.void_05{
display:none;
}

.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:16;
order:16;
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오후 7:21 2015-02-23 {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:42px;
padding:4px;
}

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

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

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

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

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

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

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

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

}



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


/* section 내 스타일 설정 */

.whitecharacter{
color:white;
}

.contents_section p{
margin-top:1em;
margin-bottom:1em;
margin-left:0;
margin-right:0;
font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
font-weight:100;
text-indent:1rem;
text-align:justify;
line-height:1.6rem;
}

p.contents_ul{
font-family: 'Jeju Gothic', san-serif;
font-size:1.3rem;
margin-top:2rem;
}

p.contents_ul:before{
content:"―";
padding-right:4px;
}

p.contents_ul:first-child{
margin-top:0;
}

span.tbdkor{
font-size:0.9rem;
color:#ddd;
}

span.tbdeng{
font-size:0.7rem;
font-style:italic;
color:#ddd;
}



/* XE 관련 설정 */

.contentBody p{
margin:0;
font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
line-height:160%;
}

.contentBody ol{
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

.xe_content p{

font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
line-height:160%;
}

.author{
font-family: 'Jeju Gothic', san-serif;
}

.ssk{
font-family: 'Jeju Gothic', san-serif;
text-decoration: underline;
}

td.title{
font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
}

div.title h1{
font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
}

td.title h4{
font-family: 'Nanum Gothic', san-serif;
font-size:1rem;
}

#essay{
font-size:0.5rem;
font-color:gray;
}

#essay:link {color:gray; text-decoration:none;}
#essay:visited {color:gray; text-decoration:none;}
#essay:hover {color:black; text-decoration:underline;}
#essay:active {color:black; text-decoration:none;}