/*
	linked_contents
 */
div.linked_contents {
    position: relative;
    /*border-radius: 5px;*/
    overflow: hidden;
}
div.intro {
    background-color: white;
    color: black;
    display: none;
    float: left;
}
div.intro * {
    clear: left;
}
/*
	整體
*/
.card {
	position: relative;
	border-radius: 20px;
	border-top: 6px solid #0E7F83;
	box-sizing: border-box;
	background-color: rgba(14, 127, 131, 0.2);
	font-size: 16px;
	height: 310px;
	list-style-type: none;
	margin: 1%;
	padding: 1% 1.2% 4% 1.2%;/* 上右下左 */
	display: inline-block;
	text-align: left;
	vertical-align: top;
	width: 45%;
}
.card li p, .md_b p {
	margin-top: 0;
	margin-bottom: 0;
}
.main {
	padding: 0;
	margin: 0;
}

/*
	上色
*/
.card {
	border-top: 12px solid #0E7F83;
}

.card .title_1{
	border-bottom: 5px solid #0E7F83;
}

.card .line,
.card .contact > input[type=radio]:checked + label{
	border-color: #0E7F83;
}

/*
	點擊觀看詳細資訊
*/
.md_a_disable, .md_a_short, .md_a_long, .md_b {
	position: absolute;
	background-color: #87BFC1;
	height: 1.5em;
	bottom: 0;
	right: 0;
	font-size: 16px;
}
.md_a_disable, .md_a_short, .md_a_long {
	border-top-left-radius: 100%;
	content: "";
	width: 20px;
	transition: right 0.3s;
}
.md_b {
	overflow: hidden;
	text-overflow: clip;
	text-decoration: none;
	white-space: nowrap;
	box-sizing: border-box;
}
.md_b a {
	text-decoration: none;
}
.md_b p {
  display: inline-block;
	color: #FFF;
	transition: width 0.3s;
	width: 0px;
	text-align: center;
	font-size: 18px;
}
.md_b p:hover {
  opacity: 0.9;
  color: rgb(0, 188, 255);
}
.card:hover .md_a_short.enabled{
	right: 90px;
}
.card:hover .md_a_long.enabled{
	right: 180px;
}
.card:hover .md_b.enabled p{
	width: 90px;
}



/*
	圖片
*/
.card_top {
	margin: 0;
	padding: 0;
	text-align: left;
	display: inline-block;
	width: 100%;
	background-image: url();
}
.card>.card_top>div.img {
	height: auto;
	width: 150px;
	height: 150px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align : top;
	box-shadow: 0 0 12px #BBB;
}

/*
	資訊
*/
.card .line {
	border-radius: 4px;
	content: "";
	height: 0px;
	padding: 0;
}

.card ul.info1 {
	margin: 0 0 0 2%;
	padding: 0;
	width: 55%;
	display: inline-block;
	vertical-align : top;
	text-align: left;
	list-style-type: none;
}
.card .title_1, .title_2, .degree {
	position: relative;
}

.card .title_1 {
	font-weight: bold;
	width: 100%;
	border-radius: 4px;
	font-size: 16px;
}
.card .title_1 span {
	float: right;
	font-size: 16px;
}
.card .title_2 {
	text-align: right;
	font-size: 16px;
	float: right;
}
.card .degree {
	margin-top: 0.3em;
}
.card .degree * {
	font-size: 16px;
}
.card .degree>ul>li {
	list-style-type: none;
}


/*


 */
.contact img {
	height: 15px;
	width: 15px;
}
.contacts, .oh {
	display: inline-block;
}
.oh span {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: 0.2em;
	font-size: 0.95em;
}


.contacts{
position:relative;
display: inline-block;
width: 100%;
padding: 0.5em 0 2em 0;
margin: 0;
font-size: 16px;
}

.contact {
	display:inline-block;
	padding: 0;
	margin: 0;
}

.contact > input[type=radio]{
	display:none;
}

.contact > label{
	display:inline-block;
	position:relative;
	margin: 0;
	padding: 3px;
	cursor: pointer;
	border: 3px solid transparent;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
}

.contact > label > img {
	position: relative;
	vertical-align: middle;
	display: inline-block;
}

.contact > label::after {
	content: '';
	height: 100%;
	width: 0;
	position: relative;
	vertical-align: middle;
	display: inline-block;
}

.contact > label:hover{
	border-color: rgba(14, 127, 131, 0.3);
}

.contact > .content{
	display:none;
	position:absolute;
	top:2.5em;
	left:0;
	text-align: center;
	margin: 0;
	z-index:1;
	padding:10px;
	width: 100%;
	font-size: 18px;
}

.contact > input[type=radio]:checked + label{
	z-index:2;
}

.contact > input[type=radio]:checked ~ .content{
	display:inline-block;
}