@charset "utf-8"; /* font */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @font-face { font-family: 'YES24'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/YES24.woff') format('woff'); font-weight: normal; font-style: normal; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); .fa{font: normal normal normal 14px / 1 FontAwesome !important;} a,a:hover,a:focus {text-decoration: none;} ul{list-style: none;} button{background-color: transparent; cursor: pointer;border: none;outline: none;} img{max-width: 100%;border:0; display:block;} h1, h2, h3, h4, h5, h6{padding:0;margin:0;font-family: var(--font-Pretendard);font-size: inherit;} p{padding:0;margin:0;word-break: keep-all;} input{border: none;box-shadow: none;} input:focus{outline: none;} #theme-controller .fixed-top{z-index: 999999;} .modal{z-index: 999999;} .nt-container{max-width: unset !important;width: 100%;} #nt_sidebar_move{display: none;} .blind {width: 1px;height: 1px;overflow: hidden;position: absolute;top: 50%;left: 50%;display: block;text-indent: -9999em;font-size: 0px;line-height: 0;z-index: -1;} .line-br {display: block;} .btn:focus {outline: none;box-shadow: none !important;} :root { --font-Pretendard: "Pretendard Variable", sans-serif; --font-YES24: "YES24"; --font-Poppins: "Poppins", sans-serif; --color-main: #13A293; --color-acc: #0a6a5f; } html, body {font-size: 20px;font-family: var(--font-Pretendard);letter-spacing: -0.038rem;line-height: 1.5;word-break: keep-all;word-wrap: break-word;color:#000;touch-action: auto;overscroll-behavior: auto;text-size-adjust:100%;overflow-x: hidden;} @media all and (max-width: 1024px) { html, body { font-size: 18px; } } /* scroll Bar */ body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-thumb { background-color: var(--color-main); } body::-webkit-scrollbar-track { background-color: #f9f9f9; } /* 공통 css 시작*/ .minner {max-width: 1520px;margin: 0 auto;position: relative;} .cinner {max-width: 1260px;margin: 0 auto;position: relative;} @media all and (max-width: 1600px ){ .minner {margin: 0 50px;} } @media all and (max-width: 1399px){ .minner {margin: 0 30px;} } @media all and (max-width: 1360px){ .cinner {margin: 0 50px;} } @media all and (max-width: 1024px){ .cinner {margin: 0 30px;} } @media all and (max-width: 640px){ .minner, .cinner {margin: 0 20px;} } /* 공통 css 끝 */ /* header 시작 */ #header {width: 100%;height: 116px;border-bottom: 1px solid #ddd;box-sizing: border-box;background: #fff;position: fixed;top: 0;left: 0;z-index: 999;transition: .35s;} #header.hide {display: none;} .header__nav {height: 100%;} .header__nav .nav {display: block;height: 100%;} .header__nav .cinner {display: flex;justify-content: space-between;align-items: center;max-width: 1520px;height: 100%;margin: 0 auto;} .header__nav .header__logo a {display: flex;width: 266px;} .header__nav .header__logo a img {max-width: 100%;} .header__cont {display: flex;align-items: center;height: 100%;} #main-nav {height: 100%;margin-right: 70px;} .main-nav__depth1 {height: 100%;} .main-nav__depth1 .mn-ul1 {display: flex;gap: 0 60px;height: 100%;} .main-nav__depth1 .mn-li1 {position: relative;} .main-nav__depth1 .mn-a1 {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;color: #000;font-size: 1.20em;font-weight: 600;text-align: center;transition: .35s;} .main-nav__depth2 {display: none;max-width: 180px;width: 220%;padding-top: 1px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);z-index: 100;text-align: center;} .main-nav__depth2 .mn-ul2 {width: 100%;border: 1px solid #eee;border-top: 0;} .main-nav__depth2 .mn-li2 {position: relative;} .main-nav__depth2 .mn-li2:not(:last-child) {border-bottom: 1px solid #eee;box-sizing: border-box;} .main-nav__depth2 .mn-a2 {display: block;width: 100%;padding: 15px 16px;box-sizing: border-box;background: #fff;color: #000;font-size: .90em;font-weight: 500;line-height: 1.3;transition: .35s;position: relative;} .main-nav__depth2 .mn-a2:hover {color: var(--color-main);} .main-nav__depth2 .mn-a2.sub-icon::after {content: "\f105";display: block;width: 9px;height: 26px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;font-family: "FontAwesome";position: absolute;top: 0;bottom: 0;right: 10px;margin: auto;} .main-nav__depth3 {display: none;background: #fff;position: absolute;top: 0;left: 100%;z-index: 101;box-shadow: 0 6px 12px rgba(0, 0, 0, .175);-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);} .main-nav__depth3 .mn-li3:not(:last-child) {border-bottom: 1px solid #eee;box-sizing: border-box;} .main-nav__depth3 .mn-a3 {display: block;width: 160px;padding: 15px 16px;color: #000;font-size: .90em;text-align: center;line-height: 1.3;} .main-nav__depth3 .mn-a3:hover {color: var(--color-main);} .header__nav .quick-list {display: flex;gap: 5px;margin-right: 40px;} .header__nav .quick-list > li {} .header__nav .quick-list > li > a {display: block;width: 40px;aspect-ratio: 1 / 1;border-radius: 50px;background: #F5F5F5;} .header__nav .lang {} .header__nav .lang > li {display: inline-block;position:relative} .header__nav .lang > li:not(:last-child) {margin-right: 10px;padding-right: 15px;} .header__nav .lang > li:not(:last-child)::before {content: '';display: block;width: 1px;height: 15px;background: #D9D9D9;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;} .header__nav .lang > li::after {content: '';display: block;width: calc(100% + 2px);height: 3px;background: #000;opacity: 0;} .header__nav .lang > li.active::after {opacity: 1;} .header__nav .lang > li > a {color: #CCC;font-weight: 600;transition: .35s;} .header__nav .lang > li > a:hover {color: #000;} .header__nav .lang > li.active > a {color: #000;} .header__nav .nav__btn {display: none;} .header__nav .nav__btn a {display: flex;align-items: center;width: 40px;height: 29px;position: relative;} .header__nav .nav__btn a::before, .header__nav .nav__btn a::after {content: '';display: block;width: 100%;height: 4px;background: #000;position: absolute;left: 0;right: 0;margin: auto;} .header__nav .nav__btn a::before {top: 0;} .header__nav .nav__btn a::after {bottom: 0;} .header__nav .nav__btn a span{display: block;width: 100%;height: 4px;background: #000;} #header.active {/*background: #fff;*/border-color: #ddd;} #header.active .main-nav__depth1 .mn-a1 {color: #000;} #header.active .header__nav .nav__btn a::before, #header.active .header__nav .nav__btn a::after, #header.active .header__nav .nav__btn a span {background: #000;} @media all and (max-width: 1600px ){ .header__nav .cinner {margin: 0 50px;} } @media all and (max-width: 1399px){ .header__nav .cinner {margin: 0 30px;} #main-nav {margin-right: 40px;} .main-nav__depth1 .mn-ul1 {gap: 0 40px;} .header__nav .quick-list {margin-right: 30px;} } @media all and (max-width: 1199px){ #header {height: 80px;} #main-nav, .header__nav .quick-list, .header__nav .lang {display: none;} .header__nav .nav__btn {display: block;} } @media all and (max-width: 1024px){ .header__nav .header__logo a img {max-width: 85%;} } @media all and (max-width: 768px ){ .header__nav .nav__btn a {width: 30px;height: 22px;} } @media all and (max-width: 640px ){ #header {height: 70px;} .header__nav .cinner {margin: 0 20px;} .header__nav .header__logo a img {max-width: 80%;} .header__nav .nav__btn a span, .header__nav .nav__btn a::before, .header__nav .nav__btn a::after {height: 3px;} } /* header 끝 */ /* tail 시작 */ #footer {padding: 39px 0;background: #F5F5F5;color: #4A4A4A;} .footer__inner {display: flex;flex-direction: column;max-width: 1520px;margin: 0 auto;} .footer__logo {width: 245px;} .footer__cont {display: flex;justify-content: space-between;/* align-items: center; */} .footer__info {margin-bottom: 15px;font-size: 16px;} .footer__info > p {font-size: 14px;/* margin-bottom: 2px; */font-weight: 600;text-align: right;} .footer__info .info {display: flex;justify-content: flex-end;/* margin-bottom: 2px; */font-size: 14px;font-weight: 500;} .footer__info .info li:not(:last-child) {position: relative;padding-right: 10px;margin-right: 10px;} .footer__info .info li:not(:last-child)::after {content: '';display: block;width: 1px;height: 10px;background: #fff;position: absolute;top: 6px;right: 0;/* bottom: 0; */margin: auto;} .footer__info .info li address {margin-bottom: 0;font-style: normal;} .footer__sitemap {width: 180px;margin-left: auto;position: relative;} .footer__sitemap > p{max-width: 100%;padding: 10px 20px;border: 1px solid #c8c8c8;border-radius: 2px;box-sizing: border-box;background: #F5F5F5;color: #969696;font-size: 16px;position: relative;cursor: pointer;} .footer__sitemap > p::after {content: '';display: block;width: 10px;aspect-ratio: 1 / 1;border-bottom: 2px solid #DADADA;border-right: 2px solid #DADADA;transform: rotate(45deg);position: absolute;top: 18px;right: 20px;} .footer__sitemap.active > p::after {top: 22px;transform: rotate(-135deg);} .footer__sitemap > p img{width: 10px;position: absolute;right: 20px;top: 50%;transform: translateY(-50%) rotate(90deg);} .footer__sitemap > ul {display: none;background: #F8F8F8;color: #666;position: absolute;width: 100%;bottom: 100%;left: 0;z-index: 1000;box-shadow: 0 -4px 10px rgba(0,0,0,0.1);} .footer__sitemap > ul li{padding: 10px 20px;font-size: 16px;text-align: center;border-bottom: 1px solid rgba(218,218,218,.3);cursor: pointer;} .footer__sitemap > ul li:last-child{border-bottom: unset;} .footer__sitemap> ul li:hover{font-weight: bold;} .footer__links {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;padding: 20px 0;border-top: 1px solid #4A4A4A;box-sizing: border-box;} .footer__links .copy p {font-size: 14px;} .footer__links .links {display: flex;} .footer__links .links li:not(:last-child) {margin-right: 4px;} .footer__links .links li a, .footer__links .links li span {color: #4A4A4A;font-size: 14px;cursor: pointer;} .footer__links .links li .privacy {font-weight: 700;} .footer__links .links li:not(:last-child)::after {content: '·';padding-left: 4px;} .footer__links .links li > a:hover, .footer__links .links li > a:focus {text-decoration: underline;text-underline-offset: 4px;} @media all and (max-width: 1600px ){ .footer__inner {margin: 0 50px;} } @media all and (max-width: 1399px){ .footer__inner {margin: 0 30px;} } @media all and (max-width: 1024px){ #footer {padding: 30px 0;} .footer__logo img {max-width: 85%;margin: 0 auto;} .footer__info > p {/* margin-bottom: 5px; */} .footer__info .info {/* margin-bottom: 5px; */} } @media all and (max-width: 768px){ .footer__cont {flex-direction: column;position: relative;} .footer__logo {margin-bottom: 20px;} .footer__logo img {max-width: 80%;margin-left: 0;} .footer__items {display: flex;} .footer__info {margin-bottom: 0;font-size: 14px;} .footer__info > p {text-align: left;} .footer__info .info {justify-content: flex-start;} .footer__info .info li:not(:last-child)::after {top: 5px;} .footer__sitemap {width: 150px;position: absolute;top: 10px;right: 0;} .footer__sitemap > p{padding: 10px 16px;font-size: 15px;} .footer__sitemap > ul li {font-size: 15px;} .footer__links {/* flex-direction: column; */padding: 20px 0 0;} .footer__links .copy {/* margin-bottom: 10px; *//* text-align: center; */} .footer__links .links {justify-content: center;} } @media all and (max-width: 640px){ .footer__inner {margin: 0 20px;} .footer__logo img {max-width: 70%;} .footer__items {display: block;} .footer__sitemap {width: 140px;top: 5px;/* margin-left: 0; *//* margin-right: auto; */} .footer__sitemap > p {/* padding: 8px 12px; */font-size: 14px;} .footer__sitemap > p::after {top: 13px;right: 16px;} .footer__info .info {flex-wrap: wrap;} .footer__links {flex-direction: column;} .footer__links .copy {margin-bottom: 10px;text-align: center;} .footer__links .links {justify-content: center;} } @media all and (max-width: 480px){ .footer__sitemap {width: 100%;margin-top: 20px;position: relative;top: auto;} } #top_btn {display: none;position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background: rgba(255,255,255,0.8);} #top_btn:hover {border-color:var(--color-main);background:var(--color-main);color:#fff} /* tail 끝 */ /* 메인 공통css 시작 */ #main {margin-top: 115px;} #main > section:not(:last-child) {margin-bottom: 174px;} #main .mtit {font-size: 4.0em;font-weight: 600;} #main .mtit2 {font-size: 2.50em;font-weight: 600;} #main .btn-more {display: block;min-width: 194px;max-width: 194px;padding: 15px 30px;border: 1px solid var(--color-main);box-sizing: border-box;border-radius: 30px;background: #fff;color: var(--color-main);font-weight: 500;position: relative;transition: .35s;} #main .btn-more::after {content: '';display: block;width: 15px;height: 15px;border-top: 2px solid var(--color-main);border-right: 2px solid var(--color-main);box-sizing: border-box;transform: rotate(45deg);position: absolute;top: 0;bottom: 0;right: 34px;margin: auto;transition: .35s;} #main .btn-more:hover, #main .btn-more:focus {border-color: var(--color-main);background: var(--color-main);color: #fff;} #main .btn-more:hover::after, #main .btn-more:focus::after {border-color: #fff;} @media all and (max-width: 1399px){ #main .mtit {font-size: 3.20em;} } @media all and (max-width: 1199px){ #main {margin-top: 80px;} #main .mtit {font-size: 2.78em;} } @media all and (max-width: 1024px){ #main > section:not(:last-child) {margin-bottom: 80px;} #main .btn-more {min-width: 160px;max-width: 160px;padding: 12px 20px;font-size: 16px;} #main .btn-more::after {width: 10px;height: 10px;right: 24px;} } @media all and (max-width: 640px){ #main {margin-top: 70px;} #main .mtit {font-size: 2.0em;} #main .mtit2 {font-size: 2.11em;} } /* 메인 공통css 끝 */ /* 메인 배너 시작 */ #main .mvis {height: calc(100vh - 115px);position: relative;} #main .mvis .main-visual {height: 100%;position: relative;} #main .mvis .main-visual .mvis-img-wrap {height: 100%;} #main .mvis .main-visual .mvis-img-wrap .mvis-img {height: 100%;} #main .mvis .main-visual .mvis-img-wrap .mvis-img .cinner {display: flex;flex-direction: column;justify-content: center;position: absolute;/* height: 100%; */left: 0;right: 0;bottom: 200px;} #main .mvis .main-visual .mvis-img-wrap .mvis-img a {width: 100%;height: 100%;display: block;background-repeat: no-repeat !important;background-size: cover !important;background-position: center !important;pointer-events: none;} #main .mvis .main-visual .mvis-txt-wrap .tit {color: #fff;font-size: 4.0em;font-weight: 600;line-height: 1.2;} #main .mvis .pager {position: absolute;bottom: 13%;width: 100%;pointer-events: auto;} #main .mvis .pager .cinner {display: block;height: auto;} #main .mvis .pager .carousel-indicators {position: unset;margin: 0;justify-content: flex-start;} #main .mvis .pager .carousel-indicators > li {width: 50px;height: 3px;background-color: rgba(255,255,255,.6);} #main .mvis .pager .carousel-indicators > li.active {background-color: var(--color-main);} #main .mvis .carousel-control-prev, #main .mvis .carousel-control-next{display: none;} @media all and (max-width: 1399px){ #main .mvis .main-visual .mvis-txt-wrap .tit {font-size: 3.50em;} } @media all and (max-width: 1199px){ #main .mvis {height: calc(100vh - 80px);} } @media all and (max-width: 1024px){ #main .mvis {height: 600px;} #main .mvis .main-visual .mvis-txt-wrap .tit {font-size: 3.0em;} } @media all and (max-width: 768px){ #main .mvis {/* height: 500px; */} #main .mvis .main-visual .mvis-txt-wrap {text-align: center;} #main .mvis .main-visual .mvis-img-wrap .mvis-img .cinner {top: 0;bottom: 0;} #main .mvis .main-visual .mvis-txt-wrap .tit {font-size: 2.50em;} #main .mvis .pager {bottom: 7%;} #main .mvis .pager .carousel-indicators {justify-content: center;} #main .mvis .pager .carousel-indicators > li {width: 40px;} } @media all and (max-width: 640px){ #main .mvis {height: 450px;} #main .mvis .main-visual .mvis-txt-wrap .tit {font-size: 2.0em;} #main .mvis .main-visual .mvis-txt-wrap .tit > .line-br {display: inline;} } @media all and (max-width: 480px){ } /* 메인 배너 끝 */ /* 메인 msec01 - Brand 시작 */ #main .mbrand {display: flex;} #main .mbrand .txt-cont {display: flex;flex-direction: column;justify-content: center;width: 50%;padding: 0 90px;background: url(../img/img-msec01_bg.png) center center / cover no-repeat;color: #fff;} #main .mbrand .txt-cont .mtit {margin-bottom: 40px;} #main .mbrand .txt-cont .txt {margin-bottom: 80px;font-weight: 500;} #main .mbrand .txt-cont .btn-more {color: #fff;border-color: #fff;background: transparent;} #main .mbrand .txt-cont .btn-more::after {border-color: #fff;} #main .mbrand .txt-cont .btn-more:hover, #main .mbrand .txt-cont .btn-more:focus {border-color: #fff;background: #fff;color: var(--color-main);} #main .mbrand .txt-cont .btn-more:hover::after, #main .mbrand .txt-cont .btn-more:focus::after {border-color: var(--color-main);} #main .mbrand .img-cont {width: 50%;} @media all and (max-width: 1399px){ #main .mbrand .txt-cont {padding: 0 60px;} #main .mbrand .txt-cont .txt > .line-br {display: inline;} } @media all and (max-width: 1199px){ #main .mbrand .txt-cont {padding: 0 40px;} #main .mbrand .txt-cont .mtit {margin-bottom: 20px;} #main .mbrand .txt-cont .txt {margin-bottom: 60px;} } @media all and (max-width: 1024px){ #main .mbrand {flex-direction: column;max-width: 85%;margin: 0 auto;} #main .mbrand .txt-cont {width: 100%;padding: 40px;} #main .mbrand .txt-cont .txt {margin-bottom: 40px;} #main .mbrand .txt-cont .txt > .line-br {display: block;} #main .mbrand .img-cont {width: 100%;} } @media all and (max-width: 768px){ #main .mbrand {flex-direction: column;} #main .mbrand .txt-cont .txt {margin-bottom: 20px;} } @media all and (max-width: 640px){ #main .mbrand .txt-cont {padding: 40px 30px;} #main .mbrand .txt-cont .txt > .line-br {display: inline;} } @media all and (max-width: 480px){ #main .mbrand .txt-cont {padding: 40px 20px;} } /* 메인 msec01 - Brand 끝 */ /* 메인 msec02 - Product 시작 */ #main .msec02 {position: relative;} #main .msec02::after {content: '';display: block;width: 100%;max-height: 800px;height: 40%;background: #F8F8F9;position: absolute;left: 0;right: 0;bottom: 7%;margin: auto;z-index: 0;} #main .mproduct {position: relative;z-index: 1;} #main .mproduct [class*=cont-box] {display: flex;justify-content: space-between;} #main .mproduct [class*=cont-box]:not(:last-child) {margin-bottom: 150px;} #main .mproduct [class*=cont-box] .txt-cont {max-width: 498px;width: 35%;} #main .mproduct [class*=cont-box] .txt-cont .mtit2 {margin-bottom: 30px;} #main .mproduct [class*=cont-box] .txt-cont .txt {margin-bottom: 100px;color: #777;font-weight: 500;} #main .mproduct [class*=cont-box] .img-cont {max-width: 930px;width: 62%;} #main .mproduct .cont-box1 {align-items: center;} #main .mproduct .cont-box1 .txt-cont {max-width: 767px;width: 53%;} #main .mproduct .cont-box1 .txt-cont .mtit {margin-bottom: 48px;} #main .mproduct .cont-box1 .txt-cont .txt {margin-bottom: 80px;} #main .mproduct .cont-box1 .img-cont {max-width: 700px;width: 47%;} #main .mproduct .cont-box2 {flex-direction: row-reverse;} @media all and (max-width: 1499px){ #main .mproduct [class*=cont-box] .txt-cont {width: 38%;} #main .mproduct [class*=cont-box] .img-cont {width: 58%;} #main .mproduct .cont-box1 .txt-cont {width: 53%;} #main .mproduct .cont-box1 .img-cont {width: 44%;} } @media all and (max-width: 1399px){ #main .mproduct [class*=cont-box] .txt-cont .txt .line-br {display: inline;} } @media all and (max-width: 1199px){ #main .mproduct [class*=cont-box]:not(:last-child) {margin-bottom: 100px;} #main .mproduct .cont-box1 .txt-cont .txt {margin-bottom: 50px;} } @media all and (max-width: 1024px){ #main .msec02::after {height: 38%;bottom: 10%;} #main .mproduct {max-width: 85%;margin: 0 auto;} #main .mproduct [class*=cont-box] {flex-direction: column;gap: 50px 0;} #main .mproduct [class*=cont-box] .txt-cont {max-width: none;width: 100%;} #main .mproduct [class*=cont-box]:not(:last-child) {margin-bottom: 80px;} #main .mproduct [class*=cont-box] .txt-cont .txt {margin-bottom: 60px;} #main .mproduct [class*=cont-box] .txt-cont .txt .line-br {display: block;} #main .mproduct [class*=cont-box] .img-cont {max-width: none;width: 100%;} } @media all and (max-width: 768px){ #main .msec02::after {height: 30%;bottom: 7%;} #main .mproduct [class*=cont-box] .txt-cont .mtit2 {margin-bottom: 20px;} #main .mproduct [class*=cont-box] .txt-cont .txt {margin-bottom: 40px;} #main .mproduct .cont-box1 .txt-cont .mtit {font-size: 2.50em;margin-bottom: 20px;} } @media all and (max-width: 640px){ #main .mproduct [class*=cont-box] .txt-cont .mtit2 {margin-bottom: 10px;} #main .mproduct [class*=cont-box] .txt-cont .txt {margin-bottom: 20px;} #main .mproduct [class*=cont-box] .txt-cont .txt .line-br {display: inline;} #main .mproduct .cont-box1 .txt-cont .mtit {margin-bottom: 10px;font-size: 2.11em;} } /* 메인 msec02 - Product 끝 */ /* 메인 msec03 - Press 시작 */ #main .mpress {position: relative;} #main .mpress .mtit {margin-bottom: 60px;} #main .mpress .cont-box ul {display: flex;gap: 0 34.5px;width: 100%;} #main .mpress .cont-box ul > li {width: 33.333%;} #main .mpress .cont-box ul > li > .img-wrap .img-item img {transition: .35s;} #main .mpress .cont-box ul > li > .img-wrap .img-item a:hover img {transform: scale(1.1);} #main .mpress .cont-box ul > li > .cont-wrap {margin-top: 20px;} #main .mpress .cont-box ul > li > .cont-wrap .title {margin-bottom: 5px;color: #111;font-size: 1.50em;font-weight: 500;transition: .35s;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;line-height: 1.25;} #main .mpress .cont-box ul > li > .cont-wrap .title:hover {color: var(--color-main);} #main .mpress .cont-box ul > li > .cont-wrap .txt {min-height: 68px;margin-bottom: 40px;color: #777;font-size: 18px;font-weight: 500;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 3;line-height: 1.25;} #main .mpress .cont-box ul > li > .cont-wrap .date {color: #777;font-size: 18px;font-weight: 500;} #main .mpress .btn-more {position: absolute;top: 33px;right: 0;} @media all and (max-width: 1399px){ #main .mpress .btn-more {top: 14px;} } @media all and (max-width: 1199px){ #main .mpress .btn-more {top: 4px;} } @media all and (max-width: 1024px){ #main .mpress {max-width: 85%;margin: 0 auto;} #main .mpress .cont-box ul {gap: 0 20px;} #main .mpress .cont-box ul > li > .cont-wrap .txt {margin-bottom: 20px;} #main .mpress .btn-more {top: 9px;} } @media all and (max-width: 768px){ #main .mpress .mtit {margin-bottom: 30px;} #main .mpress .cont-box ul {gap: 0 10px;} #main .mpress .cont-box ul > li > .cont-wrap .title {font-size: 1.11em;} #main .mpress .cont-box ul > li > .cont-wrap .txt {min-height: 60px;font-size: 16px;} #main .mpress .btn-more {margin: 40px auto 0;position: relative;} } @media all and (max-width: 640px){ #main .mpress .cont-box ul {flex-wrap: wrap;gap: 30px 0;} #main .mpress .cont-box ul > li {width: 100%;} #main .mpress .cont-box ul > li:last-child {display: none;} #main .mpress .cont-box ul > li > .cont-wrap .txt {min-height: 40px;margin-bottom: 10px;-webkit-line-clamp: 2;} } /* 메인 msec03 - Press 끝 */ /* 메인 msec04 - Inquiry 시작 */ #main .msec04 {background: url(../img/img-msec04_bg.png) center center / cover no-repeat;} #main .minquiry {display: flex;justify-content: space-between;padding: 150px 0 160px;} #main .minquiry .tit-cont {width: 28%;} #main .minquiry .tit-cont .mtit {margin-bottom: 40px;} #main .minquiry .tit-cont .mtxt {color: #777;font-size: 1.20em;font-weight: 500;} #main .minquiry .cont-box {max-width: 670px;width: 45%;} #main .minquiry .cont-box form ul {display: flex;flex-wrap: wrap;gap: 30px 26px;} #main .minquiry .cont-box form ul > li {width: calc(50% - 13px);} #main .minquiry .cont-box form ul > li:last-child {width: 100%;} #main .minquiry .cont-box form ul > li > label {display: block;margin-bottom: 12px;color: #111;font-weight: 500;} #main .minquiry .cont-box form ul > li > label > span {color: var(--color-main);} #main .minquiry .cont-box form ul > li > input {width: 100%;padding: 10px;background: #fff;color: #111;} #main .minquiry .cont-box form ul > li > textarea {width: 100%;min-height: 145px;padding: 10px;border: 0;background: #fff;color: #222;resize: none;} #main .minquiry .cont-box form ul > li > textarea:focus-visible {outline: 0;} #main .minquiry .cont-box form .agree-box input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } #main .minquiry .cont-box form .agree-box input[type="checkbox"] + label {display: flex;align-items: center;margin-bottom: 0;padding-left: 22px;color: #A0A0A0;font-size: .80em;font-weight: 500;position: relative;cursor: pointer;} #main .minquiry .cont-box form .agree-box input[type="checkbox"] + label:before, #main .minquiry .cont-box form .agree-box input[type="checkbox"] + label:after { content: ''; display: block; box-sizing: border-box; position: absolute; top: -1px; bottom: 0; margin: auto; } #main .minquiry .cont-box form .agree-box input[type="checkbox"] + label:before {border-radius: 2px;width: 15px;height: 15px;border: 1px solid #ebebeb;box-sizing: border-box;border-radius: 2px;background: #fff;left: 0;} #main .minquiry .cont-box form .agree-box input[type="checkbox"] + label:after {border: 2px solid #fff;border-top: 0;border-right: 0;width: 10px;height: 6px;transform: rotate(-45deg);margin: 11px 0 0 0;opacity: 0;top: -4px;left: 2px;} #main .minquiry .cont-box form .agree-box input[type="checkbox"]:checked + label:before { background: var(--color-main); } #main .minquiry .cont-box form .agree-box input[type="checkbox"]:checked + label:after { opacity: 1; transition: .35s linear; } #main .minquiry .cont-box form > button {display: block;width: 100%;max-height: 60px;margin-top: 50px;padding: 14px 0;font-weight: 500;} @media all and (max-width: 1399px){ #main .minquiry .cont-box {width: 59%;} } @media all and (max-width: 1024px){ #main .minquiry {flex-direction: column;gap: 60px 0;padding: 80px 0 90px;} #main .minquiry .tit-cont {max-width: none;width: 100%;} #main .minquiry .tit-cont .mtit {margin-bottom: 30px;} #main .minquiry .cont-box {max-width: none;width: 100%;} } @media all and (max-width: 640px){ #main .minquiry .cont-box form ul {gap: 20px 10px;} #main .minquiry .cont-box form ul > li {width: calc(50% - 5px);} } @media all and (max-width: 480px){ #main .minquiry .cont-box form ul {gap: 10px 0;} #main .minquiry .cont-box form ul > li {width: 100%;} } /* 메인 msec04 - Inquiry 끝 */ /* 서브페이지 공통 css 시작 */ .sub-page {margin: 150px 0;} .sub-page .page-tit {/* margin-bottom: 140px; */margin-bottom: 100px;} .sub-page .page-tit .tit {/* font-size: 3.0em; */font-size: 2.50em;font-weight: 700;text-align: center;line-height: 1.2;} .sub-page [class*=cont-box]:not(:last-child) {margin-bottom: 100px;} @media all and (max-width: 1199px){ .sub-page .page-tit {margin-bottom: 100px;} .sub-page {margin-top: 100px;} } @media all and (max-width: 1024px){ .sub-page .page-tit {margin-bottom: 60px;} .sub-page .page-tit .tit {font-size: 2.50em;} .sub-page [class*=cont-box]:not(:last-child) {margin-bottom: 80px;} } @media all and (max-width: 768px){ .sub-page {margin-top: 80px;} .sub-page .page-tit .tit {font-size: 2.22em;} } @media all and (max-width: 640px){ .sub-page .page-tit {margin-bottom: 60px;} .sub-page .page-tit .tit {font-size: 2.67em;} } /* 서브페이지 공통 css 끝 */ /* 회사소개 > 회사개요 시작 */ #overview .cont-box1 {margin-bottom: 120px;background-image: url(../img/sub/img-overview_01.jpg);background-repeat: no-repeat;background-size: contain;background-position: top center;overflow: hidden;} #overview .cont-box1 > .txt-cont {max-width: 1070px;width: 85%;margin: 17% auto 0;padding: 90px 0 0;background: #fff;} #overview .cont-box1 > .txt-cont > .tit {margin-bottom: 30px;font-size: 2.20em;font-weight: 700;line-height: 1.3;text-align: center;} #overview .cont-box1 > .txt-cont > .tit > span {color: var(--color-main);} #overview .cont-box1 > .txt-cont > .tit > br {display: none;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt {color: #636363;font-size: 18px;text-align: center;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt:not(:last-child) {margin-bottom: 20px;} #overview .cont-box2 {position: relative;z-index: 10;} #overview .cont-box2::before {content: '';display: block;max-width: 1066px;width: 100%;padding-top: 49.7%;background: url(../img/sub/img-overview_02.png) top center / contain no-repeat;position: absolute;top: 195px;left: 0;right: 0;margin: auto;z-index: -2;} #overview .cont-box2 > div {display: flex;flex-direction: column;align-items: center;gap: 18px 0;} #overview .cont-box2 .tit {width: 180px;padding: 2px 20px;border-radius: 26px;font-size: 1.30em;font-weight: 900;text-align: center;} #overview .cont-box2 > .mission {max-width: 1400px;margin: 0 auto;padding: 28px 0;border-radius: 110px;background: var(--color-main);position: relative;z-index: 0;} #overview .cont-box2 > .mission > .tit {background: #fff;color: var(--color-main);} #overview .cont-box2 > .mission > .txt {color: #fff;font-size: 1.30em;font-weight: 600;text-align: center;line-height: 1.3;} #overview .cont-box2 > .triangle {display: block;width: 495px;height: 171px;background: url(../img/sub/img-overview_triangle.png) center center / cover no-repeat;margin: -50px auto 0;} #overview .cont-box2 > .vision {display: flex;flex-direction: column;align-items: center;margin-top: -22px;margin-bottom: 120px;} #overview .cont-box2 > .vision > .tit {background: var(--color-main);color: #fff;} #overview .cont-box2 > .vision > .txt {font-size: 1.20em;font-weight: 600;text-align: center;line-height: 1.3;} #overview .cont-box2 > .value {gap: 150px 0;} #overview .cont-box2 > .value > .tit {display: flex;justify-content: center;align-items: center;width: 150px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--color-main);color: #fff;font-weight: 700;line-height: 1.2;position: relative;} #overview .cont-box2 > .value > .tit::after {content: '';display: block;width: 1px;height: 100%;background: #D9D9D9;position: absolute;left: 0;right: 0;bottom: -100%;margin: auto;} #overview .cont-box2 > .value > .value-list {width: 100%;position: relative;} #overview .cont-box2 > .value > .value-list::before {content: '';display: block;width: 81.579%;height: 1px;background: #D9D9D9;position: absolute;left: 0;right: 0;top: -53px;margin: auto;z-index: -1;} #overview .cont-box2 > .value > .value-list > ul {display: flex;align-items: stretch;gap: 30px;} #overview .cont-box2 > .value > .value-list > ul > li {display: flex;flex-direction: column;align-items: center;width: calc(20% - 24px);padding: 72px 0;border-radius: 220px;background: #F8F8F8;position: relative;} #overview .cont-box2 > .value > .value-list > ul > li::before, #overview .cont-box2 > .value > .value-list > ul > li::after {content: '';display: block;position: absolute;} #overview .cont-box2 > .value > .value-list > ul > li::before {width: 1px;height: 50px;background: #D9D9D9;left: 0;right: 0;top: -53px;margin: auto;} #overview .cont-box2 > .value > .value-list > ul > li::after {width: 10px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--color-main);top: 0;left: 0;right: 0;margin: auto;transform: translateY(-50%);} #overview .cont-box2 > .value > .value-list > ul > li > .ico {width: 80px;margin-bottom: 20px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .tit {width: auto;margin-bottom: 15px;padding: 0;color: var(--color-main);font-weight: 700;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt {color: #5C5C5C;font-size: 18px;text-align: center;} @media all and (max-width: 1499px){ #overview .cont-box1 > .txt-cont {width: 90%;} } @media all and (max-width: 1399px){ #overview .cont-box2 > .value > .value-list > ul {gap: 20px;} #overview .cont-box2 > .value > .value-list > ul > li {width: calc(20% - 16px);} #overview .cont-box2 > .value > .value-list > ul > li > .ico {max-width: 100px;} } @media all and (max-width: 1199px){ #overview .cont-box1 > .txt-cont {width: 90%;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt {padding: 0 6%;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt > .line-br {display: inline;} #overview .cont-box2 .tit {font-size: 1.25em;} #overview .cont-box2 > .mission > .txt {font-size: 1.20em;} #overview .cont-box2 > .vision {margin-bottom: 100px;} #overview .cont-box2 > .value > .value-list::before {width: 80.7%;} #overview .cont-box2 > .value > .value-list > ul {gap: 10px;} #overview .cont-box2 > .value > .value-list > ul > li {width: calc(20% - 8px);} #overview .cont-box2 > .value > .value-list > ul > li > .ico {max-width: 80px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt {padding: 0 10px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1024px){ #overview .cont-box1 {margin-bottom: 80px;} #overview .cont-box1 > .txt-cont {padding: 70px 0 0;} #overview .cont-box1 > .txt-cont > .tit {font-size: 2.0em;} #overview .cont-box2 > div {gap: 15px 0;} #overview .cont-box2 .tit {width: 170px;} #overview .cont-box2 > .mission {padding: 20px 0;border-radius: 40px;} #overview .cont-box2 > .triangle {width: 395px;height: 136px;margin: -40px auto 0;} #overview .cont-box2 > .vision {margin-bottom: 80px;} #overview .cont-box2 > .value > .value-list > ul > li > .ico {max-width: 70px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .tit {font-size: 1.22em;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt {font-size: 17px;} } @media all and (max-width: 768px){ #overview .cont-box1 > .txt-cont > .tit {font-size: 1.78em;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt {padding: 0 6%;} #overview .cont-box2 .tit {font-size: 1.0em;} #overview .cont-box2 > .mission {border-radius: 20px;} #overview .cont-box2 > .mission > .txt {font-size: 1.0em;} #overview .cont-box2 > .vision > .tit {width: 100%;height: 45px;padding: 10px 0;border-radius: 20px;} #overview .cont-box2 > .vision > .txt {font-size: 1.0em;} #overview .cont-box2 > .value {gap: 45px 0;position: relative;} #overview .cont-box2 > .value > .tit {width: 100%;height: 45px;aspect-ratio: auto;padding: 16px 0;border-radius: 20px;} #overview .cont-box2 > .value > .tit::after {left: 30px;right: auto;} #overview .cont-box2 > .value > .tit > br {display: none;} #overview .cont-box2 > .value > .value-list {padding-left: 90px;} #overview .cont-box2 > .value > .value-list::before {width: 1px;height: 90.5%;top: 0;left: 30px;right: auto;} #overview .cont-box2 > .value > .value-list > ul {flex-direction: column;} #overview .cont-box2 > .value > .value-list > ul > li {flex-direction: row;justify-content: center;align-items: center;gap: 20px;width: 100%;padding: 32px 40px;border-radius: 10px;} #overview .cont-box2 > .value > .value-list > ul > li::before {width: 60px;height: 1px;top: 0;bottom: 0;left: -60px;right: auto;} #overview .cont-box2 > .value > .value-list > ul > li::after {top: 50%;right: auto;transform: translate(-50%, -50%);} #overview .cont-box2 > .value > .value-list > ul > li > .ico {flex: 0 0 auto;margin-bottom: 0;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont {width: 63%;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .tit {margin-bottom: 5px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt {padding: 0;} } @media all and (max-width: 640px){ #overview .cont-box1 {background-size: cover;} #overview .cont-box1 > .txt-cont {margin: 5% auto;padding: 50px 0;border-radius: 10px;} #overview .cont-box1 > .txt-cont > .tit {padding: 0 10%;font-size: 1.78em;} #overview .cont-box1 > .txt-cont > .tit > br {display: none;} #overview .cont-box1 > .txt-cont > .cont-txt > .txt {padding: 0 10%;} #overview .cont-box2 > .mission > .txt, #overview .cont-box2 > .vision > .txt {padding: 0 10px;} #overview .cont-box2 > .mission {border-radius: 10px;} #overview .cont-box2 > .vision > .txt > .line-br {display: inline;} #overview .cont-box2 > .vision > .tit, #overview .cont-box2 > .value > .tit {border-radius: 10px;} #overview .cont-box2 > .value > .value-list > ul > li {flex-direction: column;gap: 15px;padding: 32px 20px;} #overview .cont-box2 > .value > .value-list > ul > li > .ico {max-width: 60px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont {width: 100%;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont > .txt {min-height: 51px;padding: 0 26px;} } @media all and (max-width: 480px){ #overview .cont-box2 > .triangle {width: 290px;height: 100px;margin: -30px auto 0;} #overview .cont-box2 > .value > .value-list {padding-left: 0;} #overview .cont-box2 > .value > .value-list > ul > li {flex-direction: column;padding: 32px 20px;} #overview .cont-box2 > .value > .value-list > ul > li::before {width: 40px;left: -40px;} #overview .cont-box2 > .value > .value-list > ul > li > .txt-cont {width: 100%;} #overview .cont-box2 > .value > .tit::after {display: none;} #overview .cont-box2 > .value > .value-list::before {display: none;} #overview .cont-box2 > .value > .value-list > ul > li::before, #overview .cont-box2 > .value > .value-list > ul > li::after {display: none;} } /* 회사소개 > 회사개요 끝 */ /* 회사소개 > 연혁 시작 */ #history .history-cont {border-top: 1px solid #D9D9D9;} #history .history-cont > .cont {display: flex;gap: 100px;padding: 50px;border-bottom: 1px solid #D9D9D9;} #history .history-cont > .cont > .year {color: var(--color-main);font-size: 2.0em;font-weight: 700;line-height: 1.0;} #history .history-cont > .cont > .cont-list > li > span {display: inline-block;} #history .history-cont > .cont > .cont-list > li > .date {margin-right: 10px;font-size: 1.20em;font-weight: 700;} @media all and (max-width: 1024px){ #history .history-cont > .cont {gap: 50px;padding: 40px 50px;} } @media all and (max-width: 768px){ #history .history-cont > .cont {gap: 40px;padding: 40px 30px;} } @media all and (max-width: 640px){ #history .history-cont > .cont {flex-direction: column;gap: 20px;} } @media all and (max-width: 480px){ #history .history-cont > .cont > .cont-list > li {display: flex;} #history .history-cont > .cont > .cont-list > li > .txt {position: relative;top: 3px;} } /* 회사소개 > 연혁 끝 */ /* 회사소개 > CI 시작 */ #ci .cont-box1 .logo-cont {display: flex;justify-content: space-between;align-items: center;gap: 50px;width: 100%;height: 400px;margin-bottom: 45px;padding: 0 110px;border: 1px solid #ECECEC;box-sizing: border-box;background: url(../img/sub/img-ci_bg.png);} #ci .cont-box1 .txt-cont {margin-bottom: 124px;color: #333;text-align: center;} #ci .cont-box1 .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #ci .cont-box1 .txt-cont > .txt > b {color: #000;font-weight: 700;} #ci .cont-box1 .video {max-width: 1000px;width: 66%;margin: 0 auto;} #ci .cont-box1 .video > video {width: 100%;aspect-ratio: 16/ 9;} #ci .cont-box2 > .tit {margin-bottom: 20px;font-size: 2.0em;font-weight: 700;text-align: center;} #ci .cont-box2 > ul {display: flex;gap: 100px;} #ci .cont-box2 > ul > li {width: 33.333%;} #ci .cont-box2 > ul > li > .color-box {display: flex;justify-content: center;align-items: center;margin-bottom: 18px;height: 160px;} #ci .cont-box2 > ul > li.green > .color-box {background: var(--color-main);} #ci .cont-box2 > ul > li.aurora > .color-box {background: #59BCA0;} #ci .cont-box2 > ul > li.black > .color-box {background: #000;} #ci .cont-box2 > ul > li > .color-box > p {padding: 0 20px;color: #fff;font-size: 1.50em;font-weight: 600;text-align: center;line-height: 1.2;} #ci .cont-box2 > ul > li > .color-info {display: flex;justify-content: space-between;} @media all and (max-width: 1399px){ #ci .cont-box1 .logo-cont {height: 360px;padding: 0 70px;} } @media all and (max-width: 1199px){ #ci .cont-box1 .logo-cont {height: 320px;padding: 0 50px;} #ci .cont-box2 > ul {gap: 50px;} } @media all and (max-width: 1024px){ #ci .cont-box1 .logo-cont {flex-direction: column;gap: 80px;height: auto;padding: 100px 0;} #ci .cont-box1 .txt-cont {margin-bottom: 80px;} #ci .cont-box1 .txt-cont > .txt > .line-br {display: inline;} #ci .cont-box1 .video {width: 80%;} #ci .cont-box2 > ul {gap: 20px;} #ci .cont-box2 > ul > li > .color-info > .txt {font-size: 16px;} } @media all and (max-width: 768px){ #ci .cont-box2 > ul {gap: 10px;} #ci .cont-box2 > ul > li > .color-info {display: block;} } @media all and (max-width: 640px){ #ci .cont-box1 .logo-cont > .img > img {max-width: 75%;margin: 0 auto;} #ci .cont-box1 .video {width: 90%;} #ci .cont-box2 > ul {flex-direction: column;gap: 30px;max-width: 400px;margin: 0 auto;} #ci .cont-box2 > ul > li {width: 100%;} #ci .cont-box2 > ul > li > .color-info {display: flex;} } @media all and (max-width: 480px){ #ci .cont-box1 .logo-cont {gap: 60px;padding: 80px 0;} #ci .cont-box1 .logo-cont > .img > img {max-width: 70%;margin: 0 auto;} } /* 회사소개 > CI 끝 */ /* 회사소개 > 인재상 시작 */ #talent .tit-cont {margin-bottom: 100px;padding: 74px 50px;background: #FAFAFA;} #talent .tit-cont > .txt {font-size: 2.0em;font-weight: 600;text-align: center;line-height: 1.3;} #talent .tit-cont > .txt > span {display: inline-block;position: relative;} #talent .tit-cont > .txt > span::before, #talent .tit-cont > .txt > span::after {font-family: var(--font-YES24);font-size: 2.0em;font-weight: 400;position: absolute;top: -28px;} #talent .tit-cont > .txt > span::before {content: '“';left: -5%;} #talent .tit-cont > .txt > span::after {content: '”';right: -5%;} #talent .mo-view {display: none;} #talent .bot-txt-cont {max-width: 1000px;margin: 120px auto 0;padding: 25px;border: 2px dashed var(--color-main);border-radius: 50px;} #talent .bot-txt-cont > .txt {font-size: 1.50em;font-weight: 600;text-align: center;} @media all and (max-width: 1199px){ #talent .tit-cont > .txt {font-size: 1.80em;} #talent .tit-cont > .txt > span::before, #talent .tit-cont > .txt > span::after {top: -17px;} } @media all and (max-width: 1024px){ #talent .tit-cont > .txt > span::before {left: -30px;} #talent .tit-cont > .txt > span::after {right: -30px;} #talent .pc-view {display: none;} #talent .mo-view {display: block;} #talent .mo-view > ul {display: flex;flex-wrap: wrap;gap: 30px;} #talent .mo-view > ul > li {display: flex;align-items: center;gap: 30px;width: calc(50% - 15px);} #talent .mo-view > ul > li > .img-cont {flex: 0 0 auto;display: flex;align-items: center;width: 120px;aspect-ratio: 1 / 1;border: 15px solid var(--color-main);border-radius: 50%;background: #fff;} #talent .mo-view > ul > li > .img-cont > img {max-width: 80%;margin: 0 auto;} #talent .mo-view > ul > li > .txt-cont > .tit {font-size: 1.40em;font-weight: 700;} #talent .mo-view > ul > li > .txt-cont > .txt {color: #333;} } @media all and (max-width: 768px){ #talent .tit-cont {margin-bottom: 60px;} #talent .mo-view > ul {flex-direction: column;padding: 0 5%;} #talent .mo-view > ul > li {width: 100%;} #talent .mo-view > ul > li > .img-cont {border-width: 12px;} #talent .bot-txt-cont {margin: 80px auto 0;} } @media all and (max-width: 640px){ #talent .tit-cont {padding: 54px 25px;} #talent .tit-cont > .txt {font-size: 1.56em;} #talent .tit-cont > .txt > span::before {left: 0;} #talent .tit-cont > .txt > span::after {right: 0;} #talent .mo-view > ul > li > .img-cont {width: 100px;border-width: 10px;} #talent .bot-txt-cont {border-radius: 10px} #talent .bot-txt-cont > .txt {font-size: 1.33em;} } @media all and (max-width: 480px){ #talent .tit-cont > .txt > span::before {left: -10px;} #talent .tit-cont > .txt > span::after {right: -10px;} #talent .mo-view > ul > li {flex-direction: column;gap: 15px;} #talent .mo-view > ul > li > .txt-cont {text-align: center;} } /* 회사소개 > 인재상 끝 */ /* 회사소개 > 오시는 길 시작 */ #location .tabs {margin-bottom: 50px;} #location .tabs > ul {display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;} #location .tabs > ul > li > a {display: block;width: 250px;padding: 14px;border: 1px solid #E8E8E8;border-radius: 30px;box-sizing: border-box;background: #fff;color: #333;font-weight: 500;text-align: center;} #location .tabs > ul > li > a.active {border-color: var(--color-main);background: var(--color-main);color: #fff;font-weight: 600;} #location .tab-content {display: none;} #location .tab-content.active {display: block;} #location .tab-content .gallery {margin-bottom: 20px;} #location .tab-content .map-cont {width: 100%;height: 600px;border: 1px solid #DCDCDC;box-sizing: border-box;} #location .tab-content .map-cont .map {width: 100%;height: 100%;margin-bottom: 30px;} #location .tab-content .map-cont .info {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 10px 0;} #location .tab-content .map-cont .info > p {display: flex;gap: 8px;color: #333;} #location .tab-content .map-cont .info > p > .ico {flex: 0 0 auto;} @media all and (max-width: 1199px){ #location .tab-content .map-cont {height: 450px;} } @media all and (max-width: 1024px){ #location .tab-content .gallery {position: relative;} #location .tab-content .gallery > .swiper-ctrls button {background: none;border: 0;display: block;width: 45px;aspect-ratio: 1 / 1;border: 1px solid #D9D9D9;border-radius: 50%;background: #fff;position: absolute;top: 50%;transform: translateY(-50%);z-index: 999;opacity: 1;} #location .tab-content .gallery > .swiper-ctrls button::after {content: '';display: block;width: 16px;aspect-ratio: 1 / 1;border-right: 4px solid var(--color-main);border-bottom: 4px solid var(--color-main);box-sizing: border-box;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} #location .tab-content .gallery > .swiper-ctrls button.swiper-button-disabled {display: none;} #location .tab-content .gallery > .swiper-ctrls .btn-prev {left: -22px;} #location .tab-content .gallery > .swiper-ctrls .btn-prev::after {transform: rotate(135deg) translate(-10%, -10%);} #location .tab-content .gallery > .swiper-ctrls .btn-next {right: -22px;} #location .tab-content .gallery > .swiper-ctrls .btn-next::after {transform: rotate(-45deg) translate(-10%, -10%);} } @media all and (max-width: 768px){ #location .tabs > ul > li > a {width: 200px;} #location .tab-content .gallery > .swiper-ctrls button {width: 36px;} #location .tab-content .gallery > .swiper-ctrls button::after {width: 12px;border-width: 3px;} #location .tab-content .map-cont {height: 400px;} } @media all and (max-width: 480px){ #location .tabs > ul {gap: 10px;} #location .tabs > ul > li, #location .tabs > ul > li > a {width: 100%;} } /* 회사소개 > 오시는 길 끝 */ /* 기술소개 > CUHA Tech™ 시작 */ #tech01 .cont-box1 {margin-bottom: 80px;} #tech01 .cont-box1 > .img-cont {margin-bottom: 90px;} #tech01 .cont-box1 > .txt-cont > .txt {color: #333;} #tech01 .cont-box1 > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #tech01 .cont-box2 > ul {display: flex;gap: 130px;} #tech01 .cont-box2 > ul > li {display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;height: 100%;position: relative;} #tech01 .cont-box2 > ul > li::before, #tech01 .cont-box2 > ul > li:not(:first-child)::after {display: block;position: absolute;top: 50%;/* transform: translateY(-166%); */} #tech01 .cont-box2 > ul > li::before {font-size: 18px;font-weight: 600;text-align: center;left: -117px;transform: translateY(-166%);} #tech01 .cont-box2 > ul > li:nth-child(2)::before {content: 'Cross-linking';} #tech01 .cont-box2 > ul > li:nth-child(3)::before {content: 'Solidification';} #tech01 .cont-box2 > ul > li:not(:first-child)::after {content: '';width: 64px;height: 67px;background: url(../img/sub/img-tech01_arrow.png) center center / cover no-repeat;left: -94px;transform: translateY(-25%);} #tech01 .cont-box2 > ul > li > .img-cont {display: flex;flex-direction: column;justify-content: center;align-items: stretch;height: 405px;padding: 50px;border: 1px solid #E7E7E7;box-sizing: border-box;} #tech01 .cont-box2 > ul > li > .txt-cont {padding: 22px 10px;background: var(--color-main);color: #fff;font-weight: 600;text-align: center;line-height: 1.3;} #tech01 .cont-box2 > ul > li > .txt-cont > .txt {font-size: 1.20em;} #tech01 .cont-box2 > ul > li > .txt-cont > .stxt {font-size: 16px;} @media all and (max-width: 1399px){ #tech01 .cont-box1 > .img-cont {margin-bottom: 60px;} #tech01 .cont-box2 > ul {gap: 100px;} #tech01 .cont-box2 > ul > li::before {font-size: 16px;left: -94px;} #tech01 .cont-box2 > ul > li:not(:first-child)::after {left: -78px;} #tech01 .cont-box2 > ul > li > .img-cont {height: 372px;padding: 30px;} #tech01 .cont-box2 > ul > li > .txt-cont > .txt {font-size: 1.10em;} #tech01 .cont-box2 > ul > li > .txt-cont > .stxt {font-size: 16px;} } @media all and (max-width: 1260px){ #tech01 .cont-box2 > ul > li > .txt-cont > .stxt {font-size: 15px;} } @media all and (max-width: 1199px){ #tech01 .cont-box2 > ul > li > .img-cont {height: 308px;} #tech01 .cont-box2 > ul > li > .txt-cont {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100px;} #tech01 .cont-box1 > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1024px){ #tech01 .cont-box1 > .img-cont {margin-bottom: 40px;} #tech01 .cont-box1 > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} #tech01 .cont-box2 > ul {flex-wrap: wrap;justify-content: center;gap: 50px 100px;} #tech01 .cont-box2 > ul > li {width: calc(50% - 50px);} #tech01 .cont-box2 > ul > li > .img-cont {height: 426px;padding: 20px;} } @media all and (max-width: 768px){ #tech01 .cont-box1 > .txt-cont > .txt:not(:last-child) {margin-bottom: 15px;} #tech01 .cont-box2 > ul {flex-direction: column;gap: 100px;max-width: 580px;margin: 0 auto;} #tech01 .cont-box2 > ul > li {width: 100%;} #tech01 .cont-box2 > ul > li::before, #tech01 .cont-box2 > ul > li:not(:first-child)::after {left: 0;right: 0;margin: auto;} #tech01 .cont-box2 > ul > li::before {top: -67px;transform: translateX(75px);/* z-index: 1; */} #tech01 .cont-box2 > ul > li:not(:first-child)::after {top: -80px;transform: rotate(90deg);} #tech01 .cont-box2 > ul > li > .img-cont {height: auto;} } /* 기술소개 > CUHA Tech™ 끝 */ /* 기술소개 > UMAP Tech™ 시작 */ #tech02 .cont-box {display:flex;justify-content: space-between;gap: 148px;} #tech02 .cont-box > .img-cont {flex: 0 0 auto;max-width: 600px;width: 40%;} #tech02 .cont-box > .txt-cont {width: 100%;padding: 20px 0 0;} #tech02 .cont-box > .txt-cont > .tit {margin-bottom: 40px;color: var(--color-main);font-size: 1.75em;font-weight: 600;line-height: 1.3;} #tech02 .cont-box > .txt-cont > .txt {color: #333;} #tech02 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #tech02 .cont-box > .txt-cont > .txt-list {margin-bottom: 30px;} #tech02 .cont-box > .txt-cont > .txt-list > li {padding-left: 38px;position: relative;} #tech02 .cont-box > .txt-cont > .txt-list > li:not(:last-child) {margin-bottom: 20px;} #tech02 .cont-box > .txt-cont > .txt-list > li::before {content: '';display: block;width: 36px;height: 25px;background: url(../img/sub/img-tech02_ico.png) center center / cover no-repeat;position: absolute;top: 0;left: 0;} #tech02 .cont-box > .txt-cont > .txt-list > li > .tit {font-weight: 600;} #tech02 .cont-box > .txt-cont > .txt-list > li > .txt {color: #333;} @media all and (max-width: 1399px){ #tech02 .cont-box {gap: 108px;} #tech02 .cont-box > .txt-cont {padding: 0;} #tech02 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1199px){ #tech02 .cont-box {gap: 60px;} #tech02 .cont-box > .txt-cont > .tit {margin-bottom: 20px;} #tech02 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 15px;} #tech02 .cont-box > .txt-cont > .txt-list > li::before {width: 30px;height: 21px;} } @media all and (max-width: 1024px){ #tech02 .cont-box {flex-direction: column;max-width: 708px;margin: 0 auto;} #tech02 .cont-box > .img-cont {max-width: none;width: 100%;} #tech02 .cont-box > .txt-cont > .tit {text-align: center;} } @media all and (max-width: 640px){ #tech02 .cont-box {gap: 40px;} #tech02 .cont-box > .txt-cont > .tit {font-size: 30px;} #tech02 .cont-box > .txt-cont > .txt-list > li > p {display: inline;} } /* 기술소개 > UMAP Tech™ 끝 */ /* 기술소개 > ORTech™ 시작 */ #tech03 .cont-box {margin-bottom: 80px;} #tech03 .cont-box > .img-cont {margin-bottom: 90px;} #tech03 .cont-box > .txt-cont > .txt {color: #333;} #tech03 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} @media all and (max-width: 1399px){ #tech03 .cont-box > .img-cont {margin-bottom: 60px;} } @media all and (max-width: 1199px){ #tech03 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1024px){ #tech03 .cont-box > .img-cont {margin-bottom: 40px;} #tech03 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} } @media all and (max-width: 768px){ #tech03 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 15px;} } /* 기술소개 > ORTech™ 끝 */ /* 기술소개 > UDIS Tech™ 시작 */ #tech04 .cont-box {display:flex;justify-content: space-between;gap: 110px;} #tech04 .cont-box > .img-cont {flex: 0 0 auto;max-width: 600px;width: 40%;} #tech04 .cont-box > .txt-cont {width: 100%;padding: 70px 0 0;} #tech04 .cont-box > .txt-cont > .tit {margin-bottom: 40px;color: var(--color-main);font-size: 1.75em;font-weight: 600;line-height: 1.3;} #tech04 .cont-box > .txt-cont > .txt {color: #333;} #tech04 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} @media all and (max-width: 1420px){ #tech04 .cont-box {gap: 80px;} #tech04 .cont-box > .txt-cont {padding: 40px 0 0;} #tech04 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1199px){ #tech04 .cont-box {gap: 60px;} #tech04 .cont-box > .txt-cont {padding: 0;} #tech04 .cont-box > .txt-cont > .tit {margin-bottom: 20px;} #tech04 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 15px;} } @media all and (max-width: 1024px){ #tech04 .cont-box {flex-direction: column;max-width: 708px;margin: 0 auto;} #tech04 .cont-box > .img-cont {max-width: none;width: 100%;} #tech04 .cont-box > .txt-cont > .tit {text-align: center;} } @media all and (max-width: 640px){ #tech04 .cont-box {gap: 40px;} #tech04 .cont-box > .txt-cont > .tit {font-size: 30px;} } /* 기술소개 > UDIS Tech™ 끝 */ /* 제품정보 공통 부분 시작 */ .product .tb-wrap > table {min-width: 964px;} .product table {width: 100%;border-collapse: collapse;table-layout: fixed;clear: both;} .product table tr {border-bottom: 1px solid #D9D9D9;} .product table th:not(:last-child) {border-right: 1px solid #D9D9D9;} .product table thead th {height: 80px;background: var(--color-main);color: #fff;font-size: 1.25em;font-weight: 600;text-align: center;} .product table tbody > tr:not([rowspan]):last-child {border-left: 0;} .product table tbody > tr > th {color: #333;font-size: 1.25em;font-weight: 600;text-align: center;} .product table tbody > tr > td {padding: 26px 0;color: #333;text-align: center;} .product table tbody > tr > td:not(:first-child) {border-left: 1px solid #D9D9D9;} .product .tb-ntc {display: none;margin: 15px 0;padding: 0 25px;color: #555;font-size: 15px;text-align: center;line-height: 1.2;position: relative;} .product .tb-ntc:before, .product .tb-ntc:after {content: '';display: block;width: 0;height: 0;border-style: solid;} .product .tb-ntc:before {border-width: 9px 15.588px 9px 0px;border-color: transparent rgba(85,85,85,.3) transparent transparent;position: absolute;top: 50%;transform: translateY(-50%);left: 0;} .product .tb-ntc:after {border-width: 9px 0px 9px 15.588px;border-color: transparent transparent transparent rgba(85,85,85,.3);position: absolute;top: 50%;transform: translateY(-50%);right: 0;} .product .btn-cont {display: flex;justify-content: center;gap: 10px;} .product .btn-cont > a {display: block;width: 250px;padding: 15px 10px;border: 3px solid var(--color-main);border-radius: 33px;box-sizing: border-box;font-weight: 700;text-align: center;} .product .btn-cont > a:hover {text-decoration: underline;text-underline-offset: 4px;} .product .btn-cont > a.btn-shp {color: var(--color-main);} .product .btn-cont > a.btn-inq {color: #fff;background: var(--color-main);} @media all and (max-width: 1199px){ .product table thead th, .product table tbody th {font-size: 1.10em;} .product table tbody td {font-size: 18px;} } @media all and (max-width: 1024px){ .product table thead th {height: 60px;} .product table tbody td {padding: 20px 8px;} .product .tb-wrap {overflow-x: auto;} .product .tb-ntc {display: block;} } @media all and (max-width: 768px){ .product .btn-cont > a {width: 220px;} } @media all and (max-width: 640px){ .product .btn-cont > a {width: 200px;padding: 12px 10px;} } @media all and (max-width: 480px){ .product .btn-cont {flex-direction: column;align-items: center;} } /* 제품정보 공통 부분 끝 */ /* 제품정보 > Curing HA® 시작 */ #prd01 .cont-box1 > .txt-cont {max-width: 93%;margin: 0 auto;margin-bottom: 100px;} #prd01 .cont-box1 > .txt-cont > .txt {color: #333;text-align: center;} #prd01 .cont-box1 > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} @media all and (max-width: 1024px){ #prd01 .cont-box1 > .txt-cont {max-width: 90%;margin-bottom: 60px;} #prd01 .cont-box1 > .txt-cont > .txt {margin: 0 auto;} #prd01 .cont-box1 > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} #prd01 .cont-box1 > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 768px){ #prd01 .cont-box1 > .txt-cont {max-width: 100%;} } /* 제품정보 > Curing HA® 끝 */ /* 제품정보 > ERBELLA® 시작 */ #prd02 .cont-box1 > .txt-cont {max-width: 85%;margin: 0 auto;margin-bottom: 100px;} #prd02 .cont-box1 > .txt-cont > .txt {color: #333;text-align: center;} #prd02 .cont-box2 .tb-prd tr, #prd02 .cont-box2 .tb-prd th, #prd02 .cont-box2 .tb-prd tbody td:not(:first-child) {border: 0;} #prd02 .cont-box2 .tb-prd thead th {height: auto;background: transparent;font-size: 1.0em;} #prd02 .cont-box2 .tb-prd thead th span {display: inline-block;padding: 5px 43px;border-radius: 20px;background: var(--color-main);} #prd02 .cont-box2 .tb-prd tbody td {padding: 34px 0;} #prd02 .cont-box2 .tb-prd tbody td img {margin: 0 auto;} #prd02 .cont-box2 .tb1 tbody td > p {display: flex;justify-content: center;align-items: center;gap: 8px;} #prd02 .cont-box2 .tb1 tbody td > p::before {content: '';display: block;width: 4px;height: 4px;border-radius: 50%;background: #333;} #prd02 .cont-box2 .tb-caption {margin-top: 8px;color: #333;text-align: right;} @media all and (max-width: 1024px){ #prd02 .cont-box1 > .txt-cont {max-width: 90%;margin-bottom: 60px;} #prd02 .cont-box1 > .txt-cont > .txt {margin: 0 auto;} #prd02 .cont-box1 > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 768px){ #prd02 .cont-box1 > .txt-cont {max-width: 100%;} } /* 제품정보 > ERBELLA® 끝 */ /* 제품정보 > ERBELLA® Cosmedical 시작 */ #prd03 .cont-box > .txt-cont {max-width: 85%;margin: 0 auto;margin-bottom: 100px;} #prd03 .cont-box > .txt-cont > .txt {color: #333;text-align: center;} #prd03 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #prd03 .cont-box > .img-cont {margin-bottom: 50px;} #prd03 .cont-box > .item-list {counter-reset: list-number;display: flex;flex-wrap: wrap;gap: 50px;} #prd03 .cont-box > .item-list > li {counter-increment: list-number;display: flex;align-items: center;gap: 50px;width: calc(33.333% - 34px);padding: 50px 60px;border-radius: 10px;box-sizing: border-box;background: #F8F8F8;} #prd03 .cont-box > .item-list > li > .item-img {flex: 0 0 auto;max-width: 72px;width: 21%;} #prd03 .cont-box > .item-list > li > .item-info {width: 79%;} #prd03 .cont-box > .item-list > li > .item-info > .tit {margin-bottom: 5px;font-size: 1.50em;font-weight: 800;} #prd03 .cont-box > .item-list > li > .item-info > .tit::before {content: '0'counter(list-number);display: flex;justify-content: center;align-items: center;width: 30px;aspect-ratio: 1 / 1;border-radius: 50%;color: #fff;font-family: var(--font-Poppins);font-size: 20px;font-weight: 700;text-align: center;} #prd03 .cont-box > .item-list > li > .item-info > .tit > span {margin-left: 8px;font-size: 20px;} #prd03 .cont-box > .item-list > li > .item-info > .txt {line-height: 1.3;} /* 색상 */ #prd03 .cont-box > .item-list > li:nth-child(1) > .item-info > .tit::before {background: #462B52;} #prd03 .cont-box > .item-list > li:nth-child(2) > .item-info > .tit::before {background: #661B1A;} #prd03 .cont-box > .item-list > li:nth-child(3) > .item-info > .tit::before {background: #8D6281;} #prd03 .cont-box > .item-list > li:nth-child(4) > .item-info > .tit::before {background: #303930;} #prd03 .cont-box > .item-list > li:nth-child(5) > .item-info > .tit::before {background: #3D3D8D;} #prd03 .cont-box > .item-list > li:nth-child(6) > .item-info > .tit::before {background: #DB7A2E;} #prd03 .cont-box > .item-list > li:nth-child(7) > .item-info > .tit::before {background: #4A1811;} #prd03 .cont-box > .item-list > li:nth-child(1) > .item-info > .tit {color: #462B52;} #prd03 .cont-box > .item-list > li:nth-child(2) > .item-info > .tit {color: #661B1A;} #prd03 .cont-box > .item-list > li:nth-child(3) > .item-info > .tit {color: #8D6281;} #prd03 .cont-box > .item-list > li:nth-child(4) > .item-info > .tit {color: #303930;} #prd03 .cont-box > .item-list > li:nth-child(5) > .item-info > .tit {color: #3D3D8D;} #prd03 .cont-box > .item-list > li:nth-child(6) > .item-info > .tit {color: #DB7A2E;} #prd03 .cont-box > .item-list > li:nth-child(7) > .item-info > .tit {color: #4A1811;} @media all and (max-width: 1399px){ #prd03 .cont-box > .item-list {gap: 30px;} #prd03 .cont-box > .item-list > li {width: calc(33.333% - 20px);} #prd03 .cont-box > .item-list > li {gap: 40px;padding: 50px 40px;} #prd03 .cont-box > .item-list > li > .item-info > .tit {font-size: 1.20em;} } @media all and (max-width: 1199px){ #prd03 .cont-box > .item-list > li {gap: 60px;width: calc(50% - 15px);padding: 50px 70px;} #prd03 .cont-box > .item-list > li > .item-info > .tit {font-size: 1.10em;} } @media all and (max-width: 1024px){ #prd03 .cont-box > .txt-cont {max-width: 90%;margin-bottom: 60px;} #prd03 .cont-box > .txt-cont > .txt {margin: 0 auto;} #prd03 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} #prd03 .cont-box > .txt-cont > .txt > .line-br {display: inline;} #prd03 .cont-box > .item-list > li {gap: 38px;padding: 50px;} #prd03 .cont-box > .item-list > li > .item-info > .tit {font-size: 1.22em;} #prd03 .cont-box > .item-list > li > .item-info > .tit::before {font-size: 18px;} #prd03 .cont-box > .item-list > li > .item-info > .tit > span {margin-left: 5px;font-size: 16px;} } @media all and (max-width: 768px){ #prd03 .cont-box > .txt-cont {max-width: 100%;} #prd03 .cont-box > .item-list {gap: 20px;} #prd03 .cont-box > .item-list > li {flex-direction: column;gap: 20px;width: calc(50% - 10px);padding: 40px;} #prd03 .cont-box > .item-list > li > .item-img {width: 100%;} #prd03 .cont-box > .item-list > li > .item-info {width: 100%;} #prd03 .cont-box > .item-list > li > .item-info > .tit, #prd03 .cont-box > .item-list > li > .item-info > .txt {text-align: center;} #prd03 .cont-box > .item-list > li > .item-info > .tit::before {margin: 0 auto 3px;} } @media all and (max-width: 640px){ #prd03 .cont-box > .item-list {max-width: 440px;margin: 0 auto;} #prd03 .cont-box > .item-list > li {width: 100%;} } /* 제품정보 > ERBELLA® Cosmedical 끝 */ /* 제품정보 > ORTE® 시작 */ #prd04 .cont-box > .txt-cont {margin-bottom: 100px;} #prd04 .cont-box > .txt-cont > .txt {color: #333;text-align: center;} #prd04 .cont-box .tb1 tbody td {padding: 26px 38px;text-align: left;} #prd04 .cont-box .tb1 tbody td > p {display: flex;align-items: center;gap: 8px;} #prd04 .cont-box .tb1 tbody td > p:not(:has(span))::before {content: '';display: block;width: 4px;height: 4px;border-radius: 50%;background: #333;} #prd04 .cont-box .tb1 tbody td > p > span {padding-left: 5px;} #prd04 .cont-box .tb-prd, #prd04 .cont-box .in-tb1 {min-width: 694px;} #prd04 .cont-box .tb-prd tr, #prd04 .cont-box .tb-prd th, #prd04 .cont-box .tb-prd tbody td:not(:first-child) {border: 0;} #prd04 .cont-box .tb-prd thead th {height: auto;background: transparent;font-size: 1.0em;} #prd04 .cont-box .tb-prd thead th span {display: inline-block;padding: 5px 43px;border-radius: 20px;background: var(--color-main);} #prd04 .cont-box .tb-prd tbody td {padding: 34px 0;} #prd04 .cont-box .tb-prd tbody td img {margin: 0 auto;} #prd04 .cont-box .in-tb1 tr {border-bottom: 1px solid #E1E1E1;} #prd04 .cont-box .in-tb1 thead th:not(:last-child) {border-right: 1px solid #E1E1E1;} #prd04 .cont-box .in-tb1 thead th {height: 45px;background: #D9F4F1;color: #333;font-size: 1.0em;} #prd04 .cont-box .in-tb1 tbody > tr {background: #F9F9F9;} #prd04 .cont-box .in-tb1 tbody > tr > th {font-size: 1.0em;} #prd04 .cont-box .in-tb1 tbody > tr > td {height: 45px;padding: 0;text-align: center;} #prd04 .cont-box .in-tb1 tbody > tr > td:not(:first-child) {border-left: 1px solid #E1E1E1;} @media all and (max-width: 1599px){ #prd04 .cont-box > .txt-cont {max-width: 85%;margin: 0 auto;margin-bottom: 100px;} #prd04 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1399px){ #prd04 .cont-box > .txt-cont {max-width: 90%;} } @media all and (max-width: 1024px){ #prd04 .cont-box > .txt-cont {margin-bottom: 60px;} } @media all and (max-width: 768px){ #prd04 .cont-box > .txt-cont {max-width: 100%;} } /* 제품정보 > ORTE® 끝 */ /* 제품정보 > Theramogen® 시작 */ #prd05 .cont-box {margin-bottom: 0;} #prd05 .cont-box > .txt-cont {margin-bottom: 150px;} #prd05 .cont-box > .txt-cont > .txt {color: #333;} #prd05 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #prd05 .cont-box > .img-cont > .mo-view {display: none;} @media all and (max-width: 1470px){ #prd05 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1024px){ #prd05 .cont-box > .txt-cont {margin-bottom: 100px;} #prd05 .cont-box > .txt-cont > .txt {margin: 0 auto;} #prd05 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} #prd05 .cont-box > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 768px){ #prd05 .cont-box > .txt-cont {margin-bottom: 80px;} #prd05 .cont-box > .img-cont > .pc-view {display: none;} #prd05 .cont-box > .img-cont > .mo-view {display: block;} } /* 제품정보 > Theramogen® 끝 */ /* 제품정보 > LLEAFILL® 시작 */ #prd06 .cont-box > .txt-cont {/* max-width: 85%; */margin: 0 auto;margin-bottom: 100px;} #prd06 .cont-box > .txt-cont > .txt {color: #333;text-align: center;} #prd06 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 30px;} #prd06 .cont-box > .img-cont {margin-bottom: 70px;} #prd06 .cont-box > .list {display: flex;gap: 70px;margin-bottom: 100px;} #prd06 .cont-box > .list > li > .tit {margin-top: 26px;font-size: 1.25em;font-weight: 700;text-align: center;} /* #prd06 .cont-box > .btn-cont {display: flex;justify-content: center;gap: 10px;} #prd06 .cont-box > .btn-cont > a {display: block;width: 250px;padding: 15px 10px;border: 3px solid var(--color-main);border-radius: 33px;box-sizing: border-box;font-weight: 700;text-align: center;} #prd06 .cont-box > .btn-cont > a:hover {text-decoration: underline;text-underline-offset: 4px;} #prd06 .cont-box > .btn-cont > a.btn-shp {color: var(--color-main);} #prd06 .cont-box > .btn-cont > a.btn-inq {color: #fff;background: var(--color-main);} */ @media all and (max-width: 1399px){ #prd06 .cont-box > .txt-cont {max-width: 90%;} #prd06 .cont-box > .txt-cont > .txt > .line-br {display: inline;} #prd06 .cont-box > .list {gap: 60px;} } @media all and (max-width: 1024px){ #prd06 .cont-box > .txt-cont {margin-bottom: 60px;} #prd06 .cont-box > .txt-cont > .txt:not(:last-child) {margin-bottom: 20px;} #prd06 .cont-box > .img-cont {margin-bottom: 40px;} #prd06 .cont-box > .list {gap: 40px;} } @media all and (max-width: 768px){ #prd06 .cont-box > .txt-cont {max-width: 100%;} #prd06 .cont-box > .img-cont {margin-bottom: 20px;} #prd06 .cont-box > .list {gap: 20px;margin-bottom: 60px;} #prd06 .cont-box > .list > li > .tit {margin-top: 15px;font-size: 20px;} /* #prd06 .cont-box > .btn-cont > a {width: 220px;} */ } @media all and (max-width: 640px){ #prd06 .cont-box > .img-cont {margin-bottom: 10px;} #prd06 .cont-box > .list {gap: 10px;} #prd06 .cont-box > .list > li > .tit {font-size: 18px;} /* #prd06 .cont-box > .btn-cont > a {width: 200px;padding: 12px 10px;} */ } @media all and (max-width: 480px){ #prd06 .cont-box > .img-cont {margin-bottom: 30px;} #prd06 .cont-box > .list {flex-direction: column;gap: 30px;} #prd06 .cont-box > .list > li > .tit {font-size: 18px;} /* #prd06 .cont-box > .btn-cont {flex-direction: column;align-items: center;} */ } /* 제품정보 > LLEAFILL® 끝 */ /* 연구개발 > 연구소개 시작 */ #rnd .tit-cont {margin-bottom: 70px;text-align: center;} #rnd .tit-cont .tit {margin-bottom: 38px;font-size: 2.0em;font-weight: 700;line-height: 1.2;} #rnd .tit-cont .tit em {color: var(--color-main);font-style: normal;} #rnd .tit-cont .txt {color: #333;} #rnd .cont-box1 .notice {display: none;margin: 15px 0;padding: 0 25px;color: #555;font-size: 15px;text-align: center;line-height: 1.2;position: relative;} #rnd .cont-box1 .notice:before, #rnd .cont-box1 .notice:after {content: '';display: block;width: 0;height: 0;border-style: solid;} #rnd .cont-box1 .notice:before {border-width: 9px 15.588px 9px 0px;border-color: transparent rgba(85,85,85,.3) transparent transparent;position: absolute;top: 50%;transform: translateY(-50%);left: 0;} #rnd .cont-box1 .notice:after {border-width: 9px 0px 9px 15.588px;border-color: transparent transparent transparent rgba(85,85,85,.3);position: absolute;top: 50%;transform: translateY(-50%);right: 0;} #rnd .cont-box1 .tb-wrap {overflow-x: auto;} #rnd .cont-box1 .tb-wrap .tbl {width: 100%;min-width: 708px;} #rnd .cont-box1 .tb-wrap .tbl thead th {padding: 21px 10px;background: var(--color-main);color: #fff;font-size: 1.25em;font-weight: 600;text-align: center;} #rnd .cont-box1 .tb-wrap .tbl thead th:not(:last-child){border-right: 1px solid #D9D9D9;box-sizing: border-box;} #rnd .cont-box1 .tb-wrap .tbl tbody {text-align: center;} #rnd .cont-box1 .tb-wrap .tbl tbody tr {border-bottom: 1px solid #D9D9D9;box-sizing: border-box;} #rnd .cont-box1 .tb-wrap .tbl tbody tr th {border-right: 1px solid #D9D9D9;box-sizing: border-box;} #rnd .cont-box1 .tb-wrap .tbl tbody tr td {padding: 20px 0;color: #333;position: relative;} #rnd .cont-box1 .tb-wrap .tbl tbody tr td:not(:last-child){border-right: 1px solid #D9D9D9;box-sizing: border-box;} #rnd .cont-box1 .tb-wrap .tbl tbody tr td.box::before {content: '';display: block;width: 100%;height: 28px;background: #D9F5F2;position: absolute;top: 50%;left: 0;transform: translateY(-50%);} #rnd .cont-box1 .tb-wrap .tbl tbody tr td.box.end::before {width: 95%;border-top-right-radius: 14px;border-bottom-right-radius: 14px;} #rnd .cont-box1 .tb-wrap .tbl tbody tr td.box.half::before {width: 50%;border-top-right-radius: 14px;border-bottom-right-radius: 14px;} #rnd .cont-box2 ul {display: flex;gap: 0 115px;} #rnd .cont-box2 ul > li > .img-cont {margin-bottom: 45px;border-top-left-radius: 80px;border-bottom-right-radius: 80px;overflow: hidden;} #rnd .cont-box2 ul > li > .txt-cont {text-align: center;} #rnd .cont-box2 ul > li > .txt-cont > .tit {margin-bottom: 12px;font-size: 1.25em;font-weight: 600;} #rnd .cont-box2 ul > li > .txt-cont > .tit > span {color: var(--color-main);} #rnd .cont-box2 ul > li > .txt-cont > .txt {color: #6D6D6D;} @media all and (max-width: 1399px){ #rnd .cont-box2 ul {gap: 0 60px;} #rnd .cont-box2 ul > li > .txt-cont > .txt {padding: 0 20px;} #rnd .cont-box2 ul > li > .txt-cont > .txt > .line-br {display: inline;} } @media all and (max-width: 1199px){ #rnd .tit-cont .tit {/* font-size: 2.40em; */} #rnd .cont-box1 .tb-wrap .tbl thead th {padding: 19px 10px;font-size: 1.0em;} #rnd .cont-box1 .tb-wrap .tbl tbody tr td {padding: 20px 0;font-size: 18px;} #rnd .cont-box2 ul {gap: 0 30px;} #rnd .cont-box2 ul > li > .img-cont {margin-bottom: 30px;} #rnd .cont-box2 ul > li > .txt-cont > .tit {font-size: 1.20em;} #rnd .cont-box2 ul > li > .txt-cont > .txt {padding: 0 10px;} } @media all and (max-width: 1024px){ #rnd .tit-cont .tit {margin-bottom: 28px;/* font-size: 2.11em; */} #rnd .cont-box2 ul {gap: 0 20px;} #rnd .cont-box2 ul > li > .img-cont {margin-bottom: 20px;border-top-left-radius: 50px;border-bottom-right-radius: 50px;overflow: hidden;} #rnd .cont-box2 ul > li > .txt-cont > .txt {padding: 0 5px;} } @media all and (max-width: 768px){ #rnd .tit-cont .tit {margin-bottom: 20px;font-size: 1.89em;} #rnd .tit-cont .txt > .line-br {display: inline;} #rnd .cont-box1 .notice {display: block;} #rnd .cont-box1 .tb-wrap {overflow-x: auto;} #rnd .cont-box2 ul {justify-content: center;flex-wrap: wrap;gap: 40px 20px;} #rnd .cont-box2 ul > li {width: calc(50% - 10px);} } @media all and (max-width: 640px){ #rnd .tit-cont .tit {font-size: 1.78em;} #rnd .tit-cont .tit > .line-br {display: inline;} #rnd .cont-box1 .tb-wrap .tbl tbody tr th, #rnd .cont-box1 .tb-wrap .tbl tbody tr td {font-size: 16px;} #rnd .cont-box2 ul > li {width: 100%;} } /* 연구개발 > 연구소개 끝 */ /* 연구개발 > 인증 시작 */ #cert .cont-box {display: flex;justify-content: space-between;} #cert .cont-box .tit {font-size: 2.0em;font-weight: 700;} #cert .cont-box ul {display: flex;flex-wrap: wrap;gap: 50px;max-width: 1100px;width: 73%;} #cert .cont-box ul > li {width: calc(20% - 40px);} #cert .cont-box ul.list2 > li > .img-tit {margin-top: 20px;color: #333;text-align: center;} #cert .cont-box ul.list2 > li:nth-child(n+3) > .img-tit {display: flex;justify-content: center;align-items: center;gap: 0 5px;position: relative;} #cert .cont-box ul.list2 > li:nth-child(n+3) > .img-tit::before {content: '';display: block;width: 35px;height: 30px;background: url(../img/sub/img-cert_iso.png) center center / cover no-repeat;} @media all and (max-width: 1399px){ #cert .cont-box ul {gap: 40px;} #cert .cont-box ul > li {width: calc(20% - 32px);} } @media all and (max-width: 1199px){ #cert .cont-box ul {gap: 40px;} #cert .cont-box ul > li {width: calc(25% - 30px);} } @media all and (max-width: 1024px){ #cert .cont-box {flex-direction: column;gap: 20px 0;} #cert .cont-box ul {max-width: none;width: 100%;gap: 30px;} #cert .cont-box ul > li {width: calc(25% - 23px);} } @media all and (max-width: 768px){ #cert .cont-box ul {gap: 20px;} #cert .cont-box ul > li {width: calc(25% - 15px);} } @media all and (max-width: 640px){ #cert .cont-box .tit {font-size: 1.67em;} #cert .cont-box ul {gap: 20px 10px;} #cert .cont-box ul > li {width: calc(33.333% - 7px);} } @media all and (max-width: 480px){ #cert .cont-box ul > li {width: calc(50% - 5px);} } /* 연구개발 > 인증 끝 */ /* 개인정보처리방침 시작 */ [class*=privacy_con] {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100% - 40px);max-width: 1200px;height: calc(100% - 40px);max-height: 600px;z-index: 999999;background: #fff;border: 1px solid var(--color-main);box-sizing: border-box;} [class*=privacy_con] .top{height: 70px;width: 100%;background: var(--color-main);text-align: center;position: relative;top: 0;left: 0;} [class*=privacy_con] .top p{line-height: 70px;color: #fff;font-family: var(--font-Pretendard);font-size:20px;font-weight: bold;} [class*=privacy_con] .top span{position: absolute;top: 0;right: 0;height: 100%;width: auto;aspect-ratio: auto 1 / 1;cursor: pointer;} [class*=privacy_con] .top span::after{width: 2px;height:50%;content:"";display: block;background: #fff;transform: translate(-50%, -50%) rotate(45deg);top: 50%;left: 50%;position: absolute;} [class*=privacy_con] .top span::before{width: 2px;height:50%;content:"";display: block;background: #fff;transform: translate(-50%, -50%) rotate(-45deg);top: 50%;left: 50%;position: absolute;} [class*=privacy_con] #privacy{border: 1px solid #eeeeee; width: calc(100% - 140px); height: calc(100% - 210px); overflow-y: auto; margin: 70px auto 0; padding: 20px;} [class*=privacy_con] #privacy>b{display: block; margin-bottom: 20px; word-break: keep-all; font-size:17px; color: #000000;} [class*=privacy_con] #privacy>.list{} [class*=privacy_con] #privacy>.list li{display: flex; align-items: flex-start; line-height: 22px;margin-bottom: 10px;} [class*=privacy_con] #privacy>.list li span{display: block;word-break: keep-all;margin-right: 10px; color: #666666;font-size:17px;} [class*=privacy_con] #privacy>.list li p{display: block;word-break: keep-all; color: #666666;font-size:17px;} [class*=privacy_con] #privacy>.list_con{margin-top: 30px;} [class*=privacy_con] #privacy>.list_con li{margin-bottom: 30px;} [class*=privacy_con] #privacy>.list_con li:last-child{margin-bottom:0px;} [class*=privacy_con] #privacy>.list_con li>b{word-break: keep-all;display: flex;align-items: flex-start;line-height: 22px;margin-bottom: 10px;font-family: var(--font-pretendard);font-size:20px;} [class*=privacy_con] #privacy>.list_con li>b span{display: block;word-break: keep-all;margin-right: 10px;} [class*=privacy_con] #privacy>.list_con li p{display: block;word-break: keep-all;color: #000;font-family: var(--font-pretendard);font-weight: 500;font-size:17px;margin-bottom: 10px;line-height: 20px;} [class*=privacy_con] #privacy>.list_con li>span{display: block;word-break: keep-all; color: #666666; font-size:15px;margin-bottom: 10px;} [class*=privacy_con] #privacy .date_wrap{margin-top: 100px;} [class*=privacy_con] #privacy .date_wrap p{display: block;word-break: keep-all;font-size: 15px;font-weight: 500;color: #000;} @media all and (max-width : 1199px){ [class*=privacy_con] #privacy{ width: calc(100% - 70px); height: calc(100% - 140px); margin: 35px auto 0;} } @media all and (max-width : 1024px){ [class*=privacy_con] .top{height: 50px;} [class*=privacy_con] .top p{line-height: 50px;} } @media all and (max-width : 640px){ [class*=privacy_con] #privacy{width: 100%; height: calc(100% - 40px); margin: 0 auto; border: unset;} } /* 개인정보처리방침 끝 */