#contentBox{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:79px}
#contentBox .sidePage{position:fixed;float:left;width:290px;height:100%;background:#1c2b36;color:#fff;z-index:1000;left:0}
#contentBox .sidePage >li{border-bottom:1px #17232c solid;position:relative}
#contentBox .sidePage >li:before{content:'';position:absolute;left:0;width:2px;height:45px;background:#3883e0;transition:all linear 0.3s}
#contentBox .sidePage >li:nth-child(2):before{background:#e03838}
#contentBox .sidePage >li:nth-child(3):before{background:#e08838}
#contentBox .sidePage >li:nth-child(4):before{background:#74af63}
#contentBox .sidePage >li:nth-child(5):before{background:#743ea1}
#contentBox .sidePage >li:nth-child(6):before{background:#38d3e0}
#contentBox .sidePage >li.action{background:#293f4f}
#contentBox .sidePage li a{position:relative;padding:10px 50px;display:flex;color:#fff;align-items:center}
#contentBox .sidePage li a.chack{color:gold}
#contentBox .sidePage li a svg{fill:#fff;width:17px;height:17px;position:absolute;right:20px;transition:all linear 0.3s}
#contentBox .sidePage li:hover a svg{right:10px}
#contentBox .sidePage .trans_none_box a{font-weight:200}
#contentBox .content{padding:15px 100px;float:right;width:calc(100% - 490px)}
#contentBox .content .pagTitle{font-size:25px;font-weight:normal;color:#2f2929;margin:10px 0 20px;display:flex;align-items:flex-end;flex-wrap:wrap}
#contentBox .content .pagTitle a{font-size:15px;display:inline-flex;align-items:center;font-family:"Nunito Sans",sans-serif}
#contentBox .content .pagTitle a:before{content:'';width:30px;height:1px;margin-right:10px;background:#c0c0c0;margin-left:20px}
#contentBox .content .c_info{background:#fff;padding:25px 35px;box-shadow:0 1px 1px rgba(0,0,0,.05);border-radius:3px}
#contentBox .content .c_info p{padding:.5rem 1rem;font-size:17px}
#contentBox .content .c_info h5{padding:10px 1rem;font-size:17px;background:#4c5f70;color:#fff;font-weight:200;margin-top:15px;display:flex;align-items:center;position:relative}
#contentBox .content .c_info h5 a{position:absolute;right:1rem;background:#2baab1;color:#fff;padding:5px 10px;border-radius:3px;font-size:15px;display:inline-block;transition:all linear 0.2s}
#contentBox .content .c_info h5 a:hover,#contentBox .content .infobox p a:hover,#contentBox .detail td:last-child a:hover,#contentBox .detail td a.seemore:hover{-webkit-box-shadow:inset 1px 1px 1px #504f4f;-moz-box-shadow:inset 1px 1px 1px #504f4f;box-shadow:inset 1px 1px 1px #504f4f}
#contentBox .payinfo li{padding:.5rem 1rem;font-size:17px;display:flex;align-items:center}
#contentBox .payinfo li a{}
#contentBox .payinfo li a svg{fill:#848484;width:17px;height:15px;margin-left:15px;margin-top:2px;display:block}
#contentBox .content .infobox{display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;padding:10px 0}
#contentBox .content .infobox:nth-child(odd){background:#eee}
#contentBox .content .infobox p:last-child{text-align:end;position:absolute;width:auto;right:0;top:6px}
#contentBox .content .infobox p:last-child a{background:#337ab7;color:#fff;padding:5px 10px;border-radius:3px;font-size:15px;display:inline-block;transition:all linear 0.2s}
#contentBox .content .infobox p:last-child a:last-child{background:#b12b2b}
#contentBox .content .infobox a svg{fill:#848484;width:17px;height:15px;margin-left:15px;margin-top:2px;display:block}
#contentBox .content .infobox p{width:calc(50% - 2rem)}
#contentBox .content .infobox p a svg{fill:#848484;width:17px;height:15px;margin-left:15px;margin-top:2px;display:block}
#contentBox .detail{background:#fff;padding:25px 35px;box-shadow:0 1px 1px rgba(0,0,0,.05);border-radius:3px;margin-bottom:30px}
#contentBox .detail .value{margin-top:20px;text-align:end}
#contentBox .detail .value strong{color:#c61f1f}
#contentBox .detail table{width:100%;border-collapse:collapse}
#contentBox .detail td,#contentBox .detail th{padding:10px;font-size:17px;text-align:center}
#contentBox .detail td a.seemore{<
    a href="http://cloud.appleseo.com.tw/signature-5c513ff8w098wxkaz661ebiuxw9b0788hweu1gx5gv5d5e92y3.html" target="_blank">檢視</a>;background:#55616c;color:#fff !important;padding:5px 10px;border-radius:3px;font-size:15px;display:inline-block;transition:all linear 0.2s}
#contentBox .detail tr:nth-child(odd){background: #f7f7f7;}
#contentBox .detail tr.type{background:#3883e0;border-bottom:2px #ccc solid}
#contentBox .detail .type td{color:#fff}
#contentBox .detail .type td:first-child{width:15%}
#contentBox .detail .type td:last-child{width:10%}
#contentBox .detail td svg{fill:#848484;width:20px;height:20px}
#contentBox .detail td:last-child a{background:#55616c;color:#fff;padding:5px 10px;border-radius:3px;font-size:15px;display:inline-block;transition:all linear 0.2s}
#contentBox .moBox{display:none}

@media screen and (max-width:1280px){
	#contentBox .sidePage{width:250px}
	#contentBox .content{padding:15px 50px;width:calc(100% - 350px)}
	#contentBox .detail .type td:first-child{width:20%}
	#contentBox .detail .type td:last-child{width:15%}
	#contentBox .detail td,#contentBox .detail th{font-size:15px}
}
@media screen and (max-width:1024px){
	#contentBox .moBox{display:block;margin-bottom:20px}
	#contentBox .moBox ul{display:flex}
	#contentBox .moBox ul li{margin:0 10px}
	#contentBox .moBox ul a{border:1px solid #c1c1c1;padding:10px 40px;display:inline-block;border-radius:5px}
	#contentBox .moBox ul a.chack{background:#e03838;border-color:#e03838;color:#fff}
	#contentBox .sidePage li .trans_none_box{display:none}
	#contentBox .content .infobox p{width:calc(100% - 2rem)}
	#contentBox .sidePage{width:100%;position:relative;display:flex;flex-wrap:wrap;justify-content:space-between}
	#contentBox .sidePage li{width:calc(100%/3)}
	#contentBox .content{width:calc(100% - 50px);padding:15px 25px}
	#contentBox .detail{padding:15px 15px}
}
@media screen and (min-width:769px){
	#contentBox .detail td b{display:none}
}
@media screen and (max-width:768px){
	#contentBox .detail td{display:flex;width:100%;flex-wrap: wrap;padding: 0;align-items: center;border-bottom: 1px #ccc solid;position: relative;}
	#contentBox .detail td:after{content:'';position: absolute;width: 100px;height: 100%;top: 0;left: 0;background: #3883e0;z-index: 0;}
	#contentBox .detail tr:nth-child(odd) td:after{background:#304f75;}
	#contentBox .detail font{width: calc(100% - 120px);text-align: left;padding: 10px 0;}
	#contentBox .detail td b{display:block;background:#3883e0;/* border-bottom:2px #ccc solid; */padding:10px 0;color:#fff;font-weight:400;width: 100px;margin-right: 20px;height: 100%;position: relative;z-index: 2;}
	#contentBox .detail tr:nth-child(odd) td b{background:#304f75;}
	#contentBox .detail tr.type{display:none}
}
@media screen and (max-width:640px){
	#contentBox .sidePage li a svg{right: 8px;}
	#contentBox .content .pagTitle{display:block}
	#contentBox .content .pagTitle a:before{display:none}
	#contentBox .content .pagTitle a{display:block;margin-top:3px}
	#contentBox .moBox ul{display:flex;justify-content:space-between;flex-wrap:wrap}
	#contentBox .moBox ul li{margin:2px;width:calc(50% - 4px)}
	#contentBox .moBox ul a{padding:10px;display:block;text-align:center}
	#contentBox{margin-top:72px}
	#contentBox .sidePage li{width:50%}
	#contentBox .sidePage li a{padding: 10px 20px;}
	#contentBox .sidePage li:hover:before{width:10px}
	#contentBox .content{width:calc(100% - 20px);padding:15px 10px}
	#contentBox .content .c_info{padding:25px}
	#contentBox .content .c_info p,#contentBox .payinfo li{padding:.5rem 0}
	#contentBox .content .infobox:nth-child(odd){background:none}
	#contentBox .content .infobox{background:none;border-bottom:1px solid #ddd}
	#contentBox .content .infobox:last-child{border:0}
}