@charset "utf-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*reset css end*/
body {
    font-family: 微軟正黑體;
}

input:focus {
    outline: none;
}

a:hover {
    text-decoration: none;
}

.hidden {
    display: none;
}

.taian-btn,
.form-inline .input-key,
.search .fa-search {
    margin-top: 19px;
}

.modal-header .close {
    border: none;
}

.calculate-block {
    margin-top: 0px;
}

.online-item {
    display: none;
}

#angle-up-minute,
#angle-down-minute {
    display: none;
}

.travel-main {
    overflow-y: scroll;
}

.calculate-block .row {
    margin: 0;
}

.travel-pic {
    background-color: #dae7fa;
    color: #2d2d2d;
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: bottom;
    text-align: center;
    min-height: 650px;
    max-height: calc(100vh - 78px);
}

.travel-pic h1 {
    font-weight: 700;
    font-size: 40px;
    margin-top: 100px;
    margin-bottom: 40px;
    color: #0c3e88;
}

.travel-pic p {
    font-size: 17px;
    line-height: 30px;
    width: 90%;
    margin: 10px auto;
    text-align: left;
    color: #0c3e88;
}

.travel-main {
    padding: 0 30px;
    min-height: 650px;
    max-height: calc(100vh - 78px);
}

.travel-form-group {
    color: #2d2d2d;
    margin: 20px 0;
}

.travel-form-group h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.travel-form-group .warning {
    color: #e01f13;
    font-size: 15px;
}

.calculator {
    position: fixed;
    right: 0;
    top: 100px;
    background-image: url(/assets/images/car/ca-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 130px;
    height: 125px;
    padding: 15px;
    z-index: 99;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
    border-radius: 15px;

}

.total-number {
    background-color: #d2ecfd;
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 10px;
}

.total-number p {
    float: right;
    font-weight: 700;
}

.calculator .close-btn {
    display: none;
}

.panel li {
    display: inline-block;
    background-color: #f2f2f2;
    border-radius: 5px;
    width: 29%;
    height: 30px;
    margin: 10px 0;
    text-align: center;
    line-height: 30px;
}

.panel button {
    width: 100%;
    height: 30px;
    background-color: #fe9e13;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.panel p {
    color: #d2ecfd;
    font-size: 15px;
    margin-bottom: 10px;
    text-align: center;
}

#country-list label {
    width: 20%;
    height: 40px;
    border: solid 1px #d1d1d1;
    border-radius: 30px;
    text-align: center;
    font-size: 15px;
    line-height: 38px;
    margin: 10px 3px;
    cursor: pointer;
    padding-left: 0;
}

#country-list .text-adjust {
    font-size: 12px;
}

#menu1 label,
#menu2 label,
#menu4 label {
    width: 250px;
}

.ui-widget-header .ui-icon {
    content: '<';
}

.btn:focus {
    outline: none;
}

.country-group {
    display: inline;
}

.tab-content2 {
    height: 170px;
    overflow-y: scroll;
}

.injury-02 .btn-primary {
    width: 150px;
    height: 35px;
    border: solid 1px #dadada;
    margin-bottom: 20px;
    border-radius: 30px;
    text-align: center;
    cursor: pointer;
    background-color: #0f7d96;
    color: #fff;
}

.injury-wrapper .modal-footer {
    padding: 0 15px;
}

.injury-wrapper .modal-header .close {
    opacity: 1;
}

.injury-wrapper .modal-header {
    background-color: #0f7d96;
    color: #fff;
    font-weight: 700;
    border-radius: 20px 20px 0 0;
}

.injury-wrapper .no-title.modal-header {
    background-color: #fff;
}

.injury-wrapper .no-title.modal-header .close span {
    color: #0f7d96;
    border: solid 2px #0f7d96;
}

.injury-wrapper .modal-header .close span {
    border: solid 2px #fff;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    line-height: 20px;
}

.injury-wrapper .modal-title {
    font-size: 1.2em;
    color: #fff;
}

.injury-wrapper .modal-content {
    width: 100%;
}

.injury-wrapper .modal-footer button {
    margin: 10px auto 20px;
    width: 200px;
    background-color: #0f7d96;
    border: none;
}

#goto li {
    color: #2d2d2d;
    font-size: 20px;
}

#goto li a {
    position: relative;
    padding: 10px 7px 10px 35px;
    display: block;
}

#goto li i {
    color: #73afdd;
    font-size: 13px;
    width: 25px;
    height: 25px;
    border: solid 1px #73afdd;
    border-radius: 20px;
    text-align: center;
    line-height: 23px;
    position: absolute;
    left: 3px;
    top: 8px;
}

#goto li .active {
    border: solid 1px #dadada;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    background-color: #73afdd;
    color: #fff;
}

#goto li .active i {
    color: #fff;
    border-color: #fff;
}

#goto .modal-footer input {
    display: block;
    width: 220px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px 0 0 30px;
    text-align: center;
    font-size: 18px;
    margin: 20px 0 20px 0;
    border-right: none;
}

#goto .search-btn {
    width: 50px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 0 30px 30px 0;
    text-align: center;
    font-size: 18px;
    margin: 20px 10px 20px 0;
}

.car-insure-detail {
    margin-top: 30px;
}

.car-insure-detail {
    line-height: 30px;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
    }
}

.group {
    display: inline;
}

.q02-icon {
    background-image: url(../images/q01-2icon.png);
    left: 37px;
}

.travel-form-group label {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 10px 20px 0;
    cursor: pointer;
}

input[type="radio"]:checked~label {
    background-color: #7d7d7d;
    color: #fff;
    transition: ease 0.3s;
}

input[type="checkbox"]:checked~label {
    background-color: #7d7d7d;
    color: #fff;
    transition: ease 0.3s;
}

.day input,
.day2 input {
    display: block;
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 10px 20px 0;
}

.day2 {
    display: none;
    margin-top: 20px;
}

.day2 input {
    display: block;
    margin-top: 10px;
}

.day2 p {
    position: relative;
}

.day2 span {
    border-top: solid #4e4e4e 2px;
    width: 10px;
    position: absolute;
    top: 50px;
    left: 220px;
}

#picker span,
#picker-2 span {
    border-top: none;
    width: auto;
    position: inherit;
}

.day input:focus,
.day2 input:focus {
    outline: none;
}

.day2 p:nth-child(2) {
    margin-left: 40px;
}

.total-day {
    clear: both;
}

.red-text {
    color: #e01f13;
}

.total-day span {
    position: static;
    border: none;
    font-weight: 700;
    margin: 0 5px;
}

.total-day a {
    color: #e01f13;
    font-size: 20px;
    margin-left: 5px;
}

.mark-popup-wrapper {
    position: absolute;
    top: 10vh;
    background-color: #fff;
    z-index: 999;
    width: 320px;
    padding: 20px;
    border-radius: 15px;
    font-size: 18px;
    line-height: 35px;
    left: 20%;
}

.mark-icon {
    text-align: center;
    margin-bottom: 10px;
}

.mark-icon i {
    font-size: 80px;
    color: #73afdd;
}

.step1 .travel-form-group.next {
    clear: both;
    text-align: right;
    position: absolute;
    right: 20px;
    bottom: 10px;
}

.travel-form-group.next {
    clear: both;
    text-align: right;
    margin: 30px 0;
}

.travel-form-group.next label {
    background-color: #73afdd;
    color: #fff;
}

/*step 2 css*/
.step2-plane {
    margin-top: 100px;
    width: 250px;
}

.input-text p {
    width: 90px;
    display: inline-block;
}

.grey-bg {
    background-color: #f0f0f0;
}

.step2 .personal-info-02 .year,
.step2 .personal-info-02 .mm-dd,
.step3 .year,
.step3 .mm-dd {
    width: auto;
}

.step2 .year,
.step2 .mm-dd,
.step3 .year,
.step3 .mm-dd {
    width: auto;
}

.mm-dd {
    margin-right: 10px;
}

.step2 .personal-info-02 .birth {
    width: 150px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 0px 10px 5px;
    outline: none;
}

.see-more {
    cursor: pointer;
    float: right;
    font-weight: 500;
    background-color: #73afdd;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    font-size: 15px;
    display: none;
}

.see-more:last-child {
    display: none;
}

.birth {
    width: 150px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 0px 10px 5px;
    outline: none;
}

.picker-wrapper {
    display: inline;
    width: 200px;
}

.input-text input {
    display: inline;
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 20px 10px 5px;
}

.step2 h2 .red-text {
    font-size: 35px;
    font-weight: 700;
    margin: 0 5px;
    display: inline;
}

.step2 .more-protect-btn {
    width: 120px;
    color: #7ecef4;
    font-weight: 600;
    border: solid 1px #bababa;
    border-radius: 20px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    margin-left: calc(100% - 120px);
    cursor: pointer;
}

.method {
    margin-top: 50px;
}

.method input[type="radio"]:checked~label {
    background-color: #e01f13;
}

.fade:not(.show) {
    opacity: 1;
}

#choose-one #myTab {
    border: none;
}

#choose-one .tab-content {
    height: auto;
    overflow: auto;
}

.old-choose {
    height: auto;
    overflow: auto;
    border: solid 2px #dadada;
    border-radius: 0 15px 15px;
    padding: 20px;
}

#choose-one #myTab a {
    display: inline-block;
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 20px 10px 5px;
    color: #5b5b5b;
}

#choose-one #myTab li a:hover {
    text-decoration: none;
}

#choose-one #myTab li .active {
    background-color: #e01f13;
    color: #fff;
}

.choose-detail input {
    display: none;
}

.choose-detail label {
    width: 25px;
    height: 25px;
    border: solid 2px #dadada;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.choose-detail input[type="radio"]:checked~label {
    background-color: transparent;
}

.choose-detail input[type="radio"]:checked~label:before {
    background-color: #e01f13;
    content: '';
    width: 17px;
    height: 17px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 4px;
}

.choose-detail {
    clear: both;
    position: relative;
    padding-top: 30px;
    border-top: dotted 2px #dadada;
}

.choose-detail:first-child {
    padding-top: 0;
    border-top: none;
}

.method-info {
    float: left;
}

.travel-detail {
    margin-left: 10px;
    position: relative;
    width: calc(100% - 60px);
}

#custom .travel-detail {
    margin-left: 0;
    position: relative;
    width: 100%;
}

.method-info h2 {
    font-weight: 700;
    font-size: 25px;
}

.method-info .red-text {
    position: absolute;
    right: 0;
    top: 5px;
    font-weight: 700;
    font-size: 25px;
}

.method-info li {
    display: inline-block;
    width: 45%;
    vertical-align: top;
}

.info-title {
    font-size: 21px;
    margin: 15px 5px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    padding: 6px 40px;
    line-height: 21px;
    vertical-align: top;
}

#basic .info-text {
    line-height: 25px;
}

.info-table {
    width: 93%;
}

.info-table td {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.info-table .align-right {
    text-align: right;
}

.same-info {
    margin-left: 30px;
    position: relative;
    display: none;
}

.CP:first-child .same-info {
    display: inline-block;
}

.same-info label {
    position: absolute;
    top: 7px;
}

.personal-info-02 .same-info input[type="checkbox"]~label span {
    color: #2d2d2d;
    width: 200px;
    text-align: left;
}

.personal-info-02 .same-info input[type="checkbox"]~label {
    background-color: transparent;
}

.personal-info-02 .same-info input[type="checkbox"]:checked~label:before {
    background-color: #e01f13;
    content: '';
    width: 21px;
    height: 21px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 4px;
}

.user-delete,
.user-delete-DIY {
    background-color: #e01f13;
    font-size: 22px;
}

.it-01 {
    background-image: url(/assets/images/car/i01.png);
}

.it-02 {
    background-image: url(/assets/images/car/i02.png);
    padding: 6px 45px 1px;
}

.it-03 {
    background-image: url(/assets/images/car/cc03.png);
}

.it-04 {
    background-image: url(/assets/images/car/cc04.png);
}

.it-05 {
    background-image: url(/assets/images/car/cc05.png);
}

.it-06 {
    background-image: url(/assets/images/car/cc06.png);
}

.it-07 {
    background-image: url(/assets/images/car/cc07.png);
    background-size: 30px auto;
    background-position: left center;
    padding: 0 0 0 45px;
}

.it-08 {
    background-image: url(/assets/images/car/cc08.png);
}

.it-09 {
    background-image: url(/assets/images/car/cc09.png);
}

.it-10 {
    background-image: url(/assets/images/car/cc10.png);
}

.car-first-table {
    position: relative;
    margin-top: 0;
}

.top-title {
    width: 100%;
    border-bottom: 1px solid #dadada;
}

.top-title .table-title {
    position: initial;
    width: auto;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding-top: 7px;
    word-break: break-all;
    position: relative;
}

.top-title .table-title.tt01 {
    width: 20%;
}

.top-title .table-title.tt01:after {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    border-right: solid 1px #bababa;
    content: '';
    display: block;
}

.top-title .table-title.tt02 {
    width: calc(55% - 5px);
    max-width: 565px;
}

.top-title .table-title.tt02:after {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    border-right: solid 1px #bababa;
    content: '';
    display: block;
}

.top-title .table-title.tt03 {}

.more-btn {
    width: 140px;
    height: 40px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 36px;
    color: #73afdd;
    display: block;
    margin-top: 10px;
    margin-left: calc(100% - 150px);
}

.card-body.more-protect {
    border: none;
}

.card-body {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

.card-body tr {
    line-height: 20px;
}

.card-body td {
    padding: 5px;
}

.pink-text {
    color: #e84466;
}

.car-buy-block {
    border: solid 1px #bababa;
    padding: 20px 15px;
    border-radius: 10px;
    margin: 20px 0;
}

.step2 #read-list .btn-primary {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    text-align: inherit;
    font-size: initial;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.car-form-group p:first-child {
    margin: 30px 0 10px;
}

.step2 input[type="text"] {
    text-align: left;
    padding-left: 15px;
}

.car-beuser h2 {
    font-size: 25px;
    margin: 50px 0 10px;
    font-weight: 600;
}

/*同被保人 checkbox*/
.same-people-wrapper {
    display: inline-block;
    float: right;
    font-weight: 500;
    font-size: 0.8em;
    margin-right: 40px;
}

.same-people-wrapper input {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.same-people-wrapper input[type="checkbox"]:checked~label {
    background-color: transparent;
    color: #2d2d2d;
}

/*同被保人 end*/
.car-beuser-info .check-info-group {
    display: inline-block;
    width: 48%;
}

.car-beuser-info .check-info-group {
    margin: 20px 0;
    vertical-align: top;
}

.check-info-group.birthday-wrapper {
    position: relative;
}

.beuser-02 .bootstrap-datetimepicker-widget {
    position: absolute;
}

.car-beuser-info .check-info-group i {
    border: solid 1px #07827e;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.car-beuser-info .check-info-group input {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    font-size: 18px;
    line-height: 46px;
    margin: 0;
}

.car-form-group input[type="checkbox"] {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-left: 10px;
}

.car-form-group span {
    display: inline-block;
    margin: auto 5px;
}

.option-group {
    margin-bottom: 20px;
}

.option-group li:first-child {
    width: 130px;
}

.option-group li {
    display: inline-block;
    vertical-align: middle;
}

.option-group.native li {
    vertical-align: top;
}

.option-group li.option span,
.option-group li.option input {
    vertical-align: middle;
}

.option-group li.option span {
    min-width: 40px;
    display: inline-block;
}

.option-group li.option input {
    margin-left: 30px;
    margin-right: 5px;
}

.option-group.native {
    margin-bottom: 5px;
}

.option-group p {
    margin: 20px 0;
}

.option-group div span,
.option-group div input {
    vertical-align: middle;
}

.option-group div span {
    min-width: 40px;
    display: inline-block;
}

.select.no-mt {
    margin-top: 0;
    display: none;
}

.option-wrapper {
    position: relative;
}

.option-right {
    position: absolute;
    top: 22px;
    left: 120px;
}

.native-group {
    display: none;
}

.native-group p {
    display: inline-block;
    width: 130px;
}

.native-group input {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align-last: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 0px 10px 5px;
    outline: none;
}

.align-left {
    text-align: left;
}

.beuser-02 .check-info-group .select {
    margin-top: 0;
}

.insure-eg {
    line-height: 30px;
    text-align: left;
}

.personal-info-02 .input-text p {
    width: 130px;
}

.be-insure-info .input-text input {
    width: 150px;
}

#read-list {
    width: 300px;
    top: 8px;
    left: 40px;
}

select:focus {
    outline: none;
}

.personal-info-02 select {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 20px 10px 5px;
    padding: 0 10px;
}

.step3 .personal-info-02 .year,
.step3 .personal-info-02 .mm-dd {
    width: auto;
}

.mm-dd {
    margin-right: 10px;
}

.step3 .personal-info-02 .birth {
    width: 150px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 0px 10px 5px;
    outline: none;
}

.personal-info-02 input[type="radio"],
.travel-option input[type="radio"] {
    display: none;
}

.personal-info-02 input[type="radio"]~label,
.travel-option input[type="radio"]~label {
    width: 30px;
    height: 30px;
    border: solid 2px #dadada;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 0 50px 0 10px;
}

.personal-info-02 input[type="radio"]~label span {
    position: absolute;
    left: 35px;
    top: -10px;
}

.travel-option input[type="radio"]~label span {
    position: absolute;
    left: 35px;
    top: 4px;
    font-size: 18px;
}

.travel-option input[type="radio"]~label span {
    width: 120px;
}

.yn-radio {
    margin-top: 30px;
    position: relative;
}

.twice {
    display: inline-block;
    height: 25px;
    vertical-align: middle;
    line-height: 25px;
}

.twice input[type="radio"]:checked~label,
.travel-option input[type="radio"]:checked~label {
    background-color: transparent;
}

.twice input[type="radio"]:checked~label span {
    color: #2d2d2d;
}

.twice input[type="radio"]:checked~label:before,
.travel-option input[type="radio"]:checked~label:before {
    background-color: #e01f13;
    content: '';
    width: 22px;
    height: 22px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 4px;
}

.again {
    background-color: #fff !important;
    color: #2d2d2d !important;
}

.fa {
    margin-right: 3px;
}

.custom-list {
    padding: 20px;
    position: relative;
}

.custom-list:last-child .top-title .table-title.tt03 {
    visibility: hidden;
}

#custom .detail-text {
    padding: 0;
    border: solid 1px #dadada;
}

.custom-list li {
    display: inline-block;
}

.custom-list li:first-child {
    text-align: center;
    width: 120px;
    padding: 0;
}

.custom-list li:first-child p {
    margin-top: 15px;
}

.detail-text {
    border: solid 2px #dadada;
    border-radius: 15px;
    padding: 0;
    margin-left: 20px;
    position: relative;
}

.custom-detail span {
    min-width: 130px;
    margin: 20px 0;
    display: inline-block;
}

.custom-detail select {
    width: 100px;
    height: 40px;
    border: solid 2px #dadada;
    border-radius: 30px;
    line-height: 46px;
    padding: 0 10px;
}

.triangle {
    width: 40px;
    height: 40px;
    background-image: url(../images/triangle.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: -20px;
    top: calc(50% - 20px);
}

.not-easy-choose input {
    float: left;
    margin-right: 5px;
}

.not-easy-choose span {
    float: left;
    line-height: 25px;
}

.not-easy-choose {
    height: 25px;
}

.custom-list .detail-text .not-easy {
    text-align: left;
}

.travel-detail table {
    margin-top: 15px;
}

.travel-detail tr {
    line-height: 30px;
}

.travel-detail tr td:first-child {
    min-width: 130px;
}

#cl03 {
    position: relative;
}

.icon-adjust {
    position: absolute;
    top: calc(50% - 30px);
    left: 30px;
}

.travel-option input[type="radio"]~label {
    margin-left: 0;
}

.personal-info-02 {
    position: relative;
}

.add-btn {
    text-align: center;
    margin: 80px auto;
}

.add-btn p {
    width: 250px;
    height: 50px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    line-height: 50px;
    display: inline-block;
}

.add-btn p:first-child {
    margin-right: 5px;
}

.minus-user {
    background-color: #e01f13;
    font-size: 22px;
}

.add-user,
.add-user-DIY {
    background-color: #32b16c;
    font-size: 22px;
}

.for-country input[type="radio"]~label span,
.for-job input[type="radio"]~label span {
    position: absolute;
    left: 35px;
    top: -10px;
    width: 140px;
    text-align: left;
}

.for-job input[type="radio"]~label a {
    width: 100px;
    margin-left: 10px;
}

/*step 3 css*/

.travel-form-group .be-insure {
    width: 30px;
    height: 30px;
    border: solid 2px #dadada;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 0;
    margin-top: -25px;
}

.personal-info-02 input[type="checkbox"]~label span {
    position: absolute;
    left: 35px;
    top: -10px;
}

.for-job input[type="checkbox"]~label span {
    position: absolute;
    left: 35px;
    top: -10px;
    width: 200px;
    text-align: left;
}

.for-job input[type="checkbox"]:checked~label {
    background-color: #fff;
}

.for-job input[type="checkbox"]:checked~label:before {
    background-color: #e01f13;
    content: '';
    width: 22px;
    height: 22px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 4px;
}

.for-job input[type="checkbox"]:checked~label span {
    color: #2d2d2d;
}

.pass-info {
    margin-left: 25px;
}

.pass-info p {
    width: inherit !important;
}

.pass-info input {
    margin-left: 10px;
    margin-right: 5px;
}

.more-job {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.more-job:focus {
    outline: none;
}

.more-job-modal {
    line-height: 30px;
}

.not-usual-job {
    width: 200px !important;
}

.step3 .yn-radio {
    margin-bottom: 60px;
}

.step3 .en-pass {
    margin-bottom: 0;
}

.tab-profit li {
    display: inline-block;
}

.tab-profit li a {
    color: #2d2d2d;
}

#profit-block,
#profit-block-2 {
    display: none;
}

#profit-block .nav-tabs,
#profit-block-2 .nav-tabs {
    border-bottom: none;
}

#profit-block label,
#profit-block-2 label {
    display: inline-block;
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 20px 10px 5px;
}

#profit-block input[type="radio"]~label span,
#profit-block-2 input[type="radio"]~label span {
    position: static;
}

#profit-block .tab-content,
#profit-block-2 .tab-content {
    height: inherit;
    overflow-y: initial;
}

#profit-block li .active label,
#profit-block-2 li .active label {
    background-color: #73afdd;
    color: #fff;
}

.name-list {
    margin: 20px 0 40px;
}

/*step4 css*/
.step4 .travel-form-group .check-title {
    margin-bottom: 30px;
}

.check-info-group {
    margin: 0 0 30px 0;
}

.to-left {
    width: 50%;
    float: left;
    margin: 0 0 30px 0;
}

.clear {
    clear: both;
}

.check-info-group .check-form-title {
    color: #1c59b4;
    margin-bottom: 10px;
}

.step4 .total {
    text-align: right;
}

.step4 h2 .red-text {
    font-size: 35px;
    font-weight: 700;
    margin: 0 5px;
    display: inline;
}

.step4 .nav-tabs {
    width: 80%;
}

.step4 .tab-content {
    height: 200px;
    width: 80%;
    padding: 20px 30px;
    border: 1px solid #dadada;
    border-radius: 0 0 10px 10px;
    border-top: none;
}

.step4 .tab-content h3 {
    font-size: 20px;
    margin: 10px 0;
}

.step4 .tab-content p {
    line-height: 30px;
}

.check-form-title .send-note {
    color: #2d2d2d;
    display: block;
    padding-left: 33px;
    padding-bottom: 15px;
    line-height: 25px;
}

.nav-tabs a {
    color: #2d2d2d;
}

.step4 .nav-tabs li {
    padding: 10px 20px;
    margin: 0;
}

.step4 .nav-tabs li a {
    padding: 10px 20px;
}

.step4 .nav-tabs li .active {
    border: 1px solid #dadada;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: none;
}

.download-rule {
    margin: 20px 0 30px;
}

.download-rule li {
    margin: 15px 0;
}

.download-rule li a {
    text-decoration: underline;
}

.step4 .check-info-group input[type="checkbox"]~label,
.step4 .client-info input[type="radio"]~label {
    margin-left: 15px;
}

.step4 .check-info-group input[type="checkbox"]~label span {
    width: 300px;
    text-align: left;
}

.step4 .client-info input[type="radio"]~label span {
    width: 135px;
    text-align: left;
}

.step4 .check-info-group input[type="checkbox"]:checked~label span,
.step4 .client-info input[type="radio"]:checked~label span {
    color: #2d2d2d;
}

.step4 .check-info-group input[type="checkbox"]:checked~label,
.step4 .client-info input[type="radio"]:checked~label {
    background-color: transparent;
}

.step4 .check-info-group input[type="checkbox"]:checked~label:before,
.step4 .client-info input[type="radio"]:checked~label:before {
    background-color: #e01f13;
    content: '';
    width: 22px;
    height: 22px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 4px;
}

.check-personal-info i,
.blue-circle {
    border: solid 1px #07827e;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 27px;
}

/*popup css*/
.close-block {
    text-align: center;
    margin-top: 20px;
}

.popup h2 {
    margin-top: 0;
    color: #333;
}

#popup1 {
    position: fixed;
    height: 100vh;
    z-index: 999;
}

.pop-img {
    position: absolute;
    left: calc(50% - 60px);
    top: -60px;
}

.pop-img img {
    width: 120px;
}

#popup1 p {
    font-size: 20px;
    margin: 10px 0;
    line-height: 30px;
}

.popup .close {
    display: inline-block;
    background-color: #ef755d;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 500;
    width: 150px;
    text-align: center;
    line-height: 45px;
    font-size: 20px;
    height: 45px;
    opacity: 1;
    text-shadow: none;
    float: none;
}

.popup-company .popup .next-step {
    display: inline-block;
    border: solid 2px #ef755d;
    color: #ef755d;
    border-radius: 10px;
    font-weight: 500;
    width: 150px;
    text-align: center;
    font-size: 20px;
    height: 45px;
    opacity: 1;
    text-shadow: none;
    float: none;
    margin-bottom: 20px;
    cursor: pointer;
}

.overlay:before {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 999;
}

.overlay .popup {
    background: #fff;
    border-radius: 5px;
    width: 60%;
    max-width: 550px;
    position: fixed;
    top: 0;
    left: 35%;
    padding: 0;
    margin: 200px auto;
    z-index: 1000;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.pop-contain {
    padding: 20px;
}

.pop-contain p {
    line-height: 30px;
    font-size: 18px;
    width: calc(100% - 100px);
    margin-left: 95px;
}

.popup-company .popup .close,
.popup-company .popup .next-step {
    margin-bottom: 0;
    border: solid 2px #ef755d;
    line-height: 42px;
}

#popup1 .content {
    padding: 70px 25px 0;
}

/*右方快捷鍵*/
.quick-select {
    position: fixed;
    right: 0;
    top: calc(50vh - 81px);
}

.quick-select a {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    margin-bottom: 4px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.quick-select i {
    font-size: 30px;
    line-height: 50px;
}

.q-btn-wrapper>li {
    position: absolute;
    right: 0;
}

.q-btn-01 {
    top: 0;
}

.q-btn-02 {
    top: 55px;
}

.q-btn-03 {
    top: 110px;
}

.quick01 {
    background-color: #7ecef4;
}

.quick02 {
    background-color: #5fd3bc;
}

.quick03 {
    background-color: #ffcaa3;
}

.m-line {
    background-image: url(/assets/images/quick03.png);
    width: 34px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: calc(50% - 19px);
    margin-left: calc(50% - 17px);
}

.to-right {
    margin-right: 0 !important;
}

.quick-btn-sub {
    position: relative;
    width: 245px;
    margin-right: -197px;
}

.quick-btn-sub li {
    display: inline-block;
    margin: auto -1px;
}

.quick-select .quick02-1 {
    background-color: #46bda5;
    border-radius: 0;
    margin-right: -4px;
    margin-left: -4px;
}

.quick-select .quick02-2 {
    background-color: #2b9f88;
    border-radius: 0;
    margin-right: -4px;
}

.quick-select .quick02-3 {
    background-color: #1e8b75;
    border-radius: 0;
    margin-right: -4px;
}

.quick-select .quick02-4 {
    background-color: #187b67;
    border-radius: 0;
}

.quick-select .quick02-1:hover,
.quick-select .quick02-2:hover,
.quick-select .quick02-3:hover,
.quick-select .quick02-4:hover {
    transform: translateX(0);
    opacity: 0.8;
}

.show-input,
.step3 .show-input {
    display: inline-block !important;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.step3 .show-input {
    margin: 0;
}

.be-insure-info .input-text input[type="radio"],
.be-insure-info .input-text input[type="checkbox"] {
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0;
}

.twice-yes {
    margin-left: 5px;
}

.twice input {
    float: left;
}

.personal-info-02 .twice p {
    float: left;
    margin-left: 5px;
    width: 80px;
}

#country-list .red-text {
    display: none;
}

.select {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 0px 10px 5px;
    outline: none;
}

.q01 .select {
    width: 80%;
    text-align-last: left;
    padding-left: 10px;
    max-width: 250px;
}

.q01 .select option {
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 250px;
    overflow: hidden;
}

.be-insure-info input {
    margin: 5px;
}

.be-insure-info .select {
    width: 150px;
    margin: 5px;
}

.select.addr {
    width: 120px;
    margin: 5px 0;
}

.car-beuser-info .check-info-group input.addr-text {
    width: 245px;
}

.be-insure-info .input-block p {
    width: 120px;
    float: left;
    line-height: 60px;
}

.be-insure-info .input-block .w-auto {
    width: auto;
}

.be-insure-info imput {
    float: right;
}

.old-three-tab {
    border-bottom: none;
}

.old-three-tab li {
    position: relative;
    width: 154px;
    height: 40px;
}

.old-three-tab li a {
    font-size: 18px;
    margin: 0;
    padding: 10px 20px;
    border: solid 2px #dadada;
    border-radius: 10px 10px 0 0;
    width: 150px;
    text-align: center;
    border-bottom: none;
    display: inline-block;
    position: absolute;
    bottom: -2px;
    z-index: 3;
}

.old-three-tab li>.active {
    background-color: #fff;
}

.input-block {
    display: inline-block;
}

.twice-yes input {
    float: left;
}

.be-insure-info .twice-yes p {
    float: right;
    line-height: 25px;
}

.be-insure-info .yn-radio {
    margin-top: 15PX;
}

#custom .CP-DIY {
    border-top: solid 1px #dadada;
}

#custom .CP-DIY:first-child {
    border-top: none;
}

.gotosign {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
}

.goto-notice {
    background-color: #fff;
    width: 400px;
    height: auto;
    margin: 10% auto;
    text-align: center;
    border-radius: 20px;
    padding: 20px 30px;
}

.goto-notice h5 {
    font-size: 20px;
    line-height: 35px;
}

.gotosign-btn p {
    display: inline-block;
    width: 150px;
    height: 50px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    line-height: 50px;
    background-color: #32b16c;
}

.gotosign-btn {
    margin-top: 25px;
}

.gotosign-btn .notgoto {
    background-color: #BABABA;
}

.remind {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
}

.step4 .remind .note {
    text-align: center;
}

.step4 .remind .goto-notice {
    height: 220px;
}

.into-member .modal-dialog {
    max-width: 500px;
}

.into-member .modal-content {
    text-align: center;
    border-radius: 20px;
    width: 90%;
}

.into-member .modal-header {
    background-color: transparent;
}

.into-member .modal-footer {
    padding: 0;
}

.step3 .select {
    margin: 0;
    height: auto;
}

.step4 .personal-info-02 input[type="checkbox"]~label {
    width: 30px;
    height: 30px;
    border: solid 2px #dadada;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    margin: 0 50px 0 0;
}

.step4 .goto-notice {
    width: 600px;
    height: auto;
}

.step4 .note {
    text-align: left;
    line-height: 30px;
    margin: 20px 0;
}

.step4 .goto-notice .twice-yes {
    margin-left: 0;
    width: 130px;
}

.step4 .goto-notice .twice-yes p {
    float: left;
    margin-left: 5px;
}

.step4 .gotosign-btn p {
    width: 200px;
}

.step4 .code {
    height: 100px;
    margin: 20px auto;
}

.step4 .code img {
    height: 100%;
}

.step4 .seven {
    height: 350px;
}

.step4 .seven a {
    margin: 0 10px;
    color: #ef755d;
}

#finance input,
#finance select {
    display: inline-block;
    margin-left: 30px;
    border: none;
    border-radius: 25px;
    border: solid 1px #07827e;
    box-shadow: none;
    padding: 5px;
    outline: none;
    width: 200px;
    height: 50px;
    margin-top: 0;
}

#finance .other {
    display: none;
}

#finance .long-input {
    width: 100%;
}

#finance .long-input input:first-child {
    margin-left: 30px;
}

#finance .long-input input {
    margin-left: 5px;
    margin-right: 10px;
}

#finance .pick p {
    margin-left: 35px;
    display: inline-block;
}

#finance .pick p input {
    width: 30px;
    height: 30px;
    margin: 0;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 5px;
}

#finance .pick select {
    margin-left: 0;
}

#finance .pick .block {
    display: block;
}

#choose {
    display: none;
}

#finance .no-margin input,
#finance .no-margin select {
    margin-left: 5px;
    margin-bottom: 10px;
}

#finance .travel-form-group button {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 10px 20px 0;
    cursor: pointer;
}

#finance .travel-form-group .next-btn {
    background-color: #73afdd;
    color: #fff;
}

#finance .travel-form-group button:focus {
    outline: none;
}

.step5 .travel-form-group input[type="text"] {
    display: inline-block;
    width: 50%;
    border-radius: 30px 0 0 30px;
    float: left;
    height: 55px;
}

.log01-input {
    width: 360px;
}

.log01-input input {
    display: inline-block;
    width: 48%;
}

.log01-input input:first-child {
    height: 55px;
    border-radius: 30px 0 0 30px;
    border-color: #bfbfbf;
    padding-left: 10px;
    line-height: 55px;
}

#btn {
    border-radius: 0 30px 30px 0;
    height: 55px;
    font-size: 18px;
    cursor: pointer;
    background-color: #ef755d;
    color: #fff;
    border: none;
    margin-left: -5px;
}

#btn:disabled {
    background-color: #a0a0a0;
    color: #dcdcdc;
    cursor: default;
}

.way {
    position: relative;
}

.way span {
    position: absolute;
    left: 25px;
    top: 70px;
    font-size: 17px;
    width: 250px;
    color: deeppink;
}

.check-title {
    clear: both;
}

.return-title {
    margin-top: 20px;
}

#get-email {
    display: inline-block;
    font-size: 17px;
    position: absolute;
    left: 120px;
    height: 30px;
    padding: 10px;
    border-radius: 5px;
}

.travel-form-group .show-car-input {
    display: inline-block;
}

.car-text {
    display: block;
    width: 300px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 0;
}

.car-title-left {
    display: inline-block;
    width: 200px;
}

.step1 input {
    margin: 0;
}

.type-group {
    display: inline-block;
    width: 200px;
    height: 30px;
    margin: 25px 0 10px;
}

.type-group label {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    float: left;
    margin: 0;
    line-height: 30px;
}

.type-group label span {
    display: block;
    width: 100px;
    margin-left: 35px;
    text-align: left;
}

.type-group input:checked~label {
    background-color: #e01f13;
}

.type-group input:checked~label span {
    color: #2d2d2d;
}

.car-plate .car-text {
    width: 142px;
}

.car02 {
    display: none;
}

.step2 .type-group {
    margin: 0;
    padding-top: 5px;
}

.car-title-main {
    font-size: 25px;
    margin: 50px 0 10px;
}

.car-info {
    width: 100%;
}

.car-info .travel-form-group {
    display: inline-block;
    width: 42%;
    height: 32px;
}

.ct-left {
    margin-right: 50px;
}

.car-title-right {
    display: inline-block;
    width: 150px;
}

.car-detail {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 0;
}

.car-choose {
    border: dotted #b5b5b5 2px;
    border-radius: 10px;
    padding: 20px 10px 10px;
    position: relative;
    margin-top: 40px;
    min-height: 600px;
}

.car-wrapper {
    min-height: 395px;
}

.blue-text {
    color: #1891da;
}

.car-table {
    width: 100%;
}

.car-table td {
    padding: 10px 10px 0 0;
}

.car-choose-block {
    margin-bottom: 30px;
}

.car-choose-block .info-title {
    margin-bottom: 5px;
}

.pri-price {
    text-decoration: line-through;
}

.price p {
    margin: 5px auto;
}

.price .red-text {
    font-size: 23px;
    font-weight: 700;
}

.car-btn-group {
    text-align: center;
}

button:focus {
    outline: none;
}

.car-btn-group button {
    width: 150px;
    height: 40px;
    border: solid 2px #dadada;
    border-radius: 40px;
    text-align: center;
    font-size: 18px;
    margin: 10px auto 0;
    cursor: pointer;
}

.car-goto {
    background-color: #e01f13;
    color: #fff;
}

.car-more {
    color: #73afdd;
    background-color: #fff;
    margin-bottom: 5px;
}

.card-body table {
    text-align: left;
}

.car-cus-detail .main-item {
    width: 55%;
    padding: 10px;
    max-width: 570px;
}

.main-item {
    position: relative;
    height: 35px;
}

.main-item p {
    width: auto;
    display: inline-block;
    max-width: calc(100% - 170px);
    line-height: 25px;
}

.car-cus-detail .select,
.main-item .item-money {
    width: 160px;
    height: 30px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    text-align-last: center;
    font-size: 16px;
    line-height: 30px;
    margin: 0;
    outline: none;
    position: absolute;
    right: 10px;
}

.car-cus-detail .car-check {
    position: relative;
    height: 30px;
    width: 30px;
}

.car-cus-detail .car-check input {
    position: absolute;
    right: 3px;
    top: 12px;
}

.car-cus-detail .pre-price,
.car-cus-detail .red-text {
    width: 10%;
    padding-top: 15px;
}

.car-cus-detail .pre-price {
    padding-left: 5px;
}

.custom-list span {
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
}

.car-price-wrapper {
    margin-left: 37px;
    margin-top: 10px;
}

.custom-list span.blue-text {
    position: initial;
    width: auto;
    display: inline-block;
    margin-left: 5px;
}

.custom-list span img {
    width: 100%;
}

.open-more {
    border-top: dotted #dadada 2px;
    margin: 10px 0;
    text-align: right;
}

.open-more button {
    width: 150px;
    height: 40px;
    border: solid 2px #dadada;
    border-radius: 40px;
    text-align: center;
    font-size: 18px;
    margin: 10px auto 0;
    cursor: pointer;
}

.title {
    width: 20%;
    vertical-align: top;
    padding: 15px 0 15px 15px;
}

.info-table tr:nth-child(n+6) {
    display: none;
}

.info-table tr.show {
    display: table-row;
}

#loginModalCenterTitle {
    color: #2d2d2d;
}

.injury-02 .modal-title {
    font-size: 20px;
}

.car-cus-detail table {
    width: 100%;
}

.injury-02 .modal-title {
    color: #fff;
}

.injury-02 .modal-header .close {
    margin-top: 0;
}

.car-group {
    text-align: left;
}

.car-group li {
    display: inline-block;
    cursor: pointer;
    margin: 5px 0;
    padding: 2px 0;
    width: 33%;
}

.car-group li:hover {
    background-color: #DFDFDF;
    transition: ease 0.2s;
}

.car-group .focus {
    background-color: #DFDFDF;
}

.car-group img {
    width: 40px;
    vertical-align: middle;
    margin-right: 20px;
}

.car-group span {
    vertical-align: middle;
}

#carbrand .modal-footer input {
    height: 50px;
    margin-top: 1px;
}

#carbrand .modal-body input {
    display: none;
}

#carbrand label {
    width: 100%;
    height: initial;
    border: none;
    border-radius: 0;
    text-align: left;
    font-size: 16px;
    line-height: normal;
    margin: 0;
    cursor: pointer;
}

#carbrand .modal-body input[type="radio"]:checked~label {
    background-color: #dfdfdf;
    color: #2d2d2d;
}

#carbrand .nav-tabs li {
    width: 4%;
}

#carbrand .nav-tabs li a {
    width: 100%;
    display: block;
    padding: 5px;
}

#carbrand .nav-tabs li .active {
    border: solid 1px #dfdfdf;
    position: relative;
    border-radius: 3px 3px 0 0;
}

#carbrand .nav-tabs li .active:after {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #fff;
    bottom: -2px;
    left: 0;
    z-index: 999;
    content: '';
    display: block;
}

.step3 .addr {
    height: 50px;
    margin-right: 5px;
}

.step3 .addr-text {
    margin-left: 0;
    width: 250px;
    text-align: left;
    padding-left: 15px;
}

.pay {
    text-align: center;
    margin-bottom: 30px;
}

.more-paper {
    background-color: #25bec9;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
    width: 170px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-bottom: 20px;
}

.more-paper i {
    border: none;
}

.table.check-table tr {
    border: solid 1px #dadada;
}

.table.check-table td {
    border-right: solid 1px #dadada;
}

.check-table thead {
    background-color: #25bec9;
    color: #fff;
}

button:focus {
    outline: none;
}

.pay button {
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    margin: 20px 10px 20px 0;
    cursor: pointer;
    color: #fff;
}

.pay .online-card {
    background-color: #73afdd;
}

.pay .ebill {
    background-color: #ea68a2;
}

.pay .seven-11 {
    background-color: #a155c1;
}

/*步驟css*/
.content {
    width: 100%;
    height: 100px;
    text-align: justify;
    position: relative;
    margin: 10px auto 0 auto;
}

.step4 .content {
    margin: auto;
}

.content:before {
    content: '';
    width: 99%;
    height: 1px;
    border-top: dotted 2px #cfd6dc;
    display: block;
    position: absolute;
    top: 40px;
    z-index: -1;
}

.content:after {
    display: inline-block;
    content: '';
    width: 100%;
}

.circle {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 30px 0;
    display: inline-block;
    z-index: -1;
}

.circle span {
    position: absolute;
    bottom: -30px;
    left: calc(100% - 42px);
    width: 70px;
}

.step1 .content .step-icon,
.step2 .content .step-icon {
    left: 20px;
    top: 20px;
    width: 25px;
    height: 25px;
    background-image: url(/assets/images/injury-process-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    animation: fly 2s;
    -webkit-animation-name: fly;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: fly;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    z-index: 0;
}

.step1 .circle.green:before,
.step2 .circle.green:before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.step2 .circle.green:before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.step1 .circle.green:before,
.step2 .circle.green:before {
    animation: pulse 2s infinite ease-in-out;
}

.step5 .circle.red:before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.step5 .circle.red:before {
    animation: pulse 2s infinite ease-in-out;
}

.step5 .content .step-icon {
    left: 96%;
    top: 20px;
    width: 25px;
    height: 25px;
    background-image: url(/assets/images/injury-process-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    animation: fly3 2s;
    -webkit-animation-name: fly3;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: fly3;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    z-index: 8;
}

.step3 .content .step-icon {
    left: 35%;
    top: 20px;
    width: 25px;
    height: 25px;
    background-image: url(/assets/images/injury-process-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    animation: fly2 2s;
    -webkit-animation-name: fly2;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: fly2;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    z-index: 8;
}

.step3 .circle.yellow:before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.step3 .circle.yellow:before {
    animation: pulse 2s infinite ease-in-out;
}

.step4 .content .step-icon {
    left: 68%;
    top: 20px;
    width: 25px;
    height: 25px;
    background-image: url(/assets/images/injury-process-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    animation: fly3 2s;
    -webkit-animation-name: fly3;
    /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;
    /* Safari 4.0 - 8.0 */
    animation-name: fly3;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    z-index: 8;
}

.step4 .circle.blue:before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.step4 .circle.blue:before {
    animation: pulse 2s infinite ease-in-out;
}



.circle.green,
.circle.green:before {
    background: #cbe37b;
    animation-delay: 0s;
}

.circle.yellow,
.circle.yellow:before {
    background: #f1b555;
}


.circle.blue,
.circle.blue:before {
    background: #1691d7;
}

.circle.red,
.circle.red:before {
    background: #d276a8;
}

.continue-step h2 {
    font-size: 1.4em;
    margin-top: 30px;
}

@-webkit-keyframes fly {
    0% {
        left: 30px;
    }

    100% {
        left: 30%;
    }
}

@-webkit-keyframes fly2 {
    0% {
        left: 35%;
    }

    100% {
        left: 63%;
    }
}

@-webkit-keyframes fly3 {
    0% {
        left: 67%;
    }

    100% {
        left: 96%;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.choose-wrapper {
    width: 95%;
    margin: 30px auto;
    text-align: center;
}

.q01 .nav-tabs {
    border: 1px solid #dee2e6;
    border-radius: 5px 5px 0 0;
}

.q01 .nav-tabs .nav-item {
    width: 50%;
    text-align: center;
}

.q01 .nav-tabs .nav-link {
    padding: 15px;
}

.q01 .nav-tabs .nav-link.active {
    border: none;
    color: #fff;
    background-color: #73afdd;
}

.q01 .tab-content {
    overflow: initial;
    overflow-y: initial;
    height: auto;
}

.q01 .btn-wrapper {
    text-align: center;
}

.q01 button,
#check-car-btn,
.temp-btn {
    width: 200px;
    height: 50px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: center;
    font-size: 18px;
    margin: 30px auto;
    cursor: pointer;
    background-color: #73afdd;
    color: #fff;
}

#carinfo .modal-footer button {
    line-height: unset;
}

.choose-car-type {
    border: 1px solid #dee2e6;
    border-radius: 5px 5px 0 0;
}

.q01 .tab-content p {
    display: inline-block;
    min-width: 200px;
    text-align: left;
    vertical-align: middle;
}

.q01 input {
    display: inline-block;
    width: 260px;
    height: 45px;
    border: solid 2px #dadada;
    border-radius: 30px;
    text-align: left;
    font-size: 18px;
    padding-left: 15px;
    vertical-align: middle;
}

.q01 .confirm {
    text-align: left;
    width: 460px;
    margin: auto;
}

.q01 .confirm input {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.q01 .confirm p {
    display: inline-block;
    vertical-align: middle;
}

.q01 .car-plate input {
    width: 120px;
}

.q01 .car-plate .short-line {
    display: inline-block;
    width: 10px;
    height: 1px;
    background-color: #2d2d2d;
    vertical-align: middle;
    margin: auto 5px;
    ;
}

.q01 i {
    margin-left: 5px;
    cursor: pointer;
}

.q01 span.notice-text {
    display: block;
    font-size: 14px;
    margin-top: 5px;
}

.ui-datepicker .ui-datepicker-buttonpane {
    display: none;
}

.normal-popup .modal-header {
    background-color: #fff;
}

.normal-popup button {
    background-color: transparent;
}

.normal-popup .modal-header .close span {
    color: #2d2d2d;
    border-color: #2d2d2d;
}

.notice-rule {
    margin-top: 20px;
}

.normal-popup .modal-content {
    width: 100%;
}

.normal-popup .modal-header .close {
    top: 22px;
}

.normal-popup .modal-title {
    color: #2d2d2d;
    font-weight: 500;
}

.normal-popup .modal-body img {
    width: 100%;
}

.car-information {
    width: 90%;
    margin: 30px auto;
    border-top: solid 1px #dadada;
    padding-top: 30px;
}

#carinfo {
    display: none;
}

.q01 .car-information table {
    width: 100%;
}

.q01 .car-information td {
    padding: 10px 0;
    text-align: right;
    position: relative;
}

.q01 .bootstrap-datetimepicker-widget table td {
    text-align: center;
}

.q01 .car-information td.check-title {
    text-align: left;
    position: relative;
}

.q01 .car-information td.check-title i {
    position: absolute;
    left: 144px;
    z-index: 999;
}

.q01 .car-information td.t02.check-title i {
    left: unset;
}

.q01 .car-information td.check-title.t02 {
    padding-left: 20px;
}

.q01 .car-information input {
    width: 80%;
    display: inline;
    max-width: 250px;
}

.q01 .car-information .modal-footer input {
    max-width: unset;
}

.q01 .text-to-left .insure-eg {
    text-align: left;
}

.q01 .text-to-left .modal-content {
    width: 100%;
}

.q01 .car-information td .select {
    margin: 0;
}

.q01 .text-to-left button {
    line-height: 25px;
}

.popup-company {
    display: none;
}

#custom tr {
    vertical-align: top;
    border-bottom: solid 1px #e6e6e6;
}

#custom .custom-list tr:last-child {
    border-bottom: none;
}

.beuser-02 {
    border-top: solid 1px #bababa;
}

/*傷害險新增 end*/
.pointer {
    cursor: pointer;
}

.partime {
    display: none;
}

.injury-wrapper .col-md-4 {
    padding: 0;
}

.injury-banner-subtitle {
    text-align: left;
    color: #0c3e88;
    line-height: 35px;
    width: 90%;
    margin: auto;
}

.injury-banner-subtitle li {
    list-style: decimal;

}

.yellow-text {
    color: #ff344c;
}

.injury-right-title {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 20px;
}

.injur-step1-form .col-4 {
    padding: 0;
}

.injur-step1-form p {
    margin-bottom: 10px;
}

.injur-step1-form input {
    border: solid 1px #bfbfbf;
    border-radius: 30px;
    height: 35px;
    width: 200px;
    padding-left: 15px;
}

.injury-radio input {
    display: none;
}

.injury-radio label {
    width: 100%;
    text-align: center;
    line-height: 35px;
    border: solid 1px #bfbfbf;
    height: 35px;
}

.left-radio,
.right-radio {
    width: 100px;
    display: inline-block;
}

.left-radio label {
    border-radius: 30px 0 0 30px;
}

.right-radio label {
    border-radius: 0 30px 30px 0;
    margin-left: -5px;
}

input[type="radio"]:checked~label {
    background-color: #0f7d96;
    color: #fff;
}

.pointer {
    cursor: pointer;
}

.job-type {
    margin-top: 40px;
}

.job-type>p img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.job-type select {
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    width: 200px;
}

.date-period {
    margin-top: 40px;
}

.notice {
    margin-top: 40px;
}

.injury-btn-group {
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: right;
}

.injury-btn-group a.injury-btn,
.injury-btn-group button.injury-btn,
.injury-btn-group label.injury-btn {
    width: 150px;
    border-radius: 30px;
    display: inline-block;
    box-shadow: none;
    border: solid #60a1ff 1px;
    text-align: center;
    line-height: 33px;
    margin: 0 5px;
    cursor: pointer;
}

.injury-btn-group a.injury-btn {
    height: 35px;
}

.injury-btn-group a.injury-btn.dark-blue-btn:hover {
    color: #fff;
}

.injury-btn-group button.injury-btn {
    height: 37px;
}

.dark-blue-btn {
    background-color: #60a1ff;
    color: #fff;
}

.light-blue-btn,
.injury-btn-group a.injury-btn.light-blue-btn {
    background-color: #fff;
    color: #60a1ff;

}

.injury-02 .travel-pic {
    background-color: #dae7fa;
    background-image: url(/assets/images/self-step1-banner.png);
    background-position: bottom;
}

.injury-block-title {
    border: solid 1px #bfbfbf;
    border-radius: 5px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    width: 40%;
    min-width: 250px;
    margin: auto;
    font-weight: 700;
    background-color: #fff;
    font-size: 1.1em;
}

.injury-block-title::before {
    width: 30px;
    height: 26px;
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/assets/images/injury-title-icon-bond.png);
    vertical-align: middle;
    margin-right: 5px;
}

.injury-choose-block {
    position: relative;
    margin-bottom: 50px;
}

.injury-choose-block::before {
    border: solid 1px #bfbfbf;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 25px;
    z-index: -1;
}

.injury-block-detail {
    width: 100%;
    padding: 15px;
    /* text-align: justify; */
}

/* 
.injury-block-detail:after {
    width: 100%;
    display: inline-block;
    content: '';
} */

.injury-block-detail::-webkit-scrollbar {
    width: 3px;
}

/* Track */
.injury-block-detail::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #f0f0f0;
    border-radius: 10px;
}

/* Handle */
.injury-block-detail::-webkit-scrollbar-thumb {
    background: #bababa;
    border-radius: 10px;
}

/* Handle on hover */
.injury-block-detail::-webkit-scrollbar-thumb:hover {
    background: #dfdfdf;
}

.injury-list-wrapper>p {
    font-size: 1.1em;
    position: relative;
    display: inline-block;
    padding-left: 30px;
    margin-bottom: 10px;
}

.injury-list-wrapper {
    margin: 10px 2%;
    width: 100%;
    display: block;
    vertical-align: top;
}

.injury-list-wrapper>p::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    width: 25px;
    height: 25px;
    top: -3px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}

.injury-first-list>p::before {
    background-image: url(/assets/images/self-choice-icon1.png);
}

.injury-first-second>p::before {
    background-image: url(/assets/images/self-choice-icon2.png);
}

.injury-first-third>p::before {
    background-image: url(/assets/images/self-choice-icon3.png);
}

.injury-list {
    margin-top: 10px;
}

.injury-list li p {
    display: inline-block;
    width: calc(100% - 100px);
    margin-bottom: 10px;
    line-height: 25px;
}

.injury-list li p.injury-price {
    width: 75px;
    text-align: right;
    vertical-align: top;
}

.self-bottom .injury-check,
.choice-detail {
    display: inline-block;
    vertical-align: top;
}

.p-d-0 {
    padding: 0;
}

.injury-btn-group.block-btn a.injury-btn,
.injury-btn-group.block-btn button.injury-btn,
.injury-btn-group.block-btn label {
    display: block;
    margin: 10px auto;
}

.injury-btn-group.light-grey a.injury-btn,
.injury-btn-group.light-grey button.injury-btn,
.injury-btn-group.light-grey label {
    border-color: #bfbfbf;
    color: #2d2d2d;
}

.injury-btn-group.light-grey i {
    color: #fff;
    margin-left: -15px;
    margin-right: 5px;
    font-size: 0.8em;
}

.injury-choose-block .injury-btn-group input {
    display: none;
}

.injury-choose-block .injury-btn-group input[type="radio"]:checked~label {
    background-color: #ff8681;
}

.self-bottom {
    padding: 0 25px 0 30px;
}

.injury-check {
    width: 100%;
    margin: auto;
    text-align: center;
}

.choice-detail {
    width: 100%;
    text-align: center;
}

.injury-btn-group.block-btn.choice-detail label,
.injury-btn-group.block-btn.choice-detail a {
    display: inline-block;
}

.injury-check .update-price {
    margin: 10px auto 0;
    font-weight: 700;
    color: #ff8681;
    font-size: 1.5em;
}

.injury-choose-block .injury-btn-group {
    margin: 0;
}

.money-notice {
    margin-top: 40px;
}

.money-notice p {
    margin-bottom: 10px;
}

.money-notice p img {
    width: 25px;
    vertical-align: middle;
    margin-right: 5px;
}

.money-notice select {
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    width: 200px;
}

.confirm {
    margin-top: 40px;
}

.confirm input[type="checkbox"] {
    width: 20px;
    height: 20px;
    display: inline;
    vertical-align: middle;
}

.confirm p {
    display: inline;
    vertical-align: middle;
}

.injury-03 .travel-pic {
    background-image: url(/assets/images/injury-step3-banner-bottom.png);
}

.check-info-group .check-form-title {
    line-height: 25px;
}

.check-info-group .check-form-title i {
    border: solid 1px #1c59b4;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    line-height: 23px;
    font-size: 0.8em;
    margin-right: 3px;
}

.white-text {
    color: #fff;
}

.injury-radio i {
    margin-left: -15px;
    margin-right: 5px;
}

.injury-choice p {
    font-size: 20px;
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

.final-country {
/*    display: none;*/
    margin-top: 10px;
}

.injury-choice p input {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.injury-choice p span {
    vertical-align: middle;
    font-size: 0.8em;
}

.native-name-detail {
    margin: 20px 0 0;
/*    display: none;*/
}

.injury-choice .native-name-detail p {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.injury-choice .native-name-detail span {
    width: 120px;
    display: inline-block;
    margin-right: 10px;
}

.injury-choice .native-name-detail input[type="text"],
.injury-choice .native-name-detail select {
    width: calc(90% - 150px);
    max-width: 200px;
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    padding-left: 10px;
    vertical-align: middle;
}

.injury-03 .money-notice {
    clear: both;
}

.check-info-group .check-form-title i.pink-text {
    border: none;
    font-size: 1em;
}

.check-info-group.full-width {
    width: 100%;
    clear: both;
}

.check-info-group.full-width .injury-choice p {
    width: 200px;
}

.profit-block-wrapper.block-top p {
    display: inline-block;
}

.profit-block-wrapper.block-bottom {
    margin-top: 20px;
}

.check-info-group.full-width .injury-choice .block-bottom p {
    width: 100%;
}

.injury-choice .native-name-detail .block-bottom span {
    width: 170px;
}

.injury-choice .native-name-detail .block-bottom .profit-title p {
    display: inline-block;
    width: 49%;
    color: #07827e;
    margin-top: 10px;
}

.injury-choice .native-name-detail .block-bottom .profit-title p i {
    border: solid 1px #07827e;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    line-height: 23px;
    font-size: 0.65em;
    margin-right: 3px;
}

.injury-choice .native-name-detail .block-bottom .profit-title p.delete-user {
    text-align: right;
    position: relative;
    color: #fff;
    cursor: pointer;
    font-size: 1em;
}

.injury-choice .native-name-detail .block-bottom .profit-title p.delete-user i {
    border: none;
}

.profit-title p.delete-user:after {
    position: absolute;
    content: '';
    display: block;
    background-color: #e84466;
    width: 140px;
    height: 35px;
    border-radius: 35px;
    top: -6px;
    left: calc(100% - 120px);
    z-index: -1;
}

.injury-btn-group.center {
    text-align: center;
}

.injury-choice .profit-title p span {
    vertical-align: inherit;
}

.rank-wrapper,
.proportion-wrapper,
.equally-wrapper {
    display: none;
}

.client-info input {
    width: calc(90% - 150px);
    max-width: 200px;
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    padding-left: 10px;
    line-height: 35px;
}

.client-info~.col>input {
    width: calc(90% - 150px);
    max-width: 200px;
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    padding-left: 10px;
    line-height: 35px;
}

.client-info~.col {
    padding: 0;
}

.client-info select {
    width: 200px;
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    padding-left: 10px;
}

.past-wrapper {
    font-size: 1.1em;
    margin: 20px 0;
    border: solid 1px #bfbfbf;
    padding: 20px 20px 10px;
    border-radius: 10px;
}

.past-wrapper ol li {
    list-style: decimal;
    margin-bottom: 15px;
    margin-left: 20px;
    padding-left: 5px;
}

.green-title {
    color: #07827e;
}

.past-wrapper .green-title {
    margin-bottom: 20px;
}

.col-half {
    width: 48%;
    display: inline-block;
    margin-bottom: 50px;
}

.col-full {
    margin-bottom: 15px;
}

.injury-04 .travel-pic {
    background-image: url(/assets/images/injury-step4-banner-bottom.png);
}

.personal-info-02 input[type="checkbox"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.personal-info-02 input[type="checkbox"]~span {
    vertical-align: middle;
}

.injury-rule {
    margin-top: 20px;
}

.injury-rule p {
    margin-top: 15px;
}

.injury-05 .travel-pic {
    background-image: url(/assets/images/self-step-banner.png);
    background-position-y: 90%;
}

.injury-05 .travel-pic p {
    text-align: center;
    color: #fff;
}

.injury-05 .finish-wrapper {
    font-size: 1em;
    line-height: 35px;
    text-align: center;
    margin-top: 30px;
}

.injury-05 .travel-pic h1 {
    margin-top: 130px;
}

.injury-05 .finish-wrapper h2 {
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 20px;
}

.travel-modal .modal-body input {
    display: none;
}

.travel-modal .nav-tabs li {
    width: 15%;
    padding: 10px 0 0;
}

.travel-modal .nav-tabs li a {
    padding: 10px 0;
}

.travel-modal .nav-tabs a {
    color: #616161;
    border: solid 1px #fff;
    border-bottom: none;
    width: 100%;
    display: block;
    border-radius: 5px 5px 0 0;
}

.travel-modal .nav-tabs a.active {
    color: #0f7d96;
    border-color: #0f7d96;
}

.travel-modal .modal-footer input {
    width: calc(100% - 220px);
    padding: 0 0 0 10px;
    height: 38px;
    border-radius: 5px;
}

.injury-choice .native-name-detail .block-bottom .profit-title p.delete-user {
    background-color: #e84466;
    width: 120px;
    border-radius: 50px;
    float: right;
}

.injury-person-detail-block {
    border-top: solid 1px #bfbfbf;
    margin-top: 20px;
    padding-top: 20px;
}

.injury-04.injury-otp .travel-pic {
    background-image: url(/assets/images/injury-step-otp-banner-bottom.png);
}

.otp-block {
    min-height: calc(45vh - 78px);
}

.otp-block h2 {
    font-size: 18px;
    margin: 30px 0;
    font-weight: 700;
}

.injury-wrapper .modal-body p {
    text-align: center;
}

.injury-list-detail ul li {
    display: inline-block;
    padding-right: 10px;
    margin: 5px 0;
}

.check-info-group.full-width .injury-choice .block-bottom p.addr-block {
    width: calc(90% - 160px);
    display: inline-block;
}

.injury-choice .native-name-detail .addr-block input[type="text"].profit-addr-long {
    width: calc(100% - 420px);
    max-width: initial;
}

.injury-choice .native-name-detail .block-bottom span span {
    width: 100px;
}

.popup.return .content {
    height: initial;
    width: 100%;
}

.popup.return .content:before {
    display: none;
}

/*傷害險新增 end*/
.second-title {
    margin-top: 40px;
}

.addr-wrapper {
    width: 90%;
}

.addr-wrapper input[type="text"],
.addr-wrapper select {
    width: calc(90% - 150px);
    max-width: 200px;
    border: solid 1px #bfbfbf;
    height: 35px;
    border-radius: 30px;
    padding-left: 10px;
    vertical-align: middle;
}

.addr-block input[type="text"].profit-addr-long {
    display: block;
    width: 100%;
    margin-top: 5px;
    max-width: 405px;
}

.injury-right-title .small-text {
    font-size: 16px;
    font-weight: 500;
    margin-left: 5px;
}

.bonus-number {
    margin-bottom: 20px;
}

    .bonus-number button {
        width: 150px;
        border-radius: 30px;
        display: inline-block;
        box-shadow: none;
        border: solid #60a1ff 1px;
        text-align: center;
        line-height: 33px;
        margin: 0 5px;
        cursor: pointer;
    }

.self-choice-block {
    width: 45%;
    display: inline-block;
    margin-right: 2%;
    vertical-align: top;
}

.notice-bg {
    background-color: #1c59b4;
    color: #fff;
}

@media (max-width: 1143px) {
    .q01 .car-information td.check-title i {
        left: 128px;
        top: 50px;
    }
}

@media (max-width: 1340px) {
    .injury-choice .native-name-detail .addr-block input[type="text"].profit-addr-long {
        display: block;
        width: 100%;
        margin-top: 5px;
        max-width: 405px;
    }
}

@media (max-width: 770px) {
    .self-choice-block {
        width: 100%;
        display: block;
    }

    .same-call {
        display: block;
        margin-left: 190px;
        margin-top: 5px;
    }

    .injury-choice .native-name-detail span {
        vertical-align: top;
    }

    .injury-choice .native-name-detail span span {
        vertical-align: middle;
    }

    .injury-choice .native-name-detail .addr-block input[type="text"],
    .injury-choice .native-name-detail .addr-block select,
    .injury-choice .native-name-detail .addr-block input[type="text"].profit-addr-long {
        display: block;
        width: 100%;
        margin-top: 5px;
        max-width: 200px;
    }
}

@media (min-width: 576px) {
    #carbrand {
        padding-left: 17px;
    }

    #carbrand .modal-dialog {
        max-width: unset;
    }

    #carbrand .modal-content {
        margin: auto;
    }
}

@media (max-width: 991px) {
    .mark-popup-wrapper {
        position: fixed;
        top: 100px;
        background-color: #fff;
        z-index: 999;
        width: 320px;
        padding: 20px;
        border-radius: 15px;
        font-size: 18px;
        line-height: 35px;
        left: calc(50% - 160px);
    }

    .calculate-block {
        margin-top: 0;
    }

    .travel-pic {
        min-height: unset;
        background-size: 25%;
        background-position: left bottom;
        padding: 30px 0 75px;
    }

    .travel-pic h1 {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .travel-main {
        overflow-y: initial;
        max-height: unset;
    }

    select {
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .navbar {
        padding: 15px;
    }

    .signin {
        margin-left: 0;
    }

    .calculate-block,
    .travel-pic,
    .travel-main {
        height: initial;
    }

    .travel-pic {
        min-height: initial;
    }

    .travel-main {
        padding: 15px;
    }

    .travel-form-group label {
        margin: 10px 0;
        width: 80%;
    }

    .day input,
    .day2 input {
        width: 80%;
    }

    .site-mape p {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .box {
        width: 70%;
    }

    .overlay .popup {
        width: 70%;
        left: 15%;
    }

    .travel-form-group.next {
        text-align: left;
    }

    .dtp_main {
        width: 80%;
    }


    /*step2 小計算機css*/
    .calculator {
        bottom: 0;
        top: auto;
        right: 0;
        width: 100%;
        height: auto;
    }

    .total-number {
        width: 100%;
        float: left;
    }

    .panel ul {
        float: left;
        width: 55%;
        margin-left: 10px;
    }

    .panel li {
        margin: 0;
        width: 28%;
    }

    .panel button {
        margin-top: 10px;
        height: 50px;
    }

    .panel p {
        font-size: 20px;
    }

    .calculator .close-btn {
        display: block;
        color: #fff;
        position: absolute;
        right: 5px;
        top: 5px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: solid #fff 2px;
        line-height: 30px;
        text-align: center;
        z-index: 999;
    }

    .close-btn i {
        margin-left: 2px;
    }

    .to-bottom {
        bottom: -107px;
        opacity: 0.8;
    }

    /*小計算機css end*/

    .input-text p {
        width: 100%;
        display: block;
    }

    .input-text input,
    .birth {
        margin: 5px 5px 10px 0;
        width: 200px;
    }

    .step2 .personal-info-02 .birth,
    .personal-info-02 select {
        width: 200px;
        margin: 5px 5px 10px 0;
    }

    .step2 .year,
    .step2 .mm-dd,
    .step3 .year,
    .step3 .mm-dd {
        display: inline-block;
    }

    #choose-one #myTab a {
        width: 135px;
        margin: 20px 5px 10px 0;
    }

    .tab-content {
        width: 97%;
    }

    .method-info:first-child {
        width: 20px;
    }

    .method-info .red-text {
        position: initial;
        margin-top: 10px;
    }

    .method-info li {
        display: block;
        width: 100%;
        margin: 30px 0;
    }

    .info-title {
        padding: 0 0 0 40px;
        font-size: 18px;
        margin: 5px 0;
    }

    .card-body {
        min-width: 250px;
        width: 100%;
        margin-left: -35px;
        padding: 10px;
    }

    .more-btn {
        margin-bottom: 10px;
    }

    .step2 .card-body td {
        width: 30%;
        font-size: 15px;
        line-height: 20px;
        padding: 10px 3px;
    }

    .twice:nth-child(2),
    .twice:nth-child(3) {
        top: 30px;
    }

    .personal-info-02 input[type="radio"]~label,
    .travel-option input[type="radio"]~label {
        margin-left: 0;
        margin-top: 5px;
    }

    .yn-radio {
        margin-top: 50px;
    }

    .add-btn button {
        width: 130px;
        font-size: 15px;
    }

    .step2 .travel-form-group {
        margin-top: 0;
    }

    .step2 .custom-list {
        padding: 10px;
    }

    .step2 .custom-list li:first-child,
    .step2 .custom-list li:first-child img {
        width: 25px;
        padding: 0;
    }

    .detail-text {
        padding: 10px;
        margin-left: 25px;
        width: calc(100% - 25px);
    }

    .custom-detail span {
        min-width: 100%;
        margin: 10px 0 15px;
        display: inline-block;
    }

    .icon-adjust {
        left: 0;
        width: 25px;
    }

    .custom-list .travel-option {
        display: table;
        padding-left: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .travel-option .travel-detail tr td:nth-child(2) {
        min-width: 80px;
    }

    .travel-detail table {
        margin-top: 0;
        margin-bottom: 15px;
    }

    #cl03 .detail-text .col-4 {
        min-width: 100%;
        ;
    }

    .car-cus-detail .select {
        width: 120px;
    }

    .main-item p {
        max-width: calc(100% - 130px);
    }

    /*step3*/
    .step3 .travel-pic {
        text-align: left;
        padding: 10px 0 25px 0;
    }

    .step3 .travel-pic h1 {
        margin-top: 15px;
        margin-left: auto;
        text-align: center;
        font-size: 25px;
    }

    .step3 .travel-pic p {
        display: none;
    }

    #profit-block label,
    #profit-block-2 label {
        width: 120px;
        margin: 10px 5px 0;
    }

    .name-list h3 {
        margin-bottom: 10px;
        font-weight: 700;
    }

    /*step3 end*/
    /*step4*/

    .to-left {
        float: none;
        width: 100%;
    }

    .step4 .nav-tabs {
        width: 90%;
    }

    .step4 .nav-tabs li {
        padding: 0;
        margin: 0 5px;
    }

    .step4 .nav-tabs li a {
        padding: 5px 0;
    }

    .step4 .tab-content {
        width: 90%;
    }

    .step4 .nav-tabs li .active {
        padding: 5px 10px;
    }

    .step4 .check-info-group input[type="checkbox"]~label span {
        width: calc(100vw - 150px);
        line-height: 20px;
        font-size: 17px;
        text-align: left;
        top: 0;
    }

    /*step4 end*/
    /*step5 css*/
    .step5 .travel-pic {
        height: 255px;
        ;
    }

    .step5 .travel-pic h1 {
        margin-top: 55px;
    }

    .step5 .travel-form-group.next {
        position: initial;
        margin-top: 100px;
        width: 50%;
    }

    /*step5 end*/
    /*step6 css*/
    .step6 .travel-pic {
        background-size: cover;
        background-image: url(/assets/images/car/final-banner-m.png);
    }

    /*step6 end*/
    /*step7 css*/
    .step7 .travel-pic {
        background-image: url(/assets/images/car/car-confirm-banner-m.png);
        background-position: top;
    }

    .step7 .travel-pic h1 {
        margin-top: 10px;
    }

    .step7 .travel-pic p {
        text-align: center;
    }

    /*step7 end*/
    .step4 .goto-notice {
        width: 80%;
    }

}

@media(max-width:480px) {
    .overlay .popup {
        margin-top: 70px;
        width: 90%;
        left: 5%;
    }

    .pop-img {
        left: calc(50% - 35px);
        top: -35px;
    }

    .pop-img img {
        width: 70px;
    }

    #popup1 .content {
        padding: 50px 25px 0;
        max-height: 455px;
        overflow: scroll;
    }

    .injury-banner-subtitle {
        padding-left: 20px;
        padding-bottom: 30px;
    }

    .travel-pic {
        background-size: 45%;
    }

    .travel-pic h1 {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .injury-wrapper .col-md-4 {
        margin-bottom: 20px;
    }

    .job-type select {
        width: 100%;
        padding-left: 15px;
    }

    .injury-wrapper .modal-title {
        width: 80%;
    }

    .injury-block-detail {
        -webkit-overflow-scrolling: touch;
    }

    .insure-eg {
        height: 400px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .injury-choose-block {
        width: 100%;
        max-width: initial;
        margin-bottom: 50px;
    }

    .injur-step2-form .col-md-6 {
        padding: 0;
    }

    .money-notice select {
        width: 100%;
        padding-left: 15px;
        max-width: initial;
    }

    .injury-btn-group {
        text-align: center;
    }

    .light-blue-btn,
    .injury-btn-group a.injury-btn.light-blue-btn {
        margin-bottom: 15px;
    }

    .injury-choice .native-name-detail .block-bottom .profit-title p.delete-user {
        margin-right: 20px;
    }

    .past-wrapper ol li,
    .past-wrapper .green-title {
        line-height: 25px;
    }

    .col-half {
        width: 100%;
        display: block;
    }

    .check-info-group.full-width .injury-choice p {
        width: 120px;
    }

    .check-info-group.full-width .injury-choice .profit-block-wrapper.block-top p {
        width: 30%;
    }

    .check-info-group.full-width .injury-choice .profit-block-wrapper.block-top p span {
        width: 50px;
    }

    .profit-block-wrapper.block-bottom {
        margin-top: 0;
    }

    .client-info input,
    .client-info~.col>input {

        width: 100%;
        max-width: initial;
        margin-top: 5px;
    }

    .step4 .nav-tabs,
    .step4 .tab-content {
        width: 100%;
    }

    .step4 .tab-content {
        padding: 10px;
    }

    .step4 .nav-tabs li a {
        display: inline-block;
    }

    .injury-04.injury-otp .travel-pic {
        height: 255px;
    }

    .otp-block {
        min-height: initial;
    }

    .log01-input {
        width: 100%;
    }

    .finish-wrapper p {
        text-align: left;
    }

    #country-list label {
        width: 100%;
    }

    .travel-modal .nav-tabs a i {
        display: block;
        margin-bottom: 5px;
    }

    .travel-modal .nav-tabs li {
        padding: 0;
    }

    .travel-modal .nav-tabs li a {
        font-size: 14px;
    }

    .travel-modal .tab-content {
        height: 300px;
    }

    .injury-wrapper .travel-modal .modal-content {
        margin-top: 10px;
    }

    .travel-modal .modal-footer input {
        width: 100%;
    }

    .goto-notice h5 {
        text-align: left;
    }

    .step4 .gotosign-btn .goto-yes {
        width: 100%;
    }

    .injur-step1-form p {
        font-size: 18px;
    }

    i.f-20 {
        font-size: 20px;
    }

    .injury-list li p.injury-price {
        vertical-align: top;
    }

    .check-info-group.full-width .injury-choice .block-bottom p.addr-block,
    .injury-choice .native-name-detail input[type="text"],
    .injury-choice .native-name-detail select,
    .injury-choice .native-name-detail .addr-block input[type="text"],
    .injury-choice .native-name-detail .addr-block select,
    .injury-choice .native-name-detail .addr-block input[type="text"].profit-addr-long {
        max-width: initial;
        width: 100%;
    }

    .same-call {
        margin: 5px auto 15px 0;
    }

    .injury-btn-group a.injury-btn,
    .injury-btn-group button.injury-btn,
    .injury-btn-group label.injury-btn {
        width: 120px;
        line-height: 34px;
    }

    .injury-list-wrapper {
        width: 100%;
        display: block;
    }

    .self-bottom {
        padding: 0 15px;
    }

    .injury-list li p.injury-price {
        width: 70px;
    }

    .self-bottom .injury-check,
    .choice-detail {
        display: block;
        width: 100%;
    }

    .injury-check .update-price {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.2em;
        text-align: center;
    }

    .notice {
        line-height: 25px;
    }

    .step3 .travel-pic,
    .injury-04 .travel-pic {
        background-position: right bottom;
    }

    .bonus-number button {
        width: 90px;
    }
}