/* base */
.sub_title {font-size:24px; font-weight: bold; color:#666; margin-block:24px; text-align: left;}
.content_layout {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap:40px;}
.content_layout > div {width:100%;}

/* component */
/* color */
.color_section {}
.color_wrapper {display:flex}
div.jb_logo_box {background:url(../images/ui/logo_jb.png) no-repeat center center; background-size: contain; padding:24px; margin-bottom: 40px; user-select: none;}
.color_box {width:100%; padding-block:20px; padding-inline:44px; color:#fafdfb;}
.color_box h3{font-size:18px;}
.color_box p{font-size:14px;}
.color_desc {font-size:14px; color:#00175e;  font-weight: bold; width: 100%; text-align: left; margin-top:12px;}
.gradient_box {width:100%; height:100px; background:linear-gradient(90deg, #003087 25%, #1ebb7e 75%);}
/* brand */
.brand_section {margin-block:40px;}
/* .brand_section > div.brand_icon_box{background-color: #ddd;height:200px; padding:24px; display:flex; align-items: center; justify-content: center; gap:40px; position: relative;}
.brand_section > div.brand_icon_box .grid{background:url(../images/ui/bg_intro_ui_grid.png) no-repeat center center; background-size: cover; width:100%; height:100%; position: absolute; top:0; left:0; z-index: 1;}
.brand_section > div.brand_icon_box .icon_1{position:relative; z-index: 2; background:url(../images/ui/intro_ui_icon_1.png) no-repeat center center; background-size: contain; width:100px; height:100px;}
.brand_section > div.brand_icon_box .icon_2{position:relative; z-index: 2; background:url(../images/ui/intro_ui_icon_2.png) no-repeat center center; background-size: contain; width:100px; height:100px;}
.brand_section > div.brand_icon_box .icon_3{position:relative; z-index: 2; background:url(../images/ui/intro_ui_icon_3.png) no-repeat center center; background-size: contain; width:100px; height:100px;} */

.brand_desc {font-size:14px; color:#00175e; margin-top:36px; width: 100%; text-align: left;}
/* info */
.info {background-color: #f2f8ff; border-radius: 12px; padding:24px; margin-bottom: 60px;}
.info > div.info_button_box {display:flex; gap:12px; align-items: center;}
.info button { background-color: white; color:#333; border-radius: 6px; padding:12px 24px; font-size:14px; opacity: 0.8;}
.info button:hover {opacity:1}
/* logo */
.logo_section {margin-block:40px;}
.logo_section h4 {font-size:18px; font-weight: bold; color:#666; margin-bottom: 12px; width: 100%; text-align: left;}
.logo_v {background:url(../images/ui/logo_v.png) no-repeat center center; background-size: cover; width:100%; height:176px; }
.logo_type_desc {font-size:14px !important; color:#666; margin-bottom: 20px; margin-top:4px; width: 100%; text-align: left; letter-spacing: -0.01em;}
.logo_g_h_a {background:url(../images/ui/logo_g_h_a.png) no-repeat center center; background-size: cover; width:100%; height:176px;}
.logo_k_h_a {background:url(../images/ui/logo_k_h_a.png) no-repeat center center; background-size: cover; width:100%; height:176px;}
.logo_k_h_b {background:url(../images/ui/logo_k_h_b.png) no-repeat center center; background-size: cover; width:100%; height:176px;}
.logo_g_h_b {background:url(../images/ui/logo_g_h_b.png) no-repeat center center; background-size: cover; width:100%; height:176px;}
.logo_t {background:url(../images/ui/logo_t.png) no-repeat center center; background-size: cover; width:100%; height:312px; margin-bottom: 24px;}
.logo_t_b {background:url(../images/ui/logo_t_b.png) no-repeat center center; background-size: cover; width:100%; height:312px; margin-bottom: 24px;}
.logo_emb {background:url(../images/ui/logo_emb.png) no-repeat center center; background-size: cover; width:100%; height:176px; margin-bottom: 24px;}