238 lines
5.7 KiB
SCSS
238 lines
5.7 KiB
SCSS
.statusContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
background: url(../images/map_2.png);
|
|
background-position: 50% 150%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
|
|
>ol {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 20px;
|
|
display: none;
|
|
|
|
>li {
|
|
float: left;
|
|
|
|
|
|
>a {
|
|
padding: 10px;
|
|
//width: 40px;
|
|
//height: 40px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
color: #333;
|
|
background-color: #ddd;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
>p {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 80px auto 0;
|
|
text-align: center;
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
color: #000;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: -25px;
|
|
left: 50%;
|
|
width: 100px;
|
|
margin-left : -50px;
|
|
height: 5px;
|
|
background-color: #000;
|
|
content: "";
|
|
}
|
|
|
|
}//end of p
|
|
|
|
>.status {
|
|
margin-top: 100px;
|
|
width: 100%;
|
|
|
|
>.inner {
|
|
position: relative;//2018 relative
|
|
width: 1200px;
|
|
margin: 0 auto 20px;
|
|
border-top: 2px solid #ddd;
|
|
|
|
&:last-child {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
>.since {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50px;
|
|
font-size: 35px;
|
|
font-weight: 600;
|
|
color: #0061a9;
|
|
content :"2018";
|
|
}
|
|
|
|
|
|
|
|
>ul {
|
|
padding-top: 20px;
|
|
padding-left: 350px;
|
|
width: 800px;
|
|
margin : 0 auto;
|
|
text-align: left;
|
|
font-size: 17px;
|
|
|
|
|
|
|
|
|
|
|
|
>li {
|
|
padding: 20px 0 10px;
|
|
border-bottom: 1px dashed #ccc;
|
|
line-height: 1.7em;
|
|
|
|
>dl {
|
|
|
|
>dd {
|
|
|
|
>ul{
|
|
>li {
|
|
float: left;
|
|
|
|
&:last-child {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}//end of inner
|
|
|
|
}//end of status
|
|
|
|
}//end of statusContainer
|
|
|
|
|
|
|
|
@media screen and (max-width:768px) {
|
|
|
|
|
|
.statusContainer {
|
|
width: 100%;
|
|
height: auto;
|
|
background: url(../images/map_2.png);
|
|
background-position: 50% 50%;// 50% 150%
|
|
background-repeat: no-repeat;
|
|
background-size: cover;//contain
|
|
|
|
>ol {
|
|
display: block;
|
|
|
|
>li {
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
>p {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 80px auto 0;
|
|
text-align: center;
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
color: #000;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: -25px;
|
|
left: 50%;
|
|
width: 50px;
|
|
margin-left : -25px;
|
|
height: 3px;
|
|
background-color: #000;
|
|
content: "";
|
|
}
|
|
|
|
}//end of p
|
|
|
|
>.status {
|
|
margin-top: 100px;
|
|
width: 100%;
|
|
|
|
>.inner {
|
|
position: relative;//2018 relative
|
|
width: 100%;//1200px
|
|
margin: 0 auto 20px;
|
|
border-top: 2px solid #ddd;
|
|
|
|
&:last-child {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
>.since {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 50%;//50px
|
|
transform: translateX(-50%);
|
|
font-size: 50px;
|
|
font-weight: 600;
|
|
color: #0061a9;
|
|
content :"2018";
|
|
}
|
|
|
|
|
|
|
|
>ul {
|
|
padding-top: 70px;
|
|
padding-left: 0px;//350px
|
|
width: 100%;//630px
|
|
margin : 0 auto;
|
|
text-align: left;
|
|
font-size: 15px;
|
|
|
|
|
|
>li {
|
|
padding: 20px; // 20px 0
|
|
border-bottom: 1px dashed #ccc;
|
|
line-height: 1.5em;
|
|
|
|
>dl {
|
|
>dd {
|
|
padding: 10px 0;//추가
|
|
line-height: 1.3em;
|
|
|
|
w {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}//end of inner
|
|
|
|
}//end of status
|
|
|
|
}//end of statusContainer
|
|
|
|
}//media Query |