#sub .inner{width: 1280px}
#sub.black{background: #121212}
#sub{padding-top: 220px}
#sub.about .con {padding: 0 120px}
#sub.about .con > div{padding: 150px 0;}
#sub.about #footer{margin-top: 0}
.view_slider button{position: absolute;right: 40px;top: 40px;z-index: 15}
.view_slider{position: fixed;background: #00000090;height: 100vh;width: 100%;z-index: 999999;display: none}
.view_slider div{height: 100%}
.view_slider .v_wrap{display: flex;align-items: center;justify-content: center;width: 100%;padding: 80px 0;position: relative}
.view_slider .v_wrap .swiper {height: 100%;width: 1200px}
.view_slider .v_wrap .swiper div {height: 100%}
.view_slider .v_wrap .swiper div img{max-height: 100%;max-width: 100%}
.view_slider .v_wrap .swiper .swiper-slide{transition: 0.5s;text-align: center;opacity: 0 !important}
.view_slider .v_wrap .swiper .swiper-slide-active{opacity: 1 !important}
.view_slider .v_wrap .swiper-button-next{position: absolute;top: 0;width: 100%;height: 100%;opacity: 0}
#sub.about .con .wrap{position: relative;   border-left: 1px solid #333333;
    border-right: 1px solid #333333;}
#sub.about .con .wrap:before{content: '';display: block;width: 6px;height: 6px;border-left: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF;position: absolute;top: -1px;left: -1px}
#sub.about .con .wrap:after{content: '';display: block;width: 6px;height: 6px;border-right: 1px solid #FFFFFF;border-top: 1px solid #FFFFFF;position: absolute;top: -1px;right: -1px}
#sub.about .con .wrap .b1{display: block;width: 6px;height: 6px;border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;position: absolute;bottom: -1px;left: -1px}
#sub.about .con .wrap .b2{display: block;width: 6px;height: 6px;border-right: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;position: absolute;bottom: -1px;right: -1px}
#sub.about .con .wrap .bt{width: 1px;height: 6px;display: block;position: absolute;bottom: -1px;left: -1px;background: #FFFFFF}
#sub.about .con .wrap .bt2{left: auto;right: -1px}

#sub.about .con02{background: #0A0A0A}
#sub.about .con > div > div{display: flex; }
#sub.about .con .content{width: 755px}
#sub.about .con .s_title{width: calc(100% - 755px)}
#sub.about .con .s_title strong{font-size: 40px;color: #FFFFFF;line-height: 1.2;    font-family: "freight-sans-pro", sans-serif;    text-transform: uppercase;font-weight: 900}
#sub.about .con01 p, #sub.about .con02 ul li{font-size: 14px;line-height: 30px;letter-spacing: -0.5px;color: #CCCCCC}
#sub.about .con01 p b{color: #fff}
#sub.about .con02{border-top: 1px solid #333333;border-bottom: 1px solid #333333}
#sub.about .con02 ul{display: flex;flex-direction: column;gap: 5px}
#sub.about .con02 ul li{position: relative;padding-left: 66px}
#sub.about .con02 ul li span{position: absolute;left: 0;color: #FFFFFF;font-weight: 600;font-size: 18px}
#sub.about .con03 .content{display: flex;flex-direction: column;gap: 50px;}
#sub.about .con03 .content strong{display: block;font-size: 20px;color: #FFFFFF;font-family: "freight-sans-pro-lights", sans-serif;text-transform: uppercase;margin-bottom: 20px}
#sub.about .con03 .content ul{display: flex;flex-wrap: wrap;width: 444px;gap: 10px;}
#sub.about .con03 .content ul li{padding-right: 5px;position: relative}
#sub.about .con03 .content ul li a{line-height: 30px;font-size: 18px;color: #999999;letter-spacing: -0.7px;  font-family: "freight-sans-pro", sans-serif;text-transform: uppercase;position: relative;display: block;transition: 0.5s}
#sub.about .con03 .content ul li:hover a{background: #fff;color: #000}
#sub.about .con03 .content ul li:before{content: '';display: block;width: 1px;height: 6px;background: #FFFFFF30;position: absolute;top: 50%;right: 0;margin-top: -3px}
#sub.about .con03 .content ul li:nth-child(5n):before{display: none}
#sub.about .con03 .content ul li:nth-child(5n)::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
}
#sub.business .con strong{font-weight: 600;font-family: "freight-sans-pro", sans-serif;}
#sub.project .pro_wrap {padding: 0 120px}
#sub.project .pro_wrap ul{display: flex;flex-wrap: wrap;gap: 96px 40px;}
#sub.project .pro_wrap ul.similar{justify-content: center !important;}
#sub.project .pro_wrap ul li{width: calc(25% - 30px)}
#sub.project .pro_wrap ul li img{display: block;max-width: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
#sub.project .pro_wrap ul li .img_w{position: relative;padding-top: 149%;overflow: hidden}
#sub.project .pro_wrap ul li .img_w:after{content: '';display: block;width: 100%;height: 100%;background: #00000030;position: absolute;bottom: 0;left: 0;transition: 0.5s;height: 0}
#sub.project .pro_wrap ul li:hover .img_w:after{height: 100%}
#sub.project .pro_wrap ul li .txt{padding-top: 30px}
#sub.project .pro_wrap ul li .txt strong{text-align: center;display: block;font-size: 20px;color: #FFFFFF;letter-spacing: -0.5px;margin-bottom: 7px}
#sub.project .pro_wrap ul li .tag{display: flex;justify-content: center;align-items: center;gap: 16px}
#sub.project .pro_wrap ul li .tag p{font-size: 18px;color: #FFFFFF70; font-family: "freight-sans-pro-lights", sans-serif;text-transform: uppercase;font-weight: 900}
#sub.project .pro_wrap ul li .tag i{display: block;width: 1px;height: 8px;background: #555555}
#sub.view .sub_con{padding-bottom: 0}
#sub.view .pro_wrap{background: #0A0A0A;padding: 70px 0;margin-top: 70px}
#sub.view .pro_wrap ul{width: 1280px;margin: 0 auto}
#sub.view .pro_wrap .title{width: 1280px;margin: 0 auto;margin-bottom: 30px}
#sub.view .pro_wrap .title strong{font-size: 20px;color: #AAAAAA;font-family: "freight-sans-pro-lights", sans-serif;}
#sub.view.project .pro_wrap ul li{width: calc(33.33% - 30px)}
#sub.view.project #footer{margin-top: 0}
#sub .sc_btn{text-align: center;border-top: 1px solid #333333;padding-top: 50px;margin-top: 80px}
#sub .sc_btn span{display: block;text-align: center;font-size: 17px;color: #FFFFFF70;font-family: "freight-sans-pro-lights", sans-serif;text-transform: uppercase;margin-bottom: 10px}
#sub.contact .con01{margin-bottom: 100px}
#sub.contact .con01 ul{display: flex;flex-wrap: wrap;gap: 20px}
#sub.contact .con01 ul li{width: calc(50% - 10px);background: #222222;height: 195px;padding: 40px}
#sub.contact .con01 ul li span{display: block;color: #FFFFFF50;margin-bottom: 36px}
#sub.contact .con01 ul li strong{font-size: 20px;color: #FFFFFF;font-weight: 500;letter-spacing: -0.5px;margin-bottom: 4px}
#sub.contact .con01 ul li p{font-size: 14px;color: #FFFFFF70;font-weight: 500;letter-spacing: -0.5px}
#sub.contact .con02 .map{height: 505px}
#sub.contact .con02 .map .root_daum_roughmap{width: 100%;height: 100%}
#sub.contact .con02 ul{display: flex;gap: 60px;margin-top: 40px}
#sub.contact .con02 ul li{padding-right: 60px;position: relative}
#sub.contact .con02 ul li:before{content: '';display: block;width: 1px;height: 14px;background: #333333;position: absolute;right: 0;top: 50%;margin-top: -7px}
#sub.contact .con02 ul li:last-child{padding-right: 0}
#sub.contact .con02 ul li:last-child:before{display: none}
#sub.contact .con02 ul strong{display: block;font-size: 20px;color: #FFFFFF;letter-spacing: -0.5px;margin-bottom: 4px}
#sub.contact .con02 ul p{font-size: 14px;color: #FFFFFF70;letter-spacing: -0.5px}
#sub .sb_title{display: flex;justify-content: space-between;position: relative;align-items: center;margin-bottom: 170px}
#sub .sb_title:before{content: '';display: block;width: 100%;background: #333333;height: 1px;top: 50%;position: absolute}
#sub .sb_title strong{display: block;font-size: 38px;color: #FFFFFF;text-transform: uppercase;font-weight: 900;padding-right: 70px;background: #121212;position: relative;z-index: 5}
#sub .sb_title p{font-size: 20px;color: #FFFFFF;line-height: 32px;padding-left: 70px;background: #121212;position: relative;z-index: 5}
#sub.business .sb_title strong{    font-family: "Noto Sans KR", sans-serif;}
#sub.business .con {border-top: 1px solid #CCCCCC;padding: 0 120px}
#sub.business .con .wrap{padding: 80px 0;border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;position: relative}
#sub.business .con .wrap:before{content: '';display: block;width: 6px;height: 6px;border-left: 1px solid #555555;border-top: 1px solid #555555;position: absolute;top: -1px;left: -1px}
#sub.business .con .wrap:after{content: '';display: block;width: 6px;height: 6px;border-right: 1px solid #555555;border-top: 1px solid #555555;position: absolute;top: -1px;right: -1px}
#sub.business .con .wrap .b1{display: block;width: 6px;height: 6px;border-left: 1px solid #555555;border-bottom: 1px solid #555555;position: absolute;bottom: -1px;left: -1px}
#sub.business .con .wrap .b2{display: block;width: 6px;height: 6px;border-right: 1px solid #555555;border-bottom: 1px solid #555555;position: absolute;bottom: -1px;right: -1px}
#sub.business .con .wrap .bt{width: 1px;height: 6px;display: block;position: absolute;bottom: -1px;left: -1px;background: #555555}
#sub.business .con .wrap .bt2{left: auto;right: -1px}
#sub.business .con .inner{display: flex;align-items: center;gap: 80px}
#sub.business .con  strong{display: block;font-size: 40px;color: #222222;line-height: 48px;letter-spacing: -0.5px;text-transform: uppercase;}
#sub.business .con .tag{display: flex;gap: 10px;align-items: center;margin-top: 20px}
#sub.business .con .tag i{display: block;width: 1px;height: 8px;background: #707070}
#sub.business .con .tag span{font-size: 16px;color: #222222;letter-spacing: -0.5px}
#sub.business .con p{font-size: 14px;color: #777777;letter-spacing: -0.5px;line-height: 26px;margin-top: 15px}
#sub.business .con03{border-bottom: 1px solid #CCCCCC}
#sub.business .sb_title strong{color: #222222;background: #fff}
#sub.business .sb_title p{color: #222222;background: #fff}
#sub.business .sb_title:before{background: #CCCCCC}
#sub.media .tab{display: flex;align-items: center;gap: 40px}
#sub.media .tab i{display: block;width: 1px;height: 10px;background: #707070}
#sub.media .tab a{font-size: 24px;color: #222222;font-weight: 700;text-transform: uppercase;}
#sub.media .list{border-top: 1px solid #CCCCCC;margin-top: 40px;padding-top: 40px}
#sub.media .list ul {display: flex;flex-direction: column;gap: 80px}
#sub.media .list ul li a{display: flex;align-items: center}
#sub.media .list ul li a .img img{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.media .list ul li a .img{width: 620px;overflow: hidden;padding-top: 28.2%;overflow: hidden;position: relative}
#sub.media.search .list ul li a .img{position: relative;padding-top: 19%;overflow: hidden;width: 240px}
#sub.media.search .list ul li a .img div{height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.media.search .list ul li a .img img{height: 100%}
#sub.media.search .list{padding-top: 0;margin-top: 0;border-top: none}
#sub.media.search .sch_wrap {margin-bottom: 90px}
#sub.media.search .sch_wrap strong{font-size: 40px;color: #222222;font-family: "freight-sans-pro-lights", sans-serif;display: block;text-align: center;font-weight: 900}
#sub.media.search .sch_wrap .inp_w{width: 1280px;position: relative;margin-top: 40px;max-width: 100%}
#sub.media.search .sch_wrap .inp_w button{position: absolute;right: 0;height: 100%;top: 0;padding-left: 25px}{}
#sub.media.search .sch_wrap .inp_w input{border: none;border-bottom: 1px solid #CCCCCC;height: 75px;text-align: center;width: 100%;font-size: 18px;color: #222222;letter-spacing: -0.5px}
#sub.media.search .list ul li .txt{padding-left: 60px}
#sub.media .list ul li .txt{padding-left: 70px}
#sub.media .list ul li .txt > span{display: block;font-size: 16px;color: #777777;letter-spacing: -0.5px;margin-bottom: 8px;}
#sub.media .list ul li .txt > strong{font-size: 20px;color: #222222;font-weight: 500;letter-spacing: -0.7px}
#sub.media .list ul li .txt > p{font-size: 14px;color: #777777;line-height: 26px;margin-top: 20px}
#sub.media .list ul li .txt .btn{width: 155px;display: flex;align-items: center;justify-content: space-between;padding: 0 25px;background: #4F4F4F;height: 50px;margin-top: 40px}
#sub.media .list ul li .txt .btn span{color: #fff;font-family: "freight-sans-pro-lights", sans-serif;text-transform: pxuppercase;font-size: }
#sub.media .list ul li .txt .btn i{display: block;width: 10px;height: 1px;background: #FFFFFF}
#sub.view .view_title{text-align: center;border-bottom: 1px solid #333333;padding-bottom: 15px;margin-bottom: 60px}
#sub.view .view_title strong{display: block;font-weight: 600;color: #FFFFFF;letter-spacing: -0.5px;font-size: 24px;margin-bottom: 8px}
#sub.view .view_title p{display: block;font-weight: 400;color: #FFFFFF70;letter-spacing: -0.5px;font-size: 20px;font-family: "freight-sans-pro", sans-serif;    text-transform: uppercase;}
#sub.view .view_title .cate{display: flex;align-items: center;justify-content: center;gap: 0 15px}
#sub.view .view_title .cate i{display: block;width: 1px;height: 8px;background: #555555;}
#sub.view .view_title span{display: block;text-align: right;font-size: 16px;color: #FFFFFF50;font-weight: 400;letter-spacing: -0.5px;}
#sub.view .box_w{display: flex;flex-direction: column;gap: 80px}
#sub.view .box_w .txt{margin-top: 40px}
#sub.view .box_w .txt p{font-size: 14px;line-height: 30px;color: #FFFFFF;letter-spacing: -0.5px}
#sub.view .box_w img{max-width: 100%}

#sub.view  .link{display: flex;justify-content: center;padding-bottom: 40px}
#sub.view  .link a{display: flex;align-items: center;gap: 10px;font-size: 18px;color: #FFFFFF;letter-spacing: -0.5px}
#sub.view  .link a svg{display: block;}
#sub.view  .link a i{display: block;}
#sub.view .go{border-top: 1px solid #333333;padding-top: 50px}
#sub.view .go a{display: flex;width: 155px;height: 50px;background-color: #4F4F4F;display: flex;justify-content: space-between;padding: 0 25px;align-items: center;position: relative;transition: 0.5s;margin: 0 auto}
#sub.media .list ul li .txt .btn{display: flex;width: 155px;height: 50px;background-color: #4F4F4F;display: flex;justify-content: space-between;padding: 0 25px;align-items: center;position: relative;transition: 0.5s;}
#sub.view .go a:hover, #sub.media .list ul li .txt .btn:hover{background-color: #929292;}
#sub.view .go a span, #sub.media .list ul li .txt .btn span{font-size: 17px;color: #FFFFFF;font-family: "freight-sans-pro-lights", sans-serif;display: block;transition-duration: 0.5s;}
#sub.view .go a:hover span, #sub.media .list ul li .txt .btn:hover span{transform: translateX(25px);}
#sub.view .go a i, #sub.media .list ul li .txt .btn i{background-color: #FFFFFF;display: block;width: 10px;height: 1px;transition: 0.5s;}
#sub.view .go a i.line01, #sub.media .list ul li .txt .btn i.line01{position: absolute;left: 25px;opacity: 0;transform: translateX(-25px);}
#sub.view .go a:hover i.line01, #sub.media .list ul li .txt .btn:hover i.line01{opacity: 1;transform: translateX(0);opacity: 1;}
#sub.view .go a:hover i, #sub.media .list ul li .txt .btn:hover i{transform: translateX(25px);opacity: 0;}

#sub.view.white{background: #fff}
#sub.view.white .view_title strong{color: #222222}
#sub.view.white .view_title span{color: #777777}
#sub.view.white .view_title{border-color: #CCCCCC}
#sub.view.white .link a{color: #222222}
@media (max-width: 1600px){
    #sub.business .con{padding: 0 20px}
    #sub.about .con{padding: 0 20px}

}
@media (max-width: 1320px){
    #sub.project .pro_wrap{padding: 0 20px}
    #sub .inner{padding: 0 20px}
    #sub.about .con .s_title {width: calc(100% - 900px);}
    #sub.about .con .content {width: 900px;}
    #sub .inner{width: 100%}
    #sub.business .con .inner{gap: 30px}
    #sub.business .con .wrap img{width: 400px}
    #sub.media .list ul li a .img img{width: 400px}
    #sub.project .pro_wrap ul{width: 100%}
    #sub.project.view .pro_wrap{padding: 60px 20px}
}
@media (max-width: 980px){
    #sub.project.view .pro_wrap{margin-top: 60px}
    #sub.about .con .wrap{padding: 60px 0}
    #sub.about .con{padding: 0 20px}
	#sub{padding-top: 100px}
	#sub.media.search .sch_wrap .inp_w{margin-top: 15px}
	#sub.media.search .sch_wrap{margin-bottom: 30px}
	#sub.media.search .sch_wrap .inp_w input{height: 40px;font-size: 13px}
	#sub.media.search .sch_wrap .inp_w svg{width: 16px;height: auto}
    #sub.contact .con02 ul p{font-size: 12px}
    #sub.contact .con02 ul strong{font-size: 14px}
    #sub.contact .con02 ul{gap: 20px}
    #sub.contact .con02 ul li{padding-right: 20px}
    #sub.contact .con02 .map{height: 270px}
    #sub.contact .con01 ul li span{font-size: 13px;margin-bottom: 10px}
    #sub.contact .con01 ul li p{font-size: 12px}
    #sub.contact .con01 ul li strong{font-size: 15px}
    #sub.contact .con01 ul li{padding: 20px;height: auto}
    #sub.media .list ul li .txt{padding-left: 30px}
    #sub.project .pro_wrap ul li .txt{padding-top: 15px}
    #sub.project .pro_wrap ul li .tag p{font-size: 12px}
    #sub.project .pro_wrap ul li .tag{gap: 0 5px}
    #sub.project .pro_wrap ul li .txt strong{font-size: 16px}
    #sub .sb_title{margin-bottom: 45px}
    #sub .sb_title strong{font-size: 22px;padding-right: 20px}
    #sub .sb_title p{font-size: 13px;line-height: 1.5;padding-left: 20px}
    #sub.about .con03 .content strong{margin-bottom: 10px}
    #sub.about .con03 .content ul{gap: 5px 10px }
    #sub.about .con .s_title strong{font-size: 26px;line-height: 1.5}
    #sub.about .con > div > div{flex-direction: column;gap: 15px}
    #sub.about .con01 p, #sub.about .con02 ul li{font-size: 12px;line-height: 1.5}
    #sub.about .con03 .content ul li a{font-size: 14px;line-height: 25px}
    #sub.about .con02 ul li span{font-size: 12px}
    #sub.about .con .content{width: 100%;gap: 20px}
    #sub.about .con03 .content ul{width: 100%}
    #sub.business .con p br{display: none}
    #sub.business .con strong{font-size: 22px;line-height: 1.5}
    #sub.about .con03 .content strong{font-size: 16px}
    #sub.business .con p{font-size: 12px;line-height: 1.5;word-break: keep-all}
    #sub.business .con .tag span{font-size: 13px}
    #sub.business .con .tag{gap: 0 6px;margin-top: 10px}
    #sub.business .con .wrap img{width: 320px}
    #sub.business .con .wrap{padding: 40px 0}
    #sub.view .box_w{gap: 30px}
    #sub.view .box_w .txt{margin-top: 15px}
    #sub.view .box_w .txt p{font-size: 12px;line-height: 1.5}
    #sub.view .view_title strong{font-size: 20px}
    #sub.view .view_title p, #sub.view .view_title span{font-size: 13px}
    #sub.view .view_title{margin-bottom: 20px}
    #sub.view .link a{font-size: 14px}
    #sub.media .list ul li .txt > span{font-size: 12px}
    #sub.media .list ul li .txt > strong{font-size: 16px}
    #sub.media .list ul li .txt .btn{width: 120px;height: 40px;}
    #sub.media .list ul li .txt .btn span{font-size: 12px}
    #sub.media .list ul li .txt .btn{padding: 0 15px;margin-top: 20px}
    #sub.media .tab a{font-size: 16px}
    #sub.media .list ul{gap: 40px}
    #sub.media .tab{gap: 15px}
    #sub.media .list{margin-top: 20px;padding-top: 20px}
    #sub.contact .con01{margin-bottom: 40px}
	#sub.media.search .list ul li .txt{padding-left: 20px}
	#sub.media .list ul li .txt > p{font-size: 12px;line-height: 1.5}
    #sub.about .con > div{padding: 60px 0}
}
@media (max-width: 640px){
     #sub.project.view .pro_wrap ul li {
        width: calc(50% - 5px);
    }
    #sub.view .view_title .cate{gap: 6px}
    .view_slider .v_wrap .swiper{height: auto}
    .view_slider .v_wrap .swiper{width: 90vw}
    .view_slider .v_wrap .swiper img, .view_slider .v_wrap .swiper div img{width: 100%;height: auto}
	#sub.media.search .sch_wrap strong{font-size: 20px}
	#sub.media.search .list ul li .txt{padding-left: 0}
	#sub.media.search .list ul li a .img{width: 100%;padding-top: 0}
	#sub.media.search .list ul li a .img div{transform: none;position: static}
	#sub.media.search .list ul li a .img img{height: auto}
    #sub.contact .con01 ul li strong{word-break: keep-all}
    #sub.contact .con01 ul{gap: 10px}
    #sub.contact .con01 ul li{width: calc(50% - 5px)}
    #sub.contact .con02 ul li:before{display: none}
    #sub.contact .con02 ul{flex-direction: column}
    #sub.project .pro_wrap ul{gap: 20px 10px}
    #sub.project .pro_wrap ul li{width: calc(50% - 5px)}
    #sub .sb_title:before{display: none}
    #sub .sb_title{flex-direction: column;align-items: flex-start;gap: 15px}
    #sub .sb_title p{padding-left: 0}
    #sub.business .con .inner{flex-direction: column}
    #sub.about .con02 ul li {padding-left: 44px;}
    #footer{overflow: hidden}
    #sub.business .con .inner{gap: 15px}
    #sub.about .con01 p br, #sub.about .con02 ul li br{display: none;}
    #sub.business .con .wrap{padding: 20px 0}
    #sub.business .con .wrap img, #sub.business .con .wrap .img{width: 100%}
    #sub.about .con01 p, #sub.about .con02 ul li{word-break: keep-all;}
    #sub.media .list ul li a{flex-direction: column;gap: 17px}
    #sub.media .list ul li .txt{padding-left: 0}
    #sub.media .list ul li a .img img, #sub.media .list ul li a .img, #sub.media .list ul li .txt{width: 100%}
}