div{box-sizing:border-box;}
.card_wrap {display: flex;flex-wrap: wrap;flex: 0 0 100%;width: 100%;}
.ka_flex {flex: 0 0 33.3333%;padding: 0 5px;display: flex;width: 100%;}
.ka_card {display:flex;flex-direction: column;flex:1 0 0%;border: 1px solid #eee;border-radius: 7px;background: #fff;width: 100%;margin: 15px 0;transition: box-shadow 0.5s ease-in-out;}
.ka_flex .ka_card:hover {box-shadow: 0px 30px 60px -30px rgba(0, 0, 0, 0.25);transition: box-shadow 0.5s ease-in-out;}
.ka_card_header {padding: 15px;border-bottom: 1px solid #eee;}
.ka_card_header .product_name {font-size:18px;margin-bottom:5px;font-weight: bold;}
.ka_card_body {color: #666;padding: 15px;font-size: 13px;flex: 1 1 auto;}
.ka_card_footer {padding: 15px;text-align: center;border-top: 1px solid #eee;display: flex;}
.ka_blue{color:#fff;background-color: #007bff;border-color:#007bff;}
.ka_card_footer a.ka_btn {display: block;padding: 8px 15px;background: #007fff;color: #fff;border-radius: 3px;}
.ka_btn::before {content: "";position: absolute;bottom: 0;left: 0;right: 100%;border-bottom: 1px solid #222;transition: right .3s ease-out;}
.ka_img img {width: 100%;}
.flex_footer_nav {display: flex;justify-content: space-between;}
.page_nav ul {list-style: none;display: flex;}
.page_nav ul li {color: #333;}
.page_nav ul li a {padding:0 20px;border: 1px solid #e5e5e5;display: flex;line-height: 38px;}
.page_nav ul li.active {background-color: #1e87f0;}
.page_nav ul li.active a{background-color: #1e87f0;color: #fff;}
.search_div {display: flex;justify-content: flex-end;margin:5px 0 35px}
.search_div form {display: inline-block;border:1px solid #eee;border-radius: 50px;padding:10px 19px;;}
.search_div input[type="text"], .search_div input[type="submit"]{border:0;background:#fff;padding:5px;}
.search_div select {margin:5px;}
.search_div .x_btn {background-color: #1e87f0;color: #fff;border: 1px solid transparent;padding: 0 10px;display: flex;margin: 0 2px;}
.search_div a.x_btn {background-color: transparent;color: #333;border: 1px solid #e5e5e5;margin: 0 2px;}

.pagination { text-align: center; padding: 20px 0;}
.pagination a { font-size: 12px; width: 30px; height: 30px; background-color: transparent; color: #222; border: 1px solid rgba(0,0,0,.05); display: inline-block; vertical-align: middle; line-height: 30px; text-decoration: none; border-radius: 50%; margin: 2px; transition: all 0.2s linear;}
.pagination a:hover, .pagination a.selected { color: #fff; background-color: #3498db;}
.pagination.small a { font-size: 10px; width: 24px; height: 24px; line-height: 24px;}

.buy_div {max-width: 750px;margin: 0 auto;}
.payment {flex: 1;}
.info {flex: 1;width: 100%;padding: 0 100px;margin: 0 auto;flex-flow: column;display: flex;}
.card-body {flex: 1 1 auto;padding: 1.25rem;border: 1px solid gray;}
.card-body h3 {text-align: center;}
.iamport_div h1 {text-align: center;padding-bottom: 30px;}
.wrap_form {flex: 1;width: 100%;padding: 0 100px;margin: 0 auto;flex-flow: column;display: flex;}
.ka_btn {text-align: center;border: 1px solid gray;padding: 10px;width:100%;}
.input_form {padding: 10px 0;margin: 0 auto;}
.settle_case label {width: auto !important;}
.input_form label {width: 200px;margin-top: 7px;float: left;}
.settle_case {display: flex;}
.input_form input[type="text"] {height: 40px;width: 100%;padding: 0 10px;background: #fff;color: #666;border: 1px solid #e5e5e5;vertical-align: middle;display: inline-block;}
.input_form input:disabled {background-color: #f8f8f8;color: #999;border-color: #e5e5e5;}

.ka_h1 {font-size: 38px;display: block;position: relative;margin: 30px auto 0;width:100%; }
.ka_h1::before {content: "";display: inline-block;position: relative;top: calc(-0.1 * 1em);vertical-align: middle;height: .9em;margin-right: 10px;border-left: 5px solid #1e87f0;}
.ka_auto_flow{overflow-x: auto; }

.ka_table {margin: 20px auto;border-collapse: collapse;border-spacing: 0;width: 100%;}
.ka_table tr:nth-of-type(odd) {background: #f8f8f8;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}
.ka_table td , .ka_table th{padding: 16px 12px;vertical-align: top;text-align:center;display: table-cell;min-width:70px;}
.ka_table td:first-child {text-align: center;}

.ka_btn_group {display: flex;justify-content: center;}
.ka_btn {background-color: #1e87f0;color: #fff;border: 1px solid transparent;display: flex;margin: 0 2px;align-items: center;justify-content: center;align-self: flex-start;}
@media (max-width: 560px) {
    .ka_flex{flex: 0 0 100%;    }
    .flex_footer_nav{flex-flow: column;}
    .page_nav ul,.search_div {justify-content: center}
    .page_nav ul {padding-left:0;overflow: auto;    }
    .page_nav ul li a{padding:0 10px;}
    .info {padding: 0 10px;}
    .wrap_form {padding: 0 10px;}
}
@media (min-width: 561px) and (max-width: 630px) {
    .ka_flex{flex: 0 0 50%;}
    .flex_footer_nav{flex-flow: column;}
    .page_nav ul,.search_div {justify-content: center    }
    .page_nav ul {padding-left:0;}
}
@media (min-width: 631px) and (max-width: 940px) {
    .ka_flex{flex: 0 0 50%;}
    .page_nav ul li a{padding:0 10px;}
}
@media (min-width: 941px) and (max-width: 1304px) {
    .ka_flex{flex: 0 0 33.33333%;}
}