@charset "utf-8";
@import "./font/kyoboLifeFont.css";
@import "./font/pretendard.css";

/* --------------------------------------[ s: ~202407 ]-------------------------------------- */
/* -------------------[ s: color ]------------------- */
:root{
    --natural-n100:#F4F6FA;
    --natural-n600:#8F95B2;
    --natural-n800:#474D66;
    --natural-n900: #101840;

    --primary-green: #0AA622;
    --primaru-blue: #121C72;
    --primary-b600: #1943d4;
    --primary-b800: #121C72;

    --grayscale-black: #131313;
    --grayscale-400: #c2c2c2;
    --grayscale-900: #252525;

    --coolgray-50: #F2F4F7;

    --blue-10: #f5f8fe;
}
/* -------------------[ e: color ]------------------- */



/* -------------------[ s: style ]------------------- */
.lang_cn{font-family:	arial, dotum, '돋움', '굴림' !important;} /* 한자 깨짐 */
.txt_gray{color: var(--grayscale-400); font-size: 16px;}
.fnt_blue{color: var(--primary-b600);}
.flex_col_wrap{display: flex; flex-direction: column;}
.flex_row_wrap{display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;}

.bg_pr_green{background-color: var(--primary-green) !important; color: #fff;}
.bg_pr_blue{background-color: var(--primaru-blue) !important; color: #fff;}
.bg_pr_b800{background-color: var(--primary-b800) !important;}
/* -------------------[ e: style ]------------------- */



/* -------------------[ s: icon ]------------------- */
[class^="ico_"]{display: block;background-repeat: no-repeat;background-position: center;width: 24px;height: 24px; background-size: 100%;}
.ico_link_arr{background-image: url(../images/common/ico_link_arr.svg);}
.ico_user{background-image: url(../images/common/ico_user.svg);}
.ico_monitor{width: 20px; height: 20px; background-image: url(../images/common/ico_monitor.svg);}
.ico_link_arr_double{width: 16px; background-image: url(../images/common/ico_link_arr_double.svg);}
.ico_calendar{width: 48px; height: 48px; background-image: url(../images/common/ico_calendar.png);}
.ico_doc_check{width: 48px; height: 48px; background-image: url(../images/common/ico_doc_check.png);}
.ico_doc{width: 48px; height: 48px; background-image: url(../images/common/ico_doc.png);}
.ico_user_green{width: 48px; height: 48px; background-image: url(../images/common/ico_user_green.png);}
.ico_logo_gray{width: 76px; height: 22px; background-image: url(../images/common/ico_logo_gray.svg);}
.ico_close{background-image: url(../images/common/ico_close.svg);}
/* -------------------[ e: icon ]------------------- */



/* -------------------[ s: component ]------------------- */
.ban_round{position: relative; display: block; border-radius: 24px; width: 335px; height: 268px; background-repeat: no-repeat; background-position: center; background-size: cover; transition: background-size .3s ease;}
.ban_round button,
.ban_round [role="button"]{display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; padding: 24px;}
.ban_round button{border: 0; background-color: transparent;}
.ban_round .title,
.ban_round .sub_title{color: #fff; line-height: 1.3; font-weight: 600; text-align: left;}
.ban_round .title{font-size: 22px;}
.ban_round .sub_title{font-size: 16px; display: flex; gap: 5px; align-items: center;}
.ban_round:hover{background-size: 108%;}
.btn_round{border-radius: 12px; padding: 16px; color: #fff; font-size: 18px; font-weight: 600; display: inline-block; width: 160px; text-align: center;}
/* -------------------[ e: component ]------------------- */



/* -------------------[ s: main common ]------------------- */
.main *{font-family: 'kyoboLife';}
/* #header *{font-family: 'kyoboLife';} */
.main{width: 100%; position: relative;}
.cont_section_inner{width: 100%; position: relative;}
/* -------------------[ e: main common ]------------------- */



/* -------------------[ s: GNB ]------------------- */
#header { display: flex; align-items: center; justify-content: center; padding: 18px 0; position: fixed; width: 100%; height: 80px; top: 0; background-color: rgba(255, 255, 255, 0.5); z-index: 801; padding: 12px 16px; height: 60px;
backdrop-filter: blur(50px);-webkit-backdrop-filter: blur(50px);-moz-backdrop-filter: blur(50px);-ms-backdrop-filter: blur(50px);} 
#header header { width: 100%; display: flex; justify-content:space-between; } 
#header .logo img { height: 32px; } 
#header header > nav { display: flex; } 
#header header .ico_menu { width: 24px; height: 19px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } 
#header header .ico_menu .bar { display: block; background-color: var(--grayscale-black); width: 18px; height: 2px; transition: .3s; } 
#header .button-snb { height: auto; line-height: 1; border: 0; background-color: transparent; padding: 4px; } 
#header .button-snb.active .ico_menu .bar:nth-child(1) { -webkit-transform: translateY(6px) rotate(-45deg); -ms-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); } 
#header .button-snb.active .bar:nth-child(2) { opacity: 0; } 
#header .button-snb.active .ico_menu .bar:nth-child(3) { -webkit-transform: translateY(-7px) rotate(45deg); -ms-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); } 

.gnb_mo * { font-family: 'kyoboLife'; font-weight: 700; line-height: 1; } 
.gnb_2depth { display: none; position: absolute; top: 70px; left: 0; background-color: #fff; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.15); border-radius: 16px; overflow: hidden;  padding: 12px; width: 153px;}
.gnb_2depth > ul { display: flex; flex-direction: column; gap: 8px; width: 100%;} 
.gnb_2depth > ul li { width: 100%; cursor: pointer; position: relative; color: var(--grayscale-900); font-size: 18px; line-height: 1.3;} 
.gnb_2depth > ul::after { content: none; } 
.gnb_2depth > ul li > a { position: relative; padding: 9px 12px 7px 12px; border-radius: 8px; display: inline-flex; white-space: nowrap; width: 100%; height: 40px; font-weight: 600;font-family: 'pretendard';}
.gnb_2depth ul li:hover a {background-color: rgba(0,0,0,0.05);}
.nav_gnb_mo{position: fixed; top: 0px; z-index: 800; background-color: #fff; width: 100%; padding: 0 16px; height: 100%; transform: translateY(-100%);transition: transform .3s ease; overflow-y: auto;}

.gnb_mo{padding-top: 72px; width: 100%; display: flex; flex-direction: column; gap: 32px; padding-bottom: 32px;}
.gnb_mo > li{font-size: 20px;}
.gnb_mo li > a{height: 28px; position: relative; display: inline-flex; align-items: center; gap: 4px;}
.gnb_mo > li:hover > a {background-color: transparent;}
.gnb_mo .gnb_2depth { display: flex; position: relative; border: 0; box-shadow: none; padding: 24px 20px 0; top: 0; width: 100%; background-color: transparent; border-radius: 0;}
.gnb_mo .gnb_2depth > ul{gap: 24px;}
.gnb_mo .gnb_2depth > ul li > a{padding: 0; border-radius: 0; height: auto; line-height: 1.3;}
.gnb_mo .gnb_2depth ul li:hover a{background-color: transparent;}
.gnb_mo .txt_gray { margin-left: 12px; display: flex; align-items: center; gap: 4px; }
.nav_gnb_mo.active { transform: translateY(0);}
/* -------------------[ e: GNB ]------------------- */




/* -------------------[ s: cont_top ]------------------- */
.cont_top_wrap .blank { display: block; } 
.cont_top_main { width: 100%; height: 740px; background-image: url(../images/main/main_thumb.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; position: fixed; top: 0; left: 0; overflow: hidden; } 
.cont_top_main video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } 
.cont_top_wrap { width: 100%; z-index: 1; } 
.cont_top_wrap > div { display: flex; align-items: center; justify-content: center; width: 100%; height: 740px; } 
.cont_top_wrap .txt { font-size: 30px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--primary-b600); color: #fff; } 
.cont_top_wrap .txt p { line-height: 1.4; } 

.main .recruit_buttons { display: flex; gap: 15px; margin-top: 47px; width: 100%; justify-content: center; opacity: 0; pointer-events: none; } 
.main .recruit_buttons .btn_st_03 {width: 160px;height: 56px;font-family: 'Pretendard';font-weight: 600;font-size: 18px;border-radius: 12px;border: 0;} 
.main .active .recruit_buttons { pointer-events: all; opacity: 1; transition: opacity 0.5s ease; } 
.main .sec_visual_00 { position: fixed; top: 0; left: 0; } 
.main .sec_visual_00 .txt { position: absolute; margin: 0 auto; opacity: 0; } 
.main .sec_visual_00 .txt_01 { opacity: 1; } 
/* -------------------[ e: cont_top ]------------------- */



/* -------------------[ s: section ]------------------- */
.main .section { display: flex; align-items: center; justify-content: center; } 
.main .section .flex_col_wrap { padding: 0 12px; gap: 12px; margin-bottom: 42px; } 

.main .section .txt { text-align: left; } 
.main .section .txt_01 { font-size: 30px; margin-bottom: 16px; font-weight: 700; line-height: 1.3; color: var(--natural-n900); } 
.main .section .txt_01 b { font-weight: inherit; } 
.main .section .txt_02 { font-size: 16px; line-height: 1.5; letter-spacing: -1px; font-weight: 400; color: var(--natural-n800); } 
.main .section .txt_02 b { font-weight: 700; color: var(--natural-n900); } 

.main .ban_round1 { background-image: url(../images/main/img_kyoboposition.jpg); } 
.main .ban_round2 { background-image: url(../images/main/img_kyobowelfare.jpg); } 
.main .ban_round3 { background-image: url(../images/main/img_leader.jpg); } 
.main .ban_round4 { background-image: url(../images/main/img_infinite.jpg); } 
.main .ban_round5 { background-image: url(../images/main/img_kyobocity.jpg); } 
.main .ban_round6 { background-image: url(../images/main/img_250630.png); } 
.main .ban_round7 { background-image: url(../images/main/img_contents.jpg); } 

.main .section_hrjob { position: relative; padding-top: 152px; padding-bottom: 120px; overflow: hidden; } 
.main .section_hrjob .flex_col_wrap { margin-bottom: 171px; } 
.main .section_hrjob .img_obj_02 > img,
.main .section_hrjob .img_obj_01 > img { width: 100%; } 
.main .section_hrjob .img_obj_02,
.main .section_hrjob .img_obj_01 { position: absolute; width: 278px; top: 299px; left: -26px; } 
.main .section_hrjob .img_obj_01 > img.on { position: absolute; top: 0; left: 0; } 
.main .section_hrjob .img_obj_02 { width: 167px; top: 222px; right: 0; left: auto; } 

.main .section_company { padding-bottom: 40px; } 

.main .section_process * { font-family: 'Pretendard'; } 
.main .section_process { background-color: var(--blue-10); padding: 72px 0 48px; } 
.main .section_process .txt_01 { margin-bottom: 32px; line-height: 1.3; } 
.main .section_process .flex_col_wrap { align-items: center; margin-bottom: 0; } 
.main .section_process .list-process { width: 333px; gap: 0; margin-bottom: 44px; } 
.main .section_process .list-process * { font-family: 'Pretendard'; color: var(--grayscale-900); font-weight: 700; } 
.main .section_process .list-process li { display: flex; text-align: center; width: 158px; font-size: 16px; } 
.main .section_process .list-process li:nth-child(2) { margin-bottom: 23px; }
.main .section_process .list-process .flex_col_wrap { gap: 20px; margin-bottom: 0 !important; flex: 1 1 auto; } 
.main .section_process .list-process .num { font-size: 18px; } 
.main .section_process .list-process .title { line-height: 1.3; } 
.main .section_process .list-process .sub_title { font-size: 14px; font-weight: 400; line-height: 1.4; } 

.main .section_hrinfo { padding-top: 80px; padding-bottom: 40px; } 
.main .section_hrinfo .blank { display: block; } 
/* -------------------[ e: section ]------------------- */



/* -------------------[ s: section animate ]------------------- */
/* section_hrjob */
.section_hrjob.aos-animate .img_obj_01 { animation: fadeInLeft .5s ease both; } 
.section_hrjob.aos-animate .img_obj_01 > img.on { animation: flash 3s ease-in both; animation-iteration-count: 1.5; } 
.section_hrjob.aos-animate .img_obj_02 { animation: fadeInRight .5s ease both; animation-delay: .2s; } 
.section_hrjob.aos-animate .txt_01 { animation: fadeInUp .5s ease both; animation-delay: .3s; } 
.section_hrjob.aos-animate .txt_02 { animation: fadeInUp .5s ease both; animation-delay: .4s; } 
.section_hrjob.aos-animate .flex_row_wrap { animation: fadeInUp .5s ease both; animation-delay: .5s; } 

/* section_company */
.section_company.aos-animate .txt_01 { animation: fadeInUp .5s ease both; animation-delay: .2s; } 
.section_company.aos-animate .txt_02 { animation: fadeInUp .5s ease both; animation-delay: .3s; } 
.section_company.aos-animate .flex_row_wrap { animation: fadeInUp .5s ease both; animation-delay: .4s; } 

/* section_process */
.section_process.aos-animate .txt_01 { animation: fadeInUp .5s ease both; animation-delay: .2s; } 
.section_process.aos-animate .list-process::after{content: none;}
.section_process.aos-animate .list-process > li:nth-child(1) { animation: fadeInUp .5s ease both; animation-delay: .3s; } 
.section_process.aos-animate .list-process > li:nth-child(2) { animation: fadeInUp .5s ease both; animation-delay: .4s; } 
.section_process.aos-animate .list-process > li:nth-child(3) { animation: fadeInUp .5s ease both; animation-delay: .5s; } 
.section_process.aos-animate .list-process > li:nth-child(4) { animation: fadeInUp .5s ease both; animation-delay: .6s; } 
.section_process.aos-animate .btn_wrap { animation: fadeInUp .5s ease both; animation-delay: .7s; } 

/* section_hrinfo */
.section_hrinfo.aos-animate .txt_01 { animation: fadeInUp .5s ease both; animation-delay: .2s; } 
.section_hrinfo.aos-animate .txt_02 { animation: fadeInUp .5s ease both; animation-delay: .3s; } 
.section_hrinfo.aos-animate .flex_row_wrap { animation: fadeInUp .5s ease both; animation-delay: .4s; } 
/* -------------------[ e: section animate ]------------------- */



/* -------------------[ s: footer ]------------------- */
.section_relative_link { position: relative; background-color: var(--natural-n100); height: 40px; display: block; } 
.section_relative_link > ul { display: flex; width: 100%; height: 100%; } 
.section_relative_link > ul > li { flex: 1 0 0; text-align: center; width: 100%; height: 100%; } 
.section_relative_link a { position: relative; display: block; width: 100%; height: 100%; color: var(--natural-n800); font-family: 'Pretendard'; font-size: 13px; font-weight: 400; line-height: 3; } 
.section_relative_link > ul > li:first-child a::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -9px; width: 1px; height: 16px; background-color: var(--natural-n800); } 

#footer{width:100%;height:240px;background-color: #FAFBFF; padding: 40px 24px 0;}
#footer *{font-family: 'Pretendard'; line-height: 1; font-weight: 400; font-size: 14px;}
#footer .ico_logo_gray{margin-bottom: 24px;}
#footer .address_list .label_txt { font-size: 13px; color: var(--natural-n600); font-weight: 400; line-height: 1.5; } 
/* -------------------[ e: footer ]------------------- */



/* -------------------[ s: loading ]------------------- */
#lottie-box-loading { position: fixed; top: 0; left: 0; background-color: #fff; width: 100%; height: 100%; z-index: 999; display: flex; justify-content: center; } 
#lottie-box-loading > svg { width: 100px !important; } 
/* -------------------[ e: loading ]------------------- */



/* -------------------[ s: pop-layer ]------------------- */
.pop-layer *{font-family: 'kyoboLife'; line-height: 1;}
.pop-layer { align-items: center; justify-content: center; flex-direction: column; position: fixed; top: 0; z-index: 889; display: none; width: 100%; height: 100%; } 
.pop-layer.dim { background-color: rgba(0, 0, 0, 0.5); } 
.pop-layer-inner { width: 100%; height: 100%; background-color: #fff; padding: 0 20px 32px; z-index: 1; } 
.pop-layer .pop-layer-header { display: flex; justify-content: space-between; height: 60px; padding: 12px 0; } 
.pop-layer .pop-layer-cont {height: calc(100% - 60px); overflow: auto;} 
.pop-layer .pop-layer-cont .cont,
.pop-layer .pop-layer-cont .inner { display: flex; flex-direction: column; gap: 24px; } 
.pop-layer .pop-layer-cont .tit { font-size: 22px; font-weight: 600; color: var(--grayscale-900); line-height: 1.3; } 
.pop-layer .pop-layer-cont .txt { color: var(--grayscale-900); font-size: 16px; font-weight: 500; line-height: 1.5; font-family: 'Pretendard';}
.pop-layer .pop-close{border: 0; padding: 0; margin: 0; background-color: transparent;}
.pop-layer.active,
.pop-layer.off{display: flex;}
.pop-layer.off{animation: fadeOut .5s ease both; pointer-events: none;}
.pop-layer.active .pop-layer-inner{animation: fadeInUp .5s ease both;}
.pop-layer.off .pop-layer-inner{animation: fadeOutDown .5s ease both;}

/* #pop-layer-02 */
#pop-layer-02 .flex_col_wrap { gap: 24px; } 
#pop-layer-02 h3.txt { font-weight: 700; } 
#pop-layer-02 .txt_wrap,
#pop-layer-02 ul { gap: 12px; } 
#pop-layer-02 .txt_wrap .txt { font-size: 14px; font-weight: 400; line-height: 1.5; text-align: center; } 
#pop-layer-02 .pop-layer-cont .cont > .flex_row_wrap {flex-direction: column;justify-content: flex-start; align-items: center; gap: 12px; } 
#pop-layer-02 ul li { flex: 1 0 0; height: 30px; border-radius: 15px; background-color: var(--coolgray-50); font-size: 14px; font-weight: 700; color: var(--grayscale-900); display: flex; align-items: center; justify-content: center; } 
#pop-layer-02 .img_box{max-width: 311px; width: 100%;} 
/* -------------------[ e: pop-layer ]------------------- */
/* --------------------------------------[ e: ~202407 ]-------------------------------------- */






/* --------------------------------------[ s: ~202401 ]-------------------------------------- */
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-image: url(../images/hero.png); background-position: 50% 50%; background-size: cover; z-index: 1; } 
.hero-bg-color { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; opacity: .6666; z-index: 2; } 
.hero-bg-color2 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; opacity: 1; z-index: 3; } 

/* 20240423 추가 */
.top-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-image: url(../images/hero.png); background-position: 50% 50%; background-size: cover; z-index: 1; } 
.headcopy { position: absolute; left: 0; top: 160px; width: 100%; padding: 0 32px; z-index: 1; text-transform: uppercase; font-size: 28px; font-weight: 500; line-height: 34px; opacity: 1; color: #fff; word-break: keep-all; } 
.subcopy { position: absolute; left: 0; width: 100%; padding: 0 32px; z-index: 3; text-transform: uppercase; font-size: 16px; line-height: 24PX; opacity: 1; color: #fff; word-break: keep-all; } 
.subcopy.line1 { top: 160px; } 
.subcopy.line2 { top: 247px; } 

.hr-main { overflow: hidden; } 
.hr-main .contents-wrraper { background-color: #fafbff; position: relative; }
.hr-main .contents-wrraper > section{padding-left: 20px; padding-right: 20px;}
.hr-main .contents-wrapper.welfare, .contents-wrapper.telent { position: relative; margin-bottom: 0; top: 0px; padding: 0 20px 100px; } 

.contents-wrapper .welfare-sections, .telent-sections { font-family: 'kyoboLife','Pretendard','NotoSansKR','Malgun Gothic',sans-serif; display: flex; flex-direction: column; } 
.section-wellness, 
.section-lifeCare, 
.section-cafeteria, 
.section-familyship { font-family: 'kyoboLife','Pretendard','NotoSansKR','Malgun Gothic',sans-serif; position: relative; display: flex; flex-direction: column; margin-top: 40px; text-align: left; } 
.section-wellness{margin-top: 0;}

.welfare-sections img { margin-bottom: 20px; } 
.welfare-sections .title { font-size: 20px; line-height: 20px; color: #1f5ba6; font-weight: bold; margin-bottom: 10px; }
.welfare-sections .sub-title { font-size: 16px; color: #478225; font-weight: 600; line-height: 24px; margin-bottom: 20px; } 
.welfare-sections .welfare-list { display: flex; flex-direction: column; row-gap: 16px; } 
.welfare-sections .welfare-list .item { position: relative; color: #646464; font-size: 16px; line-height: 24px; margin-left: 14px; } 
.welfare-sections .welfare-list .item::before { content: ''; position: absolute; top: 50%; left: -14px; transform: translateY(-50%); background: #121212; width: 4px; height: 4px; } 
.welfare-sections .cafeteria-desc { font-size: 16px; color: #646464; line-height: 24px; } 
.welfare-sections .cafeteria-desc .sub-desc { font-size: 12px; } 
.welfare-sections .section-familyship { padding: 20px 0; background-color: #f8f8f8; } 
.welfare-sections .section-familyship .title { text-align: center; } 
.welfare-sections .familyship-desc { font-size: 12px; line-height: 20px; color: #121212; text-align: center; padding: 0 12px; } 

.telent-sections { display: flex; } 
.telent-sections .section-telent { display: flex; flex-direction: column; } 
.telent-sections .section-telent .telent-list { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 54px; margin-top: 28px; } 
.telent-sections .section-telent .telent-list .title { font-size: 20px; line-height: 20px; color: #1f5ba6; text-align: center; } 
.telent-sections .section-telent .telent-list .sub-title { font-size: 18px; line-height: 24px; font-weight: 400; color: #478225; text-align: center; margin-top: 6px; } 
.telent-sections .section-telent .telent-list .desc { font-size: 14px; line-height: 22px; font-weight: 400; color: #595959; text-align: center; margin-top: 12px; } 

.job-interview-sections .section-job-interview { display: flex; flex-direction: column; margin-top: 40px; } 
.section-job-interview .tab { display: flex; flex-direction: column; gap: 20px; color: #BBBBBB;} 
.section-job-interview .tab-button-list { display: flex; gap: 8px; justify-content: flex-start; } 
.section-job-interview .tab-button { background-color: #fff; font-size: 22px; font-family: 'kyoboLife','Pretendard','NotoSansKR','Malgun Gothic',sans-serif; font-weight: 600; color: #bbb; border: none; } 
.section-job-interview .tab-button.active { color: #000; font-weight: bold; } 
.section-job-interview .tab-content { display: none; } 
.section-job-interview .tab-content .grid-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } 
.section-job-interview .active-content { display: block; } 

.contents-wrraper .section-hrinfo { background-color: #fff; position: relative; } 
.contents-wrraper .section-company { background-color: #fff; position: relative; } 
.contents-wrraper .section-hrmain { height: 100vh; width: 100%; background-image: url(../images/img-main.png); background-size: cover; background-repeat: no-repeat; position: relative; } 
.contents-wrraper .section-hrjob { background-color: #fff; position: relative; background-image: url(../images/cta-bg.png); background-position: left 212px; background-size: contain; background-repeat: no-repeat; } 
.section-hrjob .section-subcopy { padding-bottom: 120px; } 
.contents-wrraper .section-process { position: relative; } 
.contents-wrraper .section-colleague { position: relative; } 
.contents-wrraper .section-history { position: relative; } 
.contents-wrraper .section-button-join { position: relative; } 
.contents-wrraper .section-relative-link { position: relative; background-color: #f4f6fa; } 

.contents-wrraper .footer { position: relative; } 
.section-company,
.section-process,
.section-hrinfo,
.section-hrjob { padding: 0 20px 40px; } 
.section-headcopy { margin-bottom: 16px; padding-top: 80px; font-size: 32px; line-height: 42px; letter-spacing: -1px; word-break: keep-all; } 
.section-subcopy { font-size: 16px; line-height: 24px; } 
.section-hrmain .section-hrmain-cta { position: fixed; z-index: 2; display: flex; justify-content: center; gap: 8px; width: 100%; padding: 0 20px; bottom: 12px; left: 0; } 
.section-hrmain .section-hrmain-cta > * { flex: 1; } 



/* 20230811 start */
.modal-block-wrap .modal-youtube-trigger,
.modal-block-wrap .modal-block { position: relative; border-radius: 12px; background-repeat: no-repeat; background-size: cover; padding-top: 80%; } 
.modal-block-wrap .modal-youtube-trigger { background-image: linear-gradient(to top,#005dff 0%, #05befe 100%); } 

.player-wrap { position: relative; height: 0; padding-bottom: 56.25%; margin: 0; overflow: hidden; border-radius: 8px; } 
.player-wrap iframe { position: absolute; width: 100%; height: 100%; } 

[data-ref=modaleYoutube].modal-item .modal-pannel .modal-action,
[data-ref=modaleYoutube].modal-item .modal-pannel { background-color: transparent; border: 0; box-shadow: none; } 

.modal-block-wrap .modal-youtube-trigger .copyright,
.modal-block-wrap .modal-block .copyright,
.link-block-wrap .link-block .copyright { color: #fff; position: absolute; left: 24px; bottom: 24px; line-height: 22px; padding-right: 20px; background-image: url(../images/icon-double-arrow.png); background-size: auto 16px; background-position: right 50%; background-repeat: no-repeat; z-index: 1; } 
/* 20230811 end */

.modal-contents { word-break: keep-all; } 
.modal-contents + .modal-bg { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; filter: blur(32px); background-position: 50% 50%; background-size: cover; transform: scale(1.2); /* will-change: transform; */}
.modal-contents + .modal-bg::before { content: ""; position: fixed; width: 100%; height: 100%; background-color: #000; opacity: .4; } 
[data-modal-block=road1].modal-block,
[data-ref=road1] .modal-bg { background-image: url(../images/road1.png); } 
[data-modal-block=road2].modal-block,
[data-ref=road2] .modal-bg { background-image: url(../images/road2.png); } 
[data-modal-block=road3].modal-block,
[data-ref=road3] .modal-bg { background-image: url(../images/road3.png); } 
[data-modal-block=road4].modal-block,
[data-ref=road4] .modal-bg { background-image: url(../images/road4.png); } 
[data-modal-block=road5].modal-block,
[data-ref=road5] .modal-bg { background-image: url(../images/road5.png); } 
[data-modal-block=welfaer1].modal-block,
[data-ref=welfaer1] .modal-bg { background-image: url(../images/welfaer1.png); } 
[data-modal-block=welfaer2].modal-block,
[data-ref=welfaer2] .modal-bg { background-image: url(../images/welfaer2.png); } 
[data-modal-block=company1].modal-block,
[data-ref=company1] .modal-bg { background-image: url(../images/company1.png); } 
[data-modal-block=company2].modal-block,
[data-ref=company2] .modal-bg { background-image: url(../images/company2.png); } 

.modal-block-wrap .modal-block .modal-block-headcopy,
.link-block-wrap .link-block .link-block-headcopy { font-size: 22px; line-height: 28px; font-weight: 500; position: absolute; left: 24px; right: 24px; top: 24px; color: #fff; } 

.icon-under-arrow { position: absolute;left: 0; right: 0; top: 88%; width: 44px; height: 44px; padding: 8px; margin: auto; z-index: 5; background-image: url(../images/icon-under-arrow.png); background-size: 24px auto; background-repeat: no-repeat; background-position: 50% 50%; animation: 2s ease 0s 3; /* 20240423 수정 */
    animation-fill-mode : forwards;animation-name: underarrow; } 
.button-cta { position: absolute; left: 24px; right: 24px; bottom: 20px; margin: auto; z-index: 2; } 

.modal-item.full .modal-pannel .modal-header,
[data-ref=modalEmployContent].modal-item .modal-pannel .modal-header { background-color: transparent; box-shadow: none; } 
[data-ref=modalEmployContent].modal-item.full .modal-pannel .modal-action.no-boundary { background-color: #fff; padding: 16px; box-shadow: 0 -4px 12px 0px rgb(0, 0, 0, .1); } 
.modal-item .modal-pannel .modal-action .button-item { background-color: #121c72; color: #fff; border: 0; border-radius: 12px; } 
[data-ref=modalEmployContent].modal-item .modal-pannel .modal-action .button-item { background-color: #0aa622; color: #fff; border: 0; border-radius: 12px; } 
.easy-terms-wrap { position: relative; padding: 10px; background-color: #f4f6fa; border-radius: 16px; } 
.easy-terms-wrap .check-item .icon-holder { width: 18px; height: 18px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); border: 0; } 
.easy-terms-wrap .check-item .icon-holder::before { width: 18px; height: 18px; border: 0; } 
.easy-terms-wrap .check-item input[type="checkbox"] ~ .labelling .icon-holder span,
.easy-terms-wrap .check-item input[type="checkbox"] ~ .icon-holder span { width: 18px; height: 18px; background-color: #c1c4d6; border-radius: 18px; } 
.easy-terms-wrap .check-item input[type="checkbox"]:checked ~ .labelling .icon-holder span,
.easy-terms-wrap .check-item input[type="checkbox"]:checked ~ .icon-holder span { width: 18px; height: 18px; background-color: #29da8a; border-radius: 18px; } 
.easy-terms-wrap .check-item input[type="checkbox"] ~ .labelling .icon-holder span::after,
.easy-terms-wrap .check-item input[type="checkbox"] ~ .icon-holder span::after { content: ""; position: absolute; left: 50%; top: 50%; display: inline-block; width: 6px; height: 4px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-50%, -70%) rotate(135deg); } 
.easy-terms-wrap .icon-arrow { position: absolute; right: 12px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); } 
.easy-terms-wrap .icon-arrow::after { content: ""; position: absolute; right: 50%; top: 50%; display: inline-block; padding: 4px; margin-top: -2px; border: solid #8f95b2; border-width: 0 2px 2px 0; transform: rotate(-45deg) translate(50%); -webkit-transform: rotate(-45deg) translate(50%); } 
.easy-terms-wrap .labelling strong { display: block; position: relative; font-size: 14px; } 
.easy-terms-wrap .labelling .label-check + p { padding-left: 44px; line-height: 132%; } 
.easy-terms-wrap .labelling strong .label-check { position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: 100%; } 

.list-decimal { margin-left: 16px; list-style-type: decimal; } 
.list-decimal li { position: relative; padding-left: 4px; list-style-type: decimal; } 
.list-decimal li::marker { font-size: 90%; } 

.section-button-join { position: relative; display: block;}
.section-button-join .button-join { position: fixed; left: 20px; right: 20px; bottom: 20px; display: block; transition: .3s; opacity: 0; z-index: -1; } 
.section-button-join .button-join.active { opacity: 1; z-index: 1; background-color: #0aa622; box-shadow: 0 0 7px rgba(0, 0, 0, .4); transition: .3s; } 
.section-button-join .button-join.inner { position: fixed; opacity: 1; z-index: 1; background-color: #0aa622; transition: .3s; } 

.section-relative-link { display: flex; text-align: center; } 
.section-relative-link a { position: relative; flex: 1; font-size: 13px; color: #474d66; line-height: 40px; } 
.section-relative-link a:first-child::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -8px; width: 1px; height: 16px; background-color: #474d66; } 

.footer { display: block; padding: 86px 24px; background-image: url(../images/common/footer-logo.png); background-size: auto 22px; background-repeat: no-repeat; background-position: 24px 40px; } 
.footer .address-list { padding: 0}
.footer .address-list li { font-size: 13px; color: #8f95b2; line-height: 20px; } 

.section-colleague { padding: 48px 20px 42px; /* background-color:#f4f6fa; */}
.section-colleague .colleague-list > .item { margin-top: 12px; } 
.section-colleague .colleague-container { padding: 0 24px; border-radius: 16px; background-color: #fff; box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, .1); } 
.section-colleague .colleague-container .info { position: relative; padding: 16px 0; } 
.section-colleague .info .label-list { position: relative; padding-left: 44px; background-position: left 50%; background-repeat: no-repeat; background-size: 32px 44px; } 
.section-colleague .info .label-list.digital { background-image: url(../images/colleague-digital.png); } 
.section-colleague .info .label-list.develop { background-image: url(../images/colleague-develop.png); } 
.section-colleague .info .label-list.legal { background-image: url(../images/colleague-legal.png); } 
.section-colleague .info .label-list.actuar { background-image: url(../images/colleague-actuar.png); } 
.section-colleague .info .label-list.asset { background-image: url(../images/colleague-asset.png); } 
.section-colleague .info .label-list.sales { background-image: url(../images/colleague-sales.png); } 
.section-colleague .info .label-list.affairs { background-image: url(../images/colleague-affairs.png); } 
.section-colleague .colleague-button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } 
.section-colleague .colleague-button .icon-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; display: inline-block; padding: 3px; /* margin-left: -4px; */
 border: solid #101840; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-50%, -50%); -webkit-transform: rotate(45deg) translate(-50%, -50%); transition: .3s; transform-origin: 30% 0%; } 
.section-colleague .colleague-container.active .colleague-button .icon-arrow::after { transform: rotate(225deg) translate(-50%, -50%); -webkit-transform: rotate(225deg) translate(-50%, -50%); margin-left: -4px; } 
.section-colleague .copyright { display: none; padding-bottom: 24px; word-break: keep-all; } 
.section-colleague .colleague-container.active .copyright { display: block; } 
.section-process { background-color: #2166d4; } 
.section-process img { display: block; max-width: 375px; font-size: 0; } 
.section-history img { display: block; width: 100%; font-size: 0; } 
.list-propose { display: flex; justify-content: space-around; } 
.list-propose li { border: 1px solid #101840; line-height: 20px; border-radius: 20px; } 
.section-history { height: 675px; padding: 48px 20px 42px; /* background-image: url(../images/bg-history.png); */
 background-position: right bottom; background-size: auto 675px; background-repeat: no-repeat; background-color: #fafbff; /* color: #fff; */}
.section-history .list-history > li { position: relative; margin-top: 16px; } 
.section-history .list-history .copy { padding-left: 50px; font-size: 14px; font-weight: normal; line-height: 18px; } 
.section-history .list-history .date { position: absolute; left: 0; top: 0; color: #0aa622; font-size: 14px; line-height: 18px; } 

.modal-item .modal-pannel .modal-action ul,
.modal-item.full .modal-pannel .modal-action.no-boundary { background-color: transparent; } 

.txtarea-container { overflow-y: scroll; height: 120px; border: 1px solid #edeff5; background-color: #fafbff; padding: 12px 16px; } 
.agree-check { display: flex; justify-content: space-between; align-items: center; } 
.label-essential { color: #f43f60; } 
.input-job-wrap .input-list-column { display: block; } 
.input-job-wrap .input-list-column label { float: left; margin: 0 .9888% 0 0; width: 24.2%; } 

.input-edu-wrap .input-list-column label .label-txt,
.input-empoly-wrap .input-list-column label .label-txt,
.input-job-wrap .input-list-column label .label-txt { width: 100%; text-align: center; } 

.input-edu-wrap .input-list-column label:nth-child(4),
.input-empoly-wrap .input-list-column label:nth-child(4),
.input-job-wrap .input-list-column label:nth-child(4) { margin-right: 0; } 

.input-group.textarea-edu-wrap textarea,
.input-group.textarea-empoly-wrap textarea,
.input-group.textarea-etc-wrap textarea,
.input-group.textarea-job-wrap textarea { height: 120px; } 
.input-empoly-wrap .input-list-column label { margin-right: 4px; } 
.input-edu-wrap .input-list-column label { margin-right: 4px; } 

.modal-employ-content { display: none; } 

.section-history .list-credit { display: flex; margin-top: 24px; padding-top: 24px; justify-content: space-around; } 
.section-history .list-credit li { width: 144px; margin: 0 4px; text-align: center; } 
.section-history .list-credit li .img { display: block; text-align: center; } 
.section-history .list-credit li .img img { margin: auto; } 
.section-history .list-credit li .copy { display: block; margin-top: 12px; text-align: center; font-size: 13px; line-height: 18px; font-weight: normal; } 
.section-process { padding-top: 40px; background-color: #2166d4; color: #fff; } 
.section-process .process-title { font-size: 16px; font-weight: 700; height: 24px; line-height: 24px; } 
.section-process .list-process { display: flex; flex-wrap: wrap; } 
.section-process .list-process li { width: 50%; text-align: center; } 
.section-process .list-process li > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 210px; padding: 16px 0; } 
.section-process .list-process li > div > .title { text-align: center; line-height: 20px; font-size: 16px; font-weight: 700; } 
.section-process .list-process li > div > p { font-size: 12px; text-align: center; line-height: 1.4; font-weight: 400; } 
.section-process .list-process li .icon-dubble-arrow::before { content: ""; position: absolute; width: 16px; height: 16px; background-image: url(../images/icon-arrowRight.png); background-position: left top; background-repeat: no-repeat; background-size: 16px 16px; } 
.section-process .list-process li:nth-child(1) .icon-dubble-arrow::before { top: 50%; right: -28px; transform: translateY(-50%); } 
.section-process .list-process li:nth-child(2) .icon-dubble-arrow::before { bottom: -26px; right: 50%; transform: translateX(58%) rotate(90deg); } 
.section-process .list-process li:nth-child(3) .icon-dubble-arrow::before { top: 50%; left: -28px; transform: translateY(-50%) rotate(180deg); } 
.section-process .list-process li:nth-child(1) > div { margin-right: 20px; margin-bottom: 36px; } 
.section-process .list-process li:nth-child(2) > div { margin-left: 20px; margin-bottom: 36px; } 
.section-process .list-process li:nth-child(3) > div { margin-left: 20px; } 
.section-process .list-process li:nth-child(4) > div { margin-right: 20px; } 
.section-process .list-process li:nth-child(3) { order: 4; } 
.section-process .list-process li:nth-child(4) { order: 3; } 
.section-process .list-process .txt-underline { text-decoration: underline; } 

.link-process { display: flex; padding: 8px 16px; border-radius: 8px; background-color: #4dac26; color: #fff; } 
.link-process .process-contents { display: flex; column-gap: 8px; line-height: 20px; font-size: 14px; } 
.link-process .process-contents p { margin-left: 8px; } 
.link-process .copy { position: relative; } 
.link-process .copy::before { content: ""; position: absolute; left: 0; top: 4px; width: 1px; height: 10px; background-color: #fff; } 
.list-credit::after { display: none; } 

/* 20230811 modal-youtube start */
[data-ref=modaleYoutube].modal-youtube .modal-pannel,
[data-ref=modaleYoutube].modal-youtube .modal-pannel .modal-action { background-color: transparent; border: 0; box-shadow: none; } 
[data-ref=modaleYoutube].modal-youtube .button-youtube { background-color: #121c72; color: #fff; border: 0; border-radius: 12px; } 

.modal-youtube { display: table; table-layout: fixed;; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1200; pointer-events: none; opacity: 1; } 
.modal-youtube.on { pointer-events: all; opacity: 1; } 
.modal-youtube .dim { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .6); transition: all 0.3s; opacity: 0; } 
.modal-youtube.on .dim { opacity: 1; } 
.modal-youtube.on .dim.white { background-color: rgba(255, 255, 255, .9); } 
.modal-youtube .middler { display: table-cell; width: 100%; height: 100%; position: relative; vertical-align: middle; pointer-events: none; padding: 16px; } 
.modal-youtube .modal-pannel { width: 100%; height: auto; max-height: calc(100vh - 40px); overflow: hidden; background-color: rgb(255, 255, 255); margin: 0 auto; position: relative; border-radius: 4px; pointer-events: none; transition: all .4s; transform: translateY(80px) translateZ(0); opacity: 0; border: 1px solid rgb(217, 219, 220); box-shadow: 0 8px 16px rgba(0, 0, 0, .2); } 
.modal-youtube.on .modal-pannel { opacity: 1; pointer-events: all; transform: translateY(0) translateZ(0); } 
.modal-youtube .modal-pannel .modal-header { height: 48px; line-height: 48px; background-color: rgb(249, 249, 250); position: absolute; top: 0; left: 0; right: 0; box-shadow: 0 0 0 1px rgb(217, 219, 220); z-index: 210; padding-right: 48px; font-size: 0; } 
.modal-youtube.drawer .middler { vertical-align: bottom; pointer-events: none; padding: 0; } 
.modal-youtube.drawer .modal-pannel {border: none; border-radius: 0; } 
.modal-youtube.full .modal-pannel { border: none; } 
.modal-youtube.full .modal-pannel .modal-header { background-color: rgb(255, 255, 255); } 
.modal-youtube .modal-pannel .modal-header .modal-headcopy { font-size: 18px; padding-left: 20px; white-space: nowrap; } 
.modal-youtube .modal-pannel .button-popup-close { background: transparent; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } 
.modal-youtube .modal-pannel .modal-action { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; padding: 24px; z-index: 1; background-color: #fff; } 
.modal-youtube.full .modal-pannel .modal-action { height: auto; padding: 24px; padding-bottom: calc(24px + constant(safe-area-inset-bottom)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } 
.modal-youtube.full .modal-pannel .modal-header + .modal-action + .modal-body { padding-bottom: calc(10px + 10px + 40px + constant(safe-area-inset-bottom)); padding-bottom: calc(10px + 10px + 40px + env(safe-area-inset-bottom)); } 
.modal-youtube.full .modal-pannel .modal-action::after { content: ""; display: table; clear: both; } 
.modal-youtube.full .modal-pannel .modal-action.no-boundary { background-color: rgb(255, 255, 255); box-shadow: none; } 
.modal-youtube .modal-pannel .modal-body { width: 100%; height: auto; overflow: hidden; position: relative; max-height: calc(100vh - 40px); } 
.modal-youtube .modal-pannel .modal-body .modal-scroller { width: 100%; height: auto; overflow: auto; overflow-x: hidden; position: relative; max-height: calc(100vh - 40px); } 
.modal-youtube .modal-pannel .modal-header + .modal-body { padding-top: 48px; } 
.modal-youtube .modal-pannel .modal-action + .modal-body { padding-bottom: 60px; } 
.modal-youtube .modal-pannel .modal-header + .modal-action + .modal-body { padding-top: 48px; padding-bottom: 60px; } 
.modal-youtube .modal-pannel .modal-header + .modal-body .modal-scroller { max-height: calc(100vh - 40px - 48px); } 
.modal-youtube .modal-pannel .modal-action + .modal-body .modal-scroller { max-height: calc(100vh - 40px - 60px); } 
.modal-youtube .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller { max-height: calc(100vh - 40px - 108px); } 

body.os-ios .modal-youtube .modal-pannel { max-height: calc(var(--vh, 1vh) * 100 - 40px); } 
body.os-ios .modal-youtube .modal-pannel .modal-body { max-height: calc(var(--vh, 1vh) * 100 - 40px); } 
body.os-aos .modal-youtube .modal-pannel .modal-body { max-height: calc(var(--vh, 1vh) * 100 - 40px); } 
body.os-ios .modal-youtube .modal-pannel .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px); } 
body.os-aos .modal-youtube .modal-pannel .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px); } 
body.os-ios .modal-youtube .modal-pannel .modal-header + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 48px); } 
body.os-aos .modal-youtube .modal-pannel .modal-header + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 48px); } 
body.os-ios .modal-youtube .modal-pannel .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 60px); } 
body.os-aos .modal-youtube .modal-pannel .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 60px); } 
body.os-ios .modal-youtube .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 108px); } 
body.os-aos .modal-youtube .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 40px - 108px); } 
body.os-ios .modal-youtube.full .modal-pannel .modal-header + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 48px); } 
body.os-aos .modal-youtube.full .modal-pannel .modal-header + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 48px); } 
body.os-ios .modal-youtube.full .modal-pannel .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 60px); } 
body.os-aos .modal-youtube.full .modal-pannel .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 60px); } 
body.os-ios .modal-youtube.full .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 108px); } 
body.os-aos .modal-youtube.full .modal-pannel .modal-header + .modal-action + .modal-body .modal-scroller { max-height: calc(var(--vh, 1vh) * 100 - 108px); } 

.modal-youtube .modal-drawer { width: 100%;background-color: rgba(255, 255, 255, .9); position: absolute; top: 0; left: 0; z-index: 210; } 
.modal-block-wrap .modal-youtube-trigger { overflow: hidden; border-radius: 8px; background-color: #000; } 
.modal-block-wrap .modal-youtube-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0)100%)}
.modal-block-wrap .modal-youtube-trigger.company-story { background-image: url(../images/thumb/zQ_zICKwN7k_large.jpg); background-size: contain; background-repeat: no-repeat; background-position: 0 0; padding-top: 56.5%; } 
.modal-block-wrap .modal-youtube-trigger.ceo-story { background-image: url(../images/thumb/YTiRqXgFtG8_large.jpg); background-size: contain; background-repeat: no-repeat; background-position: 0 0; padding-top: 56.5%; } 
.modal-block-wrap .modal-youtube-trigger.mimiminu-story { background-image: url(../images/thumb/ttfg0CQgfbI_large.jpg); background-size: contain; background-repeat: no-repeat; background-position: 0 0; padding-top: 56.5%; } 
.modal-block-wrap .modal-youtube-trigger.mimiminu-story .copyright,
.modal-block-wrap .modal-youtube-trigger.company-story .copyright,
.modal-block-wrap .modal-youtube-trigger.ceo-story .copyright { margin-right: 16px; bottom: 12px; left: 16px; } 

.link-block-wrap { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; } 
.link-block-wrap .link-block { position: relative; border-radius: 12px; background-image: url(../images/img-kyobocity.png); background-repeat: no-repeat; background-size: cover; padding-top: 80%; } 
.link-block-wrap .link-block .link-block-headcopy { font-size: 22px; line-height: 28px; font-weight: 500; position: absolute; left: 24px; right: 24px; top: 24px; color: #fff; } 

.link-block.kyobocity { background-image: url(../images/img-kyobocity.png); } 
.link-block.insidekyobo { background-image: url(../images/img-inside.png); } 
.link-block.kyoborecruit { background-image: url(../images/img-recruit.png); } 
.link-block.maintask { background-image: url(../images/welfaer1.png); } 
.link-block.welfare { background-image: url(../images/welfaer2.png); } 

.section-player { padding: 48px 20px 42px; background-color: #f4f6fa; } 
/* 20230811 modal-youtube end */

/*20230921 start*/
[data-ref=welcomeModal].modal-item .modal-pannel { border: 0; } 
[data-ref=welcomeModal].modal-item .modal-pannel .modal-action { padding: 20px; } 
/*20230921 end*/


/* -------------------[ s: subpage header - visual_wrap ]------------------- */
#visual_wrap{width:100%;}
#visual_wrap #visual{width:100%;margin:0 auto;padding:60px 20px 0;}
#visual_wrap .visual_text_content{width:100%;position:relative;}
#visual_wrap .page_title_wrap{height: 162px;transition:all 0.5s;height: 186px;}
#visual_wrap .page_title{font-size: 28px;line-height: normal;font-weight: 700;color: var(--primaru-blue); font-family: 'kyoboLife';margin-bottom: 12px; padding-top: 48px;transition:all 0.5s;}
#visual_wrap .page_info{font-size: 16px;line-height: 1.5;font-weight: 400;color: #333; font-family: 'pretendard';transition:all 0.5s;}
/* -------------------[ e: subpage header - visual_wrap ]------------------- */


/* -------------------[ s: tab ]------------------- */
.tab-area { margin-bottom: 20px; }
.tab-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px;}
.tab-wrapper > ul[role="tablist"] { display: flex; flex-wrap: nowrap; gap: 12px; white-space: nowrap; padding: 0; margin: 0; list-style: none; }
.tab-wrapper > ul[role="tablist"]::-webkit-scrollbar { display: none; }
.tab-wrapper > ul[role="tablist"] li { flex: 0 0 auto; }
.tab-wrapper > ul[role="tablist"] li .btn-tab { display: flex; justify-content: center; align-items: center; gap: 10px; border-radius: 24px; background-color: #ECEEF4; color: #8C98BA; font-family: 'Pretendard'; font-style: normal; font-weight: 500; line-height: 1.4; cursor: pointer; border:0; font-size: 16px; padding: 8px 16px;}
.tab-wrapper > ul[role="tablist"] li .btn-tab:focus{outline: none;}
.tab-wrapper > ul[role="tablist"] li:hover .btn-tab{background-color: #DFE2EC;}
.tab-wrapper > ul[role="tablist"] li.active .btn-tab { background-color: #DDE6FD; color: var(--primary-b800);}
/* -------------------[ e: tab ]------------------- */



/* -------------------[ s: life ]------------------- */
.contents-wrapper.story{position: relative; top: 0; padding: 0 20px 100px;}
.card-container{display: grid;grid-template-columns: 1fr;justify-content: space-between;column-gap: 20px;row-gap: 32px;}
.card { overflow: hidden; text-decoration: none; cursor: pointer;}
.card-img-container{border-radius: 12px; overflow: hidden; margin-bottom: 12px;}
.card-img { width: 100%; height: auto; display: block; transition: transform 0.3s; }

.card-txt{position: relative;}
.card-title,
.card-description { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.card-title {font-size: 18px; font-weight: 600; color: var(--grayscale-900);font-family: "kyoboLife"; line-height: 1.4; margin-bottom: 6px;-webkit-line-clamp: 2;}
.card-title-hidden{position: absolute; top: 0; left: 0; display: inline-block;white-space: normal; color: transparent;max-height: 52px;margin-bottom: 0;}
.card-title-hidden::after{display: block; content: ''; position: absolute; left: 0; bottom: 1px; width: 0; height: 1px; background-color: var(--grayscale-900); transition: width 0.3s ease;box-sizing: border-box; } 
.card-description {font-size: 14px; font-weight: 400; font-family: "pretendard"; line-height: 1.4; color: #858585;-webkit-line-clamp: 2;}
.card:hover .card-img{ transform: scale(1.1); }
.card:hover .card-title-hidden::after { width: 100%; }
/* -------------------[ e: life ]------------------- */




/* -------------------[ s: pop-modal ]------------------- */
.pop-modal .pop-layer-cont .inner{gap: 0;}
.pop-modal .pop-layer-inner{padding-bottom: 20px; width: calc(100% - 40px); height: auto;min-width: 303px;padding-bottom: 20px;border-radius: 24px;    box-shadow: 0px 4px 21px 1px rgb(0 0 0 / 15%);padding: 0 20px 32px;}
.pop-modal .pop-layer-cont{padding: 0;}
.pop-video .txt-container{margin-bottom: 24px;}
.pop-video .pop-layer-cont .cont{gap:0}
.pop-video .pop-layer-cont .tit{font-size: 20px; line-height: normal; font-weight: 600; font-family: "KyoboLife";margin-bottom: 8px;transition: font-size 0.5s;}
.pop-video .pop-layer-cont .sub-tit{font-size: 14px; line-height: 1.5; font-weight: 500; font-family: "Pretendard";transition: font-size 0.5s; color: #858585;}
.pop-video .video-container{position: relative;}
.pop-video .thumbnail{width: 100%; visibility: hidden;}
.pop-video .thumbnail > img{width: 100%;}
.pop-video .video-container iframe{position: absolute; top: 0; left: 0;height: calc(100% - 4px); width: calc(100% - 1px);}
.pop-video[data-shorts="true"] .thumbnail{display: none;}
.pop-video[data-shorts="true"] iframe{width: 180px; height: 320px; position: relative; left: 50%; transform: translateX(-50%);}
/* -------------------[ e: pop-modal ]------------------- */




/*  */
.job-interview-sections .section-job-interview{margin-top: 0;}
.contents-wrapper.telent{top: 0;}


/* animate */
@keyframes underarrow { 
    0% { opacity: 0; transform: translateY(0); } 
    50% { opacity: .8; transform: translateY(-50%); } 
    100% { opacity: 0; transform: translateY(0); } 
}
/* -------------------[ e: ~202401 ]------------------- */



/* -------------------[ s: animate ]------------------- */
@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}
   
@keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}

@-webkit-keyframes fadeOutDown { 
    0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0);}
    to { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0);} 
}
   
@keyframes fadeOutDown { 
    0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0);}
    to { opacity: 0; -webkit-transform: translate3d(0,10%,0); transform: translate3d(0,10%,0);} 
}

@-webkit-keyframes fadeOut { 
    0% { opacity: 1; }
    to { opacity: 0; } 
}
   
@keyframes fadeOut { 
    0% { opacity: 1; }
    to { opacity: 0;} 
}

@-webkit-keyframes flash {
    0%,50%,to { opacity: 1; } 
    25%,75% { opacity: 0; } 
}

@keyframes flash {
    0%,50%,to { opacity: 1; } 
    25%,75% { opacity: 0; } 
}

@-webkit-keyframes fadeInLeft { 
    0% { opacity: 0; -webkit-transform: translate3d(-10%,0,0); transform: translate3d(-10%,0,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}

@keyframes fadeInLeft { 
    0% { opacity: 0; -webkit-transform: translate3d(-10%,0,0); transform: translate3d(-10%,0,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}

@-webkit-keyframes fadeInRight { 
    0% { opacity: 0; -webkit-transform: translate3d(10%,0,0); transform: translate3d(10%,0,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}

@keyframes fadeInRight { 
    0% { opacity: 0; -webkit-transform: translate3d(10%,0,0); transform: translate3d(10%,0,0)}
    to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0)} 
}
/* -------------------[ e: animate ]------------------- */