@charset "UTF-8";





/* ================================================== reset ================================================== */
* { box-sizing: border-box; color: #333; }
body, html { width: 100%; margin: 0; padding : 0; font-size: 62.5%; scroll-behavior: smooth; }
body { -webkit-text-size-adjust : 100%; -moz-text-size-adjust : 100%; -ms-text-size-adjust : 100%; -o-text-size-adjust : 100%; font-size: 1.2rem; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, address, ul, ol, li, dl, dt, dd, img, br, hr, div { margin : 0; padding : 0; border : 0; outline : 0; }
h1, h2, h3, h4, h5, h6 { font-size : 1rem; font-weight: 400; }
ul, li, ol { list-style : none; }
a { display: inline-block; color : inherit; text-decoration: none; outline: none; }
span { display: inline-block; }
header, nav, section, article, footer, aside, main, figure, figcaption { display : block; }
abbr {  text-decoration: none; }
address {  font-style: normal; }
fieldset {  padding : 0;  margin : 0;  border : 0; }
button, input, select { border : 0; outline: none; background : none; cursor: pointer; font: inherit; line-height: inherit; }
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; }
*::placeholder { color: #AAA; font-weight: 300; }
/* 숫자 input에 아이콘 숨김 */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 모바일 스크롤 숨김 */
* {  scrollbar-width: none; -ms-overflow-style: none; }
.scroll_table::-webkit-scrollbar,
.con_content::-webkit-scrollbar { display: none; }
/* 안드로이드 이미지 클릭시 파란색 방지 */
input:focus { outline: none; }
* { -webkit-tap-highlight-color: transparent; }
/* ios 기본스타일 제거 */
input, textarea, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius : 0; -moz-border-radius : 0; }
textarea:focus { outline: 0; }
table { font-size: inherit; }
/* selection */
::selection { background-color: #4C7BE0; color: #fff; }



/* ================================================== font ================================================== */
@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('/resources/font/PretendardVariable.woff2') format('woff2-variations'); }
@font-face { font-family: 'Bruno Ace'; font-weight: normal; src: url('/font/BrunoAce-Regular.ttf') format('truetype'); }
* { font-family: 'Pretendard Variable', sans-serif; color: #333; font-weight: 400; }





/* ================================================== color ================================================== */
:root {
    --logo : linear-gradient(to right, #4C7BE0, #304E90);
    --logo-to-top : linear-gradient(to top, #304E90, #4C7BE0);

    --txt-deep : #333;
    --txt-semiDeep : #555;
    --txt-mid : #767676;

    --bg-light : #F5F7FA;

    --light-gray: #EDEDEF;

    --border-lightGray : .1rem solid var(--light-gray);
    --border-logoBlue : .1rem solid var(--logo);

    --box-sd : 0 0 2rem rgba(0,0,0,.1);

    --trans : all ease .25s;
}





/* ================================================== layout ================================================== */
.wrap { position: relative; max-width: 100vw; min-width: 100vw; background-color: #fff; }
.wrap.non_scroll { height: 100vh; overflow: hidden; }
.content { position: relative; min-height: calc(100vh - 8rem); }
.con_wrap { display: flex; gap: 4rem; width: 100%; max-width: 192rem; margin: 8rem auto 0; padding: 4rem 4rem 8rem; }





/* ================================================== loader ================================================== */
.loader { position: relative; height: 100vh; overflow: hidden; }
.loader::before { position: fixed; z-index: 99999; top: 0; left: 0; content: ""; display: block; width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 0.75); }
.loader::after { position: absolute; z-index: 999999; top: 50%; left: 50%; content: ""; display: block; width: 8rem; height: 8rem; transform: translate(-50%, -50%); background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDApOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8cmVjdCB4PSIxOC41IiB5PSIzMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjQwIiBmaWxsPSIjOGRhZWY1Ij4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ5IiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjc2OTIzMDc2OTIzMDc2OTJzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDswLjU7MSIgdmFsdWVzPSIxODszMDszMCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4xNTM4NDYxNTM4NDYxNTM4NXMiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjAuNzY5MjMwNzY5MjMwNzY5MnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuNTsxIiB2YWx1ZXM9IjY0OzQwOzQwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0wLjE1Mzg0NjE1Mzg0NjE1Mzg1cyI+PC9hbmltYXRlPgo8L3JlY3Q+CjxyZWN0IHg9IjQzLjUiIHk9IjMwIiB3aWR0aD0iMTMiIGhlaWdodD0iNDAiIGZpbGw9IiM0YzdiZTAiPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjAuNzY5MjMwNzY5MjMwNzY5MnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuNTsxIiB2YWx1ZXM9IjIwLjk5OTk5OTk5OTk5OTk5NjszMDszMCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4wNzY5MjMwNzY5MjMwNzY5M3MiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjAuNzY5MjMwNzY5MjMwNzY5MnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuNTsxIiB2YWx1ZXM9IjU4LjAwMDAwMDAwMDAwMDAxOzQwOzQwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMSIgYmVnaW49Ii0wLjA3NjkyMzA3NjkyMzA3NjkzcyI+PC9hbmltYXRlPgo8L3JlY3Q+CjxyZWN0IHg9IjY4LjUiIHk9IjMwIiB3aWR0aD0iMTMiIGhlaWdodD0iNDAiIGZpbGw9IiMzMDRlOTAiPgogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjAuNzY5MjMwNzY5MjMwNzY5MnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuNTsxIiB2YWx1ZXM9IjIwLjk5OTk5OTk5OTk5OTk5NjszMDszMCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDEiPjwvYW5pbWF0ZT4KICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjAuNzY5MjMwNzY5MjMwNzY5MnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuNTsxIiB2YWx1ZXM9IjU4LjAwMDAwMDAwMDAwMDAxOzQwOzQwIiBrZXlTcGxpbmVzPSIwIDAuNSAwLjUgMTswIDAuNSAwLjUgMSI+PC9hbmltYXRlPgo8L3JlY3Q+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==');}





/* ================================================== header ================================================== */
.header { z-index: 9999; position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; height: 8rem; padding: 0 4rem; background-color: #FFF; box-shadow: var(--box-sd); transition: var(--trans); overflow: hidden; }
.header::after { content: ""; position: absolute; top: 8rem; left: 0; width: 100%; height: .1rem; background-color: var(--light-gray); opacity: 0; transition: var(--trans); pointer-events: none; }
.header:hover { height: 20.2rem; }
.header:hover::after { opacity: 1; }
.header > * { height: 8rem; }
/* h_logo */
.header .h_logo { width: 22.6rem; }
.header .h_logo > a { display: block; width: 100%; height: 100%; background: url("/resources/images/logo.svg") no-repeat center; }
/***** h_nav *****/
.h_nav { display: flex; }
/* depth01 */
.h_nav .depth01 { position: relative; display: flex; margin-right: 1rem; line-height: 8rem; }
.h_nav .depth01::after { content: ""; position: absolute; top: 50%; right: -1.1rem; transform: translateY(-50%); width: .1rem; height: 1.6rem; background-color: #555;  }
.h_nav .depth01 > li { display: flex; flex-direction: column;}
.h_nav .depth01 > li > a { height: 100%; margin: 0 3rem; color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 500; }
.h_nav .depth01 > li.act > a { border-bottom: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* depth02 */
.h_nav .depth02 { flex-grow: 1; padding-top: 1rem; transform: translateX(3rem); }
.h_nav .depth02 * { color: var(--txt-mid); font-size: 1.4rem; font-weight: 300; line-height: 100%; }
.h_nav .depth02 > li { padding: 1rem 0; }
.h_nav .depth02 > li:hover { background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* h_lang */
.h_nav .lang { display: flex; gap: 2rem; line-height: 8rem; margin-left: 4rem; }
.h_nav .lang li a { color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 500; }
.h_nav .lang li.act a { background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/***** btn_menu *****/
.btn_menu { display: none; width: 3rem; height: 100%; background: url("/resources/images/menu.svg") no-repeat center; background-size: 2.4rem; }




/* ================================================== sub_nav ================================================== */
.sub_nav { z-index: 99; width: 16rem; }
.sub_nav .depth01 > li > a { position: relative; padding-bottom: 3.2rem; font-size: 1.8rem; font-weight: 700; background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sub_nav .depth01 > li > a::after { content: ""; position: absolute; bottom: 1.2rem; left: 0; width: 2rem; height: .2rem; background-image: var(--logo); }
.sub_nav .depth02 > li > a { padding: 1rem 0; color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; }
.sub_nav .depth02 > li > a.act { background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }





/* ================================================== footer ================================================== */
.footer { position: sticky; top: 100%; left: 0; width: 100%; margin-top: auto; padding: 4rem; background-color: var(--bg-light); }
.footer * { line-height: 100%; }
.footer > span { margin-top: 2rem; color: var(--txt-mid); font-size: 1.2rem; font-weight: 500; }
.footer > span > a { cursor: unset;}
/* f_logo */
.footer .f_logo { width: 22.6rem; height: 3rem; background: url("/resources/images/logo.svg") no-repeat center; filter: grayscale(1); }
/* f_info */
.footer .f_info { margin-top: 4rem; }
.footer .f_info > li { display: flex; gap: 1rem; }
.footer .f_info > li ~ li { margin-top: 1rem; }
.footer .f_info > li > * { color: var(--txt-mid); font-size: 1.4rem; font-weight: 500; }
.footer .f_info > li > span { font-weight: 300; }





/* ================================================== con ================================================== */
.con { flex-grow: 1; width: calc(100% - 16rem); }
/* con_top */
.con_top { margin-bottom: 8rem; }
.con_top.notice_top { margin-bottom: 4rem; }
.con_top .top_tlt { margin-bottom: 2rem; font-size: 3.2rem; font-weight: 700; }
.con_top .top_txt { color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; line-height: 150%; }
/* con_body */
.con_body { width: 100%; }
/* to_top */
.to_top { display: none; width: 4.8rem; height: 4.8rem; margin: 8rem auto 0; padding: 1.2rem; text-align: center; border-radius: 5rem; background-image: var(--logo); box-shadow: 0 0 1rem rgba(0,0,0,.1); }





/* ================================================== main ================================================== */
.main .con_wrap { max-width: unset; height: 100vh; margin-top: 0; background: url("/resources/images/main/main.png") no-repeat center; background-size: cover; }
.main .header { background-color: transparent; }
.main .header * { color: #FFF !important; }
.main .header .h_logo a { background-image: url("/resources/images/logo_white.svg"); }
.main .con { position: relative; max-width: 192rem; margin: auto; }
.main .con .main_info { position: absolute; top: 50%; right: 0; transform: translateY(-35%); width: 52rem; }
.main .con .main_info * { color: #FFF; }
.main .con .main_info > *:not(:last-child) { margin-bottom: 2rem; }
.main .con .main_info h2 { font-size: 5.4rem; font-weight: 600; }
.main .con .main_info p { font-size: 1.6rem; font-weight: 200; line-height: 150%; }
.main .con .main_info a { position: relative; display: flex; justify-content: flex-end; padding-right: 4.6rem; font-size: 1.6rem; line-height: 3.6rem; transition: all 300ms ease; }
.main .con .main_info a::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg); width: 3.6rem; height: 3.6rem; background: url("/resources/images/angle.svg") no-repeat center; }
.main .con .main_info a:hover { color: transparent; background: var(--logo); -webkit-background-clip: text; transform: translateX(2rem);}
.main .con .main_info a:hover::after { background-image: url("/resources/images/angle_logo.svg");}
/* hover */
.main .header:hover { background-color: #fff; }
.main .header:hover * { color: #555 !important; }
.main .header:hover .h_logo a { background-image: url("/resources/images/logo.svg"); }





/* ================================================== company ================================================== */
/***** overview *****/
.overview { position: relative; display: flex; flex-wrap: wrap; width: 100%; border-top: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; }
.overview dl { display: flex; width: 50%; }
.overview dl.full { width: 100%; }
.overview dl > * { padding: 2rem 0; font-size: 1.6rem; line-height: 150%; border-bottom: var(--border-lightGray); }
.overview dt { width: 14rem; color: var(--txt-semiDeep); font-weight: 500; }
.overview dd { width: calc(100% - 14rem); padding-left: 1.5rem; padding-right: 1.5rem; color: var(--txt-mid); font-weight: 300; }
/***** vision *****/
.vision > * { display: flex; gap: 1rem; }
.vision > * > * { flex: 1; text-align: center; }
/* vision_obj */
.vision_obj { position: relative; }
.vision_obj::after { content: ""; position: absolute; top: 1rem; left: 50%; transform: translate(-50%); width: 76.5%; height: .1rem; background-image: var(--logo); }
.vision_obj p { position: relative; height: 2rem; margin-bottom: 4rem; }
.vision_obj p::after { z-index: 2; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 2rem; background-image: var(--logo); }
.vision_obj p::before { z-index: 1; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2rem; height: 2rem; border-radius: 2rem; background: #FFF; }
.vision_obj p:nth-of-type(1)::after { opacity: .25; }
.vision_obj p:nth-of-type(2)::after { opacity: .5; }
.vision_obj p:nth-of-type(3)::after { opacity: .75; }
/* vision_txt */
.vision_txt dt { width: fit-content; margin: auto; font-size: 1.8rem; font-weight: 500; background: var(--logo); color: transparent; -webkit-background-clip: text; }
.vision_txt dd { margin-top: 2rem; color: var(--txt-semiDeep); font-size: 1.4rem; font-weight: 300; line-height: 150%; }





/* ================================================== service ================================================== */
/***** consulting *****/
.consulting { border-top: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; }
.consulting dl { position: relative; padding: 2rem 1rem; padding-left: 26rem; border-bottom: var(--border-lightGray); }
.consulting dl::before { content: ""; position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); width: 23rem; height: 100%; background: no-repeat center; background-size: 10rem; }
.consulting dl:nth-child(1):before { background-image: url("/resources/images/service/consulting01.svg"); }
.consulting dl:nth-child(2):before { background-image: url("/resources/images/service/consulting02.svg"); }
.consulting dl:nth-child(3):before { background-image: url("/resources/images/service/consulting03.svg"); }
.consulting dl * { line-height: 150%; }
.consulting dt { margin-bottom: 1rem; font-size: 1.8rem; font-weight: 500; }
.consulting dt > em { font: inherit; background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.consulting dd li { padding-left: 2.4rem; color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; text-indent: -2.4rem; }
.consulting dd li::before { content: "\00B7"; padding: 0 1rem; }
/***** mtnc *****/
.mtnc { display: flex; flex-wrap: wrap; border-top: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; }
.mtnc dl { position: relative; width: 50%; padding: 2rem 2rem 2rem 12rem; border-bottom: var(--border-lightGray); }
.mtnc dl:nth-of-type(odd) { border-right: var(--border-lightGray); }
.mtnc dl::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 12rem; height: 100%; background: no-repeat center; background-size: 6rem; }
.mtnc dl:nth-child(1):before { background-image: url("/resources/images/service/mtnc01.svg"); }
.mtnc dl:nth-child(2):before { background-image: url("/resources/images/service/mtnc02.svg"); }
.mtnc dl:nth-child(3):before { background-image: url("/resources/images/service/mtnc03.svg"); }
.mtnc dl:nth-child(4):before { background-image: url("/resources/images/service/mtnc04.svg"); }
.mtnc dl:nth-child(5):before { background-image: url("/resources/images/service/mtnc05.svg"); }
.mtnc dl:nth-child(6):before { background-image: url("/resources/images/service/mtnc06.svg"); }
.mtnc dt { margin-bottom: 1rem; font-size: 1.6rem; font-weight: 500; }
.mtnc dd li { padding-left: 2.4rem; color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; line-height: 150%; text-indent: -2.4rem; }
.mtnc dd li::before { content: "\00B7"; padding: 0 1rem; }
/***** bsb *****/
.bsb { border-top: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; }
.bsb > ul { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100rem; margin: auto; border-bottom: var(--border-lightGray); }
.bsb > ul > li { display: flex; flex-direction: column; align-items: center; width: 20%; padding: 2rem; text-align: center; }
.bsb > ul > li > p { width: 8rem; height: 8rem; margin-bottom: 2rem; }
.bsb > ul:not(:nth-child(1)) > li > p { width: 7rem; height: 7rem; }
.bsb > ul > li > p > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.bsb > ul > li > span { font-size: 1.4rem; font-weight: 500; line-height: 100%; }
.bsb > ul:nth-of-type(1) { margin-bottom: 2.8rem; }
.bsb > ul:nth-of-type(1) > li > span { font-size: 1.6rem; font-weight: 700; background: var(--logo); color: transparent; -webkit-background-clip: text; }
.bsb > ul:nth-of-type(4) li { width: calc(100% / 3); }
/* has_tlt */
.bsb > ul.has_tlt { position: relative; max-width: 80rem; padding: 4.8rem 0 4rem; border: var(--border-lightGray); }
.bsb > ul.has_tlt .tlt { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); width: auto; padding: 0 .5rem; font-size: 1.6rem; font-weight: 700; line-height: 100%; background-color: #FFF; }
.bsb > ul.has_tlt li { width: 25%; }





/* ================================================== notice ================================================== */
.table_wrap { width: 100%; border-top: .1rem solid transparent; border-bottom: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; -webkit-background-clip: text; }
.table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table * { color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; text-align: left; }
.table tr:hover { background-color: var(--bg-light); cursor: pointer; }
.table thead tr:hover { background-color: #fff; cursor: unset;}
.table th { padding: 1.2rem 1rem; font-weight: 500; }
.table td { padding: 1.2rem 1rem; border-top: var(--border-lightGray); }
.table td > p { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table + .empty_list { position: relative; width: 100%; height: 40rem; border-top: var(--border-lightGray); box-sizing: border-box; }
.table + .empty_list > p { position: absolute; top: 50%; left: 50%; font-size: 1.6rem; font-weight: 300; color: var(--txt-semiDeep); transform: translate(-50%, -50%); }
/***** paging *****/
.paging { display: flex; justify-content: space-between; margin-top: 2rem; }
/* pg_total */
.pg_total { display: flex; margin-left: 1rem; }
.pg_total * { color: var(--txt-semiDeep); font-size: 1.4rem; line-height: 3.6rem; }
.pg_total span { margin-left: .5rem; background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* pgntn */
.pgntn,
.pgntn > div { display: flex; gap: .5rem; }
.pgntn .btn { width: 3.6rem; height: 3.6rem; color: #AAA; font-size: 1.4rem; transition: var(--trans); }
.pgntn .btn:hover,
.pgntn .btn:focus-visible { color: var(--txt-semiDeep); }
.pgntn .btn.act { background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pgntn .btn.btn_prev { background: url("/resources/images/angle.svg") no-repeat center; }
.pgntn .btn.btn_next { transform: rotate(180deg); background: url("/resources/images/angle.svg") no-repeat center; }
.table_wrap ~ .paging .pgntn .btn.btn_prev:hover,
.table_wrap ~ .paging .pgntn .btn.btn_next:hover { background: url("/resources/images/angle_555.svg") no-repeat center;}
/***** detail_con *****/
.detail_con { border-top: .1rem solid transparent; border-bottom: .1rem solid transparent; border-image: var(--logo); border-image-slice: 1; }
.detail_con > * { padding: 2rem 1rem; }
/* con_tlt */
.detail_con .con_tlt p { clear: both; color: var(--txt-semiDeep); font-size: 2rem; font-weight: 500; line-height: 150%; }
.detail_con .con_tlt span { float: right; color: #AAA; font-size: 1.6rem; font-weight: 300; }
/* con_info */
.detail_con .con_info { border-top: var(--border-lightGray); border-bottom: var(--border-lightGray); }
.detail_con .con_info p { color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; line-height: 150%; }
.detail_con .con_info p ~ p { margin-top: 2rem; }
/* con_file */
.detail_con .con_file { display: flex; justify-content: space-between; width: 100%; }
.detail_con .con_file * { color: var(--txt-semiDeep); font-size: 1.6rem; font-weight: 300; line-height: 150%; }
.detail_con .con_file span { color: #AAA; font-size: 1.4rem; }
.detail_con .con_file:hover { background-color: var(--bg-light); }
/* paging_simple */
.paging_simple .pgntn { gap: 0; }
.paging_simple .pgntn .btn { display: flex; align-items: center; gap: 1rem; width: 10rem; height: 3.6rem; padding: 1rem; background: none; transform: none; }
.paging_simple .pgntn .btn:disabled { cursor: auto;}
.paging_simple .pgntn .btn:disabled p { color: #AAA; }
.paging_simple .btn_txt { padding: 1rem; color: var(--txt-semiDeep); font-size: 1.4rem; }
.paging_simple .btn_txt:hover,
.paging_simple .btn_txt:focus-visible,
.paging_simple .pgntn .btn:not(:disabled):hover p,
.paging_simple .pgntn .btn:not(:disabled):focus-visible p { background: var(--logo); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.paging_simple .pgntn .btn_prev { position: relative; margin-right: 3.6rem; background-position: center left; }
.paging_simple .pgntn .btn_prev::after { content: "|"; position: absolute; top: 50%; right: -1.8rem; transform: translateY(-50%); }
.paging_simple .pgntn .btn_next { transform: none; justify-content: right;}
.paging_simple .pgntn .btn > span { width: 2.4rem; height: 2.4rem; background: url("/resources/images/angle_555.svg") no-repeat center; }
.paging_simple .pgntn .btn_next > span { transform: rotate(180deg); }
.paging_simple .pgntn .btn:hover > span { background-image: url("/resources/images/angle_logo.svg");}
.paging_simple .pgntn .btn:disabled > span,
.paging_simple .pgntn .btn:disabled:hover > span { background-image: url("/resources/images/angle.svg");}




/* ================================================== notice ================================================== */
.notice_wrap { position: relative; width: 100vw; height: 100vh; background-color: var(--bg-light); }
.notice_wrap .notice_box { position: absolute; top: 50%; left: 50%; display: flex; gap: 8rem; padding: 8rem; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
.notice_wrap .notice_box .img_box { width: 8.4rem; height: 14rem; }
.notice_wrap .notice_box .img_box > img { width: 100%; height: 100%; object-fit: contain; }
.notice_wrap .notice_box .txt_box > .logo { margin-bottom: 0.8rem; font-size: 1.6rem; font-weight: 700; }
.notice_wrap .notice_box .txt_box > .main_txt { margin-bottom: 2rem; font-size: 3.2rem; font-weight: 700; white-space: nowrap; }
.notice_wrap .notice_box .txt_box > .main_txt > span { font-weight: 700; background: var(--logo); color: transparent; -webkit-background-clip: text; }
.notice_wrap .notice_box .txt_box > .sub_txt { line-height: 1.5; font-size: 1.6rem; font-weight: 300; color: var(--txt-mid); white-space: nowrap;}

@media screen and ( min-width : 320px ) and ( max-width : 768px ) {
    .notice_wrap .notice_box { display: block; width: calc(100% - 2rem); height: calc(100% - 2rem); padding: 0; }
    .notice_wrap .notice_box > .img_box { width: 100%; height: 14rem; margin-top: 30vh;}
    .notice_wrap .notice_box > .img_box > img {  display: block; width: 8.4rem; height: 100%; margin: auto; }
    .notice_wrap .notice_box > .txt_box { margin: auto; margin-top: 4rem; }
    .notice_wrap .notice_box > .txt_box > .logo { font-size: 1.6rem; text-align: center; }
    .notice_wrap .notice_box > .txt_box > .main_txt { font-size: 2.8rem; text-align: center; }
    .notice_wrap .notice_box > .txt_box > .main_txt > span {font-size: 2.8rem; }
    .notice_wrap .notice_box > .txt_box > .sub_txt { font-size: 1.4rem; text-align: center; line-height: 2.2rem; }
}    





/* ================================================== responsive ================================================== */
/***** 768 ~ 1280 *****/
@media screen and ( min-width : 768px ) and ( max-width : 1280px ) {
    .con_top.notice_top { margin-bottom: 3rem; }
}





/***** 320 ~ 900 *****/
@media screen and ( min-width : 320px ) and ( max-width : 900px ) {
    /* ================================================== layout ================================================== */
    .content { min-height: calc(100vh - 12.8rem); }
    .con_wrap { margin-top: 12.8rem; padding: 4.5rem 3rem; }
    
    /* ================================================== header ================================================== */
    .header { padding: 0 3rem; border-bottom: var(--border-lightGray); box-shadow: none; overflow: unset;}
    .header:hover { height: 8rem; }
    .header:hover::after { opacity: 0; }
    /***** h_nav *****/
    .h_nav { display: none; position: absolute; }
    .h_nav.act { z-index: 1000; display: block;  top: 0; right: 0; width: 100vw; height: 100vh; box-sizing: border-box; background-color: rgba(0,0,0,0.5); overflow : hidden; }
    .h_nav.act > * { position: absolute; right: 0; width: 100%; max-width: 36rem; box-sizing: border-box; }
    .h_nav.act .nav_pop_header { z-index: 1; display: flex; top: 0; height: 8rem; padding: 2.5rem 3rem; border-bottom: var(--border-lightGray); background-color: #fff; justify-content: space-between; }
    .h_nav.act .nav_pop_header > .h_logo { width: 23rem; height: 3rem; }
    .h_nav.act .nav_pop_header .btn_close { width: 3rem; background: url("/resources/images/close.svg") no-repeat center; }
    .h_nav.act .depth01 { display: block; top: 0; height: 100vh; padding: 11rem 3rem 10.8rem; box-sizing: border-box; margin-right: unset; line-height: unset; background-color: #fff; overflow-x: hidden; overflow-y: auto; }
    .h_nav.act .depth01 > li ~ li { margin-top: 3rem; }
    .h_nav.act .depth01 > li > a { position: relative; height: 5rem; margin: 0; font-size: 1.8rem; font-weight: 700; }
    .h_nav.act .depth01 > li > a::before { position: absolute; display: block; content: ""; bottom: 0; left: 0; width: 2rem; height: 0.2rem; background-color: var(--txt-semiDeep); }
    .h_nav.act .depth02 { display: none; padding-top: 3rem; transform: unset; }
    .h_nav.act .depth02 > li { height: 5rem; padding: 0; }
    .h_nav.act .depth02 > li > a { font-size: 1.8rem; line-height: 5rem; }
    .h_nav.act .depth01 > li.act > a { border-bottom: 0; }
    .h_nav.act .depth01 > li.act > a::before { background: var(--logo);}
    .h_nav.act .depth01 > li.act .depth02 { display: block; }
    .h_nav.act .lang { z-index: 1; bottom: 0; height: 7.8rem; padding: 0 3rem; border-top: var(--border-lightGray); box-sizing: border-box; margin: unset; line-height: unset; justify-content: right; background-color: #fff; }
    .h_nav.act .lang > li a { font-size: 1.8rem; line-height: 7.8rem; }
    /* main */
    .main .header .h_nav.act .h_logo a { background-image: url("/resources/images/logo.svg");}
    .main .header .h_nav.act * { color: var(--txt-semiDeep) !important; }
    .main .header .h_nav.act .depth02 > li > a { color: var(--txt-mid) !important;}

    /***** btn_menu *****/
    .btn_menu { display: block; }
    
    /* ================================================== sub_nav ================================================== */
    .sub_nav { position: fixed; top: 8rem; left: 0; width: 100%; height: 4.8rem; padding: 0 3rem; background: #FFF; box-shadow: var(--box-sd); }
    .sub_nav .depth01 > li { display: flex; }
    .sub_nav .depth01 > li > a { padding: 0 3rem 0 0; font-size: 1.6rem; line-height: 4.8rem; }    
    .sub_nav .depth01 > li > a::after { bottom: 50%; left: unset; right: 0; transform: translateY(50%); width: .2rem; height: 1.8rem; }
    .sub_nav .depth02 { display: flex; margin-left: 1.5rem; line-height: 4.8rem; overflow-x: auto; }
    .sub_nav .depth02 > li > a { padding: 0 1.5rem; }

    /* ================================================== footer ================================================== */
    .footer .f_info { margin-top: 3rem; }

    /* ================================================== con ================================================== */
    .con_top { margin-bottom: 6rem; }

    /* ================================================== main ================================================== */
    .main .header { border-bottom: 0; }
    .main .btn_menu { filter: brightness(0) invert(1); }
    .main .con .main_info { right: unset; left: 0; width: 45rem; }
    .main .con .main_info h2 { font-size: 4.4rem; }
    .main .con .main_info p { font-size: 1.4rem; }
    .main .con .main_info a { justify-content: flex-start; width: fit-content; font-size: 1.4rem; }
    /* hover */
    .main .header:hover { background-color: transparent; }
    .main .header:hover .h_logo a { background-image: url("/resources/images/logo_white.svg"); }

    /* ================================================== company ================================================== */
    /* overview */
    .overview dl > * { padding: 1.5rem 0; }

    /* ================================================== service ================================================== */
    /***** mtnc *****/
    .mtnc dl::before { top: 2rem; transform: none; height: 6rem; }
    .mtnc dt { display: flex; align-items: center; height: 6rem; font-size: 1.8rem; line-height: 150%; }
    .mtnc dd { margin-left: -10rem; padding-top: 2rem; }
    /***** bsb *****/
    .bsb > ul > li > p { width: 6rem; height: 6rem; }
    .bsb > ul:not(:nth-child(1)) > li > p { width: 5rem; height: 5rem; }
    .bsb > ul:nth-of-type(4) li { width: calc(50%); }
    /* has_tlt */
    .bsb > ul.has_tlt { padding: 2.8rem 0 2rem; }
    .bsb > ul.has_tlt .tlt { width: 90%; padding: 0 .5rem; }
    .bsb > ul.has_tlt > li { width: 50%; }

    /* ================================================== notice ================================================== */
    /***** paging *****/
    .paging { margin-top: 1.5rem; }
    /***** paging_simple *****/
    .paging_simple { margin-top: 3rem; }
}    





/***** 320 ~ 768 *****/
@media screen and ( min-width : 320px ) and ( max-width : 768px ) {
    /* ================================================== layout ================================================== */
    .content { min-height: calc(100vh - 10.6rem); }
    .con_wrap { margin-top: 10.6rem; padding: 4rem 2rem; }

    /* ================================================== header ================================================== */
    .header { height: 6rem; padding: 0 2rem; }
    .header > * { height: 6rem; }
    .header:hover { height: 6rem; }
    .header .h_logo > a { width: 18rem; background-size: contain; }
    /***** btn_menu *****/
    .btn_menu { width: 2.4rem; }
    /***** h_nav *****/
    .h_nav.act .nav_pop_header { height: 6rem; padding: 1.8rem 2rem; }
    .h_nav.act .nav_pop_header > .h_logo { width: 20rem; height: 2.4rem; }
    .h_nav.act .nav_pop_header .btn_close { width: 2.4rem; }
    .h_nav.act .depth01 { padding: 8rem 2rem 7.8rem; }
    .h_nav.act .depth01 > li ~ li { margin-top: 2rem; }
    .h_nav.act .depth01 > li > a { height: 4rem; }
    .h_nav.act .depth02 { padding-top: 2rem; }
    .h_nav.act .depth02 > li { height: 4rem; }
    .h_nav.act .depth02 > li > a { font-size: 1.6rem; line-height: 4rem; }
    .h_nav.act .lang { height: 5.8rem; padding: 0 2rem; }
    .h_nav.act .lang > li a { line-height: 5.8rem; }

    /* ================================================== sub_nav ================================================== */
    .sub_nav { top: 6rem; height: 4.6rem; padding: 0 2rem; }
    .sub_nav .depth01 > li > a { font-size: 1.2rem; }
    .sub_nav .depth02 > li > a { width: max-content; font-size: 1.2rem; line-height: 4.6rem; }

    /* ================================================== footer ================================================== */
    .footer { padding: 2rem; }
    .footer .f_info { margin-top: 2rem; }

    /* ================================================== con ================================================== */
    .con_wrap { padding-bottom: 2rem; }
    .con_top { margin-bottom: 4rem; }
    .con_top .top_tlt { margin-bottom: 1rem; font-size: 2.4rem; }
    /* to_top */
    .to_top { display: block; }

    /* ================================================== main ================================================== */
    .main .con .main_info { width: auto; }
    .main .con .main_info h2 { font-size: 3rem; white-space: nowrap; }
    .main .con .main_info p { font-size: 1.2rem; letter-spacing: .3px; }
    .main .con .main_info a { font-size: 1.2rem; }

    /* ================================================== company ================================================== */
    /* overview */
    .overview { display: block; }
    .overview dl { width: 100%; }
    .overview dl > * { padding: 1.5rem 0; font-size: 1.4rem; }
    .overview dt { width: 12rem; }
    .overview dd { width: calc(100% - 12rem); padding-left: 1.5rem; padding-right: 1.5rem; }
    /* vision */
    .vision { display: flex; }
    .vision > * { display: block; }
    .vision > * > * { text-align: left; }
    .vision_txt { position: relative; padding-left: 4rem; }
    .vision_txt::after { content: ""; position: absolute; top: 1.5rem; left: 1rem; width: .1rem; height: 81.45%; background-image: var( --logo-to-top); }
    .vision_txt dl { position: relative; }
    .vision_txt dl::after, 
    .vision_txt dl::before { z-index: 1; content: ""; position: absolute; top: 0; left: -4rem; width: 2rem; height: 2rem; border-radius: 5rem; background-image: var(--logo-to-top); }
    .vision_txt dl:nth-child(1)::after { opacity: .25; }
    .vision_txt dl:nth-child(2)::after { opacity: .5; }
    .vision_txt dl:nth-child(3)::after { opacity: .75; }
    .vision_txt dl::before { background: #FFF; }
    .vision_txt dl ~ dl { margin-top: 4rem; }
    .vision_txt dt { margin: unset; }
    .vision_txt dd { margin-top: 1rem;}
    .vision_obj { display: none; }

    /* ================================================== service ================================================== */
    /***** consulting *****/
    .consulting dl { padding: 2rem 0; }
    .consulting dl::before { display: none; }
    .consulting dt { position: relative; font-size: 1.6rem; }
    .consulting dt::after { content: ""; display: block; width: 100%; height: 18rem; background: no-repeat center; background-size: 14rem; }
    .consulting dl:nth-child(1) dt::after { background-image: url("/resources/images/service/consulting01.svg"); }
    .consulting dl:nth-child(2) dt::after { background-image: url("/resources/images/service/consulting02.svg"); }
    .consulting dl:nth-child(3) dt::after { background-image: url("/resources/images/service/consulting03.svg"); }
    .consulting dd li { padding-left: 1.5rem; font-size: 1.4rem; text-indent: -1.5rem; }
    .consulting dd li::before { padding: 0 .5rem; }
    /***** mtnc *****/
    .mtnc dl { width: 100%; padding: 2rem 0 2rem 8rem; border-right: 0 !important; }
    .mtnc dl::before { width: 8rem; background-position: center left; }
    .mtnc dt { display: flex; align-items: center; height: 6rem; font-size: 1.8rem; line-height: 150%; }
    .mtnc dd { margin-left: -8rem; }
    /***** bsb *****/
    .bsb > ul { justify-content: left; }
    .bsb > ul > li { width: 50%; }

    /* ================================================== notice ================================================== */
    /* table */
    .table colgroup > col:first-of-type { width: calc(100% - 10rem) !important; }
    .table colgroup > col:last-of-type { width: 10rem !important; }
    .table td:last-of-type > p { font-size: 1.2rem; } 
    /***** paging *****/
    .paging { flex-direction: column-reverse; align-items: center; gap: 2rem; margin-top: 4rem; }
    .pg_total * { font-size: 1.2rem; line-height: 150%; }
    /***** paging_simple *****/
    .paging_simple { flex-direction: column; }
}