body{background:#242424;}
/*************************************************************************************************************************
none bullet없애기
symbols 1로 시작하는 십진수 
circle 빈 원
decimal 1로 시작하는 십진수
disc 검정색으로 채워진 원
decimal-leading-zero 01로 시작하는 십진수
square 검정색으로 채워진 사각형
aremenian 아르메니아 숫자 
lower-greek 그리스 문자 소문자
georgian 조지 왕조시대의 숫자 
lower-roman 소문자 로마 숫자
upper-roman 대문자 알파벳 
lower-alpha 소문자 알파벳
lower-latin 소문자 라틴
upper-alpha 대문자 알파벳 
upper-latin 대문자 라틴
/*************************************************************************************************************************/
.ula{list-style-type: disc;}
@media all and (orientation:landscape) {

p{color:#999;font-size:20px;}
.list{color:#FFF;font-size:20px;font-weight:bolder;text-decoration:none;cursor: pointer;
      background:#456;padding:18px;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}
.list:hover{color:#F87;}
.head{color:#FFF;font-size:90px;font-weight:bolder;}
h1{color:#FFF;font-size:60px;font-weight:bolder;}
h2{color:#FFF;font-size:40px;font-weight:bolder;}
h3{color:#F66;font-size:20px;font-weight:bolder;}

.icon-office{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:60px;font-weight:bolder;text-decoration:none;
padding:24px; border:4px #FFF solid; border-radius: 50%; position:fixed; bottom:304px; right:24px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-office:hover{background:#F90;}

.icon-books{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:60px;font-weight:bolder;text-decoration:none;
padding:24px; border:4px #FFF solid; border-radius: 50%; position:fixed; bottom:164px; right:24px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-books:hover{background:#F90;}

.icon-list2{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:60px;font-weight:bolder;text-decoration:none;
padding:24px; border:4px #FFF solid; border-radius: 50%; position:fixed; bottom:24px; right:24px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-list2:hover{background:#F90;}}
/*************************************************************************************************************************/
@media all and (orientation:portrait) {
p{color:#999;font-size:48px;}
.list{color:#FFF;font-size:32px;font-weight:bolder;text-decoration:none;cursor: pointer;
      background:#456;padding:30px;border:0px solid #FFF;
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}
.list:hover{color:#F87;}
.head{color:#FFF;font-size:160px;font-weight:bolder;}
h1{color:#FFF;font-size:120px;font-weight:bolder;}
h2{color:#FFF;font-size:90px;font-weight:bolder;}
h3{color:#F66;font-size:90px;font-weight:bolder;}

.icon-office{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:120px;font-weight:bolder;text-decoration:none;
padding:40px; border:8px #FFF solid; border-radius: 50%; position:fixed; bottom:-440px; right:40px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-office:hover{background:#F90;}

.icon-books{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:120px;font-weight:bolder;text-decoration:none;
padding:40px; border:8px #FFF solid; border-radius: 50%; position:fixed; bottom:-440px; right:40px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-books:hover{background:#F90;}

.icon-list2{ z-index:20000; background:rgba(000, 000, 000, 0.4);color:#FFF;font-size:120px;font-weight:bolder;text-decoration:none;
padding:40px; border:8px #FFF solid; border-radius: 50%; position:fixed; bottom:40px; right:40px; cursor:pointer;

  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;}

.icon-list2:hover{background:#F90;}}