@import (once) "default.less";
@import (once) "common.less";


@media (max-width:960px){
}

@media (max-width:640px){
}


/* .outline ///////////////////////*/
.outline{
padding:20px 0 0 0;

.icon{
.dib;
.vam;
margin:0 0 0 -10px;
}
h2{
.dib;
.vam;
img{height:40px; }
}
article{
width:820px;
.center;
}
em{
.bold;
font-size:12pt;
}
h3{
padding:40px 0 20px 0;
}
.table{
width:100%;
border:2px @black solid;
}
th, td{
padding:10px;
border:1px @black solid;
}
th{
.bg_glay;
}
}

@media (max-width:960px){
.outline{
article{
width:95%;
}
em{
.db;
padding:20px 0 0 0;
img { max-width:100%; }
}
}
}

@media (max-width:720px){
.outline{
.icon{
height:80px;
margin:0;
}
h2 img{
height:30px;
}
h3{
padding:20px 0 10px 0;
img{ height:20px; }
}
}
}


@media (max-width:560px){
.outline{

header{
width:300px;
}
article{
width:300px;
}
.icon{
height:60px;
margin:0 5px 0 -10px;
}
h2 img{
height:25px;
}
h3{
padding:10px 0 10px 0;
img{ height:15px; }
}
em{
.db;
padding:20px 0;
.tac;
}
em img{
width:80%;
}
th{
.db;
}
td{
.db;
border:0;
}

}
}

/* entry ///////////////////////*/
.entry{
padding:80px 0 0 0;

header{
padding:10px 0;
border-bottom:2px @black solid;
width:820px;
}
article{
width:820px;
.center;
}
ul{
.right;
padding:10px 0;
}
li{
.dib;
}
p{
margin:0 0 0 30px;
padding:0 30px 5px 0;
background:url("../image/point2.svg") no-repeat 95% 5px;
border-bottom:2px @white solid;
}
p:hover{
border-bottom:2px @black solid;
}
}


@media (max-width:960px){
.entry{
header{
width:95%;
}
article{
width:95%;
}
em{
.db;
padding:20px 0 0 0;
img { max-width:100%; }
}
}
}

@media (max-width:720px){
.entry{
.icon{
height:80px;
margin:0;
}
h2 img{
height:30px;
}
h3{
padding:20px 0 10px 0;
img{ height:20px; }
}
}
}

@media (max-width:560px){
.entry{
padding:40px 0 0 0;

header{
width:300px;
}
article{
width:300px;
}
h2 img{
width:200px;
}

ul{
.left;
}
p{
margin:0;
padding:0 30px 5px 0;
}
li p{
background:url("../image/point2.svg") no-repeat 95% 10px;
background-size:10px;
img{
height:15px;
}
}


}
}