@charset "utf-8";


/* dbm */

.dbm_list ul{ display: flex; width: 100%; box-sizing: border-box; flex-wrap: wrap; gap: 20px;}
.dbm_list ul li{width: calc(25% - 15px); box-sizing: border-box; padding: 40px; display: flex; flex-direction: column; align-items: center; background-color: #ffffff; border-radius: 10px; gap: 30px;}
.dbm_list.white ul li{background-color: #ffffff;}
.dbm_list ul li .img_box{display: flex; flex-direction: column; align-items: center; min-height: 160px; justify-content: space-between;}

.dbm_list ul li .txt_box p{color:#222222; font-size: var(--fz-20); letter-spacing: -0.025em; font-weight: 700;}

.dbm_con02{background: url(/img/dbm_con02_bg01.jpg)no-repeat center center /cover;}
.dbm_con03{background: url(/img/dbm_con03_bg01.jpg)no-repeat center center /cover;}
.dbm_con04{background: url(/img/dbm_con04_bg01.jpg)no-repeat center center /cover;}

@media all and (max-width:1024px){
    .dbm_list ul li{width: calc(50% - 10px); padding: 30px;}
    .dbm_con02{padding: 100px 0;}
    .dbm_con03{padding: 100px 0;}
    .dbm_con04{padding: 100px 0;}
}

.dbm_con04 .process_list ul{display: flex; justify-content: space-between; position: relative;}
.dbm_con04 .process_list ul li + li .img_box{position: relative;}
.dbm_con04 .process_list ul li + li .img_box:before{position: absolute; top: 50%; right: 100%; transform: translateY(-50%); content: ''; width: 100%; background-color: #B2DAF9; height: 1px;}
.dbm_con04 .process_list ul .img_box .icon{width: 173px; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;}
.dbm_con04 .process_list ul .img_box .icon:before{content: ''; position: absolute; width: calc(100% + 40px); aspect-ratio: 1/1; background-color: rgba(13,85,139,.05); top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%;}
.dbm_con04 .process_list ul li + li .img_box .icon:after{content: ''; position: absolute; top: 50%; left: -7px; transform: translateY(-50%); width: 14px; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; border: 3px solid #fff; background-color: var(--main-color);}
.dbm_con04 .process_list ul li.on .icon{background-color: var(--main-color);}

.dbm_con04 .process_list .txt_box{margin-top: 40px; text-align: center;}
.dbm_con04 .process_list .txt_box h6{font-weight: 600; color:#bbe2ff; font-size: var(--fz-16); letter-spacing: 0.005em;}
.dbm_con04 .process_list .txt_box p{margin-top: 10px; color:#fff; font-weight: 700; letter-spacing: -0.025em; font-size: var(--fz-22);}

@media all and (max-width:1200px){
    .dbm_con04 .process_list ul .img_box .icon{width: 120px;}
}

@media all and (max-width:850px){
    .dbm_con04 .process_list ul{flex-direction: column; gap:30px;  align-items: center;}
    .dbm_con04 .process_list ul .img_box .icon{width: 173px;}
    .dbm_con04 .process_list ul li + li .img_box:before{top: 0; width: 1px ;height: calc(100% + 110px); transform: translateY(-70%);}
}

/*history*/

.history_con02 .wrap{overflow: hidden;}
.history_con02 .bot_box{display: flex; gap: 100px; align-items: center;}
.history_con02 .bot_box .left_box{width: calc(50% - 100px); overflow:hidden;}
.history_con02 .bot_box .right_box{width: 50%;}
.history_con02 .bot_box .left_box .swiper-slide .img_box{text-align: center;}
.history_con02 .bot_box .left_box .swiper-slide .img_box img{border-radius: 10px; overflow:hidden; max-width: fit-content; width: 100%;}

.history_con02 .bot_box .right_box .tab_list ul{display: flex; gap: 65px;}
.history_con02 .bot_box .right_box .tab_list ul li a{font-size: var(--fz-24); font-weight: 600; letter-spacing: -0.025em; color:#444444;}
.history_con02 .bot_box .right_box .tab_list ul li.on a{color:#76c2fc;}
.history_con02 .bot_box .right_box .tab_list ul li.on a span{color:#fff; position: relative;}
.history_con02 .bot_box .right_box .tab_list ul li.on a span:before{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 47px; height: 47px; aspect-ratio: 1/1; border-radius: 50%; background-color: #76c2fc; display: block; content: ''; z-index: -1;}

.history_con02 .bot_box .right_box .slide_txt{margin-top: 50px;}
.history_con02 .bot_box .right_box .slide_txt ul li{display: none; position: relative; padding:50px 0}
.history_con02 .bot_box .right_box .slide_txt ul li.on{display: block; font-size: var(--fz-18); font-weight: 300; letter-spacing: -0.025em; line-height: 1.777em; color:#666666;}
.history_con02 .bot_box .right_box .slide_txt ul li .bg_txt{position: absolute; font-size: var(--fz-200); letter-spacing: -0.025em; font-weight: 700; color:#f6f6f6; left: 0; top: 50%; transform: translateY(-50%); width: 300%; z-index: -1;}

.history_con02 .bot_box .right_box .swiper-btn-box{display: flex; justify-content: flex-end; gap: 8px; margin-top: 70px;}
.history_con02 .bot_box .right_box .swiper-btn-box .swiper-btn{width: 60px; height: 60px; border-radius: 50%; background-color: #3f4448; background-position: center center; background-repeat: no-repeat; cursor: pointer;}
.history_con02 .bot_box .right_box .swiper-btn-box .swiper-btn-prev{background-image: url(/img/history_con02_prev.png);}
.history_con02 .bot_box .right_box .swiper-btn-box .swiper-btn-next{background-image: url(/img/history_con02_next.png);}

@media all and (max-width:1024px){
    .history_con02{padding: 100px 0;}
    .history_con02 .bot_box{flex-direction: column; gap: 50px;}
    .history_con02 .bot_box .left_box,
    .history_con02 .bot_box .right_box{width: 80%;}
}

@media all and (max-width:768px){
    .history_con02 .bot_box .left_box,
    .history_con02 .bot_box .right_box{width: 100%;}
    .history_con02 .bot_box .right_box .tab_list ul{gap: 0; justify-content: space-between;}
}

.history_con03{background: url(/img/history_bg03.jpg)no-repeat center center /cover; overflow: hidden;}
.history_con03 .con_box .platech_box{max-width: 560px; width: 100%; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); box-sizing: border-box; position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.history_con03 .con_box .platech_box:before{position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 200px); height: calc(100% + 200px); border-radius: 50%; border: 1px solid rgba(255,255,255,.4); box-sizing: border-box;}
.history_con03 .con_box .platech_box .platech{width: 324px; aspect-ratio: 1/1; border-radius: 50%; background-color: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;}
.history_con03 .con_box .platech_box .platech p{font-weight: 300; font-size: var(--fz-46); letter-spacing: 0; color:#ffffff; text-align: center;}

@media all and (max-width: 767px) {
	.history_con03 .con_box .platech_box .platech p {font-size: var(--fz-40); margin-top: 50px;}
}

.history_con03 .con_box .platech_box ul{position: absolute; width: 100%; height: 100%; left: 0; top: 0; box-sizing: border-box;}
.history_con03 .con_box .platech_box ul li{display: flex; align-items: center; position: absolute; max-width: 400px; width: 100%; gap: 20px;}
.history_con03 .con_box .platech_box ul li .txt span{font-size: var(--fz-16); letter-spacing: -0.025em; font-weight: 700; color:#c3e5ff; line-height: 2.125em;}
.history_con03 .con_box .platech_box ul li .txt p{font-size: var(--fz-22); font-weight: 700; letter-spacing: -0.025em; color:#ffffff; line-height: 1.545em;}
.history_con03 .con_box .platech_box ul li .icon{width: 150px; aspect-ratio: 1/1; border-radius: 50%; box-sizing: border-box; background-color: #76c2fc; display: flex; align-items: center; justify-content: center; box-shadow: 7px 7px 31.68px 0.32px rgba(63, 118, 161, 0.41);}

.history_con03 .con_box .platech_box ul li:nth-child(even) .txt{order: 2;}
.history_con03 .con_box .platech_box ul li:nth-child(even) .icon{order: 1;}
.history_con03 .con_box .platech_box ul li:nth-child(1),
.history_con03 .con_box .platech_box ul li:nth-child(2){top: 0;}
.history_con03 .con_box .platech_box ul li:nth-child(3),
.history_con03 .con_box .platech_box ul li:nth-child(4){bottom: 0;}
.history_con03 .con_box .platech_box ul li:nth-child(1),
.history_con03 .con_box .platech_box ul li:nth-child(3){right: calc(100% - 150px); justify-content: flex-end;}
.history_con03 .con_box .platech_box ul li:nth-child(2),
.history_con03 .con_box .platech_box ul li:nth-child(4){left: calc(100% - 150px);}

.history_con03 .con_box .platech_box ul li:nth-child(1) .txt,
.history_con03 .con_box .platech_box ul li:nth-child(3) .txt{text-align: right;}

@media all and (max-width:1024px){
    .history_con03 .con_box .platech_box ul li{flex-direction: column;}
    .history_con03 .con_box .platech_box ul li:nth-child(even) .txt{order: 1;}
    .history_con03 .con_box .platech_box ul li:nth-child(even) .icon{order: 2;}
    .history_con03 .con_box .platech_box ul li:nth-child(1),
    .history_con03 .con_box .platech_box ul li:nth-child(3){right: calc(100% - 250px); }
    .history_con03 .con_box .platech_box ul li:nth-child(2),
    .history_con03 .con_box .platech_box ul li:nth-child(4){left: calc(100% - 250px);}
}

@media all and (max-width:768px){
    .history_con03 .con_box .platech_box ul{display: flex; flex-wrap: wrap;gap: 50px 0; height: auto;}
    .history_con03 .con_box .platech_box ul li{position: unset; max-width: none; width: 50%;}

}

.history_con04{overflow: hidden;}
.history_con04 .con_box{margin-top: 100px;}
.history_con04 .con_box .year{min-height: 250px;}
.history_con04 .con_box .year p{font-size: var(--fz-130); font-weight: 700; letter-spacing: -0.025em; color:#e9edef; writing-mode: vertical-rl; line-height: 0.7em;}
.history_con04 .con_box .txt{width: 100%; padding-left: 40px; box-sizing: border-box;}
.history_con04 .con_box .txt h4{ font-weight: 700; font-size: var(--fz-18); letter-spacing: -0.025em; color:#222222;}
.history_con04 .con_box .txt p{color:#666666; font-size: var(--fz-18); font-weight: 300; letter-spacing: -0.025em; line-height: 1.777em; margin-top: 10px;}
.history_con04 .con_box .swiper-slide{cursor: grab; position: relative;}
.history_con04 .con_box .swiper-slide:before{position: absolute; content: ''; height: 500%; width: 1px; background-color: #eeeeee; left: 0; top: 50%; transform: translateY(-50%);}
.history_con04 .con_box .swiper-btn-box{position: absolute; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background-color: #76c2fc; box-sizing: border-box; left: calc(50% + 100px); display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 7px 7px 31.68px 0.32px rgba(63, 118, 161, 0.27); overflow: hidden;}
.history_con04 .con_box .swiper-btn-box .swiper-btn{width: 50%; height: 100%; background-position: center center; background-repeat: no-repeat; cursor: pointer;}
.history_con04 .con_box .swiper-btn-box .swiper-btn-prev{background-image: url(/img/history_con04_prev.png);}
.history_con04 .con_box .swiper-btn-box .swiper-btn-next{background-image: url(/img/history_con04_next.png);}

.history_con05{background-color: #f9f9f9;}
.history_con05 .top_box .inner_s{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px;}
.history_con05 .top_box .tab_list ul{display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;}
.history_con05 .top_box .tab_list ul li a{border-radius: 32px; background-color: #eeeeee; width: 240px; height: 64px; color:#666666; display: flex; align-items: center; justify-content: center; letter-spacing: -0.025em; font-size: var(--fz-18); font-weight: 600;}
.history_con05 .top_box .tab_list ul li.on a{background-color: var(--main-color); color:#ffffff;}

.history_con05 .top_box .inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.history_con05 .bot_box{margin-top: 65px;}
.history_con05 .swiper-slide .img_box{text-align: center; aspect-ratio: 1/1.414;}
.history_con05 .swiper-slide .img_box img{max-width: unset; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.history_con05 .swiper-slide .txt_box{margin-top: 35px;}
.history_con05 .swiper-slide .txt_box p{text-align: center; font-size: var(--fz-20); font-weight: 600; color:#666666; letter-spacing: -0.025em; line-height: 1.35em;}

.history_con05 .bot_box .tab_con{display: none; gap: 50px; max-width: calc(100% - calc( calc(100% - 1400px) / 2)); margin-left: auto; overflow:hidden;}
.history_con05 .bot_box .tab_con.on{display: flex;}
.history_con05 .bot_box .tab_con .swiper-container{width: calc(100% - 70px); max-width: 1330px;}
.history_con05 .swiper-btn-box{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; position: relative; z-index: 10; box-sizing: border-box; background-color: #f9f9f9;}
.history_con05 .swiper-btn{width: 61px; height: 61px; background-position: center center; background-repeat: no-repeat; cursor: pointer; box-sizing: border-box; background-color: #3f4448; border-radius: 50%;}
.history_con05 .swiper-btn.swiper-button-disabled{opacity: .1;}
.history_con05 .swiper-btn-prev{background-image: url(/img/history_con05_prev.png);}
.history_con05 .swiper-btn-next{background-image: url(/img/history_con05_next.png);}

@media all and (max-width:1024px){
    .history_con05{padding: 100px 0;}
    .history_con05 .bot_box .tab_con{max-width: 93.75%; width: 100%;}
}

@media all and (max-width:767px){
    .history_con05 .top_box .tab_list ul li a{width: 144px;}
}

/*  product_con01*/
.product_con01{padding: 100px 0;}
.product_con01 .btn_list{ display: flex; gap: 10px; margin: 0 auto; width: fit-content; flex-wrap: wrap;}
.product_con01 .btn_list li{cursor: pointer; text-align: center; width: 170px; height: 64px; background-color: #eeeeee; color: #666666; line-height: 64px; font-size: var(--fz-18); letter-spacing: -0.025em;}
.product_con01 .btn_list li.active{background-color: var(--main-color); color: #fff;}

.product_con01 .item_wrap {padding-top: 50px;}
.product_con01 .item_wrap h5{font-size: var(--fz-30); text-align: left; letter-spacing: -0.025em;}
.item_list.type01{display: flex; padding-top: 30px; gap: 32px; flex-wrap: wrap; }
.item_list.type01 li{width: calc(25% - 24px);}
.item_list.type01 li > a{width: 100%; display: block;}
.item_list.type01 li .img_box{width: 100%; aspect-ratio: 1/0.9;}
.item_list.type01 li .img_box img{width: 100%; height: 100%; object-fit: contain;}
.item_list.type01 li .desc{display: flex; justify-content: space-between; padding: 15px 0;}
.item_list.type01 li .desc p{font-size: var(--fz-20); font-weight: 300; letter-spacing: -0.025em;}
.item_list.type01 li .detail p {font-family: 'Montserrat', sans-serif; font-size: var(--fz-16); line-height: 1.75em; letter-spacing: 0.025em; color: #666;}
.product_con01 .paging {width: fit-content; margin: 50px auto 0;}
.product_con01 .paging .pag_wrap a{display: inline-block; font-size: var(--fz-14); vertical-align: middle; text-align: center; width: 38px; height: 38px; line-height: 38px; position: relative;}
.product_con01 .paging .pag_wrap a.active{border: 1px solid #000; color: #355369;}

.product_con01 .paging .pag_wrap a.btn{width: 38px; box-sizing: border-box; height: 38px; line-height: 38px; position: relative; border: 1px solid #939393; background-color: #f9f9f9;}
.product_con01 .paging .pag_wrap a.pre::after{content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 10px; background: url(/img/pre_btn.png);}
.product_con01 .paging .pag_wrap a.next::after{content: ''; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7px; height: 10px; background: url(/img/next_btn.png);}

@media all and (max-width:1200px) {
    .item_list.type01{gap: 33px;}
    .item_list.type01 li{width: calc(33.333% - 22px);}
}
@media all and (max-width:1000px) {
    .item_list.type01 li .desc p{font-size: var(--fz-16); }
}
@media all and (max-width:750px) {
    .item_list.type01 li{width: calc(50% - 17px);}
}

.product_con01 .search_wrap {border-top: 1px solid #666; border-bottom: 1px solid #666;}
.product_con01 .search_wrap .option {display: flex;}
.product_con01 .search_wrap .option + .option {border-top: 1px solid #e2e7eb;}
.product_con01 .search_wrap .option > * {padding: 30px; box-sizing: border-box;}
.product_con01 .search_wrap .option .title {display: flex; align-items: center; justify-content: center; min-width: 160px; background-color: #ebf3f9;}
.product_con01 .search_wrap .option .title h5 {font-weight: 500; font-size: var(--fz-18); line-height: 1.55em; letter-spacing: 0.025em; color: #444;}
/* choice */
.product_con01 .search_wrap .choice {display: flex; flex-wrap: wrap; align-items: baseline; flex: 1; row-gap: 20px;}
.product_con01 .search_wrap .choice label {width: 16.6666%;}
.product_con01 .search_wrap .choice label > * {vertical-align: middle;}
.product_con01 .search_wrap .choice label input[type=checkbox] {margin: 0; margin-right: 10px; width: 20px; height: 20px; border-color: #ddd;}
.product_con01 .search_wrap .choice label span {font-weight: 300; font-size: var(--fz-18); line-height: 1.55em; letter-spacing: 0.025em; color: #666;}
/* range */
.product_con01 .search_wrap .control {flex: 1; max-width: calc(100% - 160px);}
.product_con01 .search_wrap .number_wrap {display: flex; align-items: center; gap: 20px;}
.product_con01 .search_wrap .number_wrap span {font-weight: 300; font-size: var(--fz-18); letter-spacing: 0.025em; color: #444;}
.product_con01 .search_wrap .numberbox > * {vertical-align: middle;}
.product_con01 .search_wrap .numberbox input {margin-right: 10px; width: 180px;}

.product_con01 .search_wrap .range-slider{padding:20px 0;}
.product_con01 .search_wrap .range-slider > .irs {width:calc(100% - 30px); max-width:600px; height:2px; border:0; }
.product_con01 .search_wrap .range-slider .irs--round .irs-bar{background:#444;}
.product_con01 .search_wrap .range-slider .irs--round .irs-grid{height:2px;}
.product_con01 .search_wrap .range-slider .irs .irs{width:100%; background:#dddddd; height:2px;}
.product_con01 .search_wrap .range-slider .irs--round .irs-line,
.product_con01 .search_wrap .range-slider .irs--round .irs-bar {top:0; }
.product_con01 .search_wrap .range-slider .irs--round .irs-handle{top:-5px; width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid #444; box-sizing:border-box;}
.product_con01 .search_wrap .range-slider .irs--round .irs-from,
.product_con01 .search_wrap .range-slider .irs--round .irs-to,
.product_con01 .search_wrap .range-slider .irs--round .irs-single{display:none;}
.product_con01 .search_wrap .range-slider .irs--round .irs-min,
.product_con01 .search_wrap .range-slider .irs--round .irs-max{display:none;}
.product_con01 .search_wrap .price_text{width:calc(100% - 30px); max-width:610px;}
.product_con01 .search_wrap .price_text p{font-size:18px; color:#cccccc; letter-spacing:0.025em; font-weight:500;}
.product_con01 .search_wrap .price_text p.left{float:left;}
.product_con01 .search_wrap .price_text p.right{float:right;}

/* searchBtn */
.product_con01 .btn_wrap {display: flex; align-items: center; justify-content: center; margin-top: 60px;}
.product_con01 .btn {display: flex; align-items: center; justify-content: center; width: 200px; height: 60px; background-color: #1c6092; color: #fff; font-weight: 700; font-size: var(--fz-20); letter-spacing: 0.025em;}

@media all and (max-width: 1200px) {
    .product_con01 .search_wrap .choice label {width: 25%;}
}

@media all and (max-width: 1024px) {
    .product_con01 .search_wrap .choice label {width: 33.3333%;}
}

@media all and (max-width: 767px) {
    .product_con01 .search_wrap .numberbox input {width: 120px;}
}

@media all and (max-width: 640px) {
    .product_con01 .search_wrap .choice label {width: 50%;}
    .product_con01 .search_wrap .number_wrap {flex-direction: column; align-items: flex-start;}
    .product_con01 .search_wrap .numberbox {width: 100%;}
    .product_con01 .search_wrap .numberbox input {width: 80%;}
}

/* view */
.view_con01{padding: 100px 0;}
.view_con01 .top_wrap{display: flex;}
.view_con01 .top_wrap .left_box{width: 45%;}
.view_con01 .top_wrap .left_box .img_box{width: 100%; aspect-ratio: 1/0.75;}
.view_con01 .top_wrap .left_box .img_box img{width: 100%; height: 100%; object-fit: contain;}
.view_con01 .top_wrap .left_box .img_list{display: flex; padding-top: 20px;}
.view_con01 .top_wrap .left_box .img_list li{width: 95px; height: 75px; }
.view_con01 .top_wrap .left_box .img_list li img{width: 100%; height: 100%; object-fit: cover;}
.view_con01 .top_wrap .right_box{ width: 55%; padding-left: 50px; box-sizing: border-box; max-height: 470px; display: flex; justify-content: space-between; flex-direction: column;}
.view_con01 .top_wrap .right_box h3{font-size: var(--fz-30); letter-spacing: -0.025em; color: var(--main-color);}
.view_con01 .top_wrap .right_box .list_box{margin-bottom: 50px;}
.view_con01 .top_wrap .right_box .list_box h5{font-size: var(--fz-20); letter-spacing: -0.025em; font-weight: 700;}
.view_con01 .top_wrap .right_box .list_box ul{margin-top: 10px; display: flex; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.view_con01 .top_wrap .right_box .list_box ul li{width: 25%; aspect-ratio: 1/1.2; border-right: 1px solid #e5e5e5; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.view_con01 .top_wrap .right_box .list_box ul li .icon{min-height: 53px;}
.view_con01 .top_wrap .right_box .list_box ul li b{font-size: var(--fz-18); display: inline-block; padding: 10px 0; letter-spacing: -0.025em; }
.view_con01 .top_wrap .right_box .list_box ul li p{font-size: var(--fz-16); color: #666; letter-spacing: -0.025em; }
.view_con01 .top_wrap .right_box .btn_box{display: flex; justify-content: space-between;}
.view_con01 .top_wrap .right_box .btn_box a{display: inline-block; height: 76px; line-height: 76px; text-align: center ; font-size: var(--fz-16); letter-spacing: -0.025em;}
.view_con01 .top_wrap .right_box .btn_box .back{width: 130px; border: 1px solid #666; color: #666; }
.view_con01 .top_wrap .right_box .btn_box .back::before{content: ''; display: inline-block; width: 7px; height: 10px; background: url(/img/pre_btn.png); margin-right: 10px;}
.view_con01 .top_wrap .right_box .btn_box .add{width: 196px; background-color: var(--main-color); color: #fff; }

.view_con01 .bot_wrap{padding-top: 50px;}
.view_con01 .bot_wrap h3{font-size: var(--fz-30); font-weight: 700; padding-left: 10px; color: var(--main-color);}
.view_con01 .bot_wrap .list_wrap{display: flex; padding-top: 30px; gap: 32px; }
.view_con01 .bot_wrap .list_wrap li{width: calc(25% - 24px);}
.view_con01 .bot_wrap .list_wrap li > a{width: 100%; display: block;}
.view_con01 .bot_wrap .list_wrap li .img_box{width: 100%; aspect-ratio: 1/0.9;}
.view_con01 .bot_wrap .list_wrap li .img_box img{width: 100%; height: 100%; object-fit: cover;}
.view_con01 .bot_wrap .list_wrap li .desc{display: flex; justify-content: space-between; padding: 15px 0;}
.view_con01 .bot_wrap .list_wrap li .desc p{font-size: var(--fz-20); font-weight: 300; letter-spacing: -0.025em;}

@media all and (max-width:1200px) {

    .view_con01 .top_wrap .right_box{padding-left: 20px;}
}
@media all and (max-width:1030px) {
    /* .view_con01 .bot_wrap h3{font-size: 26px;}
    .view_con01 .top_wrap .right_box h3{font-size: 26px;}
    .view_con01 .bot_wrap .list_wrap li .desc p{font-size: 16px; } */
    .view_con01 .top_wrap{flex-direction: column;}
    .view_con01 .top_wrap .left_box{width: 100%; max-width: 650px; margin: 0 auto 30px;}
    .view_con01 .top_wrap .right_box .list_box ul li{aspect-ratio: 1/1.3;}
    .view_con01 .top_wrap .right_box{width: 100%; padding: 0;}
}
@media all and (max-width:750px) {
    .view_con01 .bot_wrap .list_wrap{flex-wrap: wrap;}
    .view_con01 .bot_wrap .list_wrap li{width: calc(50% - 16px);}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * 제품 상세 *
 * 20230707 신규 작업
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/*--- prod_con01 ---*/
.prod_con01 {padding: 100px 0; box-sizing: border-box;}
.prod_con02 {padding: 0 0 100px; box-sizing: border-box;}
.prod_con01 .flex_wrap {display: flex; gap: 60px;}
.prod_con01 .left {width: calc(45% - 60px);}
.prod_con01 .right {width: 55%;}
/* title */
.prod_con01 .tit_box {}
.prod_con01 .tit_box h5 {font-weight: 500; font-size: var(--fz-48); line-height: 1.3em; letter-spacing: -0.045em;}
.prod_con01 .tit_box p {font-size: var(--fz-20); line-height: 1.5em; letter-spacing: -0.025em;}
.prod_con01 .tit_box p span{font-size: var(--fz-24); display: inline-block; padding: 25px 0;}
/* icon */
.prod_con01 .icon_box h5{font-size: var(--fz-20); letter-spacing: -0.025em; font-weight: 700;}
.prod_con01 .icon_box ul{margin-top: 10px; display: flex; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.prod_con01 .icon_box ul li{width: 16.666%; height: 175px; border-right: 1px solid #e5e5e5; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box;}
.prod_con01 .icon_box ul li .icon{width: 100%; max-width: 50px; aspect-ratio: 1/1; position: relative;}
.prod_con01 .icon_box ul li .icon img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.prod_con01 .icon_box ul li b{font-size: var(--fz-18); display: inline-block; padding: 10px 0; letter-spacing: -0.025em; }
.prod_con01 .icon_box ul li p{font-size: var(--fz-16); color: #666; letter-spacing: -0.025em; }
/* btn */
.prod_con01 .btn_box{display: flex; justify-content: space-between; margin-top: 40px;}
.prod_con01 .btn_box a{display: inline-block; height: 76px; line-height: 76px; text-align: center ; font-size: var(--fz-16); letter-spacing: -0.025em;}
.prod_con01 .btn_box .back{width: 130px; border: 1px solid #666; color: #666; }
.prod_con01 .btn_box .back::before{content: ''; display: inline-block; width: 7px; height: 10px; background: url(/img/pre_btn.png); margin-right: 10px;}
.prod_con01 .btn_box .add{width: 196px; background-color: var(--main-color); color: #fff; }
/* slick */
.prod_con01 .slick_wrap {overflow: hidden;}
.prod_con01 .main_slick {width: 100%;}
.prod_con01 .main_slick .slick-slide {height: 460px;}
.prod_con01 .main_slick .slick-slide img {width: 100%; height: 100%; object-fit: contain; object-position: center;} 
.prod_con01 .nav_slick {margin: 0 -5px; margin-top: 20px;}
.prod_con01 .nav_slick .slick-slide {height: 75px; margin: 0 5px; box-sizing: border-box; border: 1px solid #eee;}
.prod_con01 .nav_slick .slick-slide img {width: 100%; height: 100%; object-fit: contain;}

@media all and (max-width: 1024px) {
    .prod_con01 .flex_wrap {gap: 30px; flex-wrap: wrap;}
    .prod_con01 .left,
    .prod_con01 .right {width: 100%;}
    .prod_con01 .main_slick{text-align: center;}
    .prod_con01 .main_slick li img{width: 100%;}
}

@media all and (max-width: 640px) {
    .prod_con01 .icon_box ul {flex-wrap: wrap;}
    .prod_con01 .icon_box ul li {width: 33.333%;}
    .prod_con01 .icon_box ul li:nth-child(n+4) {border-top: 1px solid #e5e5e5;}
}


/*sustainable*/

/*sustainable 공통*/
.sus_box .tit p{color:var(--main-color); font-weight: 500; font-size: var(--fz-40); letter-spacing: -0.025em; word-break: break-all;}
.sus_box .tit span{font-size: var(--fz-20); font-weight: 500; letter-spacing: -0.025em; color:#ababab; line-height: 1.6em; display: block; margin-top: 10px;}
.sus_box .txt{margin-top: 30px;}
.sus_box .txt p{font-weight: 500; font-size: var(--fz-20); letter-spacing: -0.025em; color:#444444; line-height: 1.6em;}

.sustainable_con01.section{padding: 0;}
.sustainable_con01 .wrap{padding-top:100px; box-sizing: border-box; height: 100vh;}
.sustainable_con01 .bar_list{height:100%; display: flex;}
.sustainable_con01 .bar_list > li{display:flex; height:100%; transition: flex 1s;}
.sustainable_con01 .bar_list > li .sus_bar{height:100%; text-align: center; writing-mode: vertical-rl; text-orientation: sideways; background-color: var(--bg-color); cursor: pointer;}
.sustainable_con01 .bar_list > li .sus_bar p{font-size: var(--fz-24); letter-spacing: -0.025em; color:#ffffff; font-weight: 700; padding: 0 25.5px;}
.sustainable_con01 .bar_list > li .sus_con{display: flex; align-items: center; overflow: hidden;  width: 0px;}
.sustainable_con01 .bar_list > li .sus_con .left_box{width: 49%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%;}
.sustainable_con01 .bar_list > li .sus_con .left_box .txt_box{opacity: 0; transition: opacity 2s;}
.sustainable_con01 .bar_list > li .sus_con .left_box .sus_box{position: relative; margin-top: 70px; padding-top: 40px;}
.sustainable_con01 .bar_list > li .sus_con .left_box .sus_box:before{position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background-color: #76c2fc; box-sizing: border-box; content: '';}

.sustainable_con01 .bar_list > li .sus_con .left_box .sus_box .txt ul{list-style: '- '; padding-left: 10px;}
.sustainable_con01 .bar_list > li .sus_con .left_box .sus_box .txt ul li{color:#444444; font-weight: 500; font-size: var(--fz-20); letter-spacing: -0.025em; line-height: 1.6em;}
.sustainable_con01 .bar_list > li .sus_con .left_box .sus_txt + .sus_txt{margin-top: 55px;}

.sustainable_con01 .bar_list > li .sus_con .right_box{width: 51%; box-sizing: border-box; height: 100%;}
.sustainable_con01 .bar_list > li .sus_con .right_box .img_box{height: 100%; text-align: center;}
.sustainable_con01 .bar_list > li .sus_con .right_box .img_box img{width: 100%; height: 100%; object-fit: cover;}
.sustainable_con01 .bar_list > li.on{flex:1;}
.sustainable_con01 .bar_list > li.on .sus_con{width: 100%;}
.sustainable_con01 .bar_list > li.on .sus_con .left_box .txt_box{opacity: 1; max-width: 70%;}

.fp-viewing-sustainable_black #header{background-color: #fff;}

@media all and (max-width:1024px){
    .sustainable_con01 .wrap{height: auto; padding-top: 0;}
    .sustainable_con01 .bar_list{flex-direction: column;}
    .sustainable_con01 .bar_list > li{flex-direction: column;}
    .sustainable_con01 .bar_list > li .sus_bar{writing-mode: unset; height: auto;}
    .sustainable_con01 .bar_list > li .sus_bar p{padding: 30px 0;}
    .sustainable_con01 .bar_list > li .sus_con{width: 100%; height: 0px; flex-wrap: wrap;}
    .sustainable_con01 .bar_list > li .sus_con .left_box,
    .sustainable_con01 .bar_list > li .sus_con .right_box{width: 100%;}
    .sustainable_con01 .bar_list > li .sus_con .right_box{max-height: 560px;}
    .sustainable_con01 .bar_list > li .sus_con .left_box .txt_box{padding: 50px 0;}
    .sustainable_con01 .bar_list > li.on .sus_con{height: 100%;}
}

@media all and (max-width:767px){
    .sustainable_con01 .bar_list > li .sus_bar p{padding: 15px 0;}
    .sustainable_con01 .bar_list > li .sus_con .right_box{max-height: 260px;}
}

.sustainable_con02{background-color: #f9f9f9;}
.sustainable_con02 .bot_box{display: flex; margin-top: 70px;}
.sustainable_con02 .bot_box > div{width: 50%; padding: 0 40px; box-sizing: border-box;}
.sustainable_con02 .bot_box .img_box{margin-top: 50px; border: 3px solid rgba(0, 0, 0, 0.15); box-sizing: border-box; padding: 20px; width: fit-content; background-color: #fff;}
.sustainable_con02 .bot_box .img_box img{width: 100%; max-width: fit-content;}

@media all and (max-width:1024px){
    .sustainable_con02 .bot_box{flex-wrap: wrap; gap: 50px;}
    .sustainable_con02 .bot_box > div{width: 100%;}
    .sustainable_con02{padding: 100px 0;}
}

@media all and (max-width:640px){
    .sustainable_con02 .bot_box .img_box{margin: 50px auto 0;}
}

.sustainable_con03 .bot_box {display: flex; align-items: center; gap: 80px; flex-wrap: wrap;}
.sustainable_con03 .bot_box .img_box {width: 60%; max-width: 640px; text-align: center; position: relative;}
.sustainable_con03 .bot_box .img_box::before {content: ''; position: absolute; width: 100%; height: 100%; background-color: #e5edf3; top: -20px; left: -20px;}
.sustainable_con03 .bot_box .img_box img{width: 100%; max-width: fit-content; position: relative;}
.sustainable_con03 .bot_box .txt_box h5 {font-weight: 700; font-size: var(--fz-26); line-height: 1.23em; letter-spacing: -0.025em; color: var(--main-color); margin-bottom: 20px;}
.sustainable_con03 .bot_box .bar_list {font-weight: 500; font-size: var(--fz-20); line-height: 1.6em; letter-spacing: -0.025em; color: #444;}

@media all and (max-width: 1024px) {
    .sustainable_con03{padding: 100px 0;}
}

@media all and (max-width: 767px) {
    .sustainable_con03 .bot_box {gap: 40px;}
}


.sustainable_con04{background: url(/img/sustainable_con04_bg01.jpg)no-repeat center / cover; word-break: keep-all;}
.sustainable_con04 .sub_txt{position: absolute; top: 15%; left: 260px; z-index: 1; }
.sustainable_con04 .list_wrap { height: 100%;}
.sustainable_con04 .list_wrap {display: flex; height: calc(100%); }

.sustainable_con04 .list_wrap > li:hover::before{opacity: .5;}
.sustainable_con04 .list_wrap > li::before{content: ''; transition: all 0.3s; display: inline-block; opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; top: 0;  background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, #034e87 100%);}
.sustainable_con04 .list_wrap > li{border-left: 1px solid #949ca1; display: flex; align-items: center; width: 25%; padding: 200px 55px 70px; position: relative; box-sizing: border-box;}
.sustainable_con04 .list_wrap > li:first-child{border-left: none;}
.sustainable_con04 .list_wrap li .item{width: 100%; position: relative; z-index: 1;}
.sustainable_con04 .list_wrap > li h5{padding-bottom:40px; font-size: var(--fz-32); text-align: center; letter-spacing: -0.025em ; color: #c3e5ff; font-weight: 500;}
.sustainable_con04 .list_wrap li .item .bot_txt{font-size: var(--fz-18); color:#f9f9f9; margin-top: 30px;}
.sustainable_con04 .list_wrap li .circle_box{display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; max-width: 370px; margin: 0 auto;}
.sustainable_con04 .list_wrap li .circle_box li{width: calc(50% - 15px); max-width: 140px; color: #FFF; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; justify-content: center;}
.sustainable_con04 .list_wrap li b{ font-size: var(--fz-22); font-weight: bold; letter-spacing: -0.025em;}
.sustainable_con04 .list_wrap li p{font-size: var(--fz-18); font-weight: 400; line-height: 1.5; letter-spacing: -0.025em; text-align: center;}

.sustainable_con04 .list_wrap li .circle_box li .trangle{width: 100%; aspect-ratio: 1/1; padding-top: 20px; box-sizing: border-box; text-align: center; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; background: url(/img/triangle_bg01.png)no-repeat center /contain;}
.sustainable_con04 .list_wrap li .circle_box li .trangle b{font-size: var(--fz-18);}

.sustainable_con04 .list_wrap li .check_box .txt i{display:block; width: 36px; height: 36px; background: url(/img/sustainable_con04_icon01.png);}
.sustainable_con04 .list_wrap li .check_box .txt{color: #FFF; display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.sustainable_con04 .list_wrap li .check_box .txt + .txt{margin-top: 30px;}

@media all and (max-width:1680px) {
    .sustainable_con04 .sub_txt{top: 8%; right: 0; left: unset; }
    .sustainable_con04 .list_wrap > li{ padding: 50px 30px 20px; align-items: center;}
    .sustainable_con04 .list_wrap li .item{min-height: unset;}
}

@media all and (max-width:1024px) {
    .sustainable_con04{padding: 100px 0;}
    .sustainable_con04 .sub_txt{top: 25px; }
    .sustainable_con04 .list_wrap{flex-wrap: wrap; margin-top: 100px;}
    .sustainable_con04 .list_wrap > li{width: 50%; height: 50%; align-items: flex-start;}
}
@media all and (max-width:650px) {
    .sustainable_con04 .sub_txt{position: relative;;}
    .sustainable_con04 .list_wrap > li{width: 100%;  padding: 30px 30px 20px; border-bottom: 1px solid #949ca1;}
    .sustainable_con04 .list_wrap > li:last-child{border: none;}
}

.sustainable_con05{background: url(/img/sustain_con05_bg01.jpg)no-repeat center / cover; position: relative;}
.sustainable_con05 .sus_inner{max-width: 960px; width: 100%; margin: 0 auto; overflow: hidden;}
.sustainable_con05 .swiper_box{margin-top: 30px;}
.sustainable_con05 .swiper_box .swiper-slide img{width: 100%; height: 100%;}
.sustainable_con05 .swiper_box .swiper-slide .note{text-align: center; opacity: 0;}
.sustainable_con05 .swiper_box .swiper-slide-active{z-index: 1; cursor: pointer;}
.sustainable_con05 .swiper_box .swiper-slide-active .note{opacity: 1;}

.sustainable_con05 .swiper_box .swiper-slide-active img{ transition: .3s;}
.sustainable_con05 .swiper_btn{position: absolute; top: 60%; transform: translateY(-50%); width: 61px; height: 61px; box-sizing: border-box; border-radius: 50%; box-shadow: 7px 7px 31.68px 0.32px rgba(29, 45, 36, 0.27); background-position: center center; background-repeat: no-repeat; cursor: pointer;}
.sustainable_con05 .prev_btn{background-image: url(/img/sustain_con05_arrow01.png); background-color: #3f4448; left: 100px;}
.sustainable_con05 .next_btn{background-image: url(/img/sustain_con05_arrow02.png); background-color: #ffffff; right: 100px;}

/*--------------------------------------------------------------*

* popup *

*---------------------------------------------------------------*/
.sustainable_con05 .pop_bg {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.33); z-index: 200;}
.sustainable_con05 .pop_up {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;max-width:52vh; aspect-ratio: 9/14; overflow-y: auto; background-color: #fff; z-index: 201;}
.sustainable_con05 .pop_up .img_box{width: 100%; height: 100%;}
.sustainable_con05 .pop_up .img_box img{width: 100%; height: 100%;}

.sustainable_con05 .pop_bg.on,
.sustainable_con05 .pop_up.on {display: block;}

@media all and (max-width:1024px) {
    .sustainable_con05{padding: 100px 0;}
    .sustainable_con05 .swiper_btn{top: auto; bottom: -80px; transform: none;}
}

/*contact us*/
.history_con06 .wrap{display: flex; height: 100%; align-items: center;}
.history_con06 .left_wrap .root_daum_roughmap{width: 100%; height: 100%;}
.history_con06 .left_wrap .root_daum_roughmap .wrap_map{height: 100%;}
.history_con06 .left_wrap .root_daum_roughmap .wrap_map
.history_con06 .wrap > div{box-sizing: border-box;}
.history_con06 .left_wrap{width: 50%; height: 100%; max-height: 740px; padding-left: 50px; box-sizing: border-box; position: relative;}
/* .history_con06 .left_wrap:before{position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 10;} */
.history_con06 .right_wrap{align-self: center; max-width: 700px; padding-left: 70px; width: 100%; box-sizing: border-box; width: 50%; }
.history_con06 .input_box {display: flex; flex-wrap: wrap; gap: 16px; margin-top: 50px;}
.history_con06 .input_box .w50{width: calc(50% - 8px);}
.history_con06 .input_box .w100{width: 100%;}
.history_con06 .input_box input{flex: 1; border: none; padding: 15px 0 15px 15px; box-sizing: border-box; width: 100%;}
.history_con06 .input_box input:focus,
.history_con06 .input_box label textarea:focus{outline: none;}
.history_con06 .input_box label.u_input{font-size: var(--fz-18); color:#444444; font-weight: 500; letter-spacing: -0.025em; box-sizing: border-box; display: flex; border-radius: 10px; border: 1px solid #eeeeee; padding-left:20px; align-items: center; overflow: hidden;}
.history_con06 .input_box label.text_area{align-items: normal; padding: 0 20px; height: 153px; box-sizing: border-box;}
.history_con06 .input_box label.text_area p{padding: 15px 0;}
.history_con06 .input_box label.text_area textarea{flex: 1; padding: 15px; box-sizing: border-box; width: 100%; border: none; resize: none;}
.history_con06 .input_box label p{white-space: nowrap;}
.history_con06 .input_box label .col1{color:#fe6251;}

.history_con06 .input_box label.u_file{padding: 0; border: none; border-bottom: 1px solid #dcdcdc ; border-radius: 0;}
.history_con06 .input_box label.u_file input{flex: auto;}
.history_con06 .input_box label.u_file input[type="file"]{font-size: var(--fz-16); font-weight: 500;}

.history_con06 .input_box label input[type="button"]{border-radius: 10px; box-sizing: border-box; background-color: var(--main-color); color:#ffffff; font-size: var(--fz-18); letter-spacing: -0.025em; font-weight: 500; padding: 20px 0;}

@media all and (max-width:1200px){
    .history_con06 .right_wrap{padding: 0 30px;}
    .history_con06 .left_wrap{padding: 0;}
}

@media all and (max-width:767px){
    .history_con06 .wrap{flex-wrap: wrap;}
    .history_con06 .right_wrap{order: 1; padding: 50px 0; width: 93.75%; margin: 0 auto;}
    .history_con06 .left_wrap{order: 2;width: 100%;}
    .history_con06 .left_wrap .root_daum_roughmap .wrap_map{height: 450px;}
    
}