h2.ss-subtitle{
padding: 10px 10px 40px;
font-size: 52px;
text-transform: uppercase;
color: rgba(0,0,0,0.8);
position: relative;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
h2.ss-subtitle:before{
width: 4px;
height: 40px;
background: rgba(17,17,22,0.8);
content: '';
position: absolute;
right: 75%;
margin-right: -4px;
bottom: -4px;
-moz-border-radius: 2px 2px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
h2.ss-subtitle:after{
width: 25%;
height: 0px;
border-bottom: 4px dotted rgba(17,17,22,0.8);
content: '';
position: absolute;
right: 50%;
margin-right: -1px;
bottom: -4px;
}
.ss-links{
position: fixed;
right: 10px;
top: 100px;
width: 80px;
z-index: 100;
}
.ss-links a{
background: rgba(70,64,51,0.4);
font-size: 16px;
width: 65px;
height: 65px;
line-height: 20px;
margin: 5px;
float: left;
border-radius: 50%;
display: block;
text-align: center;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
transition: background 0.2s linear;
font-size: 0.9em;
font-weight: lighter;
font-family: 微軟正黑體;
}
.ss-links .edit_link {
background: rgba(70,64,51,0.7);
}
.ss-links a:hover{
background: rgba(70,64,51,0.2);
}
.ss-links a img:hover{
opacity: 0.4;
}
.ss-links a p {
padding-top: 10px;
}
.ss-container{
width: 100%;
position: relative;
text-align: left;
float: left;
overflow: hidden;
padding-bottom: 500px;
}
.ss-container h2{
font-size: 40px;
text-transform: uppercase;
color: rgba(78,84,123,0.2);
text-shadow: 0px 1px 1px #fff;
padding: 20px 0px;
}
.ss-container:before{
position: absolute;
width: 4px;
background: rgba(111,106,96,0.8);
top: 0px;
left: 50%;
margin-left: -2px;
content: '';
height: 100%;
}
.ss-row{
width: 100%;
clear: both;
float: left;
position: relative;
padding: 30px 0;
}
.ss-left, .ss-right{
float: left;
width: 48%;
position: relative;
}
.ss-right{
padding-left: 2%;
}
.ss-left{
text-align: right;
float: left;
padding-right: 2%;
}
.ss-circle{
/*padding: 10px;*/
background: white;
text-align: left;
/*border-radius: 50%;*/
overflow: hidden;
display: block;
/*text-indent: -9000px;
text-align: left;*/
/*-webkit-box-shadow:
0px 2px 5px rgba(0,0,0,0.7) inset,
0px 0px 0px 5px rgba(61,64,85,0.3);
-moz-box-shadow:
0px 2px 5px rgba(0,0,0,0.7) inset,
0px 0px 0px 5px rgba(61,64,85,0.3);
box-shadow:
0px 2px 5px rgba(0,0,0,0.7) inset,
0px 0px 0px 5px rgba(61,64,85,0.3);*/
background-size: cover;
background-color: #f0f0f0;
background-repeat: no-repeat;
background-position: center center;
position: static;
border-radius:10px;
}
.ss-small .ss-circle{
width: 377px;
height: 210px;
background: white;
}
.ss-medium .ss-circle{
width: 377px;
height: 210px;
background: white;
}
.ss-large .ss-circle{
width: 377px;
height: 210px;
background: white;
}
.ss-circle-deco:before{
width: 10%;
height: 0px;
border-bottom: 5px dotted #ddd;
border-bottom: 5px dotted rgba(17, 17, 22, 0.3);
-webkit-box-shadow: 0px 1px 1px #fff;
-moz-box-shadow: 0px 1px 1px #fff;
box-shadow: 0px 1px 1px #fff;
position: absolute;
top: 50%;
content: '';
margin-top: -3px;
}
.ss-circle-deco:after{
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
content: '';
position: absolute;
top: 50%;
margin-top: -10px;
}
.ss-left .ss-circle-deco:before{
right: 2%;
}
.ss-right .ss-circle-deco:before{
left: 2%;
}
.ss-left .ss-circle-deco:after{
right: 0;
border-right: 10px solid rgba(17,17,22,0.8);
}
.ss-right .ss-circle-deco:after{
left: 0;
border-left: 10px solid rgba(17,17,22,0.8);
}
.ss-left .ss-circle{
float: right;
margin-right: 10%;
}
.ss-right .ss-circle{
float: left;
margin-left: 10%;
}
.ss-container h3{
margin-top: 34px;
padding: 10px 15px;
/*background: rgba(26, 27, 33, 0.6);*/
background: rgba(70, 64, 51, 0.6);
/*text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8);*/
}
.ss-container .ss-medium h3{
margin-top: 82px;
}
.ss-container .ss-large h3{
margin-top: 133px;
}
.ss-container .ss-left h3{
/*border-right: 5px solid rgba(164,166,181,0.8);*/
border-right: 5px solid rgba(111,106,96,0.8);
}
.ss-container .ss-right h3{
/*border-left: 5px solid rgba(164,166,181,0.8);*/
border-left: 5px solid rgba(111,106,96,0.8);
}
.ss-container h3 span{
color: rgba(255,255,255,0.8);
font-size: 23px;
display: block;
padding-bottom: 5px;
}
.ss-container h3 div{
font-family: 微軟正黑體;
font-size: 18px;
color: rgba(255,255,255,0.9);
display: block;
letter-spacing: 0.3px;
}
.ss-container h3 div:hover{
color: rgba(255,255,255,1);
cursor: default;
}