.blue { color: #036499; } .yellow { color: #fdde53; } @media only screen and (max-width: 48em) { /*************** ADD MOBILE ONLY CSS HERE ***************/ } /** * Header */ .header-contact li { margin: 0 !important; padding: 0 15px 0 !important; border-right: 1px solid #eee; } .header-contact li:last-child { padding-right: 0px; border-right: 0px; } .header-contact li:nth-child(1), .header-contact li:nth-child(2) { } .header-contact li:nth-child(1) a, .header-contact li:nth-child(2) a { width: 100%; overflow: hidden; letter-spacing: 1px; } .header-contact li:nth-child(1) a i, .header-contact li:nth-child(2) a i{ float: left; display: block; width: 40px; height: 40px; } .header-contact li:nth-child(1) a span, .header-contact li:nth-child(2) a span{ margin: 0 0 0 10px; float: right; display: block; width: calc(100% - 50px); color: #aaa; } .header-contact li:nth-child(1) a em, .header-contact li:nth-child(2) a em{ display: block; font-style: normal; color: #444; } .header-contact li:nth-child(1) a i{ line-height: 40px; text-align: center; color: #222; background-color: #fcdd5e; border-radius: 100%; } .header-contact li:nth-child(2) a i{ line-height: 40px; text-align: center; color: #fff; background-color: #00c300; border-radius: 100%; } .header-contact li:nth-child(3) a { padding-left: 10px; padding-right: 10px; color: #fff; background-color: #0d6697; border-radius: 4px; } .header-contact li:nth-child(3) a i{ color: #fff; background-color: #00c300; width: 26px; line-height: 26px; text-align: center; border-radius: 100%; } .nav-divided>li+li>a:after { display: none; } .header-bottom { } .header-bottom .nav > li > a { font-family: "Kanit", sans-serif; font-weight: normal; letter-spacing: .04em; } .mobile-nav .header-button a:nth-child(1) { width: 30px; height: 30px; line-height: 30px !important; padding: 0; text-align: center; background-color: #00c300; border-radius: 100%; } body .mobile-nav .header-button a:nth-child(1) { line-height: 30px !important; } body .mobile-nav .header-button a:nth-child(1) i { display: block; } body .mobile-nav .header-button a:nth-child(1) i:before { content:'LINE'; color: #fff; font-size: 10px; font-family: Arial; display: block; line-height: 20px; } /** * Class */ .section-title { font-size: 2.2em; font-weight: normal; } .section-title em { font-style: normal; } .section-title b { height: 0 !important; } .footer-2 { padding-top: 60px; padding-bottom: 30px; } .footer-2 p span { color: #888; } .footer-2 .widget-title { color: #fff; } .wpcf7-form label { font-weight: normal; } .wpcf7-form .star { color: #a00; } .wpcf7-form .codedropz-upload-container { background-color: #fff; } .wpcf7-form .wpcf7-list-item { width: 140px; } .wpcf7-form strong { font-weight: normal; } /** * Home */ .section-home-why { } .section-home-why .icon-box .icon-inner { border: 2px solid #0d6697; border-radius: 8px; } .section-home-3step { } .row-3step { padding-top: 30px; margin-bottom: 20px; border: 2px dashed #0d6697; border-radius: 8px; } .section-home-diff { } .section-home-diff .row h3 { padding: 8px 10px; text-align: center; color: #fff; background-color: #0d6697; border-radius: 4px; } .section-home-diff .row > div:before { border-left: 2px dotted #888; } .section-home-diff .row > div:first-child:before { border: 0; } @media only screen and (max-width: 767px) { .section-home-why .icon-box .icon-box-text { padding-bottom: 20px; font-size: 140%; border-bottom: 2px solid #eee; } .row-3step { font-size: 140%; } } @media only screen and (max-width: 767px) { .section-home-spacial .banner .text .text-inner h3 strong { display: block; } .section-home-spacial .banner .text .text-inner a { margin-right: 0; } } /** * Loan Page */ @media only screen and (max-width: 667px) { .banner-loan .text-box .text-inner h4 strong { display: block; } .banner-loan .text-box .text-inner br { display: none; border: 1px solid red; } } /** * Assignment */ .row-5step { } .row-5step .col-inner { padding: 20px 20px 20px; color: #222; background-color: #eee; } .row-5step .col-inner p:nth-child(1) { margin: -40px auto 0; width: 40px; height: 40px; line-height: 36px; background-color: #fff; border: 2px solid #ccc; border-radius: 100%; } .row-5step .col-inner h3 { padding: 10px 0 10px; font-size: 110%; font-weight: normal; min-height: 110px; border-bottom: 1px solid #ccc; } .row-5step .col-inner p:nth-child(3) { font-size: 90%; min-height: 72px; } /** * Progress */ .tbl { } .tbl caption { margin-bottom: 10px; font-size: 150%; color: #fff; background-color: #0d6697 ; } .tbl tr td{ padding: 10px 20px; background-color: #f7f7f7; border: 5px solid #fff; } .tbl tr td:nth-child(2), .tbl tr td:nth-child(3) { width: 35%; } .tbl tr td:nth-child(1) img { margin-bottom: 0; max-width: 80px; } .tbl tr td:nth-child(1) { text-align: center; font-size: 180%; color: #0d6697; } @media only screen and (max-width: 767px) { .tbl td { display: block; width: 100% !important; font-size: 110%; border: 1px solid #fff !important; } .tbl tr { display: block; width: 100% !important; border-bottom: 10px solid #fff !important; } } .row-3step-process { } .row-3step-process .col-inner { padding: 20px 20px; min-height: 200px; background-color: #f7f7f7; } .row-3step-process .col-inner:before { content: ">"; display: block; position: absolute; top: calc(50% - 20px); right: -20px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; font-size: 200%; font-weight: bold; background-color: #f7f7f7; border-radius: 100%; } .row-3step-process .col:last-child .col-inner:before { display: none; } .row-3step-process .col:nth-child(2) .col-inner { padding-top: 50px; } .row-3step-process .col:nth-child(3) .col-inner { padding-top: 50px; } /** * Withdraw */ .row-progress-step { } .row-progress-step .col-inner { padding-top: 40px; min-height: 300px; } @media only screen and (max-width: 767px) { .row-progress-step .col-inner { font-size: 130%; } } .list-true{ } .list-true li{ padding-left: 35px; position: relative; list-style: none; } .list-true li:before { content: "\2713"; position: absolute; top: 0; left: 0; display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; color: #fff; background-color: #369; border-radius: 100%; } .loan-circle { margin: 0 auto; width: 200px; height: 200px; color: #fff; font-size: 24px; line-height: 30px; text-align: center; background-color: #369; border-radius: 100%; } .loan-circle span { padding-top: 70px; display: block; } .loan-circle span em{ font-size: 260%; font-style: normal; } .bg-blue { margin: 20px auto; padding: 12px 12px; border: 2px solid rgba(255,255,255,.8); } .bg-blue > h4 { margin: 0; padding: 20px 20px !important; background-color: rgba(0,100,153,.3); } .button-call, .button-line { padding: 0 0 !important; min-width: 200px; max-width: 290px !important; width: 100%; } .button-call i, .button-line i { color: #fff; background-color: #00c300; width: 32px; height: 32px; border-radius: 100%; } .button-call i { line-height: 32px !important; } .button-line i { line-height: 23px !important; } .button-line i:before { content:'LINE'; font-family: arial; font-weight: bold; font-size: 10px; } @media only screen and (max-width: 767px) { .button-call, .button-line { max-width: 100% !important; } .row-3step { width: 92% !important; } /*.row-diff-list ul { margin: 0; padding: 0; width: 100%; list-style: none; overflow: hidden; } .row-diff-list ul li{ margin: 0; padding: 0; float: left; width: 50%; }*/ .row-diff-list ul { margin: 0; padding: 0; width: 100%; list-style: none; overflow: hidden; } .row-diff-list ul li{ margin: 0; padding: 0; float: left; width: 50%; } .row-diff-list > div .col-inner h3 { min-height: 70px; text-align: center !important; display: flex; justify-content: center; align-items: center; } .row-diff-list > div .col-inner ol li, .row-diff-list > div .col-inner ul li { display: flex; justify-content: center; align-items: center; padding: 10px 0 10px !important; width: 100%; min-height: 80px; text-align: center; border-bottom: 1px dashed #aaa; } .row-diff-list > div .col-inner ol li { margin: 0 0 0 0 !important; list-style: none; } .row-diff-list > div .col-inner ul li { margin: 0 0 !important; } .button-call-alpha, .button-line-alpha { margin: 0; } } .button-call-alpha, .button-line-alpha { min-width: 200px; } .button-line-alpha i { border: 1px solid #fff;; width: 26px; height: 26px; line-height: 26px !important; text-align: center; overflow: hidden; border-radius: 100%; } .button-line-alpha:hover i { border: 1px solid rgba(0,0,0,.8); } .button-line-alpha i:before{ content: 'LINE'; font-family: Arial; font-size: 8px; display: block; } .button-text-black span { color: #222; font-weight: none; } .line-qr img { border: 1px solid #ccc; } .section-home-money .line-qr .img-inner { overflow: inherit; } .mfp-content { } .mfp-content .nav { margin-left: auto; margin-right: auto; width: 90%; } .mfp-content .nav li:nth-child(1), .mfp-content .nav li:nth-child(2) { padding: 0; width: 100%; text-align: left; } .mfp-content .nav li:nth-child(3) { padding: 0; margin-top: 10px; width: 100%; text-align: left; } .mfp-content .nav li:nth-child(3) a { display: block; } .button.secondary > span { font-weight: normal; color: #222; } .sidebar-menu .header-contact { width: 100%; border-top: 3px solid #ececec; } .sidebar-menu .header-contact li { padding: 8px 0 !important; border: 0; border-top: 1px solid #ececec; } .sidebar-menu .header-contact li a { padding: 0 !important; } .sidebar-menu .header-contact li a span, .sidebar-menu .header-contact li a em { letter-spacing: 0px; } .sidebar-menu .header-contact li:nth-child(1) a em { font-size: 11px; } .sidebar-menu .header-contact li:nth-child(3) a { padding: 10px 10px !important; } .sidebar-menu .header-contact li:nth-child(3) a span { padding-left: 8px !important; } .mfp-content .sidebar-menu .nav li:nth-child(3) { margin-top: 0px; } .tbl-diff { } .tbl-diff thead tr th { font-size: 130%; color: #0d6697; } .tbl-diff tbody tr th { font-weight: normal; } .tbl-diff thead tr th, .tbl-diff thead tr td, .tbl-diff tbody tr th, .tbl-diff tbody tr td { border: 0; } .tbl-diff thead tr th { border-left: 1px dashed #aaa; } .tbl-diff thead tr th:first-child { border: 0; } .tbl-diff tbody tr th { font-size: 104%; border-top: 1px dashed #aaa; } .tbl-diff tbody tr td { font-size: 104%; border-left: 1px dashed #aaa; border-top: 1px dashed #aaa; } .tbl-diff tbody tr td:before { content: '• '; } @media only screen and (max-width: 667px) { .tbl-diff thead th:nth-child(1), .tbl-diff tbody th { display: none; } .tbl-diff thead tr th:nth-child(2), .tbl-diff tbody tr td:nth-child(2) { border-left: 0; } .tbl-diff tbody tr td { padding-top: 20px; padding-bottom: 15px; font-size: 120%; color: #0d6697; } .tbl-diff tbody tr td:before { display: block; font-size: 90%; color: #666; } .tbl-diff tbody tr:nth-child(1) td:before { content: '1. วงเงินอนุมัติ '; } .tbl-diff tbody tr:nth-child(2) td:before { content: '2. ค่าใช้จ่ายที่กรมที่ดิน '; } .tbl-diff tbody tr:nth-child(3) td:before { content: '3. กรรมสิทธิ์ในทรัพย์ '; } .tbl-diff tbody tr:nth-child(4) td:before { content: '4. ระยะเวลาสัญญา '; } .tbl-diff tbody tr:nth-child(5) td:before { content: '5. ดอกเบี้ย '; } }