:root {
  --radius01: 10px;
}
#sub .sub_visual02 {padding-top: 250px;text-align: center}
#sub .vis_title strong{color: #000000;font-size: 150px;text-align: center;    font-family: "trumpgothicpro", sans-serif;}
#sub .sub_visual02 button{display: none}
#sub .sub_visual02 div{width: 855px;margin: 0 auto;}
#sub .sub_visual02 ul.loc01{display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;margin-top: 25px;}
#sub .sub_visual02 ul.loc01 li a{display: flex;height: 50px;border: 1px solid #000000;border-radius: var(--radius01);padding: 0 20px;font-size: 18px;align-items: center;color: #000000;font-weight: 600;transition: 0.7s}
#sub .sub_visual02 ul.loc01 li:hover a{color: #CE3E73}
#sub .sub_visual02 ul.loc01 li.on a{background: #CE3E73;border-color: #CE3E73;color: #fff}
#sub .tab_list{position: absolute;right: 0;top: 0;height: 100vh;padding-right: 40px;padding-top: 102px;}
#sub .tab_list ul{display: flex;flex-direction: column;justify-content: center;height: 100%;gap: 10px}
#sub .tab_list ul li a{display: flex;width: 140px;height: 80px;align-items: center;justify-content: center;border: 2px solid #2A2A2A;border-radius: var(--radius01);font-size: 19px;color: #000000;font-weight: 600;transition: 0.7s}
#sub .tab_list ul li:hover a{color: #CE3E73}
#sub .sub_visual03 .tab_list.tab_list2 ul li a{height: 106px;text-align: center;transition: 0.7s}
#sub .sub_visual03 .tab_list.tab_list2 ul li:hover a{color: #CE3E73}
#sub .tab_list ul li.on a{background: #CE3E73;color: #fff;border-color: #CE3E73}
#sub .sub_con{padding-top: 120px;padding-bottom: 180px;}
#footer{position: relative;z-index: 2;}
#sub.group .con01{padding: 0 60px;display: flex;gap:0 60px;}
#sub.group .con01 > div{width: calc(50% - 30px)}
#sub.group .con01 .img_w{position: relative;border-radius: var(--radius01);overflow: hidden}
#sub.group .con01 .img_w img{display: block;max-width: 100%}
#sub.group .con01 .txt_w{border: 1px solid #999999;border-radius: var(--radius01);padding: 60px;display: flex;flex-direction: column;justify-content: space-between}
#sub.group .con01 .txt_w .txt strong{display: block;font-size: 30px;color: #000000;font-weight: 600;margin-bottom: 40px;}
#sub.group .con01 .txt_w ul{display: flex;flex-direction: column;gap: 14px;}
#sub.group .con01 .txt_w ul li{font-size: 20px;color: #000000;line-height: 30px;position: relative;padding-left: 86px;}
#sub.group .con01 .txt_w ul li span{color: #000000;font-weight: 600;position: absolute;left: 0;}
#sub.group .con01 .txt_w .link_w{border-top: 1px solid #DDDDDD;padding-top: 40px;}
#sub.group .con01 .txt_w .link_w .link a{display: flex;height: 80px;border: 1px solid #000000;align-items: center;position: relative;padding-left: 80px;border-radius: var(--radius01);}
#sub.group .con01 .txt_w .link_w .link a i{position: absolute;left: 0;top: 0}
#sub.group .con01 .txt_w .link_w .link p{font-size: 20px;color: #000000;}
#sub.board .sub_wrap{display: flex}
#sub.board .sub_wrap .sub_visual03{width: calc(100% - 960px);padding-top: 194px;padding-left: 60px;position: relative}
#sub.board .sub_wrap .sub_visual03 .loc{display: inline-block;margin-top: 25px;}
#sub .loc ul{display: flex;border: 1px solid #000000;gap: 0 30px;height: 60px;padding: 0 40px;border: 1px solid #000000;border-radius: 30px;align-items: center}
#sub .loc ul li{font-size: 19px;color: #000000;font-weight: 500}
#sub .loc ul li:last-child{color: #CE3E73;font-weight: 600}
#sub.board .sub_wrap .sub_con02{width: 960px;padding-right: 60px;padding-top: 220px;padding-bottom: 180px;min-height: 100vh}
#sub.board_list .list > ul{display: flex;flex-direction: column;gap: 10px;}
#sub.board_list .list > ul > li > a{display: flex;height: 100px;border-radius: var(--radius01);border: 1px solid #000000;align-items: center;padding: 0 40px;position: relative}
#sub.board_list .list > ul > li > a .date{position: absolute;right: 40px;top: 50%;transform: translateY(-50%)}
#sub.board_list .list > ul > li > a .date span{font-size: 18px;color: #999999;}
#sub.board_list .list > ul > li > a .tit {padding-right: 170px;width: 100%}
#sub.board_list .list > ul > li > a .tit strong{display: block;font-size: 22px;color: #000000;font-weight: 600;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
#sub.board_list .list > ul > li > a .tit em{display: inline-block;width: 93px;line-height: 34px;text-align: center;background: #CE3E73;border-radius: 6px;color: #fff;font-size: 18px;color: #FFFFFF;font-weight: 600}
#sub .btn_wrap{display: flex;justify-content: space-between;margin-top: 60px}
#sub .paging ul{display: flex;gap: 0 8px;}
#sub .paging ul li a{display: flex;width: 48px;height: 48px;align-items: center;justify-content: center;border: 2px solid #E2E2E2;border-radius: var(--radius01);font-size: 17px;color: #000000;font-weight: 600}
#sub .paging ul li.m_prev a{background: url(/img/sub/m_prev.png);background-size: 100% 100%}
#sub .paging ul li.prev a{background: url(/img/sub/prev.png);background-size: 100% 100%}
#sub .paging ul li.next a{background: url(/img/sub/next.png);background-size: 100% 100%}
#sub .paging ul li.m_next a{background: url(/img/sub/m_next.png);background-size: 100% 100%}
#sub .paging ul li.on a{background: #CE3E73;border-color: #CE3E73;color: #fff}
#sub .sch{position: relative}
#sub .sch input{width: 358px;height: 48px;border: 2px solid #E2E2E2;border-radius: var(--radius01);font-size: 17px;color: #333;padding-left: 30px}
#sub .sch input::placeholder{color: #676767}
#sub .sch button{height: 100%;position: absolute;right: 0;top: 0;padding-right: 30px;}
#sub.view .view_title{position: relative;padding-bottom: 20px;padding-right: 215px;border-bottom: 2px solid #000000}
#sub.view .view_title strong{display: block;font-size: 30px;color: #000000;}
#sub.view .view_title strong em{display: inline-block;width: 93px;line-height: 34px;text-align: center;background: #CE3E73;border-radius: 6px;color: #fff;font-size: 18px;color: #FFFFFF;font-weight: 600;margin-right: 12px;}
#sub.view .view_title p{position: absolute;bottom: 20px;font-size: 18px;color: #999999;display: flex;gap: 0 18px;right: 0}
#sub.view .view_title p i{display: block;width: 1px;height: 14px;background: #DDDDDD;}
#sub.view .view_con{padding: 40px 0 ;min-height: 400px;border-bottom: 1px solid #DDDDDD;}
#sub.view .view_con img{max-width: 100%}
#sub.view .view_file{padding: 60px 0}
#sub.view .view_file ul{display: flex;flex-direction: column;gap: 10px;}
#sub.view .view_file ul li a{display: flex;height: 100px;border: 1px solid #000000;border-radius: var(--radius01);align-items: center;padding-right: 124px;position: relative}
#sub.view .view_file ul li a strong{position: relative;font-size: 22px;color: #000000;padding-left: 40px;display: block;}
#sub.view .view_file ul li a i{position: absolute;right: 30px;top: 50%;transform: translateY(-50%)}
#sub.view .view_file ul li a i svg{display: block;}
#sub.view .back{padding-top: 60px;border-top: 1px solid #DDDDDD;display: flex;justify-content: flex-end}
#sub .sub_visual01{height: calc(100vh + 330px);position: relative;z-index: 3}
#sub .sub_visual01 .vis_img{height: 100vh;background: #000;position: relative;overflow: hidden}
#sub .sub_visual01 .vis_img .img_w{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}
#sub .sub_visual01 .vis_img .img_w img{display: block;position: relative;opacity: 0.5}
#sub .sub_visual01 .sub_txt{position: absolute;height: 100vh;top: 0;left: 0;width: 100%;text-align: center;width: 100%}
#sub .sub_visual01 .sub_txt > div{position: absolute;top: 50%;width: 100%}
#sub .sub_visual01 .sub_txt > div strong{display: block;font-size: 150px;color: #FFFFFF;font-family: "trumpgothicpro", sans-serif;}
#sub .sub_visual01 .sub_txt > div .loc{position: absolute;left: 50%;transform: translateX(-50%);top: 177px;opacity: 0}


#sub .sub_visual01.on .vis_img .img_w img{transform: translateY(17%);transition: 1.5s;transition-delay: 0.5s;opacity: 1}
#sub .sub_visual01 .vis_img{transform: translateY(0);clip-path: inset(0 0 0 0 );transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual01.on .vis_img{transform: translateY(332px);clip-path: inset(330px 0 0 0 );transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual01.on .sub_txt > div .loc{opacity: 1;transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual01.on .sub_txt{transform: translateY(-145px);transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual01.on .sub_txt > div strong{color: #000;transition: 1.5s;transition-delay: 0.5s}

#sub.ideal .con01{display: flex;align-items: center;position: relative;z-index: 2}
#sub.ideal .con01{gap: 0 60px;}
#sub.ideal .con01 .tit strong{display: block;font-family: "trumpgothicpro", sans-serif;font-size: 100px;line-height: 1;color: #000000;}
#sub.ideal .con01 .txt strong{display: block;font-size: 50px;color: #000000;margin-bottom: 30px}
#sub.ideal .con01 .txt strong span{color: #CE3E73;margin-bottom: 30px;}
#sub.ideal .con01 .txt p{font-size: 20px;color: #000000;line-height: 34px;}
#sub.ideal .con01 .txt p span{color: #CE3E73;font-weight: 600}
#sub.ideal .con01 i{display: block;color: #000000;width: 100px;height: 2px;background: #000000}

#sub.ideal .sub_con{padding-bottom: 0}
#sub.ideal .con02 {position: relative;padding-top: 150px;padding-bottom: 180px;}
#sub.ideal .con02:after{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));position: absolute;top: 0;left: 0;height: 180px;}
#sub.ideal .con02:before{content: '';display: block;width: 40px;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: url(/img/sub/ideal_line.jpg)}
#sub.ideal .con02 .c{display: flex}
#sub.ideal .con02 .c.c02{justify-content: flex-end}
#sub.ideal .con02 .c .con_in{width: calc(50% - 20px);padding-right: 130px}
#sub.ideal .con02 .c.c02 .con_in{padding-left: 130px;padding-right: 0}
#sub.ideal .con02 .c .con_in .box{border: 1px solid #999999;padding: 60px;height: 484px;border-radius: var(--radius01);position: relative;position: relative}
#sub.ideal .con02 .c .con_in .box:after{content: '';display: block;width: 130px;height: 6px;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #DDDDDD;position: absolute;top: 50%;transform: translateY(-50%)}
#sub.ideal .con02 .c.c01 .con_in .box:after{right: -130px}
#sub.ideal .con02 .c.c02 .con_in .box:after{left: -130px}
#sub.ideal .con02 .c .con_in .box .pin i{position: absolute;width: 10px;height: 10px;background: #CE3E73;border-radius: 50%;;right: 0;margin-right: -5px;top: 50%;margin-top: -5px;z-index: 3}
#sub.ideal .con02 .c.c02 .con_in .box .pin i{left: 0;margin-left: -5px;top: 50%;margin-top: -5px;;margin-right: 0;right: auto}
#sub.ideal .con02 .c .con_in .box .pin i:after{content: '';display: block;width: 30px;height: 30px;border: 2px solid #CE3E73;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin-left: -17px;margin-top: -17px;transform: scale(0);animation: cir 1s infinite linear;background: #fff}
@keyframes cir{
	0%{transform: scale(0)}
	100%{transform: scale(1);opacity: 0}
}
#sub.ideal .con02 .c .con_in .box .tag{display: flex;width: 180px;height: 90px;align-items: center;border: 1px solid #0A0A0A;border-radius: var(--radius01);padding-left: 25px;}
#sub.ideal .con02 .c .con_in .box .tag span{font-family: "trumpgothicpro", sans-serif;font-size: 60px;color: #DDDDDD;font-weight: 600;position: relative;top: 7px;}
#sub.ideal .con02 .c .con_in .box .tag i{font-family: inherit;color: #000000;font-weight: 600}
#sub.ideal .con02 .c .con_in .box .tit{position: relative;margin-top: 30px;}
#sub.ideal .con02 .c .con_in .box .tit strong{font-size: 150px;color: #000000;font-family: "trumpgothicpro", sans-serif;line-height: 1;padding-top: 10px}
#sub.ideal .con02 .c .con_in .box .tit .on{position: absolute;top: -10px;left: 0;color: #CE3E73}
#sub.ideal .con02 .c .con_in .box p{font-size: 30px;font-weight: 600;color: #000000;line-height: 40px;}
#sub.benefit .con01{padding-left: 80px}
#sub.benefit .con01 ul{display: flex;flex-wrap: wrap;gap: 10px}
#sub.benefit .con01 ul li{width: calc(33.33% - 6.66px)}
#sub.benefit .con01 ul li:last-child{width: 100%}
#sub.benefit .con01 ul li{height: 393px;}
#sub.benefit .con01 ul li > div{height: 100%;border: 1px solid #999999;border-radius: var(--radius01);text-align: center;padding-top: 50px;transition: 0.7s}
#sub.benefit .con01 ul li .txt{margin-top: 20px}
#sub.benefit .con01 ul li strong{font-size: 24px;line-height: 32px;color: #000000;transition: 0.7s}
#sub.benefit .con01 ul li p{font-size: 20px;line-height: 30px;color: #000000;transition: 0.7s}
#sub.benefit .con01 ul li i{display: block;width: 80px;height: 1px;background: #DDDDDD;margin: 20px auto; }
#sub.benefit .con01 ul li:hover > div{background: #CE3E73;border-color: #CE3E73}
#sub.benefit .con01 ul li path{transition: 0.7s}
#sub.benefit .con01 ul li:hover path{fill: #fff}
#sub.benefit .con01 ul li:hover strong, #sub.benefit .con01 ul li:hover p{color: #fff}
#sub.benefit .vis_title strong{font-size: 100px;}
#sub.benefit .vis_title ul li a{display: flex;height: 50px;border: 1px solid #000000;border-radius: var(--radius01);padding: 0 20px;font-size: 18px;align-items: center;color: #000000;font-weight: 600}
#sub.benefit .vis_title ul li.on a{background: #CE3E73;border-color: #CE3E73;color: #fff}
#sub.benefit .vis_title ul{display: flex;flex-wrap: wrap;gap: 10px;width: 720px;max-width: 100%}
#sub.benefit .sub_wrap:before{content: '';display: block;width: 40px;height: 100%;position: absolute;top: 0;;transform: translateX(50%);background: url(/img/sub/ideal_line.jpg);right: 960px}
#sub.benefit .sub_wrap{position: relative;padding-bottom: 296px}
#sub.benefit .sub_wrap .bg svg{display: block}
#sub.benefit .sub_wrap .bg{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
#sub.management .con03{margin-top: 160px;padding-bottom: 180px;position: relative}
#sub.management .con03 .hook{position: absolute;top: 0;transform: translateY(-100%);left: 25.6%}
#sub.management .con03 .hook svg{display: block}
#sub.management .con03 ul{display: flex;gap: 0 40px;}
#sub.management .con03 ul li{width: calc(33.33% - 26.666px)}
#sub.management .con03 ul li > div{border: 1px solid #999999;border-radius: var(--radius01);text-align: center;padding-top: 110px;height: 586px;}
#sub.management .con03 ul li .icon{margin-bottom: 50px}
#sub.management .con03 ul li strong{display: block;color: #000000;font-size: 28px;margin-bottom: 25px;}
#sub.management .con03 ul li strong span{color: #CE3E73;;}
#sub.management .con03 ul li p{font-size: 19px;line-height: 32px;color: #000000;}
#sub.ceo .con01{display: flex;padding-bottom: 198px}
#sub.ceo .con01 > div{width: 50%}
#sub.ceo .con01 .title strong{font-size: 50px;color: #000000;line-height: 75px;}
#sub.ceo .con01 .txt{display: flex;flex-direction: column;gap: 40px;padding-left: 69px;}
#sub.ceo .con01 .txt p{font-size: 20px;line-height: 40px;color: #000000;word-break: keep-all}
#sub.ceo .con01 .txt strong{display: flex;font-size: 22px;color: #000000;align-items: center;gap: 20px;margin-top: 55px;}
#sub.ceo .con01 .txt strong i{display: block;width: 1px;height: 14px;background: #BBBBBB}
#sub.ceo .con01 .txt strong em{display: block;margin-left: 30px}
#sub.ceo .sub_con{position: relative}
#sub.ceo .sub_con .bg svg{display: block}
#sub.ceo .sub_con .bg{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
#sub.ceo .sub_con:before{content: '';display: block;width: 18px;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: url(/img/sub/ideal_line.jpg);background-size: 100% auto}
#sub.location .con .map_in > div{width: 100%;height: 400px;border-radius: var(--radius01);overflow: hidden;border: 1px solid #000000}
#sub.location .con .map_in > div .root_daum_roughmap{width: 100%; height: 100%}
#sub.location .con .map_in > div .root_daum_roughmap .wrap_map{height: 100%}
#sub.location .con .txt{padding: 40px;}
#sub.location .con .txt strong{font-size: 30px;color: #000000;display: block;margin-bottom: 20px;}
#sub.location .con .txt p{display: flex;align-items: center;color: #666666;font-size: 20px;gap: 0 8px;margin-bottom: 20px;}
#sub.location .con .txt ul{display: flex;flex-direction: column;gap: 10px}
#sub.location .con .txt ul li{font-size: 18px;color: #666666;}
#sub.location .con .txt ul li span{display: inline-block;color: #999999;width: 44px;}
#sub.location .con01{display: flex;flex-direction: column;gap: 40px;}
#sub.contact .con01 > ul {display: flex;flex-wrap: wrap;gap: 20px;}
#sub.contact .con01 > ul >  li{width: calc(50% - 10px)}
#sub.contact .con01 > ul >  li > div{height: 100%;border: 1px solid #999999;border-radius: var(--radius01);padding: 40px;transition: 0.5s}
#sub.contact .con01 > ul >  li > div .tit strong{display: block;font-size: 24px;color: #000000;font-weight: 600;transition: 0.5s}
#sub.contact .con01 > ul >  li > div .tit{border-bottom: 1px solid #DDDDDD;padding-bottom: 20px;;transition: 0.5s}
#sub.contact .con01 > ul >  li > div ul{display: flex;flex-direction: column;gap: 10px;padding-top: 20px;}
#sub.contact .con01 > ul >  li > div ul li{font-size: 18px;color: #666666;transition: 0.5s}
#sub.contact .con01 > ul >  li > div ul li span{display: inline-block;width: 50px;color: #999999;transition: 0.5s}
#sub.contact .con01 > ul >  li:hover > div {background: #CE3E73}
#sub.contact .con01 > ul >  li:hover > div .tit{border-color: #fff}
#sub.contact .con01 > ul >  li:hover > div .tit strong{color: #fff}
#sub.contact .con01 > ul >  li:hover > div ul li{color: #fff}
#sub.contact .con01 > ul >  li:hover > div ul li span{color: inherit}

#sub.financial .con01 .table_wrap{display: flex}
#sub.financial .con01 .table_wrap .title{width: 25%}
#sub.financial .con01 .table_wrap .con{width: 75%;display: flex}
#sub.financial .con01 .table_wrap .con > div{width: 33.33%}
#sub.financial .con01 .table_wrap .con ul li{position: relative}
#sub.financial .con01 .table_wrap .con ul li:after{content: '';display: block;width: 1px;height: 24px;position: absolute;right: 0;top: 50%;transform: translateY(-50%);background: #CCCCCC}
#sub.financial .con01 .table_wrap .con > div:last-child ul li:after{display: none}
#sub.financial .con01 .table_wrap .tit{height: 64px;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #DDDDDD;margin-bottom: 10px;border-top: 2px solid #000000}
#sub.financial .con01 .table_wrap .tit span{color: #000000;font-size: 20px;font-weight: 500}
#sub.financial .con01 .table_wrap ul{display: flex;flex-direction: column;gap: 10px}
#sub.financial .con01 .table_wrap ul li{display: flex;height: 70px;align-items: center;justify-content: center;font-size: 20px;color: #666666}
#sub.financial .con01 .table_wrap .title ul li{border: 1.5px solid #666666;border-radius: var(--radius01);text-align: center;font-size: 20px;color: #666666;line-height: 34px;}
#sub.financial .con01 .table_wrap .con ul li{border-top: 1.5px solid #666666; border-bottom: 1.5px solid #666666;position: relative}
#sub.financial .con01 .table_wrap .con > div:nth-child(1) ul li{border-left: 1.5px solid #666666; border-radius: 10px 0 0 10px}
#sub.financial .con01 .table_wrap .con > div:last-child ul li{border-right: 1.5px solid #666666; border-radius: 0 10px 10px 0}
#sub.financial .con01 .table_wrap2{gap: 10px}
#sub.financial .con01 .table_wrap ul li.line2{height: 94px;}
#sub.financial .con01 .table_wrap.all{border-top: 1px solid #DDDDDD;padding-top: 20px;margin-top: 20px;}
#sub .f_tit{display: flex;justify-content: space-between;padding-bottom: 20px;align-items: flex-end}
#sub .f_tit strong{font-size: 30px;color: #000000;}
#sub .f_tit strong span{color: #999999;font-size: 18px;}
#sub .tabs{padding-right: 60px;margin-top: 115px;}
#sub .tabs ul{width: calc(100% + 60px);margin-left: -60px;}
#sub .tabs ul li a{display: flex;align-items: center;justify-content: flex-end;padding-right: 180px;font-size: 30px;color: #000000;font-weight: 600;gap: 0 16px;height: 80px;align-items: center}
#sub .tabs ul li.on a{background: #CE3E73;height: 100px;padding-right: 40px;color: #fff;font-size: 40px;border-radius: 0 10px 10px 0}
#sub .tabs ul li.on a svg{display: block;width: 12px;height: auto}
#sub .tabs ul li.on a svg path{stroke: #fff}
#sub.financial.financial02 .con01 .table_wrap ul li:last-child{border-color: #000000  !important;color: #000000}
#sub.m_info .sub_con02{display: flex;flex-direction: column;gap: 120px}
#sub.m_info .sub_con02 img{max-width: 100%}
#sub.m_info .sub_con02 svg{width: 100%;height: auto}
#sub .h_title{border-bottom: 2px solid #000000;padding-bottom: 10px;margin-bottom: 20px;}
#sub .h_title strong{display: block;color: #000000;font-size: 80px;  font-family: "trumpgothicpro", sans-serif}
#sub.history .con01 ul{display: flex; flex-direction: column;gap: 10px}
#sub.history .con01 ul li{display: flex;height: 84px;align-items: center;border: 1px solid #999999;border-radius: var(--radius01);padding-left: 200px;position: relative;font-size: 20px;color: #000000;}
#sub.history .con01 ul li span{position: absolute;left: 40px;color: #000000;font-weight: 600}
#sub.history .con01 ul li span:before{content: '';display: block;width: 1px;height: 14px;background: #DDDDDD;top: 50%;transform: translateY(-50%);right: -25px;position: absolute}
#sub.award .con01 ul{display: flex;flex-wrap: wrap;gap: 10px}
#sub.award .con01 ul li{width: calc(50% - 5px);border: 1px solid #999999; border-radius: var(--radius01);padding: 40px;padding-top: 30px;}
#sub.award .con01 ul li .img img{display: block;width: 200px;margin: 0 auto;max-width: 100%}
#sub.award .con01 ul li .txt{border-top-color: 1px solid #DDDDDD;padding-top: 30px;margin-top: 30px;border-top: 1px solid #DDDDDD}
#sub.award .con01 ul li .txt span{display: block;font-size: 20px;color: #000000;font-weight: 600;margin-bottom: 10px;}
#sub.award .con01 ul li .txt strong{font-size: 20px;color: #000000;font-weight: 400}
#sub.cerf .con01{padding-left: 20px;}
#sub.cerf .con01 ul{display: flex;flex-wrap: wrap;gap: 60px 10px;}
#sub.cerf .con01 ul li{width: calc(50% - 5px)}
#sub.cerf .con01 ul li .img{border: 1px solid #999999;border-radius: var(--radius01);overflow: hidden;position: relative;padding-top: 122%}
#sub.cerf .con01 ul li .img img{width: 100%;position: absolute;top: 50%;transform: translateY(-50%)}
#sub.cerf .con01 ul li .tag span{display: inline-block;border: 2px solid #000000;border-radius: var(--radius01);padding: 17px 30px;font-size: 22px;color: #000000;;line-height: 26px;font-weight: 600;position: relative}
#sub.cerf .con01 ul li .tag{position: relative;margin-top: 10px;}
#sub.cerf .con01 ul li .tag svg{position: absolute;left: 10px;top: 0;display: block;transform: translateY(-100%)}
#sub.esg .esg_slide{padding-top: 112px;}
#sub.esg .esg_slide .swiper-wrapper{transition-timing-function: linear;;}
#sub.esg .esg_slide .wrap{position: relative}
#sub.esg .esg_slide .wrap .img{display: block;border-radius: var(--radius01);overflow: hidden}
#sub.esg .esg_slide .wrap .img img{display: block}
#sub.esg .esg_slide .wrap .txt{position: absolute;bottom: 0;padding-left: 40px;padding-bottom: 30px;}
#sub.esg .esg_slide .wrap .txt i svg{display: block}
#sub.esg .esg_slide .wrap .txt strong{display: block;font-size: 24px;color: #FFFFFF;margin-top: 10px;}
#sub.esg .esg_slide .wrap .txt p{font-size: 20px;color: #FFFFFF;font-weight: 300;margin-top: 10px;}
/*#sub.esg .esg_slide .swiper-slide{width: 700px;}*/
#sub.esg.board .sub_wrap .sub_visual03, #sub.esg.board .sub_wrap .sub_con02{padding-top: 110px}
#sub .tabs{margin-top: 40px}
#sub.esg .title{border-bottom: 2px solid #000000;padding-bottom: 20px;padding-left: 60px;}
#sub.esg .title strong{display: block;font-size: 30px;color: #000000;}
#sub.esg_ceo .con01 .txt{box-shadow: 0 0 80px rgba(0,0,0,0.1);margin-top: 20px;border-radius: var(--radius01);padding: 60px;display: flex;flex-direction: column;gap: 40px;}
#sub.esg_ceo .con01 .txt p{font-size: 20px;color: #000000;line-height: 40px;}
#sub.esg_ceo .con01 .txt strong{display: flex;font-size: 22px;color: #000000;align-items: center;gap: 20px;margin-top: 55px;}
#sub.esg_ceo .con01 .txt strong i{display: block;width: 1px;height: 14px;background: #BBBBBB}
#sub.esg_ceo .con01 .txt strong em{display: block;margin-left: 30px}
#sub.esg .file_list{padding-bottom: 60px;border-bottom: 1px solid #DDDDDD;margin-bottom: 60px;}
#sub.esg .file_list ul{display: flex;flex-direction: column;gap: 10px;}
#sub.esg .file_list ul li a{display: flex;justify-content: space-between;border: 1px solid #000000;height: 100px;border-radius: var(--radius01);align-items: center;padding-left: 40px;padding-right: 30px}

#sub.esg .file_list ul li a strong{display: block;font-size: 22px;color: #000000;font-weight: 600}
#sub.esg .file_list ul li a i{border-radius:  var(--radius01);}
#sub.esg .file_list ul li a:hover i{background: #CE3E73;}
#sub.esg .file_list ul li a:hover path{stroke: #fff;}
#sub.esg .file_list ul li a i{transition: 0.7s;}
#sub.esg .file_list ul li a path{transition: 0.7s;}
#sub.esg .file_list ul li a i svg{display: block}
#sub.esg.complaint .con01 .img{border-radius: var(--radius01);overflow: hidden;border: 1px solid #999999}
#sub.esg.complaint .con01 .img img{display: block;max-width: 100%}
#sub.ethical .con01 .title{padding-left: 0}
#sub.ethical .con01 .con_w{display: flex;flex-direction: column;gap: 60px;}
#sub.ethical .con01 .con_w01{height: 4660px;}
#sub.ethical .con01 .con_w .con > ul{display: flex;flex-direction: column;gap: 8px;}
#sub.ethical .con01 .con_w .con > ul > li{font-size: 20px;color: #000000;line-height: 30px;;position: relative;padding-left: 12px;}
#sub.ethical .con01 .con_w .con > ul > li:before{content: '';display: block;width: 4px;height: 4px;background: #000000;border-radius: 50%;position: absolute;left: 0;border-top-right-radius: 50%;top: 15px;}
#sub.ethical .con01 .con_w .con > ul > li ul{display: flex;flex-direction: column;gap: 8px;}
#sub.ethical .con01 .con_w .con > ul > li ul li{font-size: 20px;color: #666666;position: relative;padding-left: 15px;}
#sub.ethical .con01 .con_w .con > ul > li ul li:before{content: '';display: block;width: 8px;height: 1px;background: #999999;position: absolute;left: 0;top: 13px;}
#sub.ethical .con01 .con_w strong{display: block;font-size: 22px;color: #000000;margin-bottom: 15px;}
#sub.ethical .con01 .con_w p{font-size: 20px;color: #000000;line-height: 30px;margin-top: 20px;word-break: keep-all;margin-bottom: 20px;}
#sub.ethical .con01 .txt{padding-top: 60px}
#sub.ethical .con01 .tit{padding-bottom: 60px}
#sub.ethical .con01 .tit > strong{display: block;font-size: 22px;color: #000000;line-height: 33px;}
#sub.brosure .list ul{display: flex;flex-direction: column;gap: 20px}
#sub.brosure .list ul li a{display: block;}
#sub.brosure .list ul li a .tab{display: inline-block}
#sub.brosure .list ul li a .tab .tab_in span{display: flex;width: 300px;height: 40px;border: 1px solid #999999;align-items: center;place-items: 22px;border-radius: 10px 10px 0 0 ;border-bottom: none;color: #CE3E73;font-size: 16px;font-weight: 600;padding-left: 20px;background: #fff}
#sub.brosure .list ul li a .tab .tab_in{background: #DDDDDD;padding-right: 30px;border-radius: 10px 10px 0 0 }
#sub.brosure .list ul li a .tab{background: #EEEEEE;padding-right: 30px;border-radius: 10px 10px 0 0 }
#sub.brosure .list ul li a .txt{border: 1px solid #999999;border-radius: 0 10px 10px 10px; padding: 32px 40px;height: 200px;;display: flex;justify-content: space-between}
#sub.brosure .list ul li a .tab .tab_in span{position: relative;}
#sub.brosure .list ul li a .tab .tab_in span:before{content: '';display: block;width: 100%;height: 4px;background: #fff;position: absolute;bottom: -2px;left: 0}

#sub.brosure .list ul li a .txt .txt_w{padding-top: 10px;}
#sub.brosure .list ul li a .txt .txt_w strong{display: flex;font-size: 30px;color: #000000;font-weight: 600;gap: 0 10px;}
#sub.brosure .list ul li a .txt .txt_w strong span{display: flex;width: 50px;height: 34px;align-items: center;justify-content: center;border-radius: 6px;background: #CE3E73;color: #fff;font-size: 18px;font-weight: 600;}
#sub.brosure .list ul li a .txt .txt_w strong span.en{background: #4E4EC4}
#sub.brosure .list ul li a .txt .txt_w strong span.cn{background: #77B864}
#sub.brosure .list ul li a .txt .txt_w p{font-size: 18px;color: #999999;margin-top: 10px;}
#sub.brosure .list ul li a .txt i{display: flex;width: 140px;height: 140px;border: 2px solid #000000;border-radius: var(--radius01);align-items: center;justify-content: center;transition: 0.6s}
#sub.brosure .list ul li a:hover .txt i{background: #CE3E73;border-color: #CE3E73}
#sub.brosure .list ul li a:hover .txt path{stroke: #fff}
#sub.gallery .list ul{display: flex;flex-wrap: wrap;gap: 20px;}
#sub.gallery .list ul li{width: calc(50% - 10px )}
#sub.gallery .list ul li a{display: block;padding: 20px;border: 1px solid #999999;border-radius: var(--radius01);height: 100%;transition: 0.6s}
#sub.gallery .list ul li:hover a{background: #CE3E73;border-color: #CE3E73}

#sub.gallery .list ul li a .img_box{position: relative;background: #F2F2F2;padding-top: 60%;border-radius: var(--radius01);overflow: hidden}
#sub.gallery .list ul li a .img_box img{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.gallery .list ul li a .tit{padding-top: 20px;padding-bottom: 20px}
#sub.gallery .list ul li a .tit strong{display: block;font-size: 24px;color: #000000;transition: 0.6s}
#sub.gallery .list ul li:hover a .tit strong{color: #fff}
#sub.gallery .list ul li a .tit svg{display: block}
#sub.gallery .list ul li:hover a .tit path{fill: #CE3E73}
#sub.gallery .list ul li:hover a .tit rect{fill: #fff}
#sub.gallery .list ul li a .tit i{display: inline-block;margin-left: 10px;position: relative;top: 5px}

#sub .sub_visual04{padding-top: 102px;position: relative}
#sub .sub_visual04 .img_visual{height: calc(100vh - 102px);padding: 0;position: relative;z-index: 13}
#sub .sub_visual04 .img_visual .img_in{position: relative;height: 100%;width: 100%;overflow: hidden;border-radius: 0;;background: #000}
#sub .sub_visual04 .img_visual .img_in div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0.25}


#sub .sub_visual04 .vis_txt{position: absolute;top: 50%;transform: translateY(-50%);z-index: 11;width: 100%;left: 0;text-align: center}
#sub .infograpic_visual{position: absolute;bottom: 0;height: calc(100vh - 102px);;width: 100%;bottom: 0;padding: 60px;}
#sub .infograpic_visual .txt_in{position: relative}
#sub .infograpic_visual .txt_in .loc{position: absolute;left: 50%;transform: translateX(-50%);top: 160px;border-radius: 20px;}
#sub .infograpic_visual .box{border: 2px solid #000;height: 100%;border-radius: 20px;overflow: hidden;position: relative}
#sub .infograpic_visual .box .line_vis{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
#sub .infograpic_visual .box .line_vis img{display: block;transform: translateY(100%)}
#sub .sub_visual04 .txt_in strong{font-size: 150px;color: #FFFFFF;font-weight: 600;font-family: "trumpgothicpro", sans-serif;}
#sub .sub_visual04 .infograpic_visual .txt_in strong{color: #000}
#sub .sub_visual04 .img_in_w{position: relative;z-index: 15}
#sub .sub_visual04.on .img_visual{padding: 60px;transition: 1s;z-index: 20}
#sub .sub_visual04.on .img_visual .img_in{border-radius: 20px;transition: 1s}
#sub .sub_visual04.on .img_visual .img_in div{opacity: 0.5;transition: 1s}
#sub .sub_visual04 .img_in_w{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);transition: 1s;transition-delay: 1s}
#sub .sub_visual04.on .img_in_w{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
#sub .sub_visual04.on .txt_in{transform: translateY(-100%);transition: 1s;transition-delay: 1s}
#sub .sub_visual04.on .infograpic_visual .box .line_vis img{display: block;transform: translateY(00%);transition: 0.7s;transition-delay: 1s}
#sub.business .tab_list ul{transform: translateY(0%);opacity: 1;}
#sub.business .tab_list ul li{padding-left: 0 !important}
#sub.business .tab_list ul li:before{display: none !important}
#sub.business .con01{height: 100vh;position: relative;}
#sub.business .con01 .title{width: 100%;height: 100%;display: flex;justify-content: center;padding-top: 165px;}
#sub.business .con01 .title strong{font-size: 100px;color: #000000;font-family: "trumpgothicpro", sans-serif;}
#sub.business .con01 .title .box_w{display: flex;flex-direction: column;align-items: center}
#sub.business .con01 .title .box_w > div *{display: inline-block}
#sub.business .con01 .title .box_w > div ul{margin-top: 8px;}
#sub.business .con01 .title .box_w > div ul li{display: inline-block;width: 140px;line-height: 46px;border: 1px solid #000000;border-radius: 23px;text-align: center;font-size: 20px;color: #000000;margin: 0 10px}
#sub.business .con01 .title .box_w p{font-size: 30px;color: #000000;font-weight: 600;margin-top: 18px;}
#sub.business .con01 .box_in{width: 100vw;padding: 0 30px;display: flex;align-items: center;height: 100%;position: absolute;left: 0;top: 0;transform: translateX(95%)}
#sub.business .con01 .box_in .box_con{width: 100%;display: flex;gap: 0 30px;}
#sub.business .con01 .box_in .box{height: 100%;width: calc(33.33% - 20px);perspective: 600px}
#sub.business .con01 .box_in .box > div{transform-style: preserve-3d;}
#sub.business .con01 .box_in .box img{max-width: 100%}
#sub.business .con02{position: relative;overflow: hidden}
#sub.business .con02 .img_w{height: 800px;position: relative;overflow: hidden}
#sub.business .con02 .img_w:after{content: '';display: block;width: 100%;height: 100%;background: rgba(255,255,255,1);mix-blend-mode: saturation}
#sub.business .con02 .img_w > div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.business .con02 .txt{width: 100%;position: absolute;bottom: -74px;left: 0;text-align: center}
#sub.business .con02 .txt strong{font-size: 300px;color: #FFFFFF;font-family: "trumpgothicpro", sans-serif;}
#sub.business .con01 .box_in .box > div{position: relative;padding-top: 100%;	transition: 0.6s;
	transform-style: preserve-3d;}
#sub.business .con01 .box_in .wrap img{display: block}
#sub.business .con01 .box_in .wrap .back{position: absolute;top: 0;left: 0;transform: rotateY(180deg);backface-visibility: hidden;position: absolute}
#sub.business .con01 .box_in .wrap .front{backface-visibility: hidden;;position: absolute;top: 0;background: #fff;border: 1px solid #999999;border-radius: 20px;overflow: hidden}
#sub.business .con01 .box_in .wrap .front, #sub.business .con01 .box_in .wrap .back{-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;transform-style: preserve-3d;}

#sub.business .con01 .box_in .wrap .back{position: absolute;top: 0;left: 0;transform: rotateY(180deg);backface-visibility: hidden;position: absolute;background: #FFFFFF;padding: 20px;border-radius: var(--radius01);border: 1px solid #999999;height: 100%}
#sub.business .con01 .box_in .wrap .back .w .img{display: block;width: 100%;border-radius: var(--radius01);overflow: hidden}
#sub.business .con01 .box_in .wrap .back .w .img img{display: block;}
#sub.business .con01 .box_in .wrap .back .w .txt{padding: 0 30px;padding-top: 50px;}
#sub.business .con01 .box_in .wrap .back .w .txt strong{display: block;font-size: 24px;color: #000000;}
#sub.business .con01 .box_in .wrap .back .w .txt p{display: block;font-size: 20px;color: #000000;line-height: 30px;margin-top: 15px;}
#sub.business .con_w{display: flex;padding-bottom: 160px}
#sub.business .con_w .con{width: 960px;padding-right: 60px;padding-top: 167px}
#sub.business .con_w .con .tb svg{width: 100%;height: auto}
#sub.business .con_w .title_w{width: calc(100% - 960px);padding-left: 60px;padding-top: 167px}
#sub.business .con03 .step > ul{display: flex;flex-direction: column;gap: 10px;}
#sub.business .con03 .step > ul > li{border: 1px solid #999999;border-radius: var(--radius01);padding: 60px;min-height: 417px;}
#sub.business .con03 .step > ul > li .step_tag{display: flex;align-items: center;gap:0 20px;padding-bottom: 40px;margin-bottom: 40px;border-bottom: 1px solid #DDDDDD}
#sub.business .con03 .step > ul > li .step_tag *{font-family: "trumpgothicpro", sans-serif;font-size: 80px;color: #000000;font-weight: 600}
#sub.business .con03 .step > ul > li .step_tag span{display: flex;background: #CE3E73;width: 100px;height: 100px;align-items: center;justify-content: center;background: #CE3E73;border-radius: var(--radius01);color: #fff;padding-top: 16px;}
#sub.business .con03 .step > ul > li .txt strong{font-size: 24px;color: #000000;display: block;margin-bottom: 30px;}
#sub.business .con03 .step > ul > li .txt ul li{font-size: 20px;color: #000000;line-height: 30px;word-break: keep-all;position: relative;padding-left: 12px;}
#sub.business .con03 .step > ul > li .txt ul li:before{content: '';display: block;width: 4px;height: 4px;background: #000000;border-radius: 50%;position: absolute;left: 0;top: 12px}
#sub.business .business_title strong{font-size: 100px;color: #000000;line-height: 1;display: block;margin-bottom: 8px;font-family: "trumpgothicpro", sans-serif;}
#sub.business .business_title p{font-size: 30px;color: #000000;font-weight: 600}
#sub.business .business_title .img_w{margin-top: 50px;border-radius: var(--radius01);overflow: hidden;display: inline-block}
#sub.business .business_title .img_w img{display: block;max-width: 100%}
#sub.business .business_title ul{margin-top: 40px;}
#sub.business .business_title ul li{position: relative;padding-left: 12px;font-size: 20px;line-height: 30px}
#sub.business .business_title ul li:before{content: '';display: block;width: 4px;height: 4px;background: #000000;border-radius: 50%;position: absolute;left: 0;top: 12px}
#sub.business .big_slide{border-radius: var(--radius01);overflow: hidden;margin-bottom: 10px;}
#sub.business .big_slide img{display: block}
#sub.business .thumb_slide{width: 390px;margin: 0 auto}
#sub.business .thumb_slide .wrap{position: relative;padding-top: 100%;overflow: hidden;border-radius: var(--radius01);}
#sub.business .thumb_slide .swiper-slide-thumb-active .wrap:after{content: '';border-left: ;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border: 3px solid #CE3E73;border-radius: inherit; z-index: 5;box-sizing: border-box}
#sub.business .thumb_slide .wrap img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);height: 100%}
#sub.business .thumb_slide img{display: block}
#sub.business .dash{margin: 60px 0;width: 100%;height: 1px;background: #DDDDDD }
#sub.business .dash1{margin-top: 0;margin-bottom: 0;width: calc(100% - 120px);margin: 0 auto}


#sub.business .con06 .list > ul{display: flex;flex-direction: column;gap: 10px;width: 100%}
#sub.business .con06 .list > ul > li .img{border-radius: var(--radius01);overflow: hidden}
#sub.business .con06 .list > ul > li .img img{display: block}
#sub.business .con06 .list > ul > li .wrap{display: flex;border: 1px solid #999999;border-radius: var(--radius01);padding: 20px;}
#sub.business .con06 .list > ul > li .txt{padding-left: 40px;padding-top: 40px}
#sub.business .con06 .list > ul > li .txt strong{display: block;font-size: 40px;margin-bottom: 20px}
#sub.business .con06 .list > ul > li .txt p, #sub.business .con06 .list > ul > li .txt ul li{font-size: 20px;color: #000;line-height: 30px;}

#sub.business .con06 .list > ul > li ul li{position: relative;padding-left: 12px}
#sub.business .con06 .list > ul > li ul li:before{content: '';display: block;width: 4px;height: 4px;background: #000000;border-radius: 50%;position: absolute;left: 0;top: 12px}
#sub.business .info_text_list > ul{display: flex;flex-direction: column;gap: 10px}
#sub.business .info_text_list > ul > li{border: 1px solid #999999;border-radius: var(--radius01);padding-left: 60px;position: relative}
#sub.business .info_text_list > ul > li > i{position: absolute;right: 40px;top: 50%;transform: translateY(-50%)}
#sub.business .info_text_list .w{display: flex;height: 237px;align-items: center;}
#sub.business .info_text_list .w .num span{display: flex;width: 120px;height: 120px;align-items: center;justify-content: center;border: 1px solid #0A0A0A;border-radius: var(--radius01);font-size: 80px;color: #DDDDDD;font-weight: 600;font-family: "trumpgothicpro", sans-serif;padding-top: 20px;}
#sub.business .info_text_list .w .num span i{font-family: "trumpgothicpro", sans-serif;font-weight: inherit;color: #000000}
#sub.business .info_text_list .w .txt{width: calc(100% - 120px);padding-left: 40px}
#sub.business .info_text_list ul li strong{display: block;font-size: 24px;color: #000000;font-weight: 600;line-height: 32px;}
#sub.business .info_text_list ul li ul{margin-top: 20px;}
#sub.business .info_text_list ul li ul li{position: relative;padding-left: 12px;font-size: 20px;line-height: 30px}
#sub.business .info_text_list ul li p{position: relative;font-size: 20px;line-height: 30px;padding-right: 20px;margin-top: 15px;}
#sub.business .info_text_list ul li ul li:before{content: '';display: block;width: 4px;height: 4px;background: #000000;border-radius: 50%;position: absolute;left: 0;top: 12px}
#sub.business .info_text_list .tit2{margin-top: 120px;}
#sub.business .info_text_list .table img{max-width: 100%}
#sub.business .info_text_list .list > ul{display: flex;flex-wrap: wrap;gap: 10px;}
#sub.business .info_text_list .list > ul > li{width: calc(50% - 5px);padding: 60px;height: 356px;border: 1px solid #999999;border-radius: var(--radius01)}
#sub.business .info_text_list .tit {border-bottom: 2px solid #000000;margin-bottom: 30px;padding-bottom: 30px}
#sub.business .info_text_list .tit strong{font-size: 30px;color: #000000;}
#sub.business .info_text_list .tit.tit3{padding-bottom: 0;border-bottom: none}
#sub.business .info_text_list > ul.info_list > li{padding: 60px;}
#sub.business .info_text_list .info_list .w{height: auto;width: 365px;padding-bottom: 30px;border-bottom: 1px solid #DDDDDD}
#sub.business .info_text_list .info_list .w .num span{width: 90px;height: 90px;font-size: 60px;}
#sub.business .con07{padding: 0 60px; padding-top: 120px;padding-bottom: 180px;}
#sub.business .con07 .no1_w{position: relative}
#sub.business .con07 .no1_w .line_w img{display: block}
#sub.business .con07 .no1_w .line_w div{transform: translateY(100%)}
#sub.business .con07 .no1_w .line_w{position: absolute;bottom: 0;transform: translateX(-50%);left: 50%}
#sub.business .con07 .no1{height: 330px;width: 100%;border: 4px solid #000;border-radius: 20px;overflow: hidden;position: relative;z-index: 2;background: #fff}
#sub.business .con07 .no1 div{height: 400%}
#sub.business .con07 .no1 strong{display: block;text-align: center;height: 330px;font-size: 330px;font-family: "trumpgothicpro", sans-serif;padding-top: 40px;}
#sub.business .con07 .title{padding-top: 15px;display: flex;justify-content: center;position: relative;z-index: 2;gap: 20px}
#sub.business .con07 .title strong{font-family: "trumpgothicpro", sans-serif;font-size: 100px;color: #000000;}
#sub.business .con07 .title strong:last-child{border-bottom: 3px solid #000000}
#sub.business .con07 > ul{display: flex;justify-content: center;gap: 40px;margin-top: 168px;}
#sub.business .con07 > ul > li{width: 500px;}
#sub.business .con07 > ul > li .tit{display: flex;gap: 0 20px;align-items: flex-end;border-bottom: 3px solid #000000;padding-bottom: 16px;margin-bottom: 22px;}
#sub.business .con07 > ul > li .tit strong{font-size: 80px;color: #000000;font-family: "trumpgothicpro", sans-serif;height: 70px;}
#sub.business .con07 > ul > li .tit p{font-size: 30px;color: #000000;font-weight: 600}
#sub.business .con07 > ul > li ul{display: flex;flex-direction: column;gap: 20px}
#sub.business .con07 > ul > li > ul > li{position: relative;font-size: 22px;color: #000000;font-weight: 600;padding-left: 22px;}
#sub.business .con07 > ul > li > ul > li:before{content: '';display: block;width: 12px;height: 12px;background: url(/img/sub/no1_dot.png);position: absolute;left: 0;top: 6px;}
#sub.business .con07 > ul > li > ul > li span{display: block;font-size: 20px;color: #666666;font-weight: 400;margin-top: 10px;display: flex;gap: 0 7px;;align-items: center}
#sub.business .con07 > ul > li > ul > li span i svg{display: block}
#sub.business .con07 > ul > li > ul > li .img{margin-top: 10px;}
#sub.business .con07 > ul > li > ul > li em{display: inline-block;width: 75px;line-height: 26px;text-align: center;background: #CE3E73;border-radius: 6px;font-size: 18px;color: #FFFFFF;font-weight: 600;position: relative;top: -2px}
#sub.business .business01_con{position: relative;padding-bottom: 350px}
#sub.business .business01_con:before{content: '';display: block;width: 18px;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: url(/img/sub/ideal_line.jpg);background-size: 100% auto;z-index: -1}
#sub.business .business01_con .bg{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
#sub.business .business01_con .bg svg{display: block}
#sub.business.business01 .con_w .con{padding-left: 50px;}

#sub.business .con09{padding: 0 60px;padding-top: 160px;}
#sub.business .con09 .title {margin-bottom: 58px;text-align: center}
#sub.business .con09 .title strong{font-size: 100px;line-height: 1;color: #000000;font-family: "trumpgothicpro", sans-serif;}
#sub.business .con09 ul{display: flex;gap: 20px;}
#sub.business .con09 ul li{width: calc(20% - 16px);transition: 1s;position: relative}
#sub.business .con09 ul li .txt_w{position: absolute;left: 50%;transform: translateX(-50%);bottom: 40px;display: flex;align-items: flex-end;gap: 0 20px;transition: 0.7s}
#sub.business .con09 ul li .txt_w span{display: block;font-size: 30px;color: #FFFFFF;font-weight: 600;white-space: nowrap}
#sub.business .con09 ul li .txt_w strong{font-size: 80px;color: #FFFFFF;    font-family: "trumpgothicpro", sans-serif;height: 70px;display: none}
#sub.business .con09 ul li:hover .txt_w strong{display: block}
#sub.business .con09 ul li:hover .txt_w{left: 50px;transform: translateX(0)}
#sub.business .con09 ul li .img{width: 100%;height: 600px;overflow: hidden;border-radius: 20px;position: relative}
#sub.business .con09 ul li .img .img_w{position: absolute;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #000}
#sub.business .con09 ul li .img .img_w img{display: block;opacity: 0.5}
#sub.business .con09 ul li:hover .img .img_w img{opacity: 1}
#sub.business .con09 ul li:hover {width: calc(43.75% - 16px)}
#sub.business .con09 ul li:hover ~ li{width: calc(14.0625% - 16px)}

#sub.sunkwang .bg{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;opacity: 0}
#sub.sunkwang .bg.on{opacity: 1}
#sub.sunkwang .bg .img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.sunkwang .sub_visual05{position: relative;height: 100vh;/* 상단 30%, 우측 10%, 하단 5%, 좌측 1% */}
#sub.sunkwang .sub_visual05 img{display: block}
#sub.sunkwang .sub_visual05 .vis_wrap{width: 100%;height: 100%;position: absolute;top: 0;left: 0;clip-path: inset(150px calc(50% - 335px) 150px calc(50% - 335px)  round 20px);transition: 1s }
#sub.sunkwang .sub_visual05.on .vis_wrap{clip-path: inset(0 0 0 0 round 0); }
#sub.sunkwang .sub_visual05 .vis_wrap .vis_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.sunkwang .sub_visual05 .vis_tit{position: absolute;top: 50%;transform: translateY(-50%);width: 100%;left: 0;text-align: center}
#sub.sunkwang .sub_visual05 .vis_tit strong{font-size: 300px;letter-spacing: 70px;font-family: "trumpgothicpro", sans-serif;transition: 1s}
#sub.sunkwang .sub_visual05.on .vis_tit strong{letter-spacing: 0px}
#sub.sunkwang .sub_visual05 .vis_wrap .vis_tit strong{color: #fff}
#sub.sunkwang .step01{position: relative;z-index: 3}
#sub.sunkwang .step01.on{opacity: 0}
#sub.sunkwang .step01 .img_w{position: relative}
#sub.sunkwang .step01 .img_w .img{position: absolute;top: 0;left: 0;opacity: 0}
#sub.sunkwang .step01 .img_w .img01{position: relative;opacity: 1}
#sub.sunkwang .step01 .img_w img{display: block}
#sub.sunkwang .step02{position: relative;z-index: 3;}
#sub.sunkwang .step02.on .img_w{opacity: 0}
#sub.sunkwang .step02 .img_w{position: relative;height: 100vh;width: 100%;transition: }
#sub.sunkwang .step02 .img_w .img{position: absolute;top: 50%;left: 50%;opacity: 0;transform: translate(-50%,-50%)}
#sub.sunkwang .step02 .img_w .img01{position: relative;opacity: 1}
#sub.sunkwang .txt_w{position: absolute;width: 100%;height: 100vh;display: flex;justify-content: center;flex-direction: column;justify-content: center;gap: 20px 0;top: 0;z-index: 15;text-align: center}
#sub.sunkwang .txt_w strong{display: block;font-size: 50px;color: #FFFFFF;}
#sub.sunkwang .txt_w strong *{opacity: 0}
/*
#sub.sunkwang .step01, #sub.sunkwang .step02, .sub_visual05{display: none}
#sub.sunkwang .bg{opacity: 1}
*/
#sub.sunkwang .con03{padding: 0 60px;padding-bottom: 160px;}
#sub.sunkwang .con03 ul{border-top: 2px solid #fff;transform: translateY(120px);opacity: 0;transition: 1.2s}
#sub.sunkwang .con03.on ul{transform: translateY(0);opacity: 1;transition: 1.2s}
#sub.sunkwang .con03 ul li{display: flex;border-bottom: 1px solid #ffffff25;padding: 40px 0}
#sub.sunkwang .con03 ul li > div{width: 50%}
#sub.sunkwang .con03 ul li .tit{display: flex;gap: 20px;align-items: center}
#sub.sunkwang .con03 ul li .tit strong{font-size: 80px;color: #FFFFFF;font-family: "trumpgothicpro", sans-serif;height: 60px}
#sub.sunkwang .con03 ul li .tit span{display: block;color: #ffffff80;font-size: 24px;font-weight: 500 }
#sub.sunkwang .con03 ul li .info p{font-size: 30px;color: #FFFFFF;line-height: 45px;font-weight: 600;padding-top: 10px;}
#sub.orgin .orgin_in{height: 100vh;position: relative}
#sub.orgin .orgin_in .orgin_motion_w{width: 100vw;height: 100vh;position: absolute;top: 0;left: 0;transform: translateX(50%)}
#sub.orgin .orgin_in .orgin_motion_w .nameing{position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;display: flex;justify-content: center;align-items: center;gap: 0 24px}
#sub.orgin .orgin_in .orgin_motion_w .nameing .name_w{position: relative;}
#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name{position: absolute;width: 100%;text-align: center;top: -70px;opacity: 0}
#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name strong{display: block;font-weight: 400;font-size: 20px;color: #000000;}
#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name strong span{font-size: 24px;color: #000000;font-weight: 600}
#sub.orgin .orgin_in .orgin_motion_w .name02 .txt_name{top: -57px}
#sub.orgin .orgin_in .orgin_motion_w .name03 .txt_name{top: -83px}
#sub.orgin .orgin_in .orgin_motion_w .nameing .name_w > svg{opacity: 0.1}
#sub.orgin .orgin_in .orgin_motion_w .nameing .name_w .black{position: absolute;top: 0;left: 0;clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
#sub.orgin .orgin_in .orgin_motion_w .name01{transform: scale(1.75) translate(-10%, -80%)}
#sub.orgin .orgin_in .orgin_motion_w .name02{transform: scale(1.75) translate(10%, 80%)}
#sub.orgin .orgin_in .orgin_motion_w .name03{transform: scale(1.75) translate(20%, -190%)}
#sub.orgin .orgin_in .orgin_motion_w .name04{transform: scale(1.75) translate(40%, 90%)}
#sub.orgin .txt_content{position: absolute;left: 62%;top: 46%}
#sub.orgin .txt_content .txt_w{position: relative}
#sub.orgin .txt_content .txt_w > div{position: absolute}
#sub.orgin .txt_content .txt_w > div p{position: absolute;white-space: nowrap;font-size: 20px;line-height: 30px;color: #000000;top: 120px;}

#sub.orgin .txt_content .txt_w > div .tag span {
    display: flex;
    width: 100px;
    height: 100px;
    align-items: center;
    justify-content: center;
    border: 1px solid #0A0A0A;
    border-radius: var(--radius01);
    font-size: 60px;
    color: #DDDDDD;
    font-weight: 600;
    font-family: "trumpgothicpro", sans-serif;
    padding-top: 20px;
}

#sub.orgin .txt_content .txt_w > div .tag i{font-family: inherit;color: #000;font-weight: inherit}
#sub.orgin .txt_content .txt_w > div.txt_2 p{left: 50%;transform: translateX(-50%);text-align: center}
#sub.orgin .txt_content .txt_w > div.txt_3 .img{position: absolute;top: 205px;}
#sub.orgin .txt_content .txt_w > div.txt_2, #sub.orgin .txt_content .txt_w > div.txt_3{opacity: 0}
#sub.orgin .ori_bg{position: absolute;top: 0;left: 0;z-index: -1}
#sub.orgin .ori_bg i{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;background: linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1))}
#sub.museum .sub_wrap{height: 100vh;padding-top: 10px}
#sub.museum .ori_bg{position: absolute;top: 0;left: 0;left: 50%}
#sub.museum .ori_bg div{position: relative}
#sub.museum .ori_bg i{position: absolute;top: 0;left: 0;width: 50%;height: 100%;display: block;background: linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1))}
#sub.museum .his_content{height: 100vh;display: flex;align-items: center;margin-top: 3%;position: relative;z-index: 3;width: 50%;padding-left: 130px;}
#sub .sub_visual02 .loc{display: flex;justify-content: center}
#sub .sub_visual02 div.vis_title{overflow: hidden;padding-top: 7px}
#sub.orz .sub_con{padding-bottom: 0}
#sub.orz .sub_visual02 div{width: 100%}
#sub.orz .con01{padding: 0 20px;display: flex;justify-content: center}
#sub.orz .con01 img{max-width: 100%}
#sub .sub_visual02 .vis_title strong{transform: translateY(110%);display: block;text-align: center}
#sub .sub_visual02.on .vis_title strong{transform: translateY(0%);display: block;transition: 1s;opacity: 1}
#sub .sub_visual02 ul.loc01{transform: translateY(110%);;transition: 1s;opacity: 0}
#sub .sub_visual02.on ul.loc01{transform: translateY(0%);opacity: 1;transition-delay: 0.3s}
#sub.group .con01 .img_w{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.group .con01.on .img_w{transform: translateY(0%);opacity: 1;transition-delay: 0.6s}
#sub.group .con01 .txt_w{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.group .con01.on .txt_w{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}

#sub .vis_title strong{transform: translateY(100px);;transition: 1s;opacity: 0;display: block;text-align: left}
#sub .vis_title.on strong{transform: translateY(0%);opacity: 1;transition-delay: 0.0s}
#sub .vis_title ul{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub .vis_title.on ul{transform: translateY(0%);opacity: 1;transition-delay: 0.3s}
#sub.board .sub_wrap .sub_visual03 .loc{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.board .sub_wrap .sub_visual03.on .loc{transform: translateY(0%);opacity: 1;transition-delay: 0.3s}
#sub.benefit .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.benefit .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 0.6s}
#sub .tabs{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub .on .tabs{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}
#sub.esg .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.esg .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}
#sub.ethical .con01 .title{display: flex;justify-content: space-between;align-items: flex-end}
#sub.ethical .con01 .title span{font-size: 18px;color: #999999;}
#sub.cerf .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.cerf .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}

#sub .tab_list ul{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub .sub_visual03.on .tab_list ul{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}
#sub.board.gallery .sub_wrap .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.board.gallery .sub_wrap .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 1.2s}
#sub.contact .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.contact .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}
#sub.board.brosure .sub_wrap .con01{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.board.brosure .sub_wrap .con01.on{transform: translateY(0%);opacity: 1;transition-delay: 0.9s}
#sub.board .sub_wrap .sub_visual03 .loc div{display: inline-block}
#sub.location .con{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.location .con.on{transform: translateY(0%);opacity: 1;}
#sub.location .con.c01.on{transition-delay: 0.9s}

#sub.business .con09 .title{transform: translateY(100px);;transition: 1s;opacity: 0}
#sub.business .con09.on .title{transform: translateY(0%);opacity: 1;}
#sub.business .con09 ul{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.3s}
#sub.business .con09.on ul{transform: translateY(0%);opacity: 1;}

#sub.business .con02 .img_w:after{transition: 2s}
#sub.business .con02.on .img_w:after{height: 0}
#sub.business .con02 .txt strong{display: block;transform: translateY(110%);;transition: 1s;opacity: 0}
#sub.business .con02.on .txt strong{transform: translateY(0%);opacity: 1;transition-delay: 0.3s}
#sub.board.museum .sub_wrap .sub_visual03{}

#sub .sb_title p{font-size: 20px;color: #333333;margin-top: 24px; line-height: 1.75em; }

#sub.ci .ci_motion_wrap{position: relative;top: 0;left: 0;width: 100%;height: 100vh;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{position: absolute;display: flex}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tag span {
    display: flex;
    width: 100px;
    height: 100px;
    align-items: center;
    justify-content: center;
    border: 1px solid #0A0A0A;
    border-radius: var(--radius01);
    font-size: 60px;
    color: #DDDDDD;
    font-weight: 600;
    font-family: "trumpgothicpro", sans-serif;
    padding-top: 20px;
}
#sub .scroll_in{position: absolute;right: 0;transform: translateX(50%);top: 50%}
#sub .scroll_in .wr{position: relative}
#sub .scroll_in .wr div{display: flex;justify-content: center;gap: 0 10px;}
#sub .scroll_in .wr div svg{display: block}
#sub .scroll_in .wr div strong{color: #000000;font-size: 20px;font-family: "trumpgothicpro", sans-serif;}
#sub .scroll_in .wr .prog{width: 200px;height: 1px;background: #DDDDDD;margin-top: 13px;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{gap: 0 30px;opacity: 0}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tag span i{font-family: inherit;color: #000;font-weight: inherit}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit{padding-top: 15px;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit div{display: flex;align-items: flex-end;gap: 0 10px;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit div strong{font-size: 60px;color: #000000;font-family: "trumpgothicpro", sans-serif;;height: 50px;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit div span{font-size: 22px;font-weight: 600;color: #000000;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit p{font-size: 20px;line-height: 30px;color: #000000;font-weight: 400;;;margin-top: 10px;}
#sub.ci .ci_motion_wrap .basket{position: absolute;left: 50%;margin-left: -648px;top: -155px;transform: translateY(-100%)}
#sub.ci .ci_motion_wrap .truck{position: absolute;left: 50%;margin-left: -678px;bottom: 0;transform: translateX(-150%);z-index: 3}
#sub.ci .ci_motion_wrap .warehouse{position: absolute;right: 0%;bottom: 0;transform: translateX(100%);z-index: 2}
#sub.ci .ci_motion_wrap .ci_img{position: absolute;}
#sub.ci .ci_motion_wrap .ci_img{top: 50%;transform: translateY(-50%);right: 0;position: absolute}
#sub.ci .ci_motion_wrap .ci_content .bg{opacity: 0}
#sub.ci .ci_motion_wrap .ci_wrapper{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.ci .ci_motion_wrap .ci_wrapper .wrapper2{transform: scale(2.2) translateX(33%)}
#sub.ci .ci_motion_wrap .ci_wrapper .ci_sunkwang_img{position: absolute;top: 0;left: 0;width: 100%}
#sub.ci .ci_motion_wrap .ci_wrapper .ci_sunkwang_img img{width: 100%;position: relative;left: 1px;top: 0}
#sub.ci .ci_motion_wrap .ci_wrapper .ci_sunkwang_img img{width: 100%;position: relative;left: 1px;top: 0}
#sub.ci .ci_motion_wrap .ci_wrapper .ci_img00{position: absolute;top: 0;left: 0;opacity: 0}
#sub.ci.board .sub_wrap .sub_visual03{padding-top: 0;height: 100vh;display: flex;flex-direction: column;justify-content: center;position: absolute;top: 0}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w01{left: 50%;margin-left: -658px;bottom: 142px;transform: translateX(200%)}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w02{left: 50%;margin-left: -746px;top: 40%;}
#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w03{left: 50%;margin-left: 283px;top: 30%;}
#sub.ci .ci_motion_wrap .dot{width: 95px;height: 95px;border-radius: 50%;border: 6px solid #CE3E73;background: rgba(206,62,115,0.1);position: absolute}
#sub.ci .ci_motion_wrap .basket .dot{left: 17%;bottom: 20%;}
#sub.ci .ci_motion_wrap .truck .dot{left: 74%;bottom: -6%;width: 137px;height: 137px;}
#sub.ci .ci_motion_wrap .warehouse .dot{left: 53%;bottom: 72%;width: 231px;height: 231px;}
#sub.ci .ci_motion_wrap .sunkwang_txt{top: 50%;transform: translateY(-50%);position: absolute;left: 50%;margin-left: -253px;opacity: 0}
#sub.ci .ci_motion_wrap .mobile_sk{display: none}
#sub.ci .ci_motion_wrap .ci_info ul{display: flex;justify-content: center}
#sub.ci .ci_info{padding-top: 80px;padding-bottom: 180px;}
#sub.ci .ci_info ul{display: flex;justify-content: center;gap:0 20px;}
#sub.ci .ci_info ul li{width: 500px;height: 225px;border: 1px solid #999999;border-radius: 10px;padding: 40px 50px;}
#sub.ci .ci_info ul li div{display: flex;gap: 0 10px;margin-bottom: 12px;align-items: flex-end}
#sub.ci .ci_info ul li div strong{display: block;font-family: "trumpgothicpro", sans-serif;font-size: 60px;color: #000000;height: 50px;}
#sub.ci .ci_info ul li div span{font-weight: 600;color: #000000;font-size: 24px;}
#sub.ci .ci_info ul li p{font-size: 20px;line-height: 30px;color: #000000;}
#sub.ci .ci_list .con{padding-bottom: 130px;}
#sub.ci .ci_list .con .title {display: flex;align-items: center;padding-bottom: 20px;border-bottom: 1px solid #DDDDDD;margin-bottom: 40px;gap: 0 10px}
#sub.ci .ci_list .con .title strong{font-size: 60px;color: #000000;font-family: "trumpgothicpro", sans-serif;}
#sub.ci .ci_list .con .title span{width: 84px;height: 46px;display: flex;align-items: center;justify-content: center;background: #CE3E73;border-radius: 8px;font-size: 24px;font-weight: 600; position: relative;top: -5px;color: #fff}
#sub.ci .ci_list .con ul{display: flex;gap: 0 60px;}
#sub.ci .ci_list .con ul li img{display: block;max-width: 100%}

#sub.ideal .con02 .c{opacity:0}
#sub.ideal .con02 .c01{transform: translateX(-100px)}
#sub.ideal .con02 .c02{transform: translateX(100px)}
#sub.ideal .con02 .c.on{opacity: 1;transform: translateX(0);transition: 1.2s}
#sub.ideal .con02 .c strong.on{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
#sub.ideal .con02 .c.on strong.on{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transition: 1s;transition-delay: 0.3s}
/*#sub.business .con01, #sub .sub_visual04{display: none}*/

#sub.business .con07 .no1{transition: 0.8s;margin: 0 auto}
#sub.business .con07.on .no1{width: 550px}
#sub.business .con07 .no1 div{transition: 0.8s}
#sub.business .con07.on .no1 div{transform: translateY(-77%)}
#sub.business .con07 .title{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.3s}
#sub.business .con07.on .title{transform: translateY(0%);opacity: 1;}
#sub.business .con07 .no1_w .line_w img{transform: translateY(-100%);;transition: 1s;opacity: 0;transition-delay: 0.6s}
#sub.business .con07.on .no1_w .line_w img{transform: translateY(0%);opacity: 1;}

#sub.business .con07 > ul > li{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.3s}
#sub.business .con07.on > ul > li{transform: translateY(0%);opacity: 1;}
#sub.business .con07.on > ul > li:nth-child(1){transition-delay: 0.6s}
#sub.business .con07.on > ul > li:nth-child(2){transition-delay: 0.9s}
#sub.business .con07.on > ul > li:nth-child(3){transition-delay: 1.2s}

#sub.orz .sub_visual02 .loc{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.3s}
#sub.orz .sub_visual02.on .loc{transform: translateY(0%);opacity: 1;}

#sub.ceo .con01 > div{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.0s}
#sub.ceo .con01.on > div{transform: translateY(0%);opacity: 1;}
#sub.ceo .con01.on > div:nth-child(2){transition-delay: 0.3s}
#sub.ceo .sub_con:before{transition: 2s;height: 0}
#sub.ceo .sub_con.on:before{height: 100%}

#sub.ideal .con01 .tit strong{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.0s}
#sub.ideal .con01.on .tit strong{transform: translateY(0%);opacity: 1;}
#sub.ideal .con01 i{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.3s}
#sub.ideal .con01.on i{transform: translateY(0%);opacity: 1;}
#sub.ideal .con01 .txt{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.6s}
#sub.ideal .con01.on .txt{transform: translateY(0%);opacity: 1;}
#sub.management .con03 .hook svg{transform: translateY(-100%);transition: 1s}
#sub.management .con03.on .hook svg{transform: translateY(0%);}
#sub.management .con03 ul li{transform: translateY(100px);;transition: 1s;opacity: 0;transition-delay: 0.6s}
#sub.management .con03.on ul li{transform: translateY(0%);opacity: 1;}
#sub.management .con03.on ul li:nth-child(1){transition-delay: 0.6s}
#sub.management .con03.on ul li:nth-child(2){transition-delay: 0.9s}
#sub.management .con03.on ul li:nth-child(3){transition-delay: 1.2s}
@media (max-width: 1750px) {
    #sub.business .con02 .txt strong{font-size: 200px}
    #sub.business .con01 .box_in .wrap .back .w .txt{padding: 20px}
    #sub.business .con01 .box_in .wrap .back .w .txt p br{display: none}
    #sub .sub_visual03 .tab_list{position: static}
    #sub .sub_visual03 .tab_list{height: auto}
    #sub .tab_list ul{flex-direction: row;justify-content: flex-start;flex-wrap: wrap}
    #sub .sub_visual03 .tab_list{padding-top: 40px;}
    #sub.ceo .con01 .txt p br{display: none}
    #sub.ceo .con01 .txt p{word-break: keep-all}
    #sub .sub_visual04 .txt_in strong{font-size: 120px;}
    #sub .infograpic_visual, #sub .sub_visual04.on .img_visual{padding: 20px;}
    #sub.business .business_title strong{font-size: 80px;}
    #sub.business .con_w .title_w{padding-left: 20px;}
    #sub.business .con_w .con{padding-right: 20px;width: 740px;}
    #sub.business .con_w .title_w {width: calc(100% - 740px);}
    #sub.business .con01 .title strong{font-size: 70px;}
    #sub.sunkwang .sub_visual05 .vis_tit strong{font-size: 180px;letter-spacing: 40px}
	#sub.ci .ci_motion_wrap .ci_content .bg img{width: 600px;}
	#sub.ci .ci_motion_wrap .ci_wrapper svg{width: 500px;height: auto}
	#sub.ci .ci_motion_wrap .ci_wrapper img{width: 100%}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w01{margin-left: 0;left: 20px;bottom: 20px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w02{margin-left: 0;left: 20px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w03{left: auto;margin-left: 0;right: 20px;top: 200px}
	#sub.ci .ci_motion_wrap .warehouse img{width: 600px}
	#sub.ci .ci_motion_wrap .basket{margin-left: 0;left: 20px;}
	#sub.ci .ci_motion_wrap .truck{margin-left: 0;left: 20px;}
	#sub.business .info_text_list > ul > li, #sub.business .info_text_list > ul.info_list > li{padding: 20px;height: auto}
	#sub.business .info_text_list ul li ul li br{display: none}
	#sub.business .info_text_list > ul > li > i img{width: 150px;}
    #sub.business .con06 .list > ul > li .img img{width: 300px;}

}
@media (max-width: 1620px) {
    #sub.business .info_text_list .list > ul > li{width: 100%}
    #sub.ci .ci_list .con ul{gap: 20px}
	#sub.ideal .con02 .c .con_in .box p{font-size: 23px;line-height: 1.5}
	#sub.ideal .con02 .c .con_in .box:after{width: 30px}
	#sub.ideal .con02 .c.c01 .con_in .box:after{;right: -30px}
	#sub.ideal .con02 .c.c02 .con_in{padding-left: 30px;}
	#sub.ideal .con02 .c .con_in .box{padding: 40px;height: auto}
	#sub.ideal .con02 .c .con_in{padding-right: 30px;}
	#sub.ideal .con02 .c .con_in .box .tit strong{font-size: 100px}
	#sub.ci .ci_motion_wrap .sunkwang_txt svg{width: 600px;height: auto}
    #sub.business .con07 .no1 strong{font-size: 240px;height: 240px;padding-top: 30px}
    #sub.business .con07 .title strong{font-size: 70px;}
    #sub.business .con07 .no1_w .line_w img{width: 900px;}
    #sub.business .con07 .no1{height: 240px;}
    #sub.business .con07 > ul > li .tit p{font-size: 20px;}
    #sub.business .con07 > ul > li .tit strong{font-size: 60px;height: 50px;}
    #sub.business .con07 > ul > li > ul > li{font-size: 19px;}
    #sub.business .con07 > ul > li ul{gap: 10px }
    #sub.business .con07 > ul > li > ul > li .img img{width: 100%}
    #sub.business .con07 > ul > li > ul > li span{font-size: 16px;}
    #sub.business .con07{padding: 120px 20px;}
    #sub.sunkwang .txt_w strong{font-size: 30px;}
    #sub.ceo .con01 .title strong br{display: none}
    #sub.ceo .con01 .title strong{word-break: keep-all}
    #sub .vis_title strong{font-size: 120px;line-height: 1}
    #sub.group .con01{padding: 0 20px;gap: 20px }
    #sub.group .con01 > div {width: calc(50% - 10px);}
    #sub.group .con01 .txt_w{padding: 20px }
    #sub.group .con01 .txt_w ul li{font-size: 16px;line-height: 1.5}
    #sub.group .con01 .txt_w .txt strong{font-size: 24px;margin-bottom: 20px;}
    #sub.group .con01 .txt_w .link_w .link a{height: 45px}
    #sub.group .con01 .txt_w .link_w .link a i svg{height: 45px;width: auto}
    #sub.group .con01 .txt_w .link_w .link p{font-size: 16px}
    #sub .sub_visual01 .sub_txt > div strong{font-size: 120px;}
    #sub .sub_visual01 .sub_txt > div .loc{top: 140px}
    #sub.benefit .sub_wrap:before{display: none}
    #sub.benefit .con01 ul li strong{font-size: 20px;}
    #sub.benefit .con01 ul li p{font-size: 16px;line-height: 1.5}
    #sub.benefit .con01 ul li i{margin: 20px auto}
    #sub.benefit .con01 ul li > div svg{width: 70px;height: auto}
    #sub.benefit .vis_title ul{display: none}
    #sub.benefit .vis_title strong{font-size: 80px}
    #sub.board .sub_wrap .sub_visual03{padding-left: 20px}
    #sub .sub_visual01.on .vis_img {
    transform: translateY(260px);
        clip-path: inset(260px 0 0 0);}
    #sub.benefit .con01 ul li{height: auto}
    #sub.benefit .con01 ul li > div{padding: 20px 0;padding-bottom: 40px;}
    #sub.board .sub_wrap .sub_con02{padding-right: 20px;}
    #sub.ceo .con01 .title strong{font-size: 36px;line-height: 1.5}
    #sub.ceo .con01 .txt p{font-size: 16px;line-height: 1.5}
    #sub.ceo .con01 .txt{padding-left: 20px;gap: 20px;}
    #sub.ideal .con01 .tit strong{font-size: 80px;}
    #sub.ideal .con01 .txt strong{font-size: 40px;}
    #sub.ideal .con01 .txt p{font-size: 16px;line-height: 1.7}
    #sub.ideal .con01{gap: 0 30px;}
    #sub.management .con03 .hook{left: 11.6%}
    #sub.ideal .con01 i{width: 50px;}
    #sub.management .con03 ul li p{word-break: keep-all;font-size: 16px;padding: 0 20px}
    #sub.management .con03 ul li p br{display: none}
    #sub.sunkwang .txt_w{gap: 10px}
    #sub.sunkwang .con03 ul li .tit strong{font-size: 60px;height: 48px;}
    #sub.sunkwang .con03 ul li .tit span{font-size: 20px;}
    #sub.sunkwang .con03 ul li .info p{font-size: 20px;line-height: 1.7}
    #sub.sunkwang .con03 ul li .info p br{display: none}
    #sub.sunkwang .con03{padding: 0 20px }
    #sub.business .con01 .box_in .wrap .back .w .txt p br{display: none}
    #sub.business .con01 .box_in .wrap .back .w .txt p{font-size: 15px;line-height: 1.7}
    #sub.business .con01 .box_in .wrap .back .w .txt{padding: 10px;padding-bottom: 0}
    #sub.business .con01 .box_in .wrap .back{padding: 10px;}
    #sub.business .con02 .txt strong{font-size: 170px}
    #sub.business .con03 .step > ul > li .step_tag *{font-size: 60px;}
    #sub.business .con03 .step > ul > li .step_tag span{width: 80px;height: 80px;}
    #sub.business .con03 .step > ul > li .txt strong{font-size: 20px;}
    #sub.business .con03 .step > ul > li .txt ul li{font-size: 16px;line-height: 1.5;word-break: keep-all}
    #sub.business .con03 .step > ul > li .txt strong{margin-bottom: 15px}
    #sub.business .con03 .step > ul > li .step_tag{margin-bottom: 20px;padding-bottom: 20px}
    #sub.business .con03 .step > ul > li{padding: 30px;height: auto;min-height: 0}
    #sub.business .con01 .box_in .box{width: 100%}
    #sub.business .big_slide img{width: 100%}
    #sub.business .tb svg{width: 100%;height: auto}
	#sub.business .con09{padding: 0 20px;padding-top: 80px;}
	#sub.business .con09 ul li .img{height: 400px;}
	#sub.business .con09 ul li .img .img_w img{height: 400px}
	#sub.business .con09 ul li:hover .txt_w strong{display: none}
	#sub.business .con09 ul li .txt_w span{font-size: 20px;}
	#sub.business .con09 .title strong{font-size: 70px}
	#sub.business .con09 .title{margin-bottom: 30px;}
	#sub.business .business_title .tab_list{display: none}

}
@media (max-width: 1400px) {
	#sub.business .tab_list{display: none}

    #sub.board .sub_wrap{display: block}
    #sub.board .sub_wrap .sub_con02{width: 100%;padding: 0 20px; padding-top: 60px}
    #sub.benefit .con01{padding-left: 20px;}
    #sub.board .sub_wrap .sub_visual03{width: 100%}
    #sub.board .sub_wrap .sub_visual03{padding-top: 130px;}
   #sub .tabs ul{display: flex}
    #sub.business .con01 .box_in{position: static;transform: none}
    #sub.business .con01{height: auto;padding: 60px 0; }
    #sub.business .con01 .box_in .box_con{margin-top: 40px;}
    #sub.business .con01 .title{padding-top: 80px;}
    #sub.business .con_w{flex-wrap: wrap}
    #sub.business .con_w .title_w{width: 100%}
    #sub.business .con_w .con{width: 100%;padding-right: 20px;padding-left: 20px;padding-top: 50px;}
    #sub.business .con01 .box_in{padding: 0 20px}
    #sub.business .con01 .box_in .box_con{gap: 10px;}
    #sub.business .con01 .box_in .box > div{transition: 1s}
    #sub.business .con01.on .box_in .box > div{transform: rotateY(180deg)}
    #sub.business .con01 .box_in .wrap .back .w .txt strong{font-size: 18px}
    #sub.business .con01 .box_in .wrap .back .w .txt p{font-size: 14px;line-height: 1.5;margin-top: 5px;}
	#sub.ci .ci_info ul{padding:  0 20px;}
	#sub.ci .ci_info ul li p{word-break: keep-all}
	#sub.business .info_text_list ul li strong br{display: none}
	#sub.business .info_text_list ul li p br{display: none}
    #sub.business .business01_con:before{display: none}

	#sub.business .info_text_list > ul > li {height: auto;padding: 20px}
}
@media (max-width: 1060px) {
    #sub.management .con03 ul li .icon{margin-bottom: 15px}
    #sub.management .con03 ul li .icon svg{width: 60px;height: auto}
    #sub.management .con03 ul li strong{font-size: 24px;}
    #sub.management .con03 ul li > div{padding-top: 40px;height: 400px;}
    #sub.management .con03 ul li p{;line-height: 1.5}
    #sub.ideal .con01{flex-direction: column;justify-content: flex-start;align-items: flex-start;gap: 15px;}
    #sub.ideal .con01 .tit strong br{display: none}
    #sub.group .con01{flex-direction: column;justify-content: center;align-items: center}
    #sub.group .con01 > div{width: 100%;max-width: 870px}
    #sub.group .con01 .txt_w .link_w{padding-top: 20px;margin-top: 20px;}
    #sub.view .view_title p{position: static;margin-top: 15px}
    #sub.view .view_title{padding-right: 0}
    #sub .tabs ul li a{padding: 0}
    #sub .tabs ul li a i{display: none}
    #sub .tabs ul li{flex: 1 1 auto;}
    #sub .tabs{padding: 0 20px;}
    #sub .tabs ul li.on a{padding: 0;border-radius: 20px;}
    #sub .tabs ul li a{height: 40px;font-size: 13px;align-items: center}
    #sub .tabs ul li.on a{height: 40px;font-size: 13px}
    #sub .tabs ul li a{justify-content: center}
    #sub .tabs ul{width: 100%;margin-left: 0}



}
@media (max-width: 980px) {
	#sub .sub_visual04 .txt_in strong{font-size: 100px;}
	#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name{top: -20px !Important}
	#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name strong span{font-size: 12px;}
	#sub.orgin .orgin_in .orgin_motion_w .nameing .txt_name strong{font-size: 11px;}
	#sub.business .con07.on .no1 div{transform: translateY(-83%)}
	#sub.business.business01 .business_title .img_w{max-width: 100%;padding-right: 20px;}
	#sub.business .info_text_list .w .txt{width: 100%}
	#sub.business .info_text_list .w .txt{padding-left: 0;padding-top: 10px}
	#sub.business .info_text_list .w .num span, #sub.business .info_text_list .info_list .w .num span{width: 70px;height: 70px;font-size: 40px;padding-top: 15px;}
	#sub.business .info_text_list .w{height: auto;justify-content: flex-start;align-items: flex-start}
	#sub.business .info_text_list .w{flex-direction: column}
	#sub.business .business01_con:before{display: none}
	#sub.business.business01 .con_w .con{padding-left: 20px}
	#sub.business .info_text_list ul li strong{font-size: 16px;}
	#sub.business .info_text_list ul li p{font-size: 13px;line-height: 1.5}
	#sub.business .info_text_list ul li p{margin-top: 5px}
	#sub.ci .ci_info ul li{height: auto}
	#sub.ci .ci_info ul li{padding: 20px;}
	#sub.ci .ci_info ul li div strong{font-size: 40px;height: 30px;}
	#sub.ci .ci_info ul li div span{font-size: 14px;}
	#sub.ci .ci_info ul li p{font-size: 13px;line-height: 1.5}
	#sub.ci.board .sub_wrap .sub_visual03{height: auto;padding-top: 90px;}
	#sub.ci .ci_motion_wrap .ci_wrapper .wrapper2{transform: scale(1)}
	#sub .scroll_in{display: none}
	#sub.ci .ci_motion_wrap .ci_img{right: auto;left: 50%;transform: translateX(-50%) ;top: 70px;}
	#sub.ci .ci_motion_wrap .ci_wrapper svg{width: 420px;}
	#sub.ci .vis_title strong br{display: none}
	#sub.ci .ci_motion_wrap .basket{transform: none;left: 50%;transform: translateX(-50%);top: 330px;;opacity: 0;z-index: 5}
	#sub.ci .ci_motion_wrap .basket img{width: 200px}
	#sub.ci .ci_motion_wrap .dot{width: 40px;height: 40px;border: 3px solid #CE3E73;}
	#sub.ci .ci_motion_wrap .truck{left: 50%;transform: translateX(-50%);top: 500px;;bottom: auto;opacity: 0}
	#sub.ci .ci_motion_wrap .truck img{width: 350px;}
	#sub.ci .ci_motion_wrap .truck .dot{width: 65px;height: 65px;}
	#sub.ci .ci_motion_wrap .warehouse{right: 50%;transform: translateX(50%);top: 500px;}
	#sub.ci .ci_motion_wrap .warehouse img{width: 350px;}
	#sub.ci .ci_motion_wrap .warehouse .dot {left: 53%;bottom: 86%;width: 81px;height: 81px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{width: 100vw;left: 0;transform: none;bottom: 20px;top: auto}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{flex-direction: column;align-items: center;justify-content: center;text-align: center}
	#sub.ci .ci_motion_wrap .warehouse{opacity: 0}
	#sub.ci .ci_motion_wrap .mobile_sk{display: flex;top: 50%;transform: translateY(-50%);width: 90%;left: 0;opacity: 0;position: absolute;z-index: 11;left: 5%}
	#sub.ci .ci_motion_wrap .mobile_sk svg{width: 100%;height: auto;display: block;margin: 0 auto}
	#sub.business .con09 .title strong{font-size: 45px;}
    #sub.ci .ci_list .con .title strong{font-size: 24px;}
	#sub.ci .ci_list .con .title span {width: 54px;height: 26px;top: -4px;border-radius: 4px;font-size: 14px;}
    #sub.ci .ci_list .con .title{padding-bottom: 10px;margin-bottom: 20px;}
    #sub.ci .ci_list .con{padding-bottom: 60px;}
}
@media (max-width: 960px) {
    #sub.business .con01 .box_in .box{height: auto}
    #sub.business .con01 .box_in .box_con{flex-wrap: wrap}
    #sub.sunkwang .sub_visual05 .vis_tit strong{font-size: 80px;letter-spacing: 10px;}
    :root {
      --radius01: 5px;
    }
    #sub.business .con03 .step > ul > li .step_tag span{width: 50px;height: 50px;padding-top: 12px;}
    #sub.business .con03 .step > ul > li .step_tag{margin-bottom: 15px;padding-bottom: 15px;}
    #sub.business .business_title strong{font-size: 60px}
    #sub.business .con01 .title strong{font-size: 60px;}
    #sub.business .business_title p{font-size: 16px;}
    #sub .sub_visual04{padding-top: 65px;}
    #sub.business .con03 .step > ul > li .step_tag *{font-size: 32px;}
    #sub .sub_visual04 .img_visual, #sub .infograpic_visual{height: calc(100vh - 65px)}
    #sub.gallery .list ul li a .tit i svg{height: 15px;width: auto}
    #sub.gallery .list ul li a .tit i{margin-left: 5px;position: relative;top: 2px;}
    #sub.board_list .list > ul > li > a .tit strong{font-size: 14px;}
    #sub.board_list .list > ul > li > a .date span{font-size: 13px;}
    #sub.board_list .list > ul > li > a .tit{padding-right: 80px;}
    #sub.board_list .list > ul > li > a{padding: 0 20px;}
    #sub.board_list .list > ul > li > a .date{right: 20px;}
    #sub.board_list .list > ul > li > a .tit em, #sub.view .view_title strong em{font-size: 13px;width: 60px;height: 30px;margin-right: 10px;}
    #sub.board_list .list > ul > li > a{height: 50px;}
    #sub.group .con01 .txt_w .txt strong{font-size: 17px;}
    #sub.group .con01 .txt_w ul{gap: 7px}
    #sub.group .con01 .txt_w ul li{font-size: 13px;padding-left: 66px;}
    #sub.group .con01 .txt_w .txt strong{margin-bottom: 15px;}
    #sub.group .con01 .txt_w .link_w .link p{font-size: 13px;}
    #sub.group .con01 .txt_w .link_w .link a{padding-left: 45px;}
    #sub .sub_con{padding-top: 60px;padding-bottom: 60px;}
    #sub .sub_visual02 div{width: 100%}
    #sub .sub_visual02 ul.loc01{gap: 5px;}
    #sub .sub_visual02 ul.loc01 li a{height: 30px;font-size: 13px;}
    #sub .vis_title strong{font-size: 70px}
    #sub .sub_visual02 ul.loc01{margin-top: 15px}
    #sub .sub_visual02{padding-top: 150px;}
    #sub.benefit .sub_wrap .bg svg{width: 900px;height: auto}
    #sub.benefit .sub_wrap{padding-bottom: 0}
    #sub .sub_visual01 .sub_txt > div strong{font-size: 70px;}
    #sub .loc ul li{white-space: nowrap;font-size: 13px;}
    #sub .loc ul{gap: 0 10px;height: 40px;}
    #sub .sub_visual01 .sub_txt > div .loc{top: 80px}
    #sub .sub_visual01.on .sub_txt {
        transform: translateY(-265px);}
        #sub .sub_visual01.on .vis_img {
    transform: translateY(170px);
        clip-path: inset(170px 0 0 0);}
    #sub .sub_visual01{height: 100vh}
    #sub.benefit .vis_title strong{font-size: 45px;}
    #sub .sub_visual01{overflow: hidden}
    #sub .paging ul li a{font-size: 13px;width: 28px;height: 28px;}
    #sub .sch input{width: 260px;height: 28px;font-size: 13px;}
    #sub.view .view_title strong{font-size: 18px;}
    #sub.view .view_title p{font-size: 12px;}
    #sub.view .view_title{padding-bottom: 10px;}
    #sub.view .view_con{padding: 10px 0;min-height: 300px;}
    #sub.view .view_file{padding: 20px 0}
    #sub.view .view_file ul li a, #sub.esg .file_list ul li a{height: 50px;}
    #sub.view .view_file ul li a strong, #sub.esg .file_list ul li a strong{font-size: 14px;padding-left: 20px;}
    #sub.view .view_file ul li a i svg, #sub.esg .file_list ul li a i svg{height: 50px;width: auto}
    #sub.view .view_file ul li a i{right: 0}
    #sub.board .sub_wrap .sub_con02{padding-bottom: 60px;}
    #sub.view .view_file ul li a{padding-right: 60px}
    #sub .tabs{padding-left: 0}
    #sub.esg .esg_slide .wrap .img img{height: 230px;}
    #sub.esg .esg_slide .wrap .txt strong{font-size: 17px;}
    #sub.esg .esg_slide .wrap .txt p{font-size: 13px;}
    #sub.esg .esg_slide .wrap .txt{padding: 20px;padding-right: 0}
    #sub.esg .esg_slide .wrap .txt i svg{width: 30px;height: auto;}
    #sub.esg.board .sub_wrap .sub_visual03, #sub.esg.board .sub_wrap .sub_con02{padding-top: 60px;}
    #sub.esg .title{padding-bottom: 15px;padding-left: 0}
    #sub.esg .title strong{font-size: 20px}
    #sub.esg_ceo .con01 .txt{padding: 20px;gap: 10px;}
    #sub.esg_ceo .con01 .txt p br{display: none}
    #sub.esg_ceo .con01 .txt p{word-break: keep-all;line-height: 1.5;font-size: 14px;}
    #sub.esg_ceo .con01 .txt strong{font-size: 16px;gap: 0 5px;}
    #sub.esg_ceo .con01 .txt strong i{height: 10px}
    #sub.esg_ceo .con01 .txt strong img{height: 40px}
    #sub.esg_ceo .con01 .txt strong{margin-top: 20px;}
    #sub.esg .file_list ul li a{padding-left: 20px;padding-right: 0}
    #sub.esg .file_list ul li a strong{padding-left: 0}
    #sub.ethical .con01 .title span{font-size: 12px;}
    #sub.ethical .con01 .con_w p{font-size: 13px;margin: 10px 0;line-height: 1.7;word-break: keep-all}
    #sub.ethical .con01 .con_w p br{display: none}
    #sub.ethical .con01 .con_w strong{font-size: 15px;margin-bottom: 10px;}
    #sub.ethical .con01 .con_w .con > ul > li, #sub.ethical .con01 .con_w .con > ul > li ul li{font-size: 13px;line-height: 1.5;word-break: normal}
    #sub.ethical .con01 .con_w .con > ul > li br{display: none}
    #sub.ethical .con01 .con_w .con > ul > li:before{top: 9px;width: 2px;height: 2px;}
    #sub.ethical .con01 .con_w .con > ul, #sub.ethical .con01 .con_w .con > ul > li ul{gap:5px}
    #sub.ethical .con01 .con_w{gap: 25px }
    #sub.ethical .con01 .con_w .con > ul > li ul li:before{top: 9px;}
    #sub.esg .file_list{padding-bottom: 20px;margin-bottom: 20px;}
    #sub.ethical .con01 .tit > strong{font-size: 16px;line-height: 1.7;word-break: keep-all}
    #sub.ethical .con01 .tit > strong br{display: none}
    #sub.ethical .con01 .txt{padding-top: 20px;}
    #sub.ethical .con01 .tit{padding-bottom: 20px;}
    #sub.board .sub_wrap .sub_con02{min-height: auto}
    #sub.cerf .con01 ul li .tag span{padding: 10px 20px;font-size: 14px; }
    #sub.cerf .con01{padding-left: 0}
    #sub.cerf .con01 ul{gap: 10px }
    #sub .tab_list ul li{flex: 1 1 auto}
    #sub .tab_list ul li a{font-size: 14px;width: 100%}
    #sub .tab_list ul li a br{display: none}
    #sub .sub_visual03 .tab_list{padding-right: 20px}
   #sub .sub_visual03 .tab_list.tab_list2 ul li a{height: 45px;}
    #sub.gallery .list ul li{width: calc(50% - 5px)}
    #sub.gallery .list ul li a .tit strong{font-size: 15px;line-height: 1.7}
    #sub.gallery .list ul li a .tit{padding: 10px 0 0 0 }
    #sub.gallery .list ul li a{padding: 10px;}
    #sub.gallery .list ul{gap: 10px;}
    #sub.brosure .list ul li a .txt i{width: 60px;height: 60px;}
    #sub.brosure .list ul li a .txt{height: auto}
    #sub.brosure .list ul li a .txt .txt_w strong{font-size: 16px}
    #sub.brosure .list ul li a .txt .txt_w strong span{font-size: 13px;height: 20px;width: 30px;}
    #sub.brosure .list ul li a .txt .txt_w p{font-size: 13px;}
    #sub.brosure .list ul li a .txt{padding: 20px;}
    #sub.brosure .list ul li a .txt i svg{width: 28px;height: auto}
    #sub.brosure .list ul li a .tab .tab_in span{width: 100px;height: 30px;font-size: 11px;}
    #sub.brosure .list ul li a .tab .tab_in, #sub.brosure .list ul li a .tab{padding-right: 20px;}
    #sub.board_list .list > ul > li > a .date svg{height: 40px;width: auto}

    #sub.financial .con01 .table_wrap .con ul li, #sub.financial .con01 .table_wrap .title ul li{font-size: 12px;height: 40px;}
    #sub.financial .con01 .table_wrap .con > div:nth-child(1) ul li {border-radius: 5px 0 0 5px;}
   #sub.financial .con01 .table_wrap .con > div:last-child ul li {border-radius: 0 5px 5px 0;}
    #sub.financial .con01 .table_wrap .tit{height: 40px;font-size: 13px;}
    #sub .f_tit strong{font-size: 20px}
    #sub .f_tit span{font-size: 12px}
    #sub .f_tit{padding-bottom: 10px;}
    #sub.financial .con01 .table_wrap2{gap: 5px;}
    #sub.financial .con01 .table_wrap ul{gap: 5px;}
    #sub.financial .con01 .table_wrap.all{margin-top: 10px;padding-top: 10px;}
    #sub.financial .con01 .table_wrap .title ul li{line-height: 1.5}
    #sub.ceo .sub_con:before{display: none}
    #sub.ceo .con01{flex-direction: column;gap: 30px}
    #sub.ceo .con01 > div{width: 100%}
    #sub.ceo .con01 .txt{padding-left: 0}
    #sub.ceo .con01 .title strong{font-size: 24px;}
    #sub.ceo .con01 .txt p{font-size: 13px;}
    #sub.ceo .con01 .txt{gap: 10px;}
    #sub.ceo .con01 .txt strong{font-size: 16px;}
    #sub.ceo .con01 .txt strong em img{width: 65px;}
    #sub.ceo .con01 .txt strong{margin-top: 25px;gap: 0 10px;}
    #sub.ceo .con01 .txt strong em{margin-left: 15px;}
    #sub.ceo .sub_con .bg svg{width: 900px;height: auto}
    #sub.ceo .con01{padding-bottom: 80px;}
    #sub.management .con03 ul{flex-direction: column;gap: 20px;}
    #sub.management .con03 ul li{width: 100%}
    #sub.management .con03 ul li > div{height: auto;padding: 20px;}
    #sub.management .con03 ul li p{padding: 0;font-size: 13px;}
    #sub.management .con03 ul li strong{font-size: 17px;margin-bottom: 10px;}
    #sub.management .con03 ul li .icon svg{width: 45px;}
    #sub.ideal .con01 .txt p br{display: none}
    #sub.ideal .con01 .txt p{font-size: 14px;word-break: keep-all}
    #sub.ideal .con01 .txt strong{font-size: 28px;margin-bottom: 17px;}
    #sub.ideal .con01 .tit strong{font-size: 45px;line-height: 1.7}
    #sub.management .con03 .hook svg{width: 60px;height: auto}
    #sub.management .con03{margin-top: 80px;padding-bottom: 80px;}
    #sub .sub_visual01 .vis_img .img_w img{height: 100vh}
    #sub .sub_visual03 .tab_list.tab_list2 ul{flex-wrap: wrap}
    #sub .h_title strong{font-size: 45px;}
    #sub.history .con01 ul li{height: 50px;font-size: 13px;}
    #sub.history .con01 ul li span{left: 20px;}
    #sub.history .con01 ul li{padding-left: 130px;word-break: break-all}
    #sub.history .con01 ul li span:before{left: -17px}
    #sub.award .con01 ul li{padding: 20px;}
    #sub.award .con01 ul li .txt{padding-top: 10px;margin-top: 10px;}
    #sub.award .con01 ul li .txt span{font-size: 13px;}
    #sub.award .con01 ul li .txt strong{font-size: 15px}
    #sub.contact .con01 > ul > li > div{padding: 20px;}
    #sub.contact .con01 > ul > li > div .tit strong{font-size: 16px;}
    #sub.contact .con01 > ul > li > div .tit{padding-bottom: 10px;}
    #sub.contact .con01 > ul > li > div ul li{font-size: 13px;}
    #sub.contact .con01 > ul > li > div ul{gap: 5px;padding-top: 10px;}
    #sub.contact .con01 > ul{gap: 10px;}
    #sub.contact .con01 > ul > li{width: calc(50% - 5px)}
    #sub .tab_list ul li{width: 30%}
    #sub .tab_list ul li a{height: 40px;}
    #sub.location .tab_list ul{flex-wrap: wrap;}
    #sub.location .con .txt{padding: 20px 0}
    #sub.location .con .txt strong{font-size: 20px;}
    #sub.location .con .txt p{font-size: 13px;margin-bottom: 10px}
    #sub.location .con .txt ul li{font-size: 13px}
    #sub.location .con .txt ul{gap: 5px}
    #sub.location .con .txt strong{margin-bottom: 10px}
    #sub.location .con01{gap: 30px;}
    #sub.location .con .map_in > div{height: 280px;}
    #sub.sunkwang .txt_w strong{font-size: 15px;}
    #sub.sunkwang .con03{padding: 0 20px}
    #sub.sunkwang .con03 ul li .tit strong{font-size: 40px;height: 30px;}
    #sub.sunkwang .con03 ul li .tit span{font-size: 14px;}
    #sub.sunkwang .con03 ul li .info p{font-size: 14px;}
    #sub.sunkwang .con03 ul li{padding: 20px 0}
    #sub.sunkwang .con03{padding-bottom: 60px}
    #sub.sunkwang .img_w .img img{height: 100vh}
    #sub.sunkwang .bg .img img{height: 100vh}
    #sub.museum .his_content img{height: 500px;}
    #sub.museum .his_content{height: auto}
    #sub.orgin .orgin_in .orgin_motion_w{transform: translateX(0)}
    #sub.orgin .orgin_in .orgin_motion_w .name01 svg{width: 123px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name02 svg{width: 140px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name03 svg{width: 132px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name04 svg{width: 150px;height: auto}
    #header{height: 65px;}
    #sub.orgin .txt_content .txt_w > div.txt_3{position: relative}
    #sub.orgin .txt_content{position: absolute;top: auto;bottom: 50px;}
   #sub.orgin .txt_content .txt_w > div p{position: static;font-size: 13px;line-height: 1.7}
    #sub.orgin .txt_content .txt_w > div.txt_3 .img{position: static;display: none}
    #sub.orgin .txt_content .txt_w > div.txt_3 .img img{width: 130px}
    #sub.orgin .txt_content{left: 0;width: 100vw;text-align: center}
    #sub.orgin .txt_content .txt_w > div .tag span{margin: 0 auto}
    #sub.orgin .txt_content .txt_w > div{width: 100%}
    #sub.orgin .txt_content .txt_w > div.txt_2 p{transform: none}
    #sub.orgin .txt_content .txt_w > div .tag {margin-bottom: 7px;}
    #sub.orgin .txt_content .txt_w > div .tag span{height: 50px;width: 50px;font-size: 30px;padding-top: 7px;}
	#sub.business .tab_list{display: none}
    #sub.orgin .orgin_in .orgin_motion_w .nameing{height: 100vh;padding-top: 200px;}
    #sub.board .sub_wrap .sub_visual03{position: relative;z-index: 3}
    #sub.business .con03 .step > ul > li .txt strong{font-size: 17px;}
    #sub.business .con03 .step > ul > li .txt ul li{font-size: 13px;}
    #sub.business .con03 .step > ul > li .txt ul li:before{top: 7px}
    #sub.business .con_w .title_w{padding-top: 60px;padding-right: 20px}
    #sub.business .con07 .no1 strong{font-size: 160px;height: 160px;padding-top: 19px}
    #sub.business .con07 .no1{height: 160px;}
    #sub.business .con07 .title strong{font-size: 45px;}
    #sub.business .con07 .no1_w .line_w img{width: 500px;}
    #sub.business .con07 > ul{margin-top: 100px}
    #sub.business .con07 > ul > li .tit strong{font-size: 40px;height: 30px;}
    #sub.business .con07 > ul > li .tit p{font-size: 16px;}
    #sub.business .con07 > ul > li > ul > li{font-size: 16px;}
    #sub.business .con07 > ul > li > ul > li em{font-size: 14px;width: 64px;line-height: 22px;top: 0}
    #sub.business .con07 > ul{gap: 0 20px;}
    #sub.business .business_title ul li{font-size: 13px;line-height: 1.5}
    #sub.business .business_title ul li:before{top: 6px;}
    #sub.business .business_title ul{margin-top: 20px;}
    #sub.business .con_w .con{padding-top: 20px;}
    #sub.business .dash{margin: 20px auto;width: calc(100% - 40px)}
    #sub.business .con06 .list > ul > li .txt strong{font-size: 26px;}
    #sub.business .con06 .list > ul > li .txt p, #sub.business .con06 .list > ul > li .txt ul li{font-size: 13px;line-height: 1.5}
    #sub.business .con06 .list > ul > li .img img{width: 200px;}
    #sub.business .con06 .list > ul > li .txt{padding: 0;padding-left: 20px;}
    #sub.business .con06 .list > ul > li .txt strong{margin-bottom: 7px}
    #sub.business .con06 .list > ul > li .wrap{padding: 10px;align-items: center}
    #sub.business .con06 .list > ul > li .txt strong br{display: none}
    #sub.m_info .sub_con02{gap: 30px}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tag span{font-size: 35px;width: 60px;height: 60px;padding-top: 9px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit div strong{font-size: 32px;height: 26px}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit div span{font-size: 16px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tit p{font-size: 13px;line-height: 1.5}
	#sub.ci .ci_motion_wrap .truck{top: 400px;}
	#sub.ideal .con02 .c .con_in .box .tit strong{font-size: 50px;}
	#sub.ideal .con02 .c .con_in .box p{font-size: 14px}
	#sub.ideal .con02 .c .con_in .box .tag span{font-size: 40px;}
	#sub.ideal .con02 .c .con_in .box .tag{width: 100px;height: 70px;padding-left: 15px}
	#sub.ideal .con02 .c .con_in .box{padding: 30px 20px;}
	#sub.business .con01 .title .box_w > div ul li{font-size: 13px;width: 80px;line-height: 30px;border-radius: 15px;margin: 0 5px;}
	#sub.business .con07{padding-top: 40px;}
	#sub.business .business_title .img_w{margin-top: 20px;}
	#sub.business .info_text_list .tit strong{font-size: 17px}
	#sub.business .info_text_list .tit{padding-bottom: 10px;}
	#sub.business .info_text_list .list > ul > li{padding: 20px}
	#sub.business .info_text_list ul li ul li{font-size: 13px;line-height: 1.5}
	#sub.business .info_text_list ul li ul{margin-top: 10px;}
	#sub.business .info_text_list ul li ul li:before{top: 7px;}
	#sub.business .info_text_list .list > ul > li{height: auto}
	#sub.business .info_text_list .tit{margin-bottom: 10px;}
	#sub.business .info_text_list > ul.info_list > li{padding: 20px;}
	#sub.business .info_text_list .info_list .w{padding-bottom: 10px}
	#sub.business .info_text_list > ul > li > i img{width: 200px;}
	#sub.business .info_text_list .info_list .w{width: calc(100% - 200px)}
	#sub.business .con09 ul{gap: 10px;flex-wrap: wrap}
	#sub.business .con09 ul li{width: calc(50% - 5px)}
#sub.business .con09 ul li:hover {width: calc(50% - 5px)}

#sub.business .con09 ul li:hover ~ li{width: calc(50% - 5px)}
	#sub.business .con09 ul li .img .img_w img{height: auto;width: 100%}
	#sub.business .con09 ul li .img .img_w{position: static;transform: none}
	#sub.business .con09 ul li .img{height: auto;border-radius: 5px;}
	#sub.business .con09 ul li .txt_w span{font-size: 16px}
	#sub.business .con09 ul li .txt_w{bottom: 20px}
	#sub.business .con09 ul li:hover .txt_w{left: 20px}

}
@media (max-width: 660px) {
	#sub.business .con07.on .no1{width: 250px}
	#sub.business .con_w{padding-top: 20px;padding-bottom: 20px;}
#sub.benefit .con01 ul li {
    width: calc(50% - 5px);
}

	#sub.ci .ci_motion_wrap .truck .dot {
        width: 45px;
        height: 45px;
    }
	#sub.ci .ci_motion_wrap .warehouse .dot{width: 51px;height: 51px;}
	#sub.ci .ci_motion_wrap .warehouse{top: 370px;}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{opacity: 0}
	#sub.ci .ci_motion_wrap .truck img{width: 240px;}
	#sub.ci .ci_motion_wrap .warehouse img{width: 190px;}
	#sub.ci .ci_motion_wrap .ci_img{top: 20px;}
	#sub.ci .ci_motion_wrap .basket img{width: 130px;}
	#sub.ci .ci_motion_wrap .ci_wrapper svg{width: 280px;}
    #sub.benefit .con01 ul li strong{font-size: 16px;line-height: 1.5}
    #sub.benefit .con01 ul li p{font-size: 13px;}
    #sub.benefit .con01 ul li .txt{margin-top: 0}
    #sub.board .sub_wrap .sub_con02{PADDING-top: 30px;}
    #sub .btn_wrap{display: block}
    #sub .sch {margin-top: 7px}
    #sub .sch input{width: 100%;height: 35px;}
    #sub .sch button{padding-right: 10px;}
    #sub .paging ul{justify-content: center}
    #sub .btn_wrap{margin-top: 40px;}
    #sub.view .back{padding-top: 20px;}
    #sub.board .sub_wrap .sub_visual03{padding-top: 110px;}
    #sub .loc ul{padding: 0 20px}
    #sub.esg .esg_slide{padding-top: 80px}
    #sub.financial .con01 .table_wrap .con ul li, #sub.financial .con01 .table_wrap .title ul li{font-size: 11px}
    #sub.financial .con01 .table_wrap .title:nth-child(1){width: 30%}
    #sub .sub_visual01 .sub_txt > div strong{font-size: 48px;}
    #sub.contact .con01 > ul > li{width: 100%}
    #sub.sunkwang .con03 ul li{flex-direction: column;gap: 10px}
    #sub.sunkwang .con03 ul li > div{width: 100%}
    #sub.sunkwang .txt_w strong i{display: block;height: 10px}
    #sub .vis_title strong{font-size: 47px;}
    #sub.board .sub_wrap .sub_visual03 .loc{margin-top: 20px;}
    #sub .tabs{margin-top: 30px;}
    #sub.board .sub_wrap .sub_visual03{padding-top: 95px;}
    #sub.board .sub_wrap .sub_visual03 .loc{margin-top: 10px;}
    #sub .tabs{margin-top: 20px;}
    #sub .tabs ul li a{border-radius: 5px;height: 30px;}
    #sub .tabs ul li.on a{border-radius: 5px;height: 30px}
	#sub.orgin .orgin_in .orgin_motion_w .nameing{gap: 0 8px}
    #sub.orgin .orgin_in .orgin_motion_w .name01 svg{width: 85px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name02 svg{width: 97px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name03 svg{width: 92px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name04 svg{width: 101px;height: auto}
    #sub.orgin .txt_content .txt_w > div p{font-size: 12px;}
    #sub.business .business_title strong{font-size: 38px}
    #sub.business .con01 .title strong{font-size: 40px;}
    #sub.business .con01 .box_in .box_con{flex-direction: column;gap: 10px;}
    #sub.business .con01 .box_in .box{width: 100%}
    #sub.business .con01 .box_in .wrap .front{border-radius: 5px;}
    #sub.business .con01 .box_in{padding: 0 20px;}
    #sub.business .con02 .img_w{height: 500px}
    #sub.business .con02 .txt strong{font-size: 80px}
    #sub.business .con02 .txt{bottom: -24px;}
    #sub.business .con02 .img_w > div img{height: 500px;}
    #sub.business .con_w .con{padding-top: 20px;}
    #sub .sub_visual04 .txt_in strong{font-size: 50px;}
    #sub .infograpic_visual .txt_in .loc{top: 70px;}
    #sub.business .con07 .no1 strong{font-size: 90px;height: 90px;padding-top: 9px;}
    #sub.business .con07 .no1{height: 90px;border-radius: 10px;}
    #sub.business .con07 .title strong{font-size: 30px;}
    #sub.business .con07 .title{gap:0 10px;}
    #sub.business .con07 > ul > li .tit{gap: 0 10px;}
    #sub.business .con07 > ul{flex-wrap: wrap;flex-direction: column;gap: 30px}
    #sub.business .con07 > ul > li{width: 100%}
    #sub.business .con07 .no1_w .line_w img{width: 300px;}
    #sub.business .con07 > ul{margin-top: 50px;}
    #sub.business .con06 .list > ul > li .txt strong{font-size: 20px;}
    #sub.business .thumb_slide{width: 230px}
    #sub.business .con_w{padding-bottom: 60px;}
    #sub.business .con01 .title .box_w p{font-size: 16px;text-align: center;line-height: 1.7;margin-top: 4px;}
    #sub.business .con01 .title{padding-top: 0}
    #sub .f_tit strong{font-size: 17px;}
    #sub.sunkwang .sub_visual05 .vis_wrap{clip-path: inset(150px calc(50% - 200px) 150px calc(50% - 200px) round 20px);}
	#sub.ci .ci_motion_wrap .basket{top: 270px}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w .tag span{background: #fff}
	#sub.ci .ci_motion_wrap .txt_con .txt_list .txt_w{z-index: 6}
	#sub.ci .ci_info ul li div strong{font-size: 33px;height: 26px}
	#sub.ci .ci_info{padding-top: 40px;padding-bottom: 60px}
	#sub.ideal .con02:before{display: none}
	#sub.ideal .con02 .c .con_in{width: 100%}
	#sub.ideal .con02{padding: 40px 0;gap: 20px;display: flex;flex-direction: column}
	#sub.business .con_w .title_w{padding-top: 0}
	#sub.business .con_w{padding-bottom: 20px;}
	#sub.business .info_text_list .list > ul > li{width: 100%}
	#sub.business .business01_con{padding-bottom: 200px;}
	#sub.business .con06 .list > ul > li .wrap{flex-direction: column;align-items: flex-start;justify-content: flex-start}
	#sub.business .con06 .list > ul > li .img{width: 100%}
	#sub.business .con06 .list > ul > li .img img{width: 100%}
	#sub.business .con06 .list > ul > li .txt{padding-left: 0;padding-top: 10px;}
	#sub.business .info_text_list ul li strong{line-height: 1.5}
	#sub.business .info_text_list > ul > li > i{display: none}
		#sub.business .info_text_list .info_list .w{width: 100%}
	#sub.business .info_text_list .tit2{margin-top: 40px;}
	#sub.business .con07{padding-bottom: 60px;}
	#sub.business .con07 > ul > li > ul > li span{font-size: 13px;}
	#sub.business .con07{padding-top: 0}
    #sub.ci .ci_list .con ul{flex-direction: column;gap: 10px;}

}
@media (max-width: 500px) {
    #sub .sub_visual04 .txt_in strong{font-size: 42px;}
	#sub.orgin .orgin_in .orgin_motion_w .nameing{gap: 0 8px}
    #sub.orgin .orgin_in .orgin_motion_w .name01 svg{width: 65px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name02 svg{width: 74px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name03 svg{width: 70px;height: auto}
    #sub.orgin .orgin_in .orgin_motion_w .name04 svg{width: 80px;height: auto}
}
@media (max-width: 400px) {
	#sub .sub_visual01 .sub_txt > div .loc{top: 60px}
	#sub .sub_visual01.on .sub_txt{transform: translateY(-165px)}
	#sub.business .con02{margin-bottom: 30px;}
	#sub.business .con02 .txt{bottom: -9px}
	#sub.business .con02 .img_w, #sub.business .con02 .img_w > div img{height: 320px;}
	#sub.business .con02 .txt strong{font-size: 45px;}
    #sub.museum .his_content img{height: 360px;}
    #sub.business .con06 .list > ul > li .wrap{flex-direction: column}
    #sub.business .con06 .list > ul > li .txt{padding-left: 0;padding-top: 20px;}
    #sub.sunkwang .sub_visual05 .vis_wrap{clip-path: inset(150px calc(50% - 130px) 150px calc(50% - 130px) round 20px);}
    #sub.sunkwang .sub_visual05 .vis_tit strong{font-size: 60px;}
}