@charset "utf-8";

/* nav 2 common */
.diagram {position:relative; width:100%:}
.diagram ul {width:100%; margin-bottom:10px;}
.diagram ul:after {clear:both;content:"";display:block;}
.diagram ul li {position:relative; float:left; width:21.25%; text-align:center; border:1px solid #bbbbbb; background-color:#fff; margin-right:5%; padding-top:28px; padding-bottom:18px; margin-bottom:40px;}
.diagram ul li span {display:block;}
.diagram ul li.step1:before {content:"01";}
.diagram ul li.step2:before {content:"02";}
.diagram ul li.step3:before {content:"03";}
.diagram ul li.step4:before {content:"04";}
.diagram ul li.step5:before {content:"05";}
.diagram ul li.step6:before {content:"06";}
.diagram ul li:before {position:absolute; top:5px; left:10px; font-size:1.6rem; color:#8fb1ac; font-weight:400; line-height:30px; opacity:.8;}
.diagram ul li.cancel:before {}
.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
.diagram ul li.step5:after, .diagram ul li.step6:after {content:""; position:absolute; top:50%; right:-17%; margin-top:-23px; background:url('../img/img-right-arrow.png') 0px 0px no-repeat; width:20px; height:45px; background-size:20px 45px;}

.btn-download {position:relative; float:right; padding:14px 24px 14px 50px; color:#fff; background-color:#464e5b; border:1px solid #3d434e; display:inline-block; text-align:left;}
.btn-download span {position:absolute; top:10px; left:20px; color:#fff; font-size:20px;}

@media only screen and (min-width:1201px) {
	.diagram ul li.step4,
	.diagram ul li.step6 {margin-right:0;}
	.diagram ul li.step4:after,
	.diagram ul li.step6:after {display:none;}
	.diagram ul li.step5, .diagram ul li.step6 {margin-bottom:10px;}
}

@media only screen and (max-width:1200px) {
	.diagram ul li.step3,
	.diagram ul li.step6 {margin-right:0;}
	.diagram ul li.step3:after,
	.diagram ul li.step6:after {display:none;}
	.diagram ul li.step4,
	.diagram ul li.step5,
	.diagram ul li.step6 {margin-bottom:10px;}

	.diagram ul li {width:30%; }
	.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
	.diagram ul li.step5:after, .diagram ul li.step6:after {right:-12%;}
}

@media only screen and (max-width:1000px) {
	.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
	.diagram ul li.step5:after, .diagram ul li.step6:after {right:-14%;}
}

@media only screen and (max-width:900px) {
	.diagram ul li.step3 {margin-right:10%;}
	.diagram ul li.step3:after {display:block;}
	.diagram ul li.step2,
	.diagram ul li.step4,
	.diagram ul li.step6 {margin-right:0;}
	.diagram ul li.step2:after,
	.diagram ul li.step4:after {display:none;}
	.diagram ul li.step4 {margin-bottom:40px;}

	.diagram ul li {width:45%;  margin-right:10%;}
	.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
	.diagram ul li.step5:after, .diagram ul li.step6:after {right:-16%;}
}

@media only screen and (max-width:600px) {
	.diagram ul li {width:100%; margin-right:0px; padding-top:10px; padding-bottom:10px; margin-bottom:40px; }
	.diagram ul li.step2,
	.diagram ul li.step3,
	.diagram ul li.step4,
	.diagram ul li.step6 {margin-right:0;}
	.diagram ul li.step4,
	.diagram ul li.step5 {margin-bottom:40px;}

	.diagram ul li.step2:after,
	.diagram ul li.step4:after {display:block;}

	.diagram ul li.step1:after, .diagram ul li.step2:after, .diagram ul li.step3:after, .diagram ul li.step4:after,
	.diagram ul li.step5:after, .diagram ul li.step6:after {content:""; position:absolute; top:unset; bottom:-36px; left:50%; margin-left:-75px; background:url('../img/img-bottom-arrow.png') 0px 0px no-repeat; width:150px; height:27.5px; background-size:150px 27.5px;}
	.diagram ul li.step8:nth-child(8n):after {display:none;}
}

@media print {
	.diagram ul li.step4,
	.diagram ul li.step6 {margin-right:0;}
	.diagram ul li.step4:after,
	.diagram ul li.step6:after {display:none;}
	.diagram ul li.step5, .diagram ul li.step6 {margin-bottom:10px;}
}

.table {width:100%; height:auto;}
.table table {width:100%; table-layout: fixed;}
.table table tr th {background-color:#f2f7f5; padding:8px 0; font-weight:300; color:#222; border-top:2px solid #282828;}
.table table tr td {padding:10px 5px; color:#565656;}

.table table tr td.tal {padding-left:10px;}
.table table tr th, .table table tr td {border-left:1px solid #dddddd; border-bottom:1px solid #dddddd;}
.table table tr th:last-child, .table table tr td:last-child {border-right:1px solid #dddddd;}
.table table tr th .small, .table table tr td .small {font-size:80%; color:#528acf;}
.table table tr td span {display:block; color:#222; font-weight:400;}

.table table .m-txt-break {display:block; margin-bottom:5px;}
.table table .m-txt-break:last-child {margin-bottom:0px;}
.table table tr .pc-view {display:table-cell;}
.table table tr td.pc-view, .table table tr th.pc-view {display:table-cell;}
.table table tr .m-view {display:none;}

@media only screen and (max-width:768px) {
	.table table tr .pc-view {display:none;}
	.table table tr td.pc-view, .table table tr th.pc-view {display:none;}
	.table table tr .m-view {display:block;}
	.table table tr th.mline, .table table tr td.mline {border-right:1px solid #dddddd;}
	.table table tr td {text-align:center; padding:10px 4px;}
}

ol.family-list {display:block; text-align:left; padding:20px;}
ol.family-list li {padding:0 0 0 60px; text-align:left;}
ol.family-list li span.num {margin-left:-60px; font-weight:400;}

.table-dl dl {display:flex; position:relative; width:100%;}
.table-dl dl dt, .table-dl dl dd {float:left; display:inline-block; padding:16px 0; text-align:center; text-align:left; border-left:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd;}
.table-dl dl:before,
.table-dl dl:after {content:""; display:block; clear:both;}
.table-dl dl:first-child dt, .table-dl dl:first-child dd {border-top:1px solid #cdcdcd;}

.table-dl dl dt {width:24%; background-color:#f2f7f5;}
.table-dl dl dd {width:76%; border-right:1px solid #cdcdcd;}
.table-dl dl.over-dt dt {width:30%;}
.table-dl dl.over-dt dd {width:70%;}
.table-dl dl dt label, .table-dl dl dd label {position:relative; display:block; width:100%; line-height:1.3; padding:0 20px 6px 20px;}
.table-dl dl dt label b, .table-dl dl dd label b {font-weight:400;}
.table-dl dl dt label:last-child, .table-dl dl dd label:last-child {padding:0 20px 0 20px;}
.table-dl dl dd label span {display:block;}

@media screen and (max-width:450px) {
	.table-dl dl dt {width:32%; max-width:100px;}
	.table-dl dl dd {width:68%;}
	.table-dl dl.over-dt dt {width:46%; max-width:100%;}
	.table-dl dl.over-dt dd {width:54%;}

	.table-dl dl dt label, .table-dl dl dd label {padding:0 8px 6px 8px;}
	.table-dl dl dt label:last-child, .table-dl dl dd label:last-child {padding:0 8px 0 8px;}
}

/* nav2-6 */
.head-title {position:relative; padding:0 0 0 20px; height:40px; font-weight:500;}
.head-title span {padding:0 0 0 20px;}
.head-title select {position:absolute; top:-4px; right:0; width:100px;  border:1px solid #a9a9a9; padding:10px 10px;}
.table-wrap {position:relative; margin-top:10px; width:100%;}
.table-wrap table {position:relative; width:100%; overflow:hidden; height:auto !important;  border-top:2px solid #282828; table-layout:fixed;}
.table-wrap table tr{width:100%; position:relative;}
.table-wrap table .table-item {position:relative; width:100%; border-bottom:1px solid #e9e9e9;}
.table-wrap table .table-item .t-left {position:absolute; top:50%; margin-top:-10px; left:0; width:140px; height:20px; line-height:20px; text-align:center; font-weight:400; color:#304d90;}
.table-wrap table .table-item .t-right {padding:0 0 0 140px; width:100%;}
.table-wrap table .table-item .t-right .title {font-weight:400; padding:24px 0 6px 0; color:#333; line-height:1.2;}
.table-wrap table .table-item .t-right .content {padding:0 0 20px 0;}
.table-wrap table .table-item .t-right .content span.name {color:#88a2c2; margin-right:8px;}
.table-wrap table .table-item .t-right .content span.state {background-color:#37536f; display:inline-block; padding:2px 8px; color:#fff; margin-right:8px;}
@media only screen and (max-width:450px){
	.nav4-titme span {padding:0 0 0 10px;}
	.nav4-titme select {top:-3px; padding:8px 8px; width:80px;}
	.table-wrap {margin-top:12px;}

	.table-wrap table .table-item .t-left {top:15px; margin-top:0px; width:auto;}
	.table-wrap table .table-item .t-right {padding:20px 0 0 0;}
	.table-wrap table .table-item .t-right span {display:block;}
}