/* 서브 공통 */ #footer{ background-color: #001B43; } #footer .ft01{ border-bottom: none; } #footer .ft01 ul li a{ color: #fff; } #footer .ft01 .ft_logo{ position: relative; } #footer .ft01 .ft_logo:after{ content:""; display: block; width: 100%; height: 100%; background: url('/img/common/footer_logo.png') center center no-repeat; position: absolute; left: 0; top: 0; background-size: 100% 100% !important; } #footer .ft01 .ft_logo img{ opacity: 0; } #footer .ft02 ul li span{ color: #fff; font-weight: 600; } #footer .ft02 ul li p{ color :#cfcfcf; } body{ overflow-x: hidden; } #sub .st01{ font-size: 40px; line-height: 1.5em; letter-spacing: -0.02em; color:#000; font-weight: 600; } #sub .p01{ font-size: 20px; line-height: 1.5em; letter-spacing: -0.02em; color:#41454A; } #sub .wrap{ padding: 0 50px; max-width: 1920px; margin: 0 auto; } #sub .sub_visual{ height: 900px; width: 100%; position: relative; background-color: #000; } #sub .sub_visual .visual_img{ width: 100%; height: 100%; position: relative; overflow: hidden; } #sub .sub_visual .visual_img img{ display: block; min-height: 100%; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.2); opacity: 0.2;transition: transform 3s, opacity 3s; } #sub .sub_visual .loc{ position: absolute; left: 50px; bottom: 50px; z-index: 1; } #sub .sub_visual .loc > ul{ display:flex; align-items: center; gap: 16px; } #sub .sub_visual .loc > ul > li{ font-size: 15px; font-weight: 500; color:#FFFFFF; } #sub .sub_visual .loc > ul > li:last-child{ display:flex; height: 38px; align-items: center; padding: 0 22px; border-radius: 6px; background-color: #004BB9; white-space: nowrap; text-decoration: underline; } #sub .sub_visual .st{ display:flex; flex-flow: column; position: absolute; left: 50px; top: 250px; z-index: 2; gap: 10px; } #sub .sub_visual .st > div{ overflow: hidden; } #sub .sub_visual .st > div > strong{ font-size: 120px; line-height: 1em; color:#FFFFFF; font-weight: 700; display: block; transform: translateY(100%); transition: transform 1.5s; } #sub .sub_visual .st > div:nth-child(2) > strong{ transition-delay: .3s; } #sub .con_w{ padding-top: 180px; padding-bottom: 160px; display:flex; flex-flow: column; gap: 160px; } #sub .con_w .sc_tit{ display:flex; gap: 100px;padding-bottom: 110px; border-bottom: 1px solid #E6EAEF; align-items: flex-end; } #sub .con_w .sc_tit .c_tit strong{ font-size: 60px; line-height: 1.3em; font-weight: 600; color: #000; letter-spacing: -0.02em; } #sub .con_w .sc_tit .c_tit strong span{ color:#004BB9; } #sub .con_w .sc_tit .c_box{ padding-bottom: 5px; display:flex; flex-flow: column; gap: 20px; } #sub .con_w .sc_tit .c_box b{ display: block; font-size: 22px; font-weight: 700; color: #000; } #sub .contact{height: 615px;overflow: hidden;position: relative;display: flex;align-items: center;justify-content: center;} #sub .contact .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); } #sub .contact .bg img{display: block;transform: scale(2);transition: 3s; } #sub .contact.on .bg img{display: block;transform: scale(1); } #sub .contact .txt_wrap{text-align: center;position: relative;z-index: 5; } #sub .contact ul{display: flex;justify-content: center;gap: 20px} #sub .contact .m_title{margin-bottom: 80px;} #sub .contact .m_title span{display: block;font-size: 22px;color: #fff;margin-bottom: 15px; font-weight: 500; } #sub .contact .m_title strong{font-size: 80px;color: #fff;font-weight: 700;display: block;;margin-bottom: 24px;text-transform: uppercase;} #sub .contact .m_title p{font-size: 16px;color: #fff;font-weight: 400; } #sub .con_w .core .wrap{ padding-bottom: 80px; position: relative; } #sub .con_w .core .wrap:after{ content:""; display: block; width: calc(100% - 100px); left: 50%; bottom: 0; background-color: #E6EAEF; position: absolute; transform: translate(-50%,0); height: 1px; } #sub .core .wrap{ display: flex; align-items: center; justify-content: space-between; } #sub .core_t{ display:flex; flex-flow: column; align-items: flex-start; gap: 20px; } #sub .core_t > span{ display:flex; height: 44px; border-radius: 40px; padding: 0 24px; white-space: nowrap; align-items: center; font-size: 17px; font-weight: 600; color:#004BB9; letter-spacing: -0.02em; background-color: rgba(0,75,185,0.05); } #sub .core_t dl{ display: flex; flex-flow: column; gap: 14px; margin-top: 20px; } #sub .core_t dl dt{ font-size: 18px; font-weight: 700; color:#113365; } #sub .core_t dl dd{ font-size: 18px; line-height: 1.5em; color:#696F77; } #sub .img_gr{ display:flex; gap: 20px; } #sub .img_gr > div{ padding: 20px; border-radius: 10px; background-color: #F4F5F8; } #sub .img_gr > div > img{ display: block; border-radius: 8px; width: 413px; } #sub .img_gr > div > video{ display: block; border-radius: 8px; width: 413px; } #sub .img_gr .img_box.click{ cursor: pointer; } #sub .core .flexs{ display:flex; gap: 110px; position: relative; width: 100%; } #sub .core .flexs:after{ content:""; display: block ;width: 1px; height: 100%; background-color: #E6EAEF; position: absolute; left: 50%; top: 0; } #sub .core .flexs .c_gr{ display:flex; flex-flow: column; gap: 24px; width: calc(50% - 55px); } #sub .lists{ display:flex; flex-flow: column; gap: 24px; } #sub .lists li{ padding-left: 12px; position: relative; font-size: 20px; line-height: 1.5em; color:#41454A; letter-spacing: -0.02em; } #sub .lists li:after{ content:""; display: block; width: 3px; height: 3px; border-radius: 50%; position: absolute; left: 0; top: 13px; background-color: #41454A; } #sub .core .table svg{ max-width: 100%; display: block; height: auto; } .view_pop{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,0.5); display: none; } .view_pop .wraps{ display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .view_pop .wraps .box{ max-width: 1400px; width: 90%; border-radius: 12px; background-color: #fff; padding: 20px; position :relative; } .view_pop .wraps .box .close_b{ position: absolute; right: -12px; top: 0; transform: translate(100%, 0); } .view_pop .wraps .box img{ width: 100%; display: block; border-radius: 8px; } /* PRODUCTS 공통 */ #sub.product .con_w{ padding-bottom: 0; } /* C-SCAN */ #sub.c-scan .con_w .con03 .wrap:after{ display: none; } /* L-SCAN */ #sub.l-scan .con02 .wrap{ display:flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; } #sub.l-scan .con_w .con03 .wrap:after{ display: none; } #sub.l-scan .con02 .wrap .step{ display:flex; flex-flow: wrap; gap: 20px 50px; margin-bottom: 100px; } #sub.l-scan .con02 .wrap .step > div{ width: 40%; display:flex; gap: 10px; } #sub.l-scan .con02 .wrap .step .txt{ display: flex; flex-flow: column; gap: 10px; } #sub.l-scan .con02 .wrap .step span{ font-size: 16px; font-weight: 600; color:#004BB9; line-height: 26px; display: block; } #sub.l-scan .con02 .wrap .step .txt strong{ font-size: 20px; font-weight: 600; color:#000000; } #sub.l-scan .img_gr { gap: 40px; } #sub.l-scan .img_gr .img_box video{ width: 520px; } #sub.l-scan .img_gr .img_box.click{ width: calc(100% - 610px); } #sub.l-scan .img_gr .img_box.click img{ width: 100%; } /* SPINE TWIN */ #sub.spine .con_w .con03 .wrap:after{ display: none; } /* TECHNOLOGY */ #sub.technology .img_gr > div > img{ width: auto; } #sub.technology .con02{ position: relative; } #sub.technology .con02:after{ content:""; display: block; width: 1px; height: calc(100% + 260px); background-color: #E6EAEF; position: absolute; left: 405px; top: -100px; } #sub.technology .con02 .wrap{ display:flex; gap: 80px; position: relative; } #sub.technology .con02 .tab{ width: 355px; padding-right: 50px; position: sticky; top: 100px; align-self: flex-start; } #sub.technology .con02 .tab ul{ display:flex; flex-flow: column; } #sub.technology .con02 .tab ul li a{ height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; font-size: 18px; font-weight: 600; color:#000000; } #sub.technology .con02 .tab ul li a i{ display: block; } #sub.technology .con02 .tab ul li a i svg{ display: block; } #sub.technology .con02 .tab ul li.on a{ background-color: #004BB9; border-radius: 70px; color: #fff; } #sub.technology .con02 .con{ padding-right: 80px; display: flex; flex-flow: column; gap: 180px; width: calc(100% - 435px); } #sub.technology .con02 .con .core_t{ padding-bottom: 40px; border-bottom: 1px solid #EBEBEB; } #sub.technology .con02 .con .patents{ margin-top: 40px; margin-bottom: 40px; } #sub.technology .con02 .con .patents dl{ display:flex; flex-flow: column; gap: 18px; } #sub.technology .con02 .con .patents dl dt{ font-size: 20px; font-weight: 700; color:#113365; } #sub.technology .con02 .con .patents dl dd{ display:flex; flex-flow: column; gap: 16px; } #sub.technology .con02 .con .patents dl dd a{ display:flex; gap: 6px; font-size: 18px; font-weight: 600; color:#004BB9; text-decoration: underline; } #sub.technology .con02 .con .patents dl dd > div{ display:flex; gap: 14px; } /* ABOUT US */ #sub.about .con02 .wrap{ display:flex; flex-flow: column; gap: 100px; } #sub.about .con02 .wrap > div{ display:flex; align-items: center; justify-content: space-between; flex-flow: row-reverse; gap: 60px; } #sub.about .con02 .wrap > div .txt{ width: 650px; display:flex; flex-flow: column; gap: 40px; } #sub.about .con02 .wrap > div .txt span{ font-size: 16px; font-weight: 600; color:#2F4E78; } #sub.about .con02 .wrap > div .txt strong{ font-size: 40px; font-weight: 600; color:#C8CDD5; line-height: 1.3em; } #sub.about .con02 .wrap > div .txt .tt{ flex-flow: column; align-items: flex-start; display: flex; } #sub.about .con02 .wrap > div .txt .tt .gr{ position: relative; } #sub.about .con02 .wrap > div .txt .tt .gr > div{ position: absolute; left: 0; top: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1.5s; } #sub.about .con02 .wrap > div .txt .tt .gr > div > strong{ color: #000000; } #sub.about .con02 .wrap > div .txt .p01{ color: #000000; } #sub.about .con02 .wrap > div .img{ width: calc(100% - 710px); overflow: hidden; border-radius: 10px; } #sub.about .con02 .wrap > div .img img{ display: block; width: 100%; } #sub.about .left_con .wrap{ display:flex; justify-content: space-between; } #sub.about .left_con .con{ width: 1400px; } #sub.about .left_con .left_t strong{ font-size: 40px; font-weight: 600; color:#000000; } #sub.about .con03 .con{ display:flex; gap :40px; } #sub.about .con03 .con > div{ width: calc(50% - 20px); display:flex; flex-flow: column; gap: 30px; } #sub.about .con03 .con > div > .img img{ display: block; width: 100%; border-radius: 10px; } #sub.about .con03 .con > div > .txt{ display:flex; flex-flow: column; gap: 24px; } #sub.about .con03 .con > div > .txt strong{ font-size: 30px; font-weight: 600; color: #000000; } #sub.about .con04 .con{ display:flex; flex-flow: wrap; gap: 40px; } #sub.about .con04 .con > div{ width: calc(50% - 20px); display:flex; align-items: center; gap: 30px; } #sub.about .con04 .con > div > .img img{ display: block; border-radius: 10px; } #sub.about .con04 .con > div > .txt{ display:flex; flex-flow: column; gap: 24px; } #sub.about .con04 .con > div > .txt .name{ display:flex; align-items: center; gap: 20px; padding-bottom: 22px;border-bottom: 1px solid #E6EAEF; } #sub.about .con04 .con > div > .txt .name > strong{ font-size: 29px; font-weight: 600; color:#000000; } #sub.about .con04 .con > div > .txt .name > div{ display:flex; gap: 14px; } #sub.about .con04 .con > div > .txt .name > div > p{ font-size: 19px; color:#000000; font-weight: 400; } #sub.about .con04 .con > div > .txt .name > div > p:first-child{ color: #004BB9; font-weight: 600; } #sub.about .con04 .con > div > .txt .lists{ gap: 10px; } /* HISTORY */ #sub.history .con02 .wrap{ width :1400px; margin: 0 auto; padding: 0; display:flex; position: relative; } #sub.history .con02 .wrap:after{ content:""; display: block; width: 1px; height: calc(100% + 320px); background-color: #E6EAEF; position: absolute; left: 0; top: -160px; } #sub.history .con02 .wrap:before{ content:""; display: block; width: 1px; height: calc(100% + 320px); background-color: #E6EAEF; position: absolute; left: 480px; top: -160px; } #sub.history .con02 .year{ height: 100%; padding-left: 100px; width: 480px; position: sticky; align-self: flex-start; top: 100px; } #sub.history .con02 .year ul{ display:flex; flex-flow: column; overflow: hidden; height: 100px; } #sub.history .con02 .year ul li{ font-size: 100px; font-weight: 700; color: #000000; line-height: 1em; transition: transform 1s; } #sub.history .con02 .year ul li span{ line-height: inherit; color: #004BB9; display: inline-block; } #sub.history .con02 .con{ width: calc(100% - 480px); display:flex; flex-flow: column; gap: 100px; } #sub.history .con02 .con > div{ display:flex; flex-flow: column; gap: 100px; } #sub.history .con02 .con .y_box{ display: flex; flex-flow: column; gap: 30px; padding-left: 40px; } #sub.history .con02 .con .y_box strong{ display: block; position: relative; font-size: 20px; font-weight: 600; color:#000000; } #sub.history .con02 .con .y_box strong:after{ content:""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: #C9CDD1; position: absolute; left: -44px; top: 50%; transform: translate(0,-50%); } #sub.history .con02 .con .y_box ul{ display:flex; flex-flow: column; gap: 12px; } #sub.history .con02 .con .y_box ul li{ font-size: 20px; font-weight: 400; color: #333; } /* CULTURE */ #sub.culture .con02 .info{ margin-top: 36px; display:flex; } #sub.culture .con02 .info > div{ width: 33.3333333%; heighT: 380px; display:flex; flex-flow: column; align-items: center; text-align: center; justify-content: center; gap: 30px; position: relative; border-right: 1px solid #E1E1E1; } #sub.culture .con02 .info > div:last-child{ border-right: none; } #sub.culture .con02 .info span{ font-size: 16px; font-weight: 600; color:#004BB9; position: absolute; left: 40px; top: 40px; } #sub.culture .con02 .info .txt{ display:flex; flex-flow: column; gap: 20px; } #sub.culture .con02 .info .txt strong{ font-size: 22px; font-weight: 600; color:#000000; } #sub.culture .con02 .info .txt p{ font-size: 18px; font-weight: 400; color: #606D81; line-height: 1.5em; } #sub.culture .con03{ position: relative; } #sub.culture .con03:after{ content:""; display: block ;width: calc(100% - 100px); height: 1px; position: absolute; left: 50%; transform: translate(-50%,0); top: -80px; background-color: #E6EAEF; } #sub.culture .con03 .benefit{ display: flex; flex-flow: wrap; margin-top: 36px; } #sub.culture .con03 .benefit > div{ width: 25%; padding: 40px; display:flex; flex-flow: column; gap: 40px; border-right: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; align-items: flex-start; transition: background .3s, border .3s; } #sub.culture .con03 .benefit > div:nth-child(4n+0){ border-right: none; } #sub.culture .con03 .benefit > div:nth-child(4) ~ div{ border-bottom: none; } #sub.culture .con03 .benefit > div > i{ display: block; background-color: rgba(13,93,210,0.08); transition: background .3s; border-radius: 6px; } #sub.culture .con03 .benefit > div > i svg{ display: block; } #sub.culture .con03 .benefit > div > i svg path{ transition: stroke .3s; } #sub.culture .con03 .benefit > div .txt{ display:flex; flex-flow: column; gap: 24px; } #sub.culture .con03 .benefit > div .txt strong{ font-size: 24px; font-weight: 600; color: #000; } #sub.culture .con03 .benefit > div .txt p{ font-size: 18px; line-height: 1.5em; color:#606D81; word-break: keep-all; } #sub.culture .con03 .benefit > div:hover{ background-color: #004BB9; border-color: #004BB9; } #sub.culture .con03 .benefit > div:hover > i{ background-color: rgba(235,241,250,0.08); } #sub.culture .con03 .benefit > div:hover > i svg path{ stroke: #fff; } #sub.culture .con03 .benefit > div:hover > i svg #패스_157 path{ fill: #fff; stroke: none; } #sub.culture .con03 .benefit > div:hover .txt strong{ color :#fff; } #sub.culture .con03 .benefit > div:hover .txt p{ color :#D9E1EC; } /* CAREERS */ #sub.careers .con_w{ gap: 100px; } #sub.careers .con02 .link{ margin-top: 36px; display:flex; flex-flow: wrap; gap: 20px; } #sub.careers .con02 .link > div{ width: calc(25% - 15px); } #sub.careers .con02 .link > div > a{ display:flex; width: 100%; height: 460px; border: 1px solid #E0E0E0; border-radius: 10px; overflow: hidden; position: relative; padding: 40px; display:flex; align-items: flex-end; } #sub.careers .con02 .link > div > a .arrow{ position: absolute; right: 20px; top: 20px; opacity: 0; transform: translate(-60px,60px); transition: transform .5s, opacity .5s; } #sub.careers .con02 .link > div > a .dot{ display: block; position: absolute; left: 40px; top: 40px; border-radius: 50%; background-color: #004BB9; width: 6px; height: 6px; transition: background .4s; } #sub.careers .con02 .link > div > a:after{ content:""; display: block; width: 1px; height: 1px; background-color: #001A41; position: absolute; left: 0; bottom: 0; transition: width .5s, height .5s, opacity .5s; opacity: 0; border-radius: 10px; z-index: -1; } #sub.careers .con02 .link > div > a .txt{ display: flex; flex-flow: column; gap: 25px; } #sub.careers .con02 .link > div > a .txt strong{ font-size: 40px; line-height: 1.3em; color:#000000; font-weight: 700; word-break: keep-all; } #sub.careers .con02 .link > div > a .txt p{ font-size: 18px; font-weight: 500; color:#2C3440; } #sub.careers .con02 .link > div > a:hover:after{ width: 100%; height: 100%; opacity: 1; } #sub.careers .con02 .link > div > a:hover .txt strong{ color: #fff; } #sub.careers .con02 .link > div > a:hover .txt p{ color: #fff; } #sub.careers .con02 .link > div > a:hover .arrow{ transform: translate(0,0); opacity: 1; } #sub.careers .con02 .link > div > a:hover .dot{ background-color: #fff; } #sub.careers .con03{ position :relative;} #sub.careers .con03:after{ content:""; display: block; width: calc(100% + 100px); height: 1px; background-color: #E6EAEF; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); } #sub.careers .con03 strong{ display: block; padding-top: 100px; } #sub.careers .con03 .info{ margin-top: 36px; display:flex; flex-flow: column; gap: 20px; } #sub.careers .con03 .info p{font-size: 20px; font-weight: 500; color: #000000; } #sub.careers .con03 .info dl{ display:flex; gap: 20px; } #sub.careers .con03 .info dl dt{ font-size: 20px; font-weight: 600; color:#000000; } #sub.careers .con03 .info dl dd{ font-size: 20px; font-weight: 700; color:#004BB9; } /* LOCATION */ #sub.location .con02 .info{ display:flex; gap: 60px; } #sub.location .con02 .info > div{ width: calc(33.33333333% - 20px); border-right: 1px solid #E6EAEF; } #sub.location .con02 .info > div:last-child{ border-right: none; } #sub.location .con02 .info > div dl{ display:flex; flex-flow: column; gap: 22px; } #sub.location .con02 .info > div dl dt{ font-size: 18px; font-weight: 600; color:#004BB9;] } #sub.location .con02 .info > div dl dd strong{ font-size: 25px; color:#000000; font-weight: 500; letter-spacing: -0.02em; word-break: keep-all; line-height: 1.5em; } #sub.location .con02 .info > div dl dd{ display: flex; flex-flow: column; gap: 20px; } #sub.location .con02 .info > div dl dd > div{ display:flex; gap: 20px; } #sub.location .con02 .info > div dl dd > div .txt{ display:flex; flex-flow: column; gap: 17px; padding-top: 6px; } #sub.location .con02 .info > div dl dd > div .txt p{ font-size: 20px; line-height: 1.5em; color:#2C3440; letter-spacing: -0.02em; } #sub.location .con02 .info > div dl dd > div .txt p b{ font-weight: 600; color:#113365; } #sub.location .con02 .info > div dl dd > div i{ display: block; } #sub.location .con02 .info > div dl dd > div i svg{ display: block; } #sub.location .con02 .info > div dl dd > p{ font-size: 20px; line-height: 1.6em; color:#2C3440; letter-spacing: -0.02em; } #sub.location .con02 .info > div dl dd > p b{ font-weight: 600; color:#113365; } #sub.location .con02 .info > div dl dd > span{ font-size: 16px; font-weight: 400; color:#8F959E; letter-spacing: -0.02em; } #sub.location .con02 .maps{ margin-top: 100px; width: 100%; height: 510px; overflow: hidden; border-radius: 10px; } #sub.location .con02 .maps .root_daum_roughmap{ width: 100%; height: 100%; } #sub.location .con02 .maps .root_daum_roughmap .wrap_map{ width: 100%; height: 100%; } #sub.location .con02 .maps .root_daum_roughmap .map_border{ display: none; } /* 게시판 공통 */ #sub.board .con_w{ gap: 100px; } #sub.board .inner{ width: 1400px; margin: 0 auto; padding: 0; } #sub.board .con01{ position: relative; } #sub.board .con01:after{ content:""; display: block; width: calc(100% - 100px); height: 1px; background-color: #e6eaef; position :absolute; left: 50%; bottom: 0; transform: translate(-50%,0);} #sub.board .sc_tit{ border-bottom: none; } #sub.board .sc_tit .c_tit strong{ white-space: nowrap; } #sub.board .sc_tit .c_box p{ word-break: keep-all; } #sub.board .b_top{ display:flex; align-items: center; justify-content: space-between; margin-bottom: 70px; } #sub.board .b_top .b_cate {height: 68px; border-radius: 70px; border: 1px solid #C9CDD1; padding: 10px; } #sub.board .b_top .b_cate ul{ display:flex; gap: 10px; height: 100%; } #sub.board .b_top .b_cate ul li a{ display:flex; align-items: center; height: 100%; padding: 0 34px; font-size: 18px; font-weight: 600; color: #000; border-radius: 70px; } #sub.board .b_top .b_cate ul li.on a{ background-color: #004BB9; color: #fff; } #sub.board .b_top .search{ width: 500px; height: 68px; position: relative; border-radius: 10px; border: 1px solid #C9CDD1; } #sub.board .b_top .search input{ width: 100%; height: 100%; padding-left: 30px; font-size: 17px; border: none; background-color: transparent; color: #000; } #sub.board .b_top .search button{ position:absolute; right: 30px; top: 50%; transform: translate(0,-50%); display: block; } #sub.board .b_top .search button svg{ display: block; } #sub.board .g_list ul{ display:flex; flex-flow: wrap; gap: 40px; } #sub.board .g_list ul li{ width: calc(33.33333333% - 26.66666px); } #sub.board .g_list ul li a{ display:flex; flex-flow: column; gap: 24px; } #sub.board .g_list ul li a .img{ position: relative; overflow: hidden; border-radius: 10px; } #sub.board .g_list ul li a .img img{ display: block; width: 100%; transition: transform .5s; } #sub.board .g_list ul li a .hover{ position :absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,75,185,0.7); backdrop-filter: blur(5px); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; z-index: 2; } #sub.board .g_list ul li a .hover i{ display: block; } #sub.board .g_list ul li a .hover i svg{ display: block; } #sub.board .g_list ul li a .cate{ height: 40px; padding: 0 18px; border-radius: 70px; background-color: #fff; font-size: 16px; font-weight: 600; color:#004BB9; display:flex; align-items: center; position: absolute; left: 20px; top: 20px; z-index: 1; } #sub.board .g_list ul li a .txt{ display:flex; flex-flow: column; gap: 25px; } #sub.board .g_list ul li a .txt strong{ font-size: 22px; line-height: 1.5em; color:#000000; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; word-break: keep-all; } #sub.board .g_list ul li a .txt .info{ padding-top: 24px; border-top: 1px solid #ECEEF1; position: relative; display:flex; flex-flow: column; gap: 18px; } #sub.board .g_list ul li a .txt .info dl{ display:flex; gap: 0; } #sub.board .g_list ul li a .txt .info dl dt{ width: 100px; font-size: 18px; font-weight: 600; color:#2C3440; } #sub.board .g_list ul li a .txt .info dl dd{ width: calc(100% - 100px); font-size: 18px; font-weight: 400; color:#8B929C; } #sub.board .paging{ display:flex; justify-content: center; margin-top: 80px; } #sub.board .paging ul{ display:flex; gap: 10px; } #sub.board .paging ul li a{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color:#74839A; } #sub.board .paging ul li.on a{ font-weight: 600; color: #004BB9; position: relative; } #sub.board .paging ul li.on a:after{ content:""; display: block; width: 16px; height: 2px; background-color: #004BB9; position: absolute; left: 50%; bottom: 13px; transform: translate(-50%,0); } #sub.board .g_list ul li a:hover .hover{ opacity: 1; } #sub.board .g_list ul li a:hover .img img{ transform: scale(1.2); } #sub.board .p_list ul{ display: flex; flex-flow: wrap; gap: 40px; } #sub.board .p_list ul li{ width: calc(25% - 30px); } #sub.board .p_list ul li a{ display:flex; flex-flow: column; gap: 20px; } #sub.board .p_list ul li a .img{ position: relative; overflow: hidden; border-radius: 10px; } #sub.board .p_list ul li a .img img{ display: block; width: 100%; transition: transform .5s; } #sub.board .p_list ul li a .hover{ position :absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); backdrop-filter: blur(5px); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; z-index: 2; } #sub.board .p_list ul li a .hover i{ display: block; } #sub.board .p_list ul li a .hover i svg{ display: block; } #sub.board .p_list ul li a .txt strong{ font-size: 18px; font-weight: 600; color:#000000; } #sub.board .p_list ul li a:hover .hover{ opacity: 1; } #sub.board .p_list ul li a:hover .img img{ transform: scale(1.2); } #sub.board .n_list ul{ display:flex; flex-flow: wrap; gap: 40px; } #sub.board .n_list ul li{ width: calc(33.33333333% - 26.66666px); } #sub.board .n_list ul li a{ display:flex; flex-flow: column; gap: 20px; } #sub.board .n_list ul li a .img{ position: relative; overflow: hidden; border-radius: 10px; } #sub.board .n_list ul li a .img img{ display: block; width: 100%; transition: transform .5s; } #sub.board .n_list ul li a .hover{ position :absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(17,51,101,0.4); backdrop-filter: blur(30px) brightness(115%); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s; z-index: 2; } #sub.board .n_list ul li a .hover i{ display: block; } #sub.board .n_list ul li a .hover i svg{ display: block; } #sub.board .n_list ul li a .txt{ display:flex; flex-flow: column; gap: 8px; } #sub.board .n_list ul li a .txt strong{ font-size: 18px; font-weight: 700; color:#000000; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sub.board .n_list ul li a .txt span{ font-size: 15px; font-weight: 500; color:#004BB9; } #sub.board .n_list ul li a .txt p{ font-size: 14px; font-weight: 400; color:#999999; margin-top: 8px; } #sub.board .n_list ul li a:hover .hover{ opacity: 1; } #sub.board .n_list ul li a:hover .img img{ transform: scale(1.1); } #sub.board.view .con01:after{ display: none; } #sub.board.view .v_tit{ padding-bottom: 40px; border-bottom: 2px solid #000; display: flex; justify-content: space-between; align-items: flex-end; } #sub.board.view .v_tit .left{ display:flex; flex-flow: column; gap: 20px; } #sub.board.view .v_tit .left span{ font-size: 18px; font-weight: 500; color:#004BB9; } #sub.board.view .v_tit .left strong{ font-size: 40px; font-weight: 700; color: #000000; } #sub.board.view .v_tit p{ font-size: 18px; color:#999999; } #sub.board.view .v_con{ padding: 40px 0; min-height: 500px; border-bottom: 1px solid #E6EAEF; } #sub.board.view .v_con img{ max-width: 100%; } #sub.board.view .v_con *{ word-break: break-all; } #sub.board.view .btn_box{ display:flex; justify-content: center; margin-top: 60px; } #sub.board.view .btn_box .back a{ flex-flow: row-reverse; padding-left: 5px; padding-right: 23px; } #sub.board.view .btn_box .back a:hover i{ transform: translateX(15px); } #sub.board.view .btn_box .back a:hover span{ padding-left: 0; padding-right: 10px; } /* CONTACT */ #sub.contactus .c_tit{ padding-bottom: 100px; } #sub.contactus .c_tit strong{ font-size: 60px; font-weight: 600; } #sub.contactus .con_w{ gap: 80px; } #sub.contactus .f_gr{ display:flex; flex-flow: wrap; gap: 40px; } #sub.contactus .f_gr > div{ width: calc(50% - 20px); display:flex; flex-flow: column; gap: 20px; } #sub.contactus .f_gr > div > label{ font-size: 20px; font-weight: 600; color:#000000; } #sub.contactus .f_gr > div > label span{ color:#004BB9; } #sub.contactus .f_gr > div .input_t{ height: 70px; border: none; border-bottom: 2px solid #E1E1E1; padding-left: 30px; font-size: 20px; font-weight: 500; color: #000; position: relative; } #sub.contactus .f_gr > div .input_t:focus{ border-color :#000; } #sub.contactus .f_gr > div .input_ta{ height: 240px; border: none; border-bottom: 2px solid #E1E1E1; padding: 30px; font-size: 20px; font-weight: 500; color: #000; position: relative; } #sub.contactus .f_gr > div .input_ta:focus{ border-color :#000; } #sub.contactus .f_gr > div > ul{ display:flex; gap: 14px; } #sub.contactus .f_gr > div > ul > li{ position: relative; } #sub.contactus .f_gr > div > ul > li label{ width: 150px; height: 70px; border-radius: 70px; border: 1px solid #e1e1e1; display:flex; align-items: center; text-align: center; justify-content: center; cursor: pointer; color: #000000; font-weight: 500; font-size: 20px; } #sub.contactus .f_gr > div > ul > li input:checked + label{ background-color: #004BB9; border-color:#004BB9; color: #fff; } #sub.contactus .f_gr > div > ul > li input{ display: none; } #sub.contactus .per{ display:flex; justify-content: center;align-items: center; margin-top: 40px; } #sub.contactus .per .box{ display: flex; justify-content: center; align-items: center; gap: 10px; } #sub.contactus .per .box input{ display: none; } #sub.contactus .per .box label{ width: 24px; height: 24px; background: url('/img/sub/chk.png') center center no-repeat; background-size: 100% 100% !important; } #sub.contactus .per .box p{ font-size: 18px; font-weight: 500; color:#828282; } #sub.contactus .per .box p b{ color:#000000; font-weight: 600; } #sub.contactus .per .box input:checked + label{ background: url('/img/sub/chk2.png') center center no-repeat; } #sub.contactus .btn_box{ display:flex; justify-content: center; margin-top: 60px; } #sub.contactus .f_gr .all_box{ width: 100%; } /* 인터랙션 */ #sub .sub_visual.on .visual_img img{ transform: translate(-50%,-50%) scale(1); opacity: 1; } #sub .sub_visual.on .st > div > strong{transform: translateY(0); } #sub .con_w .sc_tit .c_tit strong{ display: block; transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub .con_w .on .sc_tit .c_tit strong{ transform: translate(0); opacity: 1; } #sub .con_w .sc_tit .c_box{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub .con_w .on .sc_tit .c_box{ transform: translate(0); opacity: 1; } #sub .con02 .core_t{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub .con02.on .core_t{ transform: translate(0); opacity: 1; } #sub .con02 .img_gr{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub .con02.on .img_gr{ transform: translate(0); opacity: 1; } #sub .core.con03 .flexs .c_gr{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub .core.con03 .flexs .c_gr:nth-child(2){ transition-delay: .3s; } #sub .core.con03.on .flexs .c_gr{ transform: translate(0); opacity: 1; } #sub .contact .m_title span{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub .contact.on .m_title span{ transform: translate(0); opacity: 1; } #sub .contact .m_title strong{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub .contact.on .m_title strong{ transform: translate(0); opacity: 1; } #sub .contact .m_title p{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .6s; } #sub .contact.on .m_title p{ transform: translate(0); opacity: 1; } #sub .contact ul{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .9s; } #sub .contact.on ul{ transform: translate(0); opacity: 1; } #sub.l-scan .con02 .img_gr .img_box:nth-child(1){ width: 31.5%; } #sub.l-scan .con02 .img_gr .img_box video{ width: 100%; } #sub.l-scan .con02 .img_gr .img_box img{ width: 100%; } #sub.l-scan .con02 .img_gr .img_box:nth-child(2){ width: 68.5%; } #sub.spine .con02 .table{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub.spine .con02.on .table{ transform: translate(0); opacity: 1; } #sub.spine .con03 .core_t{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.spine .con03.on .core_t{ transform: translate(0); opacity: 1; } #sub.spine .con03 .img_gr{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub.spine .con03.on .img_gr{ transform: translate(0); opacity: 1; } #sub.technology .core_t{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.technology .on .core_t{ transform: translate(0); opacity: 1; } #sub.technology .patents{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub.technology .on .patents{ transform: translate(0); opacity: 1; } #sub.technology .img_gr{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .6s; } #sub.technology .on .img_gr{ transform: translate(0); opacity: 1; } #sub.about .con02 .wrap > div.on .txt .tt .gr > div{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } #sub.about .con02 .wrap > div .txt .tt .gr:nth-child(2) > div{ transition-delay: .4s; } #sub.about .con02 .wrap > div .txt .tt .gr:nth-child(3) > div{ transition-delay: .8s; } #sub.about .con02 .wrap > div .img img{ filter: blur(30px); transform: scale(1.1); transition: transform 2s, filter 2s; } #sub.about .con02 .wrap > div.on .img img { filter: blur(0); transform: scale(1); } #sub.about .left_con .left_t strong{ display: block; transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.about .left_con.on .left_t strong{ transform: translate(0); opacity: 1; } #sub.about .con03 .con > div{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.about .con03 .con > div:nth-child(1){ transition-delay: .3s; } #sub.about .con03 .con > div:nth-child(2){ transition-delay: .6s; } #sub.about .con03.on .con > div{ transform: translate(0); opacity: 1; } #sub.about .con04 .con > div{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.about .con04 .con > div:nth-child(1){ transition-delay: .3s; } #sub.about .con04 .con > div:nth-child(2){ transition-delay: .6s; } #sub.about .con04 .con > div:nth-child(3){ transition-delay: .9s; } #sub.about .con04 .con > div:nth-child(4){ transition-delay: 1.2s; } #sub.about .con04.on .con > div{ transform: translate(0); opacity: 1; } #sub.culture .st01{ display: block; transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.culture .on .st01{ transform: translate(0); opacity: 1; } #sub.culture .con02 .info > div{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.culture .con02 .info > div:nth-child(1){ transition-delay: .3s; } #sub.culture .con02 .info > div:nth-child(2){ transition-delay: .6s; } #sub.culture .con02 .info > div:nth-child(3){ transition-delay: .9s; } #sub.culture .con02.on .info > div{ transform: translate(0); opacity: 1; } #sub.culture .con03 .benefit > div{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.culture .con03 .benefit > div:nth-child(1){ transition-delay: .3s; } #sub.culture .con03 .benefit > div:nth-child(2){ transition-delay: .6s; } #sub.culture .con03 .benefit > div:nth-child(3){ transition-delay: .9s; } #sub.culture .con03 .benefit > div:nth-child(4){ transition-delay: 1.2s; } #sub.culture .con03 .benefit > div:nth-child(5){ transition-delay: 1.5s; } #sub.culture .con03 .benefit > div:nth-child(6){ transition-delay: 1.8s; } #sub.culture .con03 .benefit > div:nth-child(7){ transition-delay: 2.1s; } #sub.culture .con03 .benefit > div:nth-child(8){ transition-delay: 2.4s; } #sub.culture .con03.on .benefit > div{ transform: translate(0); opacity: 1; } #sub.culture .con02 .info i svg{ display: block; } #sub.culture .con02 .info > div:nth-child(1) i{ display: block; animation: icon01 2s ease-in-out infinite; } #sub.culture .con02 .info > div:nth-child(2) svg line{ clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); animation: icon02_01 2s ease-in-out infinite; } #sub.culture .con02 .info > div:nth-child(2) svg circle{ animation: icon02_02 2s ease-in-out infinite; } #sub.culture .con02 .info > div:nth-child(3) i{ display: block; animation: icon03 2s ease-in-out infinite; } #sub.careers .st01{ display: block; transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.careers .on .st01{ transform: translate(0); opacity: 1; } #sub.careers .con02 .link > div{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; } #sub.careers .con02 .link > div:nth-child(1){ transition-delay: .3s; } #sub.careers .con02 .link > div:nth-child(2){ transition-delay: .6s; } #sub.careers .con02 .link > div:nth-child(3){ transition-delay: .9s; } #sub.careers .con02 .link > div:nth-child(4){ transition-delay: 1.2s; } #sub.careers .con02.on .link > div{ transform: translate(0); opacity: 1; } #sub.careers .con03 .info{ transform: translateY(70px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .3s; } #sub.careers .con03.on .info{ transform: translate(0); opacity: 1; } #sub.policy .c_tit{ margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e6eaef; } #sub.policy .c_tit strong{ font-size: 30px; } #sub.policy .con01:after{ display: none; } #sub.policy .c_con{ display: flex; flex-flow: column; gap: 30px; } #sub.policy .c_con p{ font-size: 18px; line-height: 1.6em; color: #41454A; letter-spacing: -0.02em; white-space: pre-wrap; word-break: keep-all; } #sub.policy .c_con table{ border-top: 2px solid #000; } #sub.policy .c_con table th{ height: 54px; vertical-align: middle; border-bottom: 1px solid #e6eaef; font-size: 16px; color: #000; background-color: #f6f7f8; } #sub.policy .c_con table td{ padding: 20px 10px; word-break: keep-all; font-size: 15px; color: #000; line-height: 1.5em; border-bottom: 1px solid #e6eaef; color:#41454A; } #sub.policy .c_con > div{ display:flex; flex-flow: column; gap: 20px; } @keyframes icon01{ 0%{ transform: rotate(0); } 100%{ transform: rotate(90deg); } } @keyframes icon02_01{ 0%{ clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); } 100%{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } @keyframes icon02_02{ 0%{ transform: translate(361px, 1740px); } 50%{ transform: translate(351px, 1740px); } 100%{ transform: translate(361px, 1740px); } } @keyframes icon03{ 0%{ transform: rotate(0); } 50%{ transform: rotate(90deg); } 100%{ transform: rotate(0); } } /* 반응형 */ @media (max-width: 1880px) { #sub .core .wrap{ gap: 80px; } #sub.c-scan .con02 .core_t{ width: calc(50% - 40px); } #sub.c-scan .con02 .img_gr{ width: calc(50% - 40px); } #sub .img_gr > div{ width: 50%; } #sub .img_gr > div > img{ width: 100%; } #sub .img_gr > div > video{ width: 100%; } #sub .p01{ word-break: keep-all; } #sub.l-scan .img_gr > div{ width: auto; } #sub.technology .img_gr > div > img{ width: 100%; } /* #sub.l-scan .img_gr{ align-items: stretch; } #sub.l-scan .img_gr .img_box{ flex: 1; } #sub.l-scan .img_gr .img_box img{ width: 100%; height: auto; } #sub.l-scan .img_gr .img_box vdeo{ width: 100%; height: auto; } */ } @media (max-width: 1760px) { #sub .con_w .sc_tit{ gap: 70px; } #sub .con_w .sc_tit .c_tit strong{ font-size: 50px; } #sub.about .left_con .left_t{ width: 300px; } #sub.about .left_con .con{ width: calc(100% - 300px); } #sub.about .con04 .con > div > .img img{ width: 200px; height:auto; } #sub.about .con04 .con > div > .txt .name > strong{ font-size: 20px; } #sub.about .con04 .con > div > .txt .name > div > p{ font-size: 16px; } #sub.about .con04 .con > div > .txt .name{ gap: 10px; } #sub.about .con04 .con > div > .txt .name > div{ gap: 6px; } #sub.about .lists li{ font-size: 16px; word-break: keep-all; } #sub.about .lists li:after{ top: 10px; } #sub.culture .con02 .info > div{ padding: 0 30px; } #sub.culture .con02 .info .txt p{ word-break: keep-all; } #sub.culture .con02 .info .txt p br{ display :none; } #sub.culture .con03 .benefit > div .txt p br{ display: none; } #sub.careers .con02 .link > div > a .txt strong{ font-size: 30px; } #sub.careers .con02 .link > div > a .txt{ gap :15px; } #sub.careers .con02 .link > div > a .txt p{ font-size: 16px; word-break: keep-all; line-height: 1.5em; } #sub.careers .con02 .link > div > a{ height: 400px; } #sub.location .con02 .info > div{ padding-right: 40px; } #sub.location .con02 .info > div dl dd > p{ word-break: keep-all; } #sub.location .con02 .info > div dl dd > div .txt p{ word-break: keep-all; } #sub.location .con02 .info > div dl dd > div .txt p br{ display: none; } } @media (max-width: 1490px) { #sub .con_w .sc_tit{ flex-flow: column; gap: 20px; align-items: flex-start; } #sub .con_w{ padding-top: 120px; padding-bottom: 120px; gap: 100px; } #sub.product .con_w{ padding-bottom: 0; } #sub .con_w .sc_tit{ padding-bottom: 80px; } #sub .contact .m_title strong{ font-size: 60px; } #sub.technology .con02:after{ height: calc(100% + 220px); } #sub.about .con03 .con > div > .txt strong{ font-size: 22px; } #sub.about .con03 .con > div > .txt{ gap: 12px; } #sub.about .con03 .p01{ font-size: 16px; word-break: keep-all; } #sub.about .con03 .p01 br{ display: none; } #sub.about .left_con .left_t{ width: 200px; } #sub.about .left_con .con{ width: calc(100% - 200px); } #sub.about .left_con .left_t strong{ font-size: 30px; } #sub.culture .con03 .benefit > div .txt{ gap: 12px; } #sub.culture .con03 .benefit > div .txt strong{ font-size: 18px; } #sub.culture .con03 .benefit > div .txt p{ font-size: 16px; } #sub.culture .con03 .benefit > div{ padding: 30px; } #sub.careers .con02 .link{ flex-flow: wrap; } #sub.careers .con02 .link > div{ width: calc(50% - 10px); } #sub.careers .con02 .link > div > a{ height: 280px; } #sub.careers .con02 .link > div > a .arrow svg{ width: 40px; height: auto; } #sub.board .inner{ width: 100%; padding: 0 50px; } #sub.board .b_top{ flex-flow: column; gap: 20px; } #sub.board .b_top{ margin-bottom: 50px; } #sub.history .con02 .wrap:before{ top: -100px; height: calc(100% + 220px); } #sub.history .con02 .wrap:after{ display: none; } #sub.history .con02 .wrap{ width: 100%; } #sub.history .con02 .con{ padding-right: 30px; } #sub.history .con02 .con .y_box ul li{ word-break: keep-all; line-height: 1.5em; } } @media (max-width: 1280px) { #sub .sub_visual .st > div > strong{ font-size: 90px; } #sub .sub_visual .st{ top: 200px; } #sub .sub_visual{ height: 800px; } #sub .sub_visual .visual_img img{ height: 100%; } #sub .con_w .sc_tit .c_tit strong{ font-size: 48px; } #sub .con_w .sc_tit .c_box b{ font-size: 20px; } #sub .p01{ font-size: 18px; } #sub.c-scan .con02 .img_gr{ flex-flow: column; } #sub.c-scan .con02 .img_gr > div{ width: 100%; } .view_pop .wraps .box{ width: calc(100% - 200px); } #sub .core_t > span{ height: 38px; padding: 0 16px; font-size: 15px; } #sub .st01{ font-size: 30px; } #sub .core_t{ gap: 10px; } #sub .core_t dl dt{ font-size: 16px; } #sub .core_t dl dd{ font-size: 16px; } #sub .core_t dl dd span{ display: block; } #sub .core_t dl dd br{ display: none; } #sub .core_t dl{ margin-top: 10px; gap: 8px; } #sub .lists li{ font-size: 18px; padding-left: 10px; } #sub .lists li br{ display: none; } #sub .lists li:after{ top: 12px; } #sub.c-scan .con03 .img_gr > div{ width: 100%; } #sub .contact .m_title strong{ margin-bottom: 16px; } #sub .contact .m_title span{ font-size: 18px; margin-bottom: 8px; } #sub .contact .m_title{ margin-bottom: 50px; } #sub .contact{ height: 500px; } #sub.l-scan .img_gr{ gap: 20px; } #sub.l-scan .con02 .wrap .step{ margin-bottom: 60px; } #sub.technology .con02 .tab{ width: 300px; padding-right: 30px; } #sub.technology .con02:after{ left: 350px; } #sub.technology .con02 .wrap{ gap: 50px; } #sub.technology .con02 .con{ padding-right: 0; width: calc(100% - 350px); } #sub.technology .con02 .tab ul li a{ font-size: 16px; padding: 0 20px; height: 54px; } #sub.technology .con02 .con .patents dl dt{ font-size: 18px; } #sub.technology .con02 .con .patents dl dd a{ font-size: 16px; gap: 4px; } #sub.technology .con02 .con .patents dl dd{ gap: 8px; } #sub.technology .con02 .con .patents dl{ gap: 12px; } #sub.about .left_con .wrap{ flex-flow: column; gap: 20px; } #sub.about .con03 .con{ gap: 20px; } #sub.about .con03 .con > div{ gap: 20px; } #sub.about .con03 .con > div{ width: calc(50% - 10px); } #sub.about .left_con .left_t{ width: 100%; height: auto; } #sub.about .left_con .con{ width: 100%; } #sub.about .con04 .con > div > .txt .name{ padding-bottom: 12px; } #sub.about .con04 .con > div > .txt{ gap: 12px; } #sub.about .con04 .con > div > .txt .lists{ gap: 6px; } #sub.about .con02 .wrap > div .txt strong{ font-size: 28px; } #sub.about .con02 .wrap > div .txt{ gap: 20px; } #sub.about .con02 .wrap > div .img{ width: 50%; } #sub.about .con02 .wrap > div .txt{ width: 50%; } #sub.about .con02 .wrap > div{ gap: 40px; } #sub.location .con02 .info > div dl{ gap: 12px; } #sub.location .con02 .info > div dl dt{ font-size: 16px; } #sub.location .con02 .info > div dl dd strong{ font-size: 18px; } #sub.location .con02 .info > div dl dd > div .txt p{ font-size: 16px; } #sub.location .con02 .info > div dl dd > p{ font-size: 16px; } #sub.location .con02 .info > div dl dd > span{ font-size: 14px; line-height: 1.3em; } #sub.location .con02 .info > div dl dd{ gap: 10px; } #sub.location .con02 .maps{ margin-top: 60px; height: 400px; } #sub.board .g_list ul li a .txt strong{ font-size: 18px; } #sub.board .g_list ul li a .txt .info dl dt{ font-size: 14px; width: 70px; } #sub.board .g_list ul li a .txt .info dl dd{ font-size: 14px; } #sub.board .g_list ul li a{ gap: 16px; } #sub.board .g_list ul li a .txt .info{ gap: 10px; padding-top: 16px; } #sub.board .g_list ul li a .txt{ gap: 16px; } #sub.board .g_list ul li a .cate{ height: 32px; padding: 0 12px; font-size: 13px; left: 12px; top: 12px; } #sub.board .p_list ul{ gap: 30px 20px; } #sub.board .p_list ul > li{ width: calc(25% - 15px); } #sub.board .p_list ul li a .hover i svg{ width: 40px; height: auto; } #sub.board .p_list ul li a{ gap: 12px; } #sub.board .p_list ul li a .txt strong{ font-size: 16px; } #sub.board.view .v_tit .left strong{ font-size: 24px; } #sub.board.view .v_tit .left{ gap: 10px; } #sub.board.view .v_tit .left span{ font-size: 16px; } #sub.board.view .v_tit p{ font-size: 16px; } #sub.board.view .v_con{ padding: 20px 0; min-height: 300px; } #sub.board.view .v_tit{ padding-bottom: 20px; } #sub.board.view .btn_box{ margin-top: 30px; } } @media (max-width: 1100px) { #sub .wrap{ padding: 0 20px; } #sub .sub_visual .st{ left: 20px; } #sub .sub_visual .loc{ left: 20px; } #sub .sub_visual .st > div > strong{ font-size: 70px; } #sub .sub_visual .loc > ul > li{ font-size: 14px; } #sub .sub_visual .loc > ul > li:last-child{ height: 30px; padding: 0 14px; } #sub .sub_visual .loc > ul{ gap: 12px; } #sub .sub_visual{ height: 680px; } #sub .sub_visual .st{ top: 150px; } #sub .con_w{ padding-top: 80px; gap: 70px; } #sub .con_w .sc_tit{ gap: 10px; padding-bottom: 40px; } #sub .con_w .sc_tit .c_tit strong{ font-size: 32px; } #sub .con_w .sc_tit .c_box b{ font-size: 18px; } #sub .p01{ font-size: 15px; } #sub .core .wrap{ flex-flow: column; gap: 30px; } #sub .core .wrap{ align-items: flex-start; justify-content: flex-start } #sub.c-scan .con02 .img_gr{ flex-flow: row; width: 100%; } #sub .st01{ font-size: 22px; } #sub .core_t > span{ height: 30px; padding: 0 13px; font-size: 14px; } #sub.c-scan .con02 .core_t{ width: 100%; } #sub .con_w .core .wrap{ padding-bottom: 60px; } #sub .core .flexs{ flex-flow: column; gap: 60px; } #sub .core .flexs .c_gr{ width: 100%; gap: 20px; } #sub .core .flexs:after{ display: none; } #sub .con_w .core .wrap:after{ width: calc(100% - 40px); } #sub .img_gr > div > img{ max-width: 100%; width: auto; } #sub .img_gr > div{ padding: 10px; } #sub .core .flexs .c_gr{ gap: 10px; } #sub .core .flexs .c_gr{ align-items: flex-start; } #sub .lists{ gap: 6px; } #sub .lists li{ font-size: 14px; } #sub .lists li:after{ top: 8px; } #sub.l-scan .con02 .wrap .step .txt strong{ font-size: 18px; } #sub.l-scan .con02 .wrap .step span{ font-size: 14px; } #sub.l-scan .con02 .wrap .step{ gap: 30px; margin-bottom: 0; } #sub.technology .con02 .con{ gap: 100px; } #sub.technology .con02:after{ height: calc(100% + 190px); top: -70px; } #sub.about .con02 .wrap{ gap :60px; } #sub.about .left_con .con{ flex-flow: wrap; gap: 20px; } #sub.about .left_con .con > div{ width: calc(50% - 10px); } #sub.about .con03 .con{ flex-flow: column; } #sub.about .con03 .con > div{ width: 100%; } #sub.culture .con02 .info .txt{ gap: 10px; } #sub.culture .con02 .info .txt strong{ font-size: 18px; } #sub.culture .con02 .info .txt p{ font-size: 16px; } #sub.careers .con_w{ gap: 60px; } #sub.board .g_list ul{ gap: 40px 20px; } #sub.board .g_list ul > li{ width: calc(50% - 10px); } #sub.board .inner{ padding: 0 20px; } #sub.board .con01:after{ width: calc(100% - 40px); } #sub.board .b_top .b_cate{ height: 44px; padding: 6px; } #sub.board .b_top .b_cate ul li a{ font-size: 14px; padding: 0 18px; } #sub.board .b_top .search input{ font-size: 14px; padding-left: 20px; } #sub.board .b_top .search{ width: 320px; height: 44px; } #sub.board .b_top .search button{ right: 20px; } #sub.board .b_top .search button svg{ display: block; width: 12px; height: auto; } #sub.board .b_top{ margin-bottom: 30px; gap: 12px; } #sub.board .con_w{ gap: 60px; } #sub.board .g_list ul li a .hover i svg{ width: 40px; height: auto; } #sub.board .paging{ margin-top: 40px; } #sub.board .paging ul li a{ width: 32px; height: 32px; font-size: 14px; } #sub.board .paging ul li.on a:after{ bottom: 0; } #sub.board .n_list ul{ gap: 30px 20px; } #sub.board .n_list ul > li{ width: calc(50% - 10px); } #sub.board .n_list ul li a .hover i svg{ width: 40px; height: auto; } #sub.board .n_list ul li a .txt span{ font-size: 13px; } #sub.board .n_list ul li a .txt strong{ font-size: 16px; } #sub.board .n_list ul li a .txt p{ font-size: 13px; margin-top: 4px; } #sub.board .n_list ul li a .txt{ gap: 6px; } #sub.board .n_list ul li a{ gap :16px; } #sub.board.view .v_tit{ flex-flow: column; align-items: flex-start; gap: 10px; } #sub.board.view .v_tit .left{ gap: 4px; } #sub.board.view .v_tit .left span{ font-size: 14px; } #sub.board.view .v_tit .left strong{ font-size: 18px; } #sub.board.view .v_tit p{ font-size: 14px; } #sub.contactus .c_tit{ padding-bottom: 50px; } #sub.contactus .c_tit strong{ font-size: 40px; } #sub.contactus .f_gr > div{ gap: 10px; } #sub.contactus .f_gr > div > label{ font-size: 16px; } #sub.contactus .f_gr > div .input_t{ height: 54px; font-size: 16px; padding-left: 20px; } #sub.contactus .f_gr > div > ul{ gap: 10px; } #sub.contactus .f_gr > div > ul > li{ width: calc(25% - 7.5px); } #sub.contactus .f_gr > div > ul > li > label{ width: 100%; height: 54px; font-size: 16px; } #sub.contactus .f_gr{ gap: 40px 20px; } #sub.contactus .f_gr > div{ width: calc(50% - 10px); } #sub.contactus .f_gr > div .input_ta{ height: 160px; padding: 20px; font-size: 16px; } #sub.contactus .per .box p{ font-size: 16px; } #sub.contactus .per{ margin-top: 30px; } #sub.contactus .btn_box{ margin-top: 30px; } #sub.history .con02 .wrap:before{ top: -70px; height: calc(100% + 190px); } #sub.history .con02 .year{ width: 300px; padding-left: 30px; } #sub.history .con02 .year ul li{ font-size: 60px; } #sub.history .con02 .year ul{ height: 60px; } #sub.history .con02 .con > div{ gap: 80px; } #sub.history .con02 .con{ width: calc(100% - 300px); gap: 80px; } #sub.history .con02 .wrap:before{ left: 300px; } #sub.history .con02 .con .y_box{ gap: 15px; padding-left: 30px; } #sub.history .con02 .con .y_box strong:after{ width: 5px; height: 5px; left: -32.5px; } #sub.history .con02 .con .y_box strong{ font-size: 18px; } #sub.history .con02 .con .y_box ul li{ font-size: 16px; } #sub.history .con02 .con .y_box ul{ gap: 8px; } #sub.history .con_w{ padding-bottom: 200px; } } @media (max-width: 860px) { #sub.l-scan .con02 .wrap .step{ flex-flow: column; width: 100%; gap: 12px; } #sub.l-scan .con02 .wrap .step > div{ width: 100%; } #sub.l-scan .con02 .wrap .step span{ line-height: 22px; } #sub.l-scan .con02 .img_gr{ display:flex; flex-flow: column; } #sub.l-scan .con02 .img_gr .img_box{ width: 100% !important; } #sub.l-scan .con02 .wrap{ padding-bottom: 60px !important; } #sub.spine .con02 .wrap{ padding-bottom: 60px !important; } #sub.technology .con02 .tab{ display: none; } #sub.technology .con02 .con{ width: 100%; } #sub.technology .con02:after{ display: none; } #sub.technology .con02 .con .core_t{ padding-bottom: 20px; border-bottom: none; } #sub.technology .con02 .con .patents{ margin-top: 0; margin-bottom: 20px; } #sub.technology .con02 .con > div{ padding-bottom: 60px; border-bottom: 1px solid #E6EAEF; } #sub.technology .con02 .con{ gap: 60px; } #sub.about .con03 .con > div > .txt strong{ font-size: 18px; } #sub.about .left_con .left_t strong{ font-size: 22px; } #sub.about .con04 .con > div > .txt .name{ flex-flow: column; } #sub.about .con04 .con > div > .txt .name{ gap: 6px; } #sub.about .con02 .wrap > div{ flex-flow: column; gap: 20px; } #sub.about .con02 .wrap > div .img{ width: 100%; } #sub.about .con02 .wrap > div .txt{ width: 100%; } #sub.culture .con02 .info { flex-flow: column; } #sub.culture .con02 .info > div{ width: 100%; height: auto; padding: 40px 20px; gap: 20px; border-right: none; border-bottom: 1px solid #e1e1e1; } #sub.culture .con02 .info span{ position: static; } #sub.culture .con02 .info > div:nth-child(1){ padding-top: 0; } #sub .st01{ font-size: 20px; } #sub.culture .con02 .info .txt p{ font-size: 14px; } #sub.culture .con02 .info .txt{ gap: 6px; } #sub.culture .con02 .info > div > i > svg{ width: 50px; height: auto; } #sub.culture .con02 .info > div:last-child{ border-bottom: none; padding-bottom: 60px; } #sub.culture .con03:after{ width: calc(100% - 40px); } #sub.culture .con03 .benefit > div{ width: 50%; gap: 20px; } #sub.culture .con03 .benefit > div:nth-child(2n+0){ border-right: none; } #sub.culture .con03 .benefit > div:nth-child(5), #sub.culture .con03 .benefit > div:nth-child(6){ border-bottom: 1px solid #e1e1e1 !important; } #sub.culture .con03 .benefit > div > i svg { width: 40px; height: auto; } #sub.culture .con03 .benefit > div .txt p{ font-size: 14px; } #sub.culture .con03 .benefit > div .txt strong{ font-size: 18px; } #sub.culture .con03 .benefit > div .txt{ gap: 6px; } #sub.culture .con03 .benefit{ margin-top: 20px; } #sub.culture .con02 .info{ margin-top: 20px; } #sub.careers .con02 .link > div > a .txt strong{ font-size: 24px; } #sub.careers .con03 strong{ padding-top: 60px; } #sub.careers .con03:after{ width: calc(100% - 40px); } #sub.careers .con02 .link{ margin-top: 20px; } #sub.careers .con03 .info{ margin-top: 20px; gap: 8px; } #sub.careers .con03 .info p{ font-size: 15px; } #sub.careers .con03 .info dl{ gap: 6px; } #sub.careers .con03 .info dl dt{ font-size: 15px; } #sub.careers .con03 .info dl dd{ font-size: 15px; } #sub.careers .con02 .link > div > a .dot{ left: 30px; top: 30px; } #sub.careers .con02 .link > div > a{ padding: 30px; } #sub.location .con02 .info { flex-flow: column; gap: 30px; } #sub.location .con02 .info > div dl{ gap: 8px; } #sub.location .con02 .info > div dl dd > div .txt{ gap: 8px; padding-top: 4px; } #sub.location .con02 .info > div dl dd > div i svg{ width: 30px; height: auto; } #sub.location .con02 .info > div{ width: 100%; padding-right: 0; border-right: none; } #sub.board .g_list ul li a .txt strong{ font-size: 15px; line-height: 1.3em; } #sub.board .g_list ul li a .txt{ gap: 10px; } #sub.board .g_list ul li a .txt .info dl{ flex-flow: column; gap: 4px; } #sub.board .g_list ul li a .txt .info dl dd{ font-size: 13px; width: 100%; } #sub.board .g_list ul li a .txt .info dl dt{ font-size: 13px; width: 100%; } #sub.board .g_list ul{ gap: 30px 20px; } #sub.board .b_top .search{ width: 100%; } #sub.board .b_top{ justify-content: flex-start; align-items: flex-start; } #sub.board .b_top .b_cate{ height: auto; border-radius: 0; border: none; padding: 0; justify-content: flex-start; } #sub.board .b_top .b_cate ul{ gap: 8px; flex-flow: wrap; } #sub.board .b_top .b_cate ul li a{ font-size: 14px; padding: 0 12px; white-space: nowrap; height: 28px; } #sub.board .p_list ul li{ width: calc(50% - 10px); } #sub.policy .c_con p{ font-size: 14px; } #sub.policy .c_con{ gap: 20px; } #sub.policy .c_tit { padding-bottom: 15px; margin-bottom: 15px; } #sub.policy .c_tit strong{ font-size: 18px; } #sub.policy .c_con table th{ height: 40px; font-size: 14px; } #sub.policy .c_con table td{ padding: 10px; font-size: 13px; } } @media (max-width: 660px) { #sub .sub_visual .st > div > strong{ font-size: 40px; } #sub .con_w .sc_tit .c_tit strong{ font-size: 24px; } #sub .con_w .sc_tit .c_box{gap: 8px; } #sub .con_w .sc_tit .c_box b{ font-size: 16px; } #sub .p01{ font-size: 14px; } #sub .core_t dl dd{ font-size: 14px; } #sub .img_gr{ gap: 10px; } #sub.c-scan .con02 .img_gr{ flex-flow: column; } #sub .img_gr > div > img{ max-width: auto; width: 100%; } .view_pop .wraps .box .close_b{ right: 0; top: -12px; transform: translate(0,-100%); } .view_pop .wraps .box .close_b svg{ width: 40px; height: auto; } .view_pop .wraps .box{ width: calc(100% - 40px); padding: 10px; } #sub .contact .m_title strong{ font-size: 30px; } #sub .contact .m_title span{ font-size: 14px; } #sub .contact .m_title p{ font-size: 14px; } #sub .contact .m_title{ margin-bottom: 25px; } #sub .contact{ height: 400px; } #sub .con_w .core .wrap{ padding-bottom: 0; } #sub .sub_visual{ height :540px; } #sub .core .flexs { gap: 30px; } #sub.l-scan .img_gr{ gap: 12px; } #sub .p01 br{ display: none; } #sub.spine .con03 .img_gr{ flex-flow: column; } #sub.spine .con03 .img_gr > .img_box{ width: 100%; } #sub.technology .con02 .con .patents dl dt{ font-size: 15px; } #sub.technology .con02 .con .patents dl dd a{ font-size: 13px; } #sub.technology .img_gr{ flex-flow: column; } #sub.technology .img_gr .img_box{ width: 100%; } #sub .con_w .sc_tit{ padding-bottom: 20px; } #sub .con_w{ gap: 60px; } #sub.technology .con02 .con > div:last-child{ padding-bottom: 0; border-bottom: none; } #sub .con_w{ padding-bottom: 70px; padding-top: 70px; } #sub.about .con04 .con > div{ flex-flow: column; gap: 15px; align-items: flex-start } #sub.about .con04 .con > div > .img img{ width: 100%; } #sub.about .con04 .con > div > .txt .name > strong{ font-size: 18px; } #sub.about .con04 .con > div > .txt .name > div > p{ font-size: 14px; } #sub.about .lists li{ font-size: 13px; } #sub.about .lists li:after{ top: 8px; } #sub.about .con02 .wrap > div .txt strong{ font-size: 20px; } #sub.about .con02 .wrap > div .txt{ gap: 8px; } #sub.about .con02 .wrap > div .txt span{ font-size: 14px; } #sub.about .con02 .wrap{ gap: 40px; } #sub.culture .con03 .benefit > div{ padding: 20px; } #sub.culture .con03 .benefit > div .txt strong{ font-size: 16px; word-break: keep-all; } #sub.careers .con02 .link { gap :12px; } #sub.careers .con02 .link > div{ width: 100%; } #sub.careers .con02 .link > div > a{ height: 140px; } #sub.careers .con02 .link > div > a .txt{ gap: 6px; } #sub.careers .con02 .link > div > a .txt strong{ font-size: 20px; } #sub.careers .con02 .link > div > a .txt p{ font-size: 14px; } #sub.location .con02 .info > div dl dd strong{ font-size: 16px; } #sub.location .con02 .info > div dl dt{ font-size: 14px; } #sub.location .con02 .info > div dl dd > div .txt p{ font-size: 14px; } #sub.location .con02 .info > div dl dd > div .txt{ gap: 4px; } #sub.location .con02 .info > div dl dd{ gap: 6px; } #sub.location .con02 .info > div dl dd > p{ font-size: 14px; } #sub.location .con02 .info > div dl dd > span{ font-size: 12px; } #sub.location .con02 .maps{ margin-top: 30px; height: 280px; } #sub.location .con02 .info > div dl dd > div{ gap: 8px; } #sub.board .g_list ul{ flex-flow: column; } #sub.board .g_list ul li{ width: 100%; } #sub.board .b_top{ margin-bottom: 20px; } #sub.contactus .c_tit strong{ font-size: 22px; } #sub.contactus .c_tit{ padding-bottom: 20px; } #sub.contactus .f_gr{ gap: 30px; } #sub.contactus .f_gr > div{ width: 100%; } #sub.contactus .f_gr > div > label{ font-size: 15px; } #sub.contactus .f_gr > div .input_t{ height: 44px; font-size: 14px; padding-left: 16px; } #sub.contactus .f_gr > div > ul > li > label{ height: 44px; font-size: 14px; } #sub.contactus .f_gr > div .input_ta{ font-size: 14px; padding: 16px; height: 120px; } #sub.contactus .per .box p{ font-size: 14px; } #sub.contactus .per .box label{ width: 20px; height: 20px; } #sub.history .con02 .year{ width: 150px; padding-left: 20px; } #sub.history .con02 .year ul li{ font-size: 32px; } #sub.history .con02 .year ul{ height: 32px; } #sub.history .con02 .con{ width: calc(100% - 150px); } #sub.history .con02 .wrap:before{ left: 150px; top: -60px; } #sub.history .con02 .con > div{ gap: 60px; } #sub.history .con02 .con .y_box ul li{ font-size: 14px; } #sub.history .con02 .con .y_box strong{ font-size: 16px; } }