@charset "UTF-8";

.contentsArea .planMenu { float: left; margin-left: 2%; width: 49%; height: 50px; display: block; position: relative; overflow: hidden; text-decoration: none; }
.contentsArea .planMenu:first-child { margin-left: 0; }
.contentsArea .planMenu div { z-index: 100; position: absolute; width: 100%; font-size: 9px; color: #fff; line-height: 1.2; letter-spacing: 1px; text-align: center; }
.contentsArea .planMenu div { 
	top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.contentsArea .planMenu div span { font-size: 15px; font-weight: bold; color: #fff; letter-spacing: 1px; font-family: 'Tinos' , Times New Roman , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , serif;  }
.contentsArea .planMenu .triangle:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 10px solid #950000;
    border-left: 10px solid transparent;
	position: absolute;
	right: 3px;
	bottom: 3px;
}
.contentsArea .planMenu div span:before { content:attr(data-label); font-family: 'Tinos' , Times New Roman , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , serif; }

.contentsArea .planMenu { background-color: #626262; }
.contentsArea .planMenu:hover { background-color: #2e4446; }
.contentsArea .planMenu.hover { background-color: #2e4446; }
.contentsArea .planMenu p { color: #f5f5f5; }
.contentsArea .planMenu p span { color: #f5f5f5; }
.contentsArea .planMenu .triangle:before { border-bottom: 10px solid #009494; border-left: 10px solid transparent; }



@media screen and (min-width: 768px){

.contentsArea .planMenu { float: left; margin-left: 2%; width: 49%; height: 60px; display: block; position: relative; overflow: hidden; text-decoration: none; }
.contentsArea .planMenu:first-child { margin-left: 0; }
.contentsArea .planMenu div { z-index: 100; position: absolute; width: 100%; font-size: 12px; color: #fff; line-height: 1.2; letter-spacing: 1px; text-align: center; }
.contentsArea .planMenu div { 
	top: 50%;
	left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.contentsArea .planMenu div span { font-size: 23px; font-weight: bold; color: #fff; letter-spacing: 1px; font-family: 'Tinos' , Times New Roman , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , serif;  }
.contentsArea .planMenu .triangle:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 10px solid #950000;
    border-left: 10px solid transparent;
	position: absolute;
	right: 3px;
	bottom: 3px;
}
.contentsArea .planMenu div span:before { content:attr(data-label); font-family: 'Tinos' , Times New Roman , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , serif; }

.contentsArea .planMenu { background-color: #626262; }
.contentsArea .planMenu:hover { background-color: #2e4446; }
.contentsArea .planMenu.hover { background-color: #2e4446; }
.contentsArea .planMenu p { color: #f5f5f5; }
.contentsArea .planMenu p span { color: #f5f5f5; }
.contentsArea .planMenu .triangle:before { border-bottom: 10px solid #009494; border-left: 10px solid transparent; }


}