.body-sub,
.subContents,
.contents {margin:0;}
/* 010101 */
.company {font-size: 0; position: relative;}
.company .img {display: inline-block; margin-right: 50px; width: 32%;}
.company .text {display: inline-block; vertical-align: top; width: calc(68% - 50px); color: #222; line-height: 1.4;}
.company .text .top {margin-bottom: 60px;}
.company .text .top h5 {display: inline-block; font-size: 30px; font-weight: 400; padding-bottom: 5px; margin-bottom: 35px; border-bottom: 2px solid #616161;}
.company .text .top h4 {font-size: 60px; font-weight: 700; color: #3899d4;}
.company .text .top h4 span {color: #8ec54a; vertical-align: baseline;}
.company .text .top h4 br {display: none;}
.company .text .top p {font-size: 25px; font-weight: 500;}
.company .bottom p {font-size: 18px; font-weight: 300; margin-bottom: 45px; line-height: 1.5;}
.company .bottom p span {vertical-align: baseline; font-weight: 500;}
.company .bottom p.name {font-size: 24px;}
@media only screen and (max-width: 1024px){
.company .img {margin: 0; position: absolute; top: 0; left: 0; width: 200px; overflow: hidden;}
.company .img img {transform: translateY(-50px);}
.company .text {width: 100%;}
.company .text .top {padding-left: 220px; margin-bottom: 17%;}
.company .text .top h5 {font-size: 25px;}
.company .text .top h4 {font-size: 50px;}
.company .text .top p {font-size: 22px;}
}
@media only screen and (max-width: 768px){
.company .text .top {margin-bottom: 15%;}
.company .text .top h4 br {display: block;}
.company .text .top h5 {font-size: 20px;}
.company .text .top h4 {font-size: 40px;}
.company .text .top p {font-size: 18px;}
.company .bottom p br {display: none;}
}
@media only screen and (max-width: 480px){
.company .text .top {padding-left: 0px; margin-bottom: 30px;}
.company .img {display: none;}
.company .text .top h5 {font-size: 16px; margin-bottom: 15px;}
.company .text .top h4 {font-size: 25px;}
.company .text .top h4 br {display: none;}
.company .text .top p {font-size: 16px;}
.company .bottom p {font-size: 16px; margin-bottom: 20px;}
.company .bottom p.name {font-size: 18px;}
}
/* 010201 */
.business .business-title {text-align: center; margin-bottom: 70px;}
.business .business-title h4 {font-size: 50px; font-weight: 300; display: inline-block;}
.business .business-title h4 span {vertical-align: baseline; font-weight: 500;}
.business .business-title h4:nth-of-type(1) {color: #389ad6;}
.business .business-title h4:nth-of-type(2) {color: #8ec54a; padding: 0 25px; margin: 0 30px; position: relative;}
.business .business-title h4:nth-of-type(2)::before, .business .business-title h4:nth-of-type(2)::after {content: ""; width: 5px; height: 5px; border-radius: 50%; background: #222;}
.business .business-title h4:nth-of-type(2)::before {position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);}
.business .business-title h4:nth-of-type(2)::after {position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%);}
.business .business-title h4:nth-of-type(3) {color: #dc499c;}
.business .bg {background: #f1f6f8; padding: 95px 0 80px; margin-bottom: 150px;}
.business .bg .inner {font-size: 0;}
.business .bg .business-item {display: inline-block; width: 33.3333%;}
.business .bg .business-item p {font-size: 18px; font-weight: 300; color: #222; padding-left: 145px; position: relative; line-height: 1.4;}
.business .bg .business-item p::after {content: ""; width: 125px; height: 130px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
.business .bg .business-item:nth-of-type(1) p::after {background: url('../images/contents/business-top01.png') center no-repeat;}
.business .bg .business-item:nth-of-type(2) p::after {background: url('../images/contents/business-top02.png') center no-repeat;}
.business .bg .business-item:nth-of-type(3) p::after {background: url('../images/contents/business-top03.png') center no-repeat;}
.business .bottom {text-align: center;}
.business .bottom .business-tablet, .business .bottom .business-mo {display: none;}
.business .bottom .business-mo {text-align: left; line-height: 1.4; margin-top: 15px;}
.business .bottom .business-mo .text {margin-bottom: 45px; }
.business .bottom .business-mo h4 {font-size: 40px; font-weight: 700; margin-bottom: 20px;}
.business .bottom .business-mo .text:first-child h4 {color: #3899d4;}
.business .bottom .business-mo .text:nth-of-type(2) h4 {color: #d9318f;}
.business .bottom .business-mo .text:last-child h4 {color: #8ec54a;}
.business .bottom .business-mo p {font-size: 18px; font-weight: 300; color: #222;}
.business .bottom .business-mo p:nth-of-type(1) {margin-bottom: 15px;}
@media only screen and (max-width: 1024px){
.business .business-title h4 {font-size: 30px;}
.business .bg {margin-bottom: 100px;}
.business .bg .business-item {width: 100%; padding: 50px 0; margin-bottom: 30px;}
.business .bottom .business-tablet, .business .bottom .business-mo {display: block;}
.business .bottom .business-pc {display: none;}
}
@media only screen and (max-width: 768px){
.business .bottom .business-mo h4 {font-size: 32px;}
.business .bottom .business-mo p {font-size: 16px;}
}
@media only screen and (max-width: 640px){
.business .business-title h4 {display: block; font-size: 24px;}
.business .business-title h4:nth-of-type(2) {padding: 0; margin: 15px 0;}
.business .business-title h4:nth-of-type(2)::before, .business .business-title h4:nth-of-type(2)::after {display: none;}
.business .bg {padding: 50px 0; margin-bottom: 50px;}
.business .bg .business-item p {font-size: 16px;}
.business .bottom .business-mo h4 {font-size: 28px;}
}
@media only screen and (max-width: 480px){
.business .bg .business-item {margin-bottom: 10px; padding: 20px 0;}
.business .bg .business-item p {padding-left: 100px;}
.business .bg .business-item p::after {width: 80px; }
.business .bg .business-item:nth-of-type(1) p::after, .business .bg .business-item:nth-of-type(2) p::after, .business .bg .business-item:nth-of-type(3) p::after {background-size: contain;}
.business .bottom .business-mo h4 {font-size: 24px;}
}
/* 010301 */
.history-wrap .top {text-align: center; line-height: 1.4; font-weight: 300; margin-bottom: 90px;}
.history-wrap .top h4 {font-size: 40px; color: #389ad6;}
.history-wrap .top h4 br {display: none;}
.history-wrap .top h4 span {vertical-align: baseline; color: #8ec54a;}
.history-wrap .top p {font-size: 25px; font-weight: 500; color: #222;}
.history-wrap .top .img {display: inline-block; width: 165px; height: 65px; background: url('../images/contents/history-top.png') center no-repeat; background-size: contain; margin-bottom: 30px;}
.history-item {padding-bottom: 90px; position: relative;}
.history-item::before {content: ""; width: 1px; height: 92%; background: #222; position: absolute;}
.history-item h4.year {font-family: 'Montserrat', sans-serif; font-size: 50px; font-weight: 700; color: #389ad6; margin-bottom: 25px; position: relative;}
.history-item h4.year::after {content: ""; width: 15px; height: 15px; background: url('../images/contents/history-dot.png') center no-repeat;}
.history-item .text {line-height: 1.4; font-size: 0; margin-bottom: 10px;}
.history-item .month, .history-item .text h4 {font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: #222; }
.history-item .text h4 {padding-top: 2px;}
.history-item .text::after {display: block; content: ""; clear: both;}
.history-item p {width: calc(100% - 55px); display: inline-block; font-size: 18px; font-weight: 300; color: #666;}
.history-item .text div p {padding-left: 10px; margin-bottom: 10px; position: relative;}
.history-item .text div p::before {content: ""; width: 5px; height: 1px; background: #666; position: absolute; top: 12px; left: 0;}
.history-wrap .img-wrap {width: 100%; position: absolute; top: 0; right: calc(100% + 50px);}
.history-wrap .img-wrap .bg {width: 350px; height: 300px; background: url('../images/contents/history-bg.png') center no-repeat;}
.history-wrap .img-wrap .img {font-size: 0; position: absolute; top: 50%; right: 0;}
.history-wrap .img-wrap .img-item {display: inline-block; width: calc(50% - 10px); padding: 20px; background: #fff; border: 1px solid #ececec;}
.history-wrap .img-wrap .img-item:first-child {margin-right: 20px;}
.history-item.type1 {text-align: right; margin-right: 50%; padding-right: 50px;}
.history-item.type1::before {top: 35px; right: 0;}
.history-item.type1 h4.year::after {position: absolute; top: 50%; right: -50px; transform: translate(50%, -50%);}
.history-item.type1 .month {width: 45px; float: right; margin-left: 10px; vertical-align: top;}
.history-item.type1 .month+div {width: calc(100% - 55px);}
.history-item.type2 {text-align: left; margin-left: 50%; padding-left: 50px;}
.history-item.type2::before {top: 35px; left: 0; height: 97%;}
.history-item.type2 h4.year::after {position: absolute; top: 50%; left: -50px; transform: translate(-50%, -50%);}
.history-item.type2 .month {float: left; width: 45px; margin-right: 10px;}
.history-item.type2 .month+div {float: left; width: calc(100% - 55px);}
.history-item:last-child:before {top: 35px; left: 0; height: 150%;}
@media only screen and (max-width: 1240px){
.history-wrap .img-wrap .img {width: 90%;}
}
@media only screen and (max-width: 1024px){
.history-wrap .top h4 {font-size: 22px;}
.history-wrap .top p {font-size: 18px;}
.history-item h4.year {font-size: 30px;}
.history-item.type1 .month, .history-item .text h4 {font-size: 18px;}
.history-item p {font-size: 16px;}
}
@media only screen and (max-width: 768px){
.history-item.type1 {text-align: left; padding-left: 50px; margin-right: 0;}
.history-item.type1::before {top: 28px; left: 0;}
.history-item.type1 h4.year::after {top: 50%; left: -50px; transform: translate(-50%, -50%);}
.history-item.type1 .month {float: left; margin-right: 10px; margin-left: 0;}
.history-item.type2 {margin-left: 0;}
.history-item.type2::before {height: 94%;}
}
@media only screen and (max-width: 640px){
.history-wrap .img-wrap {display: none;}
.history-item.type1, .history-item.type2 {padding-left: 25px;}
.history-item.type1 h4.year::after, .history-item.type2 h4.year::after {left: -25px;}
}
@media only screen and (max-width: 480px){
.history-wrap .top h4 br {display: block;}
.history-wrap .top h4 {font-size: 18px;}
.history-wrap .top p {font-size: 16px;}
.history-item h4.year {margin-bottom: 15px;}
.history-item.type1 .month, .history-item .text h4 {font-size: 16px;}
}
/* 010401 */
.organization-wrap {position: relative;}
.organization-wrap::before {content: ""; width: 390px; height: 175px; background: url('../images/contents/organization-bg.png') center no-repeat; position: absolute; right: 0; bottom: 0; z-index: -1;}
.organization-wrap .organization-tablet, .organization-wrap .organization-mo {display: none;}
@media only screen and (max-width: 1024px){
.organization-wrap .organization-tablet {display: block;}
.organization-wrap .organization-pc {display: none;}
}
@media only screen and (max-width: 480px){
.organization-wrap .organization-mo {display: block;}
.organization-wrap .organization-tablet {display: none;}
.organization-wrap::before {width: 320px; background-size: contain;}
}
/* 010601 */
.map-wrap {line-height: 1.4; color: #222; text-align: center;}
.map-top {font-size: 25px; font-weight: 400; text-align: center; margin-bottom: 60px;}
.map {width: 100%; height: 645px; background: #3798d3; margin-bottom: 65px;}
.map-wrap ul {width: 100%; text-align: left;}
.map-wrap ul li {width: 100%; padding: 45px 50px; border: 1px solid #ececec; margin-bottom: 30px; position: relative;}
.map-wrap ul li:last-child {margin-bottom: 0;}
.map-wrap ul li::after {display: block; content: ""; clear: both;}
.map-wrap ul li.on {background: #f1f6f8; border: 1px solid #f1f6f8;}
.map-wrap ul li .btn:hover {background: linear-gradient(to right, rgba(106,182,75,1) 0%,rgba(49,177,210,1) 100%);}
.map-wrap .text-wrap {font-size: 0; float: left; width: calc(100% - 70px);}
.map-wrap ul li h4 {font-size: 25px; font-weight: 700; margin-bottom: 15px;}
.map-wrap ul li p {display: inline-block; font-size: 18px; font-weight: 300; color: #666;}
.map-wrap ul li span {font-size: 20px; font-weight: 500; color: #222; vertical-align: baseline; margin-right: 8px;}
.map-wrap .text {display: inline-block;}
.map-wrap .text:nth-of-type(1) {width: 50%;}
.map-wrap .text:nth-of-type(2), .map-wrap .text:last-child {width: 25%;}
.map-wrap ul li:last-child .text-wrap {width: 100%;}
.map-wrap ul li:last-child .text {width: 25%;}
.map-wrap ul .btn {float: right; width: 70px; height: 70px; border-radius: 50%; background: #222; position: relative; cursor: pointer;}
.map-wrap ul .btn::before {content: ""; width: 26px; height: 26px; background: url('../images/contents/map-search.png'); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.map-wrap ul li.on .btn {background: linear-gradient(to right, rgba(106,182,75,1) 0%,rgba(49,177,210,1) 100%);}
.map-wrap > .btn {display: inline-block; margin-top: 80px;}
.map-wrap > .btn a {display: block; border-radius: 30px; background: #222; color: #fff; padding: 15px 45px;}
.map-wrap > .btn:hover a {background: linear-gradient(to right, rgba(106,182,75,1) 0%,rgba(49,177,210,1) 100%);}
.map-wrap > .btn a p {padding-right: 50px; position: relative;}
.map-wrap > .btn a p::before {content: ""; width: 10px; height: 15px; background: url('../images/contents/content-arrow.png') center no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
@media only screen and (max-width: 1024px){
.map-wrap .text:nth-of-type(1) {width: 100%;}
.map-wrap .text:nth-of-type(2), .map-wrap .text:last-child {width: 40%;}
.map-wrap ul li:last-child .text {width: 50%;}
}
@media only screen and (max-width: 768px){
.map-top, .map-wrap ul li h4 {font-size: 22px; margin-bottom: 10px;}
.map-wrap ul li span {font-size: 18px;}
.map-wrap ul li p {font-size: 16px;}
}
@media only screen and (max-width: 640px){
.map-wrap .text:nth-of-type(1) {margin-bottom: 5px;}
.map-wrap .text:nth-of-type(2), .map-wrap .text:last-child {width: 50%;}
.map-top, .map-wrap ul li h4 {margin-bottom: 20px;}
.map-wrap ul li {padding: 25px 30px;}
.map-wrap ul .btn {width: 50px; height: 50px;}
.map-wrap ul .btn::before {width: 20px; height: 20px; background-size: contain;}
}
@media only screen and (max-width: 480px){
.map-wrap ul li {padding: 20px 20px 15px;}
.map-wrap ul .btn {position: absolute; top: 15px; right: 15px;}
.map-wrap .text-wrap {width: 100%;}
.map-wrap .text:nth-of-type(2), .map-wrap .text:last-child {width: 100%; margin-bottom: 5px;}
}
/* 010701 */
.directions-tab {font-size: 0; border: 1px solid #ececec; margin-bottom: 115px;}
.directions-tab li {display: inline-block; width: 33.3333%;}
.directions-tab li:nth-of-type(2) {border-left: 1px solid #ececec; border-right: 1px solid #ececec;}
.directions-tab li a {display: block; padding: 20px 0; font-size: 18px; font-weight: 400; color: #666; text-align: center;}
.directions-tab li.on a {background: #222; font-weight: 700; color: #fff;}
.directions-tab li:hover a {background: #222; font-weight: 700; color: #fff;}
.directions-wrap > div {position: relative; display: none;}
.directions-wrap > div.on {display: block;}
.directions-wrap .directions-map {height: 645px; background: chocolate; position: relative;}
.directions-wrap > div .inner {width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
.directions-wrap .map-info {display: inline-block; background: #8ec54a;}
.directions-wrap .map-info div {padding: 55px 75px; font-size: 0; color: #fff; max-width: 490px;}
.directions-wrap .map-info div h4 {font-size: 30px; font-weight: 700; margin-bottom: 25px; padding-left: 60px; position: relative;}
.directions-wrap .map-info div p {font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.4;}
.directions-wrap .address {background: #389ad6;}
.directions-wrap .address h4::before {content: ""; width: 50px; height: 50px; background: url('../images/contents/directions-address.png') center no-repeat; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.directions-wrap .tel {background: #8ec54a; }
.directions-wrap .tel h4::before {content: ""; width: 50px; height: 50px; background: url('../images/contents/directions-tel.png') center no-repeat; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.directions-wrap .tel p {display: inline-block; width: 50%;}
@media only screen and (max-width: 1024px){
.directions-wrap > div .inner {margin: 0; width: auto; position: inherit; transform: translateX(0); left: 0;}
.directions-wrap .map-info {font-size: 0; width: 100%;}
.directions-wrap .map-info div {display: inline-block; width: 50%; padding: 50px 30px;}
.directions-wrap .map-info div h4 {font-size: 24px;}
.directions-wrap .map-info div p {font-size: 18px;}
}
@media only screen and (max-width: 768px){
.directions-wrap .directions-map {height: 500px;}
.directions-wrap .directions-map::after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.directions-wrap .map-info div {width: 100%; max-width: 100%;}
}
@media only screen and (max-width: 480px){
.directions-tab li {width: 100%;}
.directions-tab li:nth-of-type(2) {border: 1px solid #ececec; border-right: 0; border-left: 0;}
.directions-wrap .directions-map {height: 400px;}
}
/*★★★★★ ì œí’ˆ ê´€ë ¨ 부분 : S ★★★★★*/
/*Button Style*/
.newbtn-wrap {font-size:0; margin-top:8.5%; text-align:center;}
.newbtn-wrap.type2 {margin-top:5.2%;}
.newProduct__info-desc .newbtn-wrap,
.newProduct__smart .newbtn-wrap {text-align:left;}
.newbtn {display:inline-block; line-height:60px; border-radius:60px; min-width:210px; background-color:#222; color:#fff; padding:0 70px 0 40px; transition:all 0.5s ease-in-out; position:relative; z-index:1; overflow:hidden; text-align:left;}
.newbtn.stype {min-width:260px;}
.newbtn.type2 {background-color:#3899d5;}
.newbtn.type3 {background-color:#df479c;}
.newbtn.type4 {background-color:#f6bf00; color:#222;}
.newbtn:before {content:''; display:block; height:100%; position:absolute; top:0; left:0;background: linear-gradient(to right, rgba(135,194,85,1) 0%,rgba(83,166,167,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87c255', endColorstr='#53a6a7',GradientType=1 ); width:0; opacity:0; transition: all 0.3s ease-in-out; z-index:-1;}
.newbtn:hover {background-color:transparent; color:#fff;}
.newbtn:hover:before{opacity:1; width:100%;}
.newbtn:after {content:''; display:block; width:60px; height:60px; position:absolute; top:50%; right:10px; margin-top:-30px; background-position:100% 50%; background-repeat:no-repeat; background-size:contain; transition: all 0.3s ease-in-out;}
.newbtn:hover:after {animation: heartBeat 2s infinite;}
.newbtn.stype:after {width:10px; height:10px; background-color:transparent; border-width: 2px 2px 0 0; border-style: solid; border-color:#fff; position:absolute; top:50%; right:35px; margin-top:0; transform:translateY(-50%) rotate(45deg); }
.newbtn.stype:hover:after {right:30px; animation: none;}
.newbtn.stype.type4:after {border-color: #222;}
.newbtn.stype.type4:hover::after {border-color: #fff;}
.newbtn span {font-size:18px; line-height:1.3;}
.newbtn + .newbtn {margin-left:20px;}
.newbtn.zoom:after {background-image:url('../images/contents/ico_zoom01.png');}
.newbtn.write:after {background-image:url('../images/contents/ico_write01.png');}
.newbtn.pay:after {background-image:url('../images/contents/ico_pay01.png');}
@media only screen and (max-width:1024px){
.newbtn-wrap.type2 {margin-top:8%;}
.newbtn {line-height:50px; border-radius:50px; min-width:170px; padding:0 55px 0 30px;}
.newbtn:after {width:50px; height:50px; right:5px; margin-top:-25px;}
.newbtn span {font-size:16px;}
.newbtn + .newbtn {margin-left:10px;}
}
@media only screen and (max-width:768px){
.newbtn-wrap.type2 .newbtn.stype,
.newProduct__info-desc .newbtn,
.newProduct__smart .newbtn {min-width:calc(50% - 5px);}
}
@media only screen and (max-width:480px){
.newbtn-wrap.type2 {margin-top:16%;}
.newbtn-wrap.type2 .newbtn.stype,
.newbtn,
.newProduct__info-desc .newbtn,
.newProduct__smart .newbtn {min-width:100%;}
.newbtn + .newbtn {margin:10px 0 0 0;}
}
/*ì œí’ˆ 리스트 ìƒë‹¨*/
.newProduct__header-wrap {text-align:center;}
.newProduct__header-copy {line-height:1.3;}
.newProduct__header-copy .copy1 {font-size:23px; font-weight:300; }
.newProduct__header-copy .copy1 span{padding:5px 40px; color:#fff; background-color:#3899d5; line-height:1.3;}
.newProduct__header-copy .copy2 {font-size:40px; font-weight:300; margin:10px 0 0 0;}
.newProduct__header-copy .copy3 {font-size:25px; font-weight:600; margin:10px 0 0 0; color:#222;}
.newProduct__smart {padding:5.2% 0; margin:3.6% 0 0 0; background:url('../images/contents/product_list_bg01.png') 50% 50% no-repeat; background-size:cover; font-size:0;}
.newProduct__smart-box {display:inline-block; vertical-align:middle; width:50%;}
.newProduct__smart-box.nth-1 {text-align:center;}
.newProduct__smart-box .thumb {padding:0 4.28% 0 0;}
.newProduct__smart-desc .series{font-size:25px; font-family: 'Montserrat', sans-serif; font-weight:700; color:#222;}
.newProduct__smart-desc .title{font-size:50px; font-weight:700; color:#222; line-height:1.3; margin-top:5px;}
.newProduct__smart-desc .text {font-size:18px; font-weight:300; color:#222; line-height:1.5; margin-top:15px;}
@media only screen and (max-width:1024px){
.newProduct__header-copy .copy1 {font-size:18px;}
.newProduct__header-copy .copy1 span{padding:5px 20px;}
.newProduct__header-copy .copy2 {font-size:36px;}
.newProduct__header-copy .copy3 {font-size:20px;}
.newProduct__smart-box .thumb {padding:0 8% 0 0;}
.newProduct__smart-desc .series{font-size:18px;}
.newProduct__smart-desc .title{font-size:40px;}
.newProduct__smart-desc .text {font-size:16px;}
}
@media only screen and (max-width:768px){
.newProduct__header-copy .copy1 {font-size:16px;}
.newProduct__header-copy .copy1 span{padding:5px 20px;}
.newProduct__header-copy .copy2 {font-size:32px;}
.newProduct__header-copy .copy3 {font-size:18px; margin-top:5px;}
.newProduct__smart {padding:10% 0;}
.newProduct__smart-box {display:block; width:100%;}
.newProduct__smart-box.nth-2 {margin-top:10%;}
.newProduct__smart-box .thumb {padding:0 0 0 0;}
.newProduct__smart-desc .series{font-size:18px; text-align:center;}
.newProduct__smart-desc .title{font-size:40px; text-align:center;}
.newProduct__smart-desc .text {font-size:16px;}
}
/* Product Tab */
.newProduct__tab {z-index:1;}
.newProduct__tab-wrap {margin:8.57% 0 0 0; z-index:1;}
.newProduct__tab-list {font-size:0; position:relative; z-index:2;}
.newProduct__tab-list:after {content:''; display:block; width:100%; height:2px; position:absolute; bottom:0; left:0; background-color:#222;}
.newProduct__tab-item {display:inline-block; width:20%; text-align:center; line-height:50px; }
.newProduct__tab-item a {display:inline-block; width:100%; padding:5px; background-color:#fff; border-top:1px solid #ededed; border-right:1px solid #ededed; transition:all 0.3s ease-in-out;}
.newProduct__tab-item:first-child a {border-left:1px solid #ededed;}
.newProduct__tab-item a span {display:inline-block; line-height:1.3; font-size:18px;}
.newProduct__tab-item a:hover,
.newProduct__tab-item.is-active a {background-color:#222; color:#fff; font-weight:700; border-color:#222;}
@media only screen and (max-width:1024px){
.newProduct__tab-wrap {margin:9% 0 0 0;}
.newProduct__tab-item {width:50%;}
.newProduct__tab-item:nth-child(1) {width:100%;}
.newProduct__tab-item:first-child a,
.newProduct__tab-item:nth-child(2n) a {border-left:1px solid #ededed;}
.newProduct__tab-item a span {font-size:16px;}
}
@media only screen and (max-width:480px){
.newProduct__tab-item {width: 100%;}
.newProduct__tab-item a {border-left:1px solid #ededed;}
.newProduct__tab-item a span {font-size:14px;}
}
/*ì œí’ˆë¦¬ìŠ¤íŠ¸ë¶€ë¶„*/
.newProduct-list {font-size:0; margin-top:-1%;}
.newProduct-item {display:inline-block; vertical-align:top; width:31%; margin:5.7% 0 0 3.5%; text-align:center;}
.newProduct-item:nth-of-type(3n+1){margin-left:0%;}
.newProduct-link {display:block; background-color:#fff; border:1px solid rgba(236, 236, 236, 1); transition:all 0.3s ease-in-out; }
.newProduct-link:hover { box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.3);}
.newProduct-link .thumb {overflow:hidden; font-size:0; line-height:1;}
.newProduct-link .thumb span {display:block; background-repeat:no-repeat; background-position:50% 50%; background-size:contain;transform:scale(1); transition:all 0.3s ease-in-out;}
.newProduct-link:hover .thumb span{transform:scale(1.2);}
.newProduct-link .series {font-size:16px; font-weight:700; font-family: 'Montserrat', sans-serif; color:#222;}
.newProduct-link .cate {position:relative; text-align:center; z-index:3; width:80%; margin:0 auto;}
.newProduct-link .cate:before {content:''; display:block; position:absolute; width:100%; height:3px; border-radius:3px; background-color:#222; top:-1px; left:50%; transform:translate(-50%, 0); z-index:2;}
.newProduct-link .cate em {display:inline-block; line-height:30px; border-radius: 30px; font-weight:500; position:absolute; left:50%; top:0; transform:translate(-50%, -50%); color:#fff;z-index:2; padding:0 10px; min-width:150px;}
.newProduct-link .cate span {display:block;}
.newProduct-link .cate span:before,
.newProduct-link .cate span:after {content:''; display:block; width:4px; height:4px; border-radius: 5px; border:3px solid #222; position:absolute; top:-4px;}
.newProduct-link .cate span:before {left:-15px;}
.newProduct-link .cate span:after {right:-15px;}
.newProduct-link .cate span em {display:inline-block; font-size:16px;}
.newProduct-link .cate.type1 em {background-color:#8ec54a;}
.newProduct-link .cate.type2 em {background-color:#222222;}
.newProduct-link .cate.type3 em {background-color:#389ad6;}
.newProduct-link .cate.type4 em {background-color:#11c3ce;}
.newProduct-link .desc {padding:10% 10% 18% 10%; transition:all 0.3s ease-in-out; text-align:center; position:relative; z-index:1;}
.newProduct-link .desc:after {content:''; position:absolute; bottom:0; left:0; height:0%; width:100%; transition:all 0.3s ease-in-out; background: linear-gradient(to right, rgba(135,194,85,1) 0%,rgba(83,166,167,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87c255', endColorstr='#53a6a7',GradientType=1 ); z-index:-1;}
.newProduct-link .desc span {display:block;}
.newProduct-link:hover .desc:after {width:100%; height:100%;}
.newProduct-link .title {font-size:25px; font-weight:500; color:#222;margin-top:10px;line-height:1.3; height:65px;}
.newProduct-link .text {font-size:18px; font-weight:300; color:#666; margin-top:15px; line-height:1.3; height:70px;}
.newProduct-link:hover .series,
.newProduct-link:hover .title,
.newProduct-link:hover .text {color:#fff;}
.newProduct-link .zoom {width:70px; height:70px; position:absolute; left:50%; bottom:0%; transform:translate(-50%, 0%); background:#222 url('../images/contents/ico_zoom02.png') 50% 50% no-repeat; border-radius:100%; opacity:0; transition: all 0.3s ease-in-out;background-size:cover;}
.newProduct-link:hover .zoom {opacity:1;bottom:0; transform:translate(-50%, 50%);}
@media only screen and (max-width:1024px){
.newProduct-item {width:31%; margin:5.7% 0 0 3.5%;}
.newProduct-item:nth-of-type(3n+1) {margin-left:0%;}
.newProduct-link .series {font-size:15px;}
.newProduct-link .cate span em { font-size:15px;}
.newProduct-link .desc {padding:10% 10% 18% 10%;}
.newProduct-link .title {font-size:20px; height:56px;}
.newProduct-link .text {font-size:16px; margin-top:10px; height:60px;}
.newProduct-link .zoom {width:60px; height:60px;}
}
@media only screen and (max-width:960px){
.newProduct-item {width:48%; margin:5.7% 0 0 4%;}
.newProduct-item:nth-of-type(3n+1) {margin-left:4%;}
.newProduct-item:nth-of-type(2n+1) {margin-left:0%;}
.newProduct-link .desc {padding:10% 10% 12% 10%;}
}
@media only screen and (max-width:640px){
.newProduct-link .series {font-size:14px;}
.newProduct-link .cate span em { font-size:14px;}
.newProduct-link .title {font-size:20px; height:30px; margin-top:3px;}
.newProduct-link .text {font-size:15px; margin-top:10px; line-height:1.5; height:50px;}
.newProduct-link .zoom {width:50px; height:50px;}
}
@media only screen and (max-width:480px){
.newProduct-item {width:100%; margin:10% 0 0 0%;}
.newProduct-item:nth-of-type(3n+1) {margin-left:0%;}
.newProduct-item:nth-of-type(2n+1) {margin-left:0%;}
}
/*ì œí’ˆ ìƒë‹¨*/
.newProduct__info {padding:0 0 5.2% 0; font-size:0;}
.newProduct__info-box {display:inline-block; vertical-align:middle; width:50%;}
.newProduct__info-box.nth-1 {text-align:center;}
.newProduct__info-box .thumb {padding:0 4.28% 0 0;}
.newProduct__info-desc .series{font-size:25px; font-family: 'Montserrat', sans-serif; font-weight:700; color:#222;}
.newProduct__info-desc .title{font-size:50px; font-weight:700; color:#222; line-height:1.3; margin-top:5px;}
.newProduct__info-desc .text {font-size:18px; font-weight:300; color:#222; line-height:1.5; margin-top:15px; position:relative;}
.newProduct__info-desc .text:before {content:'Use'; display:block; width: 70px; text-align:center; font-size:16px; font-weight:500; color:#222; border:2px solid #222; border-radius:30px; line-height:26px; margin-bottom:15px;}
@media only screen and (max-width:1024px){
.newProduct__info-box .thumb {padding:0 8% 0 0;}
.newProduct__info-desc .series{font-size:18px;}
.newProduct__info-desc .title{font-size:40px;}
.newProduct__info-desc .text {font-size:16px;}
.newProduct__info-desc .text:before {font-size:14px; line-height:22px; width:60px;}
}
@media only screen and (max-width:768px){
.newProduct__info {padding:0 0 10% 0;}
.newProduct__info-box {display:block; width:100%;}
.newProduct__info-box.nth-2 {margin-top:10%;}
.newProduct__info-box .thumb {padding:0 0 0 0;}
.newProduct__info-desc .series{font-size:18px; text-align:center;}
.newProduct__info-desc .title{font-size:40px; text-align:center;}
.newProduct__info-desc .text {font-size:16px;}
}
/*ì œí’ˆìƒì„¸- 시공사례*/
.newProduct__case {margin-top:5.2%;}
.newProduct__case-wrap {margin-top:3.6%;}
.newProduct__case-list {font-size:0; overflow:hidden;}
.newProduct__case-item {display:inline-block; vertical-align:top; width:420px; position:relative; cursor: pointer;}
.newProduct__case-link {display:block; padding:0 7%; background-color:transparent; transition:all 0.3s ease-in-out; position:relative;}
.newProduct__case-link .thumb {position:relative; overflow: hidden; transition:all 0.3s ease-in-out;}
.newProduct__case-link .thumb .image {display:block; background-position:50% 50%; background-size:cover; background-repeat: no-repeat; transition:all 0.3s ease-in-out;transform:scale(1);}
.newProduct__case-link .desc {text-align:center; margin:30px 0 0 0; color:#222; position: relative; transition:all 0.3s ease-in-out;}
.newProduct__case-link .text {font-size:18px; line-height:1.3; transition:all 0.3s ease-in-out; display:block; max-height:46px;}
.newProduct__case-link .zoom {display:block; width:70px; height:70px; position:absolute; left:50%; top:50%; background:#222 url('../images/contents/ico_zoom02.png') 50% 50% no-repeat; border-radius:100%; opacity:0; transition: all 0.3s ease-in-out;margin:-35px 0 0 -35px; }
.newProduct__case-link:hover .thumb .image {transform:scale(1.2);}
.newProduct__case-link:hover .zoom {opacity:1; animation: heartBeat 3s infinite; }
.newProduct__case-control {padding-top:4.28%;}
.newProduct__case-arrow {position: relative; max-width:calc(100%); margin:0 auto; z-index:2000;}
.newProduct__case-arrow:before {content:''; display:block; width:calc(100% - 144px); height:2px; position:absolute; top:-1px; left:50%; background-color:#222; transform:translateX(-50%);}
.newProduct__case-prev,
.newProduct__case-next {position:absolute; top:0; width:60px; height:28px; margin-top:-14px; text-indent:-99999px; overflow:hidden; background-repeat: no-repeat; background-size:contain; transition:all 0.3s ease-in-out;}
.newProduct__case-prev {background-image:url('../images/contents/arrow_prev.png'); left:0px; background-position:0% 50%;}
.newProduct__case-next {background-image:url('../images/contents/arrow_next.png'); right:0px;background-position:100% 50%;}
.newProduct__case-prev:hover {left:-10px;}
.newProduct__case-next:hover {right:-10px;}
@media only screen and (max-width:1024px){
.newProduct__case {margin-top:8%;}
.newProduct__case-wrap {margin-top:5%;}
.newProduct__case-control {padding-top:6%;}
}
@media only screen and (max-width:480px){
.newProduct__case-control {padding-top:10%;}
.newProduct__case-item {width:320px;}
}
/*ë‹¤ë¥¸ì œí’ˆ 보기*/
.allProduct-open {position:absolute; top:50%; right:0; margin-top:-30px;}
.allProduct-open a {display:block; line-height:40px; border-bottom:2px solid #222; padding:0 50px 0 0; position:relative;}
.allProduct-open a::after {content:''; display:block; width:32px; height:32px; position:absolute; top:0; right:0; background:url('../images/contents/ico_zoom03.png') 100% 0 no-repeat; background-size:cover;}
.allProduct-open a span {display:inline-block; line-height:1.3; font-size:16px; color:#222;}
.allProduct-open a:hover::after {animation: heartBeat 3s infinite;}
@media only screen and (max-width:1690px){
.allProduct-open {right:50px;}
}
@media only screen and (max-width:1600px){
.allProduct-open {right:120px;}
.contents__title.newProduct h3 {text-align:left;}
}
@media only screen and (max-width:1024px){
.contents__title.newProduct h3 {text-align:center;}
.allProduct-open {position:static; margin: 0 auto; max-width:480px; padding:10px 0 0;}
}
/*ì „ì²´ ì œí’ˆ íŒì—…*/
.allProduct { z-index:10004; position:relative; display:none; }
.allProduct-close {display:block; position: fixed; right: 0; top: 0px; width: 60px; height: 60px; z-index:1002; padding:0; font-size:0; background-color:#000; transition: all 0.3s ease-in-out;overflow:hidden; text-indent:-8888888px;}
.allProduct-close span:before,
.allProduct-close span:after {content:''; display:block; width:20px; height:1px; background-color:#fff; position:absolute; top:50%; left:50%;transition: all 0.3s ease-in-out;transform:translate(-50%, -50%)}
.allProduct-close:hover span:before,
.allProduct-close:focus span:before {transform:translateX(-50%) rotate(-45deg); background-color:#fff;}
.allProduct-close:hover span:after,
.allProduct-close:focus span:after {transform:translateX(-50%) rotate(45deg); background-color:#fff;}
.allProduct-close:hover,
.allProduct-close:focus {background-color:#16a4dc;}
.allProduct-wrap {position: fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-width:1400px; min-width:280px; max-height:90%; max-height:90vh; z-index: 1001; background: rgba(255, 255, 255, 1); text-align: left;}
.allProduct-box {position: relative;}
.allProduct-inner {display:block; height:100%; max-height:90vh; overflow-y:auto;}
.allProduct-nav {font-size:0; letter-spacing:-0.05em; position:relative; width:100%; padding:60px; text-align: left;}
.allProduct-1dep {display:inline-block; vertical-align:top; width:25%; padding:25px; transition: all 0.3s ease-in-out;}
.allProduct-1dep:first-child {width:28%;}
.allProduct-1dep:last-child {width:22%;}
.allProduct-1dep > a {display:block; font-size:30px; font-weight:700; text-align:left; line-height:1.3; color:#16a4dc; text-transform: uppercase; padding:0 0 30px 0; transition: all 0.3s ease-in-out; word-break: break-all;}
.allProduct-1dep > a:hover,
.allProduct-1dep > a:focus {color:#222;}
.allProduct-1dep > a > span{display:block;}
.allProduct-2dep {border-left:3px solid #16a4dc;}
.allProduct-2dep > li > a {display:block; padding:7px 0 5px 20px; color:#666; font-size:18px; font-weight:400; line-height:1.3; transition: all 0.3s ease-in-out; }
.allProduct-2dep > li:first-child > a {padding-top:0;}
.allProduct-2dep > li:last-child > a {padding-bottom:0;}
.allProduct-2dep > li > a:hover,
.allProduct-2dep > li > a:focus {padding-left:30px; color:#222; font-weight:500;}
.allProduct-3dep > li > a {display:block; padding:8px 0 5px 30px; color:#666; position:relative; font-weight:300; font-size:16px; line-height:1.3; transition: all 0.3s ease-in-out;}
.allProduct-3dep > li > a:before {content:''; display:block; width:4px; height:4px; background:#16a4dc; position:absolute; border-radius: 4px; left:20px; top:16px;transition: all 0.3s ease-in-out;}
.allProduct-3dep > li:last-child > a {padding-bottom:0;}
.allProduct-3dep > li > a:hover,
.allProduct-3dep > li > a:focus {color:#222; padding-left:40px;}
.allProduct-3dep > li > a:hover:before,
.allProduct-3dep > li > a:focus:before {left:30px;}
@media only screen and (max-width: 1440px) {
.allProduct-close {width: 50px; height: 50px;}
.allProduct-close span:before,
.allProduct-close span:after {width:16px; }
.allProduct-nav {padding:50px;}
.allProduct-1dep {padding:20px;}
.allProduct-1dep > a {font-size:28px; padding:0 0 30px 0;}
.allProduct-2dep > li > a {padding:7px 0 5px 20px; font-size:17px;}
.allProduct-2dep > li > a:hover,
.allProduct-2dep > li > a:focus {padding-left:30px;}
.allProduct-3dep > li > a {padding:8px 0 3px 30px; font-size:15px;}
.allProduct-3dep > li > a:before {width:4px; height:4px; border-radius: 4px; left:20px; top:16px;}
.allProduct-3dep > li > a:hover,
.allProduct-3dep > li > a:focus {padding-left:40px;}
.allProduct-3dep > li > a:hover:before,
.allProduct-3dep > li > a:focus:before {left:30px;}
}
@media only screen and (max-width: 1280px) {
.allProduct-close {width: 40px; height: 40px;}
.allProduct-close span:before,
.allProduct-close span:after {width:12px; }
.allProduct-nav {padding:40px;}
}
@media only screen and (max-width: 1024px) {
.allProduct-1dep {padding:15px 20px;}
.allProduct-1dep > a {font-size:24px; padding:0 0 20px 0;}
.allProduct-2dep > li > a {padding:6px 0 4px 15px; font-size:16px;}
.allProduct-2dep > li > a:hover,
.allProduct-2dep > li > a:focus {padding-left:25px;}
.allProduct-3dep > li > a {padding:6px 0 3px 25px; font-size:14px;}
.allProduct-3dep > li > a:before {width:3px; height:3px; border-radius: 3px; left:15px; top:13px;}
.allProduct-3dep > li > a:hover,
.allProduct-3dep > li > a:focus {padding-left:35px;}
.allProduct-3dep > li > a:hover:before,
.allProduct-3dep > li > a:focus:before {left:25px;}
}
@media only screen and (max-width: 960px) {
.allProduct-1dep {width:50%; }
.allProduct-1dep:first-child {width:50%;}
.allProduct-1dep:last-child {width:50%;}
}
@media only screen and (max-width: 640px) {
.allProduct-1dep {width:100%;padding:40px 0 0px 0;}
.allProduct-1dep:first-child {width:100%; padding:0;}
.allProduct-1dep:last-child {width:100%;}
}
.allProduct-dimmed {position:fixed; top:0px; left:0; z-index:999; width:100%; height:100%; background-color:rgba(0, 0, 0, .5);}
/*★★★★★ ì œí’ˆ ê´€ë ¨ 부분 : E★★★★★*/
/*â˜…â˜…â˜…ì œí’ˆ 콘í…ì¸ ì˜ì—!!!! : S ★★★*/
.newProduct__bg {padding:6.25% 0;}
.newProduct__bg.type1 {background-color:#f1f6f8;}
.newProduct__bg.type2 {background-color:#323433;}
.newProduct__bg.type3 {background-color:#3899d5;}
@media only screen and (max-width: 1024px) {
.newProduct__bg {padding:8% 0;}
}
@media only screen and (max-width: 768px) {
.newProduct__bg {padding:10% 0;}
}
@media only screen and (max-width: 480px) {
.newProduct__bg {padding:12% 0;}
}
/*타ì´í‹€*/
.conTitle-wrap:after {content:''; display:block; clear: both;}
.conTitle-h3 {position:relative; padding:0 0 0 25px; text-align:left;}
.conTitle-h3:before {content:''; display:block; width:14px; height:14px; position:absolute; left:0; top:11px; background:url('../images/contents/title_dot01.png') 0 0 no-repeat; background-size: cover;}
.conTitle-h3 span {display:inline-block; line-height:1.3; font-size:30px; font-weight:700; color:#222;}
.conTitle-h4 {margin-top:40px; text-align:left;}
.conTitle-h4 span {display:inline-block; line-height:1.3; font-size:20px; font-weight:700; color:#222;}
/*콘í…ì¸ */
.conBox-type1 {padding:0 0 0 25px;}
.conBox-type1 > p {font-size:18px; line-height:1.6; margin-top:10px;}
.conBox-type2 { background-color:#fff; box-shadow: 0px 5px 38px 0px rgba(126, 153, 164, 0.46); padding:5%;}
.imgBox {text-align:center;}
.imgBox.border1 {border-bottom:2px solid #222;}
.imgText {font-size: 16px; text-align: center; margin-top: 10px;}
.img_caption {font-size:18px; color:#222; text-align:center;font-family: 'Montserrat', sans-serif; font-weight:500;}
.stext {font-size:16px !important; margin-top:10px;}
@media only screen and (max-width: 768px) {
.conTitle-h3 {padding:0 0 0 20px;}
.conTitle-h3:before{top:8px;}
.conTitle-h3 span {font-size:24px;}
.conTitle-h4 {margin-top:30px;}
.conTitle-h4 span {font-size:18px;}
.conBox-type1 {padding:0 0 0 20px;}
.conBox-type1 > p {font-size:16px; margin-top:8px;}
.conBox-type2 {box-shadow: 0px 5px 25px 0px rgba(126, 153, 164, 0.5); padding:6%;}
.img_caption {font-size:16px;}
.stext {font-size:14px !important;}
}
/*박스*/
.conBox-cols2 {font-size:0;}
.conBox-cols2 .cols-2 {width:47.5%; display:inline-block;}
.conBox-cols2 .cols-2.nth-2 {margin:0 0 0 5%;}
.conBox-cols2.type2 .cols-2 {width:65%; display:inline-block;}
.conBox-cols2.type2 .cols-2.nth-2 {width:30% ;margin:0 0 0 5%;}
@media only screen and (max-width: 768px) {
.conBox-cols2 .cols-2 {width:100%;}
.conBox-cols2 .cols-2.nth-2 {margin:8% 0 0 0;}
.conBox-cols2.type2 .cols-2 {width:100%;}
.conBox-cols2.type2 .cols-2.nth-2 {width:100% ;margin:8% 0 0 0;}
}
@media only screen and (max-width: 768px) {
.conBox-cols2 .cols-2.nth-2,
.conBox-cols2.type2 .cols-2.nth-2 {margin:10% 0 0 0;}
}
.conBox-cols3 {font-size:0;}
.conBox-cols3 .cols-3 {width:31%; display:inline-block;}
.conBox-cols3 .cols-3.nth-2,
.conBox-cols3 .cols-3.nth-3 {margin:0 0 0 3.5%;}
@media only screen and (max-width: 1024px) {
.conBox-cols3 .cols-3 {width:100%;}
.conBox-cols3 .cols-3.nth-2,
.conBox-cols3 .cols-3.nth-3 {margin:8% 0 0 0;}
}
@media only screen and (max-width: 768px) {
.conBox-cols3 .cols-3.nth-2,
.conBox-cols3 .cols-3.nth-3 {margin:10% 0 0 0;}
}
.conBox-line {position:relative; margin:8.5% 0;}
.conBox-line span{display:block; width:calc(100% - 30px); height:3px; background-color:#222; margin:0 auto; border-radius: 3px;}
.conBox-line span:before,
.conBox-line span:after {content:''; display:block; width:4px; height:4px; border-radius: 5px; border:3px solid #222; position:absolute; top:-4px;}
.conBox-line span:before {left:0px;}
.conBox-line span:after {right:0px;}
@media only screen and (max-width: 1024px) {
.conBox-line {margin:10% 0;}
}
@media only screen and (max-width: 768px) {
.conBox-line {margin:12% 0;}
}
@media only screen and (max-width: 480px) {
.conBox-line {margin:14% 0;}
}
/*리스트*/
.list-type1 .item {position:relative; padding:0 0 0 10px; font-size:18px; color:#666; margin-top:10px; line-height:1.5;}
.list-type1 .item strong{ display: inline-block; vertical-align: baseline; font-weight:600; color:#222;}
.list-type1 .item:first-child {margin-top:0;}
.list-type1 .item:before {content:''; display: block; width:4px; height:1px; background-color:#666; position:absolute; left:0; top:11px;}
.list-type2 .item {position:relative; padding:10px 15px 10px 50px; font-size:18px; color:#222; margin-top:10px; line-height:1.3; background-color:#fff; border-radius:15px;}
.list-type2 .item:first-child {margin-top:0;}
.list-type2 .item:before {content:''; display: block; width:30px; height:26px; background:url('../images/contents/ico_check01.png') 50% 50%; position:absolute; left:10px; top:8px; background-size:contain;}
.list-type3 .item {position:relative; padding:0 0 0 10px; font-size:18px; color:#666; margin-top:10px; line-height:1.5;}
.list-type3 .item:first-child {margin-top:0;}
.list-type3 .item:before {content:''; display: block; width:4px; height:4px; background-color:#000; position:absolute; left:0; top:10px; border-radius: 4px;}
@media only screen and (max-width: 1024px) {
.list-type1 .item {font-size:16px;margin-top:8px;}
.list-type1 .item:before {top:10px;}
.list-type2 .item {padding:10px 15px 10px 42px; font-size:16px; border-radius:10px;}
.list-type2 .item:before {width:23px; height:20px; left:10px; top:10px;}
.list-type3 .item {font-size:16px;margin-top:8px;}
.list-type3 .item:before {top:10px;}
}
.listBox-type1 {position:relative;}
.listBox-type1:after {display:block; content:''; clear: both;}
.listBox-type1 .box01 {width:42%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.listBox-type1 .box01 p {box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.5); border-radius: 20px; overflow: hidden; border:10px solid #242424; background-color:#242424;}
.listBox-type1 .box02 {width:26%; float:left;}
.listBox-type1 .box03 {width:26%; float:right;}
@media only screen and (max-width: 960px) {
.listBox-type1 .box01 {width:100%; position:static;transform:translate(0%, 0%); text-align:center; }
.listBox-type1 .box01 p {box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.5); border-radius: 15px; border:8px solid #242424; display:inline-block;}
.listBox-type1 .box02 {width:48%; float:left; margin:6% 0 0 0;}
.listBox-type1 .box03 {width:48%; float:right; margin:6% 0 0 0;}
}
@media only screen and (max-width: 640px) {
.listBox-type1 .box01 p {border-radius: 10px; }
.listBox-type1 .box02 {width:100%; float:none; margin:8% 0 0 0;}
.listBox-type1 .box03 {width:100%; float:none; margin:10px 0 0 0;}
}
.beforebg {position:relative; padding-bottom:15%; z-index:1;}
.beforebg:before { content:''; display:block; max-width:1400px; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; min-height:136px; background:url('../images/contents/product_view_bg01.png') 50% 100% no-repeat; background-size:contain; z-index:-1; }
.afterbg {position:relative; padding-top:10%; z-index:1;}
.afterbg:after { content:''; display:block; max-width:1400px; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; min-height:324px; background:url('../images/contents/product_view_bg02.png') 50% 0% no-repeat; background-size:contain; z-index:-1; }
.thumb__list-image {position:absolute; top:0; left:50%; transform:translate(-50%, -50%); width:38%; text-align:center;}
.thumb__list {font-size:0;}
.thumb__list.type1 {font-size:0; text-align:center;}
.thumb__list-item {display:inline-block; width:32%; vertical-align: top; background:#fff; padding:10px 10px 15px; margin:4% 0 0 2%;}
.thumb__list.type2 .thumb__list-item {width:18.4%; padding:0 0 15px 0;}
.thumb__list.type3 .thumb__list-item {width:23.5%; padding:0 0 15px 0;}
.thumb__list-item:nth-child(3n+1) {margin:4% 0 0 0%;}
.thumb__list.type2 .thumb__list-item:nth-child(3n+1) {margin:4% 0 0 2%;}
.thumb__list.type2 .thumb__list-item:nth-child(5n+1) {margin:4% 0 0 0%;}
.thumb__list.type3 .thumb__list-item:nth-child(3n+1) {margin:4% 0 0 2%;}
.thumb__list.type3 .thumb__list-item:nth-child(4n+1) {margin:4% 0 0 0%;}
.thumb__list-item .thumb {position:relative; text-align:center;}
.thumb__list-item .thumb img {width:100%;}
.thumb__list-item .balloon {position:absolute; top:0;left:50%; width:56%; transform:translate(-50%, -40%);}
.thumb__list-item .text {margin:20px 0 0 0; text-align:center;}
.thumb__list.type2 .thumb__list-item .text,
.thumb__list.type3 .thumb__list-item .text {padding:0 10px;}
.thumb__list-item .text span{display: inline-block; line-height:1.3; font-size:18px; color:#666;}
@media only screen and (max-width: 960px) {
.thumb__list-item .text span{font-size:16px;}
}
@media only screen and (max-width: 768px) {
.thumb__list-image {transform:translate(-50%, -40%); width:42%;}
.thumb__list-item {width:48%; padding:10px 10px 15px;margin:6% 0 0 4%;}
.thumb__list.type2 .thumb__list-item,
.thumb__list.type3 .thumb__list-item {width:30.6%;}
.thumb__list-item:nth-child(3n+1) {margin:6% 0 0 4%;}
.thumb__list-item:nth-child(2n+1) {margin:6% 0 0 0%;}
.thumb__list.type2 .thumb__list-item:nth-child(2n+1) {margin:6% 0 0 4%;}
.thumb__list.type2 .thumb__list-item:nth-child(5n+1) {margin:6% 0 0 4%;}
.thumb__list.type2 .thumb__list-item:nth-child(3n+1) {margin:6% 0 0 0%;}
.thumb__list.type3 .thumb__list-item:nth-child(2n+1) {margin:6% 0 0 4%;}
.thumb__list.type3 .thumb__list-item:nth-child(4n+1) {margin:6% 0 0 4%;}
.thumb__list.type3 .thumb__list-item:nth-child(3n+1) {margin:6% 0 0 0%;}
}
@media only screen and (max-width: 480px) {
.thumb__list-image {transform:translate(-50%, -35%); width:48%;}
.thumb__list-item {width:100%; padding:10px 10px 15px;margin:6% 0 0 0%;}
.thumb__list.type2 .thumb__list-item,
.thumb__list.type3 .thumb__list-item {width:100%;}
.thumb__list-item:nth-child(3n+1) {margin:6% 0 0 0%;}
.thumb__list.type2 .thumb__list-item:nth-child(2n+1) {margin:6% 0 0 0%;}
.thumb__list.type2 .thumb__list-item:nth-child(5n+1) {margin:6% 0 0 0%;}
.thumb__list.type3 .thumb__list-item:nth-child(2n+1) {margin:6% 0 0 0%;}
.thumb__list.type3 .thumb__list-item:nth-child(4n+1) {margin:6% 0 0 0%;}
}
/*í…Œì´ë¸” 스타ì¼*/
.table-type1 {border-top:1px solid #000;}
.table-type1 table{table-layout: fixed; width:100%;}
.table-type1 thead th,
.table-type1 tbody th,
.table-type1 tbody td{border-bottom:1px solid #dfdfdf; padding:15px 25px; font-size:18px; line-height:1.5; vertical-align:top; word-break:break-all;font-family: 'Montserrat', sans-serif;}
.table-type1 thead th,
.table-type1 tbody th {background:#efefef; color:#222; font-weight:700; text-align:left;vertical-align:middle;}
.table-type1 thead th {background:#f9f9f9; text-align:center;}
.table-type1 tbody td {color:#222; background-color:#fff; font-weight:300; }
.table-type1.border thead th,
.table-type1.border tbody td{border-right:1px solid #dfdfdf; text-align:center;}
.table-type1.border thead th:first-child {border-right:0; text-align:left; background-color:#efefef;}
.table-type1.border thead th:last-child,
.table-type1.border tbody td:last-child {border-right:0;}
@media only screen and (max-width: 1024px) {
.table-type1 tbody th,
.table-type1 tbody td{padding:15px 25px; font-size:16px;}
}
@media only screen and (max-width: 768px) {
.tablescroll {position:relative;}
.tablescroll:before {content:''; display:block; width:30px; height:30px; background: url('../images/contents/ico_mousescroll.gif') no-repeat right 0; position:absolute; top:-30px; right:0; }
.tablescroll > .tablescroll-wrap {min-width:100%; overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
.tablescroll .table-type1 { width: 800px;}
.table-type1 thead th,
.table-type1 thead td,
.table-type1 tbody th,
.table-type1 tbody td {font-size:14px; padding:10px 12px;}
}
.product-alert {font-size:16px; margin-top:10px; padding:5px 0 5px 30px; color:#222; background:url('../images/contents/ico_alert.png') 0 0 no-repeat; line-height:1.3;}
.product-alert strong{ display: inline-block; vertical-align: baseline; font-weight:600; color:#222;}
.product-alert span{display:block;}
.product-alert span + span{ margin:5px 0 0 0;}
/*â˜…â˜…â˜…ì œí’ˆ 콘í…ì¸ ì˜ì—!!!! : E ★★★*/
/*0101 스마트 집진 시스템*/
.pro__smart-wrap {font-size:0;}
.pro__smart-box {display:inline-block; vertical-align:top;}
.pro__smart-box.nth-1 {width:50%; padding:0 7% 0 0;}
.pro__smart-box.nth-2 {width:50%;}
.pro__smart-feature {position:relative; padding:0 0 15% 0;}
.pro__smart-feature .image2 {position:absolute; top:0px; left:0; transform:translateX(-55%); z-index:3;}
.pro__smart-item {position:absolute; width:27.5%; border-radius: 50%; text-align:center; overflow:hidden; bottom:0; animation: is-circle1 5s infinite;}
.pro__smart-item:nth-child(1) {background-color:rgba(40, 177, 230, 0.9); right:69%; z-index:2; color:#fff;}
.pro__smart-item:nth-child(2) {background-color:rgba(255, 255, 255, 0.8);right:46%; color:#28b0e5; animation-delay: 1s;}
.pro__smart-item:nth-child(3) {background-color:rgba(40, 177, 230, 0.9); right:23%; z-index:2; color:#fff; animation-delay: 2s;}
.pro__smart-item:nth-child(4) {background-color:rgba(255, 255, 255, 0.8); right:0%; color:#28b0e5; animation-delay: 3s;}
.pro__smart-item p {display:inline-block; padding:0 10%; font-weight:600;}
.pro__smart-item p span{display:inline-block; line-height:1.3; font-size:20px;}
@keyframes is-circle1 {
0% {transform:scale(1);}
50% {transform:scale(1.1);}
100% {transform:scale(1);}
}
@media only screen and (max-width: 1280px) {
.pro__smart-item p span{ font-size:18px;}
}
@media only screen and (max-width: 1024px) {
.pro__smart-box.nth-1 {width:100%; padding:0 0 0 0;}
.pro__smart-box.nth-2 {width:100%; margin-top:8%;}
.pro__smart-feature {padding:0 0 0% 0; text-align:center;}
.pro__smart-feature .image2 { left:0; transform:translateX(-25%); width:35%;}
.pro__smart-list {position:relative; width:78%; margin:0 0 0 15%;}
}
@media only screen and (max-width: 768px) {
.pro__smart-box.nth-2 {margin-top:10%;}
.pro__smart-feature {padding:0 0 0% 0; text-align:center;}
.pro__smart-feature .image2 { left:0; transform:translateX(-25%); width:35%;}
.pro__smart-list {width:auto; margin:0 0 0 10%;}
.pro__smart-item p span{ font-size:16px; font-weight:500;}
}
@media only screen and (max-width: 640px) {
.pro__smart-list {width:auto; margin:0 0 0 0;}
.pro__smart-item {width:50%; position:static; display:inline-block; }
.pro__smart-item:nth-child(1),
.pro__smart-item:nth-child(4) {background-color:rgba(40, 177, 230, 0.8); color:#fff;}
.pro__smart-item:nth-child(2),
.pro__smart-item:nth-child(3) {background-color:rgba(142, 197, 75, 0.8); color:#fff;}
}
@media only screen and (max-width: 640px) {
.pro__smart-item p span{ font-size:14px;}
}
/* HDC9 */
.hdc9-wrap {font-size:0;}
.hdc9-box {display:inline-block; vertical-align: middle;}
.hdc9-box.nth-1 {width:55%;}
.hdc9-box.nth-2 {width:40%; margin:0 0 0 5%;}
.hdc9-table {border-radius: 15px; overflow:hidden; border:2px solid #3899d5;}
.hdc9-table table{table-layout: fixed; width:100%;}
.hdc9-table tbody th,
.hdc9-table tbody td{border-bottom:1px solid #e2e8eb; padding:10px 20px; font-size:18px; line-height:1.5; vertical-align:top; word-break:break-all;}
.hdc9-table tbody th {background:#3899d5; color:#fff; font-weight:700; text-align:center;vertical-align:middle;}
.hdc9-table tbody td {color:#222; background-color:#fff;}
.hdc9-table tbody tr:last-child th,
.hdc9-table tbody tr:last-child td {border-bottom:0;}
@media only screen and (max-width: 1024px) {
.hdc9-box.nth-1 {width:50%;}
.hdc9-box.nth-2 {width:45%; margin:0 0 0 5%;}
.hdc9-table tbody th,
.hdc9-table tbody td{ padding:10px 15px; font-size:16px;}
}
@media only screen and (max-width: 960px) {
.hdc9-box.nth-1 {width:100%;}
.hdc9-box.nth-2 {width:100%; margin:5% 0 0 0;}
}
@media only screen and (max-width: 480px) {
.hdc9-table tbody th,
.hdc9-table tbody td{ padding:8px 12px; font-size:15px;}
}
.carbon-wrap {font-size:0;}
.carbon-wrap .carbon-thumb { overflow:hidden;display:inline-block; width:35%; text-align:center; margin:0 4% 0 0;}
.carbon-wrap .carbon-thumb img {border-radius: 50%;}
.carbon-wrap .carbon-text {display: inline-block; width: calc(100% - 39%);}
.carbon-wrap.type2 .carbon-thumb { width:150px; text-align:left;}
.carbon-wrap.type2 .carbon-text {width: calc(100% - 150px - 4%);}
@media only screen and (max-width: 1024px) {
.carbon-wrap.type2 .carbon-thumb,
.carbon-wrap .carbon-thumb {width:20%; margin:0 5% 0 0;}
.carbon-wrap .carbon-thumb img {border-radius: 50%; width:100%;}
.carbon-wrap.type2 .carbon-text,
.carbon-wrap .carbon-text { width: calc(100% - 25%);}
}
@media only screen and (max-width: 768px) {
.carbon-wrap.type2 .carbon-thumb,
.carbon-wrap .carbon-thumb {width:30%; margin:0 5% 0 0;}
.carbon-wrap.type2 .carbon-text,
.carbon-wrap .carbon-text { width: calc(100% - 35%);}
}
/*ARM HOOD*/
.arm__figure {font-size:0;}
.arm__figure-box {display:inline-block; vertical-align: top; width:calc(50% - 10px);}
.arm__figure-box.nth-2 {margin-left:20px;}
.arm__figure-item {position:relative; text-align:center; background-color:#fff;}
.arm__figure-item + .arm__figure-item {margin-top:2.9%;}
.arm__figure-item span{display: block;}
.arm__figure-item .num{position: absolute; top:0; right:0; background-color: #3899d5; color:#fff; width:50px; height:50px; line-height: 50px; text-align:center;font-family: 'Montserrat', sans-serif; font-weight:700;}
.arm__figure-item .num em {display:inline-block; font-size:20px;}
@media only screen and (max-width: 1024px){
.arm__figure-item .num {width:40px; line-height:40px; height:40px;}
.arm__figure-item .num em {font-size:16px;}
.arm__figure-box {width:100%;}
.arm__figure-box.nth-2 {margin-left:0px;margin-top:6%;}
.arm__figure-item + .arm__figure-item {margin-top:6%;}
}
/* 환경컨설팅 */
.consulting__tab {margin-top: 65px; border-bottom: 2px solid #8ec54a;}
.consulting__tab-list {font-size: 0;}
.consulting__tab-item {display: inline-block; width: 23.5%;}
.consulting__tab-item+.consulting__tab-item {margin-left: 2%;}
.consulting__tab-item a {display: block; text-align: center; padding: 10px; border-radius: 30px; background: #b5b6b6; margin-bottom: 25px;}
.consulting__tab-item a span {font-size: 18px; color: #fff; position: relative;}
.consulting__tab-item.is-active {font-weight: 700;}
.consulting__tab-item.is-active span:after,
.consulting__tab-item:hover span:after {display: block; content: ""; width: 15px; height: 15px; background: url('../images/common/title_dot.png') right top no-repeat; background-size: contain; position: absolute; top: -30px; right: 0;}
.consulting__tab-item.is-active a,
.consulting__tab-item:hover a {background: #3798d3;}
@media only screen and (max-width: 1024px){
.consulting__tab-item {width: 49%;}
.consulting__tab-item:nth-of-type(3) {margin-left: 0;}
}
@media only screen and (max-width: 640px){
.consulting__tab-item {width: 100%;}
.consulting__tab-item+.consulting__tab-item {margin-left: 0;}
}
.consulting-wrap {margin-top: 90px;}
.consulting-item+.consulting-item,
.consulting-item+.consulting_title {margin-top: 90px;}
.consulting_title {margin: 0 0 40px; color: #222; line-height: 1.4;}
.consulting_title h2 {font-size: 30px; font-weight: 700;}
.consulting_title p {font-size: 18px; font-weight: 400; margin-top: 20px;}
.consulting-item .type2 {font-size: 0;}
.consulting-item .text {font-size: 18px; font-weight: 400; line-height: 1.4;}
.consulting-item .img {text-align: center; margin-top: 20px;}
.consulting-item .type2 .text {display: inline-block; width: 48%; margin-top: 0; margin-left: 2%;}
.consulting-item .type2 .img {display: inline-block; width: 50%; margin-top: 0;}
.consulting-item .text h2 {padding-left: 10px; color: #222; position: relative; margin-top: 25px;}
.consulting-item .text h2::after {content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #222; position: absolute; top: 10px; left: 0;}
.consulting-item .text p {color: #666; margin: 5px 0 0; padding-left: 10px; position: relative;}
.consulting-item .text p:after {display: block; content: ""; width: 5px; height: 1px; background: #666; position: absolute; top: 12px; left: 0;}
.consulting_sub-title {margin-bottom: 20px; line-height: 1.4;}
.consulting_sub-title h2 {font-size: 24px; font-weight: 700; color: #222; padding-left: 20px; position: relative;}
.consulting_sub-title h2:after {display: block; content: ""; width: 14px; height: 14px; background: url('../images/common/title_dot.png') right top no-repeat; background-size: contain; position: absolute; top: 5px; left: 0;}
.consulting_sub-title p {font-size: 18px; font-weight: 400; margin-top: 15px; padding-left: 20px; position: relative;}
.consulting_sub-title p:after {display: block; content: ""; width: 5px; height: 1px; background: #444; position: absolute; top: 8px; left: 10px;}
.consulting_sub-title > em {display: block; font-size: 18px; padding-left: 20px; margin-top: 15px;}
.consulting_sub-title em {font-weight: 700; color: #222;}
.consulting-item .table {margin-top: 60px;}
.consulting-item .table table {border-top: 1px solid #b5b6b6; border-bottom: 2px solid #b5b6b6;}
.consulting-item .table table thead th {background: #dbdbdb; padding: 15px 0; font-size: 18px; font-weight: 500; color: #222;}
.consulting-item .table table tbody td.type1,
.consulting-item .table table thead th+th {border-left: 1px solid #e5e5e5;}
.consulting-item .table table tbody tr+tr {border-top: 1px solid #e5e5e5;}
.consulting-item .table table tbody th {background: #eee; font-size: 18px; font-weight: 400; color: #222; padding: 0 20px;}
.consulting-item .table table tbody td {padding: 25px 50px; line-height: 1.4; font-size: 16px; font-weight: 400; color: #444;}
.consulting-item .table table tbody td+td {border-left: 1px solid #e5e5e5;}
.consulting-item .table table tbody td.center {text-align: center;}
.consulting-item .table table tbody td span {display: block; padding-left: 10px; color: #666; position: relative;}
.consulting-item .table table tbody td span:after {display: block; content: ""; width: 5px; height: 1px; background: #666; position: absolute; top: 10px; left: 0;}
.consulting-item .table table tbody td em {font-size: 5px; vertical-align: bottom;}
.consulting-item .table table tbody td p {font-weight: 700; color: #222;}
.consulting-item .table table a {display: block; text-align: center;}
.consulting-item .table table a p {display: inline-block; transition: all 0.3s ease-in-out; border-radius: 10px; font-size: 0; padding: 30px; background: #389ad6 url('../images/contents/down-ico.png') center no-repeat; background-size: 60%;}
.consulting-item .table table a:hover p {background-color: #8ec54a;}
.consulting-item .table table tbody th.sec {background: #f8f8f8;}
.consulting-item .table.txt-center table tbody td span:after {display: none;}
.consulting-item .txt-center {text-align: center;}
.consulting-item .table.consulting-area .col1 {width: 20%;}
.consulting-item .table.consulting-area .col2,
.consulting-item .table.consulting-area .col3 {width: 40%;}
.consulting-item .consulting-permission tbody td:last-child {text-align: center;}
.consulting-tab4-item {padding-top: 100px;}
.consulting-tab4-item+.consulting-tab4-item {padding-top: 200px;}
.consulting_wrap {position: relative;}
.consulting__nav {position: fixed; top: 30%; right: 9%; z-index: 10;}
.consulting__nav li a {display: block; text-align: center; padding: 10px; background: #8ec54a; font-size: 16px; color: #fff;}
.consulting__nav li a:hover {background: #389ad6;}
.consulting__nav.on {position: absolute; bottom: -130px; top: auto; font-size: 0; width: 40%;}
.consulting__nav.on li {display: inline-block; width: 50%;}
@media only screen and (max-width: 1240px){
.consulting__nav {top: auto; bottom: 110px; right: 2%;}
}
@media only screen and (max-width: 1024px){
.consulting-item .type2 .text,
.consulting-item .type2 .img {width: 100%;}
.consulting-item .table table tbody td {padding: 25px;}
}
@media only screen and (max-width: 768px){
.consulting_title h2 {font-size: 24px;}
.consulting_title p {font-size: 16px;}
.consulting_sub-title h2 {font-size: 20px;}
.consulting_sub-title p,
.consulting_sub-title > em {font-size: 16px;}
.consulting__nav.on {position: fixed; width: 100%; bottom: auto; top: 60px; right: 0;}
.consulting__nav.on li {width: 33.3333%;}
}
@media only screen and (max-width: 640px){
.consulting-item .table {overflow-x: scroll;}
.consulting-item .table table {min-width: 600px;}
.consulting-item .table table thead th,
.consulting-item .table table tbody th {font-size: 16px;}
.consulting-item .table table tbody td {font-size: 15px; padding: 10px;}
}
@media only screen and (max-width: 480px){
.consulting_title h2 {font-size: 20px;}
.consulting-item .text {font-size: 16px;}
.consulting__nav.on li {width: 50%;}
}
/* ì´ë™ì‹í¡ì§„기 */
.move-h3{text-align: center; font-size: 35px; color: #222; font-weight: 600; margin-bottom: 60px;}
.move-p {color: #222; font-size: 36px; text-align: center; line-height: 1.3; margin-bottom: 50px;}
.move-p span{color: #8ec54a; font-size: 55px; font-weight: 600; display: block;}
.move-icon-wrap{display: flex; flex-direction: row; justify-content: space-around; }
.move-icon-wrap .mo-icon{width: 300px; height: 300px; border-radius: 50%; background: #fff; text-align: center; display: flex;flex-direction: column; align-items: center; justify-content: center; }
.move-icon-wrap .icon-p{color:#3e65a5; font-size:18px; margin-top: 40px;}
.upgrade-wrap{ background: url(../images/contents/move_bg.png) no-repeat 50% 60%; }
.upgrade-row{width: 80%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between;}
.upgrade-row .up{width: 220px; height: 220px; border-radius: 50%; font-size: 18px; text-align: center; display: flex; align-items: center; justify-content: center; padding:30px; line-height: 1.3;}
.upgrade-row .up:nth-child(odd){ background: #3e65a5; color: #fff;}
.upgrade-row .up:nth-child(even){ border:6px solid #3e65a5; color: #222; background: #fff;}
.upgrade-row:first-child{margin-bottom: 360px;}
/* 장소 */
.mo-wrap{width: 45%; display: inline-block; margin: 30px 0; position: relative;}
.mo-wrap .move-h3, .mo-wrap .move-p{text-align: left;}
.mo-wrap.left{margin-right: 4.5%;}
.mo-wrap.right{margin-left:4.5%}
.mo-img{width: 100%; height: 400px;}
.mo-img.s01{background: url(../images/contents/spot_move01.jpg) no-repeat ; background-size: 100%;}
.mo-img.s02{background: url(../images/contents/spot_move02.jpg) no-repeat ; background-size: 100%;}
.mo-img.s03{background: url(../images/contents/spot_move03.jpg) no-repeat ; background-size: 100%;}
.mo-name-tag{width: 120px; height: 60px; background: #3e65a5; color: #fff; font-size: 20px; font-weight: 500; text-align: center; padding: 20px 0; }
.mo-wrap.left .mo-name-tag{position: absolute; top: -30px; right: -60px;}
.mo-wrap.right .mo-name-tag{position: absolute; top: -30px; left: -30px;}
/* ìœ ì˜ì‚¬í• */
.ca-wrap{position: relative;}
.ca-wrap::after{content: ""; width: 577px; height: 505px; background: url(../images/contents/img_mo01.png) no-repeat center; background-size: contain; position: absolute; bottom: -100px; right: -50px; z-index: 20;}
.ca-wrap::before{content: ""; width: 176px; height: 170px; background: url(../images/contents/caution_point01.png) no-repeat center; background-size: contain; position: absolute; top: -50px; left: 80px;}
.caution-wrap{margin: 0 auto; position: relative; padding: 60px 200px 80px 120px; background: #fff; border-radius: 20px; box-shadow: 0px 5px 38px 0px rgb(126 153 164 / 46%); width: 1000px;}
.caution-wrap p{color: #666; font-size: 20px; position: relative; margin: 20px 50px; line-height: 1.2;}
.caution-wrap p::before{content: ""; width: 32px; height: 32px; background: url(../images/contents/icon_point01.png) no-repeat center center; background-size: 100%; position: absolute; top: -6px; left: -50px;}
@media only screen and (max-width: 1240px){
.move-h3{font-size: 30px;margin-bottom: 50px;}
.move-p {font-size: 30px;margin-bottom: 40px;}
.move-p span{font-size: 50px; }
.move-icon-wrap .mo-icon{width: 250px; height: 250px; }
.mo-icon img{width: 60%;}
.upgrade-wrap{background-size: 80%;}
.upgrade-row{width: 100%;}
.upgrade-row .up{width: 180px; height: 180px; font-size: 18px; padding:30px;}
.upgrade-row:first-child{margin-bottom: 320px;}
.mo-wrap{width: 45%; display: inline-block; margin: 30px 0; position: relative;}
.mo-img{width: 100%; height: 320px;}
.mo-name-tag{width: 120px; height: 60px; background: #3e65a5; color: #fff; font-size: 20px; font-weight: 500; text-align: center; padding: 20px 0; }
.mo-wrap.left .mo-name-tag{position: absolute; top: -30px; right: -30px;}
.mo-wrap.right .mo-name-tag{position: absolute; top: -30px; left: -30px;}
.ca-wrap::after{bottom: -80px; right: -120px; height: 100%;}
.ca-wrap::before{left: 0;}
.caution-wrap{ padding: 60px 130px 80px 120px; border-radius: 20px; width: 80%;}
.caution-wrap p{ font-size: 20px; margin: 20px 50px; }
.caution-wrap p::before{width: 28px; height: 28px; top: -6px; left: -50px;}
}
@media only screen and (max-width: 1024px){
.move-h3{font-size: 26px;margin-bottom: 40px;}
.move-h3 img{width: 60%;}
.move-p {font-size: 26px;margin-bottom: 40px;}
.move-p span{font-size: 34px; }
.move-icon-wrap .mo-icon{width: 200px; height: 200px; }
.mo-icon img{width: 60%;}
.move-icon-wrap .icon-p{font-size: 16px;}
.upgrade-wrap{background-size: 80%;}
.upgrade-row{width: 100%;}
.upgrade-row .up{width: 160px; height: 160px; font-size: 18px; padding:10px;}
.upgrade-row:first-child{margin-bottom: 250px;}
.mo-wrap{width: 45%; display: inline-block; margin: 30px 0; position: relative;}
.mo-img{width: 100%; height: 240px;}
.mo-name-tag{width: 80px; height: 40px; background: #3e65a5; color: #fff; font-size: 18px; font-weight: 500; text-align: center; padding: 10px 0; }
.mo-wrap.left .mo-name-tag{position: absolute; top: -20px; right: -30px;}
.mo-wrap.right .mo-name-tag{position: absolute; top: -20px; left: -30px;}
.ca-wrap::after{bottom: -80px; right: -150px; height: 80%;}
.ca-wrap::before{left: 0; background: url(../images/contents/caution_point02.png) no-repeat center;}
.caution-wrap{ padding: 50px 120px 70px 60px; border-radius: 20px; width: 80%;}
.caution-wrap p{ font-size: 20px; margin: 20px 50px; }
.caution-wrap p::before{width: 28px; height: 28px; top: -6px; left: -50px;}
}
@media only screen and (max-width: 768px){
.move-h3{font-size: 22px;margin-bottom:20px;}
.move-h3 img{width: 40%;}
.move-p {font-size: 20px;margin-bottom: 30px;}
.move-p span{font-size: 30px; }
.move-icon-wrap .mo-icon{width: 130px; height: 130px; }
.mo-icon img{width: 50%;}
.move-icon-wrap .icon-p{font-size: 15px; margin-top: 10px; width: 80%;}
.upgrade-wrap{background-size: 100%;}
.upgrade-row{width: 100%; }
.upgrade-row .up{width: 25%; height: 140px; font-size: 14px; padding:20px; border-radius: 0;}
.upgrade-row:first-child{margin-bottom: 250px;}
.upgrade-row .up:nth-child(even) { border: 2px solid #3e65a5;}
.mo-wrap{width: 100%; display: inline-block; margin: 30px 0; position: relative;}
.mo-img{width: 90%; height: 240px;}
.mo-wrap.left{margin-right: 8%;}
.mo-wrap.right{margin-left: 8%}
.mo-name-tag{width: 80px; height: 40px; background: #3e65a5; color: #fff; font-size: 18px; font-weight: 500; text-align: center; padding: 10px 0; }
.mo-wrap.left .mo-name-tag{position: absolute; top: -20px; right: 10px;}
.mo-wrap.right .mo-name-tag{position: absolute; top: -20px; left: -35px;}
.ca-wrap::after{bottom: -50px; right: -220px; height: 40%;}
.ca-wrap::before{display: none;}
.caution-wrap{ padding:50px 20px; border-radius: 20px; width: 95%;}
.caution-wrap p{ font-size: 18px; margin: 20px 0 20px 50px; }
.caution-wrap p::before{width: 28px; height: 28px; top: -6px; left: -50px;}
}
@media only screen and (max-width: 480px){
.move-h3{font-size: 18px;margin-bottom:20px;}
.move-h3 img{width: 60%;}
.move-p {font-size: 18px;margin-bottom: 24px;}
.move-p span{font-size: 26px; }
.move-icon-wrap .mo-icon{width: 110px; height: 110px; }
.mo-icon img{width: 50%;}
.move-icon-wrap .icon-p{font-size: 14px; margin-top: 10px; width: 80%;}
.upgrade-wrap{ background: url(../images/contents/16383399963.png) no-repeat 50% 50%; background-size: 100%;}
.upgrade-row{width: 100%; flex-wrap: wrap; }
.upgrade-row .up{width: 25%; height: 140px; font-size: 14px; padding:20px; border-radius: 0; flex: 48% 1 1;}
.upgrade-row:first-child{margin-bottom: 250px;}
.upgrade-row .up:nth-child(even) { border: 2px solid #3e65a5;}
.upgrade-row .up:nth-child(odd) { border: 2px solid #3e65a5; background: #fff; color: #222;}
.upgrade-row .up:nth-child(1),.upgrade-row .up:nth-child(4) { background:#3e65a5; color: #fff;}
.mo-wrap{width: 100%; display: inline-block; margin: 30px 0; position: relative;}
.mo-img{width: 90%; height: 150px;}
.mo-wrap.left{margin-right: 8%;}
.mo-wrap.right{margin-left: 8%}
.mo-name-tag{width: 80px; height: 40px; background: #3e65a5; color: #fff; font-size: 18px; font-weight: 500; text-align: center; padding: 10px 0; }
.mo-wrap.left .mo-name-tag{position: absolute; top: -20px; right: 10px;}
.mo-wrap.right .mo-name-tag{position: absolute; top: -20px; left: -35px;}
.ca-wrap::after{display: none;}
.ca-wrap::before{display: none;}
.caution-wrap{ padding:50px 20px; border-radius: 20px; width: 95%;}
.caution-wrap p{ font-size: 18px; margin: 20px 0 20px 50px; }
.caution-wrap p::before{width: 28px; height: 28px; top: -6px; left: -50px;}
}
@media only screen and (max-width: 380px){
.move-icon-wrap .mo-icon{width: 90px; height: 90px; }
}
/* 워터필터 집진기 */
.newProduct__bg.type4 .top {padding: 95px 0 60px; background: url('../images/contents/product-type4-bg.png') center no-repeat;}
.newProduct__bg.type4 .top .inner {text-align: center;}
.water-filter .water-title {text-align: center; line-height: 1.4; margin-bottom: 170px;}
.water-filter .water-title h3 {font-size: 30px; font-weight: 400; color: #444;}
.water-filter .water-title h3 span {vertical-align: baseline; color: #3899d5;}
.water-filter .water-title h4 {font-size: 60px; font-weight: 500; color: #222;}
.water-filter .top-pop01 {text-align: center; line-height: 1.4; border-radius: 25px; width: 30%; background: #3899d5; padding: 35px; position: absolute; top: 200px; left: 0;}
.water-filter .top-pop01 img {margin-bottom: 35px;}
.water-filter .top-pop01 h3 {font-size: 24px; font-weight: 700; color: #fff;}
.water-filter .top-pop01 p {font-size: 16px; font-weight: 400; color: #dcf3ff; padding: 0 20px;}
.water-filter .top-pop02 {text-align: center; line-height: 1.4; border-radius: 25px; padding: 30px 60px; background: #8ec54a; position: absolute; right: 0; bottom: 0; width: 30%;}
.water-filter .top-pop02 h3 {font-size: 20px; font-weight: 700; color: #fff;}
.water-filter .top-pop02 h3 span {color: #f6ffea; font-size: 16px; font-weight: 400; display: block;}
.water-filter .top-pop02 p {font-size: 30px; font-weight: 700; color: #fff;}
.water-filter .bottom .inner > h2 {font-size: 40px; font-weight: 700; color: #222; text-align: center; margin: 40px 0 60px;}
.water-filter .bottom-inner {font-size: 0; position: relative; padding-bottom: 300px;}
.water-filter .bottom-inner::before {content: ""; display: block; width: 1262px; height: 290px; background: url('../images/contents/water-filter_bottom-bg.png') center no-repeat; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;}
.water-filter .bottom-inner .water-item {display: inline-block; width: calc(50% - 20px); padding: 50px; background: #f0f0f0; position: relative;}
.water-filter .bottom-inner .water-item.nth-1 {border-radius: 50px 0 0 0; margin: 0 20px 20px 0;}
.water-filter .bottom-inner .water-item.nth-2 {border-radius: 0 50px 0 0; margin: 0 0 20px 20px;}
.water-filter .bottom-inner .water-item.nth-3 {border-radius: 0 0 0 50px; margin: 20px 20px 0 0;}
.water-filter .bottom-inner .water-item.nth-4 {border-radius: 0 0 50px 0; margin: 20px 0 0 20px;}
.water-filter .bottom-inner .water-item .water-item-tag {width: 170px; height: 170px;}
.water-filter .bottom-inner .water-item.nth-1 .water-item-tag {background: #4ba5da; border-radius: 100% 0 0 0; position: absolute; bottom: -20px; right: -20px;}
.water-filter .bottom-inner .water-item.nth-2 .water-item-tag {background: #517dbc; border-radius: 0 100% 0 0; position: absolute; bottom: -20px; left: -20px;}
.water-filter .bottom-inner .water-item.nth-3 .water-item-tag {background: #63c4d6; border-radius: 0 0 0 100%; position: absolute; top: -20px; right: -20px;}
.water-filter .bottom-inner .water-item.nth-4 .water-item-tag {background: #7dcdf0; border-radius: 0 0 100% 0; position: absolute; top: -20px; left: -20px;}
.water-filter .bottom-inner .water-item .water-item-tag h3 {font-size: 24px; font-weight: 700; color: #fff; line-height: 1.4;}
.water-filter .bottom-inner .water-item.nth-1 .water-item-tag h3 {text-align: right; position: absolute; right: 30px; bottom: 30px;}
.water-filter .bottom-inner .water-item.nth-2 .water-item-tag h3 {text-align: left; position: absolute; left: 30px; bottom: 30px;}
.water-filter .bottom-inner .water-item.nth-3 .water-item-tag h3 {text-align: right; position: absolute; right: 30px; top: 30px;}
.water-filter .bottom-inner .water-item.nth-4 .water-item-tag h3 {text-align: left; position: absolute; left: 30px; top: 30px;}
.water-filter .img-wrap {font-size: 0; margin-bottom: 45px; text-align: center;}
.water-filter .img-wrap .img {display: inline-block; width: calc(50% - 7px); vertical-align: top;}
.water-filter .img-wrap .img+.img {margin-left: 14px;}
.water-filter .img-wrap img {border-radius: 20px; width: 100%;}
.water-filter .img-wrap p {font-size: 18px; font-weight: 400; color: #666; margin-top: 20px; line-height: 1.4;}
.water-filter .water-item .txt {padding-left: 30px; position: relative; line-height: 1.4;}
.water-filter .water-item .txt+.txt {margin-top: 40px;}
.water-filter .water-item .txt:after {display: block; content: ""; width: 20px; height: 20px; background: url('../images/common/title_dot.png') center no-repeat; background-size: contain; position: absolute; left: 0; top: 2px;}
.water-filter .water-item .txt h3 {font-size: 18px; font-weight: 400; color: #222;}
.water-filter .water-item .txt p {font-size: 16px; font-weight: 400; color: #666; width: 85%;}
@media only screen and (max-width: 1440px){
.water-filter .top-pop02 {padding: 30px;}
}
@media only screen and (max-width: 1240px){
.water-filter .water-title {margin-bottom: 200px;}
.water-filter .top-pop01 {top: 150px; width: 35%;}
.water-filter .top-pop01 h3 {font-size: 20px;}
.water-filter .top-pop02 h3 {font-size: 18px;}
.water-filter .bottom-inner .water-item .water-item-tag {width: 150px; height: 150px;}
.water-filter .bottom-inner .water-item .water-item-tag h3 {font-size: 18px;}
}
@media only screen and (max-width: 1024px){
.water-filter .water-title {margin-bottom: 50px;}
.water-filter .water-title h4 {font-size: 24px;}
.water-filter .water-title h4 {font-size: 50px;}
.newProduct__bg.type4 .top {padding: 60px 0 150px;}
.water-filter .top-pop01 {width: 50%; bottom: -120px; top: auto;}
.water-filter .top-pop02 {width: 45%; bottom: -120px; top: auto;}
.water-filter .top-pop01 h3 {font-size: 20px;}
.water-filter .top-pop01 img {display: none;}
.water-filter .bottom-inner .water-item {width: 100%;}
.water-filter .bottom-inner .water-item.nth-1,
.water-filter .bottom-inner .water-item.nth-2,
.water-filter .bottom-inner .water-item.nth-3,
.water-filter .bottom-inner .water-item.nth-4 {margin: 0 0 20px; border-radius: 0 0 50px 0;}
.water-filter .water-item .txt p {width: 100%;}
.water-filter .bottom-inner .water-item.nth-1 .water-item-tag,
.water-filter .bottom-inner .water-item.nth-2 .water-item-tag,
.water-filter .bottom-inner .water-item.nth-3 .water-item-tag,
.water-filter .bottom-inner .water-item.nth-4 .water-item-tag {top: 0; left: 0; right: auto; bottom: auto; border-radius: 0 0 100% 0; width: 120px; height: 120px;}
.water-filter .bottom-inner .water-item.nth-1 .water-item-tag h3,
.water-filter .bottom-inner .water-item.nth-2 .water-item-tag h3,
.water-filter .bottom-inner .water-item.nth-3 .water-item-tag h3,
.water-filter .bottom-inner .water-item.nth-4 .water-item-tag h3 {top: 20px; left: 20px; right: auto; bottom: auto; text-align: left;}
}
@media only screen and (max-width: 768px){
.water-filter .water-title h3 {font-size: 24px;}
.water-filter .water-title h4 {font-size: 40px;}
.water-filter .top-pop01,
.water-filter .top-pop02 {padding: 15px;}
.water-filter .top-pop01 {font-size: 16px; }
}
@media only screen and (max-width: 640px){
.newProduct__bg.type4 .top {padding: 30px 0 250px;}
.water-filter .top-pop01 {width: 100%;}
.water-filter .top-pop02 {width: 100%; bottom: -260px;}
.water-filter .img-wrap .img {width: 100%;}
.water-filter .img-wrap .img+.img {margin: 20px 0 0;}
.water-filter .img-wrap p {font-size: 16px;}
.water-filter .bottom-inner .water-item {padding: 30px;}
}
@media only screen and (max-width: 480px){
.newProduct__bg.type4 .top {padding: 30px 0 300px;}
.water-filter .water-item .txt h3 {font-size: 16px;}
.water-filter .top-pop01 {bottom: -170px;}
.water-filter .top-pop01 h3 {font-size: 18px;}
.water-filter .top-pop02 {bottom: -300px;}
.water-filter .top-pop02 p {font-size: 24px;}
.water-filter .bottom-inner .water-item.nth-1, .water-filter .bottom-inner .water-item.nth-2, .water-filter .bottom-inner .water-item.nth-3, .water-filter .bottom-inner .water-item.nth-4 {padding: 25px 20px;}
.water-filter .img-wrap p {font-size: 14px;}
}
/* gdc */
.gdc2 .conBox-type1 .item .text_org {color: rgb(255, 115, 0);}
.gdc2 .conBox-type1 .sub_list {padding-left: 25px; list-style-type:disc; }
.gdc2 .conBox-type1 .sub_item {font-size: 16px;}
.gdc4 {padding: 20px 0;background-color: #f0f0f0;}
.gdc4 .conTitle-wrap {margin-bottom: 40px;}
.gdc4 .newProduct__bg.type4 .top {display: none;}
.gdc4 .newProduct__bg.type4 .top .inner {text-align: center;}
.gdc4 .filter .title {text-align: center; line-height: 1.4; margin-bottom: 170px;}
.gdc4 .filter .title h3 {font-size: 30px; font-weight: 400; color: #444;}
.gdc4 .filter .title h3 span {vertical-align: baseline; color: #3899d5;}
.gdc4 .filter .title h4 {font-size: 60px; font-weight: 500; color: #222;}
.gdc4 .filter .wrap_circle {font-size: 0; position: relative; padding-bottom: 150px;}
.gdc4 .filter .wrap_circle .item {display: inline-block; width: calc(50% - 20px); height: 370px; padding: 50px; background: #fff; position: relative;}
.gdc4 .filter .wrap_circle .item:nth-child(3) {padding-top: 30px;}
.gdc4 .filter .wrap_circle .item:nth-child(4) {padding-top: 30px;}
.gdc4 .filter .wrap_circle .item.nth-1 .txt {padding: 40px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt {padding: 40px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .txt {padding: 0px 0 40px 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt {padding: 0 0 40px 0;}
.gdc4 .filter .wrap_circle .item .tit-box {display: inline-block; width: 100%; height: 60px; background-color: #0E6EB8; position: absolute; top: 0; left: 0;}
.gdc4 .filter .tit-box h3 {text-align: center; font-weight: 500; line-height: 60px; font-size: 25px; color: #fff;}
.gdc4 .filter .txt h4 {padding-bottom: 10px; font-weight: 600; font-size: 22px; color: #0E6EB8;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {display: inline-block; width: 100%; height: 60px; background-color: #0E6EB8; position: absolute; top: 310px; left: 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {display: inline-block; width: 100%; height: 60px; background-color: #0E6EB8; position: absolute; top: 310px; left: 0;}
.gdc4 .filter .wrap_circle .item p {line-height: 1.5;}
.gdc4 .filter .wrap_circle .item.nth-4 p { padding-bottom: 15px;}
.gdc4 .filter .wrap_circle .item.nth-1 .text.nth-bot {padding: 5px 0 0 40px; width: 90%;}
.gdc4 .filter .wrap_circle .item .txt .text{padding-left: 20px;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt h4 {width: 100%; padding-left: 120px;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt h4 {width: 100%; padding-left: 120px;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt p {width: 100%; padding-left: 120px;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt p {width: 100%; padding-left: 120px;}
.gdc4 .filter .wrap_circle .item.nth-1 .tit-box {border-radius: 30px 30px 0 0;}
.gdc4 .filter .wrap_circle .item.nth-2 .tit-box {border-radius: 30px 30px 0 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {border-radius: 0 0 30px 30px;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {border-radius: 0 0 30px 30px;}
.gdc4 .filter .wrap_circle .item.nth-1 {border-radius: 30px 30px 0 0; margin: 0 20px 20px 0;}
.gdc4 .filter .wrap_circle .item.nth-2 {border-radius: 30px 30px 0 0; margin: 0 0 20px 20px;}
.gdc4 .filter .wrap_circle .item.nth-3 {border-radius: 0 0 30px 30px; margin: 20px 20px 0 0;}
.gdc4 .filter .wrap_circle .item.nth-4 {border-radius: 0 0 30px 30px; margin: 20px 0 0 20px;}
.gdc4 .filter .wrap_circle .item .item-tag {width: 170px; height: 170px;}
.gdc4 .filter .wrap_circle .item.nth-1 .item-tag {background: #00aa80; border-radius: 100% 0 0 0; position: absolute; bottom: -20px; right: -20px;}
.gdc4 .filter .wrap_circle .item.nth-2 .item-tag {background: #488cec; border-radius: 0 100% 0 0; position: absolute; bottom: -20px; left: -20px;}
.gdc4 .filter .wrap_circle .item.nth-3 .item-tag {background: #cc4b4b; border-radius: 0 0 0 100%; position: absolute; top: -20px; right: -20px;}
.gdc4 .filter .wrap_circle .item.nth-4 .item-tag {background: #cead1d; border-radius: 0 0 100% 0; position: absolute; top: -20px; left: -20px;}
.gdc4 .filter .wrap_circle .item .item-tag h3 {font-size: 22px; font-weight: 500; color: #fff; line-height: 1;}
.gdc4 .filter .wrap_circle .item .item-tag h3 span {font-size: 50px; font-weight: 800; color: rgb(255, 255, 255); line-height: 1.3;}
.gdc4 .filter .wrap_circle .item.nth-1 .item-tag h3 {text-align: right; position: absolute; right: 30px; bottom: 20px;}
.gdc4 .filter .wrap_circle .item.nth-2 .item-tag h3 {text-align: left; position: absolute; left: 30px; bottom: 20px;}
.gdc4 .filter .wrap_circle .item.nth-3 .item-tag h3 {text-align: right; position: absolute; right: 30px; top: 30px;}
.gdc4 .filter .wrap_circle .item.nth-4 .item-tag h3 {text-align: left; position: absolute; left: 30px; top: 30px;}
.gdc4 .filter .img-wrap {font-size: 0; margin-bottom: 45px; text-align: center;}
.gdc4 .filter .img-wrap .img {display: inline-block; width: calc(50% - 7px); vertical-align: top;}
.gdc4 .filter .img-wrap .img+.img {margin-left: 14px;}
.gdc4 .filter .img-wrap img {border-radius: 20px; width: 100%;}
.gdc4 .filter .img-wrap p {font-size: 18px; font-weight: 400; color: #666; margin-top: 20px; line-height: 1.4;}
.gdc4 .filter .item .txt {padding-left: 30px; position: relative; line-height: 1.4;}
.gdc4 .filter .item .txt+.txt {margin-top: 40px;}
.gdc4 .filter .item .txt:after {display:none;}
.gdc4 .filter .item .txt h3 {font-size: 22px; font-weight: 400; color: #222;}
.gdc4 .filter .item .txt p {font-size: 20px; font-weight: 400; color: #666; width: 85%;}
@media only screen and (max-width: 1440px){
.gdc4 .filter .top-pop02 {padding: 30px;}
.gdc4 .filter .wrap_circle .item {height: 400px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 340px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 340px;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {top: 310px;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {top: 310px;}
}
@media only screen and (max-width: 1240px){
.gdc4 .filter title {margin-bottom: 200px;}
.gdc4 .filter .wrap_circle .item .item-tag {width: 150px; height: 150px;}
.gdc4 .filter .wrap_circle .item .item-tag h3 {font-size: 18px;}
.gdc4 .filter .wrap_circle .item {height: 550px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 430px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 430px;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {top: 400px;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {top: 400px;}
}
@media only screen and (max-width: 1024px){
.gdc4 .filter title {margin-bottom: 50px;}
.gdc4 .filter title h4 {font-size: 24px;}
.gdc4 .filter title h4 {font-size: 50px;}
.newProduct__bg.type4 .top {padding: 60px 0 150px;}
.gdc4 .filter .wrap_circle .item {width: 100%;}
.gdc4 .filter .wrap_circle .item.nth-1,
.gdc4 .filter .wrap_circle .item.nth-2,
.gdc4 .filter .wrap_circle .item.nth-3,
.gdc4 .filter .wrap_circle .item.nth-4 {margin: 0 0 20px; border-radius: 0 0 50px 0;}
.gdc4 .filter .item .txt p {width: 100%;}
.gdc4 .filter .wrap_circle .item.nth-1 .item-tag,
.gdc4 .filter .wrap_circle .item.nth-2 .item-tag,
.gdc4 .filter .wrap_circle .item.nth-3 .item-tag,
.gdc4 .filter .wrap_circle .item.nth-4 .item-tag {top: 0; left: 0; right: auto; bottom: auto; border-radius: 0 0 100% 0; width: 120px; height: 120px;}
.gdc4 .filter .wrap_circle .item.nth-1 .item-tag h3,
.gdc4 .filter .wrap_circle .item.nth-2 .item-tag h3,
.gdc4 .filter .wrap_circle .item.nth-3 .item-tag h3,
.gdc4 .filter .wrap_circle .item.nth-4 .item-tag h3 {top: 20px; left: 20px; right: auto; bottom: auto; text-align: left;}
.gdc4 .filter .wrap_circle .item.nth-1 {height: 380px;}
.gdc4 .filter .wrap_circle .item.nth-2 {height: 220px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 370px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 330px;}
.gdc4 .filter .wrap_circle .item.nth-1 .txt {padding: 40px 0 0 120px;}
.gdc4 .filter .wrap_circle .item.nth-3 .txt {padding: 50px 0 0 120px;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt {padding-top: 50px;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {top: 0; left: 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {top: 0; left: 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .tit-box {border-radius: 30px 30px 0 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .tit-box {border-radius: 30px 30px 0 0;}
.gdc4 .filter .wrap_circle .item .item-tag h3 span {font-size: 30px;}
.gdc4 .filter .wrap_circle {padding-bottom: 50px;}
}
@media only screen and (max-width: 768px){
.gdc4 .filter title h3 {font-size: 24px;}
.gdc4 .filter title h4 {font-size: 40px;}
.gdc4 .filter .wrap_circle .item.nth-1 {height: 480px;}
.gdc4 .filter .wrap_circle .item.nth-2 {height: 220px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 400px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 380px;}
}
@media only screen and (max-width: 640px){
.newProduct__bg.type4 .top {padding: 30px 0 250px;}
.gdc4 .filter .img-wrap .img {width: 100%;}
.gdc4 .filter .img-wrap .img+.img {margin: 20px 0 0;}
.gdc4 .filter .img-wrap p {font-size: 16px;}
.gdc4 .filter .wrap_circle .item {padding: 30px;}
.gdc4 .filter .wrap_circle .item.nth-1 {height: 600px;}
.gdc4 .filter .wrap_circle .item.nth-2 {height: 220px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 400px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 480px;}
}
@media only screen and (max-width: 480px){
.newProduct__bg.type4 .top {padding: 30px 0 300px;}
.gdc4 .filter .item .txt h3 {font-size: 16px;}
.gdc4 .filter .wrap_circle .item.nth-1, .filter .bottom-inner .item.nth-2, .filter .bottom-inner .item.nth-3, .filter .bottom-inner .item.nth-4 {padding: 25px 20px;}
.gdc4 .filter .img-wrap p {font-size: 14px;}
.gdc4 .filter .item .tit-box h3 {font-size: 22px; padding-left:80px;}
.gdc4 .filter .wrap_circle .item.nth-1 .txt {padding: 110px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt {padding: 110px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .txt {padding: 110px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt {padding: 110px 0 0 0;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt h4 {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-2 .txt p {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .txt h4 {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-3 .txt p {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt h4 {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-4 .txt p {padding-left: 0;}
.gdc4 .filter .wrap_circle .item.nth-1 {height: 600px;}
.gdc4 .filter .wrap_circle .item.nth-2 {height: 320px;}
.gdc4 .filter .wrap_circle .item.nth-3 {height: 500px;}
.gdc4 .filter .wrap_circle .item.nth-4 {height: 520px;}
}
/* gdc-특별함 */
.gdc1 .special_inner {margin: 10px 0 700px 0;}
.gdc1 .special {position: relative; z-index: 1;}
.gdc1 .img_gdc_spe {position: absolute; z-index: 0; padding-top: 30px; }
.gdc1 .special .box {float: left; height: 160px; border-radius: 30px; background-color: #fff; margin: 20px 0 ;}
.gdc1 .special.mid .box {height: 175px;}
.gdc1 .special .box.left {margin-right: 27%; width: 23%;}
.gdc1 .special .box.right {margin-left: 27%; width: 23%;}
.gdc1 .special .box .tit_box {width: 100%; height: 50px; border-radius: 30px 30px 0 0; background-color: #0E6EB8;}
.gdc1 .special .box .tit_box h4 {color: #fff; text-align: center; line-height: 50px; font-size: 22px; font-weight: 600;}
.gdc1 .special .box .txt_box {font-size: 18px; font-weight: 400; padding: 5%; word-break: break-all; line-height: 1.4;}
.gdc1 .special .box .txt_box span {font-weight: 600; color: #666;}
.gdc1 .special .box.num3 .txt_box {padding: 3%; font-size: 16px;}
.gdc1 .special .box .txt_box ul {padding-left: 30px;}
.gdc1 .special .box .txt_box li {list-style-type : square;font-weight: 400; line-height: 1.3;}
@media only screen and (max-width: 1440px){
.gdc1 .special_inner {margin: 10px 0 630px 0;}
.gdc1 .img_gdc_spe {padding: 4% 0;}
}
@media only screen and (max-width: 1240px){
.gdc1 .special_inner {margin: 10px 50px 630px 50px;}
.gdc1 .img_gdc_spe{display: none;}
.gdc1 .special .box {margin: 10px 0 ;}
.gdc1 .special .box.left {margin-right: 3%; width: 47%;}
.gdc1 .special .box.right {margin-left: 3%; width: 47%;}
.gdc1 .special .box.num3 .txt_box {font-size: 18px;}
}
@media only screen and (max-width: 1024px){
.gdc1 .special_inner {margin: 10px 50px 80px 50px;}
.gdc1 .special .box {float: none; height: 160px; margin: 20px 0;}
.gdc1 .special .box.left {margin-right: 0; width: 100%;}
.gdc1 .special .box.right {margin-left: 0; width: 100%;}
}
@media only screen and (max-width: 768px){.gdc1 .special_inner {margin: 10px 50px 40px 50px;}}
@media only screen and (max-width: 640px){.gdc1 .special.mid .box.num3 {height: 200px;}}
@media only screen and (max-width: 480px){
.gdc1 .special .box {height: 220px;}
.gdc1 .special.mid .box.num3 {height: 270px;}
}
/* gdc- 소규모사업장 Iot ì„¤ì¹˜ë° ìš´ì˜ê´€ë¦¬ì ˆì°¨ */
.gdc3 .procedure_inner {margin: 20px 50px 550px 50px;}
.gdc3 .inner .procedure .box {position: relative; z-index:1; width: 100%; height: 100%; border-radius: 25px; background-color: #fff; margin-bottom: 1%; box-shadow: 2px 2px 4px 2px #b8b8b8;}
.gdc3 .bg_arrow02 {position: absolute; z-index: 0; top: 100px; left: 46%;}
.gdc3 .inner .procedure .num3::after, .num6::after {display: none;}
.gdc3 .procedure.left {float: left; width: 45%; margin-right: 5%;}
.gdc3 .procedure.right {margin-left: 55%;}
.gdc3 .inner .procedure .box .txt_box {text-align: center; font-size: 16px; line-height: 1.3; padding-bottom: 1%;}
.gdc3 .inner .procedure.left .box .txt_box p {padding: 1.5% 20%;}
.gdc3 .inner .procedure.right .box .txt_box p {padding: 1.5% 10%;}
.gdc3 .procedure .box .tit_box {width: 100%; height: 40px; border-radius: 25px 25px 0 0; background-color: #0E6EB8;}
.gdc3 .procedure .box .tit_box h4 {color: #fff; text-align: center; line-height: 40px; font-size: 18px; font-weight: 600;}
.gdc3 .inner .procedure .box .txt_box p:nth-child(1) {font-size: 18px;}
.gdc3 .procedure .box .txt_box p .black_b {color: #000; font-weight: 600; font-size: 18px;}
.gdc3 .procedure .box .txt_box p .blue_b {color: #0e6eb8; font-weight: 600; font-size: 18px; }
@media only screen and (max-width: 1440px){.gdc3 .procedure_inner {margin: 20px 50px 550px 50px;}}
@media only screen and (max-width: 1240px){
.gdc3 .procedure .box .tit_box {height: 40px;}
.gdc3 .procedure.left {width: 43%; margin-right: 12%;}
.gdc3 .procedure.right {margin-left: 58%;}
.gdc3 .bg_arrow02 {top: 120px;}
}
@media only screen and (max-width: 1160px){
.gdc3 .procedure .box.num4 .tit_box h4 {font-size: 16px;}
.gdc3 .procedure .box.num5 .tit_box h4 {font-size: 16px;}
.gdc3 .procedure .box.num6 .tit_box h4 {font-size: 18px;}
}
@media only screen and (max-width: 1024px){
.gdc3 .procedure_inner {margin: 50px 10% 150px 10%;}
.gdc3 .procedure.left {float: none; width: 100%; margin: 0;}
.gdc3 .procedure.right {margin: 0;}
.gdc3 .inner .procedure .box {margin-bottom: 5%;}
.gdc3 .procedure .box .tit_box h4 {font-size: 18px;}
.gdc3 .bg_arrow01 {display: none;}
.gdc3 .bg_arrow02 {display: none;}
}
@media only screen and (max-width: 768px){.gdc3 .procedure_inner {margin: 50px 10% 50px 10%;}}
@media only screen and (max-width: 640px){
.gdc3 .procedure_inner {margin: 50px 0 30px 0;}
.gdc3 .procedure.right .box .tit_box h4 {font-size: 17px;}
}
@media only screen and (max-width: 480px){
.gdc3 .procedure .box .tit_box {height: 100%;}
.gdc3 .procedure .box .tit_box h4 {padding: 0.5% 8%; word-break: break-all; line-height: 28px;}
}