#footer .foot_wrap#wrap{ width:100%;height:100%;margin:0 auto;min-width:100%;position:absolute;overflow-wrap: break-word;} /* header_info */ .header_info{position:absolute;top:39px;right:10%} .header_info a{position:relative;color:#fff;font-size:15px;margin:0 15px;display:inline-block;position:relative} .header_info a:first-child:after{content:'';position:absolute;width:1px;height:15px;background:#fff;top:4px;left:60px} .header_info a:hover{text-decoration:none} .header.on .header_info a{color:#222} /* 헤더 고정 스타일 */ .fixed-header { position: fixed; top: 0; left: 0; width: 100%; background: white; z-index: 1000; transition: top 0.3s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* 탭 메뉴가 헤더 아래 고정되도록 */ .fixed-tab { position: fixed; top: 60px; /* 헤더 높이에 맞춰 조정 */ left: 0; width: 100%; background: white; z-index: 999; transition: top 0.3s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* section */ .sec_box{max-width:1500px;margin:0 auto} .sec-wrap,.header,.sec-content,.sec-footer{position:relative;width:100%;margin:0;padding:0} /*sub header*/ #header .logo {background: url(../img/logo.svg) no-repeat 50%;} #header .menu > li h2 {color:#333;} #header .btn_menu .bar {background:#333;} #header { position: fixed; top: 0; width: 100%; z-index: 9999; background: #fff; } /* header */ .header{position:fixed;top:0;left:0;z-index:11;text-align:center; transition:all ease .5s;-webkit-transition:all ease .5s;-o-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;overflow: hidden} .header.on{background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,0.05)} .header.on .logo{background-image:url(../img/logo.svg)} .header.on .menu:after{display:none} .header.on .menu > li > h2{color:#333} .header .logo{background-size: contain!important;display:block;width:130px;height:50px;background:url(../img/logo_w.svg) no-repeat 50%;position:absolute;left:70px;top:25px} .header:after{opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s} .header:before{content:'';width:100%;height:100px;background:#fff;position:absolute;top:0;right:0;z-index:-1;opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s} /* menu */ .menu {display:inline-block} .menu > li{float:left} .menu > li h2{font-weight:400;cursor:pointer;color:#fff;font-size:20px;padding:0 55px;line-height:100px;letter-spacing:-.08em} .menu > li > a{color:#666;font-size:16px} .menu > li > ul{width:100%;min-height:150px;padding:0;position:absolute;top:110px;text-align:center} .menu > li > ul > li{display:inline-block;float:left;text-align:left;padding:0 55px;opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s} .menu > li > ul > li > a{display:block;padding:5px 0;font-size:1.1em;transition:all ease .3s;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;color:#666} .menu > li > ul > li > a:hover{color:#014099} .menu > li.open h2{position:relative} .menu > li.on h2:after{content:'';width:6px;height:6px;background:#078AD8;border-radius:50%;position:absolute;left:50%;top:25px;margin-left:-3px} .menu > li.open ul > li{ opacity:1} /* main_cont */ #scroll_title {width:100%; margin:120px auto 150px auto; background-color:#fff; display: grid; place-items: left; justify-content: center;} #scroll_title .scroll_title_cont {color: rgb(0,0,0,0.2); font-size: 45px; font-weight: bold; letter-spacing: 0; margin: 0; } #scroll_title .scroll_title_cont span {font-size:60px;} .scroll_text { background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)) no-repeat; background-clip: text; -webkit-background-clip: text; background-size: 0%; transition: background-size 0.5s cubic-bezier(0.1, 0.5, 0.5, 1); animation: scroll-text-color linear auto both; animation-range: cover 20% cover 80%; animation-timeline: view(); } /* animations */ @keyframes scroll-text-color { to { background-size: 100%; } } /* visual swiper */ #visual .swiper{ width: 100%; height: 100%; } #visual .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #visual .swiper-slide img { display: block; width: 100%; height: 100vh; object-fit: cover; } #visual .swiper-pagination{position:absolute;left:50%;bottom:70px;z-index:101;transform:translateX(-50%);width:max-content} #visual .swiper-pagination span{font-size:0px; opacity:.3;position:relative;width:29px;height:29px;margin:0 5px;background-color:transparent;transition:all .3s} #visual .swiper-pagination span.on{opacity:1} #visual .swiper-pagination span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s} #visual .swiper-pagination span.on:before{opacity:1;width:24px;height:24px} #visual .swiper-pagination span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff} /* visual */ #visual{position:relative;width:100%;height:100vh;margin:0 auto;overflow:hidden; max-width: 100%; box-sizing: border-box; } #visual .imgBox{width:100%;height:100vh;background-size:cover !important} #visual .img1{background:url(../img/visual/visual_img7.jpg) center top no-repeat} #visual .img2{background:url(../img/visual/visual_img4.jpg) center top no-repeat} #visual .img3{background:url(../img/visual/visual_img5.jpg) center top no-repeat} .visualList .txtBox{position:absolute;left:50%;margin-left:-50%;width:100%;text-align:center;color:#fff;font-size:60px;color:#fff;} .visualList .txtBox .txt1{font-size:25px;} .visualList .txtBox .txt2{font-size:65px;font-weight:500;} .visualList .txtBox .txt3{font-size:20px;width:600px;margin:0 auto;color:#fff;padding-top:10px;} #visual .btn_prev,.btn_next{color:#fff !Important} /*mouse */ @-webkit-keyframes scroll { 0% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes scroll { 0% { -moz-transform: translateY(0); } 50% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @keyframes scroll { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .center-it { z-index:100; position: absolute; bottom: 20%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .center-it .caption { font-size:11px; text-align:center; color:#fff; opacity:0.8; margin-top: 7px;} .mouse { display: inline-block; height: 44px; width: 28px; border-radius: 12px; border: 2px solid #fff; text-align: center; opacity:0.7} .mouse:after { display: inline-block; height: 8px; width: 2px; background-color: #fff; border-radius: 3px; content: ""; -webkit-animation: scroll 1.5s ease-out infinite forwards; -moz-animation: scroll 1.5s ease-out infinite forwards; animation: scroll 1.5s ease-out infinite forwards;} /* banner */ .section_banner{width:100%;overflow:hidden; padding:45px 0 100px 0; max-width: 100%; box-sizing: border-box;} .section_banner .main_tit .banner_txt {margin-bottom: 85px; text-align: center;} .main_tit .title_st1{color:#078AD8; font-weight: bold;} .main_tit .title_st2{font-size:43px; font-weight: bold;} .main_tit .title_st3{margin-top:10px;} .banner_img {display: grid; grid-template-columns: repeat(2, 1fr); max-width: 1200px; margin: 0 auto;} .banner_img div.b_txt {display: flex; padding: 70px; background: #000; color: #fff; align-content: flex-end; flex-wrap: wrap; text-align: left;} .banner_img div.b_txt p {margin-bottom: 15px; font-size: 25px; font-weight: 300; white-space: pre-line; color:#fff; } .banner_img .img_wrap>img {height: 100%;} .pagecommon .pl { white-space: pre-line; word-break: keep-all; } .banner_img div.b_txt span {opacity: .5;} /* business */ .section_business{display: flex; height: auto; padding: 100px 0px; border-top: 1px solid #e1e1e1; max-width: 1200px; margin: 0 auto; min-height: 440px; box-sizing: border-box; } .section_business .business_le .business_title {position: sticky; top: 100px; font-size: 35px; font-weight: 700; color: #000; width: 300px;} .section_business .business_btn {width: 75%;} .section_business .business_btn li {display: flex; justify-content: space-between; padding: 0 50px;} .section_business .business_btn>li:nth-child(2n) { flex-direction: row-reverse; } .section_business .business_btn>li+li { margin-top: 50px; padding-top: 50px; border-top: 1px solid #e1e1e1; } .section_business .txt_box {display: flex; flex-direction: column; justify-content: space-between;} .section_business .txt_box .hash {display: flex; gap: 8px; word-break: keep-all;} .section_business .txt_box .hash li {padding: 8px 20px; border-radius: 50px; font-weight: 700; color: #000; background: #f2f2f2; transition: all .3s;} .section_business .txt_box .bt_txt span {font-size: 13px; font-weight: 700; color: #aaa;} .section_business .txt_box .bt_txt p {margin-bottom: 10px; font-size: 22px; font-weight: 700; color:#000;} .section_business .txt_box .bt_sub_txt {white-space: pre-line;} .section_business .business_re{overflow: hidden; display: block; height: 100%; transition: all .3s;} .section_business .business_re:hover{border-radius: 50%;} /*system */ .section_system {max-width: 1200px; box-sizing: border-box; width:100%;overflow:hidden; padding:45px 0px 100px 0; display: flex; border-top: 1px solid #e1e1e1; height: auto; padding: 100px 0px; margin:0 auto;} .section_system .system_title {font-size: 35px; font-weight: 700;width: 300px;color: #000; } .section_system .arrow {display: flex; gap: 5px; margin-top: 20px;} .section_system .arrow span {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; color: #000; cursor: pointer; background: #f2f2f2; transition: all .3s;display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; color: #000; cursor: pointer; background: #f2f2f2; transition: all .3s;} .section_system .arrow .prev::after {content: ''; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; display: inline-block; transform: rotate(225deg); position: relative; top: 0px; left: 2px;} .section_system .arrow .next::after {content: ''; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; display: inline-block; transform: rotate(45deg); position: relative; top: 0px; left: 0px;} .section_system .arrow span:hover{background: #000;} .section_system .arrow span:hover::after{border-top: 1px solid #fff; border-right: 1px solid #fff;} .section_system .swiper-slide img {width:100%;} .section_system .swiper-container {margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;} .section_system .s_tit {margin-bottom: 10px; font-size: 22px; font-weight: 700; color: #000; margin-top:30px;} /* common */ .main_tit{width:100%;text-align:center;margin-bottom:25px} .main_tit h3{color:#000;font-size:32px;letter-spacing:-0.8px} .main_tit p{color:#999;font-size:16px} /* gallery */ #gallery{padding:85px 0 100px 0} #gallery .galleryList .swiper-slide{background:#222;height:350px} #gallery .swiper-button-next,#gallery .swiper-button-prev{color:#999} /* board */ #section_board{width:100%;max-width:1400px;margin:0 auto;padding:90px 0 100px 0;display:flex} #section_board > div{flex:1;margin:0 40px 0 0;position:relative} #section_board > div h3{font-size:23px;color:#000;padding-bottom:5px;border-bottom:1px solid #ddd} #section_board > div ul{margin-top:20px} #section_board > div ul li{position:relative;padding-left:15px} #section_board > div ul li:before{content:'';position:absolute;top:12px;left:0;width:4px;height:4px;background:#3e85df;display:block} #section_board > div ul li a{display:block;color:#666;font-size:16px;line-height:26px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} #section_board > div ul li a:hover{color:#1c4cb9;font-weight:bold} #section_board > div a.btn_more{position:absolute;top:10px;right:0;color:#999;font-size:13px; background:url(../img/board_btn_plus.png) center top no-repeat;width:25px;height:25px} /* logo slide bar */ #section_clients { max-width: 100%; box-sizing: border-box; overflow : hidden; position: relative; width: 100%; box-sizing: border-box; margin-bottom: 100px; position: relative;} .clients_top {animation: box_top_left 30s infinite linear; display: flex ; gap: 40px; white-space: nowrap;} .clients_btm { animation: box_btm_right 30s infinite linear; display: flex ; gap: 40px; white-space: nowrap;} .clients_box { display: flex; justify-content: center; align-items: center; overflow: hidden; flex-direction: column; gap: 20px; } .clients_box ul+ul {margin-top:40px;} .clients_box ul li { width: 300px; height: 100px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .clients_box img {border: 1px solid #e1e1e1;} .clients_logo { width: 100%; height: 100%; object-fit: cover; min-width: 150px; min-height: 50px; } @keyframes box_top_left {0% {transform:translateX(0)} 100% {transform:translateX(-50%)}} @keyframes box_btm_right {0% {transform:translateX(-50%)} 100% {transform:translateX(0%)}} /* sub_visual */ #sub_bg {position: relative; overflow: hidden; min-height: 540px; font-weight: 400; line-height: 1.5em; color: #666; zoom: 1;} .subv_top{position: relative; font-size: 16px; letter-spacing: -.3px; color: #777; line-height: 1.8;} .subv_top .bnr {position: relative; overflow: hidden; display: flex; align-items: center; height: 530px; margin-bottom: 130px; font-size: 20px; font-weight: 700; color: #111;} #sub_bg .subv_top .tit {max-width:1200px;} .subv_top .bnr .tit .inner {width: 100%; max-width: 1400px; margin: 0 auto;} .subv_top .inner{width: 100%; max-width: 1400px; margin: 0 auto;} .subv_top .bnr h1 {font-size: 60px;} .subv_top .bnr h1 span {color:#ffffff;} .subv_top .bnr p {font-size:20px; color:#fff; font-weight: 500; opacity: 90%;} #sub_bg .bnr #sub_topimg{position:absolute;z-index:-1;;width:100%;height:100%; background-size:cover} @keyframes sub_top_img { from { transform: scale(1.2); } to{ } } .sub_bg1{background:url(../img/sub/sub_visual8.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);} .sub_bg2{background:url(../img/sub/sub_visual10.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);} .sub_bg3{background:url(../img/sub/sub_visual13.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);} .sub_bg6{background:url(../img/sub/sub_visual12.jpg) center top 10% no-repeat; animation: sub_top_img 2.0s 0s both; filter: brightness(70%);} /* .sub_bg1:after{background:url(../img/sub/sub_visual3.jpg)} */ .sub-depth-wrap{position:relative;margin-top:-70px} .sub_visual h1 p{font-size:16px;font-weight:300;margin:10px 0 0} .sub-depth-1{position:absolute;top:0;left:0;width:100%;background:rgba(0,0,0,0.5)} .sub-depth-1 ul{max-width:1280px;width:100%;margin:0 auto;overflow:hidden} .sub-depth-1 li{float:left} .sub-depth-1 li:only-child {width:100%} .sub-depth-1 li:first-child:nth-last-child(2), /* 메뉴가 둘 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(2)+li {width:50%} /* 메뉴가 둘 일 때, 2번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(3), /* 메뉴가 셋 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(3)~li {width:33.33%} /* 메뉴가 셋 일 때, 2~3번째 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(4), /* 메뉴가 넷 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(4)~li {width:25%} /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(5), /* 메뉴가 넷 일 때, 1번 메뉴 선택 */ .sub-depth-1 li:first-child:nth-last-child(5)~li {width:20%} /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */ .sub-depth-1 li a{cursor:pointer;display:block;color:#fff;text-align:center;line-height:70px;position:relative;transition:all ease .4s;-webkit-transition:all ease .4s;-ms-transition:all ease .4s;-o-transition:all ease .4s;font-size:18px} .sub-depth-1 li a:hover{color:#fff000} .sub-depth-1 li.active a{background:#203c92;color:#fff;font-weight:500} .sub-depth-1 li a:before{content:'';width:1px;height:12px;background:rgba(255,255,255,0.2);position:absolute;right:0;top:50%;margin-top:-6px} .sub-depth-1 li:last-child a:before, .sub-depth-1 li.active a:before{display:none} .sub-depth-2{text-align:center;border-bottom:1px solid #ddd;display:none} .sub-depth-2 a{display:inline-block;line-height:70px;margin:0 20px;padding:0 10px;font-size:18px;color:#666;position:relative} .sub-depth-2 a.active{color:#333;background:#f8f8f8} .sub-depth-2 a.active:after{content:'';width:0;height:3px;background:#1ac0e4;position:absolute;left:50%;bottom:-1px; animation-duration:0.3s; animation-fill-mode:both; animation-iteration-count:1; animation-timing-function:ease; -webkit-animation-duration:0.3s; -webkit-animation-fill-mode:both; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease; animation-delay:0.3s;-webkit-animation-delay:0.3s; animation-name:sub-tab-line;-webkit-animation-name:sub-tab-line; } .sub-depth-2 a.active,.sub-depth-2 a:hover{color:#333;background:#f8f8f8;font-weight:bold} @keyframes sub-tab-line{ 0%{width:0%;left:50%} 100%{width:100%;left:0} } @-webkit-keyframes sub-tab-line{ 0%{width:0%;left:50%} 100%{width:100%;left:0} } /* allmenu */ .btn_menu{position: fixed; top: 36px; right: 70px; width: 40px; height: 24px; cursor: pointer; z-index: 999999;} .btn_menu .bar{position:absolute;left:0;width:100%;width:100%;height:2px;border:0;background:#fff;transition:opacity 0.3s, top 0.3s, transform 0.5s;transition-delay:0.3s, 0.3s, 0s} .on .btn_menu .bar{background:#000} .btn_menu .open {background:#000;} .btn_menu .bar:nth-child(1){top:0;transform:rotate(0)} .btn_menu .bar:nth-child(2){top:11px;opacity:1} .btn_menu .bar:nth-child(3){top:22px;transform:rotate(0)} .btn_menu.map{right:67px} .btn_menu.map .bar{background:#000;transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s;transition-delay:0s, 0s, 0s, 0.3s} .btn_menu.map .bar:nth-child(1){top:11px;background:#000;transform:rotate(-45deg)} .btn_menu.map .bar:nth-child(2){opacity:0} .btn_menu.map .bar:nth-child(3){top:11px;background:#000;transform:rotate(45deg)} #sitemap{display:none;position:fixed;right:-100%;width:100%; background:#fff; padding:10% 15%; z-index:10;transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden; overflow-y:auto;height: 100%; z-index: 9999;} #sitemap .top_info{display:none} #sitemap > ul{max-width:1280px; overflow:hidden; margin:0 auto} #sitemap > ul > li{float:left; width:25%; padding:0 10px} #sitemap > ul > li h2{font-size:24px; color:#333} #sitemap > ul > li h3{font-size:18px; color:#333;font-weight:500; margin:0 0 10px} #sitemap > ul > li > ul > li{margin:30px 0} #sitemap > ul > li > ul > li > a{color:#999; font-size:16px; padding:7px 0; display:block;} #sitemap > ul > li h3 > a:hover{color:#014099;} #sitemap > ul > li > ul > li > a:hover{color:#014099;} #sitemap .top_info{position:absolute;top:0;left:0;width:100%;height:45px;overflow:hidden;z-index:10;border-bottom:1px solid #ddd} #sitemap .top_info a{display:inline-block;width:50%;height:45px;float:left;background:#f8f8f8;text-align:center;color:#666;line-height:45px} #sitemap.open{display:block;right:0;} .header.stm-hd{background:#fff;} .header.stm-hd .logo{background-image:url(../img/logo.svg)} .header.stm-hd .nav{display:none;} .header.stm-hd .lang{display:none;} .scr{overflow-y:hidden;} /* footer */ #footer{clear:both;background-color:#262626;overflow:hidden} #footer .foot_wrap{position:relative;max-width:1200px;margin:0 auto;padding-top:25px} #footer .foot_menu{width:100%;position:relative} .foot_menu li{display:inline-block;float:left;position:relative} .foot_menu li a{font-size:15px;color:#fff;padding:5px 15px 0 0;margin-left:15px} .foot_menu li a:before{content:'';position:absolute;left:0px;top:5px;width:1px;height:15px;background:#444} .foot_menu li:first-child a:before{display:none} .foot_menu li:first-child a{margin:0} .foot_menu li a:hover{text-decoration:underline} .copyright{float:left;width:100%;padding:22px 0 70px 0px} .copyright address{font-size:15px} .foot_sns{position:absolute;top:25px;right:0} .foot_sns a{float:left;display:inline-block;width:20px;height:18px;background:url(../img/icon_sns_common.png) no-repeat;vertical-align:middle;margin-left:15px} .foot_sns a:first-child{ background-position:0 0;margin-left:0} .foot_sns a:nth-child(2){ background-position:-20px 0} .foot_sns a:nth-child(3){ background-position:-40px 0} #top_btn{display:none;position:fixed;bottom:40px;right:50px} #top_btn a{display:block;width:50px;height:50px;line-height:50px;background:#83868d url(../img/icon_gotop.png) center top no-repeat;border-radius:50%} /* contents */ #contents_wrap{margin:0 auto;} .contents {width: 100%; margin: 0 auto; word-break: keep-all;} .contents .subc_title {margin-bottom: 30px; font-size: 50px; font-weight: 700; color: #111; line-height: 1.3;} /**************************** responsive ****************************/ /****** tablet nav ******/ @media (max-width:1028px){ /* layout */ html{font-size:14px} /* header */ .header .logo{left:20px} .btn_menu,.btn_menu.map{right:20px} .btn_menu{color:#222} .header_info{display:none;right:80px} /* sitemap */ #sitemap .top_info{display:block} #sitemap{background:rgba(0,0,0,0.5)} #sitemap > ul > li{width:100%; float:none;margin:0 0 30px} #sitemap > ul > li h2{color:#014099} #sitemap > ul > li > ul > li{height:46px;overflow:hidden;padding:10px 0;margin:0;border-bottom: 1px solid #ddd} #sitemap > ul > li > ul > li.m-open{height:auto} #sitemap > ul > li > ul > li > h3 > a{display:block;background: #fff} #sitemap > ul{padding:20px;background:#fff;position:absolute;right:0;top:45px;width:100%} /* visual */ .visualList .txtBox{width:75%;left:0;right:0;margin:0 auto;top:35%} .visualList .txtBox .txt1{padding-bottom:20px} .visualList .txtBox .txt2{font-size:50px;line-height:60px} .visualList .txtBox .txt3{width:100%} .visualList video{width:100%;height:100% !important;object-fit: cover} .mouse {display:none;} /* banner */ .banner_img .img_wrap>img {width:100%;} /* gallery */ #gallery .galleryList .swiper-slide{height:250px} /*scroll_title*/ #scroll_title{padding:50px 10px 50px 10px; margin:0 auto;} #scroll_title .scroll_title_cont {font-size:28px;} #scroll_title .scroll_title_cont span {font-size:32px;} /*sub*/ .sub-depth-wrap{margin-top:0} .sub-depth-1{position:absolute;bottom:0;top:auto !Important;background:none} .sub-depth-1 li.active a{text-align:left;padding-left:20px;line-height:50px;background:#254ca4 url(../img/icon_select_arrow.png) center right no-repeat;transition:none} .sub-depth-2{position:absolute;top:0px;width:100%;left:0;z-index:99;background:#fff;display:none} .sub-depth-2 a{width:100%;display:block;margin:0;background:#f5f5f5;color:#222;line-height:45px;border-bottom:1px solid #ddd;text-align:left;padding-left:20px} .sub-depth-1 li{width:100% !important} .sub-depth-1 li.active a{display:block} .sub-depth-1 li a{font-size:18px;display:none} .sub-depth-2{display:none} /* contents */ #contents_wrap{max-width:100%; margin:0} /* footer */ #footer{padding:0 20px 20px 20px} .foot_sns{position:static;margin:0 auto} } @media (max-width:768px) { /******* mobile and tablet ******/ /* layout */ html{font-size:14px;} /* header */ .header{height: 7rem;} .header .logo{left:20px} .btn_menu,.btn_menu.map{right:20px} .btn_menu{color:#222} .header_info{display:none;right:80px} .menu{display:none} /* sitemap */ #sitemap {margin:0;} #sitemap .top_info{display:none;} #sitemap > ul > li{width:100%; float:none;margin:0 0 30px} #sitemap > ul > li h2{color:#078AD8; font-weight:bold;} #sitemap > ul > li > ul > li{padding:10px 0;margin:0;border-bottom: 1px solid #ddd} #sitemap > ul > li > ul > li.m-open{height:auto} #sitemap > ul > li > ul > li > h3 > a{display:block;background: #fff} #sitemap > ul{max-width:500px;padding:20px;background:#fff;position:absolute;right:0;top:0px;width:100%;height: 100vh;} /* visual */ .visualList .txtBox{width:75%;left:0;right:0;margin:0 auto;top:35%} .visualList .txtBox .txt1{display:none} .visualList .txtBox .txt2{font-size:32px;line-height:42px} .visualList .txtBox .txt3{width:100%;font-size:16px} .visualList video{width:100%;height:100% !important;object-fit: cover} .mouse{display:none} .center-it .caption{font-size:13px;} /*scroll_title*/ #scroll_title {padding:50px 10px 50px 10px; margin:0 auto;} #scroll_title .scroll_title_cont {font-size:22px;} #scroll_title .scroll_title_cont span {font-size:25px;} /* common */ .main_tit h3{font-size:20px} .main_tit p{font-size:14px} /* banner */ .section_banner {padding: 20px 10px 15px 10px;} .main_tit .banner_img{display: block;} .banner_img .img_wrap>img {height:auto;} .main_tit .banner_img .img_wrap {overflow: hidden; display: flex; justify-content: center; align-items: center; height: 230px;} .banner_img div.b_txt p{margin-top: 50px; font-size: 20px; white-space: normal;font-weight: 500;} .banner_img div.b_txt {padding: 55px 35px; text-align: center;} .main_tit .title_st2 {margin-top: 5px;font-size: 28px} .main_tit .title_st3 {margin:0px;} /* gallery */ #gallery .galleryList .swiper-slide{height:250px} /* business */ .section_business{display: block; padding: 0px 20px 70px 20px; border-top: none;} .section_business .business_le .business_title {width: 100%; text-align: center;} .section_business .business_btn {width: 100%; margin-top: 80px;} .section_business .business_btn li {padding:0;} .section_business .txt_box {width:50%;} .section_business .txt_box .bt_txt p {font-size:18px;} /*system*/ .section_system{display: block; padding: 70px 20px; border-top: none; background: #f2f2f2;} .section_system .system_title{width: 100%; text-align: center;} .section_system .arrow{justify-content: center;} .section_system .arrow span{background: #fff;} .section_system .system_slide {margin-top: 30px;} .section_system .system_slide div {text-align: center;} .section_system .s_tit {font-size: 18px;} /* board */ #section_board{display:inherit;padding:50px 20px} #section_board > div{width:100%;margin-bottom:30px} #section_board > div h3{font-size:20px} /* sub_visual */ #sub_bg .subv_top .tit {padding-left: 50px;} .subv_top .bnr h1 {font-size:35px;} .subv_top .bnr p {font-size:16px;} #sub_bg .subv_top .bnr {height: 400px; margin-bottom: 50px;} .sub-depth-wrap{margin-top:0} .sub-depth-1{position:absolute;bottom:0;top:auto !Important;background:none} .sub-depth-1 li.active a{text-align:left;padding-left:20px;line-height:50px;background:#254ca4 url(../img/icon_select_arrow.png) center right no-repeat;transition:none} .sub-depth-2{position:absolute;top:0px;width:100%;left:0;z-index:99;background:#fff;display:none} .sub-depth-2 a{width:100%;display:block;margin:0;background:#f5f5f5;color:#222;line-height:45px;border-bottom:1px solid #ddd;text-align:left;padding-left:20px} .sub-depth-1 li{width:100% !important} .sub-depth-1 li.active a{display:block} .sub-depth-1 li a{font-size:18px;display:none} /* contents */ #contents_wrap{max-width:100%; margin:0} /* footer */ #footer{padding:0 20px 20px 20px} .foot_sns{position:static;margin:0 auto} /* contents */ .contents .subc_title {font-size:28px;} #section_clients{margin-top : 100px;} .clients_top li img {width: 200px;} .clients_btm li img {width: 200px;} } @media (max-width:480px) { /******* mobile ******/ /* sub_visual */ #sub_bg {max-width: 100%; overflow: hidden;} /* sub_visual *//* banner */ .main_tit .title_st1 {margin-top:30px; font-size:20px;} .main_tit .title_st2 {margin-top:5px;} .main_tit .title_st3 { margin: 10px auto; width:90%;} .section_banner .main_tit .banner_txt {margin-bottom: 45px;} /* sub_visual */ .subv_top .bnr h1 {font-size:35px;} .sys_bnr p {font-size:16px;} /*business*/ .section_business .business_btn {margin-top:40px;} .section_business .business_btn li {display: block;} .section_business .txt_box {width: 100%; margin-bottom: 30px; text-align: center; flex-direction: column-reverse;} .section_business .txt_box .hash {flex-direction: row; justify-content: center; margin-top: 20px;} .section_business .business_re>img {width:100%;} .section_business .business_btn>li+li {padding-top: 0; border-top: none;} /*system*/ .section_system {display: block; padding: 40px 20px; border-top: none;} /*sub_top img*/ #sub_bg {min-height: 400px;} #sub_bg .subv_top .bnr {margin-bottom: 70px;} #sub_bg .subv_top .tit {padding-left:20px;} .subv_top .bnr h1 {font-size:35px;} .subv_top .bnr p {font-size:16px;} /* contents */ .contents {margin-top:0;} .contents .subc_title {font-size:22px;} /*clients*/ .clients_box {width:100%;} .clients_box ul li { overflow: initial;} .clients_top li img {width: 160px;} .clients_btm li img {width: 160px;} .clients_logo {min-width:200px; object-fit: contain;} .clients_top {gap: 20px;} .clients_btm {gap: 20px;} /*partner*/ .partner .sub_titbox h2{color:#000;} }