body {word-break:keep-all;}

/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/company/KV_company_bg.jpg')}

#AFFILIATES .gu_title { font-size:52px; font-weight:700; color:#000; padding-bottom:77px; }
#AFFILIATES .gu_content { max-width:1368px; border-bottom:1px solid #CCC; padding-bottom:150px; margin-bottom:150px; }
#AFFILIATES .gu_content .inner { max-width:1125px; margin:0 auto; background:url('../../../img/company/value-system/graphic-subsidiary.svg') center top / 100% auto no-repeat; aspect-ratio: 1125/1486; }
#VALUE { padding-top:0; }

#value_system.container {margin-bottom:0;}
#value_system .gu_sub_title {margin-bottom:40px;}
#value_system .gu_sub_title + .gu_btn_area {text-align:center;}

#VALUE_SYSTEM .gu_grid .gu_diagram .circle:after {content: ''; position: absolute; border-top:2px solid #c8c8c8; border-right:2px solid #c8c8c8; width:8px;height:8px;right:-24px;top:50%; -webkit-transform:translateY(-50%) rotate(45deg); -moz-transform:translateY(-50%) rotate(45deg); -ms-transform:translateY(-50%) rotate(45deg); -o-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg);}
#VALUE_SYSTEM .gu_grid .gu_diagram .circle .circle_inner .gu_text {margin-top:5px;}
#VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle {width: 160px; height: 160px;}

#VALUE_SYSTEM .list {font-size:0;}
#VALUE_SYSTEM .list li {border-bottom:1px solid #e5e5e5; padding:20px 0;}
#VALUE_SYSTEM .list li:last-child {border-bottom:none;}
#VALUE_SYSTEM .list li * {display:inline-block; vertical-align:top;}
#VALUE_SYSTEM .list li > p {width:190px; position:relative; padding-left:20px; box-sizing: border-box;}
#VALUE_SYSTEM .list li > p:before {content:'1.'; display:inline-block; position:absolute; left:0; top:0%; }
#VALUE_SYSTEM .list li:nth-of-type(2) > p:before{content:'2.';}
#VALUE_SYSTEM .list li:nth-of-type(3) > p:before{content:'3.';}
#VALUE_SYSTEM .list li:nth-of-type(4) > p:before{content:'4.';}
#VALUE_SYSTEM .list li:nth-of-type(5) > p:before{content:'5.';}

#VALUE_SYSTEM .list li div {width:calc(100% - 200px); margin-left:10px;}
#VALUE_SYSTEM .list li div a {color:#188aa4}
#VALUE_SYSTEM .list li div span {position:relative; display:block; padding-left:12px;}
#VALUE_SYSTEM .list li div span:before {content:'•'; position:absolute;left:0;top:0;}

#BANNER {position: relative; background: url(../../../img/career/apply/banner_career.jpg) no-repeat 70% 50% / cover; min-height: 340px; margin-top:140px;}
#BANNER .inner {max-width:960px;margin:0 auto; padding-top:86px;}
#BANNER .inner img{width:360px;}
#BANNER .inner .gu_btn_area {margin-top:40px;}
#BANNER .gu_btn_area .gu_btn{border:none;}

#value_system_bottom {margin-bottom:140px;}

.mission_wrap { display: flex; align-items: center; margin: 0 0 111px auto; }
.mission_wrap .left { width: 44%; height: 360px; background: #F5F5F5 url('../../../../img/company/value-system/com0106_img1.png') center center no-repeat; vertical-align: middle; font-size: 0; }
.mission_wrap .right { width: 40%; padding: 0 10px 0 57px; vertical-align: middle; }
.mission_wrap .value_tit { margin-bottom: 18px; }
.mission_wrap p { font-size: 24px; font-weight: 700; line-height: 1.4; color: #014099; word-break: keep-all; line-height:1.4; letter-spacing: -0.6px; }
.value_tit { margin-bottom: 55px; font-size: 32px; font-weight: 700; color: #222; line-height:1.4; letter-spacing: -0.8px; }
.vision_wrap { margin-bottom: 110px; }
.vision_wrap .vision_group { display:flex; justify-content:space-between; align-items:flex-start; margin: 0; padding: 0; list-style: none; text-align: center; margin-top:56px; }
.vision_wrap .vision_group .list_box { position: relative; max-width: 320px; padding:0 10px; }
.vision_wrap .vision_group .img { position: relative; z-index: 1; width: 240px; height: auto; aspect-ratio:1/1; margin: 0 auto 32px; }
.vision_wrap .vision_group .typo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.4; letter-spacing: -0.5px; }
.vision_wrap .vision_group p { font-size:16px; font-weight:400; line-height: 1.75; word-break: keep-all; letter-spacing:-0.4px; color:#222; }
.vision_wrap .vision_group .box1 .img { background: url("../../../../img/company/value-system/com0106_img2.png") bottom center no-repeat; } 
.vision_wrap .vision_group .box2 .img { background: url("../../../../img/company/value-system/com0106_img3.png") bottom center no-repeat; } 
.vision_wrap .vision_group .box3 .img { background: url("../../../../img/company/value-system/com0106_img4.png") bottom center no-repeat; } 
.value_item_wrap .item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 45px 47px; box-sizing: border-box; border-top: 1px solid #DEDEDE; line-height: 1.5; }
.value_item_wrap .item:last-of-type { border-bottom: 1px solid #DEDEDE; }
.value_item_wrap .item img { width: 85px; margin-right: 48px; }
.value_item_wrap .item .tit { width: 175px; margin-right: 36px; color: #014099; font-weight: 700; font-size: 24px; line-height: 1.4; letter-spacing:-0.4px; }
.value_item_wrap .item .desc { width: calc(100% - 363px); font-size:16px; font-weight:400; line-height:1.75; color:#222; letter-spacing:-0.4px; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #value_system .gu_sub_title {margin-bottom:30px;}

    #VALUE_SYSTEM .gu_grid .gu_diagram {margin-bottom:30px;}
    #VALUE_SYSTEM .gu_grid .gu_diagram .circle:after {width:6px;height:6px;}
    #VALUE_SYSTEM .gu_grid.career .gu_diagram .circle {width:117px; height:117px; margin-right:16px;}
    #VALUE_SYSTEM .gu_grid.career .gu_diagram .circle:after {right:-12px;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle {width:136px; height:136px; margin-right:36px;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle:after {right:-21px;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle .circle_inner {width:80%;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle:last-child .circle_inner {width:100%;}
    #VALUE_SYSTEM .gu_diagram .circle .circle_inner p {font-size: 16px;}
    #VALUE_SYSTEM .gu_content .gu_text {font-size: 13px; }
    #VALUE_SYSTEM .list li {border:none;}
    #VALUE_SYSTEM .list li > p {display:block; width:100%; margin-bottom:10px;}
    #VALUE_SYSTEM .list li div {width:100%;}
    #VALUE_SYSTEM .list li div p + span {margin-top:5px;}

    #BANNER {min-height: 170px;margin-top:70px;}
    #BANNER .inner {padding:36px 50px 0;}
    #BANNER .inner img {width:180px; height:36px;}
    #BANNER .inner .gu_btn_area {margin-top:20px;}
    #BANNER .inner .gu_btn_area .gu_btn.btn_white {border-color:#fff;}
    
    #value_system_bottom {margin-bottom:70px;}
    .vision_wrap .vision_group .list_box::before {display: none;}
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #AFFILIATES .gu_title { display:none; }
    #AFFILIATES .gu_content { padding: 0 8.5% 70px; margin-bottom:70px;}
    #AFFILIATES .gu_content .inner { background-image:url('../../../img/company/value-system/graphic-subsidiary_mo.svg'); aspect-ratio: 274/1160; }
    .gu_content h2.gu_title {padding-bottom: 60px;}
    #VALUE_SYSTEM .gu_grid .gu_diagram {margin: 50px auto 30px; max-width: 306px !important;}
    #VALUE_SYSTEM .gu_grid.career .gu_diagram .circle:nth-of-type(2n):after {display:none;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle:nth-of-type(2n):after {display:none;}
    #VALUE_SYSTEM .gu_diagram .circle:nth-child(odd) {margin-right: 36px !important;}
    #VALUE_SYSTEM .gu_grid.career .gu_diagram .circle:after {right: -24px;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle .circle_inner {width:100%;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle .gu_text {font-size: 11px; }

    #BANNER .inner {padding:50px 25px;}
    
    .mission_wrap .left { width: 100%; background-size: 74px; height: 230px; }
	.mission_wrap .right { width: 100%; padding: 30px 5px 0 5px; }
	.mission_wrap { display: block; margin-bottom: 85px; }
	.value_tit { font-size: 22px; text-align: center; }
	.mission_wrap p { font-size: 20px; text-align: center; }
    .vision_wrap .vision_group { flex-direction:column; align-items:center; }
	.vision_wrap .vision_group .list_box { width: 100%; margin: 0 0 45px 0; }
	.vision_wrap .vision_group .typo { font-size: 20px; font-weight: 400; }
	.vision_wrap .vision_group p { font-size: 16px; }
	.value_item_wrap .item { display: block; padding: 25px 0; text-align: center; }
	.value_item_wrap .item img { width: 65px; vertical-align: top; margin: 0; }
	.value_item_wrap .item .tit { margin: 15px 0; font-size: 20px; width: 100%; }
	.value_item_wrap .item .desc { width: 100%; font-size: 16px; }
	.vision_wrap .vision_group .list_box::before {display: none;}
    
}

@media all and (max-width: 346px) {
    #VALUE_SYSTEM .gu_grid .gu_diagram {max-width: 280px !important; }
    #VALUE_SYSTEM .gu_diagram .circle:nth-child(odd) {margin-right: 10px !important;}
    #VALUE_SYSTEM .gu_grid.career .gu_diagram .circle:after {right: -9px;}
    #VALUE_SYSTEM .gu_grid.newcomer .gu_diagram .circle:after {right: -9px;}
}