/* 20230103 수정 */
/** 회사소개 - 경영 비전 **/
.container.vision {padding-bottom: 0;}
.vision .f32 {text-align: center; margin-bottom: 80px; font-weight: 700;}
.vision .f36 {font-size: 36px; line-height: 46px; font-weight: 700;}
.vision .sec3 {background: url('../images/vision_top_bg.png') no-repeat center / cover; height: 500px; display: flex; justify-content: center; align-items: center; background-attachment: fixed;}
.vision .sec3 .top_txt .logo {justify-content: center;}
.vision .sec3 .top_txt .logo img {max-width: 198px;}
.vision .sec3 .top_txt .f36 {color:#fff; margin-top: 30px; text-align: center;} 
.vision .sec3 .top_txt .f36 span {display: block;}
.vision .sec4 .contents_wrapper {max-width: 1438px; padding: 120px 0;}
.vision .sec4 .vision_info_wrap {position: relative;}
.vision .sec4 .vision_info_wrap .line {position: absolute; top: 0; left: 0;}
.vision .sec4 .vision_info_wrap .line img {max-width: 1406px;}
.vision .sec4 .vision_info_wrap .box_wrap {padding: 25px 3px; display: flex;}
.vision .sec4 .vision_info_wrap .box_wrap .box {width: 300px; height: 300px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 25px;}
.vision .sec4 .vision_info_wrap .box_wrap .box .inner {width: 270px; height: 270px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; flex-flow: column; z-index: 1;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box1 {background: #e4f3f6;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box1 .inner {background: #7ac4d1;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box2 {background: #dcf3f3;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box2 .inner {background: #52c3c3;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box3 {background: #d9e4f1;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box3 .inner {background: #4179b9;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box4 {background: #d8dde3;}
.vision .sec4 .vision_info_wrap .box_wrap .box.box4 .inner {background: #3e5575;}
.vision .sec4 .vision_info_wrap .box_wrap .box .f28 {color:#fff; font-weight: 700; margin-bottom: 14px; letter-spacing: 0;}
.vision .sec4 .vision_info_wrap .box_wrap .box .f16 {color:#fff; line-height: 20px;}
.vision .sec4 .vision_info_wrap .box_wrap .box .f16 span {display: block;}
.vision .sec5 {background: #f9f9f9; padding: 120px 0 40px;}
.vision .vision_swiper .vision_slide {display: flex; justify-content: center; background: #f9f9f9;}
.vision .vision_swiper .vision_slide .left {position: relative; width: 53%; max-width: 730px; margin-bottom: 135px;}
.vision .vision_swiper .vision_slide .left .product {position: absolute; right: -160px; bottom: -135px;}
.vision .vision_swiper .vision_slide .left .product img {max-width: 500px;}
.vision .vision_swiper .vision_slide .right {width: 47%; padding-left: 160px;}
.vision .vision_swiper .vision_slide .right .txt {margin-top: 60px;}
.vision .vision_swiper .vision_slide .right .txt .f20 {color:#222; font-weight: 700;}
.vision .vision_swiper .vision_slide .right .txt .f36 {margin: 45px 0;}
.vision .vision_swiper .vision_slide .right .txt .f36 span {display: block;}
.vision .vision_swiper .vision_slide .right .txt .f18 {color:#666;}
.vision .vision_swiper .swiper-pagination {position: static; width: auto; text-align: left; display: flex;}
.vision .vision_swiper .swiper-pagination .swiper-pagination-bullet {width: 66px; height: 66px; border-radius: 50%; background: #ccc; border: 5px solid #f0f0f0; display: flex; justify-content: center; align-items: center; opacity: 1; color:#fff; font-weight: 700; letter-spacing: 0; margin: 0 5px; font-size: 18px;}
.vision .vision_swiper .swiper-pagination .swiper-pagination-bullet:first-child {margin-left: 0;}
.vision .vision_swiper .swiper-pagination .swiper-pagination-bullet:last-child {margin-right: 0;}
.vision .vision_swiper .swiper-pagination .swiper-pagination-bullet-active {background: #a39d97; border: 5px solid #e8e5e2;}


/** 기술 - DESIGN & ENGINEERING **/
.design .arrow2 {width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 50%; margin: 40px auto; box-shadow: 0px 4px 14px rgb(0 0 0 / 7%);}
.design .arrow2 .image100 {}
.design .arrow2 .image100 img {max-width: 24px;}
.design .design_box_wrap {display: flex; background: #f5f5f5; padding: 50px;}
.design .design_box_wrap.box2, .design .design_box_wrap.box3 {display: block;}
.design .design_box_wrap .inner {display: flex; justify-content: center;}
.design .design_box_wrap .design_box {margin: 0 10px; position: relative;}
.design .design_box_wrap .design_box:first-child {margin-left: 0;}
.design .design_box_wrap .design_box:last-child {margin-right: 0;}
.design .design_box_wrap .design_box .basic .image100 {}
.design .design_box_wrap .design_box .basic .image100 img {max-width: 420px;}
.design .design_box_wrap .design_box .f20 {color:#fff; font-weight: 700;}
.design .design_box_wrap .design_box .txt {padding: 0 40px; display: flex; align-items: flex-start; justify-content: center; flex-flow: column;}
.design .design_box_wrap.box1 .design_box .txt {background: linear-gradient(to right, #2e5d70, #49798d);}
.design .design_box_wrap.box2 .design_box .txt {background: linear-gradient(to right, #32566f, #437293);}
.design .design_box_wrap.box3 .design_box .txt {background: linear-gradient(to right, #314b70, #20385b);}
.design .design_box_wrap .design_box .basic .txt {height: 80px;}
.design .design_box_wrap .design_box .hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s;}
.design .design_box_wrap .design_box:hover .hover {opacity: 1;     box-shadow: 0px 8px 20px rgb(0 0 0 / 6%); transition: all 0.3s;}
.design .design_box_wrap .design_box .hover .top {height: 46%;}
.design .design_box_wrap .design_box .hover .bottom {background: #fff; height: 55%;}
.design .design_box_wrap .design_box .hover .bottom .f18 {color:#666;}
.design .design_box_wrap .design_box .hover .top .f16 {color:#d2dbe2; line-height: 20px; margin-top: 8px;}
.design .design_box_wrap .design_box .hover .top .f16 span {display: block;}
.design .design_box_wrap .icon_box_wrap {display: flex; background: #ededed; padding: 30px;}
.design .design_box_wrap .icon_box_wrap .icon_box {background: #fff; margin: 0 10px; height: 200px; display: flex; flex-flow: column; justify-content: space-between; padding: 35px 40px 40px; box-shadow: 0px 6px 15px rgb(0 0 0 / 6%);}
.design .design_box_wrap.box2 .bt_line {display: flex; flex-flow: column; justify-content: center; margin: 20px 0;} 
.design .design_box_wrap.box2 .bt_line .image100 {justify-content: center;}
.design .design_box_wrap.box2 .bt_line .line1 img {max-width: 1280px;}
.design .design_box_wrap.box2 .bt_line .line2 img {max-width: 10px;}
.design .design_box_wrap.box2 .icon_box_wrap .icon_box {flex: 1 1 33.3%;}
.design .design_box_wrap.box3 .icon_box_wrap { justify-content: center;}
.design .design_box_wrap.box3 .icon_box_wrap .icon_box {flex: 1 1 50%; max-width: 400px;}
.design .design_box_wrap .icon_box_wrap .icon_box:first-child {margin-left: 0;}
.design .design_box_wrap .icon_box_wrap .icon_box:last-child {margin-right: 0;}
.design .design_box_wrap .icon_box_wrap .icon_box .icon {flex-shrink: 0;}
.design .design_box_wrap .icon_box_wrap .icon_box .icon img {max-width: 52px;}
.design .design_box_wrap .icon_box_wrap .icon_box .f20 {color:#2e2e2e;}
.design .design_box_wrap.box3 .bt_line {display: flex; flex-flow: column; justify-content: center; margin: 15px 0 20px;} 
.design .design_box_wrap.box3 .bt_line .image100 {justify-content: center;}
.design .design_box_wrap.box3 .bt_line .line1 img {max-width: 420px;}
.design .design_box_wrap.box3 .bt_line .line2 img {max-width: 10px;}
.design .design_box_wrap.box4 .design_box {display: flex; flex-flow: column; flex: 1 1 33.3%;}
.design .design_box_wrap.box4 .design_box:first-child {margin-left: 0;}
.design .design_box_wrap.box4 .design_box:last-child {margin-right: 0;}
.design .design_box_wrap.box4 .design_box .top {background: linear-gradient(to right, #97836f, #a69788); height: 80px; align-items:center;}
.design .design_box_wrap.box4 .design_box .bottom {background: #fff; height: 170px; display: flex; justify-content: center; align-items: center;}
.design .design_box_wrap.box4 .design_box .bottom .f20 {color:#2e2e2e; font-weight: 400;}
.design .sec6 {margin: 0;}
.design .sec7 {background: none;}
.design .sec7 .f32 {margin: 0;}
.design .sec7 .img_box_wrap {display: flex; margin-top: 50px; }
.design .sec7 .img_box_wrap .box {margin: 0 9px;}
.design .sec7 .img_box_wrap .box:first-child {margin-left: 0;}
.design .sec7 .img_box_wrap .box:last-child {margin-right: 0;}
.design .sec8 {background: #f9f9f9; padding: 90px 0 120px;}
.design .sec8 .f32 {text-align: center;}
.design .capability_swiper {padding: 20px 0; margin-top: 60px;}
.design .capability_slide {box-shadow: 4px 4px 24px 0px rgb(0 0 0 / 6%); padding: 15px; background: #fff;}
.design .capa_box .capa_logo {background: #fafafa; height: 155px; justify-content: center; align-items: center;}
.design .capa_box .capa_logo img {max-width: 310px; height: 65px; object-fit: contain;}
.design .capa_box .bt_text {display: flex; justify-content: space-between; align-items: center; padding: 25px 5px 10px 25px;}
.design .capa_box .bt_text .f20 {color:#aaa;text-align: left; font-weight: 600; line-height: 24px;}
.design .capa_box .bt_text .f20.cate {color:#666;}
.design .capa_box .bt_text .link {width: 50px; height: 50px; border: 1px solid #e8e8e8; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s;}
.design .capa_box .bt_text .link .icon {display: inline-block; background: url('../images/design_link_icon.png') no-repeat center / cover; width: 21px; height: 21px; transition: all 0.3s;}
.design .capa_box:hover .bt_text .link {background: #a39d97; border: 1px solid #a39d97; transition: all 0.3s;}
.design .capa_box:hover .bt_text .link .icon { background: url('../images/design_link_icon_w.png') no-repeat center / cover; transition: all 0.3s;}


/** 개인정보처리방침 **/
.sub_top_visual.sub_top_visual6 {background: url('../images/privacy_top_bg.jpg') no-repeat center / cover;}
.privacy .sec3 .f16 {color:#555; border-top: 2px solid #222; padding-top: 55px; font-weight: 500;}





/* 20230315 수정 */
/** ESG **/
.esg.container {overflow: initial;} 
.esg .sec3 {position: sticky; top: 80px; z-index: 1;}
.esg .tab {display: flex; justify-content: center; margin-bottom: 100px;}
.esg .tab li {width: 33.3%;}
.esg .tab li a {width: 100%; height: 75px; display: flex; justify-content: center; align-items: center; background: #fff; border: 1px solid #ddd; text-align: center;}
.esg .tab li a.f24 {font-weight: 700;}
.esg .tab li a.f24:hover {border: 1px solid #333; font-weight: 700;}
.esg .tab li a.f24.active {background: #333; border: 1px solid #333; color:#fff;}
.esg .tab li a.f24.active:hover {font-weight: 500;}
.esg .esg_title {text-align: center;}
.esg .esg_title .f32 {font-weight: 800;}
.esg .esg_title .f18 {margin-top: 30px; color:#666;}
.esg .esg_title .f18 span {display: block; font-weight: 700;}
.esg .f28 {text-align: center; color:#333;}
.esg .f28 span {display: block;}
.esg #environment .tb1 {margin-top: 50px; overflow-x: auto;}
.esg #environment .tb1 .f20 {color:#333; font-weight: 700; margin-bottom: 25px;}
.esg #environment .tb1 tbody td {text-align: right; padding: 0 20px;}
.esg #environment .tb1 tbody td.subt {text-align: center; font-weight: 800; background: #f9f9f9;}
.esg #environment .tb1 tbody .borderbt, .esg #environment .tb1 tbody .borderbt td {border-bottom: 1px solid #666;}
.esg #winwin {margin-top: 300px;}
.esg #winwin .winwin_row {padding: 190px 0 220px;}
.esg #winwin .row1 {background: #f8f8f8;}
.esg #winwin .row1 .esg_title {margin-bottom: 30px;}
.esg #winwin .row1 .box_wrap {display: flex; margin-top: 100px;}
.esg #winwin .row1 .box_wrap .box {margin: 0 20px; flex: 1 1 33.3%; display: flex; flex-flow: column; justify-content: space-between;}
.esg #winwin .row1 .box_wrap .box:nth-child(1) {margin-left: 0;}
.esg #winwin .row1 .box_wrap .box:nth-child(3) {margin-right: 0;}
.esg #winwin .row1 .box_wrap .box .f20 {color:#333; font-weight: 800;}
.esg #winwin .row1 .box_wrap .box .f18 {color:#666; font-weight: 400; margin: 20px 0 80px;}
.esg #winwin .row1 .box_wrap .box .img img {width: 100%;}
.esg #winwin .row2 .box_wrap {display: flex; flex-wrap: wrap; margin-top: 90px;} 
.esg #winwin .row2 .box_wrap .box {background: #f8f8f8; flex: 1 1 calc(50% - 15px); margin: 0 15px 30px; padding: 50px;}
.esg #winwin .row2 .box_wrap .box:nth-child(odd) {margin-left: 0;}
.esg #winwin .row2 .box_wrap .box:nth-child(even) {margin-right: 0;}
.esg #winwin .row2 .box_wrap .box:nth-last-child(-n+2) {margin-bottom: 0;}
.esg #winwin .row2 .box_wrap .box .txt {margin-top: 20px;} 
.esg #winwin .row2 .box_wrap .box .txt .f20 {color:#333; font-weight: 800; margin-bottom: 20px;} 
.esg #winwin .row2 .box_wrap .box .txt .f18 {color:#666; font-weight: 400;} 
.esg #winwin .row3 {background: #f8f8f8;}
.esg #winwin .row3 .box_wrap {display: flex; justify-content: space-between; margin-top: 80px;}
.esg #winwin .row3 .box_wrap .circle {width: 320px; height: 320px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-flow: column;}
.esg #winwin .row3 .box_wrap .circle .inner {width: 280px; height: 280px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-flow: column;}
.esg #winwin .row3 .box_wrap .circle.circle1 {background: #e2edf0;}
.esg #winwin .row3 .box_wrap .circle.circle1 .inner {background: #8bc2cf;}
.esg #winwin .row3 .box_wrap .circle.circle2 {background: #ddeded;}
.esg #winwin .row3 .box_wrap .circle.circle2 .inner {background: #71c1c2;}
.esg #winwin .row3 .box_wrap .circle.circle3 {background: #d6deea;}
.esg #winwin .row3 .box_wrap .circle.circle3 .inner {background: #4f78b4;}
.esg #winwin .row3 .box_wrap .circle.circle4 {background: #d4d7dd;}
.esg #winwin .row3 .box_wrap .circle.circle4 .inner {background: #435472;}
.esg #winwin .row3 .box_wrap .circle .f20 {color:#fff; margin-bottom: 20px; font-weight: 800;}
.esg #winwin .row3 .box_wrap .circle .f16 {color:#fff; text-align: center; line-height: 22px;}
.esg #winwin .row3 .box_wrap .circle .f16 span {display: block;}
.esg #ethics {margin-top: 200px;}
.esg .esg_acco_wrap {margin-top: 60px;}
.esg .esg_acco_wrap .acco_box {margin-bottom: 40px;}
.esg .esg_acco_wrap .acco_box .title_box {height: 100px; border: 1px solid #eee; border-left: 5px solid #ced3da; background: #f9f9f9; padding: 0 45px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 10px;}
.esg .esg_acco_wrap .acco_box .title_box .text .f20 {font-weight: 800; color:#333;}
.esg .esg_acco_wrap .acco_box .title_box .arrow span {display: inline-block; width: 11px;  height: 11px; transform: rotate(225deg); position: relative;}
.esg .esg_acco_wrap .acco_box .title_box .arrow span::after {content: ''; position: absolute; width: 100%; height: 100%; border: 2px solid #919599; border-right: 0; border-bottom: 0;}
.esg .esg_acco_wrap .acco_box .cont_box {padding: 55px 60px 60px; border: 1px solid #eee; background: #f9f9f9; border-bottom: 1px solid #e6e6e6; display: none;}
.esg .esg_acco_wrap .acco_box .cont_box .f18 {color:#666; font-weight: 700;}
.esg .esg_acco_wrap .acco_box .cont_box .main_t {margin-bottom: 30px;}
.esg .esg_acco_wrap .acco_box .cont_box .list_box {border: 1px solid #ddd; padding: 30px 35px; margin-bottom: 30px;}
.esg .esg_acco_wrap .acco_box .cont_box .list_box ul li {color:#666; padding-left: 15px; position: relative; font-weight: 400;}
.esg .esg_acco_wrap .acco_box .cont_box .list_box ul li::before {content: ''; width: 5px; height: 5px;background: #666; position: absolute; top: 10px; left: 0; border-radius: 50%;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence {margin-bottom: 30px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence:last-child {margin-bottom: 0;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .f20 {color:#666; font-weight: 700; margin-bottom: 6px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con {margin-left: 20px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .f18 {font-weight: 400;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .top_t {margin-bottom: 10px;} 
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .b_list li {display: flex;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .b_list li .num {font-weight: 900; width: 20px; height: 20px; background: #666; color:#fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-right: 10px; margin-top: 4px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence.brown .f20 {color:#7b6e61;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence.brown .con .b_list li .num {background: #7b6e61;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .b_list li {display: flex;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .b_list li .num {font-weight: 900; width: 20px; height: 20px; background: #666; color:#fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-right: 10px; margin-top: 4px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .s_list {margin-left: 32px;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .s_list .txt {color:#666; font-weight: 600;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .s_list li {display: flex; padding-left: 15px; position: relative; color:#666;}
.esg .esg_acco_wrap .acco_box .cont_box .sentence .con .s_list li::before {content: ''; width: 6px; height: 1px; background: #666; position: absolute; top: 12px; transform: translateY(-50%); left: 0; border-radius: 50%;}

.esg .esg_button{
	margin:25px 0px;
	text-align:center;
}

.esg .esg_button button{
	width:100%;
	max-width:200px;
	height:50px;
	background:#12458e;
	color:#fff;
}








@media (max-width: 1880px) {
    .vision .vision_swiper .vision_slide .right {padding-left: 100px;}
    .vision .vision_swiper .vision_slide .right .txt .f36 {margin: 30px 0;}
}


@media (max-width: 1700px) {
    .vision .f36 {font-size: 28px; line-height: 38px;}
    .esg #winwin {margin-top: 200px;}
    .esg #winwin .winwin_row {padding: 140px 0 160px;}
    .esg #winwin .row2 .box_wrap {margin-top: 70px;}
}


@media (max-width: 1440px) { 
    .design .design_box_wrap .design_box .basic .txt {height: 70px;}
    .design .design_box_wrap .design_box .txt {padding: 0 25px;}
    .design .design_box_wrap .design_box .hover .bottom .f18 {font-size: 16px; line-height: 24px;}
    .design .design_box_wrap.box4 .design_box .top {height: 70px;}
    .vision .f32 {margin-bottom: 50px;}
    .vision .sec3 {height: 440px;}
    .vision .sec4 .vision_info_wrap .box_wrap .box {width: 20vw; height: 20vw; margin: 0 2.2vw;}
    .vision .sec4 .vision_info_wrap .box_wrap .box .inner {width: 18vw; height: 18vw;}
    .vision .sec4 .vision_info_wrap .box_wrap {justify-content: center;}
    .vision .vision_swiper .vision_slide .right .txt {padding-right: 0; margin-top: 40px;}
    .vision .vision_swiper .vision_slide .right .txt .f36 span {display: inline;}
    .vision .vision_swiper .vision_slide .right .txt .f36 {margin: 20px 0;}
    .vision .vision_swiper .swiper-pagination .swiper-pagination-bullet {width: 50px; height: 50px; font-size: 16px; font-weight: 600; margin: 0 3px; border:3px solid #e8e5e2;}
    .vision .vision_swiper .vision_slide .left .product img {max-width: 400px;}

    .esg #winwin, .esg #ethics {margin-top: 160px;}
    .esg #winwin .row1 .box_wrap .box .f18 {margin: 14px 0 40px;}
    .esg #winwin .row1 .box_wrap {margin-top: 80px;}
    .esg #winwin .row3 .box_wrap .circle {width: 260px; height: 260px;}
    .esg #winwin .row3 .box_wrap .circle .inner {width: 230px; height: 230px;}
}


@media (max-width: 1200px) { 
    .design .design_box_wrap {padding: 30px;}
    .design .design_box_wrap .design_box {margin: 0 5px;}
    .design .arrow2 {width: 70px; height: 70px; margin: 30px auto;}
    .design .arrow2 .image100 img {max-width: 20px;}
    .design .design_box_wrap .icon_box_wrap {padding: 20px;}
    .design .design_box_wrap .icon_box_wrap .icon_box {padding: 30px 25px; height: 180px;}
    .design .design_box_wrap .design_box .txt {padding: 0 20px;}
    .design .design_box_wrap.box4 .design_box .bottom {height: 140px;}
    .design .design_box_wrap .design_box .hover .top .f16 {margin-top: 4px;}
    .design .capability_swiper {margin-top: 40px;}
    .vision .f36 {font-size: 24px; line-height: 34px;}
    .vision .sec3 {height: 380px;}
    .vision .sec4 .contents_wrapper {padding: 90px 0 100px;}
    .vision .vision_swiper .vision_slide {padding: 0 16px;}
    .vision .vision_swiper .vision_slide .left .product {right: -120px; bottom: -100px;}
    .vision .vision_swiper .vision_slide .right {padding-left: 60px;}
    .vision .sec5 {padding: 90px 0 0px;}

    .esg .tab {margin-bottom: 60px;}
    .esg .tab li a {height: 60px;}
    .esg .esg_acco_wrap .acco_box {margin-bottom: 20px;}
    .esg .esg_acco_wrap .acco_box .title_box {height: 70px; padding: 0 20px;}
    .esg .esg_acco_wrap .acco_box .cont_box {padding: 30px 20px 40px;}
    .esg .esg_acco_wrap .acco_box .cont_box .top {margin: 0;}
    .esg #winwin .winwin_row {padding: 100px 0 120px;}
    .esg #winwin .row2 .box_wrap, .esg #winwin .row3 .box_wrap {margin-top: 60px;}
    .esg #winwin .row2 .box_wrap .box {margin: 0 10px 20px; padding: 40px;}
    .esg #winwin .row3 .box_wrap .circle {width: 230px; height: 230px;}
    .esg #winwin .row3 .box_wrap .circle .inner {width: 200px; height: 200px;}
    .esg .esg_acco_wrap .acco_box .cont_box .list_box {padding: 24px 30px;}
}


@media (max-width: 1024px) { 
    .design .design_box_wrap .design_box .basic .txt {height: 60px;}
    .design .design_box_wrap .design_box .basic .image100 {height: 160px;}
    .design .design_box_wrap .design_box .basic .image100 img {object-fit: cover;}
    .design .design_box_wrap .design_box .hover .bottom .f18 {font-size: 14px; line-height: 20px;}
    .design .design_box_wrap.box3 .bt_line {margin: 0 0 20px;}
    .design .design_box_wrap.box3 .bt_line .line1 {display: none;}
    .design .design_box_wrap.box4 .design_box .top {height: 60px;}
    .design .sec7 .img_box_wrap {margin-top: 35px;}
    .design .sec7 .img_box_wrap .box {margin: 0 5px;}
    .design .design_box_wrap .icon_box_wrap .icon_box {height: 160px; padding: 20px 20px;}
    .design .capability_swiper {margin-top: 20px;}
    .vision .sec3 {height: 300px;}
    .vision .sec3 .top_txt .f36 {margin-top: 20px;}
    .vision .sec4 .vision_info_wrap .line {display: none;}
    .vision .sec4 .vision_info_wrap .box_wrap {justify-content: center; padding: 0; flex-flow: wrap;}
    .vision .sec4 .vision_info_wrap .box_wrap .box {margin: 0 5px 10px; width: 220px; max-width: 220px; height: 220px; flex: 0 1 calc(50% - 10px);}
    .vision .sec4 .vision_info_wrap .box_wrap .box .inner {width: 200px; height: 200px;}
    .vision .vision_swiper .swiper-pagination .swiper-pagination-bullet {font-size: 14px; width: 40px; height: 40px;}
    .vision .vision_swiper .vision_slide .left .product {right: -100px;}
    .vision .vision_swiper .vision_slide .left .product img {max-width: 300px;}
    .privacy .sec3 .f16 {padding-top: 40px;}

    .esg #winwin .row1 .box_wrap {margin-top: 60px;}
    .esg #winwin .row1 .box_wrap .box {margin: 0 10px;}
    .esg #winwin .row1 .box_wrap .box .f18 {margin: 10px 0 30px;}
    .esg #winwin .row2 .box_wrap, .esg #winwin .row3 .box_wrap {margin-top: 50px;}
    .esg #winwin .row3 .box_wrap .circle {width: 220px; height: 220px;}
    .esg #winwin .row3 .box_wrap .circle .inner {width: 200px; height: 200px;}
    .esg #winwin .row3 .box_wrap .circle .f20 {margin-bottom: 15px;}
    .esg .esg_acco_wrap .acco_box .cont_box .sentence .con .b_list li .num {width: 19px; height: 19px; margin-top: 2px; margin-right: 6px;}
}


@media (max-width: 959px) { 
    .vision .f36 {font-size: 20px; line-height: 28px;}
    .vision .vision_swiper .vision_slide .right .txt {margin-top: 25px;}
    .vision .vision_swiper .vision_slide .right .txt .f36 {margin: 14px 0;}

    .esg #winwin, .esg #ethics {margin-top: 120px;}
    .esg #winwin .row1 {margin-top: 40px;}
    .esg #winwin .winwin_row {padding: 90px 0 100px;}
    .esg .esg_title .f18 span {display: inline;}
    .esg #winwin .row3 .box_wrap {flex-wrap: wrap;}
    .esg #winwin .row3 .box_wrap .circle {flex: 1 1 calc(50% - 20px); margin: 10px; background: none !important; position: relative;}
    .esg #winwin .row3 .box_wrap .circle::before {content: ''; width: 220px; height: 220px; border-radius: 50%;  position: absolute;}
    .esg #winwin .row3 .box_wrap .circle.circle1::before {background: #e2edf0;}
    .esg #winwin .row3 .box_wrap .circle.circle2::before  {background: #ddeded;}
    .esg #winwin .row3 .box_wrap .circle.circle3::before  {background: #d6deea;}
    .esg #winwin .row3 .box_wrap .circle.circle4::before  {background: #d4d7dd;}
    .esg #winwin .row3 .box_wrap .circle .inner {z-index: 1;}
}


@media (max-width: 767px) {
    .design .design_box_wrap {padding: 15px;}
    .design .design_box_wrap .icon_box_wrap {padding: 12px;}
    .design .design_box_wrap .design_box .basic .image100 {height: 150px;}
    .design .design_box_wrap.box2 .inner {flex-flow: column; justify-content: center;}
    .design .design_box_wrap.box2 .design_box {margin: 0 auto 10px; width: 100%; max-width: 500px;}
    .design .design_box_wrap.box2 .design_box .basic .image100 img {max-width: 100%;}
    .design .design_box_wrap.box2 .bt_line {margin: 10px 0;}
    .design .design_box_wrap.box2 .bt_line .line1 img {width: 100%; max-width: 500px;}
    .design .design_box_wrap .icon_box_wrap .icon_box {padding: 20px 15px; margin: 0 5px;}
    .design .design_box_wrap .icon_box_wrap .icon_box .f20 {font-size: 16px; line-height: 24px;}
    .vision .f32 {margin-bottom: 40px; font-size: 24px;}
    .vision .sec3 {height: 240px;}
    .vision .sec3 .top_txt .f36 {margin-top: 12px;}
    .vision .vision_swiper .vision_slide {flex-flow: column;}
    .vision .vision_swiper .vision_slide .left, .vision .vision_swiper .vision_slide .right {width: 100%;}
    .vision .vision_swiper .vision_slide .left {margin-bottom: 40px;}
    .vision .vision_swiper .vision_slide .left .img {justify-content: center;}
    .vision .vision_swiper .vision_slide .left .img img {max-width: 450px;}
    .vision .vision_swiper .vision_slide .left .product {right: -50px;}
    .vision .vision_swiper .vision_slide .right {padding-left: 0;}
    .vision .vision_swiper .vision_slide .right .txt {margin-top: 20px;}
    .vision .vision_swiper .vision_slide .right .txt .f36 {margin: 12px 0 8px;}
    .vision .sec5 {padding: 80px 0 90px;}
    .vision .sec4 .contents_wrapper {padding: 80px 0 90px;}
    .privacy .sec3 .f16 {padding-top: 30px;}

    .esg .tab li a {height: 54px; font-size: 16px; line-height: 20px;}
    .esg .f28 span {display: inline;}
    .esg #winwin .row1 .box_wrap {margin-top: 50px;}
    .esg #winwin .row2 .box_wrap, .esg #winwin .row3 .box_wrap {margin-top: 40px;}
    .esg #winwin .row2 .box_wrap {flex-flow: column;}
    .esg #winwin .row2 .box_wrap .box, .esg #winwin .row2 .box_wrap .box:nth-last-child(-n+2) {padding: 30px; flex: 1 1 100%; margin: 0 0 10px;}
    .esg .esg_acco_wrap .acco_box .cont_box .list_box {padding: 20px 25px;}
    .esg .esg_acco_wrap .acco_box .cont_box .f18 {font-size: 16px;}
}


@media (max-width: 640px) {
    .design .design_box_wrap {flex-flow: column;}
    .design .design_box_wrap .design_box, .design .design_box_wrap .design_box:first-child, .design .design_box_wrap .design_box:last-child {margin: 0 auto 10px; width: 100%; max-width: 500px;}
    .design .design_box_wrap .design_box .basic .image100 img {max-width: 100%;}
    .design .design_box_wrap.box4  {flex-flow: initial;}
    .design .design_box_wrap.box4 .design_box {margin: 0 5px;}

    .esg #winwin, .esg #ethics {margin-top: 80px;}
    .esg #winwin .row1 {margin-top: 30px;}
    .esg #winwin .row1 .box_wrap {flex-flow: column;}
    .esg #winwin .row1 .box_wrap .box {margin: 0 0 50px;}
    .esg #winwin .row1 .box_wrap .box:last-child {margin: 0;}
    .esg #winwin .row1 .box_wrap .box .f18 {margin: 6px 0 16px;}
}


@media (max-width: 560px) {
    .design .design_box_wrap .icon_box_wrap {flex-flow: column;}
    .design .design_box_wrap .icon_box_wrap .icon_box {margin: 0 0 6px; flex-flow: initial; justify-content: flex-start; align-items: center;}
    .design .design_box_wrap .icon_box_wrap .icon_box .f20 {margin-left: 10px;}
    .design .design_box_wrap .icon_box_wrap .icon_box .icon img {max-width: 44px;}
    .design .design_box_wrap.box3 .icon_box_wrap .icon_box {flex: 1 1 100%; max-width: 100%;}
    .design .sec7 .img_box_wrap {flex-flow: column; justify-content: center;}
    .design .sec7 .img_box_wrap .box {margin: 0 0 8px; justify-content: center;}
    .design .sec7 .img_box_wrap .box img {max-width: 460px;}
    .vision .f32 {font-size: 22px; margin-bottom: 20px;}
    .vision .sec4 .vision_info_wrap .box_wrap .box {width: 42vw; height: 42vw; margin: 0 3px 6px; max-width: 42vw;}
    .vision .sec4 .vision_info_wrap .box_wrap .box:nth-child(odd) {margin-left: 0;}
    .vision .sec4 .vision_info_wrap .box_wrap .box:nth-child(even) {margin-right: 0;}
    .vision .sec4 .vision_info_wrap .box_wrap .box .inner {width: 38vw; height: 38vw; padding: 10px;}
    .vision .sec4 .vision_info_wrap .box_wrap .box .f16 span {display: inline;}

    .esg #winwin .row3 .box_wrap .circle {justify-content: center; width: 100%; margin: 15px 0;}
    .esg #winwin .row3 .box_wrap .circle::before {width: 240px; height: 240px;}
    .esg #winwin .row3 .box_wrap .circle .inner { width: 220px; height: 220px;}
    .esg #winwin .row3 .box_wrap .circle .f20 {margin-bottom: 10px;}
}


@media (max-width: 479px) {
    .design .arrow2 {width: 54px; height: 54px; margin: 16px auto;}
    .design .arrow2 .image100 img {max-width: 16px;}
    .design .design_box_wrap.box4 .design_box {margin: 0 3px;}
    .design .design_box_wrap.box4 .design_box .top {padding: 0 10px;}
    .design .design_box_wrap.box4 .design_box .bottom {height: 110px; padding: 10px;}
    .design .sec8 {padding-bottom: 100px;}
    .vision .sec4 .vision_info_wrap .box_wrap .box .f28 {font-size: 16px; line-height: 22px; margin-bottom: 4px;}
    .vision .vision_swiper .vision_slide .left .product {right: -30px; bottom: -70px;}
    .vision .vision_swiper .vision_slide .left .product img {max-width: 200px;}

    .esg #winwin .row1 .box_wrap .box {margin: 0 0 40px;}
    .esg #winwin .row3 .box_wrap {flex-flow: column; justify-content: center;}
}


@media (max-width: 374px) {
    .design .design_box_wrap.box4 {flex-flow: column;}
    .design .design_box_wrap.box4 .design_box {margin: 0 0 10px;}
    .design .design_box_wrap.box4 .design_box:last-child {margin: 0;}
}