body { background: url(../images/travelbg.jpg) center repeat;}

/*--travel top--*/
.nantouTravalTop { text-align: center;}
.nantouTravalTop img { width: 800px;}
.nantouTravalTop_mobile img { display: none;}
.nantouTravalMenu { background: rgba(255, 255, 255, 0.5); padding: 3px 20px; border-radius: 0 0 10px 10px; border-bottom: 3px #9d7b7b dashed; border-left: 3px #9d7b7b dashed; border-right: 3px #9d7b7b dashed; color: #9d7b7b; width: 900px; margin: auto;}
.nantouTravalMenu ul { margin: 0px; psdding: 0px; padding-inline-start: 0px;}
.nantouTravalMenu ul li { padding: 0 30px; list-style-type: none;}
.nantouTravalMenu a { color: #9d7b7b; text-decoration: none;}
.nantouTravalMenu a:hover { color: #470000;}
/*--mabile--*/
.nantouTravalMenu_mobile { background: #470000; display: none;}
.nantouTravalMenu_mobile i { background: #c73a3a; color: #fff; padding: 10px 12px; font-size: 1.8rem;}
.topbar { background: rgba(0, 0, 0, 0.6); display: none;}
.topbar #myLinks { display: none; padding: 0 0 0 20px;}
.topbar a { display: block; color: #fff; text-decoration: none; line-height: 40px; font-size: 1.2rem;}

/*--data button--*/
.blackColor { background: rgba(0, 0, 0, 0.7);}

.playContent { position: relative; margin: 0 20px; border: 0; padding: 0;}

.imgPlay { display: block; width: 100%; height: auto; box-shadow: 0px 0px 2px #000;}
.overlayPlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; transition:  0.5s; background: rgba(0, 0, 0, 0.6);}
.text { color: #fff; font-size: 18px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}
.playContent:hover .overlayPlay { opacity: 1;}


/*--content--*/
.contentBox { margin: auto; padding: 20px; background: rgba(255, 255, 255, 0.8); border-radius: 10px; bprder: 2px #9d7b7b dashed; width: 990px;}

.contentBox h2 { color: #c73a3a; font-weight: bold; text-align: center; padding: 0 0 20px 0;}
.contentBox h5 { color: #870000; font-weight: bold;}

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

@media (max-width: 576px) {
    .playContent { margin: 10px;}
    .nantouTravalTop img { display: none;}
    .topbar { display: block;}
    .nantouTravalTop_mobile img { display: block; width: 100%;}
    .nantouTravalMenu { display: none;}
}

@media (max-width: 768px) {
    .container { width: 100%; margin-right: auto; margin-left: auto;}
    .nantouTravalMenu { width: 100%;}
    .nantouTravalMenu ul li { padding: 0 20px;}
    .nantouTravalTop img { width: 100%;}
    .contentBox { width: 90%;}
    .playContent { margin: 10px 20px;}
}

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