/* ******************************************************* * filename : content.css * description : 서브페이지 컨텐츠 CSS * date : 2020-11-25 ******************************************************** */ /* ****************** 서브공통 ********************** */ .br-400{display: none;} @media all and (max-width:400px){ .br-400{display: block;} } /* -------- 공통 스크롤바 -------- */ .custom-scrollbar-cover{display:none;} /* -------- 공통 :: 탭 -------- */ /* Tab 공통 스타일 */ .sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; } .sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;} .sub-tab-list-style ul:after{display:none} .sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 } .sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;} .sub-tab-list-style ul li a{display:table; height:58px; width:100%; } .sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;} .sub-tab-list-style ul li.selected{z-index:1; } .sub-tab-list-style ul li.selected a{background-color:#333; border-color:#333} .sub-tab-list-style ul li.selected a em{color:#fff; } /* Tab Fixed Move*/ .sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;} /* Mobile Tab Drop Menu */ .sub-drop-open-btn-style{display:none} @media all and (min-width:1025px){ /* Tab Fixed Background */ .sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s} .sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%} } /* ****************** Company :: CEO Greeting ********************** */ .greeting-con {display:flex; } .greeting-con .left-con {width:32.3%;} .greeting-con .left-con .txt-box { padding:0 2.34vw; border-radius:20px; border-bottom-right-radius:0; color:#fff; background: rgb(0,163,230); background: linear-gradient(38deg, rgba(0,163,230,1) 0%, rgba(118,115,249,1) 100%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .greeting-con .left-con .txt-box .tit {display:block; padding:1.04em 0 0.625em; font-size:3em; line-height:1.2; font-weight:600; letter-spacing:-0.25px; border-bottom: 1px solid rgba(255,255,255,0.2);} .greeting-con .left-con .txt-box .txt {padding:2.27em 0; font-size:1.375em; line-height:1.45em;} .greeting-con .right-con {width:67.7%; padding-left:3.125vw;} .greeting-con .right-con .txt {color: #757575; line-height:2em; letter-spacing:-0.1px; margin-top:1.875em} .greeting-con .right-con .txt:first-child {margin-top:0;} .greeting-con .right-con .sign-box {display:flex; justify-content:flex-end; align-items:center; border-top:1px solid #dedede; padding-top:2.5em; margin-top:2.5em; } .greeting-con .right-con .sign-box .name {text-align:right; color:#2f2f2f; font-weight:600; margin-right: 1.25em;} .greeting-con .right-con .sign-box .name span {display:block; color: #00a4e2; letter-spacing:-0.25px; margin-top:5px;} /* 국문만 수정 */ .greeting-con .left-con .txt-box.kr-txt-box{height: 330px; display: flex; flex-direction: column; justify-content: center;} .greeting-con .left-con .txt-box.kr-txt-box .tit{padding: 0; border-bottom: none;} .greeting-con .left-con .txt-box.kr-txt-box .tit:after{margin-top: 20px; display: block; content: ''; width: 30px; height: 3px; background-color: #fff;} .greeting-con .right-con .kr-sign-box{display:flex; flex-direction: column; align-items: flex-end; font-size: 16px; color: #757575; line-height: 1.4em; letter-spacing: -0.1px;} .greeting-con .right-con .kr-sign-box .company{} .greeting-con .right-con .kr-sign-box .ceo-name{font-size: 14px; margin-top: 5px;} .greeting-con .right-con .kr-sign-box .ceo-name span{margin-left: 5px; font-size: 18px; color:#2f2f2f; font-weight:600;} /* ****************** Company :: Core Value ********************** */ /* 상단 컨텐츠 */ .value-top-con {position:relative; } .value-top-con .circle-box {position:relative; width:442px; height:415px; background:url("../image/value_circle_line_bg.png"); background-size:100%; margin:0 auto; } .value-top-con .circle-box img {width:100%;} .value-top-con .circle-box span {display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /* margin-top:-15px; */ font-size:2.25em; letter-spacing:-0.25px; color:#fff; line-height:1.3; text-align:center; font-weight:600;} .value-top-con .con-list li {text-align:center; position:absolute; width:33.33%; } .value-top-con .con-list li .icon {display:block; height: 98px; background:center no-repeat; margin-bottom:2em;} .value-top-con .con-list li.item01 {left:0; top:44px;} .value-top-con .con-list li.item02 {right:0; top:44px;} .value-top-con .con-list li.item03 {position:relative; margin: 1.875em auto 0;} .value-top-con .con-list li.item01 .icon {background-image:url("../image/value_top_icon_01.png");} .value-top-con .con-list li.item02 .icon {background-image:url("../image/value_top_icon_02.png");} .value-top-con .con-list li.item03 .icon {background-image:url("../image/value_top_icon_03.png");} .value-top-con .con-list li .tit {font-size: 1.375em; letter-spacing:-0.5px; color:#2f2f2f; line-height:1.81; } .value-top-con .con-list li .txt { letter-spacing:-0.5px; color:#5f5f5f; line-height:1.875; margin-top:0.93em;} /* 하단 컨텐츠 */ .value-bottom-con {padding:0 184px; margin-top:1.125em;} .value-bottom-con .con-list {position:relative; display:flex; justify-content:space-between;} .value-bottom-con .con-list:before {content:""; position:absolute; top:-60px; left:0; width:100%; height:100%; background:url("../image/value_bg.png") no-repeat; z-index:-1; background-size:100% auto;} .value-bottom-con .con-list li {width:105px; text-align:center; } .value-bottom-con .con-list li .icon {display:block; padding-top:100%; background: center no-repeat; background-size:100%;} .value-bottom-con .con-list li.item01 .icon {background-image:url("../image/value_circle_icon_01.png");} .value-bottom-con .con-list li.item02 .icon {background-image:url("../image/value_circle_icon_02.png");} .value-bottom-con .con-list li.item03 .icon {background-image:url("../image/value_circle_icon_03.png");} .value-bottom-con .con-list li.item04 .icon {background-image:url("../image/value_circle_icon_04.png");} .value-bottom-con .con-list li.item05 .icon {background-image:url("../image/value_circle_icon_05.png");} .value-bottom-con .con-list li dd {font-size: 0.9em; color: #5f5f5f; letter-spacing:-0.1px; line-height:1.65em; margin-top:0.625em; } .value-bottom-con .con-list li.center {margin-top:30px;} .value-bottom-con .con-list li.side {margin-top:-60px;} /* ****************** Company :: Network ********************** */ /* 지도 */ .network-map-con{position:relative;} .network-map-con > img {width:100%;} .network-map-con-m{display:none;} .network-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; } .network-nation-box .arrow {display:block; text-align:center; margin:210px 0 0 -195px; z-index:1; opacity:0; -moz-transform: scale(0); transform:scale(0); animation: arrow-ani 3s 1.3s infinite; } .network-nation-box .arrow img {display:inline-block; margin:-30px 0 0 129px; image-rendering: optimizeQuality;} .network-nation-box .arrow span {display:inline-block; width:631px; height:242px; margin:-30px 0 0 129px; background:url("../image/network_arrow.png") no-repeat; background-size:100% auto; } @keyframes arrow-ani { 0% { opacity:0; -moz-transform: scale(0); transform:scale(0); } 100% { opacity:1.0; -moz-transform: scale(1); transform:scale(1); } } @keyframes network-nation-circle { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0.5; } 50% { opacity: 1.0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .network-nation-circle{position:absolute; left:50%; top:50%; display:inline-block; width:80px; height:80px; cursor:pointer;} .network-nation-circle > span:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; } .network-nation-circle > span:nth-child(3) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .network-nation-circle > span:nth-child(4) { -webkit-animation-delay: 2s; animation-delay:2s; } .network-nation-circle > span:nth-child(5) { -webkit-animation-delay: 2.5s; animation-delay:2.5s; } .network-nation-circle > span:nth-child(6) { -webkit-animation-delay: 4s; animation-delay:4s; } .network-nation-circle > span { background-color: rgba(0, 168, 229, 0.1); border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; -webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; } .network-nation-circle i{ display:block; position:absolute; top:50%; left:50%; margin:-5px 0 0 -5px; width:6px; height:6px; background-color:#fff; border:2px solid; -webkit-border-radius:10px; border-radius:10px; } .network-nation-circle p {position:absolute; top:-75px; left:50%; transform:translateX(-50%); width:8.35em; font-size:14px; height:2.28em; line-height: 2.28em; font-weight: 500; letter-spacing: -0.25px; color:#fff; text-align: center; -webkit-border-radius: 35px; border-radius: 35px;} .network-nation-circle p:before{position: absolute; top: 30px; left: 50%; transform:translateX(-50%); display: block; content: ''; width: 1px; height: 80px; } .network-nation-circle p:after {content:""; position:absolute; top:100%; left:50%; margin-left:-11px; width: 0px;height: 0px; border-top:7px solid red; border-bottom:0; border-right: 11px solid transparent; border-left: 11px solid transparent; } .network-nation-box .map-logo {position:absolute; left:50%; top:50%; display:inline-block; width:auto; white-space:nowrap; font-size:17px; letter-spacing:-0.7px; color: #0090d5; font-weight:600; } .network-nation-box .map-logo:before {content:"";display:inline-block; vertical-align:middle;width:25px; height:31px; background:url("../image/network_logo.png");margin-right:10px;} .network-nation-box .map-logo[title="Eunsung USA"]:before, .network-nation-box .map-logo[title="Eunsung China"]:before {display:none;} .network-nation-box .map-logo[title="Eunsung USA"]:after, .network-nation-box .map-logo[title="Eunsung China"]:after {content:"";display:inline-block; vertical-align:middle;width:25px; height:31px; background:url("../image/network_logo.png");margin-left:10px;} .network-nation-circle[title="Europe"] p,.network-nation-circle[title="Europe"] p:before {background-color:#129ce9; } .network-nation-circle[title="Europe"] p:after {border-top-color:#129ce9;} .network-nation-circle[title="Europe"] i {border-color:#129ce9;} .network-nation-circle[title="Asia"] p, .network-nation-circle[title="Asia"] p:before {background-color:#2cac74; } .network-nation-circle[title="Asia"] p:after {border-top-color:#2cac74;} .network-nation-circle[title="Asia"] i {border-color:#2cac74;} .network-nation-circle[title="Asia"] > span {background-color: rgba(44,172,116,0.1);} .network-nation-circle[title="Africa"] p,.network-nation-circle[title="Africa"] p:before {background-color:#31c4bb; } .network-nation-circle[title="Africa"] p:after {border-top-color:#31c4bb;} .network-nation-circle[title="Africa"] i {border-color:#31c4bb;} .network-nation-circle[title="Africa"] > span {background-color: rgba(49,196,187,0.1);} .network-nation-circle[title="Oceania"] p, .network-nation-circle[title="Oceania"] p:before {background-color:#4651b9; } .network-nation-circle[title="Oceania"] p:after {border-top-color:#4651b9;} .network-nation-circle[title="Oceania"] i {border-color:#4651b9;} .network-nation-circle[title="Oceania"] > span {background-color: rgba(70,81,185,0.1);} .network-nation-circle[title="NAmericas"] p,.network-nation-circle[title="NAmericas"] p:before {background-color:#7673f9; } .network-nation-circle[title="NAmericas"] p:after {border-top-color:#7673f9;} .network-nation-circle[title="NAmericas"] i {border-color:#7673f9;} .network-nation-circle[title="NAmericas"] > span {background-color: rgba(118,115,249,0.1);} .network-nation-circle[title="LAmerica"] p,.network-nation-circle[title="LAmerica"] p:before {background-color:#5f84ec; } .network-nation-circle[title="LAmerica"] p:after {border-top-color:#5f84ec;} .network-nation-circle[title="LAmerica"] i {border-color:#5f84ec;} .network-nation-circle[title="LAmerica"] > span {background-color: rgba(95,132,236,0.1);} .network-nation-circle[title="Middle East"] p,.network-nation-circle[title="Middle East"] p:before {background-color:#5282f3; } .network-nation-circle[title="Middle East"] p:after {border-top-color:#5282f3;} .network-nation-circle[title="Middle East"] i {border-color:#5282f3;} .network-nation-circle[title="Middle East"] > span {background-color: rgba(82,130,243,0.1);} /* 나라 리스트 */ .network-nation-con {padding-top:25px;} .network-nation-con .nation-list {display:flex; justify-content:space-between; border:1px solid #ddd;} .network-nation-con .nation-list li {position:relative; max-width:250px; width:100%; border-left:1px solid #ddd;} .network-nation-con .nation-list li:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%;box-shadow:-5px -3px 28px rgb(0 0 0 / 42%); border:1px solid #4587f1; opacity:0;filter:Alpha(opacity=100); z-index:9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .network-nation-con .nation-list li:first-child {border-left:0;} .network-nation-con .nation-list li.col02 {max-width:300px;} .network-nation-con .nation-list li.col02 .txt-box {display:flex; } .network-nation-con .nation-list li.col02 .txt {width:50%;} .network-nation-con .nation-list li .tit-box {position:relative; padding:20px 15px 20px 25px; background: #f6f6f6; } .network-nation-con .nation-list li .tit-box:before { content:""; width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; opacity:0;filter:Alpha(opacity=0); transition: all 0.5s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#06a1e7+0,6e76f8+100 */ background: #06a1e7; /* Old browsers */ background: -moz-linear-gradient(45deg, #06a1e7 0%, #6e76f8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #06a1e7 0%,#6e76f8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #06a1e7 0%,#6e76f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06a1e7', endColorstr='#6e76f8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .network-nation-con .nation-list li .tit-box .tit {position:relative; letter-spacing:-0.25px; color:#2f2f2f; transition: all 0.4s;} .network-nation-con .nation-list li .txt-box {padding:10px 25px;} .network-nation-con .nation-list li .txt-box .txt {font-size: 0.875em; line-height:1.857em; color: #757575; } .network-nation-con .nation-list li .txt-box .txt span {display:block;} .network-nation-con .nation-list li:nth-child(4) .tit-box .tit {font-size:15px;} /* on */ .network-nation-con .nation-list li.on {border-color:transparent;} .network-nation-con .nation-list li.on:before, .network-nation-con .nation-list li.on .tit-box:before {opacity:1;filter:Alpha(opacity=100);} .network-nation-con .nation-list li.on .tit-box .tit {color:#fff;} /* 각국정보 */ .network-world-con {padding-top:80px;} .network-world-tit {display:block; text-align:center; font-size: 2.25em; letter-spacing:-0.35px; color:#2f2f2f; } .network-world-con .con-box {margin-top: 40px;} .network-world-list {display:flex; flex-wrap:wrap; margin:0 -1.12%} .network-world-list li {width:47.36%; min-height:250px; margin:1.5% 1.12%; padding:3.07% 3.84%; border:1px solid #e2e2e2; border-radius:20px; box-shadow:5px 5px 20px rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .network-world-list li .top-box {position:relative; padding-right:110px; } .network-world-list li .top-box .flag-box {position:absolute; right:0; top:50%; transform:translateY(-50%);} .network-world-list li .top-box .flag { display:inline-block; vertical-align:middle;} .network-world-list li .top-box .flag img {height:24px;} .network-world-list li .top-box .flag img[alt="New Zealand"] {margin-left:7px;} .network-world-list li .top-box .tit {display:inline-block; vertical-align:middle; font-size:1.125em; color: #333; font-weight:600; } .network-world-list li .info-box {padding-top:22px; margin-top:24px; border-top: 1px solid #e8e8e8;} .network-world-list li .info-box .txt {position:relative; padding-left:32px; display:block; line-height:1.5; letter-spacing:-0.25px; font-weight:500; color: #666; margin-top:17px;} .network-world-list li .info-box .txt:first-child {margin-top:0;} .network-world-list li .info-box .txt i {position:absolute; left:0; top:3px; font-size:20px; } @media all and (max-width:800px){ .network-world-list {display:block; margin:0;} .network-world-list li {width:100%; min-height:auto; margin:20px 0; padding:30px;} .network-world-list li .info-box {padding-top:15px;} } /* 카운팅 컨텐츠 */ .network-count-con {padding:5.625em 0; margin-top:5em; background-color: #f7f7f7;} .network-count-con .tit {display:block; text-align:center; font-size: 2.25em; letter-spacing:-0.35px; color:#2f2f2f; } .network-count-con .con-box {display:flex; margin-top:4.375em; } .network-count-con .con-box .count-item {width:25%; text-align:center;} .network-count-con .con-box .icon {display:block; height:3em; background:center no-repeat; background-size:auto 100%;} .network-count-con .con-box .num {display:block; font-size: 3.75em; color:#3ab2ec; font-weight:700; margin: 0.33em 0;} .network-count-con .con-box .num.percent:after {content:"%"; font-size:0.3em} .network-count-con .con-box .item01 .icon {background-image:url("../image/network_icon_01.png");} .network-count-con .con-box .item02 .icon {background-image:url("../image/network_icon_02.png");} .network-count-con .con-box .item03 .icon {background-image:url("../image/network_icon_03.png");} .network-count-con .con-box .item04 .icon {background-image:url("../image/network_icon_04.png");} .network-count-con .con-box .txt {color: #808080; letter-spacing:-0.25px; line-height: 1.875em;} /* ****************** Company :: patents ********************** */ .certificate-page-tit{padding-left: 12px; margin-bottom: 20px; position: relative; font-size: 26px; font-weight: 600; letter-spacing: -0.25px; color: #4a4a4a;} .certificate-page-tit:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 7px; height: 7px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #00a8e5;} .certificate-list > ul{margin:0 -1%;} .certificate-list > ul li{float:left; width:23%; margin:0 1% 50px 1%;} .certificate-list > ul li:nth-child(4n+1){clear: both;} .certificate-list .certificate-img-thumb{position:relative; padding-top: 315px; background-color: #f4f4f4;} .certificate-list .certificate-img-thumb .img-con{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 139px; height: 199px;} .certificate-list .certificate-img-thumb .img-con:before{position: absolute; top: -13px; left: -13px; display: block; content: ''; width: 165px; height: 233px; background: url("../image/certificate_cover.png") 0 0 no-repeat; z-index: 1;} .certificate-list .certificate-img-thumb .img-con span{position: relative; width: 100%; height: 0; padding-top: 199px; display: block;} .certificate-list .certificate-img-thumb .img-con span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;} .certificate-list .certificate-img-thumb .certificate-over-box{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid #00a8e5; opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.3s; transition:all 0.3s} .certificate-img-thumb .certificate-over-box i{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background-color:#00a8e5; text-align:center; line-height:50px; color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .certificate-list .certificate-tit{font-size:16.5px; line-height: 1.3; color:#444; font-weight:600; letter-spacing:-0.5px; text-align:center; max-width:100%; /* height: 63px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; */ padding-top: 15px;} .certificate-list .certificate-txt{margin-top: 12px; font-size: 15.5px; letter-spacing: -0.5px; color: #8c8c8c; text-align: center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} @media all and (min-width:801px){ .certificate-list > ul li a:hover .certificate-img-thumb .certificate-over-box{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;} } /* ************************** * Product :: 제품 리스트 ************************** */ /* 탭 */ .product-list-tab-style{height: 50px;} .product-list-tab{text-align: center; font-size: 0;} .product-list-tab li{display: inline-block; position: relative;} .product-list-tab li + li{margin-left: 56px;} .product-list-tab li + li:before{position: absolute; top: 50%; margin-top: -6px; left: -28px; content: ''; width: 1px; height: 12px; background-color: #ddd;} .product-list-tab li a{padding: 0 15px; display: inline-block; font-size: 17px; line-height: 50px; font-weight: 600; letter-spacing: -0.25px; color: #cfcfcf; -webkit-border-radius: 50px; border-radius: 50px; -webkit-transition: all 0.3s; transition: all 0.3s;} .product-list-tab li.selected a{color: #5e5e5e; background-color: #f4f4f4;} /* 제품 리스트 */ .product-list-con{margin-top: 55px;} .sub-prd-list{margin: -30px -3.5%;} .sub-prd-item{width: 26.33%; margin: 30px 3.5%; float: left;} .sub-prd-item a{position: relative; height: 0; padding-top: 126.5%; display: block; /* padding-top: 18%; */ text-align: center; border: 1px solid #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 13px 13px 32px -6px rgba(0,0,0,0.08); -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-prd-item a:before{opacity: 0; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block; content: ''; background: url("../image/gradient_line.png") center/contain no-repeat; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;/* border: 6px solid; border-image-slice: 1; border-width: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; border-image-source: linear-gradient(to top right, #02a2e6, #7573f9); -webkit-border-radius: 30px; border-radius: 30px; */} .sub-prd-item a:after{opacity: 0; position: absolute; top: -25px; left: 50%; margin-left: -25px; display: block; width: 50px; height: 50px; font-size: 20px; line-height: 50px; text-align: center; color: #fff; -webkit-border-radius: 100%; border-radius: 100%; z-index: 2; -webkit-transition: all 0.3s; transition: all 0.3s; content: '\e914'; font-family:xeicon; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e9de8+0,667af6+100 */ background: #0e9de8; /* Old browsers */ background: -moz-linear-gradient(left, #0e9de8 0%, #667af6 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #0e9de8 0%,#667af6 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #0e9de8 0%,#667af6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e9de8', endColorstr='#667af6',GradientType=1 ); /* IE6-9 */} .sub-prd-item .prd-tit{position: absolute; top: 15%; left: 0; width: 100%; z-index:1;} .sub-prd-item .prd-category{margin-bottom: 10px; font-size: 16px; line-height: 1.3; letter-spacing: -0.25px; color: #808080;} .sub-prd-item .prd-name{padding: 0 10px; font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #5e5e5e;} .sub-prd-item .prd-thumb{margin-top: 20px; margin-top: 0; position: absolute; bottom: 0; left: 0; width: 100%;} .sub-prd-item .prd-thumb span{position:relative; display:block; padding-top:84.23%; padding-top: 127.02%; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px;} .sub-prd-item .prd-thumb img{position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition: all 0.3s; transition: all 0.3s;} @media all and ( min-width: 801px ){ .product-list-tab li a:hover{color: #5e5e5e; background-color: #f4f4f4;}. .sub-prd-item li a:hover{color: #5e5e5e;} .sub-prd-item a:hover{box-shadow: 13px 13px 24px -6px rgba(0,0,0,0.3);} .sub-prd-item a:hover:before{opacity: 1;} .sub-prd-item a:hover:after{opacity: 1;} .sub-prd-item a:hover .prd-thumb img{-webkit-transform: scale(1.05) rotate(0.02deg); transform: scale(1.05) rotate(0.02deg);} } /* ************************** * Product :: 제품 뷰페이지 ************************** */ .product-view-page{padding-bottom: 60px;} /* 제품 타이틀 영역 */ .product-view-tit .area{padding: 0 60px; padding-bottom: 50px; position: relative; text-align: center; border-bottom: 1px solid #ebebeb; -webkit-box-sizing: border-box; box-sizing: border-box;} .product-view-tit .area:before{position: absolute; bottom: -2px; left: 50%; margin-left: -24px; display: block; content: ''; width: 48px; height: 3px; background-color: #5e5e5e;} .product-view-tit p{font-size: 16px; line-height: 1.6; letter-spacing: -0.25px; color: #afafaf;} .product-view-tit h5{margin-top: 10px; font-size: 60px; line-height: 1.2; letter-spacing: -0.25px; font-weight: 700; color: #5e5e5e;} .product-view-prev-btn, .product-view-next-btn{position: absolute; top: 50%; margin-top: -70px;} .product-view-prev-btn{left: 0;} .product-view-next-btn{right: 0;} .product-view-prev-btn i, .product-view-next-btn i{font-size: 60px; color: #5e5e5e; -webkit-transition: all 0.2s; transition: all 0.2s;} @media all and (min-width:801px){ .product-view-prev-btn:hover i{-webkit-transform: translateX(-5px); transform: translateX(-5px);} .product-view-next-btn:hover i{-webkit-transform: translateX(5px); transform: translateX(5px);} } /* 제품 배너 영역 */ .product-view-bnr{padding-top: 60px;} .product-view-bnr .pc-img{width: 100%; height: auto;} .product-view-bnr .m-img{display: none; width: 100%; height: auto;} /* 제품 영상 영역 */ .product-view-video{padding-top: 80px;} .product-view-gif{width: 100%; overflow: hidden;} .product-view-gif img{width: 100%; height: auto;} .product-view-gif video{width: 100%; height: auto; position: relative; transform: scale(1.08);} /* 제품 둥근프레임 사진영역 */ .product-round-frame{text-align: center; border-radius: 20px; border: 1px solid #ddd; padding: 6.5vh 2vw; -webkit-box-sizing: border-box; box-sizing: border-box;} .product-round-frame img{max-width: 100%;} /* 제품 설명 영역 - 공통 */ .product-view-item{padding-top: 120px;} .product-view-item-tit{margin-top: 0; margin-bottom: 30px; font-size: 50px; line-height: 1.2; letter-spacing: -0.25px; font-weight: 700; color: #5e5e5e; text-align: center;} .editor .product-view-item-tit{margin-top: 0; margin-bottom: 30px; font-size: 50px; line-height: 1.2; letter-spacing: -0.25px; font-weight: 700; color: #5e5e5e; text-align: center;} /* 제품 설명 영역 - 묶음설명 */ .product-view-tip-list{margin: 0 -1.15%;} .product-view-tip-list + .product-view-tip-list{margin-top: 80px;} .product-view-tip-item{float: left; margin: 0 1.15%;} .product-view-tip-item.col-1, .product-view-tip-item.col-2{width: 37.7%;} .product-view-tip-item.col-3{width: 57.7%;} .product-view-tip-item.w-full{width: 97.7%;} .product-view-tip-item.width-857{width: 64.1%;} /* width: 857px; */ .product-view-tip-item.width-840{width: 63.2%; margin: auto; float: none;} .product-view-tip-item.width-768{width: 57.2%;} .product-view-tip-item.width-768 + .product-view-tip-item.col-3{width: 38.2%;} /* width: 723px; */ .product-view-tip-item.width-638{width: 49.08%; margin: auto; float: none;} /* width: 638px; */ .product-view-tip-item.width-545{width: 41%;} .product-view-tip-item.width-545 + .product-view-tip-item.col-4{width: 54.4%;} /* width: 723px; */ .product-view-tip-item.width-507{width: 38.13%;} .product-view-tip-item.width-507 + .product-view-tip-item.col-3{width: 57.2%;} .product-view-tip-item.width-485{width: 36.47%;} .product-view-tip-item.width-485 + .product-view-tip-item.col-4{width: 58.9%;} /* width: 783px; */ .product-view-tip-item.width-416{width: 31.3%;} .product-view-tip-item.width-416 + .product-view-tip-item{width: 63.9%;} /* width: 849px; */ .product-view-tip-item.width-50{width: 47.7%;} .product-view-tip-item .tit{width: 100%; height: 68px; font-size: 28px; font-weight: 700; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #b8b8b8; -webkit-border-radius: 20px; border-radius: 20px; padding: 0 15px; text-align: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .product-view-tip-item .tit.bg01{background-color: rgba(105,105,105,0.85);} .product-view-tip-item .tit.bg02{background-color: #ababab;} .product-view-tip-item .tit.bg03{background-color: #7f7f7f;} .product-view-tip-item .inner-list{margin: 0 -7.5px; margin-top: 15px; font-size: 0; text-align: center; display: flex; flex-wrap:wrap;} .product-view-tip-item.row .inner-list{margin: -7.5px;} .product-view-tip-item .inner-list li{display: inline-block; width: calc(100% - 15px); margin: 0 7.5px; border: 1px solid #eee; -webkit-border-radius: 20px; border-radius: 20px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;} .product-view-tip-item.col-2 .inner-list li{width: calc(50% - 15px);} .product-view-tip-item.col-3 .inner-list li{width: calc(33.33% - 15px);} .product-view-tip-item.col-4 .inner-list li{width: calc(25% - 15px);} .product-view-tip-item.col-5 .inner-list li{width: calc(20% - 15px);} .product-view-tip-item.row .inner-list li{margin: 7.5px;} .product-view-tip-item .inner-list .img{position: relative; width: 100%; height: 0; padding-top: 95.86%; padding-top: 232px; overflow: hidden;} .product-view-tip-item .inner-list .img.only-img{padding-top: 355px;} .product-view-tip-item .inner-list .img.high{padding-top: 295px;} .product-view-tip-item .inner-list .img span{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 100%; max-height: 100%; display: block;} .product-view-tip-item .inner-list .txt{background-color: #f7f7f7;} .product-view-tip-item .inner-list .txt p{width: 100%; height: 60px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center;} /* flex-direction: column; */ .product-view-tip-item .inner-list .txt p + p:before{position: absolute; top: 0; left: 20px; right: 20px; content: ''; height: 1px; background-color: #eee;} .product-view-tip-item .inner-list .txt p span{padding: 0 5px; display: inline-block; font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -0.5px; color: #2f2f2f;} .product-view-tip-item .inner-list.fz-18 .txt p span{font-size: 18px;} .product-view-tip-item .inner-list.fz-17 .txt p span{font-size: 17px;} .product-view-tip-item .inner-list.fz-15 .txt p span{font-size: 15.5px;} .fz-15{font-size: 15.5px!important;} /* 제품 설명 영역 - 테이블 */ .product-view-tbl{width: 100%; -webkit-table-layout: fixed; -ms-table-layout: fixed; table-layout: fixed; border-top: 1px solid #2f2f2f !important; border-collapse: collapse !important;} .product-view-tbl thead tr{} .product-view-tbl thead th{border-top: 1px solid #2f2f2f; border-bottom: 1px solid #2f2f2f; border-collapse: collapse !important;} .product-view-tbl tr{border-bottom: 1px solid #e7e7e7;} .product-view-tbl th, .product-view-tbl td{padding: 20px 50px; font-size: 18px; line-height: 1.3; letter-spacing: -0.5px; text-align: left; color: #5e5e5e; -webkit-box-sizing: border-box; box-sizing: border-box;} .product-view-tbl th.text-align-center, .product-view-tbl td.text-align-center{padding-left: 15px; padding-right: 15px; text-align: center;} .product-view-tbl td + td{border-left: 1px solid #e7e7e7;} .product-view-tbl th{width: 26.5%; background-color: #f8f8f8; font-weight: 700;} /* border-right: 1px solid #e7e7e7; */ .product-view-tbl td p + p{margin-top: 10px;} .product-view-tbl td p span{position: relative; margin-right: 24px; display: inline-block;} .product-view-tbl td p span:before{position: absolute; top: 4px; right: -13px; display: block; content: ''; width: 1px; height: 14px; background-color: #e8e8e8;} .product-view-add-txt{margin-top: 40px;} .product-view-add-txt p{font-size: 18px; line-height: 1.7; letter-spacing: -0.5px; color: #999;} /* 더보기 버튼 영역 */ .product-view-btn{margin-top: 65px; text-align: center;} .product-view-btn img{display: block; height: 105px; margin: 0 auto;} .product-view-btn p{margin-top: 25px; font-size: 36px; line-height: 1.2; letter-spacing: -0.35px; font-weight: 700; background: linear-gradient(to right, #00a3e6, #7673f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .ie-browser .product-view-btn p{color: #00a3e6; background: none;} .product-view-btn a{position: relative; padding-right: 30px; display: inline-block; margin-top: 20px; height: 30px; border-bottom: 1px solid #868686;} .product-view-btn a span{display: inline-block; font-size: 15px; line-height: 30px; letter-spacing: -0.25px; color: #5e5e5e;} .product-view-btn a i{position: absolute; top: 50%; margin-top: -9px; font-size: 16px; right: 0; color: #5e5e5e; -webkit-transition: all 0.2s; transition: all 0.2s;} @media all and (min-width:801px){ .product-view-btn a:hover i{-webkit-transform: translateX(5px); transform: translateX(5px);} } /* ************************** * News & Media :: 01 News ************************** */ /* SEARCH BOX */ .board-search-box-style03{text-align: center; padding-bottom: 50px;} .board-search-box-style03 .search-input{position: relative; width:560px; padding:0; height:50px; background-color: #fff; display: inline-block; vertical-align: middle; border-bottom: 3px solid #5e5e5e;} .board-search-box-style03 .select-custom{position: absolute; top: 0; left: 0; width:120px; height:50px; border: none; background-color:#fff;} .board-search-box-style03 .select-custom select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 100%; height: inherit; font-size: inherit; padding-right: 20px; padding-left: 15px; font-size: 14px; line-height: 50px; color: #3f3f3f; letter-spacing: -0.25px; background: url("../image/icon_select.png") no-repeat 95% 50%; position: relative; z-index: 100; cursor: pointer; vertical-align: top; } .board-search-box-style03 .search-word{position: absolute; top: 0; left: 125px; width: calc(100% - 80px); height: 50px; text-indent:10px; color:#868686; font-size:14px; letter-spacing: -0.25px; vertical-align:middle; border: none;} .board-search-box-style03 .search-word::placeholder{color: #bdbdbd;} .board-search-box-style03 .select-custom select:focus, .board-search-box-style03 .search-word:focus{outline:none;} .board-search-box-style03 .bbs-search-btn{position: absolute; top: 0; right: 0; margin:0px; border:0; width:50px; height:50px;} .board-search-box-style03 .bbs-search-btn i{line-height:50px; font-size: 20px; color: #3f3f3f;} /* ************************** * News & Media :: 02 Exhition :: 02 Exhition Story ************************** */ .exhibition-story-con{padding-top: 45px;} .exhibition-story-wrapper{margin-top: 50px; padding: 0 2.3%;} .main-issue-down-list.sub{margin: -25px -2.3%;} .sub .main-issue-down-item{width: 45.4%; margin: 25px 2.3%; padding: 0;} .exhibition-story-con .paging{margin-top: 80px;} /* ************************** * Contact :: 01 Contact ************************** */ /* 문의하기 01 :: 개인정보취급방침 */ .inquiry-style07-agree-con{margin-bottom:50px;} .inquiry-style07-agree-con .agree-tit{color:#696969; font-size:22px; letter-spacing:-0.75px; font-weight:500; padding-bottom:15px;} .inquiry-style07-agree-box{border:1px solid #cecece; height:130px; overflow-y:auto; overflow-x:hidden; padding:20px; background-color:#fff;} .inquiry-style07-agree-con .agree-txt{font-size:15px; line-height:20px; padding:13px 25px; letter-spacing:-0.65px; color:#414141; background-color:#f1f1f1; border:1px solid #cecece; border-top:0;} .inquiry-style07-agree-con .agree-txt span{color:#b9272d; font-weight:500;} .inquiry-style07-essential-txt{text-align:right; color:#373737; font-size:13px; letter-spacing:-0.3px; padding-bottom:15px;} .inquiry-style07-essential-icon{color:#03a2f4; font-size:15px;} /* 문의하기 01 :: 쓰기, 문의폼 :: 작성영역 */ .inquiry-tbl-style07{width:100%;} .inquiry-tbl-style07 .write-input, .inquiry-tbl-style07 .write-textarea{ height:50px; border:0px; width:100%; background-color:#fff; border:1px solid #d2d2d2; font-size:14px; vertical-align:middle; } .inquiry-select-custom{width: 100%; height:50px; border: none; background-color:#fff; border: 1px solid #d2d2d2;} .inquiry-select-custom select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 100%; height: inherit; font-size: inherit; padding-right: 70px; padding-left: 35px; font-size: 14px; line-height: 50px; color: #8a8a8a; letter-spacing: -0.25px; background: url("../image/icon_select_gr.png") no-repeat 95% 50%; position: relative; z-index: 100; cursor: pointer; vertical-align: top; } .inquiry-tbl-style07 .write-textarea:focus, .inquiry-select-custom select:focus, .inquiry-tbl-style07 .write-input:focus{outline:none;} .inquiry-tbl-style07 .write-input{text-indent:20px;} .inquiry-tbl-style07 .write-select{height:54px;} .inquiry-tbl-style07 .write-textarea{width:100%; height:100px; resize:none; padding:20px; text-indent:0px;} .inquiry-tbl-style07-container{width:100%;} .inquiry-tbl-style07-con{width:100%; padding:20px 0;} .inquiry-tbl-style07-con dt{font-size:17px; color:#757575; letter-spacing:-0.25px; padding-bottom:15px;} .inquiry-tbl-style07-2col{display:table; width:100%;} .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con{display:table-cell; vertical-align:top; width:50%; padding-left:3%;} .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con:first-child{padding-left:0; padding-right:3%;} .inquiry-tbl-style07-2col > .inquiry-tbl-style07-con .write-input{width:100%;} .address-fieldset{} .address-btn-group{} .address-btn-group .write-input{max-width: none !important; float: left; width: calc(100% - 130px) !important; vertical-align: middle;} .address-btn-group .address-btn{float:right; display: inline-block; vertical-align: middle; text-align: center; width: 124px; height: 50px; line-height: 50px; color: #fff; font-size: 14px; background-color: #222;} .address-fieldset .write-input{max-width: none !important;} .phone-fieldset{} .phone-fieldset .write-select{font-size: 14px; max-width: none !important; float:left; width:30%; height: 50px; border-color: #d2d2d2;} .phone-fieldset .write-input{max-width: none !important; float:left; width:calc(35% - 15px) !important;} .phone-fieldset .hypen{float:left; width:15px; text-align:center; font-size:15px; line-height:50px;} .email-input-group{float: left; width: calc(100% - 210px);} .email-input-group .write-input{max-width: none !important; float: left; width: calc(50% - 10px) !important; vertical-align: middle;} .email-input-group .hypen{float:left; width:20px; text-align:center; font-size:13px; line-height:50px;} .email-input-group .write-input{max-width: none !important;} .email-input-group + .write-select{font-size: 14px; width: 200px !important; float: right; height: 50px; border-color: #d2d2d2;} .file-custom-box input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .file-custom-box label { float:right; width:120px; height:50px; color: #fff; font-size: 14px; letter-spacing:-0.5px; line-height: 50px; text-align:center; cursor: pointer; border: 0; vertical-align:middle; margin-left:-4px; background-color:#222; } /* named upload */ .file-custom-box .upload-name { float:left; width:calc(100% - 132px); height: 46px; font-size: 14px; vertical-align:middle; background-color: #fff; border: 1px solid #d2d2d2; -webkit-appearance: none; text-indent:20px; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; } /* 문의하기 01 :: Custom checkbox */ .inquiry-style04-custom-checkbox{margin:0 -15px;} .inquiry-style04-custom-checkbox .checkbox-item{display:inline-block; vertical-align:middle; margin:3px 15px;} .inquiry-style04-custom-checkbox .checkbox-item input[type="radio"]{display:none;} .inquiry-style04-custom-checkbox .checkbox-item label{display:inline-block; position:relative; vertical-align:middle; color:#949494; font-size:15px; line-height:27px; letter-spacing:-0.65px;} .inquiry-style04-custom-checkbox .checkbox-item label i{font-size:24px; margin-right:5px; position:relative; top:-1px;} .inquiry-style04-custom-checkbox .checkbox-item input[type="radio"]:checked + label{color:#f36f21; } /* ************************** * News & Media :: 02 Exhibition :: 01 Exhibition Schedule ************************** */ .exhibition-story-page{padding-bottom: 100px;} .exhibition-schedule-con{margin-top: 65px; position: relative; width: 100%; height: 550px;} .exhibition-schedule-con:before{position: absolute; top: 0; left: 0; content: ''; width: 885px; width: 68%; height: 100%; -webkit-border-radius: 20px; border-radius: 20px; background-color: #f1f1f1;} .exhibition-tab-wrapper-style{position: absolute; bottom: 60px; left: 0; z-index: 2; width: 32%;} .exhibition-tab-list-style{margin: -7px 0; font-size: 0; text-align: center;} .exhibition-tab-list-style li{display: inline-block; margin: 7px;} .exhibition-tab-list-style li a{display: block; width: 8px; height: 8px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #b6b6b6;} .exhibition-tab-list-style li.selected a{background-color: #00b8f1;} .exhibition-tab-content-style{position: relative; z-index: 1;} .exhibition-tab-con{position: relative; width: 100%; height: 550px;} .exhibition-tab-left{position: absolute; top: 20px; left: 0; width: 32%; text-align: center; padding: 17px 4.2% 0; -webkit-box-sizing: border-box; box-sizing: border-box;} .exhibition-tab-logo{width: 100%;} .exhibition-tab-logo img{display: inline-block; height: 72px;} .exhibition-tab-thum{margin-top: 37px; position: relative; width: 100%; height: 0; padding-top: 63%; -webkit-box-shadow: 9px 9px 16px -4px rgba(0,0,0,0.27); box-shadow: 9px 9px 16px -4px rgba(0,0,0,0.27);} .exhibition-tab-thum span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;} .exhibition-tab-tit{margin-top: 40px; font-size: 16px; line-height: 1.3; letter-spacing: -0.25px; font-weight: 600; color: #2f2f2f;} .exhibition-tab-date{margin-top: 10px; font-size: 16px; line-height: 1.3; letter-spacing: -0.25px; color: #959595;} .exhibition-tab-right{position: absolute; bottom: -40px; right: 0; width: 68%;} .exhibition-tab-slide{width: 100%;} .exhibition-tab-slide-item{width: 100%; float: left;} .exhibition-tab-slide-item > div{position: relative; width: 100%; height: 0; padding-top: 62.64%; -webkit-border-radius: 20px 20px 20px 0; border-radius: 20px 20px 20px 0; overflow: hidden; /* background-size: contain !important; */ background-color: #000 !important;} .exhibition-tab-slide-item > div img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .exhibition-tab-slide-item > div p{position: absolute; bottom: 27px; left: 15px; right: 15px; font-size: 16px; line-height: 1.3; letter-spacing: -0.25px; color: #fff; text-align: center; display: none;} .exhibition-tab-slide .slick-arrow{position: absolute; bottom: 0; width: 44px; height: 70px; background-color: #2f2f2f; z-index: 10;} .exhibition-tab-slide .slick-arrow i{font-size: 30px; color: #fff; opacity: 0.8;} .exhibition-tab-slide .slick-prev{left: -88px;} .exhibition-tab-slide .slick-next{left: -44px;} /* ************************** * 회원가입 ************************** */ .join-modal-con{padding: 60px 70px; background-color: #fff;} .join-modal-item{margin-top: 40px;} .join-modal-item + .join-modal-item{margin-top: 20px;} .join-modal-tit{margin-bottom: 5px; font-size: 18px; line-height: 1.3; letter-spacing: -0.5px; color: #474747;} .join-modal-id{position: relative; width: 100%; height: 60px; padding-right: 125px; border: 1px solid #dadada; -webkit-box-sizing: border-box; box-sizing: border-box;} .join-modal-id button{position: absolute; top: 50%; margin-top: -25px; right: 4px; width: 115px; height: 50px; font-size: 16px; letter-spacing: -0.5px; color: #fff; background-color: #505050;} .join-modal-pw{width: 100%; height: 60px; border: 1px solid #dadada; -webkit-box-sizing: border-box; box-sizing: border-box;} .join-modal-textarea{width: 100%; height: 170px; border: 1px solid #dadada; -webkit-box-sizing: border-box; box-sizing: border-box;} .join-modal-id input, .join-modal-pw input{text-indent: 15px; border: 0; background-color: transparent; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0;} .join-modal-textarea textarea{padding: 15px; border: 0; background-color: transparent; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; -webkit-border-radius: 0;} .join-modal-id input::-ms-clear, .join-modal-pw input::-ms-clear {display: none;} .join-modal-textarea textarea:focus, .join-modal-id input:focus, .join-modal-pw input:focus {outline: none;} .join-modal-btn{margin-top: 45px; width: 100%; height: 70px; font-size: 24px; -webkit-font-smoothing: 500px; letter-spacing: -0.5px; color: #fff; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */ background: #00a3e6; /* Old browsers */ background: -moz-linear-gradient(left, #00a3e6 0%, #7673f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #00a3e6 0%,#7673f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #00a3e6 0%,#7673f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 */} .contact-page .board-search-box-style03{margin-top: 40px;} /* 오시는길 :: 상단 */ .map-iframe-con{position:relative; overflow:hidden; margin:0px auto; height:0; padding-top: 38.46%; border:1px solid #ddd;} .map-iframe-con iframe{position:absolute; top: 0; left: 0; width: 100%; height: 100%;} .map-iframe-con .bg-box {display:block; width:100%; height:100%; background-color:rgba(26,39,68,0.45); position:absolute; left:0; top:0; opacity:1;filter:Alpha(opacity=100); transition: all 0.4s; cursor:pointer; z-index:1;} .map-iframe-con .bg-box .bg {position:absolute; top:56%; width:100%; text-align:center; font-size:20px; transform:translateY(-50%); color:#fff;} .map-iframe-con.on .bg-box {opacity:0;filter:Alpha(opacity=0); z-index:0; } .map-iframe-con.on iframe {z-index:1; } /* 오시는길 :: 하단정보1 */ .map-tbl-con{margin-top: 60px;} .map-tbl-con .intro-con-tit{display: block; margin-bottom: 10px;} .map-tbl-con .intro-con-txt{margin-bottom: 20px; font-size: 25px; font-weight: 400; color: #333; line-height: 1.5;} .map-tbl{width:100%; border-top:1px solid #000;} .map-tbl tr{border-bottom:1px solid #eaeaea;} .map-tbl th,.map-tbl td{padding:20px 45px; letter-spacing:-0.3px; font-size:15px; line-height:1.5} .map-tbl th{width:240px; color:#333; text-align:left; font-weight:600; background-color: #f8f8f8;} .map-tbl td{color:#333; font-weight:300; } .map-tbl td p{margin-top:5px} .map-tbl td p:first-child{margin-top:0} /* 오시는길 :: 하단정보3 */ .location-list > li{margin-bottom:50px;} .location-list > li > dl > dt{border-bottom:1px solid #ddd;} .location-list > li > dl > dt span{position:relative; display:inline-block; top:1px; border-bottom:1px solid #333; font-size:18px; font-weight:500; padding-bottom:6px; color:#333;} .location-list > li > dl > dt span i{vertical-align:middle; font-size:22px;} .location-list > li > dl > dd{padding-top:15px; color:#333; font-size:15px; line-height:22px; word-break:keep-all;} .location-list > li > dl > dd .bus-info{display:block; position:relative; margin-bottom:5px;} .location-list > li > dl > dd .train-info{display:block; position:relative; margin-bottom:5px; padding-left:25px;} .location-list > li > dl > dd em{position:absolute; top:0px; left:0px; color:#fff; padding:1px 5px; border-radius:2px; margin-right:5px; font-size:12px;} .location-list > li > dl > dd .train-info em{top:2px; padding:0; width:20px; height:20px; border-radius:20px; text-align:center;} .support-info-txt{margin-bottom: 50px; font-size: 20px; color: #333; font-weight: 500; letter-spacing: -0.65px; text-align: center;} @media all and ( max-width: 800px ){ .map-iframe-con{padding-top: 50%;} .map-iframe-con .bg-box .bg{font-size: 15px;} .support-info-txt{margin-bottom: 25px; font-size: 15px;} } /* 전시회 연도 셀렉트 추가 */ #topExhibitionList{margin: 15px auto 0; width: 390px; display:block; position:relative; height:85px;} #topExhibitionList:before{position: absolute; bottom: -4px; left: 40px; display: block; content: ''; width: 305px; height: 3px; background-color: #575757;} #topExhibitionList .side-list-inner{height:85px;} #topExhibitionList .list-inner-con{position:relative; border: 1px solid transparent; z-index: 999;} #topExhibitionList .list-inner-con > .list-open-btn{background-color: #fff; position:relative; display:block; width:100%; text-align:left; height:85px; padding:0 40px;} #topExhibitionList .list-inner-con > .list-open-btn:before{bottom: 0; left: 40px; position: absolute; display: block; content: ''; width: calc(100% - 80px); height: 3px; background-color: transparent;} #topExhibitionList .list-inner-con > .list-open-btn span{padding-left: 30px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:85px; font-weight:600; font-size:22px; letter-spacing: -0.25px; color: #6c6c6c;} #topExhibitionList .list-inner-con > .list-open-btn .arrow{position:absolute; top:50%; right:65px; width:28px; height:28px; margin-top:-14px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #575757; text-align: center;} #topExhibitionList .list-inner-con > .list-open-btn .arrow i{font-size: 24px; line-height: 28px; color: #fff;} #topExhibitionList .list-inner-con, #topExhibitionList .list-inner-con > .list-open-btn, #topExhibitionList .list-inner-con > .list-open-btn:before, #topExhibitionList .list-inner-con > .list-open-btn .arrow, #topExhibitionList .list-inner-con > .list-open-btn .arrow i{-webkit-transition: all 0.2s; transition: all 0.2s;} /* open */ #topExhibitionList .list-inner-con.open{border-color: #d7d7d7;} #topExhibitionList .list-inner-con.open > .list-open-btn:before{background-color: #6c6c6c;} #topExhibitionList .list-inner-con.open > .list-open-btn .arrow{transform:rotate(-180deg); background-color: #00a8e5;} #topExhibitionList .list-inner-con.open > .list-open-btn .arrow i{color: #fff;} #topExhibitionList .list-inner-con .list-drop-con{display:none; position:absolute; top:85px; left:-1px; width:100%; border:1px solid #d7d7d7; border-top:0; background-color:#fff; z-index:11; text-align: center; padding-bottom: 30px;} #topExhibitionList .list-inner-con .list-drop-con li:first-child{padding-top: 30px;} #topExhibitionList .list-inner-con .list-drop-con li a{display:block; padding:9px 30px; font-size:16.5px; line-height:1.2; word-break:keep-all; color: #6c6c6c; -webkit-transition: all 0.2s; transition: all 0.2s;} #topExhibitionList .list-inner-con .list-drop-con li.on a{color: #00a8e5;} @media all and (min-width:801px){ #topExhibitionList .list-inner-con .list-drop-con li a:hover{color: #00a8e5;} } @media all and (max-width:800px){ #topExhibitionList{width: 200px; height:52px;} #topExhibitionList:before{bottom: -1px; left: 15px; width: 170px; height: 2px;} #topExhibitionList .side-list-inner{height:50px;} #topExhibitionList .list-inner-con > .list-open-btn{height:50px; padding:0 40px 0 25px;} #topExhibitionList .list-inner-con > .list-open-btn:before{bottom: 0; left: 20px; width: calc(100% - 40px);} #topExhibitionList .list-inner-con > .list-open-btn span{padding-left: 0; line-height:50px; font-size:16px;} #topExhibitionList .list-inner-con > .list-open-btn .arrow{right:17px; width:20px; height:20px; margin-top:-10px;} #topExhibitionList .list-inner-con > .list-open-btn .arrow i{font-size: 18px; line-height: 20px;} #topExhibitionList .list-inner-con .list-drop-con{top:50px; padding-bottom: 10px;} #topExhibitionList .list-inner-con .list-drop-con li:first-child{padding-top: 10px;} #topExhibitionList .list-inner-con .list-drop-con li a{padding:9px 15px; font-size:13px; line-height:1.2;} } /* ********* 사업소개 ********* */ .intro-con01{} .intro-con-tit{margin-bottom: 25px; font-size: 36px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #333;} .sub-intro-wrapper{} .sub-intro-list{margin: 0 -3.85%;} .sub-intro-item{width: 42.3%; margin: 0 3.85%; float: left;} .sub-intro-item a{position: relative; height: 0; padding-top: 70.14%; display: block; text-align: center; border: 1px solid #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 13px 32px 0 rgba(0,0,0,0.08); -webkit-border-radius: 15px; border-radius: 15px; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-intro-item a:before{opacity: 0; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -3px; display: block; content: ''; background: url("../image/intro_gradient_line.png") center/contain no-repeat; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-intro-txt{position: absolute; top: 12%; left: 15px; right: 15px; z-index:1;} .sub-intro-txt h5{margin-bottom: 20px; font-size: 34px; font-weight: 500; line-height: 1.3; letter-spacing: -0.25px; color: #333;} .sub-intro-txt p{font-size: 18px; line-height: 1.6; letter-spacing: -0.5px; color: #666;} .sub-intro-img{position: absolute; bottom: 0; left: 0; width: 100%;} .sub-intro-img span{position:relative; display:block; padding-top: 70.14%; overflow: hidden; -webkit-border-radius: 15px; border-radius: 15px;} .sub-intro-img img{position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-intro-btn{opacity: 0; position: absolute; bottom: -28px; left: 50%; margin-left: -97.5px; display: block; width: 195px; height: 56px; text-align: center; color: #fff; -webkit-border-radius: 56px; border-radius: 56px; z-index: 2; -webkit-transition: all 0.3s; transition: all 0.3s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,4b85f2+55,7673f9+100 */ background: #00a3e6; /* Old browsers */ background: -moz-linear-gradient(45deg, #00a3e6 0%, #4b85f2 55%, #7673f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #00a3e6 0%,#4b85f2 55%,#7673f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #00a3e6 0%,#4b85f2 55%,#7673f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} .sub-intro-btn span{font-size: 14px; font-weight: 300; display: inline-block; vertical-align: middle;} .sub-intro-btn i{margin-left: 10px; font-size: 20px; line-height: 56px; display: inline-block; vertical-align: middle;} .intro-con02{margin-top: 130px;} .intro-con02 .sub-intro-item a{padding-top: 40.16%;} .intro-con02 .sub-intro-item a:before{background: url("../image/intro_gradient_line2.png") center/contain no-repeat;} .sub-intro-txt02{position: absolute; top: 0; left: 15px; right: 15px; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;} .sub-intro-txt02 p{font-size: 22px; letter-spacing: -0.5px; color: #333;} .sub-intro-txt02 h5{margin-top: 20px; font-size: 60px; font-weight: 400; color: #333;} @media all and ( min-width: 801px ){ /* .sub-intro-item a:hover{box-shadow: 0 13px 24px 0 rgba(0,0,0,0.3);} */ .sub-intro-item a:hover:before{opacity: 1;} .sub-intro-item a:hover .sub-intro-btn{opacity: 1;} /* .sub-intro-item a:hover .sub-intro-img img{-webkit-transform: scale(1.05) rotate(0.02deg); transform: scale(1.05) rotate(0.02deg);} */ } /* ********* 대리점 안내 ********* */ .network-page{padding-bottom: 60px;} .cm-sub-page-tit{margin-bottom: 40px; font-size: 36px; line-height: 1.3; letter-spacing: -0.5px; color: #333; text-align: center;} .sub-network-wrapper{} .sub-network-list{max-width: 1274px;} .sub-network-item{} .sub-network-item + .sub-network-item{margin-top: 20px;} .sub-network-item a{position: relative; width: 100%; height: 134px; height: 0; padding-top: 10.51%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e2e2e2; -webkit-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 5px 5px 21px -3px rgba(0,0,0,0.15);; box-shadow: 5px 5px 21px -3px rgba(0,0,0,0.15); display: block;} .sub-network-item a:before{opacity: 0; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -3px; display: block; content: ''; background: url("../image/network_gradient_line.png") center/contain no-repeat; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-network-txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 40px 0 4.7%; -webkit-box-sizing: border-box; box-sizing: border-box; display: flex; flex-wrap:wrap; align-items: center;} .sub-network-place{width: 24%; padding-right: 20px; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: -0.25px; color: #333; -webkit-box-sizing: border-box; box-sizing: border-box;} .sub-network-name{width: 23%; padding-right: 15px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.25px; color: #666; -webkit-box-sizing: border-box; box-sizing: border-box;} .sub-network-info{width: 53%; padding-right: 15px; -webkit-box-sizing: border-box; box-sizing: border-box;} .sub-network-info p{position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; letter-spacing: -0.25px; color: #000; color: #666;} .sub-network-info p + p{margin-top: 10px;} .sub-network-info p i{position: absolute; top: 0; left: 0; font-size: 20px;} .sub-network-btn{position: absolute; top: 50%; margin-top: -25px; right: -25px; width: 50px; height: 50px; text-align: center; display: block; background-color: #e2e2e2; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;} .sub-network-btn i{font-size: 24px; line-height: 50px; color: #fff;} @media all and ( min-width: 801px ){ .sub-network-item a:hover:before{opacity: 1;} .sub-network-item a:hover .sub-network-btn{background-color: #7673f9;} } /* 다운로드 페이지 */ .download-page .bbs-top-list-box{position: relative; margin-bottom: 40px;} .download-page .total-list-con{color:#333; line-height: 34px; font-size:14px;} .download-page .total-list-con b{color:#0ea1e7;} .download-page .top-search-box{margin-bottom: 0;} .download-page .download-page-info-tit{position: absolute; top: 0; right: 295px; font-size: 16px; line-height: 34px; letter-spacing: -0.25px; color: #999; text-align: right;} .download-gallery-con > ul{margin:0 -1%; word-break:keep-all;} .download-gallery-con .gallery-over-list-item {float:left; width:23%; margin:0 1% 40px;} .download-gallery-con .gallery-over-list-item a {display:block;} .download-gallery-con .gallery-img-box {position:relative; text-align:center; border:1px solid #ddd;} .download-gallery-con .gallery-img-box .img-wrap {display:block; height:0; padding-top:136.91%;} .download-gallery-con .gallery-img-box .img-wrap img{position:absolute; top:0px; right:0px; bottom:0px; left:0px; width:100%; height:100%;} .download-gallery-con .gallery-img-box .broad-bg {position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;} .download-gallery-con .gallery-img-box .broad-bg span{position:relative; display:block; width:0; height:0; left:50%; top:50%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; border-radius:100%;} .download-gallery-con .gallery-img-box .gallery-btn {position:absolute; width:50px; height:50px; right:15px; bottom:-25px; border-radius:100%; color:#fff; overflow:hidden; box-shadow:5px 5px 15px rgba(0, 0, 0, 0.2); -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */ background: #00a3e6; /* Old browsers */ background: -moz-linear-gradient(45deg, #00a3e6 0%, #7673f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #00a3e6 0%,#7673f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #00a3e6 0%,#7673f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ opacity: 0.9;} .download-gallery-con .gallery-img-box .gallery-btn i{vertical-align:middle; line-height:50px; font-size: 24px; transition:all 0.5s} .download-gallery-con .gallery-info {padding: 30px 0;} .download-gallery-con .gallery-info .gallery-info-tit {font-size:18px; line-height: 1.3; letter-spacing: -0.25px; color:#333; font-weight: 500;} .download-gallery-con .gallery-over-list-item:nth-child(4n+1){clear: both;} .download-page .paging{margin-top: 0;} @media all and ( min-width: 801px ){ .download-gallery-con .gallery-over-list-item a:hover .gallery-btn {background:transparent; right:50%; margin-right: -25px; box-shadow:none; bottom:50%; margin-bottom: -25px;} .download-gallery-con .gallery-over-list-item a:hover .broad-bg span {width:600px; height:600px; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0.6;filter:Alpha(opacity=60); transition-delay:0.2s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */ background: #00a3e6; /* Old browsers */ background: -moz-linear-gradient(45deg, #00a3e6 0%, #7673f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #00a3e6 0%,#7673f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #00a3e6 0%,#7673f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .download-gallery-con .gallery-over-list-item a:hover .gallery-img-box .gallery-btn i{transform:rotate(360deg)} } /* 다운로드 정보 입력 페이지 */ .download-inquiry-txt{font-size: 16px; padding-bottom: 10px; letter-spacing: -0.25px; color: #999; text-align: right;} .download-select-input-group{} .download-select-input-group .inquiry-select-custom{width: 210px; height: 48px; float: left;} .download-select-input-group .inquiry-select-custom select{padding-left: 20px; -ms-background-position-x: 90%; background-position-x: 90%;} .download-select-input-group .write-input{width: calc(100% - 220px) !important; float: right;} /* Search Product page */ .product-list-con.search{margin-top: 30px;} .search-product-list-con{margin-bottom: 60px;} .prd-search-link{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;} .search-category-txt{font-size: 30px; font-weight: 600; color: #5f5f5f; letter-spacing: -0.25px;} .prd-search-link a{font-size: 14px; padding-right: .8%;} .prd-search-link a span{position: relative; display: inline-block; vertical-align: middle; margin-left: 15px; width: 40px; height: 1px; background-color: #5f5f5f; -webkit-transition: all 0.3s; transition: all 0.3s;} .prd-search-link a span:before{position: absolute; top: 50%; margin-top: -6px; right: 0; display: block; content: ''; width: 8px; height: 12px; background: url("../image/visual_more_btn_b.png") center/cover no-repeat;} .prd-search-link a:hover span{-webkit-transform: translateX(5px); transform: translateX(5px);} .product-view-purpose{padding-top: 60px;} .product-view-purpose-wrapper{position: relative; padding: 45px 0; display: flex; align-items: center; background-color: #eee;} .product-view-purpose-wrapper:before{position: absolute; top: 45px; bottom: 45px; left: 190px; display: block; content: ''; width: 1px; background-color: #d7d7d7;} .product-view-purpose-tit{width: 190px; text-align: center;} .product-view-purpose-tit i{font-size: 36px; color: #5e5e5e;} .product-view-purpose-tit p{margin-top: 10px; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.5px; color: #5e5e5e;} .product-view-purpose-txt{width: calc(100% - 190px); padding: 0 40px; -webkit-box-sizing: border-box; box-sizing: border-box;} .product-view-purpose-txt p{font-size: 18px; line-height: 1.77; letter-spacing: -0.5px; color: #999;} .product-view-purpose-txt .dot-txt{position: relative; padding-left: 20px;} .product-view-purpose-txt .dot-txt span{position: absolute; top: 0; left: 0; display: inline-block;} /* ************************ 2022-11-18 컨텐츠 추가 ************************ */ /* ********* History ********* */ /* history 상단 타이틀 */ .history-top-box{display: flex; justify-content:space-between; align-items:center; margin-bottom:140px;} .history-tit{font-size:74px; line-height:1.1; letter-spacing:-0.025em; font-weight:700; color:#5e5e5e; width:63.6%;} .history-tit span{display: block; color:#099fe7; padding-left:60px;} /* history 컨텐츠 */ .history-page .sub-tab-con{margin-bottom:180px;} .history-page .sub-tab-con:last-child{margin-bottom:0px;} .history-tab-box{display: flex; justify-content:space-between; align-items:flex-end;} .history-tab-box .img-box{width:42.3%;} .history-tab-box .img-box img{max-width:100%;} .history-tab-box .history-con-box{width:57.7%; margin-bottom:45px; box-sizing:border-box;} .history-tab-box .history-con-box .history-tit{color:#e8e8e8; margin-bottom:50px;} .history-con-box .history-year-box{position: relative;} .history-con-box .history-year-box:before{position: absolute; content:''; width:2px; height:calc(100% - 8px); left:0; bottom:0; background:#099fe7;} .history-con-box .history-year-box .history-item{position: relative; margin-bottom:21px;} .history-con-box .history-year-box .history-item:last-child{margin-bottom:0;} .history-con-box .history-year-box .history-item .history-year{position: absolute; top:0; left:15px; width:120px; font-size:19px; line-height:1.75; letter-spacing:-0.025em; font-weight:600; color:#099fe7;} .history-con-box .history-year-box .history-item .history-txt-con{padding-left:120px;} .history-con-box .history-year-box .history-item .history-txt-con .txt{font-size:16px; line-height:1.75; letter-spacing:-0.025em; color:#5e5e5e; margin-bottom:10px;} .history-con-box .history-year-box .history-item .history-txt-con .txt:last-child{margin-bottom:0;} /* 오른쪽 텍스트 */ .history-tab-box.right-box .history-con-box {padding-left:140px;} /* 왼쪽 텍스트 */ .history-tab-box.left-box{flex-direction: row-reverse} .history-tab-box.left-box .history-con-box {padding-right:140px;} /* ********* Product Inquiry ********* */ .inquiry-top-tit{font-size:30px; line-height:1.4; letter-spacing:-0.025em; color:#5e5e5e; font-weight:700; text-align:center; margin-bottom:70px;} .inquiry-con-tit{font-size:20px; line-height:1.5; letter-spacing:-0.025em; color:#099fe7; font-weight:700; margin-bottom:20px;} .inquiry-con-tit span{font-size:0.7em; line-height:2; font-weight:400; margin-left:100px;} .contact-page .bbs-write-tbl-box{margin-bottom:160px;} /* ********* Global Network ********* */ .network-txt-box{display: flex; justify-content:space-between; border:1px solid #e0e0e0; border-radius:30px; box-shadow: 14px 11px 32px 0px rgba(31, 31, 31, 0.04); padding:50px 85px; margin-top:50px;} .network-txt-box .network-tit{font-size:42px; line-height:1.23; letter-spacing:-0.025em; color:#5e5e5e; font-weight:700; width:44.25%; margin-top:10px; padding-right:15px; box-sizing:border-box;} .network-txt-box .network-txt-list{width:55.75%;} .network-txt-box .network-txt-list .list-item{border-bottom:1px solid #e8e8e8; padding:15px 0 13px;} .network-txt-box .network-txt-list .list-item:last-child{border-bottom:0;} .network-txt-box .network-txt-list .list-item .txt{position: relative; padding-left:9px; font-size:16px; line-height:1.5; letter-spacing:-0.025em; color:#5e5e5e;} .network-txt-box .network-txt-list .list-item .txt:before{position: absolute; content:''; width:2px; height:2px; background:#5e5e5e; top:10px; left:0;} /* ********* Product 리스트 ********* */ @media all and (min-width:801px){ .product-list-page{min-height:540px;} } .product-list-page{position: relative;} .product-list-page .product-left-con{position: absolute; top:0; left:0; height:100%;} /* 왼쪽 리스트바 */ .product-left-list > li{margin-bottom:10px;transition:all 0.5s; border-radius:20px; padding:0 0 5px;} .product-left-list > li > a{position: relative; display: block; width:210px; height:40px; line-height:40px; padding:0 20px; color:#cfcfcf; box-sizing:border-box; transition:all 0.5s;} .product-left-list > li > a em{font-size:14px; letter-spacing:-0.025em; font-weight:700;} .product-left-list > li > a:before{position: absolute; content:'\e93f'; font-size:24px; font-family:'xeicon'; color:#222; top:50%; right:10px; transform:translateY(-50%); opacity:0; transition:all 0.5s;} /* 왼쪽 리스트바 :: active */ .product-left-list > li.selected, .product-left-list > li:hover{background:#f4f4f4;} .product-left-list > li.selected > a, .product-left-list > li:hover > a{color:#5e5e5e;} .product-left-list > li.selected > a:before, .product-left-list > li > a:hover:before{opacity:1;} /* 왼쪽 리스트바 :: 스크롤 */ .product-left-tab-JS.fixed{position: fixed; top:25px;} .product-left-tab-JS.absolute{position: absolute; top:auto; bottom:25px;} /* 왼쪽 리스트바 :: 2차메뉴 */ .product-inner-list{display: none;} .product-inner-list{width:calc(100% - 20px); margin:10px auto; background:#fff; border-radius:10px;} .product-inner-list li a{display: block; font-size:12px; line-height:40px; letter-spacing:-0.025em; color:#dfdfdf; font-weight:700; border-bottom:1px solid #dfdfdf; padding:0px 20px; transition:all 0.5s;} .product-inner-list li:last-child a{border:0;} .product-inner-list li a:hover, .product-inner-list li.selected a{color:#5e5e5e} .product-inner-item-m{display: none;} .product-inner-item-m .product-list-tab-style{height:auto} /* 오른쪽 제품리스트 */ .product-list-page .product-right-con{padding-left:290px;} .product-right-list{margin:0 -11px;} .product-right-list .product-item{float:left; position: relative; width:calc(33.33% - 22px); margin:0 11px; border-radius:20px; box-sizing:border-box; margin-top:85px; transition:all 0.2s;} .product-right-list .product-item:nth-child(-n+3){margin-top:0;} .product-right-list .product-item a{display: block; box-shadow: 8px 11px 32px 0px rgba(0, 0, 0, 0.08); border-radius:20px; border:1px solid #e8e8e8; box-sizing:border-box;} .product-right-list .product-item a:before{position: absolute; content:''; width:100%; height:100%; top: 1px; right: 0px; bottom: 0px; left: 0px; display: block; content: ''; background: url("../image/gradient_line.png") center/cover no-repeat; opacity:0; transition:all 0.5s; z-index:8} .product-right-list .product-item a:after{position: absolute; content:'\e914'; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50%; font-family:'xeicon'; font-size:24px; color:#fff; top:0; left:50%; transform:translate(-50%, -50%); opacity:0; transition:all 0.5s; z-index:9; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a3e6+0,7673f9+100 */ background: #00a3e6; /* Old browsers */ background: -moz-linear-gradient(27deg, #00a3e6 0%, #7673f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(27deg, #00a3e6 0%,#7673f9 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(27deg, #00a3e6 0%,#7673f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a3e6', endColorstr='#7673f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .product-right-list .product-item .tit-box{/* position: relative; text-align:center; margin-top:25px; */ padding:0 10px; box-sizing:border-box; position: absolute; text-align:center; top:10%; width:100%; z-index:9;} .product-right-list .product-item .tit-box .tit{font-size:30px; letter-spacing:-0.025em; color:#5e5e5e; font-weight:700; text-align:center; height:63px; line-height:63px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .product-right-list .product-item .img-box{position: relative; border-radius:20px; overflow:hidden;} .product-right-list .product-item .img-box span{position: relative; display: block; width:100%; height:0; /* padding-top:150%; */ padding-top:127%;} .product-right-list .product-item .img-box span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; margin-bottom:0; /* max-width:100%; */ max-width:calc(100% - 6px); max-height:100%;} /* 오른쪽 제품리스트 :: active */ .product-right-list .product-item a:hover{border-color:transparent;} .product-right-list .product-item a:hover:before, .product-right-list .product-item a:hover:after{opacity:1;} /* ****************** Company :: 공통 ********************** */ .company-page {margin:60px 0 160px 0;} .company-page .em-b {color:#099fe7} /* ****************** Company :: CEO Greeting ********************** */ .greeting-content {display:flex;} .greeting-content .left-cont {width: 60%;} .greeting-content .right-cont {width: 40%;} .greeting-content .right-cont-m {display: none; width: 100%;} .greeting-content .right-cont-m img {width:100%} .greeting-content .txt-box {padding-right:70px; box-sizing:border-box;} .greeting-content .txt-box .tit {font-size: 100px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e} .greeting-content .txt-box .tit .space {padding-left:50px;} .greeting-content .txt-box .txt01 {margin:65px 0 45px 0; font-size: 18px; line-height: 2; letter-spacing: -0em; font-weight: 600; color: #5e5e5e} .greeting-content .txt-box .txt02 {font-size: 16px; line-height: 2.1; letter-spacing: -0.01em; font-weight: 300; margin-bottom:24px; color: #757575} .greeting-content .sign-box {display: flex; align-items: flex-end; margin-top:40px; padding-left:20px; border-left:2px solid #099fe7;} .greeting-content .sign-box .name {color: #099fe7; font-size: 14px; line-height:1; letter-spacing: -0.025em; font-weight: 600; } .greeting-content .sign-box .name span {display:block; padding-bottom:13px;} .greeting-content .sign-box .sign {padding-left: 25px;} .greeting-content .right-cont img { max-width: 100%;} /* ****************** Company :: ABOUT Eunsung ********************** */ /* ***** 상단 타이틀 ***** */ .about-content {text-align:center;} .about-mission {position: relative; padding-bottom: 160px;} .about-mission::after {position: absolute; content:""; width:1px; height: 75px; bottom: 0; background-color:#555555; } .about-mission .tit {font-size: 74px; line-height:1; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e; } .about-mission .txt01 {font-size: 24px; line-height:1.1; letter-spacing: -0.025em; font-weight: 600; padding: 60px 0 15px 0; color: #5e5e5e; } .about-mission .txt02 {font-size: 20px; line-height:1.5; letter-spacing: -0em; font-weight: 400; color: #757575;} .about-mission .txt02 span {font-weight: 600;} /* ***** value 첫번째 컨텐츠 ***** */ .about-value {margin-top: 90px; } .about-value .con01-wap {width: 100%; background-color:#f8f8f8; padding: 120px 0;} .about-value .con01 .tit {font-size: 74px; line-height:1; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e;} .about-value .con01 .txt {font-size: 30px; line-height:1; letter-spacing: -0.025em; font-weight: 700; color: #099fe7; padding: 90px 0 40px 0; } .value-img-con{position: relative; display: flex; justify-content:center; align-items:center;} .value-img-con .value-img-wrap{display: inline-block; position: relative; width:888px;} .value-img-con .value-img-wrap:before{position: absolute; content:''; width:110px; height:1px; background:#70c1ef; top:calc(50% - 1px); left:0;} .value-img-con .value-img-wrap:after{position: absolute; content:''; width:110px; height:1px; background:#70c1ef; top:50%; right:0;} .value-img-con .value-img-txt{font-size:21px; line-height:1.5; letter-spacing:-0.015em; font-weight:600; color:#757575; margin:0 20px;} /* ***** value 두번째 컨텐츠 ***** */ .about-value .con02 {padding-top: 130px; } .about-value .con02 .con-box01 {position: relative; max-width:760px; margin: auto; margin-bottom:105px; padding:50px 0 80px 0; border: 2px solid #099fe7; border-radius: 25px; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 8%);} .about-value .con02 .con-box01 .tit {font-size: 30px; line-height:1; letter-spacing: -0.025em; font-weight: 700; margin: 22px 0; color:#099fe7;} .about-value .con02 .con-box01 .txt01 {font-size: 20px; line-height:1.5; letter-spacing: -0em; font-weight: 500; color: #5e5e5e;} .about-value .con02 .con-box02 {display: flex; align-items: center; padding: 70px 0 ; border-top: 2px solid #757575; border-bottom: 1px solid #c2c2c2;} .about-value .con02 .con-box02 .left-con {width: 50%;} .about-value .con02 .con-box02 .right-con {width: 50%;} .about-value .con02 .con-box02 .tit {font-size: 24px; line-height:1.3; letter-spacing: -0.025em; font-weight: 700; color: #757575; margin-bottom:20px; } .about-value .con02 .con-box02 .txt01 {font-size: 16px; line-height:1.6; letter-spacing: -0em; font-weight: 400; color: #5e5e5e;} .about-value .con02 .con-box02 i {font-size: 27px; font-weight: 600; color: #696969; } .about-value .con02 .circle-box {position: absolute;width: 105px; height: 105px; left: 50%; transform: translateX(-50%); bottom: -52.5px;} .about-value .con02 .circle-box::after {position: absolute; content:""; width: 3px; left: 52px; height: 90px; bottom: -50px; background:url("../image/about_value_icon02.png") no-repeat center/cover; } .about-value .con02 .circle-box .circle01 { position: absolute; width: 105px; height: 105px; left: 0; bottom: 0; border-radius: 50%; background-color: #099fe7; opacity: 0.05;} .about-value .con02 .circle-box .circle02 { position: absolute; width: 80px; height: 80px; left: 12.5px; bottom: 12.5px; border-radius: 50%; background-color: #099fe7; opacity: 0.1;} .about-value .con02 .circle-box .circle03 { position: absolute; width: 55px; height: 55px; left: 25px; bottom: 25px; border-radius: 50%; background-color:#099fe7; z-index: 10;} .about-value .con02 .circle-box .circle03 i {font-size: 21px; line-height:1.5; font-weight: 400; color: #ffffff; padding-top: 14px;} /* ****************** Company :: Facility ********************** */ /* ***** Facility 상단 타이틀 ***** */ .facility-tit {text-align:center; margin-bottom:80px; } .facility-tit .tit {font-size: 45px; line-height:1.2; letter-spacing: -0.025em; font-weight: 600; margin-bottom: 50px; color:#099fe7; } .facility-tit .txt01 {font-size: 24px; line-height:1.2; letter-spacing: -0.025em; font-weight: 600; margin-bottom: 30px; color: #757575;} .facility-tit .txt02 {font-size: 20px; line-height:1.9; letter-spacing: -0.025em; font-weight: 400; color: #5e5e5e;} /* ***** Facility 첫번째 컨텐츠 ***** */ .facility-con01 {margin-bottom: 160px;} .facility-con01-bg {background:url("../image/facility_bg.jpg") no-repeat center/cover; padding:282px 0;} .facility-con01 .facility-info {margin-top: -85px;} .facility-con01 .facility-info .info-box {width: 100%; display: flex; text-align:center; padding: 65px 0 55px 0; background-color:#ffffff; border-radius: 25px; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); z-index:100; box-sizing: border-box;} .facility-con01 .facility-info .info-box dl {width: 25%;border-right: 1px solid #ebebeb; box-sizing: border-box; } .facility-con01 .facility-info .info-box dl:last-child {border-right: none; } .facility-con01 .facility-info .info-box .info-tit {font-size: 19px; line-height:1.1; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e; margin: 30px 0 28px 0;} .facility-con01 .facility-info .info-box dd {font-size: 16px; line-height:1.2; letter-spacing: -0.025em; font-weight: 400; color: #5e5e5e; margin-bottom: 20px} .facility-con01 .facility-info .address_box {width: 100%; display: flex; align-items: center; padding:70px 75px; box-sizing: border-box; } .facility-con01 .facility-info .address_box .tit {width: 11%; font-size: 19px; line-height:1; letter-spacing: -0.025em; font-weight: 700;box-sizing: border-box; padding-right:20px;} .facility-con01 .facility-info .address_box .address {width: 75%; font-size: 16px; line-height:1.2; letter-spacing: -0.025em; font-weight: 400;box-sizing: border-box; padding-right:20px; } .facility-con01 .facility-info .address_box .view-map {width: 14%; font-size: 14.5px; line-height:1; letter-spacing: -0.025em; font-weight: 600; color: #000000;} .facility-con01 .facility-info .address_box span {display: inline-block; width: 40px; height: 40px; background: linear-gradient(45deg, #06a1e7 0%,#6e76f8 100%); border-radius: 50%; text-align:center; font-size: 22px; color:#ffffff; line-height:2; margin-left: 27px; box-shadow: 4px 4px 8px 0 rgb(0 0 0 / 20%); } /* ***** Facility 두번째 컨텐츠 ***** */ .facility-con02 .con-box {position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom:30px; box-sizing: border-box;} .facility-con02 .box-line::before {position: absolute; content:""; width: 3px; height: 680px; top: 30px; left: 10px; border-right: 3px dotted #ebebeb; } .facility-con02 .con-box .txt-box {position: relative; width: 64%; padding: 0 53px; box-sizing: border-box; } .facility-con02 .con-box .img-box {width: 36%; } .facility-con02 .con-box .img-box img {width:100%;} .facility-con02 .con-box .tit {position: relative; font-size: 24px; line-height:1.2; letter-spacing: -0.025em; font-weight: 700; color: #099fe7; margin-bottom:25px; } .facility-con02 .con-box .tit::after {position: absolute; content:""; width: 10px; height: 10px; top:8px; left:-43px; background-color:#099fe7; border-radius: 50%; } .facility-con02 .con-box .tit::before {position: absolute; content:""; width: 30px; height: 30px; top:-2px; left:-53px; background-color:#e6f5fd; border-radius: 50%; } .facility-con02 .con-box .txt {font-size: 16px; line-height:2.2; letter-spacing: -0.025em; font-weight: 400; color: #5e5e5e;} .facility-con02 .con-box .txt sup{font-size:0.3em;} /* ****************** Contact :: Location ********************** */ .contact-page {margin:50px 0;} .map-con01 {display: flex; padding-bottom:100px; border-bottom: 1px solid #e7e7e7;} .map-con02 {display: flex; padding-top:100px; } .map-con-tbl {width: 50%; padding:40px 0; } .map-iframe-wrap {width: 50%;} .map-con .con-tit {font-size: 44px; line-height:1.2; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e;} .map-con .con-tbl {width: 100%; margin-top: 25px; box-sizing:border-box; } .map-con .con-tbl dl {width: 100%; margin-bottom: 15px; display: flex;} .map-con .con-tbl dt {width: 30%; font-size: 16px; line-height:2.2; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e; text-align:left;} .map-con .con-tbl dt i {color: #aeaeae; font-size: 18px; padding-right: 12px;} .map-con .con-tbl dd{width: 70%; font-size: 16px; line-height:2.2; letter-spacing: -0.025em; font-weight: 400; color: #5e5e5e;} .map-iframe{position:relative; overflow:hidden; margin:0px auto; height: 100%; } .map-iframe iframe{position:absolute; top: 0; left: 0; width: 100%; height: 100%;} /* ****************** Contact :: Recruit ********************** */ .recruit-page {padding:90px 0;} .recruit-list-tab-style {padding-top:75px;} /* ********** Recruit :: 인재상 ********** */ .talent-tit {display: flex; justify-content: center; align-items: center; text-align: center;} /* .talent-tit::before {position: absolute; content: '“'; left:19%; top:25px; font-size: 72px; line-height: 1; letter-spacing: -0.065em; font-weight: 700; color:#5e5e5e;} .talent-tit::after {position: absolute; content: '”'; right:19%; top:25px; font-size: 72px; line-height: 1; letter-spacing: -0.065em; font-weight: 700; color:#5e5e5e;} */ .talent-tit .tit-middle {font-size: 40px; line-height: 1.4; letter-spacing: -0.050em; font-weight: 400; color:#5e5e5e;} .talent-tit .tit-middle span { font-weight: 700;} .talent-tit .tit-left, .tit-right {font-size: 72px; line-height: 1; letter-spacing: -0.065em; font-weight: 700; color:#5e5e5e; padding-top:20px;} .talent-tit .tit-left {padding-right:55px;} .talent-tit .tit-right {padding-left:55px;} .talent-con {width: 100%; padding-top:175px; display: flex; align-items: stretch; justify-content: space-between; } .talent-con-box {width: 32%;display: flex; align-items: center; flex-direction: column; justify-content: flex-start; text-align:center; border: 1px solid #00a8e5; } .talent-con-box .icon-box {width: 130px; height: 130px; background: linear-gradient(45deg, #06a1e7 0%,#6e76f8 100%); border-radius: 50%; padding:38px; box-sizing: border-box; box-shadow: 4px 4px 8px 0 rgb(0 0 0 / 20%); margin-top:-65px} .talent-con-box .txt-box {padding:30px 0 40px 0;} /* .talent-con-box.last-box .txt-box{padding: 30px 0 54px 0;} .talent-con-box.last-box .txt-box .txt {padding-top:14px;} */ .talent-con-box .txt-box .tit-en {font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color:#00a8e5; padding-bottom:10px;} .talent-con-box .txt-box .tit-kr {font-size: 18px; line-height: 1.1; letter-spacing: -0.065em; font-weight: 500; color:#222222; padding-bottom:20px;} .talent-con-box .txt-box .txt {font-size: 16.5px; line-height: 1.7; letter-spacing: -0.025em; font-weight: 400; color:#777777; height:85px; display: flex; align-items:center;} .talent-con-box .img-box {width: 100%;} .talent-con-box .img-box img {width: 100%;} /* ********** Recruit ::복리후생 ********** */ .welfare-list {display:flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;} .welfare-list .welfare-list-con {width: 49%; display:flex; align-items: center; padding: 45px 0; box-sizing: border-box; border-radius: 25px; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 10%); margin-bottom: 32px;} .welfare-list .list-name {width: 32%; text-align: center; box-sizing: border-box;} .welfare-list .list-name .name {font-size: 21px; line-height: 1.4; letter-spacing: -0.050em; font-weight: 700; color:#5e5e5e; padding-top:20px;} .welfare-list .list-con{width: 68%; display:flex; flex-direction: column;} .welfare-list .list-con li {position: relative; display:flex; padding-bottom:10px; padding-left:20px;} .welfare-list .list-con li:last-child {padding-bottom:0;} .welfare-list .list-con li .list-con-item {width: 25%; font-size: 16px; line-height: 1.5; letter-spacing: -0.065em; font-weight: 500; color:#5e5e5e;} .welfare-list .list-con li .list-con-sub {width: 75%; font-size: 16px; line-height: 1.5; letter-spacing: -0.065em; font-weight: 400; color:#5e5e5e;} .welfare-list .list-con li .list-con-sub.sub-o {width:100%;} .welfare-list .list-con li::before{position: absolute; content:"\e929"; left:0px; top:5px; font-size: 16px; color:#00a8e5; line-height: 1.1;font-family:xeicon; } /* ********** Recruit ::채용공고 ********** */ /* 채용공고 표 */ .recruit-con-tbl {width: 100%; margin-bottom:70px;} .recruit-con-tbl .con-tit {font-size: 22.3px; line-height: 1.1; letter-spacing: -0.065em; font-weight: 700; color:#5e5e5e; display: flex; align-items: center; } .recruit-con-tbl .xi-maker { background: linear-gradient(45deg, #06a1e7 0%,#6e76f8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 30px; padding-right:6px;} .recruit-con-tbl .con-tbl-wrap {width: 100%; margin-top:30px; box-shadow: 0px 0px 40px 0px rgb(0 0 0 / 8%); border-radius:15px; overflow:hidden;} .recruit-con-tbl .con-tbl {width: 100%; border-collapse: collapse; box-sizing: border-box; } .recruit-con-tbl .con-tbl thead {background-color: #099fe7;} .recruit-con-tbl .con-tbl thead th {text-align:center; font-size: 16px; line-height: 1.1; letter-spacing: -0.065em; font-weight: 500; color:#ffffff; padding:15px 0;} .recruit-con-tbl .con-tbl tbody th {background-color: #099fe8; background-color: rgba(9,159,231,0.03); color: #099fe7; font-size: 15.5px; line-height: 1.5; letter-spacing: -0.050em; font-weight: 400; -ms-text-align-last: right; text-align: center; padding:20px 10px;} .recruit-con-tbl .con-tbl tbody tr {border-bottom:1px solid rgba(9,159,231,0.15);} .recruit-con-tbl .con-tbl tbody tr:last-child {border-bottom:0;} .recruit-con-tbl .con-tbl td {font-size: 15.5px; line-height: 1.6; letter-spacing: -0.050em; font-weight: 400; color: #5e5e5e; padding:20px 10px;} .recruit-con-tbl .con-tbl td.txt-align {text-align: center;} .recruit-con-tbl .con-tbl td p{position: relative; padding-left:20px;word-break:keep-all;} .recruit-con-tbl .con-tbl td p::before {position: absolute; content:"\e929"; left:0; top:2px; font-size: 18px; color:#00a8e5; line-height: 1.1; font-family:xeicon; } /* 채용공고 절차*/ .recruit-process {width: 100%; padding: 70px 60px; box-sizing: border-box;} .recruit-process .list {width: 100%; } .recruit-process .list li {position:relative; float:left; width: 21.5%; margin-right:4%; } .recruit-process .list li:after {position: absolute; content:"\e93e"; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-left: 59.5%; color:#b3b3b3; font-weight:600; font-family:xeicon;} .recruit-process .list li span {position: relative;display: block; height: 0; padding-top: 100%;} .recruit-process .list .list-inner {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; box-sizing: border-box; border-radius:50%; border: 1px solid transparent; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(0deg, #06a1e7 0%,#6e76f8 100%); background-origin: border-box; background-clip: content-box, border-box; box-shadow:12px 12px 28px 0 rgb(0 0 0 / 6%); } .recruit-process .list .list-inner .list-con {display: flex;align-items: center;flex-direction: column; justify-content: center;width: 100%;height: 100%;} .recruit-process .list .list-inner .txt-box .num {font-size: 15.2px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: #099fe7; padding:30px 0 10px 0;} .recruit-process .list .list-inner .txt-box .name {font-size: 20px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: #5e5e5e;} .recruit-process .list li:last-child {margin-right:0; width: 23.5%; margin-top:-1%;} .recruit-process .list li:last-child:after {display: none;} .recruit-process .list li:last-child .list-inner {border:none; background: linear-gradient(60deg, #06a1e7 20%,#6e76f8 80%); box-shadow: 4px 4px 11px 0 rgb(0 0 0 / 20%); } .recruit-process .list li:last-child .list-inner .txt-box .num {color: #d1e1fa;} .recruit-process .list li:last-child .list-inner .txt-box .name {color: #ffffff;} /* 채용공고 정보*/ .recruit-info {width: 100%;} .recruit-info .info-con {width: 100%; border-top: 2px solid #757575; display:flex; flex-wrap:wrap;} .recruit-info .info-con li {width: 50%; display:flex; border-bottom: 1px solid #c2c2c2; padding:60px 0 60px 32px; box-sizing: border-box;} .recruit-info .info-con li:last-child { border-bottom: none;} .recruit-info .info-con li .info-tit {width: 32%; padding-right:5%; font-size: 25px; line-height: 1.5; letter-spacing: -0.065em; font-weight: 700; color:#5e5e5e; } .recruit-info .info-con li .info-txt {width: 63%; font-size: 16px; line-height: 2.25; letter-spacing: -0.065em; font-weight: 400; color:#5e5e5e; } .recruit-info .info-con li:nth-child(2) {padding:60px 0 60px 0; } .recruit-info .info-con li:nth-child(2) .info-tit {width: 30%;} .recruit-info .info-con li:nth-child(2) .info-txt {width: 70%;} /* 채용공고 유의사항*/ .recruit-notice {background-color: #f9f9f9;} .recruit-notice .recruit-notice-con {padding:55px 88px; display: flex; align-items: center;} .recruit-notice .recruit-notice-con .left-con {text-align:center; padding-right:120px;} .recruit-notice .recruit-notice-con .left-con i {font-size: 70px; color:#099fe7;} .recruit-notice .recruit-notice-con .left-con .txt {font-size: 26px; line-height: 1.1; letter-spacing: -0.065em; font-weight: 700; color:#099fe7; padding-top:22px;} .recruit-notice .recruit-notice-con .right-con .txt {position: relative; font-size: 16px; line-height: 2.25; letter-spacing: -0.065em; font-weight: 400; color:#5e5e5e; padding-left:8px;} .recruit-notice .recruit-notice-con .right-con .txt::before {position: absolute; content:""; width: 6px; height: 2px; background-color: #d8d8d8; top:17px; left:-8px;}