/****************************** sub_style.css - 서브 css ******************************/ @charset "UTF-8"; /* greeting font */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); /* * { font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; } */ /* page tab: h4 font */ /* BEFORE */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap'); /* font-family: 'Playfair Display', serif; */ /* AFTER: pretenard */ /*---------- 서브 공통 ----------*/ /* .depth_wrap {display: none;} */ .sub_visual {width: 100%;height: 700px;position: relative;padding-top: 350px;} .sub_visual1 {background: url(../../img/sub_visual1.png) no-repeat center/ cover;} .sub_visual2 {background: url(../../img/sub_visual2.png) no-repeat center/ cover;} .sub_visual3 {background: url(../../img/sub_visual3.png) no-repeat center/ cover;} .sub_visual .inner {color: #fff;width: 100%;height: 100%; max-width: 1485px; display: flex;flex-direction: column; margin: 0 auto; padding-left: 85px;} .sub_visual .tit {font-size: 72px;margin-bottom: 20px;font-weight: 600;} .page_tit_top{font-size: 30px;font-weight: 600;padding-bottom: 50px;border-bottom: 1px solid #d7d7d7;} .sub_visual .tit::before {display: none;} .sub_visual .sub_nav {font-size: 16px;font-family: 'Play';font-weight: 400;} .sub_visual .sub_nav span {display: inline-block; margin-right: 13px;} .sub_visual .sub_nav span::before {content: "";display: inline-block;margin-right: 13px;width: 3px;height: 3px;background: #fff;border-radius: 50%;vertical-align: middle;} .sub_visual .sub_nav span:first-child::before {display: none;} .depth_wrap {width: 100%;text-align: center;position: absolute;top: 600px;left: 0;z-index: 1;} .depth_wrap:before {content: "";display: block;background: #fff;position: absolute;top: 0;left: 0;width: 980px;height: 100px;z-index: -1;} .depth_wrap .depth_menu {display:flex;justify-content: flex-start;width: 1485px;margin: 0 auto;padding-left: 85px;} .depth_wrap .depth_menu li {margin-right: 50px;font-weight: 600;} .depth_wrap .depth_menu li a {color: #222; line-height: 100px; padding: 38px 0px 35px;} .depth_wrap .depth_menu li.on a{color: #9fc105;border-bottom: 3px solid #9fc105;padding-bottom: 35px;font-weight: 600;} /*---------- 인사말 ----------*/ .page_wrap.greeting {width: 1485px;margin: 285px auto 190px;} .greeting .page_con {margin: 0 auto;} .page_wrap {position: relative;} .page_wrap .page_tit {text-transform: uppercase;font-size: 83px;font-weight: 400;margin: 0;position: absolute;margin-top: -110px;margin-left: 85px;line-height: 0.9;} .greeting .tit_wrap {background: url(../../img/greeting-bg.png) no-repeat center / cover;height: 500px;} .greeting .txt_wrap {width: 100%;z-index: 2;display: flex;margin-top: 75px;} .greeting .txt_wrap div {padding-left: 85px;} .greeting .txt_wrap p {font-size: 20px;line-height: 1.8;font-family: 'Play';font-weight: 400;margin-top: 40px;} .greeting .txt_wrap p:first-child {margin-top: 0px;} .greeting .txt_wrap p strong {font-weight: 600;} /*---------- 연혁 ----------*/ .history {width: 100%;} section#sub_content {width: 1200px;margin: 100px auto 0px;text-align: left;} section#sub_content h3{font-size: 36px;} /* .page_wrap {padding: 150px 0px 130px; position: relative;} */ .page_wrap {width: 1280px;margin: 150px auto 190px;text-align: left;} /* ??? */ .page_tit_top{font-size: 18px;} .page h3.page_tit.font-play {font-size: 36px;} .wrap_1200{height: 100%;} #historyListCon{width: 100%; height: 100%;} /* 콘텐츠 */ .hst_cont{margin-top: 100px;padding-bottom: 130px;position: relative;} .hst_cont:before{content:'';position: absolute;top: 0;left: 50%;width: 1px; height: 85%;background-color: #3d5ca9;z-index:10;} /* .hst_cont:after{content:'';position: absolute;bottom: 0px;left: 50%;width: 10px;height: 10px;margin-left: -5px;background-color: #e73221;border-radius:50%;} */ .hst_row{margin-bottom:50px;} .hst_row:first-child .hst_lst:before, .hst_row:first-child .hst_right:before{top: 0;margin-top: 0;} .hst_row:first-child .hst_lst:after, .hst_row:first-child .hst_right:after{top: 8px;} .hst_lst, .hst_right{position: relative;float: left;width: 50%;padding-right: 78px; padding-bottom: 130px; text-align: right; box-sizing:border-box;} /* .hst_right ul li:before{content:'';position: absolute;top: 144px;right: -8px;width: 16px;height: 16px;margin-top: -8px;background-color: #fff;border: 4px solid #e73221;border-radius:50%;z-index:15; box-sizing:border-box;} .hst_right ul li:after{content:'';position: absolute;top: 143px;right: 8px;width: 40px;height: 1px;background-color: #d9d9d9;} */ .hst_left dt, .hst_right dt{font-size: 36px;color:#444;line-height: 1; font-weight: 600;letter-spacing:-3px} .hst_left dd, .hst_right dd{font-size: 16px; position:relative;} .hst_right{float: right;padding-right: 0;padding-left: 78px;text-align: left; box-sizing:border-box;padding-top: 0px;} .hst_right:before{right: inherit;left: -8px;} .hst_right:after{right: inherit;left: 8px;} .history_year{position: absolute;top: 35%;left: 0;width: 100%;text-align: center;font-size: 200px;color: #f2f3f8; font-weight:800} .history_year.fix{position: fixed;top: 50%;transform:translateY(-100%);} .hst_tab.fix{position: fixed;top: 80px;margin-top: 0;} .hst_section{display: flex;} .hst_left{width: 50%;text-align: right;padding-right: 70px;padding-top: 150px;position: relative;} /*border-bottom 임시배치*/ .hst_left li{padding-bottom: 168px;} .hst_left li dt, .hst_right li dt{font-size: 36px;font-weight: 600;} .hst_left li dd, .hst_right li dd{font-size: 18px} .hst_right{width: 50%;padding-left: 70px;} .hst_right li{padding-bottom: 150px;} .hst_right li:nth-child(3) dd{padding-bottom: 10px;} .hst_section .pd_bottom{padding: 5px 0px 15px 0px;font-weight: 600;} .hst_right li:before{content:"";position: absolute; width: 10px; height: 10px; background-color: #3d5ca9; margin-top: 15px; margin-left: -27px;} .hst_left li:before{content:"";position: absolute; width: 10px; height: 10px; background-color: #3d5ca9; margin-top: 16px; margin-left: 17px;} /*---------- 특허 및 인증 ----------*/ #certificate {width: 100%;} #certificate .certificate_wrap {width: 1200px; margin: 100px auto 0px;} #certificate .con_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100px;padding-bottom: 130px;} #certificate h3{font-size: 36px;} #certificate .con_wrap .con {width: calc((100% / 3) - 20px); margin-bottom: 60px; border: 1px solid #ddd;} #certificate .con_wrap .con img {width: 100%; height: auto;} /* ======================================== PRODUCT ======================================== */ /* 공통: 제품 슬라이드 이미지 */ .pro_swiper {width: 100%;height: 100%;margin-left: auto;margin-right: auto;} .pro_swiper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} .pro_swiper .swiper-slide {background-size: cover;background-position: center;} .pro_mySwiper2 {height: 500px;width: 680px;position: relative !important;overflow: hidden;border: 1px solid #d3d3d3;} .pro_mySwiper {width: 680px;height: 95px;box-sizing: border-box;margin: auto 0;position: absolute !important;top: 725px;left: 0;} .pro_mySwiper .swiper-slide {width: 128px !important;height: 100%;opacity: 0.4;margin-right: 10px;cursor: pointer;border: 1px solid #d3d3d3;} .pro_mySwiper .swiper-slide-thumb-active {opacity: 1;} #product .txt_wrap .right {width: 43%;} #product .txt_wrap .right div:nth-child(1) {display: flex;padding-bottom: 30px;position: relative;} #product .txt_wrap .right div:nth-child(1):after {content: "";display: block;position: absolute;bottom: 0;right: 0%;width: 104%;height: 1px;background: #acacac;} #product .txt_wrap .right div:nth-child(2) {padding: 25px 0 30px;text-align: left;} #product .txt_wrap .right div:nth-child(2) p strong, #product .txt_wrap .bottom > strong, #product.DILOS .txt_wrap .option p strong {margin-bottom: 17px;display: block;font-weight: 600;font-size: 22px;position: relative;} #product .txt_wrap .right div:nth-child(2) p strong:before, #product .txt_wrap .bottom > strong:before, #product.DILOS .txt_wrap .option p strong:before {content: "";display: block;position: absolute;width: 8px;height: 8px;background: #acc82c;top: -5px;left: -10px;} #product .txt_wrap .right div:nth-child(2) p strong:after, #product.DILOS .txt_wrap .option p strong:after {content: "";display: block;position: absolute;width: 2px;height: 2px;background: #222;top: 53px;left: 1px;} #product .txt_wrap .right div:nth-child(2) p span, #product.DILOS .txt_wrap .option p span {display: block; padding-left: 8px;} #product .txt_wrap .right .download {position: relative; border-bottom: 2px solid #a9c623;} #product .txt_wrap .right .download a {font-size: 16px;font-weight: 600;line-height: 65px;display: block;padding: 0px 30px; transition: 0.6s;} /* 구글 icon */ #product .txt_wrap .right .download .material-symbols-outlined {vertical-align: middle; margin-left: 10px; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48;} #product .txt_wrap .right .download:before {content: "";display: block;width: 100%;height: 0px;position: absolute;bottom: 0;left: 0;z-index: -1;transition: 0.6s;background: #a9c623;box-shadow: 3px 3px 9px #a1a1a1;} /* hover */ #product .txt_wrap .right .download:hover:before {height: 100%; transition: 0.6s;} #product .txt_wrap .right .download:hover a {color: #fff; transition: 0.6s;} /**/ #product .txt_wrap .bottom {display: flex;width: 100%; margin-top: 140px;justify-content: space-between;text-align: left;} #product .txt_wrap .bottom > span {padding-left: 10px;} #product .txt_wrap .bottom > span:before {left: 0px;top: -10px;} #product .txt_wrap .bottom .table {font-weight: 400;font-size: 18px;width: 75%;}/*width: 80*/ #product .txt_wrap .bottom .table div {margin-bottom: 35px;}/*bottm: 50*/ #product .txt_wrap .bottom .table div span {font-size: 20px;color: #666;font-weight: 600;margin-bottom: 20px;display: block;}/*bottm: 30*/ #product table {width: 100%;border: 1px solid #bcbcbc;} #product table th, #product table td{background-clip: padding-box;vertical-align: middle;padding: 7px 5px 7px 35px;line-height: 1.4;border: 1px solid #bcbcbc;}/*padding: 15 15 15 35 */ #product th {background: #f8f8f8;width: 35%;} #product td {text-align: center;} /* 제품 : DILOS */ #product.DILOS .txt_wrap .bottom {display: block; margin-top: 100px;} #product.DILOS .txt_wrap .option {width: 100%; margin-top: 50px; text-align: left;} #product.DILOS .txt_wrap .option p {padding-left: 0;} #product {width: 100%; font-family: 'play';} #product .product_wrap {position: relative;width: 1320px;margin: 120px auto 200px;text-align: left;} /* 임시 */ #product .product_wrap:after{position: absolute;top: 125px;left: 50%; content:"";width: 0px;height: 3px;background-color: #0054a7;transition: 0.3s;transform: translateX(-50%);} #product .product_wrap.on:after {width: 220px; transition: width 0.3s;} #product h3{font-size: 40px;font-weight: 700;} .page_tit_top{font-size: 30px;font-weight: 600;padding-bottom: 40px;border-bottom: 1px solid #d7d7d7;} #product .txt_wrap {display: flex;width: 100%;justify-content: space-between;flex-wrap: wrap;} #product .txt_wrap figure {border: 1px solid #c0c0c0} #product .txt_wrap div p {margin-bottom: 25px;font-size: 18px;line-height: 1.3;padding-left: 10px;} /* page 시작 */ .page{text-align: center;} ul.tabs{margin-bottom: 125px;height: 75px;} ul.tabs li{margin-right: 10px; background: none;display: inline-block;cursor: pointer;width: 230px;line-height: 75px;color: #666;font-size: 18px;font-weight: 400;border: 1px solid #acc82c;} ul.tabs li a {display: block;} ul.tabs li.current{font-weight: 600;color: #acc82c;background-color: #acc82c;color: #fff;box-shadow: 3px 3px 6px #b3b3b3;} .tab-content{display: none;} .tab-content.current{display: inherit;} /* page 01 : USE */ #product .page .page_tit{font-size: 40px;font-family: 'Play';font-weight: 600;width: 75%;text-align: left;} /* ======================================== location ======================================== */ /*---------- location ----------*/ #location {width: 100%;} #location .career_wrap , #contact .career_wrap {position: relative;width: 1320px;margin: 125px auto 130px;} /* h3 공통 */ h3{font-size: 35px;font-weight: 700;margin-bottom: 40px;} #location .txt_wrap {margin-top: 50px; font-family: 'Play';} #location h4 {border-bottom: 1px solid #d8d8d8;padding-bottom: 30px;color: #666;font-size: 20px;} #location h4 strong {font-size: 48px;color: #222;font-weight: 600;margin-right: 20px;letter-spacing: -2px;} #location .txt_wrap .txt_bottom {padding-top: 30px;} #location .txt_wrap .txt_bottom p {margin-bottom: 15px;color: #666;} #location .txt_wrap .txt_bottom p i {font-size: 18px;color: #acc82c;vertical-align: middle; margin-right: 20px;} #location .txt_wrap .txt_bottom p span:nth-child(2) {border-right: 1px solid #d7d7d7; padding-right: 25px;} #location .txt_wrap .txt_bottom p span:nth-child(3) {padding-left: 25px;} #location .txt_wrap .txt_bottom p strong {font-weight: 600;margin-right: 20px;width: 100px;display: inline-block;color: #222;} /* ======================================== contact ======================================== */ /*---------- contact ----------*/ #contact .form_wrap {background: #f6f6f6;padding: 45px;} #contact .form_wrap p {font-size: 18px;font-family: play;margin-bottom: 20px;} #contact .form_wrap span {display: inline-block;width: 150px;font-weight: 600;} #contact input[type="text"] {width: 400px;height: 50px;} #contact input[type="text"], textarea {border: 1px solid #d7d7d7;padding-left: 10px;} #contact input[type="submit"] {width: 100%;height: 100%;background: #acc82c;color: #fff;border-radius: 5px;font-weight: 600;font-size: 20px;border: none;} /* Product Name */ #contact .form_wrap p:nth-child(1) input[type="checkbox"] {width: 16px;height: 16px;margin-right: 5px;} #contact .form_wrap p:nth-child(1) label {margin-right: 15px;} /* Qustions */ #contact .form_wrap p:nth-child(5) span {vertical-align: top;} #contact textarea {width: 87%;padding: 10px;resize: none;} /* Inquire */ #contact .form_wrap p:last-child {margin-bottom: 0px;} #contact .form_wrap p:last-child span {vertical-align: top;padding-top: 10px;} #contact p.Inquire {margin: 40px auto 0;width: 150px;height: 55px;}