@charset "utf-8";

@import url("setting.css");

a{ color: var(--color-10); text-decoration:none; transition: 0.3s all;}
a:hover{ color: var(--color-01); text-decoration: none;}
a:focus{ text-decoration: none;}

.g-4-5 { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem;}

.container{ max-width: 1440px; padding: 0 20px; }
.container.w2{ max-width: 1240px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }

/*** HEADER ***/
header{ width: 100%; height: var(--height-01); padding: 0; background: var(--color-01); border-bottom: 0px solid #ccc; position: fixed; top: 0; z-index: 999; }

.logo{ float: left; margin: 15px 0; padding: 0; background: url('../../inc/img/pic-logo.webp') center center no-repeat; background-size: cover; text-indent: -9999px;}
.logo a{ width: 236px; height: 40px; display: block; }

header.active{ height: 89px; position: fixed; z-index: 999;}
/*** /HEADER ***/

/*** BREADCRUMB ***/
nav[aria-label="breadcrumb"]{ width: 100%; padding: 8px 0 7px 0; font-size: .875em; color: var(--color-13); position: absolute; top: 0; left: 0; z-index: 2; }
ol.breadcrumb{ margin: 0; padding: 0;}
.breadcrumb-item:before{ color: var(--color-13) !important; }
.breadcrumb-item.active{ color: var(--color-02); }
ol.breadcrumb a{ color: var(--color-13); }
ol.breadcrumb a:hover{ color: var(--color-12); }
/*** /BREADCRUMB ***/

/*** CNT ***/
main{ min-height: calc(100vh - 469px); margin-top: var(--height-01); background: #fff; }
main section:last-child{ padding-bottom: 110px; }
main section#i_abt{ padding-bottom: 80px; }

section{ padding: var(--padding-01); }
section#i_news h2, section#i_scenario h2, section#i_news2 h2, section#i_qa h2{ margin-bottom: 40px; padding-bottom: 30px; color: var(--color-01); border-bottom: 1px solid #ccc; }
section#i_news h2 b, section#i_scenario h2 b, section#i_news2 h2 b, section#i_qa h2 b{ margin-right: 20px; display: inline-block; }
section#i_news h2 span, section#i_scenario h2 span, section#i_news2 h2 span, section#i_qa h2 span{ margin: 10px 0 0 4px; color: var(--color-02); font-size: .45em; letter-spacing: 4px; text-transform: uppercase; display: inline-block; }
section h2{ margin-bottom: 20px; color: var(--color-01);}
section h3{ margin-bottom: 20px; color: var(--color-01);}

.h2_t1{ margin: 0 0 20px 0; color: var(--color-02); border: 0; display: flex; align-items: center; }
.h2_t1::before{ margin-right: 30px; }
.h2_t1::after{ margin-left: 30px; }
.h2_t1::before, .h2_t1::after { content: ""; height: 0; border-bottom: 1px solid var(--color-02); flex-grow: 1;}

.bnr_wrap{ background: var(--color-01); position: relative; }
.bnr_inr{ height: 500px; padding: 120px 0; }
.bnr_inr p{ max-width: 575px; }
.bnr_index{ height: auto; padding: 150px 0; background: url('../img/pic-bnr.webp') center center no-repeat; background-size: cover;}
.bnr_view{ background: var(--color-04) url('../img/pic-bnr_view.webp') right top 15% no-repeat; background-size: cover;}
.bnr_qa{ background: var(--color-04) url('../img/pic-bnr_qa.webp') right center no-repeat; background-size: cover;}
.bnr_abt{ background: var(--color-04) url('../img/pic-bnr_abt.webp') right bottom 30% no-repeat; background-size: cover;}
.bnr_atty{ background: var(--color-04) url('../img/pic-bnr_atty.webp') right bottom 30% no-repeat; background-size: cover;}
.bnr_serv{ background: var(--color-04) url('../img/pic-bnr_serv.webp') right bottom 30% no-repeat; background-size: cover;}
.bnr_cont{ background: var(--color-04) url('../img/pic-bnr_cont.webp') right top 40% no-repeat; background-size: cover;}
.bnr_eyebrow{ margin-bottom: 22px; color: var(--color-02); font-size: 1.125em; letter-spacing: 3px; line-height: 1em; display: inline-flex; align-items: center; gap: 10px;}
.bnr_eyebrow::before{ width: 28px; height: 1px; content: ""; background: var(--color-02); }
.bnr_wrap h1, .bnr_wrap b{ margin-bottom: 20px; color: var(--color-12); font-size: 3.75em; font-weight: 800; line-height: 1.5em; letter-spacing: 8px; display: block; }
.bnr_wrap p{ margin: 20px 0; color: var(--color-13); font-size: 1.25em; letter-spacing: 5px; }
.bnr_srch{ width: 100%; max-width: 700px; height: 60px; margin-top: 30px; background: var(--color-12); border: 2px solid var(--color-12); border-radius: 10px; display: flex; align-items: stretch; overflow: hidden; }
.bnr_srch input{ width: calc(100% - 120px); min-height: auto; margin: 0; padding: 0 20px; border: 0 !important; border-radius: 0; }
.bnr_srch button{ width: 120px; margin-left: 2px; color: var(--color-12); font-size: 1.25em; font-weight: 800; letter-spacing: 2px; background: var(--color-01); border: 0; text-align: center; transition: 0.3s all; }
.bnr_srch button:hover{ background: var(--color-02); }
.bnr_tags{ margin: 20px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.bnr_tags a{ height: 40px; margin: 5px 10px 5px 0; padding: 10px 15px; color: var(--color-02); font-size: 1em; line-height: 1em; background: rgba(27, 42, 68, .8); border: 2px solid var(--color-02); border-radius: 20px; display: block; }
.bnr_tags a:hover{ color: var(--color-12); border-color: var(--color-12); }

.box_wrap{ background: var(--color-12); border: 1px solid var(--color-13); border-radius: 10px; position: relative; transition: 0.3s all; }
a:hover .box_wrap{ box-shadow: 0 0 20px rgba(0, 0, 0, .25) !important;}
.box_wrap h2{ line-height: 1.25em; }
.box_img_wrap{ border-top-right-radius: 10px; border-top-left-radius: 10px; position: relative; overflow: hidden; }
.box_img{ width: 100%; height: 100%; will-change: transform; transition: 0.3s all;}
.box_img img{ width: 100%; height: auto; }
.box_wrap:hover .box_img{ transform: scale(1.05); }
.box_wrap.noanime:hover .box_img{ transform: none; }
.box_txt_wrap{ padding: 25px; }
.box_txt_wrap .quote{ height: 48px; color: #999; font-size: 1em; }
.box_tag{ padding: 5px 10px 5px 12px; color: var(--color-12); font-size: .875em; letter-spacing: 2px; background: var(--color-02); border-top-left-radius: 5px; border-bottom-left-radius: 5px; position: absolute; bottom: 10px; right: 0; z-index: 1; }
.box_txt_tag{ margin: 0 0 15px 0; color: var(--color-02); font-size: .875em; font-weight: 700; letter-spacing: 2px; }
.box_cap{ height: 60px; color: var(--color-01); font-size: 1.25em; font-weight: 700; }

.box_wrap2{ position: relative; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; position: relative; display: flex; transition: 0.3s all; }
a:hover .box_wrap2{ box-shadow: 0 0 20px rgba(0, 0, 0, .25) !important;}
.box_wrap2 .box_img_wrap{ width: 250px; border-radius: 0; }
.box_wrap2:hover .box_img{ transform: scale(1.05); }
.box_wrap2 .box_txt_wrap{ width: calc(100% - 250px); margin: 0; padding: 20px 30px; background: var(--color-12);}
.box_wrap2 .box_txt_wrap .box_txt_tag{ margin-top: 0; }

.box_info{ margin-top: 20px; display: flex; justify-content: space-between; }
.box_author{ display: flex; align-items: center; }
.box_author span{ width: 46px; border: 1px solid var(--color-13); border-radius: 50%; aspect-ratio: 1 / 1; }
.box_author p{ width: calc(100% - 46px); margin-left: 10px; font-size: 1em; font-weight: 800; }
.box_author p b{ margin-left: 8px; color: #777; font-size: .875em; }
.box_author u{ margin-top: .1em; color: #777; font-size: .75em; line-height: 1.25em; text-decoration: none; display: block; }
.box_view{ color: #999; display: flex; align-items: center; }
.box_view i{ margin-right: 10px; font-size: 1.125em; }
.box_view p{ font-size: .813em !important; }

.accordion{ border: var(--border-01); border-radius: 10px; overflow: hidden; }
.accordion-item{ border: 0 !important; border-bottom: var(--border-01) !important; }
.accordion-item:last-child{ border-bottom: 0 !important; }
.accordion-button{ color: var(--color-01); display: flex; align-items: start; }
.accordion-button.question::before{ content: '\F505'; margin-right: 10px; color: var(--color-02); font-family: 'bootstrap-icons'; }
.accordion-button::after{ margin-top: 2px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9824C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.accordion-button[aria-expanded="true"]{ color: var(--color-12); background: var(--color-02);}
.accordion-button[aria-expanded="true"]::after{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.accordion-button.question[aria-expanded="true"]::before{ color: var(--color-12); }

.ratio_1_1{ aspect-ratio: 1 / 1; }
.ratio_4_3{ aspect-ratio: 4 / 3; }
.ratio_16_9{ aspect-ratio: 16 / 10; }
.ratio_21_9{ aspect-ratio: 21 / 10; }

#i_news .box_index .box_img{ height: 426px; aspect-ratio: 16 / 10; }
#i_news .box_img{ height: 154px; aspect-ratio: 21 / 10; }
#i_news .box_index .box_cap{ height: 97px; font-size: 1.875em; }
#i_news .box_index .box_author span{ width: 70px;}
#i_news .box_index .box_author p{ width: calc(100% - 70px); font-size: 1.25em;}

#i_scenario{ background: var(--color-bg2); }
.scenario_wrap{ padding: 20px 30px; background: var(--color-12); border: 1px solid var(--color-13); border-radius: 10px; text-align: center; transition: 0.3s all; }
.scenario_wrap i{ width: 100px; margin: 0 auto 10px auto; aspect-ratio: 1 / 1; display: block; }
.scenario_wrap i.ico_scenario_01{ background: url('../img/ico-scenario_01.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_02{ background: url('../img/ico-scenario_02.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_03{ background: url('../img/ico-scenario_03.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_04{ background: url('../img/ico-scenario_04.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_05{ background: url('../img/ico-scenario_05.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_06{ background: url('../img/ico-scenario_06.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_07{ background: url('../img/ico-scenario_07.webp') center center no-repeat; background-size: cover; }
.scenario_wrap i.ico_scenario_08{ background: url('../img/ico-scenario_08.webp') center center no-repeat; background-size: cover; }
.scenario_wrap p{ color: var(--color-01); font-size: 1.5em; font-weight: 800; transition: 0.3s all;}
a:hover .scenario_wrap{ box-shadow: 0 0 20px rgba(0, 0, 0, .25) !important; }
a:hover .scenario_wrap p{ color: var(--color-02);}

#i_qa{ background: var(--color-bg2); }
.qa_wrap{ padding: 20px 30px; background: var(--color-12); border: 1px solid var(--color-13); border-radius: 10px; transition: 0.3s all; }
a:hover .qa_wrap{ box-shadow: 0 0 20px rgba(0, 0, 0, .25) !important; }
.qa_wrap .q_wrap{ display: flex; align-items: start; }
.qa_wrap .q_wrap i{ width: 40px; aspect-ratio: 1 / 1; color: var(--color-12); font-weight: 800; font-style: normal; line-height: 38px; background: var(--color-01); border-radius: 50%; text-align: center; }
.qa_wrap .q_wrap p{ width: calc(100% - 40px); padding: 2px 0 0 10px; color: var(--color-01); font-size: 1.325em; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.qa_wrap .a_wrap{ margin-top: 10px; display: flex; align-items: start; }
.qa_wrap .a_wrap i{ width: 40px; aspect-ratio: 1 / 1; color: var(--color-12); font-weight: 800; font-style: normal; line-height: 38px; background: var(--color-02); border-radius: 50%; text-align: center; }
.qa_wrap .a_wrap p{ width: calc(100% - 40px); height: 76px; padding: 0px 0 0 10px; color: var(--color-10); font-size: 1em;}
.qa_wrap .box_author span{ width: 64px; }
.qa_wrap .box_author p{ width: calc(100% - 64px); font-size: 1.25em; }
/* .qa_wrap .box_author u{ margin-top: 3px; color: var(--color-10); font-size: .75em; line-height: 1.25em; text-decoration: none; display: block; } */

#i_join{ background: var(--color-01); }
#i_join .row > div{ display: flex; align-items: center; }
#i_join .row > div i{ width: 100px; aspect-ratio: 1 / 1; background: url('../img/ico-write.webp') center center no-repeat; background-size: cover;}
#i_join .row > div span{ width: calc(100% - 300px); padding: 0 40px; color: var(--color-12);}
#i_join .row > div span b{ font-size: 2em; line-height: 1.5em; }
#i_join .row > div span p{ margin-top: 10px; font-size: 1.125em; line-height: 1.75em; }
#i_join .row > div a{ width: 200px; }

#i_abt .row > div:first-child{ position: relative; align-items: start; }
#i_abt .i_abt_pic{ width: 240px; height: 297px; background: url('../img/pic-model.webp') top right no-repeat; background-size: cover; position: absolute; right: 50px; bottom: -80px; }
#i_abt h2{ margin: 0; padding: 0; border: 0; }
#i_abt h2 span{ margin: 10px 0 0 0; padding: 0; display: block; }
#i_abt .row > div:last-child b{ margin-bottom: 10px; color: var(--color-01); font-size: 1.5em; display: block; }

.abt_ft_wrap{ margin-top: 30px; display: flex; align-items: center; }
.abt_ft_wrap i{ width: 96px; aspect-ratio: 1 / 1; border-radius: 50%; text-align: center; display: block; }
.abt_ft_wrap i.abt_ft_ico_01{ background: var(--color-13) url('../img/ico-abt_01.webp') center center no-repeat; background-size: 60px auto;}
.abt_ft_wrap i.abt_ft_ico_02{ background: var(--color-13) url('../img/ico-abt_02.webp') center center no-repeat; background-size: 60px auto;}
.abt_ft_wrap i.abt_ft_ico_03{ background: var(--color-13) url('../img/ico-abt_03.webp') center center no-repeat; background-size: 60px auto;}
.abt_ft_wrap i.abt_ft_ico_04{ background: var(--color-13) url('../img/ico-abt_04.webp') center center no-repeat; background-size: 60px auto;}
.abt_ft_wrap span{ padding-left: 10px; }
.abt_ft_wrap span b{ margin-bottom: 5px !important; font-size: 1.25em !important; }
.abt_ft_wrap span p{ font-size: .968em;}

#abt{ background: var(--color-14); }
.abt_01{ padding: 0; display: flex; border-radius: 10px; gap: 0px; overflow: hidden; }
.abt_01_1{ flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.abt_subtitle{ color: var(--color-02); font-size: .875em; letter-spacing: 1px; }
.abt_title{ margin: 15px 0 20px 0; color: var(--color-01); font-size: 2em; font-weight: 800; line-height: 1.75em; }
.abt_quote{ margin: 0; margin-right: -10px; padding: 56px 50px; background-color: rgba(255, 255, 255, .8); border-radius: 8px; position: relative; }
.abt_quote p{ color: #666; font-size: 1.125em; line-height: 1.875em;}
.abt_quote::before, .abt_quote::after{ color: #d2b894; font-family: "Arial", sans-serif; font-size: 3.5em; line-height: 1em; position: absolute; }
.abt_quote::before{ content: "“"; top: 20px; left: 20px; }
.abt_quote::after{ content: "”"; bottom: -0px; right: 30px; }
.abt_01_2{ height: 450px; flex: 1; border-radius: 10px; overflow: hidden; position: relative; z-index: 1;}
.abt_01_2 img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.abt_02 .abt_02_item{ margin-bottom: 40px; display: flex; }
.abt_02 .abt_02_item:last-child{ margin-bottom: 0;}
.abt_02 .abt_02_item i{ width: 80px; color: var(--color-02); font-style: normal; font-size: 2.5em; line-height: 1em; letter-spacing: 2px; position: relative; }
.abt_02 .abt_02_item i::after{ content: "\F253"; font-family: 'bootstrap-icons'; font-size: .65em; position: absolute; top: 18px; right: 26px; opacity: .2; rotate: -25deg; }
.abt_02 .abt_02_item span{ flex: 1; }
.abt_02 .abt_02_item span b{ margin-bottom: 10px; color: var(--color-01); font-size: 1.875em; display: block; }
.abt_02 .abt_02_item span p{ font-size: 1.125em; }

#serv{ background: var(--color-14); }
.serv_item{ padding: 20px 20px; background: var(--color-12); border: var(--border-01); border-radius: 10px; display: flex; align-items: start; gap: 20px; transition: .3s all; }
.serv_item:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, .10) !important; }
.serv_item i{ width: 100px; padding: 20px; background: var(--color-14); border-radius: 10px; text-align: center; }
.serv_item span{ flex: 1;}
.serv_item span b{ margin-bottom: 10px; color: var(--color-01); font-size: 1.25em; display: block;}
.serv_item span p{}

.box_atty{ margin-bottom: 10px; color: var(--color-01); font-size: 1.25em; font-weight: 800; }
.box_atty.f2{ font-size: 1.5em; }
.box_atty span{ margin-left: 10px; color: #666; font-size: .813em; font-weight: 600; }

.box_atty_info_wrap{ margin: 20px 0 0 0; padding: 20px 0 0 0; border-top: var(--border-01); }
.box_atty_info{ margin-bottom: 20px; display: flex; align-items: start; gap: 10px; }
.box_atty_info:last-child{margin-bottom: 0;}
.box_atty_info i{ color: var(--color-02); font-size: 1.125em; }
.box_atty_info span{ flex: 1; }
.box_atty_info span span{ color: #666; font-size: .813em; }
.box_atty_info span p{ font-size: 1em; }

#view_lst .box_img{ height: 154px; aspect-ratio: 21 / 10; }
#qa_lst .box_img{ height: 154px; aspect-ratio: 21 / 10; }
#atty_lst a:hover button{ color: var(--color-12) !important; background: var(--color-02); }

#link{ background: var(--color-14); }
#link h2{ padding-left: 40px; position: relative; }
#link h2::before{ color: var(--color-02); font-size: 1.5em; font-family: 'bootstrap-icons'; content: "\F470"; position: absolute; top: 2px; left: 0; }
#link .box_txt{ position: relative; }
#link .box_txt i{ color: var(--color-02); font-size: 1.5em; position: absolute; top: 0px; right: 0px; }
#link h3{ margin-bottom: 10px; padding-right: 40px; line-height: 1.5em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.link_url{ margin-bottom: 10px; color: #666; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#link p{ color: #666; }

.cont_sort_wrap{ margin: -40px 0 -40px 0; }
.cont_sort{ padding: 30px 30px; background: var(--color-12); border: var(--border-01); border-radius: 20px; display: flex; position: relative; cursor: pointer; transition: 0.3s all; }
.cont_sort i{ width: 80px; color: var(--color-02); font-size: 4em; line-height: 1.125em; text-align: center; }
.cont_sort span{ width: calc(100% - 80px); padding: 0 0 0 20px; }
.cont_sort span b{ margin-bottom: 10px; color: var(--color-01); font-size: 1.25em; display: block; }
.cont_sort span p{ font-size: .875em; }
.cont_sort.active{ background: var(--color-01); border-color: var(--color-02); }
.cont_sort.active b, .cont_sort.active p{ color: var(--color-12); }

.cont_info_wrap > div{ margin-top: 20px; padding-bottom: 20px; border-bottom: var(--border-01); display: flex; align-items: start; }
.cont_info_wrap > div:nth-last-child(-n+3){ border: 0; }
.cont_info_wrap > div i{ width: 60px; color: var(--color-02); font-size: 2.5em; line-height: 1em; text-align: center; }
.cont_info_wrap > div span{ width: calc(100% - 60px); padding: 0 10px; }
.cont_info_wrap > div span b{ margin-bottom: 5px; color: var(--color-01); font-size: 1.125em; display: block;}
.cont_info_wrap > div span p{ color: #666; font-size: .875em; }
.cont_info_wrap > div .gmap{ width: 100%; height: 300px; margin: 10px 0; padding: 0; border: var(--border-01); border-radius: 10px; display: block; }

.main_sub_sort_wrap{ margin-bottom: 20px; display: flex; align-items: center; }
.main_sub_sort_wrap span{ margin-right: 10px; padding: 5px 10px; color: var(--color-02); font-size: .875em; background: var(--color-12); border: var(--border-01); border-radius: 30px; }
.main_sub_sort_wrap span:last-child{ margin-right: 0;}

.sub_info_wrap{ width: 100%; margin-top: 20px; padding: 20px; background: #f6f3ed; border: var(--border-01); border-radius: 10px; }
.sub_info_wrap > div{ margin: 0; padding: 0 0 20px 0; border-bottom: var(--border-01); display: flex; align-items: start; }
.sub_info_wrap > div:last-child{ margin-bottom: 0; padding: 20px 0 0 0; border: 0; }
.sub_info_wrap > div i{ width: 30px; font-size: 1.5em; display: block; }
.sub_info_wrap > div p{ width: calc(100% - 30px); padding-left: 10px; color: #666; font-size: .875em;}

.sub2_info_wrap{ margin: 40px 0; display: flex; align-items: center; justify-content: space-between; }
.sub2_info_wrap .sub2_info p{ color: #666; font-size: .875em; display: inline-block; }
.sub2_info_wrap .sub2_info i{ margin-right: 10px; }
.sub2_info_wrap .sub2_info2 a{ margin-right: 8px; padding: 8px 18px; color: var(--color-02); background: var(--color-14); border: 1px solid var(--color-02); border-radius: 10px; }
.sub2_info_wrap .sub2_info2 a:hover{ color: var(--color-12); background: var(--color-02);}
.sub2_info_wrap .sub2_info2 a:last-child{ margin-right: 0; }
.sub2_info_wrap .sub2_info2 a:nth-child(1) i{ margin-right: 10px;}
.sub2_info_wrap .sub2_info2 a:nth-child(2) i{ margin-left: 10px;}
.sub2_info_wrap .sub2_info2 a.disabled, .sub2_info_wrap .sub2_info2 a.disabled:hover{ color: var(--color-02); background: var(--color-14); opacity: .5; cursor: default;}

.sub_nav_warp{ margin-top: 20px; padding: 25px 25px; border: var(--border-01); border-radius: 10px; }
.sub_nav_warp h3{ padding-bottom: 20px; border-bottom: var(--border-01); }
.sub_nav_warp span{ font-size: .938em; }
.sub_nav_warp span::after{ padding: 0 5px 0 10px; content: "/"; }
.sub_nav_warp span:last-child::after{ margin-right: 0; content: "";}
.sub_nav_warp a{ color: #666; transition: .3s all; }
.sub_nav_warp a:hover, .sub_nav_warp a.active{ color: var(--color-02);}

.cont_step_wrap{ margin-top: 40px; display: flex; align-items: center; }
.cont_step{ display: flex; align-items: center; }
.cont_step i{ width: 36px; aspect-ratio: 1 / 1; color: var(--color-12); font-style: normal; line-height: 36px; background: var(--color-02); border-radius: 50%; text-align: center; }
.cont_step p{ width: calc(100% - 36px); padding-left: 10px; line-height: 1em; }
.cont_step_line{ width: 50px; height: 0px; margin: 0 30px; border-bottom: 1px solid #ccc; }

.cont_form_sort_wrap{ width: 100%; margin: 40px 0 20px 0; }
.cont_form_sort{ padding: 20px; background: var(--color-14); border: var(--border-01); border-radius: 10px; text-align: center; cursor: pointer; transition: 0.3s all; }
.cont_form_sort i{ color: var(--color-02); font-size: 2em; line-height: 1em; display: block; }
.cont_form_sort p{ margin-top: 12px; margin-left: 2px; color: var(--color-01); font-size: 1.125em; line-height: 1em; letter-spacing: 2px; }
.cont_form_sort.active{ background: var(--color-01); }
.cont_form_sort.active p{ color: var(--color-12); }

#srch{}

#err b{ color: var(--color-note); font-size: 8em; display: block; }

#btm_sec{ padding-top: 0; }
.btm_sec_wrap{ padding: 40px 40px; border-radius: 10px;}
.btm_sec_wrap.btm_view{ background: var(--color-01) url('../img/pic-btm_sec_view.webp') left 2% center no-repeat; background-size: 300px auto; }
.btm_sec_wrap.btm_qa{ background: var(--color-01) url('../img/pic-btm_sec_qa.webp') left 0% center no-repeat; background-size: 350px auto; }
.btm_sec_wrap.btm_abt{ background: var(--color-01) url('../img/pic-btm_sec_abt.webp') left 0% center no-repeat; background-size: 350px auto; }
.btm_sec_wrap.btm_atty{ background: var(--color-01) url('../img/pic-btm_sec_atty.webp') left -5% center no-repeat; background-size: 380px auto; }
.btm_sec_wrap.btm_serv{ background: var(--color-01) url('../img/pic-btm_sec_serv.webp') left 0% center no-repeat; background-size: 330px auto; }
.btm_sec_wrap.btm_cont{ background: var(--color-01) url('../img/pic-btm_sec_cont.webp') left 5% center no-repeat; background-size: 280px auto; }
.btm_sec_wrap .row > div{ display: flex; align-items: center; }
.btm_sec_wrap .row > div:last-child{ justify-content: right; }
.btm_sec_wrap .row > div:last-child a{ margin-left: 20px; white-space: nowrap; }
.btm_sec_wrap .row > div:last-child i{ margin-left: 10px; }
.btm_sec_wrap b{ margin-bottom: 10px; color: var(--color-12); font-size: 2em; display: block; }
.btm_sec_wrap p{ color: var(--color-12); font-size: 1.25em; }

.textarea_limit{ margin-top: -10px; color: #666; font-size: .75em; text-align: right; }
.textarea_limit.limit-reached{ color: var(--color-note); }

.ul_wrap{ margin: 10px 0 0 0; padding: 20px 40px; background-color: #fafafa; border: 1.5px dashed #ccc; border-radius: 6px; position: relative; display: flex; align-items: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s;}
.ul_wrap:hover, .ul_wrap.dragover{ background-color: #f0f0f0; border-color: #666;}
.ul_wrap i{ width: 40px; height: 40px; margin-right: 40px; color: #666; font-size: 2.5em; line-height: 1em; text-align: center;}
.ul_wrap p{ width: calc(100% - 40px); color: var(--color-10); }
.ul_wrap p span{ color: #666; font-size: .875em; display: block; }
#f_atch{ width: 0; height: 0; opacity: 0; cursor: pointer; display: none; }
.ul_file_name{ margin-top: 8px; font-size: .75em; color: #666; }
.ul_file_name::before{ content: '['; }
.ul_file_name::after{ content: ']'; }

.form_privacy_wrap{ display: flex; align-items: center; }
.form_privacy_wrap .ctr_chk{ margin: 0; padding: 0; }
.form_privacy_wrap .ctr_chk .chk_mark{ top: -4px; left: 0px;}
.form_privacy_wrap p{ padding-top: 20px; padding-left: 35px; font-size: .875em; line-height: 1.25em;}
.form_privacy_wrap a{ color: var(--color-02);}
.form_privacy_wrap.disabled .chk_mark, .form_privacy_wrap.disabled .ctr_chk:hover .chk_mark{ background: #ccc; border-color: #ccc; }
.form_privacy_wrap.disabled p, .form_privacy_wrap.disabled a{ color: #ccc; cursor: default; }

.note_wrap{ display: flex; align-items: start; }
.note_wrap i{ color: var(--color-02); font-size: 1em; line-height: 1.125em; }
.note_wrap p{ padding-left: 10px; color: var(--color-10); font-size: .875em; line-height: 1.325em; }

.cnt_wrap.cnt_border_l{ height: 100%; padding: 0; border-left: var(--border-01); }
.cnt_wrap .row.g-4-5 { margin-top: 0;}
.cnt_wrap h1{ color: var(--color-01); font-size: 1.75em; line-height: 1.25em; }
.cnt_wrap h1 span{ margin-left: 10px; color: #666; font-size: .65em; }
.cnt_wrap p{ font-size: 1.125em; text-align: justify;}
.cnt_wrap ul{ margin-left: 24px; }
.cnt2_wrap{ padding: 50px 50px; background: var(--color-12); border: var(--border-01); border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, .10) !important; }

.side_nav_wrap{}
.side_nav_wrap .accordion{ border: 0; border-top: var(--border-01); border-radius: 0; }
.side_nav_wrap .accordion-item{ border-bottom: var(--border-01) !important; }
.side_nav_wrap .accordion-item:last-child{ border-bottom: var(--border-01) !important; }
.side_nav_wrap .accordion-button{ color: var(--color-01); display: flex; align-items: start; }
.side_nav_wrap .accordion-button::after{ margin-top: 2px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.side_nav_wrap .accordion-button[aria-expanded="true"]{ color: var(--color-02); background: var(--color-12);}
.side_nav_wrap .accordion-button[aria-expanded="true"]::after{ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9824C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.side_nav_wrap .accordion_sub{ border: var(--border-01); border-radius: 10px; }
.side_nav_wrap .accordion_sub a{ padding: 15px 20px; border-bottom: var(--border-01); display: block; }
.side_nav_wrap .accordion_sub a:last-child{ border-bottom: 0; }
.side_nav_wrap .accordion_sub a:hover{ color: var(--color-02); background: var(--color-14); }
.side_nav_wrap .accordion_sub a.active{ color: var(--color-02); }

.brief_wrap{ margin: 0 0 40px 0; padding: 30px 30px; background: var(--color-14); border: var(--border-01); border-radius: 10px; }
.brief_wrap h2{ color: var(--color-02); font-size: 1.5em; }
.brief_wrap h2 i{ margin-right: 10px; }

.share_wrap{ margin: 40px 0 0 0; padding: 10px 0; border: var(--border-01); border-right: 0; border-left: 0; display: flex; align-items: center; justify-content: space-evenly; }
.share_wrap .share{ display: flex;}
.share_wrap .share span{ margin-right: 20px; font-size: .875em; display: flex; align-items: center; }
.share_wrap .share:last-child span{ margin-right: 0; }
.share_wrap .share span i{ margin-right: 8px; font-size: 1.125em; }
.share_wrap .share span p{ font-size: 1em; }
#feedback_y, #feedback_n{ transition: .3s all; }
#feedback_y:hover, #feedback_n:hover{ color: var(--color-02); cursor: pointer; }
.share_wrap .btn_share{ margin: 0; padding: 5px 15px; color: var(--color-02); font-size: .875em; border: var(--border-01); border-radius: 5px; white-space: nowrap; cursor: pointer; transition: .3s all; }
.share_wrap .btn_share:hover{ color: var(--color-12); background: var(--color-02); }

.remind_wrap{ margin: 40px 0 0 0; padding: 20px 20px; background: #f9f9f9; border: var(--border-01); border-radius: 10px; }
.remind b{ margin-bottom: 10px; color: var(--color-01); font-size: .938em; display: block; text-align: center; }
.remind i{ margin-right: 8px; color: var(--color-02); }
.remind p{ font-size: .875em; }

.h_i i{ margin-right: 10px; color: var(--color-02); }

.num_circle{ width: 46px; color: var(--color-12); font-size: 1.25em; font-weight: 700; line-height: 40px; background: var(--color-02); border: 2px solid var(--color-12); border-radius: 50%; aspect-ratio: 1 / 1; position: absolute; top: -13px; left: -13px; z-index: 1; text-align: center; }

@keyframes rotation {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* .city-selector-set{ display: flex; } */

.quote_1{ -webkit-line-clamp: 1;}
.quote_2{ -webkit-line-clamp: 2;}
.quote_3{ -webkit-line-clamp: 3;}
.quote_4{ -webkit-line-clamp: 4;}
[class*="quote_"] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}

.color-01{ color: var(--color-01); }
.color-02{ color: var(--color-02); }
.color_note{ color: var(--color-note); }
.mustfilled{ color: var(--color-note); font-weight: 700; }

.float_wrap{ position: fixed; bottom: 50px; right: 30px; z-index: 9999; }
.float_wrap a{ width: 100px; padding-bottom: 4px; color: var(--color-12); border-radius: 50%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.float_wrap a p{ font-weight: 700; line-height: 1em; text-align: center; }
.float_wrap a p span{ margin: 8px 0; display: block; }
.float_wrap a:nth-child(1){ background: var(--color-02);}
.float_wrap a:nth-child(1):hover{ background: rgba(169, 130, 76, .5);}
.float_wrap a:nth-child(1) p span:nth-child(1){ font-size: .875em; }
.float_wrap a:nth-child(1) p span:nth-child(2){ font-size: 1.125em; }
.float_wrap a:nth-child(2){ margin-top: 10px; background: #00c300;}
.float_wrap a:nth-child(2):hover{ background: rgba(0, 195, 0, .5);}
.float_wrap a:nth-child(2) p span:nth-child(1){ font-size: 1.125em; }
.float_wrap a:nth-child(2) p span:nth-child(2){ font-size: 1em; }

.rounded{ border-radius: 10px !important; }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination_wrap{ width: 100%; overflow: hidden; }
.pagination{ float: left; margin: 30px 0 0 0; }
.pagination a{ color: #666; }
.pagination a:hover{ color: #666; background: #f6f6f6; }
.pagination .active .page-link{ background: var(--color-01); border-color: #dee2e6; }

.pagination_jump{ float: right; margin: 30px 0 0 0; padding: 0; list-style: none; }
.pagination_jump select.form-select{ width: auto; min-height: 38px; margin: 0 5px; padding: 0 35px 0 10px; background-color: var(--color-12); border: 1px solid #dee2e6; border-radius: 3px; display: inline-block; cursor: pointer; }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: 0; color: var(--color-12); position: relative; }
footer .footer{ padding: var(--padding-01); background: var(--color-01);}
footer .logo{ width: 100%; height: 40px; margin: 0 0 20px 0; padding: 0; background: url('../img/pic-logo.webp') left center no-repeat; background-size: 236px 40px; text-indent: -9999px;}
footer .logo_txt{ font-size: .875em; color: #999; }
footer .logo_txt span{ margin: 0px 0; display: block; }
footer b{ margin-bottom: 20px; color: var(--color-02); font-size: 1.125em; display: block; }
footer a{ margin: 20px 0; color: var(--color-13); display: block;}
footer a:hover{ color: var(--color-12);}
footer .f_social{ display: flex; }
footer .f_social a{ width: 40px; height: 40px; margin-right: 15px; background: #727e90; border-radius: 50%; text-align: center; transition: 0.3s all; }
footer .f_social a:hover{ background: var(--color-02); }
footer .f_social i{ font-size: 1em; line-height: 38px; }

.copyright{ padding: 18px 0; color: #ccc; font-size: .75em !important; background: #111d33; text-align: center !important; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
#captcha_code{ float: left; width: 120px; text-align: center; }
.captcha_wrap{ float: left; height: 47px; margin: 10px 0 0 10px; border: var(--border-01); border-radius: 10px; overflow: hidden; text-align: center; }
#captchaimg{ cursor: pointer; }
.captcha_refresh{ margin: 6px 0 0 0; color: #666; font-size: 2em; display: inline-block; cursor: pointer; }
/*** /CAPTCHA ***/

/*** BTN ***/
.btn{ padding: 10px 18px 12px 18px; font-weight: 800; border-radius: 10px; position: relative; }
.btn.arrow_right::after{ font-family: 'bootstrap-icons'; content: '\F138'; position: absolute; right: 20px; }

.btn-primary{ background: var(--color-01) !important; border-color: var(--color-01) !important; }
.btn-primary:hover, .btn-primary:focus{ background: var(--color-02) !important; border-color: var(--color-02) !important;}
.btn-secondary{ background: var(--color-02) !important; border-color: var(--color-02) !important; }
.btn-secondary:hover, .btn-secondary:focus{ color: var(--color-02) !important; background: var(--color-12) !important; border-color: var(--color-02) !important;}
.btn-outline-secondary{ color: var(--color-02) !important; border-color: var(--color-02) !important; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus{ color: var(--color-12) !important; background: var(--color-02) !important; border-color: var(--color-02) !important;}


/*** /BTN ***/

/*** MODAL ***/
.modal{ z-index: 999999; }
.modal-header{ color: #fff; background: var(--color-01); }
.modal-open { padding-right: 0 !important;}
.modal-backdrop { opacity: .9 !important; }
.modal-content{ position: relative; }
.btn-close-wrap{ background-color: #2faeff; border-radius: 0; border-top-right-radius: 5px; border-bottom-left-radius: 5px; position: absolute; top: 0; right: 0; z-index: 10; }
.btn-close{ padding: 15px 15px; position: absolute; top: 23px; right: 20px; z-index: 10;}
.modal-body{ padding: 30px 30px 30px 30px; color: #333; overflow: hidden; }
.modal-body h4{ font-weight: 700; line-height: 1.25em; text-align: center; }
.modal-body h4 span{ font-size: .6em; display: block; text-transform: uppercase; }
.modal-body button{ margin-top: 5px; margin-bottom: 5px; }
.modal-body a:hover{ color: var(--color-12); }
.modal-share{ text-align: center; }
.modal-share a{ margin: 0 10px; font-size: 3em; }
.modal-share a:hover{ color: var(--color-02);}

#popModal .modal-body{ padding: 0;}
#popModal .btn-close-custom{ width: 26px; height: 26px; line-height: 24px; border-radius: 50%; position: absolute; top: 10px; right: 10px; color: #fff; background: #000; }
/*** /MODAL ***/

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/