@charset "UTF-8"; /**:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; }*/ /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } *, *:before, *:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .all_wrap{overflow: hidden;position: relative;} .jarallax {position: relative;z-index: 0;height: 100%;} .jarallax > .jarallax-img {position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;} /* 공통 */ .width{width: 96% !important; max-width: 1300px; margin: 0 auto; position: relative;} .common{padding: 110px 0px;} .title h2{font-size: 4.0rem; font-weight: 500;} .title p{font-size: 1.8rem;} .stitle{text-align: center; margin-bottom: 80px;} .titleM{font-size: 3.4rem; font-weight: 500;} .titleS{font-size: 1.8rem; margin-top: 20px;} .titleL{font-size: 2.8rem; font-weight: 500;} .center{text-align: center;} .left{text-align: left;} .m_br {display:none;} @media all and (max-width: 1024px) { .common{padding: 60px 0px;} .stitle{margin-bottom: 60px;} } #header{width: 100%;background: #fff;border-bottom: 0px solid #eee;position: fixed;top: 0;z-index: 999; transition: 0.3s all;} #header .head_login_wrap{border-bottom: 0px solid #eee;} #header .head_login{display: flex;justify-content: flex-end;padding: 7px 0px;} #header .head_login li{margin-left: 24px;} #header .head_login a{font-size: 14px; font-weight: 400; color: #818080; } /*#header .head_login a::before {content:''; top:50%; left:0; display:inline-block; width:3px; height:3px; background:#353232; border-radius:100%; transform:translateY(-50%);}*/ #header .head_login i{font-size: 20px;} #header.scroll{top:-24px;} #header .head_menu .logo { padding-bottom: 10px; width: 280px;} #header .head_menu{position: relative;display: flex;justify-content: space-between;align-items: center;width: 100%; height: 90px; padding-bottom:15px;} #header .head_menu .main_menu { width: 65%; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; z-index: 9; padding-left:30px; } #header .head_menu .main_menu .dept1 { width: 20%; position: relative; padding: 15px 0px;} #header .head_menu .main_menu .dept1 > a { font-size: 1.9rem; font-weight: 500; } #header .head_menu .main_menu .dept1 > a.active { color: #1e63b0; font-weight: 600; } #header .head_menu .main_menu .dept1 > a.menuon { color: #1e63b0; font-weight: 600; } #header .head_menu .sub_menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; padding-top: 20px; display: none; padding-bottom: 30px;} #header .head_menu .main_menu .dept2 { padding: 12px 0px; } #header .head_menu .main_menu .dept2 a { font-size: 1.6rem; font-weight: 400; display: block;} #header .main_menu .dept2>a:hover, #header .main_menu .dept2>a:active, #header .main_menu .dept2>a.menuon, #header .main_menu .dept2>a:focus { color: #364F6B;font-weight: bold;} #header .menu_bg {background: #fff;width: 100%;height: 0;left: 0;z-index: 1;position: absolute;} /* #mild_head{display: flex;justify-content: space-between;align-items: center;padding: 2rem;position: relative;} #mild_menu{display: flex;z-index: 99;margin-left: auto;} #mild_menu > .dept1 {position: relative;;padding: 1rem 2rem;text-align: center;} #mild_menu > .dept1 > a.active{color: red;font-weight: bold} #mild_menu .sub_menu {position: absolute;top: 100%;left:50%;transform: translateX(-50%);width:100%;padding-top:3rem;display: none} #mild_menu .dept2 {padding: 1rem 0;color: #555} #mild_menu .dept2 > a:hover, #mild_menu .dept2 > a:active, #mild_menu .dept2 > a:focus {font-weight: bold} .menu_bg {background: #fff;width: 100%;height: 0;left: 0;z-index: 1;position: absolute;} */ .menu_open { position: fixed; width: 100%; height: 100vh; background: #fff; top: 0; left: 0; z-index: 999; padding: 55px 50px 50px 50px; display: none; } .menu_open .site_map_wrap h2 { margin-bottom: 150px; display: flex; justify-content: space-between; align-items: center;} .menu_open .site_map_wrap h2 img{ width: 280px; } .menu_open .site_map { display: flex; width: 100%; } .menu_open .site_map .dept1 { width: 20%; margin-right: 40px; } .menu_open .site_map .dept1:last-child { border-right: 0px; } .menu_open .site_map .dept1 > a { font-size: 2.8rem; font-weight: 700; padding-bottom: 30px; border-bottom: 2px solid #eee; display: block; margin-bottom: 30px;} .menu_open .site_map .dept1 > a.active { color: #364F6B; } .menu_open .site_map .dept2 a { font-size: 1.8rem; font-weight:300; position: relative; line-height: 120%; margin-bottom: 30px; display: inline-block; padding-bottom: 3px; } .menu_open .site_map .dept2 a::after { content: ''; width: 0; height: 3px; background: rgba(54, 79, 107, 0.5); position: absolute; bottom: 0; left: 0; transition: 0.3s all; } .menu_open .site_map .dept2 a:hover::after { width: 100%; } .hd_bg { background: #fff; width: 100%; height: 0; left: 0; z-index: 1; position: absolute; } .site_foot{padding-top: 20px;margin-top: 150px; border-top: 2px solid #eee; text-align: center;} #header .menu_bar { z-index: 99; position: relative; } #header .menu_bar span { width: 22px; height: 2px; background: #555; display: block; margin: 6px} #header .menu_bar2 { z-index: 9999; position: relative; } #header .menu_bar2 span:nth-child(1) { display: none; } #header .menu_bar2 span:nth-child(2) { transform: rotate(130deg); } #header .menu_bar2 span:nth-child(3) { transform: rotate(45deg); top: 0px; position: absolute; } #header .menu_bar2 span { width: 22px; height: 2px; background: #555; display: block; margin: 6px} /* 모바일 */ .mobile_head {width: 100%; height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 0px 15px; display: none; position: fixed; background:#fff; z-index: 99; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); } .mobile_head .mobile_logo { width: 150px; } .mobile_head .mobile_logo img { width: 100%; } #mobile_menu { display: none; position: fixed; top: 0; right: -75%; width: 75%; background: #fff; z-index: 1000; height: 100vh; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } #mobile_menu::-webkit-scrollbar{display: none;} #mobile_menu .mob_logo { width: 100%; padding: 0px 20px; height: 70px; background:#fff;display: flex; justify-content: space-between; align-items: center;border-bottom: 3px solid #a8cad4;} #mobile_menu .mob_logo a { width: 100px; } #mobile_menu .mob_logo a img { width: 100%; } #mobile_menu .mobile_close { font-size: 30px; cursor: pointer; color: #333;} #mobile_menu .mob_menu .top_menu {display: flex;justify-content: space-between; align-items: center; padding: 20px 0px;font-size: 17px; margin: 0px 20px; border-bottom: 1px solid #8e8e8e;} #mobile_menu .mob_menu .topmenu.on { color: #fff; } #mobile_menu .mob_menu .sub_menu { padding: 15px 0px; margin: 0px 20px; border-bottom: 1px solid #ccc; background: #fff; visibility: visible; } #mobile_menu .mob_menu .sub_menu a {display: block; color: #333 ;font-size: 15px; padding: 10px; background: #fff;} #mobile_menu .mob_menu_btn{display: flex; padding: 10px 0px; margin: 0px 20px; justify-content: space-between;} #mobile_menu .mob_menu_btn li{width: 49%;} #mobile_menu .mob_menu_btn a{font-size: 17px; background: #ddd;display: flex; height: 50px; justify-content: center; align-items: center;} #mobile_menu .mob_menu_btn a i{font-size: 16px; margin-right: 5px;} .mob_bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 99;} @media screen and ( max-width: 1400px ){ #pcmenu .topmenu { font-size: 16px; } #pcmenu .submenu a { font-size: 14px; } } @media screen and ( max-width: 1024px ){ #header { display: none; } .mobile_head{display: flex;} } /* 메인비주얼 */ .Hfull{max-height: 1000px; overflow: hidden; background:#a5a5a5; } .swiper_visual {display:block;height:100%;margin:0px auto;overflow:hidden;position:relative;} .swiper_visual .swiper-slide {position:relative; height: auto !important;} .swiper_visual .swiper-slide .main_visual img{width: 100%;} .swiper_visual .swiper-pagination-bullet-active {opacity:1;font-size:14px;color:#fff;font-weight:300;} .swiper_visual .swiper-button-prev{left:0px;margin-left:0px;padding-left:3%;width: auto;height:150px;line-height:150px;color: rgba(255, 255, 255, 0.5);} .swiper_visual .swiper-button-next{right:0px;padding-right:3%;margin-right:0;width: auto;height:150px;line-height:150px;color: rgba(255, 255, 255, 0.5);} .swiper-button-prev, .swiper-button-next {transform: translateY(-50%);} .swiper-button-prev p, .swiper-button-next p{font-size:1.6rem; font-family: 'Montserrat';} .swiper-button-prev span.top {width: 4px;background: #fff;height: 35px;display: block;position: absolute;top: 35px;left: 0px;transition: all 0.3s ease;} .swiper-button-prev span.bottom {width: 4px;background: #fff;height: 35px;display: block;position: absolute;top: 70px;left: 0px;transition: all 0.3s ease;} .swiper-button-next span.top {width: 4px;background: #fff;height: 35px;display: block;position: absolute;top: 35px;right: 0px;transition: all 0.3s ease;} .swiper-button-next span.bottom {width: 4px;background: #fff;height: 35px;display: block;position: absolute;top: 70px;right: 0px;transition: all 0.3s ease;} .swiper-button-prev:hover span.top{transform: translate(10px, 6.5px) rotate(45deg);} .swiper-button-prev:hover span.bottom{transform: translate(10px, -6.5px) rotate(-45deg);} .swiper-button-next:hover span.top{transform: translate(-10px, 6.5px) rotate(-45deg);} .swiper-button-next:hover span.bottom{transform: translate(-10px, -6.5px) rotate(45deg);} #thumbPrev{position:absolute;top:0px;left:-200px;width:200px;height:120px;opacity:1;transition: all 0.6s ease; z-index: 2;} #thumbPrev img{width:100%;} #thumbNext{position:absolute;top:0px;right: -200px;width:200px;height:120px;opacity:1;transition: all 0.6s ease; z-index: 2;} #thumbNext img{width:100%;} .pc{display: block !important;} .tab{display: none !important;} .mob{display: none !important;} .swiper-button-prev:after, .swiper-button-next:after{display: none;} .swiper_btn_wrap{display: flex; align-items: center;position: absolute; left: 0; right: 0; bottom: 20%;justify-content: center;} .swiper_visual .swiper-pagination {width: auto;position: initial;} .swiper_visual .swiper-pagination .current{color: #fff; margin-right: 5px;} .swiper_visual .swiper-pagination .total{position: absolute; top: 3px;left: 150px; color: #fff; display: flex; align-items: center;} .swiper-progress-bar {z-index: 1;height: 2px;background:rgb(0,0,0,0.4);overflow:hidden; width: 120px;} .slide_progress-bar{width: 0%;background: #fff;display: block;height: 2px;} .swiper-controllbar{width:30px;height:30px;z-index: 9;color: #fff;cursor:pointer;margin-left: 40px;} .swiper-controllbar-box{position:absolute;top:0px;} .swiper-controllbar-box .auto-stop{width: 30px;height: 30px;background:rgb(255,255,255,0.5);z-index:99;cursor:pointer;border-radius:15px;text-align:center;display: flex;align-items: center; justify-content: center;} .swiper-controllbar-box .auto-stop i{vertical-align: -webkit-baseline-middle;} .swiper-controllbar-box .auto-start{width: 30px;height: 30px;background:rgb(255,255,255,0.5);z-index:99;cursor:pointer;border-radius:15px;text-align:center;display: none;} .swiper-controllbar-box .auto-start i{vertical-align: -webkit-baseline-middle;} /* 메인 텍스트 */ .maintext_box { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 100%; display: flex; justify-content: center; flex-direction: column; } .maintext_box h2 { position: relative; font-size: 2.6rem; font-weight: 600; color: #fff; padding-bottom: 30px; margin-bottom: 30px; text-align: center; text-shadow: 1px 1px 7px #535353;} .maintext_box h3 { font-size: 8.4rem; color: #fff; font-weight: 700; line-height: 120%; text-align: center; text-shadow: 1px 1px 10px #535353;} .maintext_box .banner_link_bx {text-align:center; margin-top:65px;} .maintext_box .banner_link { display:inline-block; padding:10px 37px; font-size: 16.5px; font-weight: 500; letter-spacing: -0.33px; text-shadow: 0 0 6px rgba(0, 0, 0, 0.55); color:#fff; background:rgba(0, 0, 0, 0.15); border:1px solid #d2d2d2; } @media all and (max-width: 1024px){ .pc{display: none !important;} .tab{display: block !important;} .mob{display: none !important;} .pc_br {display:none;} } @media all and (max-width: 600px){ .pc{display: none !important;} .tab{display: none !important;} .mob{display: block !important;} .swiper_visual .swiper-button-prev{display: none;} .swiper_visual .swiper-button-next{display: none;} .maintext_box h2{font-size: 2.2rem;padding-bottom: 15px; margin-bottom: 15px;} .maintext_box h2::after{width: 60px; height: 1px;} .maintext_box h3 br{display: none; font-size: 6.4rem; } .swiper_btn_wrap{bottom: 10%;} .m_br {display:block;} .pc_br {display:none;} } @media all and (max-width: 380px){ .maintext_box h2{padding-top: 80px;} .maintext_box h3 img{width: 250px; margin-bottom: 40px; } } @media all and (min-width: 768px){ .swiper-button-prev:hover #thumbPrev{opacity:1;left:40px;} .swiper-button-next:hover #thumbNext{opacity:1;right: 40px;} } /* banner_sub */ .banner_sub {position:relative;width: min(1200px, calc(100% - 40px)); margin:0 auto; padding: 30px 0;} .banner_sub ul {display:flex; position:absolute; bottom:0px; left:50%; width:100%; z-index:10; transform: translateX(-50%); z-index: 10;} .banner_sub ul li { flex:1; padding:45px 50px 35px; color:#fff; text-shadow: 0 0 6px rgba(0, 0, 0, 0.55); } .banner_sub ul li a{color:#fff} .banner_sub ul li a:hover{background: rgba(0,0,0,0.3); color:#8efdfd; } .banner_sub ul li:nth-of-type(1) {background:url(../img/main_sub_01.png)no-repeat; background-size:cover;} .banner_sub ul li:nth-of-type(2) {background:url(../img/main_sub_02.png)no-repeat; background-size:cover;} .banner_sub ul li:nth-of-type(3) {background:url(../img/main_sub_03.png)no-repeat; background-size:cover;} .banner_sub ul li b { display:block; margin-bottom:35px; text-align:center; font-size:30.5px; font-weight:500; } .banner_sub ul li p { font-size: 17.5px; font-weight: 500; line-height: 1.43; letter-spacing: -0.35px; } @media all and (max-width: 1400px){ .banner_sub {padding:80px 0;} } @media all and (max-width: 1000px){ .banner_sub {padding:30px 0;} .banner_sub ul li {padding:30px 35px 20px;} .banner_sub ul li b {font-size:22px; margin-bottom:20px;} .banner_sub ul li p {font-size:14px;} } @media all and (max-width: 500px){ .banner_sub ul li {padding:20px 15px 15px;} .banner_sub ul li b {font-size:16px; margin-bottom:15px;} .banner_sub ul li p {font-size:13px;} } /* main_product */ .main_product_wrap{overflow: hidden;} .main_product { display: flex; justify-content: space-between; align-items: flex-start; background: #fff;} .products_text { width: 30%; padding: 60px 50px 40px 0px; position: relative; z-index: 3; } .products_text::before { content: ''; position: absolute; width: 300%; height: 100%; top: 0; right: 0; background: linear-gradient(60deg, rgba(248,247,241,1) 0%, rgba(242,246,243,1) 35%, rgba(242,244,245,1) 65%, rgba(252,240,251,1) 100%); border-radius: 10px; z-index: 1; } .products_text::after{content: ''; position: absolute; width: 400%; height: 200%; top: -15px; right: -15px; background: #fff; z-index: 0;} .products_text h2 { font-size: 4.0rem; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; } .products_text p { font-size: 1.8rem; line-height: 120%; color: #666; } .products_list_wrap { width: 68%;} .product_btn{position: relative; display: flex;z-index: 2;margin-top: 40px;} .product_btn .product_prev{width: 50px; height: 50px; border-radius: 50%; margin-right: 20px; background: #bbc1d0; color: #fff; text-align: center; line-height: 50px; font-size: 20px; margin-right: 20px; cursor: pointer;} .product_btn .product_next{width: 50px; height: 50px; border-radius: 50%; background: #bbc1d0; color: #fff; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer;} .product_btn div:hover{background: #434a54; color: #fff; transition: 0.3s all;} .products_list { border-radius: 10px 0px 10px 10px; overflow: hidden; box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.2); position: relative;} .products_list img { width: 100%;} .products_list::after{content: ''; position: absolute; background: rgba(0,0,0,0.2);top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} .products_list a{position: absolute; z-index: 3; top: 0;left: 0; width: 100%; height: 100%; padding: 25px; transition: 0.3s all;} .products_list a p{font-size: 2.8rem; color: #fff; font-weight: 500; margin-bottom: 10px;} .products_list a span{font-size: 1.6rem; color: #fff;} .products_list a:hover{background: rgba(0,0,0,0.3);} @media all and (max-width: 1024px) { .products_text{padding: 45px 0px; margin-bottom: 40px;} .products_list a p{font-size: 2.5rem;} .main_product{flex-direction: column;} .products_text::after{display: none;} .products_text{width: 100%; text-align: center;} .products_list_wrap{width: 100% !important;} .products_text::before{right: -20px;} .products_text p br{display: none;} .products_text p{margin-bottom: 35px;} .product_btn{justify-content: center;} } /* main site_map */ .width_900 {max-width:990px; margin:0 auto;} .site_map_bx {padding:70px 0; background:#f5f5f5;} .site_map_bx ul {display:flex; justify-content:space-between;} .site_map_bx ul li {} .site_map_bx ul li b > a {display:block; margin-bottom:25px; font-size:19px; font-weight:500; color: #161515; } .site_map_bx ul li a {display:block; margin-bottom:20px; font-size:15px; font-weight:400; color:#474646;} .site_map_bx ul li a:hover{ color:#a0a0a0;} @media all and (max-width: 940px) { .width_900 {padding:0 20px;} } @media all and (max-width: 680px) { .site_map_bx {padding:50px 0 30px;} .site_map_bx ul li b > a {margin-bottom:10px; font-size:17px; font-weight:600;} .site_map_bx ul {flex-wrap:wrap;} .site_map_bx ul li {display:flex; flex-direction:column; padding: 0 20px; width:50%; margin-bottom:30px;} .site_map_bx ul li a {margin-bottom:6px; font-size:14px; letter-spacing: -0.02px; color:#707070; } } /* info_page */ .info_page_warp{ margin-top: 10px; margin-bottom: 10px;} .info_page_warp .title{text-align: center;} .info_page_warp .title h2{font-size: 5.0rem; margin-bottom: 30px; color: #5f5c5c; font-weight: 600;} .info_page_warp .title p{font-size: 2.0rem; margin-bottom: 20px; color: #707070; font-weight: 400; line-height: 170%;} .info_page_warp .title p b{font-size: 2.0rem; margin-bottom: 20px; color: #3a9f17; font-weight: 400; line-height: 170%;} .info_page{display: flex;justify-content: space-between;align-items: center;} .info_page .info_box{width: 24%;padding: 6% 0px;} .info_page .info_box:nth-child(1){background: #fff;} .info_page .info_box:nth-child(2){background: #fff;} .info_page .info_box:nth-child(3){background: #fff;} .info_page .info_box h2{font-size: 4.0rem; text-align: center; min-height: 30px; margin-bottom: 40px; color: #364F6B;} .info_page .info_box h3{font-size: 2.2rem; text-align: center; margin-bottom: 20px; color: #555; font-weight: 500;} .info_page .info_box:hover h3{color: #0068b7;} .info_page .info_box p{font-size: 1.72rem; text-align: center; color: #707070; line-height: 170%; font-weight: 400;} .info_page .info_box:hover p{color: #0068b7;} .info_page .info_box:hover h2{-webkit-animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;animation: flip-vertical-left 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;} @-webkit-keyframes flip-vertical-left { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes flip-vertical-left { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @media all and (max-width: 850px) { .info_page_warp .title p{font-size: 1.9rem; font-weight: 500;} .info_page_warp .title p b{font-size: 1.9rem; font-weight: 500;} .info_page{flex-wrap: wrap;} .info_page .info_box{width: 100%;} .info_page .info_box h2{margin-bottom: 20px;} .info_page .info_box h3{margin-bottom: 10px;} } /* company_page */ .company_page_warp{background: url('../img/com_bg.jpg') no-repeat; background-size: cover; height:896px; background-attachment: scroll; background-position: left;} .company_page_warp .title{text-align: center;} .company_page_warp .title h2{font-size: 5.0rem; margin-bottom: 30px; color: #5f5c5c; font-weight: 600;} .company_page_warp .title p{font-size: 1.8rem; margin-bottom: 80px; color: #5f5c5c; font-weight: 400; line-height: 170%;} .company_page{display: flex;justify-content: space-between;align-items: center; column-gap:40px;} .company_page .company_box{flex:1; padding: 4% 0px; width:25%; background-size:contain !important;border-radius: 10px;} .company_page .company_box:nth-child(1){background: url('../img/com_img01_2.png')no-repeat; height:402px; } .company_page .company_box:nth-child(2){background: url('../img/com_img02_2.png')no-repeat; height:402px; } .company_page .company_box:nth-child(3){background: url('../img/com_img03_2.png')no-repeat; height:402px; } .company_page .company_box:nth-child(4){background: url('../img/com_img04.png')no-repeat; height:402px; } .company_page .company_box h2{font-size: 4.0rem; text-align: center; min-height: 30px; margin-bottom: 30px; color: #364F6B;} .company_page .company_box h3{font-size: 2.7rem; text-align: center; margin-top: 5px; margin-bottom: 40px; color: #fff; font-weight: 600; text-shadow: 1px 1px 4px #505050;} .company_page .company_box:hover h3{color: #8efdfd;} .company_page .company_box p{font-size: 1.8rem; text-align: center; color: #fff; line-height: 170%; font-weight: 400; text-shadow: 1px 1px 4px #505050;} .company_page .company_box:hover p{color: #8efdfd;} @-webkit-keyframes flip-vertical-left { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes flip-vertical-left { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @media all and (max-width: 1100px) { .company_page_warp {height:auto;} .company_page {flex-wrap:wrap; gap: 20px; justify-content:center;} .company_page .company_box {flex:none; width:47%; height: 350px; background-size: cover !important;} } @media all and (max-width: 720px) { .company_page .company_box {width:45%; height:250px !important;} .company_page .company_box h3{font-size: 2.1rem; margin-top: 40px; margin-bottom: 20px; letter-spacing: -0.02px;} .company_page .company_box p{font-size: 1.7rem; letter-spacing: -0.05px; line-height: 150%;} } /* gallery_warp */ .gallery_warp .title{text-align: center;} .gallery_warp .title h2{margin-bottom: 60px;} /* notice_warp */ .notice_warp{background: #fff;} .notice_warp .title{text-align: center;} .notice_warp .title h2{font-size: 6.0rem; text-align: center; min-height: 30px; margin-top: 50px; margin-bottom: 20px; color: #030303; font-weight: 600;} .notice_warp .title p{font-size: 2.0rem; margin-bottom: 80px; color: #030303; font-weight: 400; } @media all and (max-width: 768px) { .notice_warp .title h2{font-size: 4.0rem;} .pic_lt .lt_wrap{margin-bottom: 15px; padding: 20px 20px 10px 20px;} .pic_lt .lt_wrap .lt_img{display: none;} .pic_lt .lt_wrap .lt_text_top{flex-direction: column-reverse;} .pic_lt .lt_wrap .lt_text_top .lt_info{flex-direction: row-reverse; min-width: initial; width: 100%; margin-right: 0px; justify-content: flex-end; margin-top: 10px;} .pic_lt .lt_wrap .lt_text_top .lt_info .lt_day{font-size: 1.8rem; font-weight: normal; margin-left: 3px;} } /* 하단 */ #ft{background: #1f4f5a;padding: 30px 0px; width: 100%; text-align: left;} .foot_logo{display: block; text-align: center;margin-bottom: 20px; padding-bottom: 30px; border-bottom: 1px solid #8e8e8e;} .foot_info span{font-size: 1.5rem; color: #ddd; font-weight: 400; text-align: center; line-height: 170%; margin-right: 20px; } #ft .copyright{color: #ccc;} #ft .copyright span{font-size: 1.5rem;} #ft .foot_service{margin-top: 0px; margin-bottom: 17px;} #ft .foot_service a {position:relative; padding-left:10px; font-size: 1.5rem; margin-right: 20px; color: #9e9e9e; font-weight: 600;} #ft .foot_service a::before {content:''; position:absolute; top:50%; left:0; display:inline-block; width:3px; height:3px; background:#fff; border-radius:100%; transform:translateY(-50%);} #ft .foot_row {display:flex; justify-content:space-between; } #ft .family_site {display:flex; align-items:center; justify-content:space-between; width:195px; padding:13px 20px 15px 15px; font-size:15px; border:1px solid #8e8e8e; color:#8e8e8e; cursor:pointer;} #ft .family_site::after {content:''; display:inline-block; width:15px; height:15px; background:url(../img/ico_family_site.png)no-repeat;} @media all and (max-width: 768px) { .foot_info{display: flex; flex-direction: column; align-items: self-start;} .foot_info span{margin: 0px; line-height: 160%;} #ft .foot_row {display:block;} #ft .family_site {margin:20px 0; padding: 10px 15px 10px 10px;} } /* sub_visual */ .sub_visual{width: 100%;height: 400px;background-repeat: no-repeat !important;background-size: cover !important;background-position: center top !important; display: flex; flex-direction: column; align-items: center; justify-content: center;} .sub_visual .sub_top_text{text-align: center; color: #fff; padding-top: 120px;} .sub_visual .sub_top_text h3{font-size: 4.6rem; font-weight: 600; position: relative;} .sub_visual .sub_top_text p{font-size: 2.0rem;font-weight: 800;} @media all and (max-width: 1024px) { .sub_visual{height: 250px;} .sub_visual .sub_top_text{padding-top: 70px;} } /* lnb */ .lnb_wrap{position: relative;} .lnb{background: #fff; border-bottom: 1px solid #ddd;} .lnb .lnb_map{height: 60px; display: flex; align-items: center; border-left: 1px solid #f1f1f1;} .lnb .lnb_map .home{width: 60px; height: 100%;background: #fff;display: flex;justify-content: center;align-items: center;} .lnb .lnb_map .home a{color: #333;} .lnb .lnb_map .home i{font-size: 20px;} .lnb .lnb_map > li{width: 250px; height: 100%;border-right: 1px solid #f1f1f1; padding: 0px 15px;position: relative;} .lnb .lnb_map li.dep a{width: 100%; height: 100%;display: flex;align-items: center; font-size: 14px;} .lnb .lnb_map li.dep a span{width: 100%;display: flex; justify-content: space-between;align-items: center; font-size: 1.7rem; color: #333;} .lnb .lnb_map li.dep a span i{font-size: 16px;} .lnb .lnb_map li.dep ul{display: none;position: absolute;left: 0; top: 61px;width: 100%;z-index: 10;} .lnb .lnb_map li.dep ul li{width: 100%; background: #f9f9f9; border-bottom: 1px solid #fff;} .lnb .lnb_map li.dep ul li a{padding: 15px 15px;font-size: 1.6rem;} .lnb .lnb_map li.dep ul li a:hover{background: #364F6B; color: #fff;transition: 0.3s all;} .lnb .lnb_map li.dep ul li a.on{background: #f1f1f1;} @media screen and (max-width:1400px) { .lnb .lnb_map{width: 100% !important;} } @media screen and (max-width:900px){ .lnb .lnb_map{height: 55px;} .lnb .lnb_map .home i{font-size: 16px;} .lnb .lnb_map li.dep ul{top: 56px;} } @media screen and (max-width:600px){ .lnb .lnb_map{height: 50px;} .lnb .lnb_map .home{width: 12%;} .lnb .lnb_map li{width: 44%;} .lnb .lnb_map li:last-child{width: 44%;} .lnb .lnb_map li.dep ul{top: 51px;} .lnb .lnb_map li.dep a{font-size: 12.5px;} .lnb .lnb_map li.dep ul li a{font-size: 12.5px;} } /* 인사말 */ .greeting_wrap{display: flex; align-items: flex-start; justify-content: space-between;} .greeting_wrap .greeting_text{width: 45%;} .greeting_wrap .greeting_text h2{color: #333; font-weight: 500; font-size: 2.6rem; margin-bottom: 30px;} .greeting_wrap .greeting_text p{font-size: 1.7rem; color: #333; line-height: 170%;} .greeting_wrap .greeting_text p:last-child{margin-top: 20px;} .greeting_wrap .greeting_text h3{font-size: 2.2rem; color: #333; font-weight: 500; line-height: 170%; margin-top: 20px;} .greeting_wrap .greeting_img{width: 52%;} .greeting_wrap .greeting_img img{width: 100%;} .greeting_info{margin-top: 100px; border-top: 3px solid #3774a9; display: flex; flex-wrap: wrap;} .greeting_info li{width: 50%; display: flex; min-height: 60px; border-bottom: 1px solid #eee;} .greeting_info li:last-child{width: 100%;} .greeting_info li p{min-width: 180px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;} .greeting_info li span{width: 100%; padding-left: 15px; display: flex; align-items: center; font-size: 1.8rem; color: #333;} @media screen and (max-width:1024px) { .greeting_wrap .greeting_text h2{margin-bottom: 30px;} } @media screen and (max-width:950px) { .greeting_wrap{flex-direction: column;} .greeting_wrap .greeting_text{width: 100%; margin-bottom: 50px;} .greeting_wrap .greeting_text p:last-child{margin-top: 15px;} .greeting_wrap .greeting_img{width: 100%;} } @media screen and (max-width:768px) { .greeting_info{margin-top: 60px;} .greeting_info li p{min-width: 140px;} .greeting_info li{width: 100%;} } /* 서브이미지 */ .sub_wrap{display: flex; align-items: flex-start; justify-content: center;} .sub_wrap .organ_img{width: 1138px; } .sub_wrap .organ_img img{width: 100%;} .sub_wrap .ci_img{width: 1038px; } .sub_wrap .ci_img img{width: 100%;} .sub_wrap .rnd_img{width: 1100px; margin-top: -40px; margin-bottom: 50px; } .sub_wrap .rnd_img img{width: 100%;} /* 연혁 */ .history_circle{width: 120px; height: 120px; background: #222;border-radius: 50%;color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-bottom: 80px;} .history_circle p{text-align: center; font-size: 1.8rem;} .history_wrap{position: relative;} .history_wrap .history_line{position: absolute; width: 1px; height: 100%; background: #ccc; left: 0; right: 0; margin: 0 auto;} .history_left{ width: 50%; text-align: right; position: relative; padding-right: 50px; margin-bottom: 40px;} .history_left img{ width: 100%; margin-top: 20px;} .history_left h2{font-size: 2.2rem; margin-bottom: 15px; font-weight: 500;} .history_left p{ font-size: 1.6rem; line-height: 130%;} .history_right{width: 50%; margin: 0 0 0 auto; position: relative; padding-left: 50px; margin-bottom: 40px;} .history_right img{ width: 100%; margin-top: 20px;} .history_right h2{font-size: 2.2rem; margin-bottom: 15px; font-weight: 500;} .history_right p{ font-size: 1.6rem; line-height: 130%;} .history_left::after{content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #364F6B; right: -8px; top: 0;} .history_right::after{content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #364F6B; left: -8px; top: 0;} @media screen and (max-width:950px) { .history_circle{margin-bottom: 60px;} } @media screen and (max-width:850px) { .history_wrap .history_line{display: none;} .history_left{width: 100%; padding-left: 30px; padding-right: 0px;text-align: left;} .history_right{width: 100%; padding-left: 30px; padding-right: 0px;} .history_left::after{right: initial; left: -8px;} .history_box{padding-bottom: 30px; border-bottom: 1px dotted #ccc; margin-bottom: 30px;} .history_box:last-child{border-bottom: 0px;} .history_box::after{left: 0px; } } /* 오시는 길 */ .map_wrap{width: 100%; position: relative;} .root_daum_roughmap{width: 100% !important; height: 100%;} .root_daum_roughmap .wrap_controllers{display: none;} .map_wrap .map_company{position: absolute; z-index: 3; right: 0; bottom: -67px; background: #f9f9f9; padding: 20px 20px;} .map_wrap .map_company h2{padding-bottom: 6px; border-bottom: 1px solid #ccc;} .map_wrap .map_company h2 img{width: 110px; } .map_wrap .map_company ul{display: flex; margin-top: 20px;} .map_wrap .map_company ul li{display: flex; align-items: center; font-size: 1.6rem;} .map_wrap .map_company ul li:first-child{margin-right: 50px;} .map_wrap .map_company ul li .feather{margin-right: 10px;} /* 맵버튼 */ .map_btn{margin-top: 160px; text-align: center; display: flex; justify-content: center;} .map_btn a{display: flex; align-items: center; justify-content: center; width: 250px; height: 55px; font-size: 2.0rem; color: #fff;} .map_btn a > i{font-size: 30px; margin-right: 10px;} .map_btn a:first-child{border: 1px solid #00c63b; background:#00c63b; margin-right: 15px;} .map_btn a:last-child{border: 1px solid #f9e200; background: #f9e200; color: #3d1d1c;} /* 교통 */ .visit_wrap{margin-top: 100px;} .visit_wrap .visit_box{display: flex;justify-content: space-between; align-items: flex-start; padding-bottom: 40px; border-bottom: 1px solid #ccc; margin-bottom: 40px;} .visit_wrap .visit_box:last-of-type{margin-bottom: 0px; padding-bottom: 0px; border-bottom: 0px;} .visit_wrap .visit_box h3{display: flex; align-items: center; font-size: 2.8rem; width: 30%;} .visit_wrap .visit_box h3 i{width: 40px; height: 40px; border-radius: 7px; background: #525e75; color: #fff; text-align: center; line-height: 40px; position: relative; z-index: 2; margin-right: 15px;} .visit_wrap .visit_box ul{width: 70%;} .visit_wrap .visit_box ul li{font-size: 1.8rem; line-height: 130%; margin-top: 20px;} .visit_wrap .visit_box ul li:first-of-type{margin-top: 0px;} .visit_wrap .visit_box ul li span{display: inline-block; width: 60px; height: 30px; line-height: 30px;text-align: center; background:#525e75; color: #fff; border-radius: 3px; margin-right: 10px; font-size: 14px;} .visit_wrap .visit_box ul li span.bus1{background: #BDD2B6;} .visit_wrap .visit_box ul li span.bus2{background: #A2B29F;} .visit_wrap .visit_box ul li span.bus3{background: #798777;} .visit_wrap .visit_box ul li span.way1{background: #FFD36E;} .visit_wrap .visit_box ul li span.way2{background: #4C657E;} .visit_wrap .visit_box ul li span.way3{background: #F29696;} .visit_wrap .visit_box ul li span.way4{background: #B7C4CF;} @media all and (max-width: 1024px) { } @media all and (max-width: 850px) { .map_wrap .map_company{position: relative; bottom: initial;} .map_btn{margin-top: 10px;} .visit_wrap .visit_box{flex-direction: column;} .visit_wrap .visit_box h3{width: 100%; margin-bottom: 20px;} .visit_wrap .visit_box ul li{margin-top: 12px;} .visit_wrap .visit_box ul{width: 100%; padding-left: 55px;} } @media all and (max-width: 768px) { .map_wrap .map_company ul{flex-direction: column;} .map_wrap .map_company ul li:first-child{margin-right: 0px; margin-bottom: 20px;} .map_btn a{width: 50%;} .map_btn a:first-child{margin-right: 10px;} } /* 페이지 네비, 게시판 등 */ /* .bo_cate_link{border-radius: 30px;} .bo_v_topcon .bo_v_cate{border-radius: 30px;} */ #bo_gall .is_notice{border-radius: 30px;} .quick_banner{z-index: 99; right: 20px; bottom: 20px; position: fixed;animation: quickBounce .8s infinite alternate;} @keyframes quickBounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } @keyframes quickBounce2 { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } #top_btn{width: 45px; height: 45px;border: none; background: #fff; border-radius: 50%;box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); transition: 0.3s all;} #top_btn span{font-size: 14px; font-weight: bold;} #top_btn:hover{background: #eee; color: #000;} .floating_menu { width: 45px; height: 45px; border-radius: 50%; background: #07a28c; position: fixed; bottom: 52px; z-index: 99; } .floating_menu input { position: absolute; width: 45px; height: 45px; margin: 0; opacity: 0; cursor: pointer; } .floating_menu input:checked ~ .floating_plus { transform: rotate(135deg); } .floating_menu input:checked ~ .floating_nav li:nth-child(1) { transform: translatey(-52px); opacity: 1; } .floating_menu input:checked ~ .floating_nav li:nth-child(2) { transform: translatey(-104px); opacity: 1; } .floating_menu input:checked ~ .floating_nav li:nth-child(3) { transform: translatey(-156px); opacity: 1; } .floating_menu input:checked ~ .floating_nav li:nth-child(4) { transform: translatey(-208px); opacity: 1; } .floating_menu input ~ .floating_plus { transform: rotate(0); } .floating_menu > .floating_plus { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; font-size: 20px; color: #FFFFFF; background:#07a28c; border-radius: 50%; transform: rotate(0); transition: all 0.5s ease; pointer-events: none; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); } .floating_menu > .floating_plus i { line-height: normal !important; } .floating_menu > .floating_nav { display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .floating_nav li { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 50%; background: #fff; cursor: pointer; position: absolute; transition: all 0.5s ease; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); opacity: 0; } .floating_menu > .floating_nav li a i { font-size: 20px; color: #222; } .floating_menu > .floating_nav li a i.xi-kakaotalk { font-size: 28px; margin-top: 3px; } .pg_wrap{margin-top: 60px; display: flex; justify-content: center; width: 100%;} .pg_wrap .pg{display: flex;} .pg_page{width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0 2px; background-color: none; border: 1px solid #ccc;} .pg_current{border: 1px solid #8e8e8e; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0 2px; background: none;} @media all and (max-width: 1400px) { html{font-size: 55% !important;} } /* 갤러리 */ @media all and (max-width: 1024px) { /*.gall_row .col-gn-4{width: 33.33333%;}*/ .gall_row .col-gn-5{width: 25%;} } @media all and (max-width: 850px) { .gall_row .col-gn-4, .gall_row .col-gn-3, .gall_row .col-gn-5{width: 50%;} #bo_cate li{width: 25%; margin-bottom: 10px;} #bo_cate ul{flex-wrap: wrap;} #bo_gall .gall_img {width:auto;} #bo_gall .gall_img img {object-fit:none;} .gall_row .col-gn-4 {width:auto !important;} } @media all and (max-width: 600px) { .gall_row .col-gn-4, .gall_row .col-gn-3, .gall_row .col-gn-5, .gall_row .col-gn-2{width: 100%;} } @media all and (max-width: 600px) { .gall_row .col-gn-4 {width:50% !important;} #bo_gall .gall_img {height:auto !important;} } /* 리스트 */ @media all and (max-width: 850px) { .prdt_list .prdt_top th.psize, .prdt_list .prdt_table .psize{display: none;} .prdt_list .prdt_top th.pcolor, .prdt_list .prdt_table .pcolor{display: none;} } @media all and (max-width: 650px) { .prdt_list .prdt_top th.num{min-width: 60px;} .prdt_list .prdt_top th.pintro, .prdt_list .prdt_table .pintro{display: none;} .prdt_list .prdt_top th.pname{width: 100%;} .prdt_list .prdt_table .pname{text-align: center;} } /* 애니메이션 */ /* tab */ .tab_cate {margin: -40px 0 60px 0px;} .tab_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .tab_cate ul {display: flex; justify-content: center;} .tab_cate ul:after {display:block;visibility:hidden;clear:both;content:""} .tab_cate li {width: 15%; text-align: center; padding: 0px 3px; } .tab_cate a {display:block; height: 45px; font-size:1.1em; font-weight: 400; line-height: 45px;border-radius:0px;border:1px solid #4eaabe;color:#064958;} .tab_cate a:focus, #bo_cate a:active {text-decoration:none;background:#4eaabe;color:#fff} .tab_cate a:hover{background:#4eaabe;color:#fff} .tab_cate #bo_cate_on {z-index:2;background:#4eaabe;color:#fff;font-weight:bold;} .td_subject img {margin-left:5px} @media all and (max-width: 650px) { .tab_cate li {width: 16%; text-align: center; padding: 0px 3px; } .tab_cate a {display:block; font-size:0.95em; letter-spacing:-0.5px; font-weight: 400; line-height: 45px;border-radius:0px;border:1px solid #4eaabe;color:#064958;} .tab_cate a:focus, #bo_cate a:active {text-decoration:none;background:#4eaabe;color:#fff} .tab_cate a:hover{background:#4eaabe;color:#fff} .tab_cate #bo_cate_on {z-index:2;background:#4eaabe;color:#fff;font-weight:bold;} } .tab_cate2 {margin: -40px 0 60px 0px;} .tab_cate2 h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .tab_cate2 ul {display: flex; justify-content: center;} .tab_cate2 ul:after {display:block;visibility:hidden;clear:both;content:""} .tab_cate2 li {width: 20%; text-align: center; padding: 0px 3px; } .tab_cate2 a {display:block; height: 45px; font-size:1.1em; font-weight: 400; line-height: 45px;border-radius:0px;border:1px solid #4eaabe;color:#064958;} .tab_cate2 a:focus, #bo_cate a:active {text-decoration:none;background:#4eaabe;color:#fff} .tab_cate2 a:hover{background:#4eaabe;color:#fff} .tab_cate2 #bo_cate_on {z-index:2;background:#4eaabe;color:#fff;font-weight:bold;} .td_subject img {margin-left:5px} @media all and (max-width: 650px) { .tab_cate2 li {width: 33%; text-align: center; padding: 10px 3px 0px 3px; } .tab_cate2 a {display:block; font-size:0.95em; letter-spacing:-0.5px; font-weight: 400; line-height: 45px;border-radius:0px;border:1px solid #4eaabe;color:#064958;} .tab_cate2 a:focus, #bo_cate a:active {text-decoration:none;background:#4eaabe;color:#fff} .tab_cate2 a:hover{background:#4eaabe;color:#fff} .tab_cate2 #bo_cate_on {z-index:2;background:#4eaabe;color:#fff;font-weight:bold;} } @media all and (max-width: 320px) { .tab_cate2 li {width: 33%; text-align: center; padding: 10px 3px 0px 3px; } .tab_cate2 a {display:block; font-size:0.95em; letter-spacing:-0.5px; font-weight: 400; line-height: 45px;border-radius:0px;border:1px solid #4eaabe;color:#064958;} .tab_cate2 a:focus, #bo_cate a:active {text-decoration:none;background:#4eaabe;color:#fff} .tab_cate2 a:hover{background:#4eaabe;color:#fff} .tab_cate2 #bo_cate_on {z-index:2;background:#4eaabe;color:#fff;font-weight:bold;} } /* 사업분야 */ .hezron_wrap .container { max-width: 1212px; margin: 0 auto; font-family: "Noto Sans KR", sans-serif; } .hezron_wrap .container_title { width: 100%; margin-bottom: 25px; border-bottom: 2px solid #0075a9; } .hezron_wrap .container_title h3 { line-height: 1.4; padding-bottom: 10px; color: #2d2c2c; font-size: 22px; font-weight: 600; } .hezron_wrap .container_text { width: 100%; margin-bottom: 0px; } .hezron_wrap .container_text p { padding-left: 31px; line-height: 1.6; color: #2d2c2c; font-size: 17px; } .hezron_wrap .title_blue { padding-left: 31px; line-height: 1.6; color: #0068b7; font-size: 20px; font-weight: 500; padding-top: 40px; padding-bottom: 10px; } .hezron_wrap .container_01 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 20px 32px 12px 47px; background-color: #e7f1f3; } .hezron_wrap .container_01 .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hezron_wrap .container_01 .title h3 { margin-bottom: 30px; padding-top: 5px; color: #0e294a; font-size: 20px; font-weight: 500; } .hezron_wrap .container_01 .title .img1 { margin-bottom: 35px; } .hezron_wrap .container_01 .title .img2 { margin-bottom: 50px; } .hezron_wrap .container_01 .title a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 217px; height: 49px; gap: 14px; color: #0e294a; font-size: 16px; font-weight: 500; background-color: #fff; border: 2px solid #b4c7d6; border-radius: 10px; } .hezron_wrap .container_01 .video { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hezron_wrap .container_01 .video .video_sorce { width:500px; height:300px; } .hezron_wrap .container_01 .video .video_sorce iframe {width:100%; height:100%;} .hezron_wrap .container_01 .video p { margin-top: 4px; color: #2d2c2c; font-size: 17px; } .hezron_wrap .container_01 .video_img {display:flex;} .hezron_wrap .container_01 .video_img_item { width: 265px; height: 281px; margin-top: 10px;} .hezron_wrap .container_01 .video_img_item img {width: 100%; object-fit: contain;} .hezron_wrap .container_01 .video_img_item2 { width: 205px; height: 281px; margin-right: 20px; margin-top: 10px;} .hezron_wrap .container_01 .video_img_item3 { width: 265px; height: 281px; margin-right: 20px; margin-top: 10px;} .hezron_wrap .container_01 .video_img_item2 p { margin-top: 8px; margin-left: 20px; color: #2d2c2c; font-size: 17px;} .hezron_wrap .container_02 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 80px 0 80px 0; } .hezron_wrap .container_02 .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hezron_wrap .container_02 .title h3 { line-height: 1.6; margin-bottom: 70px; color: #2d2c2c; font-size: 26px; text-align: center; font-weight: 500; } .hezron_wrap .container_02 .title h3 span { color: #16a477; font-size: 29px; font-weight: 600; } .hezron_wrap .container_02 .img_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; } .hezron_wrap .container_02 .img_wrap > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 25px; } .hezron_wrap .container_02 .img_wrap > div p { color: #7a7777; font-size: 19px; font-weight: 400; } .hezron_wrap .container_03 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 0 0 168px 0; } .hezron_wrap .container_03 .img_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; } .hezron_wrap .container_03 .img_wrap > p { margin-bottom: 50px; padding: 0 40px; line-height: 1.5; color: #2d2c2c; font-size: 17px; font-weight: 300; } .hezron_wrap .container_03 .img_wrap > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; } .hezron_wrap .container_03 .img_wrap > div h6 { display: block; width: 100%; color: #205ea5; font-size: 20px; font-weight: 700; } .hezron_wrap .container_04 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 0 0 88px 0; } .hezron_wrap .container_04 .img_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; } .hezron_wrap .container_04 .img_wrap > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 40px; padding: 20px 20px; } .hezron_wrap .container_04 .img_wrap > ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; width: 100%; } .hezron_wrap .container_04 .img_wrap > ul li h6 { position: relative; padding-left: 21px; color: #2d2c2c; font-size: 19px; font-weight: 500; } .hezron_wrap .container_04 .img_wrap > ul li h6::before { position: absolute; top: 5px; left: 0; content: ""; width: 12px; height: 12px; background-color: #007084; } .hezron_wrap .container_04 .img_wrap > ul li p { position: relative; padding-left: 31px; line-height: 1.6; color: #2d2c2c; font-size: 17px; font-weight: 400; } .hezron_wrap .container_04 .img_wrap > ul li p::before { position: absolute; top: 0; left: 15px; content: "-"; } .hezron_wrap .container_04 .img_wrap > div { padding-top: 25px; } .hezron_wrap .container_05 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 0 0 107px 0; } .hezron_wrap .container_05 .img_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; gap: 50px; } .hezron_wrap .container_05 .img_wrap div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; width: 100%; } .hezron_wrap .container_05 .img_wrap div h6 { width: 100%; color: #205ea5; font-size: 21px; font-weight: 700; text-align: left; } .hezron_wrap .container_05 .img_wrap div > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 20px; } .hezron_wrap .container_05 .img_wrap div > ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .hezron_wrap .container_05 .img_wrap div > ul li p { color: #2d2c2c; font-size: 18px; font-weight: 400; text-align: center; } .hezron_wrap .container_06 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 0 0 1px 0; } .hezron_wrap .container_06 .img_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: flex-start; width: 100%; gap: 18px; margin-bottom: 30px; } .hezron_wrap .container_06 .img_wrap > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 15px; padding: 25px 20px 30px 20px; background-color: #eeeeee; } .hezron_wrap .container_06 .img_wrap > ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 14px; } .hezron_wrap .container_06 .img_wrap > ul li p { color: #2d2c2c; font-size: 18px; font-weight: 400; text-align: center; } .hezron_wrap .container_07 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .hezron_wrap .container_07 table { width: 100%; } .hezron_wrap .container_07 table th, .hezron_wrap .container_07 table td { vertical-align: middle; padding: 15px 0; color: #2d2c2c; font-size: 15px; font-weight: 400; text-align: center; border: 1px solid #b8c0c9; } .hezron_wrap .container_07 table th { background-color: #f8f8f8; } @media screen and (max-width: 1212px) { .hezron_wrap .container { max-width: 100%; } .hezron_wrap .container_04 .img_wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .hezron_wrap .container_05 .img_wrap div > ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 20px; } .hezron_wrap .container_05 .img_wrap div > ul li { gap: 10px; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: calc(50% - 10px); } .hezron_wrap .container_05 .img_wrap div > ul li > img { width: 100%; } .hezron_wrap .container_05 .img_wrap div > ul li p { color: #2d2c2c; font-size: 19px; text-align: center; } .hezron_wrap .container_05 .img_wrap div > ul.custom { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: 100%; } .hezron_wrap .container_05 .img_wrap div > ul.custom li { width: calc(50% - 10px); } .hezron_wrap .video_cont {justify-content:space-between !important;} .hezron_wrap .container_01 .video .video_sorce {width:100% !important;} } .business01_06_list { display: flex !important; flex-direction: column !important; padding: 0 !important; background-color: transparent !important; } .business01_06_list li:first-child { flex-direction: row !important; padding: 25px 20px 30px 20px !important; background-color: #eeeeee !important; } .business01_06_list li:last-child { display: flex !important; flex-direction: column !important; } .business01_06_list p { margin-top: 10px; } .business01_06_list h3 { margin-top: 20px; margin-bottom: -10px; font-size: 18px; font-weight: 500; } @media screen and (max-width: 992px) { .hezron_wrap .container_01 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; padding: 50px 20px 30px 20px; } .hezron_wrap .container_01 .title h3 { margin-bottom: 20px; } .hezron_wrap .container_01 .title .img1 { margin-bottom: 20px; } .hezron_wrap .container_01 .title .img2 { margin-bottom: 30px; } .hezron_wrap .container_01 .title a { width: 100%; height: 45px; gap: 14px; font-size: 16.8px; } .hezron_wrap .container_01 .video { width: 50%; } .hezron_wrap .container_01 .video p { margin-top: 15px; font-size: 14px; } .hezron_wrap .container_02 { padding: 10vw 0 15vw 0; } .hezron_wrap .container_02 .title h3 { margin-bottom: 10vw; font-size: 20px; } .hezron_wrap .container_02 .title h3 span { font-size: 22px; } .hezron_wrap .container_02 .img_wrap { gap: 30px; } .hezron_wrap .container_02 .img_wrap > div { gap: 20px; } .hezron_wrap .container_02 .img_wrap > div p { font-size: 14px; } .hezron_wrap .container_03 { padding: 0 0 15vw 0; } .hezron_wrap .container_03 .img_wrap { gap: 30px; } .hezron_wrap .container_03 .img_wrap > p { margin-bottom: 50px; padding: 0 40px; font-size: 15px; } .hezron_wrap .container_03 .img_wrap > div { gap: 18px; } .hezron_wrap .container_03 .img_wrap > div h6 { font-size: 20px; } .hezron_wrap .container_04 { padding: 0 0 15vw 0; } .hezron_wrap .container_04 .img_wrap { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .hezron_wrap .container_04 .img_wrap > ul { gap: 30px; padding: 0 20px; } .hezron_wrap .container_04 .img_wrap > ul li h6 { padding-left: 21px; font-size: 19px; } .hezron_wrap .container_04 .img_wrap > ul li h6::before { top: 9px; width: 12px; height: 12px; } .hezron_wrap .container_04 .img_wrap > ul li p { padding-left: 31px; font-size: 17px; } .hezron_wrap .container_04 .img_wrap > ul li p::before { left: 15px; } .hezron_wrap .container_04 .img_wrap > div { padding-top: 0; } .hezron_wrap .container_05 { padding: 0 0 15vw 0; } .hezron_wrap .container_05 .img_wrap div > ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; gap: 20px; } .hezron_wrap .container_05 .img_wrap div > ul li { gap: 10px; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: calc(50% - 10px); } .hezron_wrap .container_05 .img_wrap div > ul li > img { width: 100%; } .hezron_wrap .container_05 .img_wrap div > ul li p { font-size: 14px; } .hezron_wrap .container_05 .img_wrap div > ul.custom { -webkit-box-flex: initial; -ms-flex: initial; flex: initial; width: 100%; } .hezron_wrap .container_05 .img_wrap div > ul.custom li { width: calc(50% - 10px); } .hezron_wrap .container_06 { padding: 0 0 10vw 0; } .hezron_wrap .container_06 .img_wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 18px; width: 100%; } .hezron_wrap .container_06 .img_wrap > ul { width: 100%; } .hezron_wrap .container_06 .img_wrap > ul li { gap: 14px; } .hezron_wrap .container_06 .img_wrap > ul li p { font-size: 14px; } .hezron_wrap .container_07 { padding: 0 0 10vw 0; } .hezron_wrap .container_07 table th, .hezron_wrap .container_07 table td { padding: 15px 0; font-size: 14px; } } @media screen and (max-width: 800px) { .tab_cate_ul {flex-wrap:wrap;} .tab_cate_ul li {width:33% !important; margin-top:8px;} } @media screen and (max-width: 900px) { .tab_cate2_ul {flex-wrap:wrap;} .tab_cate2_ul li {width:33% !important; margin-top:8px;} } @media screen and (max-width: 460px) { .tab_cate2_ul {flex-wrap:wrap;} .tab_cate2_ul li {width:50% !important;} } @media screen and (max-width: 768px) { .hezron_wrap .container_title { margin-bottom: 25px; } .hezron_wrap .container_title h3 { padding-bottom: 10px; font-size: 18px; } .hezron_wrap .container_01 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 50px; padding: 50px 20px 30px 20px; } .hezron_wrap .container_01 .title h3 { margin-bottom: 20px; } .hezron_wrap .container_01 .title .img1 { margin-bottom: 20px; } .hezron_wrap .container_01 .title .img2 { margin-bottom: 30px; } .hezron_wrap .container_01 .video_img {flex-direction: column; width:100%; align-items:center; row-gap:20px;} .hezron_wrap .container_01 .video_img_item2 {margin-left: 40px;} .hezron_wrap .container_01 .video_img_item3 {margin-top: 50px;} .hezron_wrap .container_01 .title a { width: 100%; height: 45px; gap: 14px; font-size: 16.8px; } .hezron_wrap .container_01 .video { width: 100%; } .hezron_wrap .container_01 .video p { margin-top: 15px; font-size: 14px; } .hezron_wrap .container_01 .video p { margin-top: 15px; font-size: 14px; } .hezron_wrap .container_02 .title h3 { font-size: 14px; } .hezron_wrap .container_02 .title h3 span { font-size: 18px; } .hezron_wrap .container_02 .img_wrap { gap: 10px; } .hezron_wrap .container_02 .img_wrap > div { gap: 10px; } .hezron_wrap .container_02 .img_wrap > div p { font-size: 14px; } .hezron_wrap .container_03 .img_wrap { gap: 30px; } .hezron_wrap .container_03 .img_wrap > p { margin-bottom: 30px; padding: 0 20px; font-size: 14px; } .hezron_wrap .container_03 .img_wrap > div { gap: 15px; } .hezron_wrap .container_03 .img_wrap > div h6 { font-size: 18px; } .hezron_wrap .container_04 .img_wrap > ul { gap: 30px; padding: 0 20px; } .hezron_wrap .container_04 .img_wrap > ul li h6 { padding-left: 21px; font-size: 16px; } .hezron_wrap .container_04 .img_wrap > ul li h6::before { top: 6px; width: 12px; height: 12px; } .hezron_wrap .container_04 .img_wrap > ul li p { padding-left: 31px; font-size: 14px; } .hezron_wrap .container_04 .img_wrap > ul li p::before { left: 15px; } .hezron_wrap .container_04 .img_wrap > div { padding-top: 0; } .hezron_wrap .container_text p { font-size: 14px; } .hezron_wrap .container_05 .img_wrap div h6 { font-size: 18px; } .hezron_wrap .container_05 .img_wrap div > ul { gap: 10px; } .hezron_wrap .container_05 .img_wrap div > ul li { gap: 10px; width: calc(50% - 5px); } .hezron_wrap .container_05 .img_wrap div > ul.custom li { width: calc(50% - 5px); } .hezron_wrap .container_06 .img_wrap { gap: 15px; } .hezron_wrap .container_06 .img_wrap > ul li { gap: 10px; } .hezron_wrap .container_06 .img_wrap > ul li p { font-size: 14px; } .hezron_wrap .container_07 table th, .hezron_wrap .container_07 table td { padding: 15px 0; font-size: 12px; } .business01_06_list h3 { margin-top: 0px; margin-bottom: 20px; font-size: 16px; font-weight: 500; } .business01_06_list span { margin-top: -20px; margin-bottom: 20px; font-size: 14px; } } @media screen and (max-width: 500px) { .hezron_wrap .container_01 .video .video_sorce {height:195px !important;} }