@charset "utf-8";
/* ===================================================== */
/* 콘텐츠 공통 */
.m-b_rem {margin-bottom: 10rem;}

/* 콘텐츠 공통 */
/* ===================================================== */

/* ===================================================== */
/* 회사소개_인사말 */
.greet {color: #484848; background: url(../images/sub/greet_bg.png) no-repeat right bottom;}
.greet-intro {background: url(../images/sub/greet_intro_bg.png) no-repeat center / cover; padding: 8rem 10rem; --greet-height: 430px; min-height: 430px; position: relative;}
.greet-intro .tit {font-size: 3.8rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.3;}
.greet-intro .col1 {font-size: 5rem; font-weight: 700;}
.greet-intro .col2 {font-size: 4.2rem; font-weight: 700;}
.greet-intro figure {position: absolute; bottom: 0; right: 0;}

/* .ceo-name {position: absolute; top: 100%; right: calc(0% - var(--inner-padding)); transform: translateY(-50%); z-index: 1; width: calc(45% + var(--inner-padding)); background: var(--color-main); padding: 4.5rem 9.5rem;}
.ceo-name h5 {font-size: 4.5rem; font-weight: 700; color: #222; letter-spacing: 0.1em; }
.ceo-name span {display: inline-block; margin-left: 5rem; font-size: 4.8rem; font-weight: 400; font-family: 'Father_loveletter';} */

.greet-message {padding: 10rem 10rem 16rem;}
.greet-message .txt-item {font-size: 2.2rem; font-weight: 500; letter-spacing: -0.025em;}
.greet-message .txt-item .desc {line-height: 1.7;}
.greet-message .txt-item .desc+.desc {margin-top: 3.5rem;}
.greet-message .txt-item span {font-weight: 700; font-size: 2.4rem;}

.ceo-name {position: relative; text-align: right; margin-top: 3rem;}
.ceo-name h5 {font-size: 3.5rem; font-weight: 700; color: #222; letter-spacing: 0.1em; }
.greet-message .txt-item .ceo-name span {margin-left: 5rem; font-size: 5rem; font-weight: 400; font-family: 'Father_loveletter';}


@media (max-width: 1600px){
  .ceo-name {padding: 4rem 5rem;}
}
@media (max-width: 1440px) {
  .greet-intro figure {max-width: 450px;}
  .ceo-name h5 {font-size: 4rem;}
  .ceo-name span {font-size: 3rem; margin-left: 2.5rem;}
}
@media (max-width: 1280px){
  .greet-intro {padding: 12rem 40rem 12rem 6rem;}
  .greet-intro .txt-wrap {position: relative; z-index: 1;}
  .greet-intro .txt-wrap br {display: none;}
  .greet-intro .tit br:last-child {display: none;}
  .greet-intro figure {max-width: 400px;}
  .greet-message {padding: 10rem 6rem 16rem;}
}
@media (max-width: 1024px){
  .greet-intro {padding: 12rem 30rem 12rem 6rem;}
  .greet-intro figure {max-width: 320px;}
  .ceo-name {width: calc(70% + var(--inner-padding)); padding: 2rem 5rem;}
}
@media (max-width: 768px){
  .greet-intro {padding: 5rem 25rem 10rem 5rem; min-height: 1px;}
  .greet-intro .tit {font-size: 3rem;}
  .greet-intro .col1,
  .greet-intro .col2 {font-size: 3.2rem;}
  .greet-intro figure {max-width: 250px;}
  .ceo-name h5,
  .ceo-name span {font-size: 2.5rem;}
  .greet-message br {display: none;}
  .ceo-name span {margin-left: 0; display: block;}
  .greet-message {padding: 10rem 0 16rem;}
  .ceo-name h5 {display: flex; justify-content: center; align-items: baseline;}
  .ceo-name {width: 100%; padding: 2rem auto;}
}
@media (max-width: 576px){

}
@media (max-width: 480px) {
  .greet-intro {padding: 5rem 5rem 8rem;}
  .greet-intro figure {display: none;}
  .ceo-name {padding: 2rem;}
}
/* 회사소개_인사말 */
/* ===================================================== */

/* ===================================================== */
/* 회사소개_기업개요 */
.company {text-align: center;}
.company .txt-top .tit {font-size: 4rem; font-weight: 500; color: #484848; letter-spacing: -0.025em; line-height: 1.4;}
.company .txt-top .tit span {font-weight: 700; font-size: 4.5rem;}

.vision {display: flex; justify-content: center; margin-top: 13rem;}
.vision .item {width: 42.6rem; height: 42.6rem; padding: 7rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: rgba(230, 0, 18, 0.85);}
.vision .item.nth-1 {background-color: rgba(255, 66, 0, 0.85); margin-right: -4rem;}
.vision .item.nth-3 {background-color: rgba(188, 0, 14, 0.85); margin-left: -4rem;}
.vision .tit {padding-top: 11rem; background: url(../images/sub/ico_vision01.png) no-repeat center top; font-size: 2.2rem; font-weight: 500; color: #ffdcdf; letter-spacing: -0.025em; line-height: 1.4;}
.vision .item.nth-2 .tit {padding-top: 10rem; background-image: url(../images/sub/ico_vision02.png); background-position-y: 1.2rem;}
.vision .item.nth-3 .tit {padding-top: 10rem; background-image: url(../images/sub/ico_vision03.png);}
.vision .tit span {display: block; font-weight: 700; font-size: 2.6rem; color: #fff; display: inline;}

.company-point {margin-top: 16rem; padding: 13rem 0 14rem; background: #f5f5f5;}
.company-point .txt-top .tit:first-child span {font-size: 4rem;}
.company-point .point {margin-top: 8rem; display: flex; justify-content: center;}
.company-point .item {margin: 0 2.5rem; border-radius: 3rem; background: #fff; padding: 7.5rem 6.5rem 8rem;}
.company-point .item:first-child {margin-left: 0;}
.company-point .item:last-child {margin-right: 0;}
.company-point .item figure {width: 18.5rem; height: 18.5rem; border-radius: 50%; margin: 0 auto 3.5rem; background: #f5f5f5 url(../images/sub/ico_company-point01.png) no-repeat center;}
.company-point .item.nth-2 figure {background-image: url(../images/sub/ico_company-point02.png);}
.company-point .item.nth-3 figure {background-image: url(../images/sub/ico_company-point03.png);}
.company-point .item .tit {font-size: 2.2rem; font-weight: 500; color: #484848; letter-spacing: -0.025em;}
.company-point .item .tit span {font-weight: 700; font-size: 2.6rem;}

.product-point {background: url(../images/sub/product-point_bg.png) no-repeat center / cover; padding: 10rem 0 14rem;}
.product-point .txt-top .tit {font-size: 5rem; font-weight: 700; color: #fff; letter-spacing: -0.025em;}
.product-point .txt-top .desc {font-size: 2.6rem; font-weight: 500; color: #fff; letter-spacing: -0.025em; opacity: 0.75;}
.product-point .point {margin-top: 7rem; display: flex; justify-content: center;}
.product-point .point .item {flex: 1; border-radius: 2rem; border: 1px solid #fff; backdrop-filter: blur(5px); background: rgba(255, 255, 255, 0.15); padding: 5rem;}
.product-point .point .item+.item {margin-left: 10rem;}
.product-point .point .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.product-point .point .item.nth-1 figure {width: 9.8rem; height: 5.4rem; margin: 2rem auto 3.6rem; background: url(../images/sub/ico_product-point01.png) no-repeat center / contain;}
.product-point .point .item.nth-2 figure {width: 6.5rem; height: 6.5rem; margin: 1.5rem auto 3.2rem; background: url(../images/sub/ico_product-point02.png) no-repeat center / contain;}
.product-point .point .item.nth-3 figure {width: 6.5rem; height: 6.5rem; margin: 1.5rem auto 3.2rem; background: url(../images/sub/ico_product-point03.png) no-repeat center / contain;}

@media (max-width: 1600px){
}
@media (max-width: 1440px) {
  .product-point .point .item+.item {margin-left: 5rem;}
}
@media (max-width: 1280px){
  .vision {margin-top: 10rem;}
  .vision .item {width: 35rem; height: 35rem; padding: 5rem;}

  .company-point .item {padding: 7.5rem 5rem 8rem;}
}
@media (max-width: 1024px) {
  .vision {flex-wrap: wrap;}
  .vision .item.nth-3 {margin: -70px 50px 0;}

  .company-point .item {padding: 5rem 3rem; margin: 0 1.5rem;}
  .company-point .item figure {width: 18rem; height: 18rem;}
  .company-point .item .tit br {display: none;}

  .product-point .txt-top .tit {font-size: 4rem;}
  .product-point .txt-top .desc {font-size: 2rem;}

  .product-point .point .item {padding: 3rem;}
  .product-point .point .item+.item {margin-left: 3rem;}
  .product-point .point .tit {font-size: 2rem;}
}
@media (max-width: 768px){
  .company .txt-top .txt-item {display: inline; font-size: 3.5rem;}
  .company .txt-top .tit span {font-size: 4rem;}
  .company-point .txt-top .tit {display: inline;}
  .company-point .item figure {width: 15rem; height: 15rem; background-size: 40%;}
  .company-point .item .tit {font-size: 2rem;}
  .company-point .item .tit span {font-size: 2.2rem;}
}
@media (max-width: 576px){
  .company .txt-top .tit br {display: none;}
  .vision .item.nth-1 {margin: 0 50px 0;}
  .vision .item.nth-2,
  .vision .item.nth-3 {margin: -30px 50px 0;}

  .company-point .txt-top .tit {font-size: 3.5rem;}
  .company-point .txt-top .tit:first-child span {font-size: 3.5rem;}
  .company-point .point {flex-wrap: wrap;}
  .company-point .item {width: 100%; display: flex; justify-items: center; align-items: center; margin: 0 0 20px;}
  .company-point .item figure {margin: 0 20px;}
  .company-point .item .tit { flex: 1; text-align: left;}
  .company-point .item .tit br {display: block;}
  .product-point .txt-top .desc br {display: none;}
}
@media (max-width: 480px) {
  .vision .item.nth-1,
  .vision .item.nth-2,
  .vision .item.nth-3 {margin-left: 0; margin-right: 0;}
  
  .company-point .item figure {width: 10rem; height: 10rem; margin: 0 10px;}

  .product-point .point {flex-wrap: wrap;}
  .product-point .point .item,
  .product-point .point .item+.item {display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 0 20px; flex: auto;}
  .product-point .point .item.nth-1 figure,
  .product-point .point .item.nth-2 figure,
  .product-point .point .item.nth-3 figure {margin: 0 10px; min-width: 70px;}
  .product-point .point .tit {min-width: 90px;}
}
/* 회사소개_기업개요 */
/* ===================================================== */

/* ===================================================== */
/* 회사소개_연혁 */
.history .txt-top .tit {font-size: 4rem; font-weight: 500; color: #484848; letter-spacing: -0.025em;}
.history .txt-top .tit span {font-weight: 700; font-size: 4.5rem; line-height: 1.3;}

.history-list {margin-top: 10rem;}
.history-list .item {display: flex; min-height: 25rem;}
.history-list .item:last-child {min-height: 1px;}
.history-list .item .tit {min-width: 23rem; font-size: 6rem; font-weight: 700; color: #484848; letter-spacing: -0.025em; position: relative;}
.history-list .item .tit::before {content: ''; width: 1px; height: calc(100% - 5rem); background: #ddd; position: absolute; top: 6rem; right: 0;}
.history-list .item:last-child .tit::before {display: none;}
.history-list .item .tit h5 {position: relative;}
.history-list .item .tit h5::before {content: ''; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ddd; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);}
.history-list .item .tit h5::after {content: ''; width: 0; height: 0; background: url(../images/sub/dot_history.png) no-repeat center / cover; transition: 0.3s ease-in-out; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%);}

.history-list .item .desc {margin-top: 1.5rem; padding-bottom: 30px;}
.history-list .item .desc p {display: flex; font-weight: 500; font-size: 2.2rem; color: #666; letter-spacing: -0.025em; margin-left: 10rem;}
.history-list .item .desc .num {display: inline-block; min-width: 3rem; white-space: nowrap; margin-right: 2rem; margin-top: -3px; font-size: 2.4rem; font-weight: 700; color: #484848; letter-spacing: -0.025em; text-align: right;}

.history-list .item:hover .tit,
.history-list .item:hover .desc .num {color: var(--color-main);}
.history-list .item:hover .tit h5::after {width: 6rem; height: 6rem;}

.history figure {position: relative; padding-top: 45%; max-height: 650px; box-sizing: border-box; margin: 6rem 0 9rem;}
.history figure video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;}

@media (max-width: 1600px){
}
@media (max-width: 1440px) {
}
@media (max-width: 1280px){
  .history-list .item .tit {min-width: 20rem;}
  .history-list .item .desc p {margin-left: 5rem;}
}
@media (max-width: 1024px) {
  .history-list .item .tit {font-size: 4.5rem; min-width: 15rem;}
  .history-list .item .desc p {font-size: 2rem;}
  .history .txt-top .tit br {display: none;}
}
@media (max-width: 768px){
  .history .txt-top .tit {font-size: 3.5rem;}
  .history .txt-top .tit span {font-size: 4rem;}
}
@media (max-width: 576px){
  .history .txt-top .tit br {display: none;}
}
@media (max-width: 480px) {
  .history-list .item {flex-wrap: wrap; min-height: 1px; padding-left: 20px; position: relative;}
  .history-list .item::before {content: ''; width: 1px; height: calc(100% - 30px); background: #ddd; position: absolute; top: 35px; left: 5px;}
  .history-list .item:last-child:before {display: none;}
  .history-list .item .tit::before {display: none;}
  .history-list .item .tit h5::before {right: auto; left: -15px; transform: translate(-50%, -50%);}
  .history-list .item .tit h5::after { right: auto; left: -15px; transform: translate(-50%, -50%);}
  .history-list .item:hover .tit h5::after {width: 3rem; height: 3rem; background-size: contain;}
  .history-list .item .desc {width: 100%;}
  .history-list .item .desc p {margin-left: 2rem;}
}
/* 회사소개_연혁 */
/* ===================================================== */

/* ===================================================== */
/* 회사소개_조직도 */
.org-chart {margin-bottom: 24rem;}
.org-chart img {margin: 0 auto;}

@media (max-width: 1600px){
}
@media (max-width: 1440px) {
}
@media (max-width: 1280px){
}
@media (max-width: 1024px) {
}
@media (max-width: 768px){
}
@media (max-width: 576px){
}
@media (max-width: 480px) {
}
/* 회사소개_조직도 */
/* ===================================================== */

/* ===================================================== */
/* 회사소개_찾아오시는 길 */
.map {position: relative; margin-bottom: 16rem;}
#map figure {height: 73rem;}
.map-info {position: absolute; bottom: 7.5rem; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1400px; border-radius: 20px; border: 2px solid var(--color-main); background: #fff; overflow: hidden;}
.map-info .tit {width: 100%; background: var(--color-main); padding: 2.5rem 8rem; font-size: 5rem; font-weight: 700; color: #fff; letter-spacing: -0.025em;}
.map-info .tit span {margin-left: 2.5rem; font-size: 2.8rem; font-weight: 500;}
.map-info .addr-txt {padding: 2rem 6rem 2.5rem;}
.map-info .addr-txt .item {display: flex; align-items: baseline;}
.map-info .addr-txt dt {font-size: 2.4rem; font-weight: 700; color: #222; padding-left: 3rem; margin-right: 2rem; background: url(../images/sub/ico_tel.png) no-repeat left center;}
.map-info .addr-txt .addr {margin-bottom: 1rem;}
.map-info .addr-txt .addr dt {background-image: url(../images/sub/ico_map.png);}
.map-info .addr-txt dd {font-size: 3rem; font-weight: 500; letter-spacing: 0.04em; color: #434343;}
.map-info .addr-txt .addr dd {font-size: 2rem; letter-spacing: -0.025em;}
.map-info .addr-txt .item.addr .copy-btn { margin-left: 12px; font-size: 1.5rem; color: #fff; background-color: var(--color-main); padding: 5px 10px; border-radius: 9999px;}

@media (max-width: 1440px){
  .map-info {max-width: 1280px;}
  .map-info .addr-txt {align-items: flex-start; flex-direction: column;}
  .map-info .addr-txt .item:last-child {margin-top: 5px;}
  .map-info .addr-txt .addr {margin-right: 0;}
  .map-info .addr-txt dt {font-size: 2rem; padding-left: 4rem;}
  .map-info .addr-txt dd {font-size: 2rem;}
  .map-info .addr-txt .addr dt {background: url(../images/sub/ico_map.png) no-repeat 4px center;}
}
@media (max-width: 1280px){
  .map-info {max-width: 1024px;}
}
@media (max-width: 1024px){
  .map-info {max-width: 768px;}
  .map-info .tit {font-size: 4rem;}
  .map-info .tit span {font-size: 2.5rem;}
}
@media (max-width: 768px){
  .map-info {max-width: 650px;}
  .map-info .addr-txt {padding: 2rem 4rem 2.5rem;}
}
@media (max-width: 650px){
  .map-info {max-width: 460px;}
  .map-info .tit {padding: 2.5rem 4rem; font-size: 3rem;}
  .map-info .tit span {font-size: 2rem; margin-left: 15px;}
  .map-info .addr-txt {padding: 2rem 4rem 2.5rem;}
  .map-info .addr-txt dd {margin-top: 8px;}
  .map-info .addr-txt .addr.item  {align-items: baseline; flex-direction: column; margin-bottom: 2rem;}
  .map-info .addr-txt .addr dd:last-child {position: absolute; left: 17rem; top: 74px;}
}
@media (max-width: 480px){
  .map-info {max-width: 340px; bottom: 2.5rem; transform: translateX(-50%);}
  .map-info .addr-txt dt {font-size: 2.8rem; padding-left: 4rem;}
  .map-info .addr-txt .addr dd:last-child {position: absolute; left: 21rem; top: 66px;}
}
@media (max-width: 331px){
  .map-info .addr-txt .addr dd:last-child {top: 62px;}
  .map-info .tit {font-size: 2.5rem;}
}


/* 회사소개_찾아오시는 길 */
/* ===================================================== */

/* ===================================================== */
/* 이메일무단수집거부 */
.refusal-mail { padding: 0 0 20rem; text-align: center;}
.refusal-mail-wrap {padding: 6rem 5% 7rem; border: 1px solid #eee; }
.refusal-mail-img {
  display: flex; justify-content: center; height: 18rem; margin-bottom: 4rem;
  & svg {width: 100%; height: 100%;}
}
.refusal-mail-tit { margin-bottom: 1rem; font-weight: 700; font-size: 2.8rem; color: #222; } 
.refusal-mail-subtit { 
  display: block; margin-bottom: 1.5rem; font-weight: 500; font-size: 2rem; color: #444; 
  & b {font-weight: 700; color: var(--color-main);}
} 
.refusal-mail-desc { font-size: 18px; } 
@media (max-width: 1280px){
  .refusal-mail-desc { font-size: 16px; } 
}
@media (max-width: 1024px){
  .refusal-mail-desc br { display: none; } 
}
@media (max-width: 768px){
  .refusal-mail-subtit {font-size: 17px;}
  .refusal-mail-desc { font-size: 15px; } 
}
/* 이메일무단수집거부 */
/* ===================================================== */



/* 2-1. 제품구조도 */
.cont-0201 {margin-top: 3%;}
.cont-0201 .cont-area {position: relative;}
.cont-0201 .cont-area .tit {z-index: 2; padding: 0 3%; background-color: #fff; text-align: center; position: absolute; top: -45px; left: 50%; transform: translateX(-50%);  white-space: nowrap;}
.cont-0201 .cont-area .tit h5 {font-size: 40px; color: #e60012; letter-spacing: -0.025em; font-weight: 700;}
.cont-0201 .cont-area .tit p {font-size: 18px; color: #484848; letter-spacing: -0.025em; font-weight: 500;}
.cont-0201 .cont-area .tit p span {font-size: 20px; color: #222; font-weight: 700;}

.cont-0201 .cont-area .product-box {z-index: 1; border: #ededed solid 2.5px; border-radius: 20px;}
.cont-0201 .cont-area .product-box .img-box {position: relative; display: flex; justify-content: center; padding: 8% 5%;}
.cont-0201 .cont-area .product-box .img-box .pro-base {position: relative;}
.cont-0201 .cont-area .product-box .img-box .pro-parts {z-index: 4; position: absolute; cursor: pointer;}
.cont-0201 .cont-area .product-box .img-box .pro-parts span {font-size: 20px; color: #222; font-weight: 600; line-height: 1;}
.cont-0201 .cont-area .product-box .img-box .pro-parts span br {display: none;}
.cont-0201 .cont-area .product-box .img-box .pro-parts span::after {content: ''; position: absolute; width: 20px; height: 20px; top: 30px; left: 50%; transform: translateX(-50%); background: url('../images/contents/0201-arrow.png') no-repeat center / contain;}


.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {top: 10px; left: 90px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {top: 25px; right: 290px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -10px; right: 95px; text-align: center;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 span br {display: block;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 165px; right: 212px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: 30px; left: 50%; transform: translateX(-50%);}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {top: 50%; left: 100px; transform: translateY(-50%);}

.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 span::after {top: 50px; left: 50%; transform: translateX(-50%); background: url('../images/contents/0201-arrow.png') no-repeat center / contain;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 span::after,
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 span::after {top: -30px; left: 50%; transform: translateX(-50%); background: url('../images/contents/0201-arrow_top.png') no-repeat center / contain;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 span::after {top: 50%; left: -30px; transform: translateY(-50%); background: url('../images/contents/0201-arrow_left.png') no-repeat center / contain;}

.cont-0201 .cont-area .product-box .img-box .pro-parts:hover span {color: #e60012; font-weight: 700;}
.cont-0201 .cont-area .product-box .img-box .pro-parts:hover span::after {animation: hover_type01 1s infinite;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4:hover span::after,
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5:hover span::after {animation: hover_type02 1s infinite;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6:hover span::after {animation: hover_type03 1s infinite;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3:hover span::after {animation: hover_type04 1s infinite;}

@keyframes hover_type01 {0% {top: 25px;} 100% {top: 35px;}}
@keyframes hover_type02 {0% {top: -25px;} 100% {top: -35px;}}
@keyframes hover_type03 {0% {top: 50%; left: -25px;} 100% {top: 50%; left: -35px;}}
@keyframes hover_type04 {0% {top: 55px;} 100% {top: 50px;}}


/* 제품 변경전 백업
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {top: -10px; left: 85px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {top: 5px; right: 245px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -5px; right: 95px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 160px; right: 190px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: 10px; left: 50%; transform: translateX(-50%);}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {top: 50%; left: 100px; transform: translateY(-50%);}

.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 span::after,
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 span::after {top: -40px; left: 50%; transform: translateX(-50%); background: url('../images/contents/0201-arrow_top.png') no-repeat center / contain;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 span::after {top: 50%; left: -40px; transform: translateY(-50%); background: url('../images/contents/0201-arrow_left.png') no-repeat center / contain;}

.cont-0201 .cont-area .product-box .img-box .pro-parts:hover span {color: #e60012; font-weight: 700;}
.cont-0201 .cont-area .product-box .img-box .pro-parts:hover span::after {animation: hover_type01 1s infinite;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4:hover span::after,
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5:hover span::after {animation: hover_type02 1s infinite;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6:hover span::after {animation: hover_type03 1s infinite;}

@keyframes hover_type01 {0% {top: 25px;} 100% {top: 35px;}}
@keyframes hover_type02 {0% {top: -35px;} 100% {top: -45px;}}
@keyframes hover_type03 {0% {top: 50%; left: -35px;} 100% {top: 50%; left: -45px;}} */


@media (max-width: 1280px) {
  .cont-0201 .cont-area .product-box .img-box .pro-base>img {max-width: 850px;}

  .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {top: 0; left: 70px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {top: 15px; right: 232px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -20px; right: 55px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 145px; right: 166px;}
.cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: 15px; left: 50%; transform: translateX(-50%);}
}

@media (max-width: 1024px) {
    .cont-0201 .cont-area .product-box .img-box {margin: 5%;}
    .cont-0201 .cont-area .product-box .img-box .pro-base>img {max-width: 650px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts span {font-size: 18px;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {top: -15px; left: 35px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {top: 0px; right: 172px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -40px; right: 25px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 120px; right: 115px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: -10px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {left: 80px;}
    
}

@media (max-width: 768px) {
    .cont-0201 .cont-area .product-box .img-box .pro-base>img {max-width: 550px;}
    .cont-0201 .cont-area .product-box .img-box {margin: 10% 5% 8%;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts span {font-size: 17px;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts span::after {top: 25px; width: 20px; height: 20px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 span::after,
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 span::after {top: -25px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 span::after {left: -30px;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {left: 30px; top: -15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {right: 142px; top: -5px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -45px; right: 10px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 100px; right: 95px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: 0px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {left: 70px;}

    @keyframes hover_type01 {0% {top: 20px;} 100% {top: 30px;}}
    @keyframes hover_type02 {0% {top: -20px;} 100% {top: -30px;}}
    @keyframes hover_type03 {0% {top: 50%; left: -25px;} 100% {top: 50%; left: -35px;}}
}
@media (max-width: 650px) {
  .cont-0201 .cont-area .tit {white-space: initial;}
    .cont-0201 .cont-area .tit {top: -30px;}
    .cont-0201 .cont-area .tit h5 {font-size: 26px;}
    .cont-0201 .cont-area .tit p {font-size: 16px; white-space: none;}
    .cont-0201 .cont-area .tit p span {font-size: 18px;}
    .cont-0201 .cont-area .tit h5 {display: block; white-space: nowrap;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts span {font-size: 16px;}
    .cont-0201 .cont-area .product-box .img-box .pro-base>img {max-width: 380px;}
    .cont-0201 .cont-area .product-box .img-box {margin: 25% 5% 10%;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {left: 0px; top: -25px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {right: 89px; top: -15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -60px; right: -15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 80px; right: 50px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: -15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {left: 60px;}
}
@media (max-width: 450px) {
    .cont-0201 .cont-area .product-box {margin-top: 80px; border: none;}
    .cont-0201 .cont-area .tit {position: relative; top: initial;}
    .cont-0201 .cont-area .tit h5 {font-size: 26px;}
    .cont-0201 .cont-area .tit p {font-size: 16px;}
    .cont-0201 .cont-area .tit p span {font-size: 18px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts {text-align: center;} 
    .cont-0201 .cont-area .product-box .img-box .pro-parts span {font-size: 12px;} 
    .cont-0201 .cont-area .product-box .img-box .pro-parts span br {display: initial;}

    .cont-0201 .cont-area .product-box .img-box .pro-base>img {max-width: 300px;}
    .cont-0201 .cont-area .product-box .img-box {margin: 10% 5% 5%;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts span::after {top: 25px; width: 15px; height: 15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 span::after,
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 span::after {top: -15px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 span::after {left: -20px;}

    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-1 {left: 5px; top: -25px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-2 {right: 72px; top: -20px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {top: -55px; right: -5px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-4 {top: 60px; right: 44px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-5 {bottom: -20px;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-6 {left: 40px;}
    
    @keyframes hover_type01 {0% {top: 20px;} 100% {top: 30px;}}
    @keyframes hover_type02 {0% {top: -10px;} 100% {top: -20px;}}
    @keyframes hover_type03 {0% {top: 50%; left: -15px;} 100% {top: 50%; left: -25px;}}

    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 {line-height: 1;}
    .cont-0201 .cont-area .product-box .img-box .pro-parts.nth-3 span::after {top: 40px;}
    @keyframes hover_type04 {0% {top: 35px;} 100% {top: 45px;}}

}





/* 2-2.탄소저감 흑체복사온돌, 2-3. 온실가스저감 */
.cont-02 .cont-section {display: flex;}
.cont-02 .cont-section:last-child {margin-top: 200px;}
.cont-02 .cont-section .img-area {min-width: 750px; height: 940px; overflow: hidden;  position: sticky; top: 0;}
.cont-02 .cont-section .img-area img {display: none;}
.cont-02 .cont-section:first-child .img-area {background: url('../images/contents/0202-img01.png') no-repeat center / cover;}
.cont-02 .cont-section:last-child .img-area {background: url('../images/contents/0202-img02.png') no-repeat center / cover;}

.cont-02 .cont-section .text-area {margin-left: 5%; flex: 1; overflow-y: auto;}
.cont-02 .cont-section .text-area .tit h5 {font-size: 38px; font-weight: 700; color: #222; letter-spacing: -0.025em;}
.cont-02 .cont-section .text-area .contents-box {padding: 40px 0 50px; border-bottom: 1px solid #efefef;}
.cont-02 .cont-section .text-area .sub-tit {margin-bottom: 15px;}
.cont-02 .cont-section .text-area .sub-tit p {display: inline; font-size: 28px; font-weight: 600; color: #222; letter-spacing: -0.025em; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 48%, #ffe8ea 0%); padding: 0 5px;}
.cont-02 .cont-section .text-area .sub-tit p span {margin-right: 5px; color: #e60012; font-size: 30px; font-weight: 700;}
.cont-02 .cont-section .text-area .contents-box .inner-txt {margin-bottom: 35px; font-size: 20px; color: #484848; font-weight: 500; letter-spacing: -0.025em;}
.cont-02 .cont-section .text-area .contents-box .inner-txt.m-b-0 {margin-bottom: 0;}
.cont-02 .cont-section .text-area .contents-box .inner-txt.m-b-20 {margin-bottom: 20px;}
.cont-02 .cont-section .text-area .contents-box .inner-txt span {color: #222; font-weight: 700;}

.cont-02 .cont-section .text-area .contents-box .icon-box {display: flex; justify-content: space-around;}
.cont-02 .cont-section .text-area .contents-box .icon-box .icon {text-align: center; display: flex; flex-direction: column; align-items: center;}
.cont-02 .cont-section .text-area .contents-box .icon-box .icon-img {background-color: #e60012; width: 100px; height: 100px; border-radius: 9999px; display: flex; justify-content: center; align-items: center; }
.cont-02 .cont-section .text-area .contents-box .icon-box .icon-txt {margin-top: 10px; color: #484848; font-size: 22px; font-weight: 600; letter-spacing: -0.025em;}

.cont-02 .cont-section .text-area .contents-box .inner-cont {display: flex; align-items: center; margin-left: 50px;}
.cont-02 .cont-section .text-area .contents-box .inner-cont p {margin-left: 5%; font-size: 22px; color: #484848; letter-spacing: -0.025em; font-weight: 500;}
.cont-02 .cont-section .text-area .contents-box .inner-cont p span {color: #e60012; font-weight: 700;}

.cont-02 .cont-section .text-area .contents-box .inner-img {display: flex; padding: 30px; justify-content: center; align-items: center; width: 100%; height: 220px; background: url('../images/contents/0202-img03.png') no-repeat center / cover;}
.cont-02 .cont-section .text-area .contents-box .inner-img p {font-size: 26px; color: #fff; font-weight: 700; letter-spacing: -0.025em; text-align: center;}

.cont-02 .cont-section .text-area .contents-box .circle-box {display: flex; justify-content: space-around;}
.cont-02 .cont-section .text-area .contents-box .circle-box .circle {text-align: center;}
.cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 200px; height: 200px; border-radius: 9999px; display: flex; justify-content: center; align-items: center; }
.cont-02 .cont-section .text-area .contents-box .circle-box .circle-txt {margin-top: 10px; color: #484848; font-size: 22px; font-weight: 600; letter-spacing: -0.025em;}

.cont-02.cont-0203 .cont-section:last-child {margin-top: 50px;}
.cont-02.cont-0203 .cont-section:first-child .img-area {background: url('../images/contents/0203-img01.png') no-repeat center / cover;}
.cont-02.cont-0203 .cont-section .text-area .contents-box .inner-img {height: 320px; background: url(../images/contents/0203-img02.png) no-repeat center / cover;}


@media (max-width: 1600px) {
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 150px; height: 150px;}
}
@media (max-width: 1440px) {
    .cont-02 .cont-section .img-area {min-width: initial; width: 45%;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-txt,
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-txt {font-size: 20px;}
}
@media (max-width: 1280px) {
    .cont-02 .cont-section .text-area .tit h5 {font-size: 34px;}
    .cont-02 .cont-section .text-area .sub-tit p {font-size: 26px;}
    .cont-02 .cont-section .text-area .contents-box .inner-cont {margin-left: 0;}
    .cont-02 .cont-section .text-area .contents-box .inner-img p {font-size: 20px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 120px; height: 120px;}
    .cont-02 .cont-section .text-area .contents-box .inner-cont p br {display: none;}
}
@media (max-width: 960px) {
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 120px; height: 120px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-img {width: 150px; height: 150px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box {flex-direction: column; align-items: center;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon {margin-top: 50px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon:first-child {margin-top: 20px;}
}
@media (max-width: 768px) {
    .cont-02 .cont-section {flex-direction: column;}
    .cont-02 .cont-section .img-area {margin-bottom: 10%; width: 100%; height: 350px;  position: initial; top: initial;}
    .cont-02 .cont-section:first-child .img-area {background: none;}
    .cont-02 .cont-section .img-area img {display: block;}
    .cont-02 .cont-section .text-area .contents-box .inner-txt,
    .cont-02 .cont-section .text-area .contents-box .inner-cont p {font-size: 18px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 120px; height: 120px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-img {width: 120px; height: 120px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box {flex-direction: initial; align-items: initial;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon {margin-top: 0;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon:first-child {margin-top: 0;}
}
@media (max-width: 650px) {
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-img {width: 80px; height: 80px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-txt, .cont-02 .cont-section .text-area .contents-box .circle-box .circle-txt {font-size: 16px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 100px; height: 100px;}
}
@media (max-width: 450px) {
    .cont-02 .cont-section .text-area .tit h5 {font-size: 32px;}
    .cont-02 .cont-section .text-area .contents-box .icon-box {flex-direction: column; align-items: center;}
    .cont-02 .cont-section .text-area .contents-box .circle-box {flex-direction: column; align-items: center; justify-content: center;}   
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-img {width: 150px; height: 150px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle-img {width: 250px; height: 250px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle,
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon {margin-top: 50px;}
    .cont-02 .cont-section .text-area .contents-box .circle-box .circle:first-child,
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon:first-child {margin-top: 0;}
    .cont-02 .cont-section .text-area .contents-box .icon-box .icon-txt, .cont-02 .cont-section .text-area .contents-box .circle-box .circle-txt {font-size: 20px;}
    .cont-02 .cont-section .text-area .contents-box .inner-cont {margin-left: 0; flex-direction: column;}
    .cont-02 .cont-section .text-area .contents-box .inner-cont p {margin-left: 0; margin-top: 20px; }
    .cont-02 .cont-section .text-area .sub-tit p {font-size: 26px;}
}



/* AS문의 */
.inquery-header .base__top { position:relative; padding:0 0 0 0; } 
.inquery-header .base__top-wrap { margin-bottom:20px; font-size:0; } 
.inquery-header .base__top-img { display: inline-block; width:15%; padding:0 30px 0 0; text-align:center; } 
.inquery-header .base__top-info { display:inline-block; position:relative; width:85%; padding:2.85%; border-radius: 30px; background-color:#f1f1f1; } 
.inquery-header .base__top-info::before { display:inline-block; position:absolute; top:50%; left:0; width:30px; height:30px; background-color:#f1f1f1; content:''; transform:translate(-50%, -50%) rotate(45deg); } 
.inquery-header .base__top h4 { font-weight:500; font-size:25px; line-height:1.3; color:#222; } 
.inquery-header .base__top p { margin:8px 0 0 0; font-weight:400; font-size:17px; line-height:1.3; color:#666; } 

@media only screen and (max-width: 1024px) {
.inquery-header .base__top-img { width:20%; padding:0 20px 0 0; } 
.inquery-header .base__top-info { width:80%; padding:3.2%; border-radius: 20px; } 
.inquery-header .base__top-info::before { width:20px; height:20px; } 
.inquery-header .base__top h4 { font-size:20px; } 
.inquery-header .base__top p { margin:5px 0 0 0; font-size:16px; } 
 }
@media only screen and (max-width: 768px) {
.inquery-header .base__top-info { padding:4%; } 
.inquery-header .base__top h4 { font-size:18px; } 
.inquery-header .base__top p { font-size:14px; } 
 }
@media only screen and (max-width: 520px) {
.inquery-header .base__top-img { display: block; position:absolute; top:0%; left:6%; z-index:2; width:15%; padding:0; } 
.inquery-header .base__top-info { display:block; width:100%; padding:6%; border-radius: 12px; } 
.inquery-header .base__top-info::before { display: none; } 
.inquery-header .base__top h4 { min-height:60px; padding-left:22%; } 
 }
@media only screen and (max-width: 430px) {
.inquery-header .base__top-img { width:22%; } 
.inquery-header .base__top-info { width:100%; border-radius: 10px; } 
.inquery-header .base__top h4 { padding-left:28%; } 
}