/* 서브 공통 */ .eng{ font-family: 'Outfit', sans-serif; } #sub{ margin-top: 100px; } .inner{ width: 100%; padding: 0 80px; max-width: 1920px; margin: 0 auto; } .inner2{ width: 100%; padding: 0 160px; max-width: 1920px; margin: 0 auto; } .inner3{ width: 100%; padding: 0 40px; max-width: 1920px; margin: 0 auto; } .br{ display: block; } .company_visual .vis_title .title strong { overflow: hidden; } .company_visual .vis_title .title strong > div{ font-family: 'Outfit', sans-serif; line-height: 1em; } .company_visual .vis_title .title strong > div{ transform: translateY(100%); transition: transform .7s; } .company_visual .vis_title .title strong > div:nth-child(1){ transition-delay: 0; } .company_visual .vis_title .title strong > div:nth-child(2){ transition-delay: .05s; } .company_visual .vis_title .title strong > div:nth-child(3){ transition-delay: .1s; } .company_visual .vis_title .title strong > div:nth-child(4){ transition-delay: .15s; } .company_visual .vis_title .title strong > div:nth-child(5){ transition-delay: .2s; } .company_visual .vis_title .title strong > div:nth-child(6){ transition-delay: .25s; } .company_visual .vis_title .title strong > div:nth-child(7){ transition-delay: .3s; } .company_visual .vis_title .title strong > div:nth-child(8){ transition-delay: .35s; } .company_visual .vis_title .title strong > div:nth-child(9){ transition-delay: .4s; } .company_visual .vis_title .title strong > div:nth-child(10){ transition-delay: .45s; } .company_visual .vis_title .title strong > div:nth-child(11){ transition-delay: .5s; } .company_visual .vis_title .title strong > div:nth-child(12){ transition-delay: 0.55s; } .company_visual .vis_title .title strong > div:nth-child(13){ transition-delay: 0.6s; } .company_visual .vis_title .title strong > div:nth-child(14){ transition-delay: 0.65s; } .company_visual .vis_title .title strong > div:nth-child(15){ transition-delay: 0.7s; } .company_visual .vis_title .title strong > div:nth-child(16){ transition-delay: 0.75s; } .company_visual .vis_title .title strong > div:nth-child(17){ transition-delay: 0.8s; } .company_visual.on .vis_title .title strong > div{ transform: translateY(0); } #sub .sub_visual{ height: calc(100vh - 100px); position: relative; display: flex; } #sub .sub_visual .img{ position: absolute; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transition: width 1.5s, height 1.5s, right 1.5s, top 1.5s, border-radius 1.5s; } #sub .sub_visual .img:after{ content:""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); position: absolute; left: 0; top: 0; transition: opacity 1.5s; } #sub .sub_visual .img img{ display: block; min-height: auto; min-width: 100%; width: 100%; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub .sub_visual .tit{ text-align: left; display: flex; flex-direction: column; position: relative; } #sub .sub_visual .tit .wrap{ position: relative; height: 120px; width: 100%; } #sub .sub_visual .tit strong{ font-size: 100px; color:#FFFFFF; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2em; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); transition: transform 1.5s, left 1.5s; white-space: nowrap; } #sub .sub_visual .of_txt{ position: absolute; left: 0; top: 50%; right: 0; margin: 0 auto; transform: translate(0,-50%); z-index: 1; height: 540px; transition: top 1.5s, transform 1.5s; } #sub .sub_visual .of_txt > .inner{ height: 100%; display: flex; flex-flow: column; justify-content: center; } #sub .sub_visual .of_txt > .inner .tit { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: clip-path 1.5s; transition-delay: .2s; } #sub .sub_visual .of_txt .loc{ opacity: 0; z-index: -1; position: relative; } #sub .sub_visual.on .of_txt{ top:0; transform: translate(0,0); } #sub .board_visual{ transition: 0s !important; } #sub .board_visual .tit strong{ display: block; text-align: center; overflow: hidden; display: flex; justify-content: center; width: 100%; transition: 0s !important;} #sub .board_visual .tit strong div{ font-family: inherit; transition: filter .8s, opacity .8s; filter: blur(20px); opacity: 0; } #sub .sub_visual .tit strong{ overflow: hidden; } #sub .sub_visual .tit strong div{ font-family: inherit; transition: filter .8s, opacity .8s; filter: blur(20px); opacity: 0; } #sub .sub_con .sub_visual02 .txt strong{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1s; transition-delay: .3s; } #sub .sub_con .sub_visual02.on .txt strong{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub .sub_con .sub_visual02 .txt p{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1s; transition-delay: .3s; } #sub .sub_con .sub_visual02.on .txt p{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub .sub_visual .tit strong div:nth-child(1) { transition-delay: 0s; } #sub .sub_visual .tit strong div:nth-child(2) { transition-delay: 0.05s; } #sub .sub_visual .tit strong div:nth-child(3) { transition-delay: 0.1s; } #sub .sub_visual .tit strong div:nth-child(4) { transition-delay: 0.15s; } #sub .sub_visual .tit strong div:nth-child(5) { transition-delay: 0.2s; } #sub .sub_visual .tit strong div:nth-child(6) { transition-delay: 0.25s; } #sub .sub_visual .tit strong div:nth-child(7) { transition-delay: 0.3s; } #sub .sub_visual .tit strong div:nth-child(8) { transition-delay: 0.35s; } #sub .sub_visual .tit strong div:nth-child(9) { transition-delay: 0.4s; } #sub .sub_visual .tit strong div:nth-child(10) { transition-delay: 0.45s; } #sub .sub_visual .tit strong div:nth-child(11) { transition-delay: 0.5s; } #sub .sub_visual .tit strong div:nth-child(12) { transition-delay: 0.55s; } #sub .sub_visual .tit strong div:nth-child(13) { transition-delay: 0.6s; } #sub .sub_visual .tit strong div:nth-child(14) { transition-delay: 0.65s; } #sub .sub_visual .tit strong div:nth-child(15) { transition-delay: 0.7s; } #sub .sub_visual .tit strong div:nth-child(16) { transition-delay: 0.75s; } #sub .sub_visual .tit strong div:nth-child(17) { transition-delay: 0.8s; } #sub .sub_visual .tit strong div:nth-child(18) { transition-delay: 0.85s; } #sub .sub_visual .tit strong div:nth-child(19) { transition-delay: 0.9s; } #sub .sub_visual .tit strong div:nth-child(20) { transition-delay: 0.95s; } #sub .sub_visual .tit strong div:nth-child(21) { transition-delay: 1s; } #sub .sub_visual .tit strong div:nth-child(22) { transition-delay: 1.05s; } #sub .sub_visual .tit strong div:nth-child(23) { transition-delay: 1.1s; } #sub .sub_visual .tit strong div:nth-child(24) { transition-delay: 1.15s; } #sub .sub_visual .tit strong div:nth-child(25) { transition-delay: 1.2s; } #sub .sub_visual .tit strong div:nth-child(26) { transition-delay: 1.25s; } #sub .sub_visual .tit strong div:nth-child(27) { transition-delay: 1.3s; } #sub .sub_visual .tit strong div:nth-child(28) { transition-delay: 1.35s; } #sub .sub_visual .tit strong div:nth-child(29) { transition-delay: 1.4s; } #sub .sub_visual .tit strong div:nth-child(30) { transition-delay: 1.45s; } #sub .sub_visual .tit strong div:nth-child(31) { transition-delay: 1.5s; } #sub .sub_visual .tit strong div:nth-child(32) { transition-delay: 1.55s; } #sub .sub_visual .tit strong div:nth-child(33) { transition-delay: 1.6s; } #sub .sub_visual .tit strong div:nth-child(34) { transition-delay: 1.65s; } #sub .sub_visual .tit strong div:nth-child(35) { transition-delay: 1.7s; } #sub .sub_visual .tit strong div:nth-child(36) { transition-delay: 1.75s; } #sub .sub_visual .tit strong div:nth-child(37) { transition-delay: 1.8s; } #sub .sub_visual .tit strong div:nth-child(38) { transition-delay: 1.85s; } #sub .sub_visual .tit strong div:nth-child(39) { transition-delay: 1.9s; } #sub .sub_visual .tit strong div:nth-child(40) { transition-delay: 1.95s; } #sub .sub_visual .tit strong div:nth-child(41) { transition-delay: 2s; } #sub .sub_visual .tit strong div:nth-child(42) { transition-delay: 2.05s; } #sub .sub_visual .tit strong div:nth-child(43) { transition-delay: 2.1s; } #sub .sub_visual .tit strong div:nth-child(44) { transition-delay: 2.15s; } #sub .sub_visual .tit strong div:nth-child(45) { transition-delay: 2.2s; } #sub .sub_visual .tit strong div:nth-child(46) { transition-delay: 2.25s; } #sub .sub_visual .tit strong div:nth-child(47) { transition-delay: 2.3s; } #sub .sub_visual .tit strong div:nth-child(48) { transition-delay: 2.35s; } #sub .sub_visual .tit strong div:nth-child(49) { transition-delay: 2.4s; } #sub .sub_visual .tit strong div:nth-child(50) { transition-delay: 2.45s; } #sub .sub_visual.ac .tit strong div{ filter: blur(0); opacity: 1; } #sub .board_visual .tit strong div:nth-child(1){ transition-delay: 0; } #sub .board_visual .tit strong div:nth-child(2){ transition-delay: .05s; } #sub .board_visual .tit strong div:nth-child(3){ transition-delay: .1s; } #sub .board_visual .tit strong div:nth-child(4){ transition-delay: .15s; } #sub .board_visual .tit strong div:nth-child(5){ transition-delay: .2s; } #sub .board_visual .tit strong div:nth-child(6){ transition-delay: .25s; } #sub .board_visual .tit strong div:nth-child(7){ transition-delay: .3s; } #sub .board_visual .tit strong div:nth-child(8){ transition-delay: .35s; } #sub .board_visual .tit strong div:nth-child(9){ transition-delay: .4s; } #sub .board_visual .tit strong div:nth-child(10){ transition-delay: .45s; } #sub .board_visual .tit strong div:nth-child(11){ transition-delay: .5s; } #sub .board_visual .tit strong div:nth-child(12){ transition-delay: 0.55s; } #sub .board_visual .tit strong div:nth-child(13){ transition-delay: 0.6s; } #sub .board_visual .tit strong div:nth-child(14){ transition-delay: 0.65s; } #sub .board_visual .tit strong div:nth-child(15){ transition-delay: 0.7s; } #sub .board_visual .tit strong div:nth-child(15){ transition-delay: 0.7s; } #sub .board_visual .tit strong div:nth-child(16){ transition-delay: 0.75s; } #sub .board_visual .tit strong div:nth-child(17){ transition-delay: 0.8s; } #sub .board_visual.on .tit strong div{ filter: blur(0); opacity: 1; } #sub .board_visual > .inner{ height: 420px !important; } #sub .sub_visual > .inner{ height: 540px; display: flex; flex-flow: column; justify-content: center; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); transition: top 1.5s, transform 1.5s; } #sub .sub_visual .loc{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } #sub .sub_visual .loc > div{ display: flex; align-items: center; gap: 6px; } #sub .sub_visual .loc > div:after{ content:""; display: block; width: 20px; height: 1px; background-color: #333333; } #sub .sub_visual .loc > div:last-child:after{ display: none; } #sub .sub_visual .loc > div > a{ display: flex; gap: 8px; align-items: center; color: #333; } #sub .sub_visual .loc > div > button{ display: flex; gap: 8px; align-items: center; color: #333; } #sub .sub_visual .loc_li{ position: relative; } #sub .sub_visual.on2 > .inner { z-index: 10; transition-delay: z-index 1s; } #sub .sub_visual.on > .inner{ top: 0; transform: translate(0,0); } #sub .company_visual .loc .btn{ position: relative; } #sub .lc{ position: absolute; left: 0; top: 100%; z-index: 10; width: 300px; padding: 20px 26px; padding-right: 15px; background-color: #FFFFFF; box-shadow: 0 0 20px rgba(0,0,0,0.1); border-radius: 10px; transform: translateY(13px); display: none; } #sub .lc > li{ margin-bottom: 14px; } #sub .lc > li > a{ font-size: 17px; letter-spacing: -0.025em; color:#333333; transition: color .3s; } #sub .lc > li > a:hover{ color: #000; } #sub .lc > li:last-child{ margin-bottom: 0; } #sub .sub_visual > .inner > .tit strong{ color: #333333; } #sub .sub_visual.on{ } #sub .sub_visual.on .tit strong{ transform: translate(0,0); left: 0; } #sub .sub_visual.on .img{ width: 720px; height: 360px; top: 80px; right: 80px; border-radius: 20px; } #sub .sub_visual.on .img img{ width: 100%; min-height: auto; min-width: 100%; } #sub .sub_visual.on .img:after{ opacity: 0; } #sub .sub_visual.on > .inner > .tit{ padding-top: 0; } #sub .sub_visual.on .of_txt > .inner .tit { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } #sub .board_visual{ height: 420px !important; background: url('/img/sub/board_visual.jpg') center top no-repeat; background-size: cover; } #sub .board_visual .loc{ justify-content: center; } #sub .board_visual > .inner{ padding-top: 0 !important; position: static; top: 0 !important; transform: translate(0,0); transition: 0 !important;} #sub .sub_con .sub_visual02 { padding-top: 5px; margin-bottom: 160px; } #sub .sub_con .sub_visual02 .inner .wrap{ display: flex; justify-content: space-between; border-top: 1px solid #333; padding-top: 80px; position: relative; } #sub .sub_con .sub_visual02 .inner .wrap:after{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; left: 0; top: 0; transform: translate(0,-50%); background-color: #fff; } #sub .sub_con .sub_visual02 .inner .wrap:before{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; right: 0; top: 0; transform: translate(0,-50%); background-color: #fff; } #sub .sub_con .sub_visual02 .left{ display: flex; gap: 80px; } #sub .sub_con .sub_visual02 .txt { display: flex; flex-flow: column; align-items: flex-start; gap: 6px; } #sub .sub_con .sub_visual02 .txt strong{ display: block; font-size: 24px; font-weight: 700; color:#333333; } #sub .sub_con .sub_visual02 .txt strong b{ color: #189FB0; } #sub .sub_con .sub_visual02 .txt p{ font-size: 20px; color:#333333; line-height: 1.5em; } #sub .sub_con .sub_visual02 .txt ul{ display: flex; flex-flow: column; gap: 20px; } #sub .sub_con .sub_visual02 .txt ul li{ padding-left: 14px; position: relative; font-size: 20px; line-height: 34px; color:#333333; } #sub .sub_con .sub_visual02 .txt ul li:after{ content:""; display: block; width: 6px; height: 6px;border-radius: 50%; background-color: #2DBBCD; position: absolute; left: 0; top: 14px; } #sub .sub_con .sub_visual02 .right{ display: flex; gap: 10px; } #sub .sub_con .sub_visual02 .right > div > a{ display: flex; align-items: center; justify-content: space-between; width: 320px; height: 60px; padding: 0 30px; transition: color .4s, background .4s; position: relative; font-family: 'Outfit', sans-serif; } #sub .sub_con .sub_visual02 .right > div > a svg path{ transition: stroke .4s; } #sub .sub_con .sub_visual02 .right > div > a:hover{ color: #fff; } #sub .sub_con .sub_visual02 .right > div > a:hover svg path{ stroke: #fff; } #sub .sub_con .sub_visual02 .right > div > a:after{ content:""; display: block; width: calc(100% - 20px); height: calc(100% - 20px); position: absolute; left: 50%; top: 50%; border-radius: 10px; background: #33C3D5; background: linear-gradient(325deg,rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); z-index: -2; transform: translate(-50%,-50%); opacity: 0; transition: width .4s, height .4s, opacity .4s; } #sub .sub_con .sub_visual02 .right > div > a:before{ content:""; display: block; width: calc(100%); height: calc(100%); position: absolute; left: 50%; top: 50%; border-radius: 10px; border: 1px solid #333333; z-index: -1; box-sizing: border-box; transform: translate(-50%,-50%); opacity: 1; transition: width .4s, height .4s, opacity .4s; } #sub .sub_con .sub_visual02 .right > div > a:hover:before{ opacity: 0;; width: calc(100% + 20px); height: calc(100% + 20px); } #sub .sub_con .sub_visual02 .right > div > a:hover:after{ opacity: 1; width: calc(100%); height: calc(100%); } #sub .sub_con .sub_visual02{ overflow: hidden; } #sub .sub_con .sub_visual02 .inner{ transform: translateY(105%); transition: transform 1.5s;} #sub .sub_con .sub_visual02.on .inner{ transform: translateY(0); } #sub .sub_tab{ margin: 0 auto; width: calc(100% - 160px); border-radius: 10px; background-color: #F4F9F9; height: 90px; display: flex; justify-content: center; align-items: center; z-index: 1000; } #sub .sub_tab.sticky{ width: 100% !important; height: 70px !important; max-width: 100% !important; } #sub .sub_tab .wrap{ position: relative; height: 100%; } #sub .sub_tab.sticky{ position: sticky; top: 100px; } #sub .sub_tab ul{ display:flex; justify-content: center; align-items: center; gap: 64px; position: relative; height: 100%; } #sub .sub_tab .underline{ display: block; width: 100px; height: 3px; border-radius: 50px; background-color: #189FB0; position: absolute; left: 0; bottom: 0; } #sub .sub_tab ul li{ position: relative; } #sub .sub_tab ul li a{ font-size: 19px; color: #333333; font-weight: 700; } #sub .sub_tab ul li:before{ width: 24px; height: 4px;content:""; display: block; position: absolute; left: -20px; top: 50%; transform: translate(-100%,-50%); background: url('/img/sub/loc_dot.png') center center no-repeat; opacity: .2 ; } #sub .sub_tab ul li:first-child:before{ display: none; } #sub .sub_tab ul li.on a{ color: #189FB0; } #sub .sub_tab ul li.on:before{opacity: 1; } #sub .sc_tit strong{ display: block; font-size: 100px; font-weight: 500; color:#333333; letter-spacing: -0.025em; line-height: 1em; } #sub .sc_tit2 { text-align: center; margin-bottom: 40px; } #sub .sc_tit2 strong{ display: inline-block; position: relative; font-size: 30px; font-weight: 500; color:#333333; } #sub .sc_tit2 strong:after{ content:""; display: block; width: 25px; height: 25px; background: url('/img/sub/sc_title_dot01.png') center center no-repeat; position: absolute; left: -25px; bottom: -15px; } #sub .sc_tit2 strong:before{ content:""; display: block; width: 25px; height: 25px; background: url('/img/sub/sc_title_dot02.png') center center no-repeat; position: absolute; right: -25px; bottom: -15px; } #sub .sc_tit strong{ overflow: hidden; } #sub .sc_tit strong > div{ font-family: inherit; } #sub .sc_tit3{ display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; border-bottom: 1px solid #333333; margin-bottom: 20px; } #sub .sc_tit3 strong{ font-size: 30px; font-weight: 700; color:#333333; } #sub .sc_tit3 p{ font-size: 16px; color:#999999; } #sub .con_w{ padding-top: 150px; padding-bottom: 180px; } #sub .sc_tit4{ margin-bottom: 60px; } #sub .sc_tit4 strong{ display: block; font-size: 50px; font-weight: 500; color:#333333; letter-spacing: -0.025em; line-height: 1em; text-align: center; } /* 솔루션 */ #sub.solution .con01{ position: relative; } #sub.solution .con_box{ margin-top: 80px; padding-bottom: 20px; } #sub.solution .con_box .inner .img{ flex-shrink: 0; min-height: 1px;} #sub.solution .con_box .inner .img img{ border-radius: 20px; display: block; width: 100%; } #sub.solution .con_box .inner{ display:flex; gap: 80px; align-items: flex-start; } #sub.solution .con_box .inner > div{ width: 50%; } #sub.solution .con_box .scroll_t > div{ padding: 120px 0; border-bottom: 1px solid #333333; position: relative; } #sub.solution .con_box .scroll_t > div:last-child{ padding-bottom: 200px !important; } #sub.solution .con_box .scroll_t > div:after{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); background-color: #fff; } #sub.solution .con_box .scroll_t > div:before{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); background-color: #fff; } #sub.solution .con_box .scroll_t > div:last-child{ border-bottom: none; } #sub.solution .con_box .scroll_t > div:last-child:after{ display: none; } #sub.solution .con_box .scroll_t > div:last-child:before{ display: none; } #sub.solution .con_box .scroll_t .s_tit{ display: flex; justify-content: space-between; align-items: center; } #sub.solution .con_box .scroll_t .s_tit .right img{ mix-blend-mode: darken; } #sub.solution .con_box .scroll_t .s_tit .left em{ display: block; font-size: 20px; font-weight: 700; color:#333333; margin-bottom: 20px; } #sub.solution .con_box .scroll_t .s_tit .left strong{ font-size: 40px; line-height: 1.5em; color:#333333; } #sub.solution .con_box .scroll_t .s_txt p{ font-size: 20px; line-height: 2em; color:#333333; word-break: keep-all; } #sub.solution .con_box .scroll_t .s_txt em{ font-size: 16px; color:#999999; line-height: 1.5em; } #sub.solution .con_box .scroll_t .s_txt{ display: flex; flex-flow: column; gap: 50px; margin-top: 50px; } #sub.solution .con_box .scroll_t .s_img{ display: flex; flex-flow: column; gap: 20px; margin-top: 50px; } #sub.solution .con_box .scroll_t .s_img img{ display: block; width: 100%; border-radius: 20px; } #sub.solution .con_box .scroll_t .s_img p{ text-align: center; font-size: 20px; font-weight: 600; color:#333333; } #sub.solution .contact { height: 437px; width: 100%; background-color: #F4F9F9; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 80px; position: relative; } #sub.solution .contact:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); background: url('/img/sub/contact_bg.png') center center no-repeat; } #sub.solution .contact .wrap{display: flex; flex-flow: column; align-items: center; gap: 30px; position: relative; z-index: 1; } #sub.solution .contact .wrap > strong{ text-align: center; font-size: 40px; line-height: 1.5em; color:#333333; font-weight: 700; } #sub.solution .contact .wrap > strong b{ color:#189FB0; } #sub.solution .sub_con{ margin-top: -270px; } #sub.sectors .con_box .scroll_t > div{ border-bottom: none; } #sub.sectors .con_box .scroll_t > div:after{ display: none; } #sub.sectors .con_box .scroll_t > div:before{ display: none; } #sub.sectors .contact{ margin-top: 0; } #sub.sectors .con02{ background: url('/img/sub/sectors_bg01.jpg') center center no-repeat; background-size: cover; padding: 160px 0; } #sub.sectors .con02 .inner{ display: flex; gap: 80px; } #sub.sectors .con02 .inner > div{ width: 50%; } #sub.sectors .con02 .txt{ display: flex; flex-flow: column; gap: 50px; } #sub.sectors .con02 .txt p{ font-size: 20px; line-height: 2em; color:#333333; word-break: keep-all; } #sub.sectors .con02 .txt p b{ color: #189FB0; font-weight: 600; } #sub.sectors .con02 .title{ display: flex; align-items: flex-start; flex-flow: column; gap: 10px; } #sub.sectors .con02 .title em{ font-size: 20px; color:#189FB0; font-weight: 700; } #sub.sectors .con02 .title strong{ font-size: 100px; font-weight: 500; color:#333333; letter-spacing: -0.025em; position: relative; } #sub.sectors .con02 .title strong:after{ content:""; display: block; width: 25px; height: 25px; background: url('/img/sub/sectors_edge.png') center center no-repeat; position: absolute; right: -40px; bottom: 0; } #sub.sectors .sub_wrap .sub_tab ul{ gap: 30px; } #sub.sectors .sub_wrap .sub_tab ul li{ gap: 30px; display: flex; align-items: center; padding-left: 30px; } #sub.sectors .sub_wrap .sub_tab ul li:last-child{ padding-left: 0; } #sub.sectors .sub_wrap .sub_tab ul li:after{ width: 1px; height: 14px; background-color: #BFCFCF; content:""; display: block; } #sub .sub_tab ul li:before{ display: none; } #sub.sectors .sub_wrap .sub_tab ul li:last-child:after{ display: none; } #sub.se02 .con_box .scroll_t > div{ border-bottom: 1px solid #333; } #sub.se02 .con_box .scroll_t > div:after{ display: block; } #sub.se02 .con_box .scroll_t > div:before{ display: block; } #sub.se02 .con_box .scroll_t > div:last-child{ border-bottom: none; } #sub.se02 .con_box .scroll_t > div:last-child:after{ display: none; } #sub.se02 .con_box .scroll_t > div:last-child:before{ display: none; } #sub .c_top{ display: flex; justify-content: space-between; } #sub .c_top > div{ width: 50%; } #sub .c_top .sc_tit p{ margin-top: 35px; font-size: 24px; } #sub .c_top .sc_tit p b{ font-weight: 500; color:#189FB0; } #sub .c_top .sc_tit p em{ font-weight: 500; color:#333333; } #sub .c_top .c_info{ display: flex; flex-flow: column; gap: 10px; } #sub .c_top .c_info dl{ background-color: #F4F9F9; padding: 35px 20px; padding-left: 76px; position: relative; display: flex; flex-flow: column; gap: 6px; border-radius: 20px; } #sub .c_top .c_info dl:after{ content:""; display: block; width: 16px; height: 16px; background: url('/img/sub/global_dot.png') center center no-repeat; position: absolute; left: 30px; top: 50%; transform: translate(0,-50%); } #sub .c_top .c_info dl dt{ font-size: 20px; font-weight: 600; color:#333333; } #sub .c_top .c_info dl dt b{ color: #189FB0; } #sub .c_top .c_info dl dd{ font-size: 18px; font-weight: 400; color:#333333; line-height: 1.5em; } /* 글로벌 */ #sub.global .con03{ background: url('/img/sub/global_bg02.png') center top 12% no-repeat; background-size: 100% auto; background-color: #F4F9F9; padding-bottom: 0; } #sub.global .con03 .graphic img{ display: block; max-width: 100%; margin: 0 auto; } #sub.global .con03 .box2{ margin-bottom: 140px; } #sub.global .con04{ background: url('/img/sub/global_bg.jpg') center top no-repeat; padding: 180px 0; } #sub.global .con04 .table_w{ margin-top: 100px; display: flex; } #sub.global .con04 .table_w > div{ width: 100%; } #sub.global .con04 .table_w .t_tit{ margin-bottom: 80px; border-bottom: 1px solid #DDDDDD; text-align: center; position: relative; width: 100%; } #sub.global .con04 .table_w .t_tit ul{ display: flex; } #sub.global .con04 .table_w .t_tit ul li{ width: 50%; position: relative; padding-bottom: 24px; } #sub.global .con04 .table_w .t_tit strong{ font-size: 30px; font-weight: 600; color:#333333; } #sub.global .con04 .table_w .t_table02 .t_table th:nth-child(odd){ width: 150px; } #sub.global .con04 .table_w .t_table02{ display: none; } #sub.global .con04 .table_w .t_tit ul li.on:after{ content:""; display: block; width: 100%; height: 3px; background-color: #189FB0; position: absolute; left: 0; bottom: -2px; } #sub.global .con04 .table_w .t_tit ul li.on strong{ color:#189FB0; } #sub.global .con04 .table_w .t_wrap > div{ display:flex; gap: 80px; } #sub.global .con04 .table_w .t_table{ width: 50%; } #sub.global .con04 .table_w > div:nth-child(2) { display: flex; align-items: flex-end; flex-flow: column; } #sub.global .con04 .table_w > div .t_table table{ width: 100%; } #sub.global .con04 .table_w > div .t_table table th{ height: 50px; vertical-align: middle; text-align: center; font-size: 18px; font-weight: 600; background-color: #F4F9F9; color:#333333; } #sub.global .con04 .table_w > div .t_table table th:nth-child(1){ border-radius: 6px 0 0 6px; } #sub.global .con04 .table_w > div .t_table table th:last-child{ border-radius: 0 6px 6px 0; width: 45%; } #sub.global .con04 .table_w > div .t_table table th:nth-child(odd){ width: 100px; } #sub.global .con04 .table_w > div .t_table table td{ border: 1px solid #DDDDDD; padding: 16px 10px; text-align: center; vertical-align: middle; text-align: center; } #sub.global .con04 .table_w > div .t_table table td:nth-child(even){ text-align: left; padding-left: 20px; } #sub.global .con05{ background-color: #F4F9F9; ; } #sub.global .con05 .sc_svg{ margin-top: -220px; } #sub.global .con05 .sc_svg .pc_svg{ display: block; } #sub.global .con05 .sc_svg .mo_svg{ display: none; } #sub.global .con05 .sc_svg svg #COMPASS-2{ animation: compass 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes compass{ 0%{ transform: translate(-1476px, -6955px) rotate(0); } 50%{ transform: translate(-1476px, -6955px) rotate(20deg); } 100%{ transform: translate(-1476px, -6955px) rotate(0); } } #sub.global .con06{ background: url('/img/sub/global_bg03.png') center top no-repeat; } #sub.global .con06 .sc_tit strong{ text-align: center; } #sub.global .con06 .list{ display: flex; gap: 80px; margin-top: 120px; } #sub.global .con06 .list dl{ display: flex; flex-flow: wrap; gap: 10px; } #sub.global .con06 .list .head{ width: 19%; } #sub.global .con06 .list .head dl dd{ width: 100%; } #sub.global .con06 .list dl dt{ width: 100%; border-bottom: 1px solid #333333; padding-bottom: 15px; font-size: 24px; font-weight: 500; color:#333333; } #sub.global .con06 .list .regional{ width: 81%; } #sub.global .con06 .list .regional dl dd{ width: calc(25% - 7.5px); } #sub.global .con06 .list dl dd{ border-radius: 10px; background-color: #F4F9F9; display: flex; align-items: center; padding: 0 30px; height: 120px; gap: 20px; } #sub.global .con06 .list dl dd .txt strong{ display: block; font-size: 18px; color:#333333; font-weight: 700; margin-bottom: 6px; } #sub.global .con06 .list dl dd .txt p{ display: block; font-size: 18px; color:#333333; } /* No.1 Global */ #sub.number .con03{ background-color: #F4F9F9; } #sub.number .con03 .box2 .graphic{ position: relative; background: url('/img/sub/number_bg.png') center center no-repeat;} #sub.number .con03 .box2 .graphic:before{ content:""; display: block; width: 1000px; height: 1000px; background: url('/img/sub/number_info_bg.png') center center no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.number .con03 .box2 .graphic img{ display: block; max-width: 100%; margin: 0 auto; } #sub.number .con03 .box2 .graphic .s_li{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 1; } #sub.number .con03 .box2 .graphic .s_li img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 1s; } #sub.number .con03 .box2 .graphic .g_line{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 2; } #sub.number .con03 .box2 .graphic .lines{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 3; clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: 1.5s; transition-delay: 1.2s; } #sub.number .con03.on .box2 .graphic .lines{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } #sub.number .con03 .box2 .graphic .g_txt img{ transform: scale(1.2); opacity: 0; transition: 1s; } #sub.number .con03.on .box2 .graphic .g_txt img{ transform: scale(1); opacity: 1;} #sub.number .con03 .box2 .graphic .s_li img:nth-child(1) { transition-delay: 0.05s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(2) { transition-delay: 0.10s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(3) { transition-delay: 0.15s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(4) { transition-delay: 0.20s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(5) { transition-delay: 0.25s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(6) { transition-delay: 0.30s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(7) { transition-delay: 0.35s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(8) { transition-delay: 0.40s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(9) { transition-delay: 0.45s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(10) { transition-delay: 0.50s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(11) { transition-delay: 0.55s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(12) { transition-delay: 0.60s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(13) { transition-delay: 0.65s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(14) { transition-delay: 0.70s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(15) { transition-delay: 0.75s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(16) { transition-delay: 0.80s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(17) { transition-delay: 0.85s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(18) { transition-delay: 0.90s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(19) { transition-delay: 0.95s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(20) { transition-delay: 1.00s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(21) { transition-delay: 1.05s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(22) { transition-delay: 1.10s; } #sub.number .con03 .box2 .graphic .s_li img:nth-child(23) { transition-delay: 1.15s; } #sub.number .con03.on .box2 .graphic .s_li img{ opacity: 1; } #sub.number .con03 .line{ margin-top: 173px; } #sub.number .con03 .line img{ width: calc(100% - 565px); display: block; margin: 0 auto; } #sub.number .con03 .list{ display: flex; gap: 20px; margin-top: -10px; } #sub.number .con03 .list > div{ width: 50%; display :flex; flex-flow: wrap; gap: 20px; } #sub.number .con03 .list > div > dl{ width: calc(50% - 10px); } #sub.number .con03 .list > div > p{ width: 100%; } #sub.number .con03 .list dl{ display: flex; flex-flow: column; gap: 35px; padding: 20px; background-color: #FFFFFF; border-radius: 20px; box-shadow: 0 0 20px rgba(0,126,126,0.1); width: 25%; } #sub.number .con03 .list > div{ transform: translateY(50px); opacity: 0; transition: 1s; } #sub.number .con03.on .list > div { transform: translateY(0); opacity: 1; } #sub.number .con03 .list > div:nth-child(1){ transition-delay: 2s; } #sub.number .con03 .list > div:nth-child(2){ transition-delay: 2.2s; } #sub.number .con03 .list dl dt{ display: flex; gap: 20px; align-items: center; } #sub.number .con03 .list dl dt strong{ font-size: 20px; line-height: 25px; letter-spacing: -0.025em; color:#333333; font-weight: 500; } #sub.number .con03 .list dl dd{ text-align: right; padding-right: 20px; font-size: 60px; font-weight: 600; color:#333333; } #sub.number .con03 .info_p{ text-align: center; margin-top: 30px; font-size: 18px; letter-spacing: -0.025em; color:#333333; } #sub.number .con04{ background: url('/img/sub/number_bg02.png') center center no-repeat; } #sub.number .con04 .c_top{ margin-bottom: 80px; } #sub.number .con04 .list .box{ display: flex; gap: 20px; } #sub.number .con04 .list .box > div{ width: 20%; aspect-ratio: 1; position: relative; border-radius: 10px; background-color: #F4F9F9; display: flex; align-items: center; justify-content: center; text-align: center; transition: background .3s; } #sub.number .con04 .list .box .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #sub.number .con04 .list .box .bg > div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: opacity .4s, transform .4s; } #sub.number .con04 .list .box .bg > div > img{ display: block; width: 100%; } #sub.number .con04 .list .box > div > em{ font-size: 20px; font-weight: 600; color:#2DBBCD; letter-spacing: -0.025em; position: absolute; left: 30px; top: 20px; transition: color .4s; } #sub.number .con04 .list .box > div > strong{ position: relative; z-index: 1; font-size: 20px; line-height: 1.5em; color:#333333; transition: color .4s; } #sub.number .con04 .list .box > div:hover{ background-color: #2DBBCD; } #sub.number .con04 .list .box > div:hover .bg > div{ opacity: 0; } #sub.number .con04 .list .box > div:hover .bg > div:nth-child(1){ transform: translateX(-20px); } #sub.number .con04 .list .box > div:hover .bg > div:nth-child(2){ transform: translateX(20px); } #sub.number .con04 .list .box > div:hover > em{ color: #fff; } #sub.number .con04 .list .box > div:hover > strong{ color: #fff; } #sub.solution .con_box .inner .img strong{ display: block; margin-bottom: 30px; font-size: 100px; font-weight: 500; color:#333333; letter-spacing: -0.025em; overflow: hidden; } #sub.solution .con_box .inner .img strong div{ font-family: 'Outfit', sans-serif; } #sub.solution .con_box .scroll_t .s_txt ul{ display: flex; flex-flow: column; gap: 20px; } #sub.solution .con_box .scroll_t .s_txt ul li{ padding-left: 14px; position: relative; font-size: 20px; line-height: 34px; color:#333333; word-break: keep-all; } #sub.solution .con_box .scroll_t .s_txt ul li:after{ content:""; display: block; width: 6px; height: 6px;border-radius: 50%; background-color: #2DBBCD; position: absolute; left: 0; top: 14px; } #sub.solution .con_box .scroll_t .s_step{ display: flex; flex-flow: column; gap: 20px; margin-top: 50px; } #sub.solution .con_box .scroll_t .s_step .wrap{ display: flex; gap: 20px; } #sub.solution .con_box .scroll_t .s_step .wrap:last-child{ flex-flow: row-reverse; } #sub.solution .con_box .scroll_t .s_step .wrap > dl{ width: calc(25% - 15px); aspect-ratio: 1; display: flex; flex-flow: column; justify-content: space-between; padding: 20px; border-radius: 10px; border: 2px solid #189FB0; position: relative; } #sub.solution .con_box .scroll_t .s_step .wrap > dl > dt{ font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; color: #189FB0; } #sub.solution .con_box .scroll_t .s_step .wrap > dl > dd{ text-align: right; font-size: 20px; line-height: 1.5em; color:#333333; font-weight: 700; } #sub.solution .con_box .scroll_t .s_step .wrap > dl:after{ content:""; display: block; width: 30px; height: 30px; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); background: url('/img/sub/step_arrow.png') center center no-repeat;} #sub.solution .con_box .scroll_t .s_step .wrap > .dl04:after{ left: 50%; bottom: 0; transform: translate(-50%,50%) rotate(90deg); top: auto; } #sub.solution .con_box .scroll_t .s_step .wrap > .dl05:after{ right: auto; left: 0; top: 50%; transform: translate(-50%,-50%) rotate(180deg); } #sub.solution .con_box .scroll_t .s_step .wrap > .dl06:after{ right: auto; left: 0; top: 50%; transform: translate(-50%,-50%) rotate(180deg); } #sub.solution .con_box .scroll_t .s_step .wrap > .dl07:after{ display: none; } #sub.solution .con_box .scroll_t > div .button_w{ margin-top: 120px; position: relative; } #sub.solution .con_box .scroll_t > div .button_w a{ margin: 0; } #sub.solution .con_box .scroll_t > div .button_w .s_logo{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%); } /* 게시판 공통 */ #sub.board .inner{ padding: 0 160px; margin: 0 auto; } #sub.board .sub_con{ padding-top: 120px; } #sub.board .board_tab{ height: 80px; display: flex; justify-content: center; gap: 40px; } #sub.board .board_tab > div{ display: flex; align-items: center; gap: 20px; } #sub.board .board_tab > div:last-child{ flex-flow: row-reverse; } #sub.board .board_tab > div > strong{ font-size: 22px; font-weight: 700; color:#A3BCBC; } #sub.board .board_tab ul{ display: flex; gap: 10px; padding: 15px; border-radius: 20px; background-color: #F4F9F9; } #sub.board .board_tab ul li a{ height: 50px; display: flex; align-items: center; padding: 0 30px; border-radius: 10px; font-size: 20px; font-weight: 700; color:#333333; } #sub.board .board_tab ul li.on a{ background: #33C3D5; background: linear-gradient(325deg, rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); color: #fff; } #sub.board .search{ display: flex; justify-content: center; height: 60px; margin-bottom: 80px; } #sub.board .search .wrap{ position: relative; display: flex; justify-content: center; gap: 30px; } #sub.board .search select{ width: 200px; height: 100%; padding: 0 20px; border: none; border-bottom: 1px solid #000000; font-size: 18px; font-weight: 500; color:#333333; -webkit-appearance: none; /* 크롬 화살표 없애기 */ -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ appearance: none; /* 화살표 없애기 */ background: url('/img/sub/select_arrow.png') right 20px center no-repeat; } #sub.board .search input{ width: 470px; height: 100%; border: none; border-bottom: 1px solid #000; padding: 0 20px; font-size: 18px; color: #333333; font-weight: 500; } #sub.board .search .search_i{ position: absolute; right: 0; top: 0; } #sub.board .g_list ul{ display: flex; flex-flow: wrap; gap: 120px 80px; } #sub.board .g_list ul li{ width: calc(33.333333333333% - 53.333333333px); } #sub.board .g_list ul li a{ display: flex; flex-flow: column; gap: 30px; } #sub.board .g_list ul li .img{ position: relative; overflow: hidden; border-radius: 20px; } #sub.board .g_list ul li .img > img{ display: block; width: 100%; } #sub.board .g_list ul li .img .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #33C3D5; background: linear-gradient(180deg, rgba(51, 195, 213, 0.75) 0%, rgba(0, 127, 143, 0.75) 100%); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s; } #sub.board .g_list ul li .img .hover img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.board .g_list ul li .txt{ display: flex ;flex-flow: column; gap: 20px; } #sub.board .g_list ul li .txt strong{ font-size: 22px; font-weight: 700; color:#333333; line-height: 1.5em; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #sub.board .g_list ul li .txt p{ font-size: 18px; line-height: 1.5em; color:#666666; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #sub.board .g_list ul li .txt em{ font-size: 16px; color:#BBBBBB; display: flex; align-items: center; gap: 8px; } #sub.board .g_list ul li a:hover .img .hover{ opacity: 1; } #sub.board .g_list2 ul{ flex-flow: column !important; gap: 10px !important; } #sub.board .g_list2 ul li{ width: 100% !important; } #sub.board .g_list2 ul li a{ border-radius: 10px; background-color: #F4F9F9; padding: 40px 60px; } #sub.board .g_list2 ul li .txt strong{ -webkit-line-clamp: 1; transition: color .4s; } #sub.board .g_list2 ul li .txt em{ transition: color .4s; } #sub.board .g_list2 ul li a{ position: relative; } #sub.board .g_list2 ul li a:after{ content:""; display: block; width: 100%; height: 100%; background: #33C3D5; background: linear-gradient(335deg, rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); position: absolute; left: 0; top: 0; border-radius: 10px; opacity: 0; transition: opacity .4s; } #sub.board .g_list2 ul li .txt{ position: relative; z-index: 1; } #sub.board .g_list2 ul li a:hover:after{ opacity: 1; } #sub.board .g_list2 ul li a:hover .txt strong{ color: #fff; } #sub.board .g_list2 ul li a:hover .txt em{ color: #fff; color:#A0DDE5; } #sub.board .g_list2 ul li a:hover .txt svg path{ stroke: #fff; } #sub.board .g_list2 ul li a .txt svg path{ transition: stroke .4s; } #sub.board .page{ display: flex; justify-content: center; margin-top: 120px; } #sub.board .page ul{ display:flex; gap: 10px; } #sub.board .page ul li a{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color:#333333; position: relative; } #sub.board .page ul .first a{ background: url('/img/sub/first.png') center center no-repeat; } #sub.board .page ul .last a{ background: url('/img/sub/last.png') center center no-repeat; } #sub.board .page ul .prev a{ background: url('/img/sub/prev.png') center center no-repeat; } #sub.board .page ul .next a{ background: url('/img/sub/next.png') center center no-repeat; } #sub.board .page ul li.on a{ color:#189FB0; } #sub.board .page ul li.on a:after{ content:""; display: block; width: 20px; height: 3px; background-color: #189FB0; border-radius: 50px; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); } #sub.board .j_list ul{ display: flex; flex-flow: column; gap: 10px; } #sub.board .j_list ul li a{ display: flex; border-radius: 10px; background-color: #F4F9F9; padding: 40px 60px; justify-content: space-between; gap: 60px; position: relative; } #sub.board .j_list ul li a:after{ content:""; display: block; width: 100%; height: 100%; background: #33C3D5; background: linear-gradient(335deg, rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); position: absolute; left: 0; top: 0; border-radius: 10px; opacity: 0; transition: opacity .4s; } #sub.board .j_list ul li .txt{ display: flex; flex-flow: column; gap: 10px; position: relative; z-index: 1; } #sub.board .j_list ul li .txt strong{ font-size: 24px; font-weight: 700; color: #333333; transition: color .4s; } #sub.board .j_list ul li .txt p{ font-size: 16px; font-weight: 400; color: #99ACAC; transition: color .4s; } #sub.board .j_list ul li .right{ display: flex; align-items: center; gap: 40px; position: relative; z-index: 1; } #sub.board .j_list ul li .right > p{ width: 170px; text-align: center; font-size: 18px; font-weight: 500; color:#333333; position: relative; transition: color .4s; } #sub.board .j_list ul li .right > p:after{ content:""; display: block; width: 1px; height: 20px; background-color: #B9CCCC; position: absolute; right: -20px; top: 50%; transform: translate(0,-50%); transition: background .4s; } #sub.board .j_list ul li .right > span{ display: flex; width: 150px; height: 50px; border-radius: 10px; color: #fff; font-size: 18px; font-weight: 500; align-items: center; justify-content: center; text-align: center; transition: color .4s, background .4s; } #sub.board .j_list ul li .right > .cate01{ background-color: #94AFAF; } #sub.board .j_list ul li .right > .cate02{ background-color: #2DBBCD; } #sub.board .j_list ul li a:hover:after{ opacity: 1; } #sub.board .j_list ul li a:hover .txt strong{ color: #fff; } #sub.board .j_list ul li a:hover .txt p{ color: #A0DDE5; } #sub.board .j_list ul li a:hover .right > p{ color: #fff; } #sub.board .j_list ul li a:hover .right > .cate01{ background-color: #16A1B2; } #sub.board .j_list ul li a:hover .right > .cate02{ background-color: #fff; color: #189FB0; } #sub.board .j_list ul li a:hover .right > p:after{ background-color: #7ECBCB; } #sub.job .search{ gap: 30px; } #sub.job .search .wrap{ width: 100%; padding: 0 160px; } #sub.job .search .input_w{ position: relative; width: 27%; } #sub.job .search .input_w input{ width: 100%; } #sub.job .search select{ width: 20%; } #sub.job .search .reset{ width: 13%; height: 100%; display:flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 600; color:#333333; border-radius: 10px; border: 1px solid #333333; transition: background .4s, border .4s, color .4s; } #sub.job .search .reset svg{ display: block; } #sub.job .search .reset svg path{ transition: stroke .4s; } #sub.job .search .reset:hover{ color: #fff; border-color: #2DBBCD; background-color: #2DBBCD; } #sub.job .search .reset:hover svg path{ stroke: #fff; } #sub.board .f_list ul{ display: flex; flex-flow: column; gap: 10px; } #sub.board .f_list ul li{ border-radius: 10px; background-color: #F4F9F9; cursor: pointer; border: 3px solid #f4f9f9; transition: background .3s, border .3s; } #sub.board .f_list ul li > div{ display: flex; gap: 30px; padding: 0 60px; } #sub.board .f_list ul li > div i{ font-size: 40px; font-weight: 600; color:#333333; letter-spacing: -0.025em; } #sub.board .f_list ul li .faq_q{ align-items: center; height: 120px; } #sub.board .f_list ul li .faq_a{ padding-bottom: 50px; display: none; } #sub.board .f_list ul li .faq_a i{ color:#189FB0; } #sub.board .f_list ul li > div .txt strong{ font-size: 24px; font-weight: 700; color:#333333; line-height: 1.5em; } #sub.board .f_list ul li > div .txt *{ font-family: inherit !important} /*#sub.board .f_list ul li > div .txt p{ font-size: 20px; line-height: 1.5em; color:#333333; } */ #sub.board .f_list ul li.on .faq_a{ display: flex; } #sub.board .f_list ul li.on{ border-color: #189FB0; background-color: #fff; } #sub.board .search{ margin-bottom: 40px; } #sub.faq .sub_con{ padding-top: 0; } #sub .f_info{ display: flex; flex-flow: column; align-items: center; gap: 20px; margin-bottom: 120px; } #sub .f_info strong{ font-size: 24px; line-height: 1.5em; color:#333333; font-weight: 700; text-align: center; } #sub .f_info strong b{ color:#189FB0; } #sub .f_info span{ display: flex; align-items: center; height: 58px; border-radius: 10px; background-color: #F4F9F9; padding: 0 50px; font-size: 20px; font-weight: 700; color:#189FB0; } #sub.contact .sub_con{ padding-top: 0; } #sub.contact .p_chk{ display: flex; justify-content: center; margin-top: 30px; } #sub.contact .p_chk .wrap{ position: relative; display: flex; align-items: center; gap: 8px; position: relative; font-size: 18px; color:#333; font-weight: 700; height: 22px; } #sub.contact .p_chk .wrap input{ width: 22px; height: 22px; position: relative; z-index: 1; background-color: #fff; border :none; } #sub.contact .p_chk .wrap input:after{ content:""; display: block; width: 24px; height: 24px; background: url('/img/sub/chk.jpg') center center no-repeat; position: absolute; left: -1px; top: 50%; transform: translate(0,-50%); border-radius: 4px; } #sub.contact .p_chk .wrap input:checked:after{ background: url('/img/sub/chk2.jpg') center center no-repeat; } #sub.contact .f_box{ border-radius: 20px; background-color: #fff; box-shadow: 0 0 60px rgba(0,125,125,0.1); padding: 80px; display: flex; flex-flow: column; gap: 80px; } #sub.contact .f_box > div{ padding-bottom: 80px; border-bottom: 1px solid #DDDDDD; position: relative; } #sub.contact .f_box > div:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #ddd; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); } #sub.contact .f_box > div:before{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #ddd; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); } #sub.contact .f_box .f_wrap { display: flex; flex-flow: wrap; gap: 80px; } #sub.contact .f_box .f_wrap > div{ width: calc(33.33333333% - 53.33333333px); } #sub.contact .f_box .f_wrap .f_label{ display: block; font-size: 18px; font-weight: 700; color:#333333; padding-left: 10px; margin-bottom: 8px; } #sub.contact .f_box .f_wrap .f_label span{ color:#2DBBCD; } #sub.contact .f_box .input_f{ height: 70px; width: 100%; padding-left: 30px; background-color: #F4F9F9;font-size: 17px; font-weight: 300; color:#333; border: none; border-radius: 10px; } #sub.contact .f_box .f_wrap2{ flex-flow: column; gap: 40px; } #sub.contact .f_box .f_radio .f_tit{ display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } #sub.contact .f_box .f_radio{ width: 100% !important; } #sub.contact .f_box .f_radio .f_tit .f_label{ margin-bottom: 0; } #sub.contact .f_box .f_radio .f_tit p{ font-size: 16px; color:#999999; } #sub.contact .f_box .f_radio > ul{ display: flex; gap: 10px; width: 100%; } #sub.contact .f_box .f_radio > ul > li{ width: calc(14.28571428571429% - 8.571428571428571px); position: relative; } #sub.contact .f_box .f_radio > ul > li input[type="checkbox"]{ display: none; } #sub.contact .f_box .f_radio > ul > li label{ width: 100%; height: 70px; border-radius: 10px; border: 1px solid #333333; display: flex; align-items: center; justify-content: center; cursor: pointer; } #sub.contact .f_box .f_radio > ul > li input[type="checkbox"]:checked + label{ background: #33C3D5; background: linear-gradient(270deg, rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); color: #fff; border: none; } #sub.contact .f_box .f_radio > .etc{ margin-top: 10px; } #sub.contact .f_box .f_radio > .etc > li:last-child{ width: 426px; } #sub.contact .f_box .f_wrap3 > div { width: 100% !important; } #sub.contact .f_box textarea{ height: 210px; border-radius: 10px; background-color: #F4F9F9; padding: 30px;border: none; font-size: 17px; line-height: 1.5em; font-weight: 300; color:#333; } #sub.contact .f_box .per{ width: 100% !important; } #sub.contact .f_box .per .per_w{ border-radius: 10px; padding: 40px; background-color: #F4F9F9; height: 350px; overflow-y: scroll; } #sub.contact .f_box .per .per_w p{ white-space: pre-wrap; font-size: 18px; line-height: 1.5em; color:#869A9A; } #sub.contact .f_box > .f_wrap:last-child{ border-bottom: none; padding-bottom: 0; } #sub.contact .f_box > .f_wrap:last-child:after{ display: none; } #sub.contact .f_box > .f_wrap:last-child:before{ display: none; } #sub.contact .button_w{ display: flex; justify-content: center; width: 100% !important; margin-top: 40px; } #sub.view .button_w{ margin-top: 60px; display: flex; justify-content: center !important; gap: 12px; } #sub.view .button_w a{ margin: 0; } #sub.view .button_w .go_b{ background-color: #2DBBCD; } #sub.view .button_w .go_b strong{ color: #fff; } #sub.view .button_w .go_b:before{ border-color: #2dbbcd; } #sub.view .button_w .go_b .ho i{ border-color: #fff; } #sub.view .button_w .go_b .ho svg path{ stroke: #fff; } /*#sub.view .button_w .go_b:hover .ho i{ border-color: #333; }*/ #sub.view .button_w .go_b:hover .ho svg path{ stroke: #333; } #sub .button_w a{ height: 60px; padding: 0 20px; width: 200px; } #sub.view .sub_con{ padding-top: 0; } #sub.view .sub_con .v_tit{ text-align: center; display: flex; flex-flow: column; gap: 30px; margin-bottom: 60px; } #sub.view .sub_con .v_tit strong{ font-size: 40px; line-height: 1.5em; color: #333333; font-weight: 700; } #sub.view .sub_con .v_tit p{ font-size: 18px; color:#99ACAC } #sub.view .sub_con .v_con{ min-height: 600px; border-radius: 20px; background-color: #F4F9F9; padding: 30px; } #sub.view .sub_con .v_con img{ max-width: 100%; } #sub.view .sub_con .file{ margin-top: 10px; border-radius: 20px; background-color: #F4F9F9; height: 80px; display: flex; align-items: center; padding: 0 40px; gap: 30px; } #sub.view .sub_con .file a{ font-size: 18px; font-weight: 600; color: #333333; transition: color .3s; } #sub.view .sub_con .file a:hover{ color: #189FB0 } #sub.view .v_cate{ display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; } #sub.view .v_cate span{ display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; color:#333333; border-radius: 10px; border: 1px solid #000000; height: 50px; padding: 0 30px; } #sub.view .v_cate .cate{ padding: 0 50px; font-weight: 700; color: #fff; border: none; } #sub.view .v_cate .cate01{ background-color: #94AFAF; } #sub.view .v_cate .cate02{ background-color: #2DBBCD; } #sub.view .v_cate .share{ width: 50px; height: 50px; border-radius: 10px; border: 2px solid #2DBBCD; display: flex; align-items: center; justify-content: center; } #sub.networks{ margin-top: 0; } #sub.networks .con01{ background: url('/img/sub/networks_bg01.png') center top no-repeat; } #sub.networks .con01 .inner2{ display: flex; flex-flow: column; gap: 30px; } #sub.networks .con01 .line{ width: 50%; height: 1px; background-color: #333333; position: relative; } #sub.networks .con01 .line:after{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); background-color: #fff; } #sub.networks .con01 .line:before{ content:""; display: block ;width: 6px; height: 6px; border-radius: 50%; border: 2px solid #333333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); background-color: #fff; } #sub.networks .con01 .sc_tit{ padding-left: 18%; } #sub.networks .con01 .sc_tit > div > strong{ overflow: hidden; } #sub.networks .con01 .sc_tit > div > strong > div{ font-family: inherit; } #sub.networks .con01 .txt{ display: flex; flex-flow: column; gap: 20px; padding-left: 50%; } #sub.networks .con01 .txt strong{ font-size: 24px; letter-spacing: -0.025em; font-weight: 600; color: #333; } #sub.networks .con01 .txt p{ font-size: 20px; font-weight: 400; color:#333333; line-height: 1.7em; } #sub.networks .con02{ padding: 40px; height: 880px; width: 100%; } #sub.networks .con02 .wrap{ height: 100%; width: 100%; border-radius: 30px; overflow: hidden; background: url('/img/sub/networks_grid.png') center center no-repeat; background-color: #065660; position: relative; } #sub.networks .con02 .wrap:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #065660; background: radial-gradient(circle, rgba(6, 86, 96, 0) 0%, rgba(6, 86, 96, 0) 50%, rgba(6, 86, 96, 1) 100%); z-index: 10; } #sub.networks .con02 .wrap .cir > div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #sub.networks .con02 .wrap .cir > div:nth-child(1){ animation: cirs01 50s linear infinite; } #sub.networks .con02 .wrap .cir > div:nth-child(2){ animation: cirs02 50s linear infinite; } @keyframes cirs01{ 0%{ transform: translate(-50%,-50%); } 100%{ transform: translate(-50%,-50%) rotate(360deg); } } @keyframes cirs02{ 0%{ transform: translate(-50%,-50%); } 100%{ transform: translate(-50%,-50%) rotate(-360deg); } } #sub.networks .con02 .wrap{ clip-path: inset(10% 30% 10% 30% round 20px); } #sub.networks .con02 .wrap .light{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); mix-blend-mode: overlay; z-index: 5; } #sub.networks .con02 .wrap .txt{ position: absolute; left: 0; top: 50%; text-align: center; width: 100%; transform: translate(0,-50%); z-index: 11; } #sub.networks .con02 .wrap .txt strong{ font-size: 40px; line-height: 1.25em; letter-spacing: -0.025em; color: #fff; font-weight: 500; z-index: } #sub.networks .con02 .logo{ width: 710px; height: 710px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.5); z-index: 12; opacity; } #sub.networks .con02 .logo > div{ position: absolute; cursor: pointer; } #sub.networks .con02 .logo > div > div{ border-radius: 20px; background: #FFFFFF; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); backdrop-filter: blur(10px); width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.1); } #sub.networks .con02 .logo > div > div:after{ content:""; display: block; width: 100%; height: 100%; border-radius: 20px; background: #33C3D5; background: linear-gradient(135deg, rgba(51, 195, 213, 1) 0%, rgba(0, 127, 143, 1) 100%); opacity: 0; position: absolute; left: 0; top: 0; transition: opacity .3s; } #sub.networks .con02 .logo > div > div:hover:after{ opacity: 1; } #sub.networks .con02 .logo > div svg{ position: relative; z-index: 1; } #sub.networks .con02 .logo > div:nth-child(1){ left: 50%; top: 0; transform: translate(-50%,0); } #sub.networks .con02 .logo > div:nth-child(2){ left: 0%; top: 20%; transform: translate(0,0); } #sub.networks .con02 .logo > div:nth-child(3){ right: 0; bottom: 20%; transform: translate(0,0); } #sub.networks .con02 .logo > div:nth-child(4){ left: 0; bottom: 20%; transform: translate(0,0); } #sub.networks .con02 .logo > div:nth-child(5){ left: 50%; bottom: 0; transform: translate(-50%,0); } #sub.networks .con02 .logo > div:nth-child(6){ right: 0; top: 20%; transform: translate(0,0); } #sub.networks .con03 .inner2{ display: flex; justify-content: space-between; gap: 60px; } #sub.networks .con04{ background-color: #F4F9F9; margin-bottom: 100px; } #sub.networks .con04 .inner2{ display: flex; gap: 160px; } #sub.networks .con04 .inner2 > div { width: calc(50% - 80px); } #sub.networks .con04 .inner2 > div strong{ display: block; text-align: center; position: relative; font-size: 60px; font-weight: 500; color: #333333; font-weight: 500; letter-spacing: -0.025em; } #sub.networks .con04 .inner2 > div strong:after{ content:""; display: block ;width: 137px; height: 6px; border-radius: 60px; background-color: #2DBBCD; margin: 0 auto; margin-top: 8px; } #sub.networks .con04 .inner2 > div svg rect{ filter: drop-shadow(0 0 20px rgba(24,159,176,0.1))} #sub.networks .con04 .inner2 > div svg { width: 100%; height: auto; display: block; } #sub.networks .con05{ background: url('/img/sub/networks_bg03.png') center center no-repeat; position: relative; } #sub.networks .con05 .progress{ position: absolute; width: calc(100% - 400px); height: 14px; border-radius: 60px; background-color: #F4F9F9; padding: 5px; left: 50%; bottom: 40px; position: absolute; transform: translate(-50%,0); } #sub.networks .con05 .progress > div{ position: relative; } #sub.networks .con05 .progress > div > span{ width: 300px; height: 100%; background-color: #2DBBCD; border-radius: 10px; display: block; } #sub.networks .con05 .hori_wrap{ height: 100vh; display: flex; align-items: center; width: 6440px; } #sub.networks .con05 .hori_wrap .inner2{ height: 100vh; display: flex; max-width: none; align-items: center; gap: 160px; } #sub.networks .con05 .hori_wrap .sc_tit{ width: 800px; padding-top: 0; height: calc(100% - 270px); } #sub.networks .con05 .hori_wrap .wrap_box{ width: 1000px; display: flex; align-items: center; height: calc(100% - 270px); } #sub.networks .con05 .hori_wrap .wrap_box > div{ width: 50%; } #sub.networks .con05 .hori_wrap .wrap_box .txt{ height: 100%; display: flex; flex-flow: column; justify-content: space-between; padding: 60px; padding-right: 0; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap strong{ display: block; margin-bottom: 10px; font-size: 60px; font-weight: 600; color:#333333; letter-spacing: -0.025em; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap em{ font-size: 22px; font-weight: 600; color:#2DBBCD; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap p{ font-size: 20px; line-height: 34px; color: #333333; margin-top: 50px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .button_w a{ margin: 0; } #sub.networks .con05 .hori_wrap .wrap_box .img{ clip-path: inset(0% 0% 50% 0% round 20px); border-radius: 20px; } #sub.networks .con05 .hori_wrap .wb01 .img{ clip-path: inset(0% 0% 0% 0% round 20px); } #sub.networks .con05 .hori_wrap .wrap_box .img img{ display: block; } #sub.networks .con05 .sc_tit strong{ font-size: 80px; line-height: 90px; } #sub.networks .con06{ background-color: #F4F9F9; margin-top: 180px; } #sub.networks .con06 .list{ display: flex; flex-flow: wrap; gap: 20px; } #sub.networks .con06 .list > div{ width: calc(33.3333333333% - 13.33333333333333px); border-radius: 10px; background-color: #FFFFFF; } #sub.networks .con06 .list > div > .img img{ display: block; width: 100%; } #sub.networks .con06 .list > div > .txt{ padding: 50px; padding-top: 40px; position: relative; } #sub.networks .con06 .list > div > .txt:after{ content:""; display: block; width: calc(100% - 100px); height: 1px; background-color: #DDDDDD; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); } #sub.networks .con06 .list > div > .txt strong{ font-size: 22px; font-weight: 700; color:#333333; display: block; margin-bottom: 10px; } #sub.networks .con06 .list > div > .txt p{ font-size: 18px; color:#333333; } #sub.location .sub_con{ background: #F4F9F9; background: linear-gradient(180deg, rgba(244, 249, 249, 0) 0%, rgba(244, 249, 249, 1) 100%); ;padding-bottom: 150px; overflow: hidden; position: relative; } #sub.location .sub_con .bg_t{ position: absolute; right: 0; bottom: -100px; } #sub.location .sub_con .bg_t strong{ font-size: 300px; letter-spacing: -0.05em; color: #E8F3F3; font-weight: 500; } #sub.location .sub_con .inner3{ display: flex; align-items: center; } #sub.location .sub_con .inner3 > div{ width: 50%; } #sub.location .sub_con .inner3 .txt{ padding-left: 80px; } #sub.location .sub_con .inner3 .txt .tit{ position: relative; padding-bottom: 60px; border-bottom: 1px solid #333333; margin-bottom: 60px; } #sub.location .sub_con .inner3 .txt .tit strong{ font-size: 50px; font-weight: 700; color: #333333; } #sub.location .sub_con .inner3 .txt .tit:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); } #sub.location .sub_con .inner3 .txt .tit:before{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); } #sub.location .sub_con .inner3 .info{ display: flex; flex-flow: wrap; gap: 60px; } #sub.location .sub_con .inner3 .info > dl{ width: calc(50% - 30px); display: flex; flex-flow: column; gap: 8px; } #sub.location .sub_con .inner3 .info > dl > dt{ font-size: 20px; font-weight: 700; color:#333333; } #sub.location .sub_con .inner3 .info > dl > dd{ font-size: 20px; font-weight: 400; color:#333333; } #sub.location2 .sub_con .inner3 .info > dl{ width: 100%; } #sub.location .sub_con .inner3 .map_w{ height: 600px; position: relative; } #sub.location .sub_con .inner3 .map_w:after{ content:""; display: block; width: 35px; height: 35px; background: url('/img/sub/location_dot01.png') center center no-repeat; position: absolute; right: -13px; top: -13px; } #sub.location .sub_con .inner3 .map_w:before{ content:""; display: block; width: 35px; height: 35px; background: url('/img/sub/location_dot02.png') center center no-repeat; position: absolute; right: -13px; bottom: -13px; } #sub.location .sub_con .inner3 .map_w .wrap{ height: 100%; overflow: hidden; width: 100%; border-radius: 20px; box-shadow: 40px 40px 40px rgba(0,70,70,0.05); } #sub.location .sub_con .inner3 .map_w iframe{ height: 100%; width: 100%; } #sub.value{ margin-top: 0; } #sub.value .con01{ background: url('/img/sub/value_bg01.png') center center no-repeat; } #sub.value .con01 .inner2{ display: flex; flex-flow: column; gap: 30px; } #sub.value .con01 .s_tit{ display: flex; flex-flow: column; gap: 12px; padding-left: 70px; } #sub.value .con01 .s_tit strong{ font-size: 50px; color:#333333; font-weight: 700; } #sub.value .con01 .s_tit strong b{ color:#189FB0; } #sub.value .con01 .txt{ display: flex; justify-content: flex-end; } #sub.value .con01 .txt ul{ display: flex; flex-flow: column; gap: 10px; width: calc(50% - 30px); } #sub.value .con01 .txt ul li{ padding: 24px 20px; padding-left: 56px; border-radius: 100px; background-color: #F4F9F9; position: relative; font-size: 20px; line-height: 1.5em; color:#333333; font-weight: 600; } #sub.value .con01 .txt ul li:after{ content:""; display: block; width: 16px; height: 16px; background: url('/img/sub/global_dot.png') center center no-repeat; position: absolute; left: 25px; top: 50%; transform: translate(0,-50%); } #sub.value .con01 .line{ width: 50%; height: 1px; position: relative; background-color: #333; } #sub.value .con01 .line:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); } #sub.value .con01 .line:before{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); } #sub.value .con02{ background-color: #F4F9F9; overflow: hidden; position: relative; height: 100vh; } #sub.value .con02 .inner3{ display: flex; height: 100%; justify-content: center; flex-flow: column; } #sub.value .con02:after{ content:""; display: block; width: 168%; height: auto; aspect-ratio: 1; background: url('/img/sub/value_compass.png') center center no-repeat; background-size: 100% 100%; position: absolute; left: 50%; bottom: 170px; transform: translate(-50%,0); } #sub.value .con02:before{ content:""; display: block; width: 100%; height: 224px; background: #F4F9F9; background: linear-gradient(0deg, rgba(244, 249, 249, 1) 1%, rgba(244, 249, 249, 0) 100%); position: absolute; left: 0; bottom: 0; z-index: 3; } #sub.value .con02 .sc_tit{ text-align: center; position: relative;z-index: 1; } #sub.value .con02 .list{ display:flex; margin-top: 103px; position: relative;z-index: 2; align-items: flex-start; } #sub.value .con02 .list > div{ width: 14.28571428571429%; text-align: center; position: relative; } #sub.value .con02 .list > div:nth-child(2), #sub.value .con02 .list > div:nth-child(6){ margin-top: 108px; } #sub.value .con02 .list > div:nth-child(3), #sub.value .con02 .list > div:nth-child(5){ margin-top: 178px; } #sub.value .con02 .list > div:nth-child(4){ margin-top: 200px; } #sub.value .con02 .list > div svg{ position: absolute; left: 50%; bottom: -30px; transform: translate(-50%,100%); transition: bottom .4s; } #sub.value .con02 .list > div svg path{ transition: stroke .4s; } #sub.value .con02 .list > div svg circle{ transition: stroke .4s; } #sub.value .con02 .list > div{ transition: transform .4s; } #sub.value .con02 .list > div > dl{ display: flex; flex-flow: column; gap: 10px; position: relative; z-index: 1; } #sub.value .con02 .list > div > dl > dt{ font-size: 18px; font-weight: 700; color:#2DBBCD; letter-spacing: -0.025em; } #sub.value .con02 .list > div > dl > dd{ font-size: 20px; line-height: 1.25em; font-weight: 700; color:#333333; } #sub.value .con02 .list > div:before{ display: block; content:""; width: calc(100% - 12px); aspect-ratio: 1; border-radius: 50%; border: 1px solid #BFE1E5; background: #FFFFFF; background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); backdrop-filter: blur(10px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; opacity: 0; transition: opacity .4s; } #sub.value .con02 .list > div.on:before{ opacity: 1; } #sub.value .con02 .list > div:after{ display: block; content:""; width: calc(100% + 30px); aspect-ratio: 1; border-radius: 50%; background: url('/img/sub/value_circle.png') center center no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-size: 100% 100% !important; opacity: 0; transition: opacity .4s; } #sub.value .con02 .list > div.on:after{ opacity: 1; animation: cir 2s infinite; } #sub.value .con02 .list > div.on svg{ bottom: -130px; } #sub.value .con02 .list > div.on svg path{ stroke: #2DBBCD; } #sub.value .con02 .list > div.on svg circle{ stroke: #2DBBCD; } #sub.value .con02 .list > div.on { transform: translateY(-20px); } #sub.value .con02{ padding-bottom: 150px; } #sub.value .con02:after{ transition: transform 1s; } #sub.value .con02.on1:after{ transform: translate(-50%,0) rotate(-11deg);} #sub.value .con02.on2:after{ transform: translate(-50%,0) rotate(-21.5deg);} #sub.value .con02.on3:after{ transform: translate(-50%,0) rotate(-32deg);} #sub.value .con02.on4:after{ transform: translate(-50%,0) rotate(-42.5deg);} #sub.value .con02.on5:after{ transform: translate(-50%,0) rotate(-53deg);} #sub.value .con02.on6:after{ transform: translate(-50%,0) rotate(-63.5deg);} #sub.value .con03 .box{ display: flex; flex-flow: column; gap: 40px; } #sub.value .con03 .line{ width: 100%; height: 1px; position: relative; background-color: #333; } #sub.value .con03 .line:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); } #sub.value .con03 .line:before{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); } #sub.value .con03 .box dl{ display: flex; align-items: center; gap: 180px; padding-left: 200px; } #sub.value .con03 .box dl dt{ display: flex; align-items: center; gap: 60px; font-size: 50px; font-weight: 700; color:#333333; } #sub.value .con03 .box dl dd{ font-size: 20px; line-height: 1.6em; color: #333333; } #sub.culture{ margin-top: 0; } #sub.culture .con01{ background: url('/img/sub/culture_bg01.png') center top no-repeat; margin-bottom: 120px; } #sub.culture .con01 .s_tit{ padding-bottom: 30px; position: relative; border-bottom: 1px solid #333; } #sub.culture .con01 .s_tit:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; left: 0; bottom: 0; transform: translate(0,50%); } #sub.culture .con01 .s_tit:before{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 2px solid #333; position: absolute; right: 0; bottom: 0; transform: translate(0,50%); } #sub.culture .con01 .s_tit em{ margin-bottom: 30px; display: block; font-size: 24px; color:#189FB0; font-weight: 700; } #sub.culture .con01 .s_tit strong{ font-size: 50px; line-height: 1.4em; color:#333333; font-weight: 700; } #sub.culture .con01 .s_tit strong b{ color:#189FB0; } #sub.culture .con01 .img_wrap{ display: flex; gap: 20px; animation: loops 50s linear infinite; margin-top: 170px; } #sub.culture .con01 .img_wrap > div{ display: flex; gap: 20px; } #sub.culture .con02{ height: 100vh; width: 100%; position: relative; } #sub.culture .con02 .txt_bg{ position: absolute; left: 50%; top: 0; transform: translate(-50%,0); overflow: hidden; height: 252px; } #sub.culture .con02 .txt_bg > div{ display: flex; gap: 60px; font-size: 200px; font-weight: 500; color:#333333; letter-spacing: -0.025em; white-space: nowrap; justify-content: center; } #sub.culture .con02 .left{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); text-align: right; padding-right: 40px; width: 50%; display: flex; gap: 20px;justify-content: flex-end; } #sub.culture .con02 .left .wrap{ height: 145px; overflow: hidden; position: relative; } #sub.culture .con02 .left .wrap .ab_txt{ position: absolute; left: 0; top: 0; opacity: 0; } #sub.culture .con02 .left strong{ font-size: 40px; line-height: 1.3em; color:#333333; font-weight: 700; text-align: left; display: block; } #sub.culture .con02 .left strong b { color: #189FB0; } #sub.culture .con02 .left p{ text-align: left; font-size: 18px; color:#999999; margin-top: 20px; } #sub.culture .con02 .right .inner2{ display: flex; justify-content: flex-end; } #sub.culture .con02 .right .sc_con{ display: flex; align-items: flex-end; flex-flow: column; gap: 60px; width: calc(50% - 40px); padding-bottom: 120px; padding-top: 25%; position: relative; z-index: 2; } #sub.culture .con02 .right .sc_con > div{width: 100%; border-radius: 20px; border: 1px solid #DDDDDD; backdrop-filter: blur(20px); padding: 40px; display: flex; flex-flow: column; gap: 40px; } #sub.culture .con02 .right .sc_con > .sc03{ margin-top: 390px; } #sub.culture .con02 .right .sc_con > div > dl{ padding-bottom: 40px; border-bottom: 1px solid#DDDDDD; display: flex; align-items: center; gap: 40px; } #sub.culture .con02 .right .sc_con > div > dl:last-child{ padding-bottom: 0; border: none; } #sub.culture .con02 .right .sc_con > div > dl > dd{ display: flex; justify-content: center; gap: 20px; flex-flow: column; } #sub.culture .con02 .right .sc_con > div > dl > dd strong{ font-size: 24px; font-weight: 700; color:#333333; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul{ display:flex; flex-flow: column; gap: 12px; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul > li{ padding-left: 14px; position: relative; font-size: 20px; line-height: 1.5em; color:#333; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul > li:after{ content:""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #2DBBCD; position: absolute; left: 0; top: 12px; } /* 애니메이션 */ #sub.culture .con01 .s_tit > div{ overflow: hidden; } #sub.culture .con01 .s_tit > div > strong{ display: block; transform: translateY(100%); transition: transform .8s; } #sub.culture .con01.on .s_tit > div > strong{ transform: translateY(0%); } #sub.culture .con01.on .s_tit > div:nth-child(3) > strong{ transition-delay: .2s; } #sub.value .con01 .s_tit > div{ overflow: hidden; } #sub.value .con01 .s_tit > div > strong{ display: block; transform: translateY(100%); transition: transform .8s; } #sub.value .con01.on .s_tit > div> strong{ transform: translateY(0%); } #sub.value .con01 .s_tit > div:nth-child(2) > strong{ transition-delay: .2s; } #sub.value .con01 .s_tit > div:nth-child(3) > strong{ transition-delay: .4s; } #sub.value .con02 .sc_tit strong{ overflow: hidden; } #sub.value .con02 .sc_tit strong > div{ font-family: inherit; } @keyframes cir{ 0%{ transform: translate(-50%,-50%) scale(.9); opacity: 1 } 100%{ transform: translate(-50%,-50%) scale(1.1); opacity: 0; } } @keyframes loops{ 0%{ transform: translateX(-25%); } 100%{ transform: translateX(-315%); } } @media (max-width: 1760px){ .inner{ padding: 0 40px; } #sub .sub_visual .tit strong{ font-size: 80px; } #sub .sub_visual .tit .wrap{ height: 100px; } /* #sub .sub_visual.on .img{ width: 45%; }*/ #sub .sub_tab{ width: calc(100% - 80px); height: 70px; } #sub .sub_tab ul li a{ font-size: 16px; } #sub .sub_tab ul{ gap: 35px; } #sub.global .con05 .sc_svg svg{ width: 100%; height: auto;} #sub.board .inner{ padding: 0 40px; } .inner2{ padding: 0 40px; } #sub.networks .con01 .sc_tit{ padding: 5%; } #sub.networks .con05 .hori_wrap .wrap_box .img{ width: 40%; } #sub.networks .con05 .hori_wrap .wrap_box .img img{ width: 100%; } #sub.networks .con05 .hori_wrap .wrap_box{ width: 900px; } /* #sub.solution .sub_con{ margin-top: -160px; }*/ } @media (max-width: 1660px){ #sub .sub_visual > .inner{ height: 400px; } #sub .sub_visual .of_txt{ height: 400px; } /* #sub .sub_visual.on{ height: 400px; }*/ #sub .sub_visual .img{ right: 50%; top: 50%; transform: translate(50%,-50%); transition: transform 1.5s, right 1.5s, top 1.5s, width 1.5s, height 1.5s, border-radius 1.5s; } #sub .sub_visual.on .img{ top: 100px; transform: translate(0,0); left: auto; right: 0; } #sub .sub_visual .loc > div:after{ width: 10px; } #sub .sub_visual .loc > div > button{ font-size: 14px; } #sub .lc > li > a{ font-size: 14px; } #sub .lc{ width: 240px; padding: 20px; padding-right: 15px; } #sub .lc > li{ margin-bottom: 10px; } #sub .sub_visual.on .img{ width: 540px; height: 240px; } #sub.networks .con03 .inner2{ flex-flow: column; gap: 30px; } #sub.networks .con03 .inner2 svg{ width: 100%; display: block; height: auto; } #sub.networks .con04 .inner2{ gap: 40px; } #sub.networks .con04 .inner2 > div{ width: calc(50% - 20px); } #sub.networks .con04 .inner2 > div strong{ font-size: 24px; } #sub.networks .con04 .inner2 > div strong:after{ width: 40px; } #sub.networks .con05 .hori_wrap .inner2{ gap: 100px; } #sub .sc_tit strong{ font-size: 80px; } } @media (max-width: 1580px){ #sub .sub_con .sub_visual02 .right > div > a{ width: 240px; height: 50px; padding: 0 20px; font-size: 14px; } #sub .sub_visual .img img{ width: 120%; } #sub .sub_visual.on .img img{ width: 120%; } #sub.solution .con_box .inner{ gap: 40px; } #sub.solution .con_box .scroll_t .s_tit .left em{ font-size: 16px; margin-bottom: 8px; } #sub.solution .con_box .scroll_t .s_tit .left strong{ font-size: 28px; } #sub.solution .con_box .scroll_t > div{ padding: 60px 0; } #sub .sub_con .sub_visual02{ margin-bottom: 80px; } #sub.solution .con_box .scroll_t .s_tit .right img{ width: 160px; height: auto; } #sub.solution .con_box .scroll_t .s_txt{ gap: 20px; margin-top: 20px; } #sub.solution .con_box .scroll_t .s_txt p{ font-size: 16px; line-height: 1.7em; } #sub.solution .contact .wrap > strong{ font-size: 24px; } #sub.global .con04 .table_w .t_wrap > div{ gap: 20px; } } @media (max-width: 1300px){ #sub .sub_visual .tit strong{ font-size: 60px; } #sub .sub_visual .tit .wrap{ height: 72px; } #sub.sectors .con02 .title strong{ font-size: 60px; } #sub.sectors .con02 .title em{ font-size: 18px; } #sub.sectors .con02 .txt p{ font-size: 16px; line-height: 1.7em; } #sub.sectors .con02 .inner > div{ gap: 30px; } #sub.sectors .con02{ padding: 100px 0; } #sub .sc_tit strong{ font-size: 60px; } #sub .sc_tit2 strong{ font-size: 22px; } #sub .c_top .sc_tit p{ font-size: 20px; margin-top: 20px; } #sub.global .con06 .list{ flex-flow: column; gap: 40px; align-items: center; } #sub.global .con04 .table_w > div .t_table table td{ font-size: 13px; line-height: 1.3em; padding: 10px; } #sub.global .con04 .table_w > div .t_table table td:nth-child(even){ padding-left: 10px; } #sub.global .con04 .table_w > div .t_table table th{ font-size: 14px; height: 44px; } #sub.global .con04 .table_w .t_table{ width: calc(100% - 10px); } #sub.number .con03 .box2 .graphic:before{ width: 80%; height: auto; aspect-ratio: 1; background-size: 100%; } #sub.number .con03 .line img{ display: none; } #sub.number .con03 .list{ margin-top: 220px; } #sub.solution .con_box .inner .img strong{ font-size: 40px; } #sub.solution .con_box .scroll_t .s_step .wrap > dl{ padding: 15px; } #sub.solution .con_box .scroll_t .s_step .wrap > dl > dt{ font-size: 14px; } #sub.solution .con_box .scroll_t .s_step .wrap > dl > dd{font-size: 16px; } #sub.solution .con_box .scroll_t .s_txt ul li{ font-size: 16px; line-height: 1.7em; } #sub.solution .con_box .scroll_t .s_txt ul li:after{ top: 11px; } #sub.solution .con_box .scroll_t .s_txt ul{ gap: 8px; } #sub.board .g_list ul{ gap: 60px 30px; } #sub.board .g_list ul li{ width: calc(33.3333333333% - 20px); } #sub.board .g_list ul li .img .hover img{ width: 50px; height: auto; } #sub.board .search{ height: 44px; width: 100%; } #sub.board .search .wrap{ gap: 12px; } #sub.board .search select{ width: 120px; font-size: 14px; } #sub.board .search input{ width: calc(100% - 132px); font-size: 14px; } #sub.board .search .search_i svg{ height: 44px; width: auto; } #sub.board .g_list ul li .txt strong{ font-size: 18px; } #sub.board .g_list ul li .txt p{ font-size: 14px; } #sub.board .g_list ul li .txt em{ font-size: 12px; } #sub.board .g_list ul li .txt{ gap: 8px; } #sub.board .g_list ul li a{ gap: 15px; } #sub.board .page{ margin-top: 60px; } #sub.board .page ul li a{ width: 32px; height:32px; font-size: 14px; background-size: 100% 100% !important;; } #sub.networks .con05 .hori_wrap .sc_tit{ width: 600px; } #sub.networks .con05 .sc_tit strong{ font-size: 50px; line-height: 1.3em; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap strong{ font-size: 40px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap em{ font-size: 16px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap p{ font-size: 16px; line-height: 1.5em; margin-top: 20px; } #sub.networks .con05 .hori_wrap .wrap_box .txt{ padding: 40px; padding-right: 0; } #sub.networks .con05 .progress{ width: calc(100% - 80px); } #sub.networks .con06 .list > div > .txt{ padding: 20px; } #sub.networks .con06 .list > div > .txt:after{ width: calc(100% - 40px); } #sub.networks .con06 .list > div > .txt strong{ font-size: 18px; margin-bottom: 4px; } #sub.networks .con06 .list > div > .txt p{ font-size: 15px; line-height: 1.5em; } #sub.networks .con02 .wrap{ clip-path: inset(10% 5% 10% 5% round 20px); } #sub.value .con02 .list > div > dl > dd{ font-size: 15px; } #sub.value .con02 .list > div > dl > dt{ font-size: 14px; } #sub.value .con03 .box dl{ padding-left: 0; } #sub.value .con03 .box dl dt{ gap: 20px; font-size: 30px; } #sub.value .con03 .box dl{ gap: 50px; } #sub.value .con03 .box dl dd{ font-size: 18px; } #sub.culture .con01 .s_tit em{ font-size: 18px; margin-bottom: 15px; } #sub.culture .con01 .s_tit strong{ font-size: 30px; } #sub.culture .con01 .img_wrap{ margin-top: 100px; } #sub.culture .con01 .img_wrap > div img{ width: 300px; } #sub.culture .con02 .txt_bg > div{ font-size: 100px; gap: 30px; } #sub.culture .con02 .txt_bg{ height: 100px; } #sub.culture .con02 .left{ padding-left: 0; width: 100%; text-align: center; gap: 10px; transform: translate(-50%,-50%); } #sub.culture .con02 .left{ padding-right: 0; left: 50%;justify-content: center; } #sub.culture .con02 .left p{ width: 100%; text-align: center; } #sub.culture .con02 .right .sc_con{ padding-top: 75%; } #sub.culture .con02 .right .sc_con{ gap: 300px; width: 100%; } #sub.culture .con02 .txt_bg{ top: 20%; } #sub.culture .con02 .right .sc_con > div > dl{ gap: 20px; padding-bottom: 20px; } #sub.culture .con02 .right .sc_con > div{ gap: 20px; border-radius: 12px; padding: 20px; } #sub.culture .con02 .right .sc_con > div > dl > dt img{ width: 60px; height: auto; } #sub.culture .con02 .right .sc_con > div > dl > dd strong{ font-size: 16px; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul > li{ font-size: 14px; padding-left: 10px; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul{ gap: 6px; } #sub.culture .con02 .right .sc_con > div > dl > dd{ gap: 10px; } #sub.culture .con02 .right .sc_con > div > dl > dd > ul > li:after{ width: 4px; height: 4px; top: 9px; } #sub.culture .con01{ margin-bottom: 0px; } #sub.contact .f_box{ padding: 40px; gap: 40px; } #sub.contact .f_box .f_wrap{ gap: 50px 30px; } #sub.contact .f_box > div{ padding-bottom: 40px; } #sub.contact .f_box .f_wrap > div{ width: calc(50% - 15px); } #sub.contact .f_box .input_f{ height: 50px; padding-left: 20px; font-size: 15px; } #sub.contact .f_box .f_wrap .f_label{ font-size: 16px; padding-left: 5px; } #sub.contact .f_box .f_radio > ul > li label{ height: 50px; font-size: 14px; } #sub.contact .f_box textarea{ height: 140px; padding: 20px; font-size: 14px; } #sub.contact .f_box .per .per_w{ height: 220px; padding: 20px; } #sub.contact .f_box .per .per_w p{ font-size: 14px; } #sub.contact .p_chk .wrap label{ font-size: 14px; } #sub.contact .button_w{ margin-top: 0; } #sub.location .sub_con .inner3 { flex-direction: column; } #sub.location .sub_con .inner3 > div{ width: 100%; } #sub.location .sub_con .inner3 .map_w{ width:100%; height: 400px; } #sub.location .sub_con .inner3 .txt{ padding-left: 0; margin-top: 30px; } #sub.location .sub_con .inner3 .txt .tit{ padding-bottom: 20px; margin-bottom: 20px; } #sub.location .sub_con .inner3 .txt .tit strong{ font-size: 24px; } #sub.location .sub_con .inner3 .info > dl > dt{ font-size: 16px; } #sub.location .sub_con .inner3 .info > dl > dd{ font-size: 14px; } #sub.location .sub_con .inner3 .info{ gap: 30px; } #sub.location .sub_con .bg_t { bottom: -36px; } #sub.location .sub_con .bg_t strong{ font-size: 120px; } #sub.solution .sub_con{ margin-top: -270px; } } @media (max-width: 1240px){ #sub{ margin-top: 80px; } #sub .sub_visual.on .img{ right: 50%; transform: translate(50%, 0); top: 240px; } #sub .sub_visual.on .img{ width: calc(100% - 40px); } /* #sub .sub_visual.on{ height: 320px; }*/ #sub .sub_visual > .inner{ height: 320px; } #sub .sub_visual .of_txt{ height: 320px; } /* #sub.solution .sub_con{ margin-top: 300px; }*/ #sub .sub_visual.on .img img{ width: auto; height: 760px; } #sub .sub_visual .img img{ height: 760px; width: auto; } #sub .sub_con .sub_visual02 .inner .wrap{ flex-flow: column; gap: 20px; padding-top: 40px; } #sub .sub_con .sub_visual02 .right > div > a{ width: 100%; height: 44px; } #sub .sub_con .sub_visual02 .right > div{ width: 50%; } #sub .sub_con .sub_visual02 .left{ gap: 20px; flex-flow: column; } #sub .sub_con .sub_visual02 .txt strong{ font-size: 20px; } #sub .sub_con .sub_visual02 .txt p{ font-size: 16px; } #sub .sub_con .sub_visual02 .left{ gap: 10px; } #sub .sub_con .sub_visual02 .txt{ gap: 0; } #sub .sub_visual .loc > div > button{ text-align: left; } #sub .sub_visual .loc .home{ display:none; } /* #sub .sub_visual{ height: calc(100% - 80px); }*/ #sub.solution .con_box .scroll_t .s_img{ margin-top: 20px; } #sub .sub_con .sub_visual02 .txt ul li{ font-size: 16px; line-height: 1.5em; } #sub .sub_con .sub_visual02 .txt ul li:after{ width: 4px; height: 4px; top: 9px; } #sub .c_top .c_info dl{ padding: 20px; } #sub .c_top .c_info dl:after{ display: none; } #sub .c_top .c_info dl dt{ font-size: 18px; } #sub .c_top .c_info dl dd{ font-size: 15px; } #sub.global .con04 .table_w .t_tit{ margin-bottom: 40px; } #sub.global .con04 .table_w .t_tit ul li{ padding-bottom: 12px; } #sub.global .con04 .table_w .t_tit strong{ font-size: 20px; } #sub.global .con04 .table_w > div{ width: 100%; } #sub.global .con04 .table_w { flex-flow: column; gap: 60px; } #sub.global .con04 .table_w .t_table{ width: 100%; } #sub.global .con04 .table_w .t_tit{ margin-bottom: 12px; } #sub .c_top{ flex-flow: column; gap: 20px; } #sub .c_top > div{ width: 100%; } #sub.global .con03 .box2{ margin-bottom: 100px; } #sub.global .con04{ padding: 100px 0; } #sub .con_w{ padding-top: 100px; padding-bottom: 100px; } #sub.global .con05 .sc_svg{ margin-top: -100px; } #sub.global .con06 .list .regional{ width: 100%; } #sub.global .con06 .list .head{ width: 300px; } #sub.global .con06 .list{ margin-top: 60px; } #sub.global .con06 .list dl dd{ gap: 12px; height: 100px;padding: 0 20px; } #sub.global .con06 .list dl dd img{ width: 50px; height: auto; } #sub.global .con06 .list dl dd .txt strong{ font-size: 16px; margin-bottom: 4px; } #sub.global .con06 .list dl dd .txt p{ font-size: 14px; } #sub.global .con06 .list dl dt{ font-size: 20px; padding-bottom: 10px; } #sub.number .con03 .list dl dt{ gap: 12px; } #sub.number .con03 .list dl dt img{ width: 58px; } #sub.number .con03 .list dl{ gap:20px; } #sub.number .con03 .list dl dd{ font-size: 32px; } #sub.number .con03 .list{ flex-flow: wrap; } #sub.number .con03 .list dl{ width: calc(50% - 10px); } #sub.number .con04 .list .box > div > strong{ font-size: 16px; padding: 0 12px; } #sub.board .sub_visual .loc .home{ display: flex; } #sub.board .board_tab ul li a{ font-size: 13px; height: 34px; } #sub.board .board_tab ul{ gap: 4px; padding: 6px; border-radius: 8px; } #sub.board .board_tab{ height: 50px; gap: 20px; } #sub.board .board_tab > div > strong{ font-size: 16px; } #sub.board .board_tab ul li a{ padding: 0 15px; } #sub.view .sub_con .v_tit strong{ font-size: 20px; } #sub.view .sub_con .v_tit p{ font-size: 14px; } #sub.view .sub_con .v_tit{ gap: 12px; margin-bottom: 30px; } #sub.view .sub_con .v_con{ padding: 15px; min-height: 300px; border-radius: 12px; } #sub.view .button_w{ margin-top: 30px; } #sub.view .sub_con .file{ gap: 12px; padding: 0 15px; height: 44px; border-radius: 8px; } #sub.view .sub_con .file i svg{ width: 22px; height: auto; } #sub.view .sub_con .file a{ font-size: 13px; } #sub.networks .con01 .txt{ padding-left: 0; } #sub.networks .con01 .txt strong{ font-size: 18px; } #sub.networks .con01 .txt{ gap: 8px; } #sub.networks .con01 .txt p{ font-size: 14px; } #sub.networks .con01 .sc_tit{ padding: 0; } #sub.networks .con02 .logo{ width: 400px; height: 400px; } #sub.networks .con02 .logo > div > div{ width: 80px; height: 80px; } #sub.networks .con02 .logo > div > div svg{ width: 40px; height: auto; } #sub.networks .con02 .wrap .txt strong{ font-size: 24px; } #sub.networks .con02 .wrap .cir > div:nth-child(1) img{ width: 1000px; } #sub.networks .con02 .wrap .cir > div:nth-child(2) img{ width: 700px; } #sub.networks .con04 .inner2{ flex-flow: column; gap: 40px; } #sub.networks .con04 .inner2 > div{ width: 100%; } #sub.value .con01 .s_tit{ padding-left: 0; } #sub.value .con01 .s_tit strong{ font-size: 30px; } #sub.value .con01 .s_tit{ gap: 6px; } #sub.value .con01 .txt ul{ width: 100%; gap: 6px; } #sub.value .con01 .txt ul li:after{ display: none; } #sub.value .con01 .txt ul li{ padding: 12px 20px; font-size: 16px;} #sub.value .con02 .list > div > dl > dd{ font-size: 14px; } #sub.job .search .wrap{ width: 100%; padding: 0; } #sub.job .search{ height: auto; } #sub.job .search .wrap{ flex-flow: wrap; gap: 10px; } #sub.job .search .reset{ font-size: 14px; width: calc(100% - 40px); } #sub.job .search{ margin-bottom: 80px; } #sub.board .j_list ul li .txt strong{ font-size: 18px; } #sub.board .j_list ul li .txt p{ font-size: 14px; } #sub.board .j_list ul li a{ padding: 30px; justify-items: flex-start; flex-flow: column; gap: 10px; } #sub.board .j_list ul li .right{ gap: 20px; } #sub.board .j_list ul li .right > p{ width: auto; font-size: 14px; padding-left: 20px; } #sub.board .j_list ul li .right > p:first-child{ padding-left: 0; } #sub.board .j_list ul li .right > span{ width: auto; padding: 0 15px; height: 38px; font-size: 13px; margin-left: 10px; } #sub.number .con03 .list > div{ width: 100%; } #sub.number .con03 .info_p{ margin-top: 8px; } #sub.number .con03 .list{ gap: 30px; } #sub.number .con03 .list > div{ gap: 0 20px; } #sub.solution .con_box .scroll_t > div .button_w .s_logo img{ width: 150px; height: auto; } #sub.solution .cb02 .con_box .scroll_t > div .button_w .s_logo img{ width: 90px; } #sub.global .con04 .table_w .t_table{ width: 100%; } #sub.global .con04 .table_w .t_wrap > div{ flex-flow: column; gap: 20px; } } @media (max-width: 800px){ #sub.board .inner{ padding: 0 20px; } #sub .sub_visual .loc > div > button{ font-size: 14px; } .inner{ padding: 0 20px; } .inner2{ padding: 0 20px; } .inner3{ padding: 0 20px; } #sub .sub_visual .tit strong{ font-size: 30px; } #sub .sub_visual .tit .wrap{ height: 40px; } #sub .sub_visual .loc{ flex-flow: wrap; } #sub.solution .sub_visual .loc .loc01{ width: 100%; } #sub.solution .sub_visual .loc .loc01:after{ display: none; } #sub .sub_visual .loc > div{ width: calc(50% - 6px); justify-content: space-between; } #sub .sub_visual .loc > div:after{ width: 1px; height: 14px; } #sub .sub_visual .lc03{ left: auto; right: 0; } #sub .lc > li > a{ font-size: 12px; } #sub .lc{ padding: 14px; } #sub .sub_visual > .inner { height: 240px; } /* #sub .sub_visual.on{ height: 240px; }*/ #sub .sub_visual .of_txt{ height: 240px; } #sub .sub_visual.on .img img{ height: 100%; width: auto; } #sub .sub_visual .img img{ height: 100%; width: auto; } /* #sub .sub_visual{ height: calc(100% - 60px); }*/ #sub{ padding-top: 60px; margin-top: 0; } #sub .sub_con .sub_visual02 .right > div > a{ gap: 12px; } #sub .sub_con .sub_visual02 .right > div > a{ padding: 0 15px; height: 40px; } #sub.solution .con_box .inner{ flex-flow: column; gap: 20px; } #sub .sub_tab{ display: none; } #sub.solution .con_box .inner > div{ width: 100%; } #sub.solution .con_box .scroll_t > div{ padding: 30px 0; } #sub.solution .con_box .scroll_t .s_tit .left strong{ font-size: 18px; } #sub.solution .con_box .scroll_t .s_tit .left em{ font-size: 14px; margin-bottom: 4px; } #sub.solution .con_box .scroll_t .s_tit .right img{ width: 100px; } #sub.solution .con_box{ margin-top: 40px; } #sub.solution .con_box .scroll_t .s_txt{ margin-top: 0; gap: 8px; } #sub.solution .con_box .scroll_t .s_txt p{ font-size: 14px; } #sub .sub_con .sub_visual02{ margin-bottom: 40px; } #sub.solution .contact{ height: 300px; margin-top: 60px; } #sub.solution .contact .wrap{ gap: 15px; } #sub .button_w a{ width: 160px; height: 44px; } #sub.solution .contact .wrap > strong{ font-size: 18px; } #sub.solution .con_box .scroll_t .s_img{ margin-top: 0; } #sub .sub_con .sub_visual02 .right > div > a{ font-size: 12px; } #sub .sub_con .sub_visual02 .txt p{ font-size: 14px; } #sub.solution .con_box .scroll_t .s_img p{ font-size: 14px; } #sub.sectors .con02 .inner{ flex-flow: column; gap: 20px; } #sub.sectors .con02 .title strong{ font-size: 30px; } #sub.sectors .con02 .title em{ font-size: 14px; } #sub.sectors .con02 .title strong:after{ display: none; } #sub.sectors .con02 .inner > div{ gap: 8px; } #sub.sectors .con02 .inner > div{ width: 100%; } #sub.sectors .con02 .txt p{ font-size: 14px; } #sub.sectors .con02{ padding: 60px 0; } #sub.solution .con01{ padding-bottom: 30px; } #sub.sectors .contact{ margin-top: 0 !important; } #sub.global .sub_visual .loc .loc01{ width: calc(50% - 6px); } #sub.global .sub_visual .loc .loc01:after{ display: block; } #sub.number .sub_visual .loc .loc01{ width: calc(50% - 6px); } #sub.number .sub_visual .loc .loc01:after{ display: block; } #sub.only .sub_visual .loc .loc01{ width: calc(50% - 6px); } #sub.only .sub_visual .loc .loc01:after{ display: block; } #sub.solution .con_box .scroll_t .s_txt em{ font-size: 13px; } #sub .sub_con .sub_visual02 .txt ul li{ font-size: 14px; } #sub .sub_con .sub_visual02 .txt ul li br{ display: none; } #sub .sc_tit strong{ font-size: 30px; } #sub .sc_tit2 strong{ font-size: 18px; } #sub .sc_tit2 strong:after{ width: 12px; height: 12px; background-size: 100% 100%; left: -12px; bottom: -5px; } #sub .sc_tit2 strong:before{ width: 12px; height: 12px; background-size: 100% 100%; right: -12px; bottom: -5px; } #sub.global .con03 .box2{ margin-bottom: 60px; margin-top: 30px; } #sub .con_w{ padding-top: 60px; padding-bottom: 60px; } #sub .c_top .sc_tit p{ font-size: 14px; } #sub .c_top .c_info dl dt{ font-size: 16px; } #sub .c_top .c_info dl dd{ font-size: 14px; } #sub.global .con04 .table_w{ margin-top: 40px; } #sub.global .con04 .table_w > div .t_table table td{ font-size: 11px; } #sub.global .con04 .table_w > div .t_table table th:last-child{ width: 40%; } #sub.global .con04 .table_w > div .t_table table th:nth-child(odd){ width: 60px; } #sub.global .con04 .table_w .t_tit strong{ font-size: 18px; } #sub.global .con06 .list dl{ flex-flow: wrap; } #sub.global .con06 .list .regional dl dd{ width: calc(50% - 5px); height: 80px; padding: 0 15px; } #sub.global .con06 .list dl dd img{ width: 40px; } #sub.global .con06 .list dl dd .txt strong{ font-size: 14px; margin-bottom: 2px; } #sub.global .con06 .list dl dd .txt p{ font-size: 12px; } #sub.global .con06 .list dl dd{ heiht: 80px; } #sub.global .con06 .list dl dt{ font-size: 16px; } #sub.global .con05 .sc_svg .pc_svg{ display: none; } #sub.global .con05 .sc_svg .mo_svg{ display: block; } #sub.global .con05 .sc_svg{ margin-top: 20px; } #sub.number .con04 .list .box{ flex-flow: wrap; } #sub.number .con04 .list .box > div{ width: calc(50% - 10px); } #sub .sc_tit3{ flex-flow: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 8px; } #sub .sc_tit3 strong{ font-size: 24px; } #sub .sc_tit3 p{ font-size: 14px; } #sub.number .con03 .box2 .graphic{ margin-top: 30px; } #sub.number .con03 .box2 .graphic:before{ width: 65%; } #sub.number .con03 .line{ margin-top: 80px; } #sub.number .con03 .list{ margin-top: 0; } #sub.number .con03 .info_p{ font-size: 13px; } #sub.number .con03 .list dl dt img{ width: 40px; } #sub.number .con03 .list dl dt strong{ font-size: 15px;line-height: 1.3em; } #sub.number .con03 .list dl dd{ font-size: 26px; } #sub.number .con03 .list{ gap: 30px; } #sub.number .con03 .list dl{ width: calc(50% - 5px); } #sub.number .con04 .list .box > div > strong{ font-size: 13px; } #sub.number .con04 .list .box > div > em{ font-size: 15px; } #sub .sc_tit3 strong{ font-size: 18px; } #sub.solution .con_box .scroll_t > div .button_w{ margin-top: 30px; } #sub.solution .con_box .scroll_t .s_step .wrap{ flex-flow: wrap; } #sub.solution .con_box .scroll_t .s_step .wrap > dl{ width: calc(50% - 10px); } #sub.solution .con_box .scroll_t .s_step .wrap:last-child{ flex-flow: wrap; } #sub.solution .con_box .scroll_t .s_step .wrap:last-child > dl{width: calc(50% - 10px); } #sub.solution .con_box .scroll_t .s_step .wrap > dl:after{ left: auto !important; right: 0 !important; top: 50% !important; transform: translate(50%,-50%) !important; } #sub.solution .con_box .inner .img strong{ font-size: 30px; margin-bottom: 20px; } #sub.board .sub_visual .loc > div{ width: auto; } #sub.board .sub_visual .loc > div:after{ width: 7px; height: 1px; } #sub .lc{ width: 180px; } #sub .board_visual{ height: 300px !important; } #sub.board .g_list ul{ gap: 50px 20px; } #sub.board .g_list ul li{ width: calc(50% - 10px); } #sub.board .g_list ul li .img{ border-radius: 12px; } #sub.board .g_list ul li .txt strong{ font-size: 15px; } #sub.board .search .wrap{ width: calc(100% - 40px); } #sub.board .sub_con{ padding-top: 60px; } #sub.view .sub_con .v_tit strong{ font-size: 18px; } #sub.view .sub_con .v_tit strong br{ display: none; } #sub.board .g_list ul li .txt{ gap: 4px; } #sub.board .g_list2 ul li a{ padding: 20px; } #sub.networks .con05 .hori_wrap .wrap_box{ width: 600px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap strong{ font-size: 22px; margin-bottom: 4px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap em{ font-size: 14px; } #sub.networks .con05 .hori_wrap .wrap_box .txt .t_wrap p{ font-size: 12px; margin-top: 8px; } #sub.networks .con05 .hori_wrap .wrap_box{ height: auto; } #sub.networks .con05 .hori_wrap .wrap_box .txt{ padding: 20px; padding-right: 0; } #sub.networks .con05 .hori_wrap .wrap_box .txt .button_w{ margin-top: 30px; } #sub.networks .con05 .sc_tit strong{ font-size: 30px; } #sub.networks .con05 .hori_wrap .sc_tit{ width: 250px; } #sub.networks .con05 .hori_wrap .inner2{ gap: 50px; } #sub.networks .con05 .hori_wrap .wrap_box{ width: 500px; } #sub .sc_tit4 strong{ font-size: 24px; } #sub .sc_tit4{ margin-bottom: 20px; } #sub.networks .con06 .list > div > .txt strong{ font-size: 15px; margin-bottom: 4px; } #sub.networks .con06 .list > div > .txt p{ font-size: 13px; } #sub.networks .con06 .list > div{ width: calc(50% - 10px) } #sub.value .con02 .list{ margin-top: 60px; flex-flow: wrap; } #sub.value .con02 .list > div{ width: 50%; } #sub.value .con01 .s_tit strong{ font-size: 22px; } #sub.value .con02{ height: auto; padding-top: 60px; padding-bottom: 60px; } #sub.value .con02 .list > div{ aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-flow: column; } #sub.value .con02 .list > div svg{ display: none; } #sub.value .con02 .list > div > dl{ padding: 0 12px; } #sub.value .con03 .box dl dd br{ display: none; font-size: 14px; } #sub.value .con03 .box dl dt{ font-size: 18px; display: flex; flex-flow: column; gap: 8px; } #sub.value .con03 .box dl{ gap: 10px; flex-flow: column; } #sub.value .con03 .box dl dd{ font-size: 14px; word-break: keep-all; text-align: center; } #sub.value .con03 .box dl dt svg{ width: 50px; height: auto; } #sub.culture .con02 .right .sc_con{ padding-top: 600px; } #sub.culture .con02 .txt_bg > div{ font-size: 60px; gap: 20px; } #sub.culture .con02 .txt_bg { height: 60px; } #sub.culture .con02 .left strong { font-size: 24px; } #sub.culture .con02 .left p{ font-size: 12px; margin-top: 8px; } #sub.culture .con01 .s_tit strong{ font-size: 24px; } #sub.culture .con02 .txt_bg{ top: 28%; } #sub.culture .con01 .img_wrap > div img { width: 200px; } #sub.culture .con01 .img_wrap{ margin-top: 40px; } #sub.job .search .input_w{ width: calc(50% - 5px); height: 44px; } #sub.job .search select{ width: calc(50% - 5px); height: 44px; } #sub.job .search .reset{ height: 44px; width: 100%; } #sub.board .j_list ul li .txt strong{ font-size: 16px; } #sub.board .j_list ul li .txt p{ font-size: 13px; } #sub.board .j_list ul li .txt{ gap: 4px; } #sub.board .j_list ul li a{ padding: 20px; } #sub.job .search{ margin-bottom: 30px; } #sub.view .v_cate span{ font-size: 13px; height: 38px; padding: 0 12px; } #sub.view .v_cate{ gap: 4px; margin-bottom: 20px; } #sub.view .v_cate .share{ width: 38px; height: 38px; } #sub.view .v_cate .cate{ padding: 0 20px; } #sub .f_info strong{ font-size: 16px; } #sub .f_info span{ font-size: 14px;height: 38px; padding: 0 15px; } #sub .f_info{ gap: 8px; margin-bottom: 60px; } #sub.board .f_list ul li > div i{ font-size: 16px; } #sub.board .f_list ul li > div .txt strong{ font-size: 14px; } #sub.board .f_list ul li .faq_q{ height: 60px; padding: 0 20px; gap: 10px; } #sub.board .f_list ul li > div .txt p{ font-size: 14px; } #sub.board .f_list ul li > div{ padding: 0 20px; gap: 10px; } #sub.board .f_list ul li .faq_a{ padding-bottom: 30px; } #sub.contact .f_box .f_radio > ul{ flex-flow: wrap; } #sub.contact .f_box .f_radio > ul > li{ width: calc(33.33333333% - 6.6666666px); } #sub.contact .f_box{ padding: 30px 20px; } #sub.contact .f_box .f_radio > .etc > li:last-child{ width: 100%; } #sub.contact .f_box .f_wrap{ flex-flow: column; gap: 30px; } #sub.contact .f_box .f_wrap > div{ width: 100%; } #sub.contact .f_box .f_radio > ul > li label{ text-align: center; } #sub .f_info strong{ word-spacing: normal; padding: 0 20px; } #sub.location .sub_con .bg_t strong{ font-size: 60px; } #sub.location .sub_con .bg_t { bottom: -10px; } #sub.location .sub_con .inner3 .info{ gap: 20px; flex-flow: column; } #sub.location .sub_con .inner3 .info dl{ width: 100%; } #sub.location .sub_con{ padding-bottom: 100px; } #sub.location .sub_con .inner3 .map_w{ height: 280px; } #sub.board .board_tab ul li a{ word-break: keep-all; text-align: center; padding: 0 10px; } #sub.solution .con_box .scroll_t > div:last-child{ padding-bottom: 0 !important; } #sub.solution .sub_con{ margin-top: -80px } #sub.solution .con_box .scroll_t > div .button_w .s_logo img{ width: 100px; height: auto; } #sub.solution .cb02 .con_box .scroll_t > div .button_w .s_logo img{ width: 70px; } } @media (max-width: 500px){ #sub.networks .con02{ padding: 10px; } #sub.networks .con05 .hori_wrap .wrap_box > div{ width: 100%; } #sub.networks .con05 .hori_wrap .wrap_box .img{ clip-path: inset(0% 0% 0% 0% round 20px) !important; } #sub.networks .con05 .hori_wrap .wrap_box .img{ width: 70%; } #sub.networks .con05 .hori_wrap .wrap_box{ width: 400px; flex-flow: column; } #sub.networks .con02 .wrap{ clip-path: inset(5% 5% 5% 5% round 20px); } #sub.networks .con02 .logo{ width: 350px; height: 350px; } #sub.value .con02 .list > div{ margin-top: 0 !important; } }