﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* 20230630 */

/* --------------------------------
    CSS INDEX
-------------------------------- */
/*
1. COMMON
2. NAVIGATION
3. LAYOUTS
4. SLIDE TOP MENU
5. BUTTON
6. FONT
7. SCROLL
8. POPUP
9. TABLE
10. COMPANY MAIN
11. RESET DEFAULT CSS
12. MEDIA RULE
-----------------------------------
ETC
13. Z-INDEX
14. SPANISH
*/

:root {
    --defaultFont: "Open Sans",Arial,sans-serif;
    --colorSet1: #0381a2;
    --colorSet2: #0381a2;
    --default-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25);
}

/* --------------------------------
    1. COMMON
-------------------------------- */
body { font-family:'Open Sans', 'Arial', 'sans-serif'; color:var(--defaultText); font-size:14px; font-weight:100; }
@media screen and (max-width:499px) { body { font-size:calc(.95rem + .12vw); } }
.loan-process { max-width:1200px; margin:5px auto 50px auto; }
.d-flex { display:flex !important; }
.flex-column { flex-direction:column !important; }
a { color:var(--defaultText); }
ul, dl, dd { margin: 0; padding: 0; }

/*multiple lines*/
.text-truncate {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* --------------------------------
    2. NAVIGATION
-------------------------------- */
.landing-menu-type__2 { padding-bottom:20px; text-align:right; }
.landing-menu-type__2 li { display:inline-block; height:32px; margin:0 5px; font-size:16px; text-align:right; vertical-align:middle; }
.landing-menu-type__2 li.borderline { width:10px; padding:10px 5px; color:#6d6d71; font-weight:normal; cursor:default; }
.landing-menu-type__2 li:first-of-type { margin-left:0; }
.landing-menu-type__2 li:last-of-type { margin-inline:0; }
.landing-menu-type__2 li a,
.landing-menu-type__2 li button { width:100%; min-width:initial; min-height:initial; padding:0; border:none; background:none; color:inherit; font-size:inherit; text-align:left; box-sizing:border-box; box-shadow:none; }

.landing-menu-type__2 .ico-lang { position:absolute; top:7px; left:7px; font-size:20px; color:var(--defaultText); }
.landing-menu-type__2 .fa-caret-down { position:absolute; top:7px; right:10px; font-size:16px; }
.landing-menu-type__2 .nav-lang { display:inline-block; position:relative; width:34px; min-width:inherit; height:34px; padding:0 2px; border-radius:100%; background:none; color:var(--defaultBlue); font-weight:normal; font-size:13px; text-align:center; line-height:1.5em; vertical-align:middle; cursor:pointer; box-sizing:border-box; }
.landing-menu-type__2 .nav-lang:is(:focus, :hover, :active) { background:var(--defaultBorder); }
.landing-menu-type__2 .nav-lang button { display:inline-block; position:relative; width:34px; min-width:inherit; height:34px; padding:0 2px; border-radius:100%; background:none; font-weight:500; font-size:13px; text-align:center; line-height:1.5em; vertical-align:middle; cursor:pointer; box-sizing:border-box; }
.landing-menu-type__2 .nav-lang .dropdown-box { height:32px; padding-left:30px; border-radius:.382rem; background:none; color:var(--defaultText); line-height:28px; cursor:pointer; box-sizing:border-box; }
.landing-menu-type__2 .nav-lang .dropdown-list { position:absolute; top:35px; right:2px; z-index:1004; width:inherit; min-width:120px; padding:0; border:none; border-radius:.382rem; background:rgba(255, 255, 255, 0.38); color:var(--defaultText); box-shadow:var(--default-shadow); box-sizing:border-box; }
.landing-menu-type__2 .nav-lang .dropdown-list dd { width:100%; height:inherit; margin:0; padding:5px 0; border-radius:0; font-size:14px; text-align:center; cursor:pointer; box-sizing:border-box; }
.landing-menu-type__2 .nav-lang .dropdown-list dd:hover { background:var(--defaultHover); color:var(--defaultBlue); text-decoration:none; }
.landing-menu-type__2 .nav-lang .dropdown-list dd:nth-child(1) { border-radius:.382rem .382rem 0 0; }
.landing-menu-type__2 .nav-lang .dropdown-list dd:nth-child(2) { border-radius:0 0 .382rem .382rem; }
.nav-index .landing-menu-type__2 a { height:32px; padding:0 5px; border:0; background:transparent; color:var(--defaultText); font-size:16px; text-align:center; }
.nav-index .landing-menu-type__2 a:is(:focus, :hover, :active) { opacity:.9; text-decoration:underline; }
.nav-index .landing-menu-type__2 a.on { color:var(--colorSet2); font-weight:600; }

.nav-product { display:inline-block; position:relative; min-width:200px; width:250px; min-height:fit-content; height:100%; padding:1em 20px 0 5px; font-size:1.2rem; text-align:left; vertical-align:top; }
.nav-product .list-container dl { padding:5px 0; border-radius:0.65rem; background:#fff; }
.nav-product .list-container dl dd { width:100%; margin:4px 0; padding:.52rem 5px 0.72rem 1.2rem; border-radius:.5rem; color:var(--defaultText); font-weight:500; word-break:break-word; box-sizing:border-box; cursor:pointer; }
.nav-product .list-container dl dd:hover { background:var(--defaultHover); color:#0477a2; }
.nav-product .list-container dl dd.on { background:var(--defaultBlue); color:#fff; font-weight:500; box-shadow: rgba(149, 149, 149,.5) 1px 1px 2px; }
.nav-product .list-container dl dd.disabled { color:var(--defaultText); opacity:0.5; cursor:default; }
.nav-product .list-container dl dd.on.disabled { color:#fff!important; opacity:0.5; cursor:default; }
.nav-product .list-container dl dd:hover:not(.on) { color: var(--colorSet1); }

.nav-product .list-container dl dd.list-icon { padding:0 0 0 .5rem; }
.nav-product .list-container dl dd.list-icon:is(:focus, :hover, :active) { background:none; }
.nav-product .list-container dl dd.list-icon i.fa-arrow-left { width:38px; height:38px; padding:9px; color:var(--defaultText); border-radius: 38px; font-size:20px; vertical-align:middle; box-sizing:border-box; cursor:pointer; }
.nav-product .list-container dl dd.list-icon i.fa-arrow-left:is(:focus, :hover, :active) { background:var(--defaultHover); }


/* --------------------------------
    3. LAYOUTS
-------------------------------- */
/*.content { max-width:1070px; }*/
.content-product { width:800px; max-width:800px; padding-top:30px; }
.content-product .title-level-1 { color:var(--defaultText); font-size: calc(1.5rem + .4vw); font-weight:500; line-height: calc(1.1rem + .8vw); }

.content-product .product-intro { margin:3.5em 0 0 0; text-align:left; box-sizing:border-box; }
.content-product .product-intro img { max-width:800px; }
.content-product .product-footer { margin:0; text-align:left; box-sizing:border-box; }
.content-product .product-footer img { max-width:800px; }
.content-product .desc-container { min-height:100px; margin:2em auto 1.6em auto; }
.content-product .desc-item__null { padding:7em 0; text-align:center; }
.content-product .desc-item { display:inline-block; width:260px; height:220px; /*margin:0 6px 10px 0;*/ padding:15px; border:1px solid #dedede; border-radius:5px; background:none; color:var(--defaultText); text-align:left; box-sizing:border-box; box-shadow:var(--default-shadow); }
.content-product .desc-item:hover { background:var(--colorSet1); color:#fff; /*opacity:.92;*/ cursor:pointer; /*transform:translateY(-2px);*/ }
.content-product .desc-item:hover .fa-arrow-right { opacity:1; }
/*.content-product .desc-item:nth-child(3n+3) { margin-right:0; }*/
.content-product .desc-item dl { width:230px; }
.content-product .desc-item dt { overflow:hidden; margin-bottom:0; font-size:18px; font-weight:100; text-overflow:ellipsis; white-space:nowrap; }
.content-product .desc-item dd:nth-child(2) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; white-space: normal; text-overflow: ellipsis; word-break: break-word; -webkit-line-clamp: 6; }
.content-product .desc-item dd:nth-child(3) { text-align:right; }
.content-product .desc-item .fa-arrow-right { margin-top:2px; font-size:28px; opacity:.22; }

.content-product .content-level-2 img { max-width:800px; }

/*flex*/
.content-product .desc-container { 
    display:flex; 
    justify-content: flex-start;
    align-items: start;
    justify-items: center;
    align-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    grid-column-gap: 7px;
    grid-row-gap: 7px; 
}
.content-product .desc-item { 
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}


/*grid*/
.content-product .desc-item dl {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 40px 120px 30px;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.content-product .desc-item dt { grid-area: 1 / 1 / 2 / 2; }
.content-product .desc-item dd:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
.content-product .desc-item dd:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }

.content-product h3 { margin-bottom:30px; padding-bottom:10px; border-bottom:2px solid var(--defaultText); color:var(--defaultText); font-weight:500; }
.content-product .detail-list {  }
.content-product .detail-list dt { font-weight:bold; }
.content-product .detail-list dd {  }

.content-product .slt-product { display:none; padding:20px 0 30px 0; text-indent:-.8em; }
.content-product .slt-product select { height:35px; margin-top:-1px; margin-left:2px; padding:4px 3px 4px 6px; border:none; border-bottom:1px solid var(--colorSet1); border-radius:0; background:none; color:var(--defaultText); }
.content-product .slt-product select:hover { border:none; border-bottom:1px solid transparent; background:none; }
.content-product .slt-product select:focus { border:none; border-bottom:1px solid transparent; background:none; }

/* --------------------------------
    4. SLIDE TOP MENU
-------------------------------- */
.landing-menu-container { padding-top:30px; background:#fff; text-align:left; }
.landing-menu-container ul { padding-top:10px; }
.landing-menu-container ul li { width:100%; height:44px; margin:0; padding:0; border-bottom:1px solid #e7e7e7; font-weight:500; box-sizing:border-box; cursor:pointer; }
.landing-menu-container ul li:hover { background:var(--defaultHover); color:var(--colorSet2); }
.landing-menu-container ul li:last-of-type { position:relative; }
.landing-menu-container ul li:last-of-type { border-bottom:none; }
.landing-menu-container ul li.bg-enabled { background:var(--defaultHardLightBlue); }
.landing-menu-container ul li.bg-enabled button:not(.dropdown-list button) { color:var(--colorSet2); }
.landing-menu-container ul li i { margin-left:5px; font-size:0.8em; vertical-align:0; }
.landing-menu-container ul li .dropdown-list { position:absolute; top:44px; right:0; width:100%; background:#fff; }
.landing-menu-container ul li .dropdown-list ul { padding:0; }
.landing-menu-container ul li .dropdown-list ul li { border-bottom:none; opacity:1; }
.landing-menu-container ul li .dropdown-list ul li:hover button { text-decoration:underline; }

.landing-menu-container ul li a,
.landing-menu-container ul li button { width:100%; padding:10px 5px 12px 1.2rem; border:none; border-radius:0; background:none; color:inherit; font-size:inherit; text-align:left; box-sizing:border-box; }

.left-slide-menu .menu-list-slide { width:100%; max-width:100%; height:fit-content; min-height:142px; box-sizing:border-box; }
.drawer { display:flex !important; overflow:auto; z-index:2002; position:fixed; top:0; bottom:0; background-color:#fff; transition:transform .3s ease-in-out; }
.drawer.drawer-end { left:0; transform:translateY(-100%); }
.drawer.drawer-on { transform:none; transition:transform .3s ease-in-out; }
.left-slide-menu .menu-list-slide .left-menu-title span { left:inherit; right:0; padding:8px 1rem 0 2rem; }
.left-slide-menu .menu-list-slide.drawer { height:initial; background:transparent; }
/* --------------------------------
    5. BUTTON
-------------------------------- */


/* --------------------------------
    6. FONT
-------------------------------- */
.fw-lighter { font-weight:lighter !important; }
.fw-normal { font-weight:normal !important; }
.fw-semibold { font-weight:500 !important; }
.fw-bold { font-weight:600 !important; }
.fw-bolder { font-weight:800 !important; }
.txt-muted { color:var(--defaultText) !important; }

.fs-1 { font-size:28px !important }
.fs-2 { font-size:26px !important }
.fs-3 { font-size:25px !important }
.fs-3-5 { font-size:22px !important }
.fs-4 { font-size:20px !important }
.fs-5 { font-size:18px !important }
.fs-6 { font-size:16px !important }
.fs-7 { font-size:14px !important }
.fs-7-5 { font-size:13.5px !important }
.fs-8 { font-size:13px !important }
.fs-9 { font-size:12px !important }
.fs-10 { font-size:11px !important }
.fs-base { font-size:1rem !important }
.fs-fluid { font-size:100% !important }
.fs-2x { font-size:calc(1.325rem + .9vw) !important }
.fs-2qx { font-size:calc(1.35rem + 1.2vw) !important }
.fs-2hx { font-size:calc(1.375rem + 1.5vw) !important }
.fs-2tx { font-size:calc(1.4rem + 1.8vw) !important }
.fs-3x { font-size:calc(1.425rem + 2.1vw) !important }
.fs-3qx { font-size:calc(1.45rem + 2.4vw) !important }
.fs-3hx { font-size:calc(1.475rem + 2.7vw) !important }
.fs-3tx { font-size:calc(1.5rem + 3vw) !important }
.fs-4x { font-size:calc(1.525rem + 3.3vw) !important }
.fs-4qx { font-size:calc(1.55rem + 3.6vw) !important }

.text-grey-500 { color:#9d9fab; }
.text-grey-600 { color:var(--defaultText); }
.text-grey-700 { color:#5e6278; }
.text-grey-800 { color:var(--defaultText); }
.text-grey-900 { color:#151829; }


/* --------------------------------
    Col
-------------------------------- */
.zip-xl-auto { flex:0 0 auto; width:auto }
.zip-xl-1 { flex:0 0 auto; width:8.3333333% }
.zip-xl-1-5 { flex:0 0 auto; width:13.3333333% }
.zip-xl-2 { flex:0 0 auto; width:16.66666665% }
.zip-xl-2-5 { flex:0 0 auto; width:20% }
.zip-xl-3 { flex:0 0 auto; width:25% }
.zip-xl-3-5 { flex:0 0 auto; width:28% }
.zip-xl-4 { flex:0 0 auto; width:33.3333333% }
.zip-xl-4-5 { flex:0 0 auto; width:39% }
.zip-xl-5 { flex:0 0 auto; width:41.66666665% }
.zip-xl-5-5 { flex:0 0 auto; width:46.66666665% }
.zip-xl-6 { flex:0 0 auto; width:50% }
.zip-xl-6-5 { flex:0 0 auto; width:53.3333333% }
.zip-xl-7 { flex:0 0 auto; width:58.3333333% }
.zip-xl-7-5 { flex:0 0 auto; width:63.3333333% }
.zip-xl-8 { flex:0 0 auto; width:66.66666665% }
.zip-xl-8-5 { flex:0 0 auto; width:70% }
.zip-xl-9 { flex:0 0 auto; width:75% }
.zip-xl-9-5 { flex:0 0 auto; width:80% }
.zip-xl-10 { flex:0 0 auto; width:83.3333333% }
.zip-xl-10-5 { flex:0 0 auto; width:86.66666665% }
.zip-xl-11 { flex:0 0 auto; width:91.66666665% }
.zip-xl-11-5 { flex:0 0 auto; width:95% }
.zip-xl-12 { flex:0 0 auto; width:100% }


/* --------------------------------
    7. SCROLL
-------------------------------- */
/*.doc-comment ul li textarea::-webkit-scrollbar { width:0.55em; height:2em; }
.doc-comment ul li textarea::-webkit-scrollbar-button:start:decrement,
.doc-comment ul li textarea::-webkit-scrollbar-button:end:increment { width:0px; height:0; display:block; background-color:#fff; }
.doc-comment ul li textarea::-webkit-scrollbar-button:horizontal:start:decrement,
.doc-comment ul li textarea::-webkit-scrollbar-button:horizontal:end:increment { height:0; display:block; background-color:#fff; }
.doc-comment ul li textarea::-webkit-scrollbar-track-piece { background-color:#fff; border-radius:10px; }
.doc-comment ul li textarea::-webkit-scrollbar-thumb:vertical,
.doc-comment ul li textarea::-webkit-scrollbar-thumb:horizontal { background-color:#607d8b; border:1px solid #fff; -webkit-border-radius:6px; }*/


/* --------------------------------
    8. POPUP
-------------------------------- */



/* --------------------------------
    9. TABLE
-------------------------------- */
.table-rate { border:none; border-collapse:collapse; }
.table-rate tr:nth-child(odd) { background:#f5f5f5; }
.table-rate tr:nth-child(even) { background:#fff; }
.table-rate tr:only-child { background:#fff; }
.table-rate tr:nth-child(odd):last-of-type { border-bottom:1px solid #e4e0e0; }
.table-rate tr:nth-child(even):last-of-type { border-bottom:1px solid #e4e0e0; }
.table-rate th { padding:8px 10px 6px 10px; border-top:0; border-left:0; border-right:0; border-bottom:1px solid #efeeee; background:var(--colorSet1); color:#fff; font-size:14px; font-weight:normal; line-height:22px; /*text-decoration:underline; cursor:pointer;*/ }
.table-rate th span { cursor:default; }
.table-rate td { padding:8px 10px 6px 10px; border-top:0; border-left:0; border-right:0; border-bottom:1px solid #e4e0e0; font-size:14px; vertical-align:top; word-break:break-all; }
.table-rate td.txt_c { padding-right:0; }
.table-rate td div { font-size:14px; }
.table-rate td span { display:block; word-break:break-word; }


/* --------------------------------
    10. COMPANY MAIN
-------------------------------- */
.company-product-list { margin:0 auto; text-align:left; }


/* --------------------------------
    11. RESET DEFAULT CSS
-------------------------------- */
.notice-required { font-size:13px !important; }



/* --------------------------------
    12. MEDIA RULE
-------------------------------- */
@media screen and (max-width:1269px) {
    .content { width: 840px!important; max-width: 840px !important; }
}
@media screen and (min-width:500px) {
    .content-level-1 { position:relative; min-height:456px; }
    .content-level-1.content-product.product-list  { width:800px; max-width:800px; padding-left:0; border-left:none; }
    .nav-product ~ .content-level-1 { padding-left:49px; border-left:1px solid #e7e7e7; }
}

/*narrow screen*/
@media screen and (max-width:870px) {
    .content { width: 100%!important; max-width: 100%!important; }
    .content-level-1.content-product { max-width:100%; width:99.5%!important; }
    .content-product .product-intro img { max-width:100%; }
    .content-product .product-footer img { max-width:100%; }
    .content-product .content-level-2 img { max-width:100%; }

    /*desc-box*/
    .content-product .desc-item { width:49%; }
    /*.content-product .desc-item:nth-child(even) { margin-right:0; }
    .content-product .desc-item:nth-child(3n+3) { margin-right:6px; }*/
    .content-product .desc-item dl { width:100%; }
    
}
@media screen and (max-width:600px) {
    .table-rate { width:100%; min-width:400px; }

    /*desc-box*/
    .content-product .desc-container { grid-row-gap: 10px; }
    .content-product .desc-item { width:100%; min-width:245px; }
    /*.content-product .desc-item:hover { transform:translateY(0) }*/
}
/*narrow mobile*/
@media screen and (max-width:400px) {
    .table-rate { min-width:100%; }
}
/*mobile*/
@media screen and (max-width:430px) {
	
}

/*left menu*/
@media screen and (min-width:871px) {
    .landing-menu-type__2 { display:block; }
    .landing-slide-menu { display:none; }
    .left-menu { display:none; }
    .left-menu-container { display:none; }
    .menu-list-slide { display:none!important; }
    .drawer-overlay { display:none!important; }
	
}
@media screen and (max-width:870px) {
    .landing-menu-type__2 { display:none; }
    .landing-slide-menu { display:block; }
    .left-menu-container { top:10px; left:inherit; right:20px; width:20px; height:20px; min-width:inherit; padding:8px; border-radius:.5rem !important; }
    .left-menu-title-fold { display:none; }
    .landing-menu-container { font-size:16px; }
    .btn-leftmenu { padding-left:0; font-size:1.6rem; }
    .landing-classic .landing-wrap .section02 { padding:0 5%; }
    .landing-renewal .landing-wrap .section02 { padding:0 5%; }
}

@media screen and (max-width:1240px) {
    .nav-product { display:none; }
    .content-level-1.content-product { padding-left:0; border-left:none; }
    .content-product h3 { display:none; }
    .slt-product { display:block!important; }
}

/*@media screen and (min-width:1269px) {
    .content { width:840px; }
}*/

/* --------------------------------
    13. Z-INDEX
-------------------------------- */

/*


    
*/



/* --------------------------------
    14. SPANISH
-------------------------------- */
