@charset "utf-8";
/* main.css */
:root{
    /* 곡률 */
    --main-radius-l : 20px;
    --main-radius-m : 16px;
}

/* 레이아웃 */
main{padding-top: 88px;padding-bottom: 120px;background: #fafafa;}


/* 상단 영역 */
main .top_cts .wrap{display: grid;gap: 64px 32px;grid-template-columns: minmax(0, 63fr) minmax(540px, 37fr);}
/* 메인 비주얼 슬라이드 */
.visual_wrap{height:500px;position:relative;left:0;top:0;z-index:1;min-width:0;}
.visual_wrap img{display:block;width: 100%;max-width:100%;height: 100%;object-fit: cover;}
.visual_banner{display:flex;flex-direction:column;height:100%;position:relative;}
.visual_banner .banner_slide {height: 100%;border-radius:var(--main-radius-l);overflow:hidden;}
.visual_banner .banner_slide li{height: 100%;position: relative;}
.visual_banner .banner_slide li::after{content: '';display: block;height: 100%;width: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(to right, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0) 90%);z-index: 1;}
.visual_banner .slick-slider .slick-track, .visual_banner .slick-slider .slick-list, .visual_banner .slick-slide>div{height:100%;width: 100%;}
.visual_banner .slick-slide img{max-width:100%;border-radius: var(--main-radius-l);}

.visual_banner a:focus img{border:3px solid #000;}

.visual_banner .txt_area{position: absolute;left: 0;top: 0;z-index: 2;color: #fff;padding-left: 80px;padding-top: 60px;}
.visual_banner .txt_area .title{font-size: 48px;font-weight: 700;text-shadow: 0 0 6px rgba(0, 0, 0, 0.26);}
.visual_banner .txt_area .title em{color: #d4fd8d;display: inline-block;}
.visual_banner .txt_area .title br{display: none;}
.visual_banner .txt_area .text{font-size: 24px;margin-top: 12px;}
.visual_banner .txt_area .btn{line-height: 1.2;font-size: 19px;display: inline-flex;align-items: center;gap: 4px;min-height: 52px;min-width: 220px;padding: 8px 48px 8px 28px;text-align: center;word-break: keep-all;border-radius: 26px;background:#1172e9 url(/images/main/arrow_ico_w.png) right 28px center / 10px no-repeat;color: #fdfdfd;-webkit-appearance: none;cursor: pointer;box-sizing: border-box;transition: background-color .4s;margin-top: 60px;}
.visual_banner .txt_area .btn:hover, .visual_banner .txt_area .btn:active{background-color: #04356f;}
.visual_banner .slide01 .txt_area .title em{color: #d4fd8d;}
.visual_banner .slide02 .txt_area .title em{color: #b8f5fe;}
.visual_banner .slide03 .txt_area .title em{color: #ced9fe;}
.visual_banner .slide01 .txt_area .btn{background-color: #419e0c;}
.visual_banner .slide02 .txt_area .btn{background-color: #2283cc;}
.visual_banner .slide03 .txt_area .btn{background-color: #6a84e1;}


/* 슬라이드 컨트롤 제어 */
.visual_banner .slide_control{justify-content: flex-start;background: #fafafa;position: absolute;right: 0;bottom: 0;width: 100%;max-width: 428px;height: 70px;border-radius: var(--main-radius-l) 0 0 0;padding: 0 36px;box-shadow: 4px 4px 0 4px #fafafa;}
.visual_banner .slide_control::before{content: '';box-shadow: var(--main-radius-l) var(--main-radius-l) 0 0 #fafafa;position: absolute;right: 0;top: -48px;width: 48px;height: 48px;border-radius: var(--main-radius-l);}
.visual_banner .slide_control::after{content: '';box-shadow: var(--main-radius-l) var(--main-radius-l) 0 0 #fafafa;position: absolute;left: -48px;bottom: 0;width: 48px;height: 48px;border-radius: var(--main-radius-l);}
.visual_banner .slide_control .slide_progress{margin-right: auto;margin-left: 4px;}
.visual_banner .slide_control .arrow_btn{background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}
.visual_banner .slide_control .arrow_btn:hover, .visual_banner .slide_control .arrow_btn:active{box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)}
.visual_banner .slide_control .ctr_btn{background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}
.visual_banner .slide_control .ctr_btn:hover, .visual_banner .slide_control .ctr_btn:active{box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)}

/* 빠른 서비스 */
.quick_service{background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);border-radius: var(--main-radius-l);padding: 32px 32px 34px;}
.quick_service h3{font-size: 24px;font-weight: 700;margin-bottom: 16px;}
.quick_list{display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;}
.quick_list .list{display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 14px;height: 140px;padding: 16px 8px 8px;border-radius: var(--main-radius-m);background: #f5f5f5;font-weight: 500;transition: background .3s, color .3s;position: relative;overflow: hidden;color: #fff;}
.quick_list .list01{background: linear-gradient(130deg, #a0bdf4, #8fafec);}
.quick_list .list02{background: linear-gradient(130deg, #84c5ea, #6fb6de);}
.quick_list .list03{background: linear-gradient(130deg, #7bbfa6, #65a88f);}
.quick_list .list04{background: linear-gradient(130deg, #aba3ec, #8d84d1);}
.quick_list .list span{z-index: 1;transition: transform .3s;}
.quick_list .list::before{content: '';display: block;width: 48px;height: 48px;background-position: center;background-repeat: no-repeat;background-size: contain;z-index: 1;transition: transform .3s;}
.quick_list .list01::before{background-image: url(/images/main/quick_service01.png);}
.quick_list .list02::before{background-image: url(/images/main/quick_service02.png);}
.quick_list .list03::before{background-image: url(/images/main/quick_service03.png);}
.quick_list .list04::before{background-image: url(/images/main/quick_service04.png);}
.quick_list .list:hover::before, .quick_list .list:active::before{transform: translateY(-8px);}
.quick_list .list:hover span, .quick_list .list:active span{transform: translateY(-8px);}
.quick_list .list::after{content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 0;background: #04356f;transition: height .4s ease-in-out;-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath fill='black' d='M0 12 C20 0 40 0 60 12 C80 24 100 24 120 12 V24 H0 Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);-webkit-mask-size:120px 24px,100% calc(100% - 23px);-webkit-mask-position:0 0,0 23px;-webkit-mask-repeat:repeat-x,no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath fill='black' d='M0 12 C20 0 40 0 60 12 C80 24 100 24 120 12 V24 H0 Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);mask-size:120px 24px,100% calc(100% - 23px);mask-position:0 0,0 23px;mask-repeat:repeat-x,no-repeat;animation:quick_wave 2s linear infinite;}
.quick_list .list:hover::after,.quick_list .list:active::after{height: calc(100% + 24px);}
@keyframes quick_wave{
0%{-webkit-mask-position: 0 0,0 23px;mask-position: 0 0,0 23px;}
100%{-webkit-mask-position: 120px 0,0 23px;mask-position: 120px 0,0 23px;}
}

/*  Why 켑코솔라 */
.shortcut_link{margin-top: 32px;}
.shortcut_link .link{background: linear-gradient(to right, #132c49 20%, rgba(19, 44, 73, 0) 100%), url(/images/main/shortcut_bg.jpg) right bottom no-repeat;display: block;border-radius: var(--main-radius-m);padding: 32px;height: 210px;}
.shortcut_link .title{font-size: 24px;font-weight: 700;margin-bottom: 8px;color: #fff;}
.shortcut_link .title em{color: #d4fd8d;}
.shortcut_link .text{color: #d2ddfe;font-size: 15px;}
.shortcut_link .view_more{font-size: 15px;font-weight: 600;color: #fff;display: flex;align-items: center;gap: 10px;margin-top: 20px;transition: transform .3s;}
.shortcut_link .view_more::after{content: '';display: inline-block;background: url(/images/main/arrow_ico_w.png) center / contain no-repeat;width: 10px;height: 16px;}
.shortcut_link .link:hover .view_more, .shortcut_link .link:active .view_more{transform: translateX(10px);}

/* 관련기관 배너 */
.agency_banner{margin: 48px 0;}
.agency_banner .banner{overflow: hidden;}
.agency_banner .banner_slide{display: flex;align-items: center;gap: 120px;width: max-content;margin: 0;padding: 0 120px 0 0;list-style: none;will-change: transform;height: 36px;}
.agency_banner .banner_slide li{flex:none;height: 100%;}
.agency_banner .banner_slide img{height: 100%;}


/* 중간 영역 */
main .mid_cts{position: relative;margin: 80px 0;margin-top: 0!important;background: url(/images/main/overview_bg.png) left bottom -104px no-repeat, linear-gradient(120deg, rgba(71, 146, 238, 0.4) 5%, rgba(255, 255, 255, 0) 50%, rgba(180, 232, 231, 0.8) 100%);}
.plant_overview{width: 100%;max-width: 1580px;margin: 0 auto;display: flex;height:520px;justify-content: space-between;padding: 40px 0 72px;gap: 32px;}
/* e-book 열람 & 다운로드 */
.brochure{padding: 0 36px;display: flex;align-items: flex-end;}
.brochure ul{display: flex;gap: 24px;justify-content: space-between;}
.brochure .item{text-align: center;width: 100%;max-width: calc((100% - 32px) / 2);}
.brochure .item img{border: 1px solid #ccc;box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.36);border-radius: 4px;}
.brochure .item .btn{line-height: 1.2;font-size: 15px;display: inline-flex;justify-content: center;align-items: center;gap: 4px;min-height: 44px;min-width: 140px;padding: 4px 16px;text-align: center;word-break: keep-all;border-radius: 8px;color: #fff;-webkit-appearance: none;cursor: pointer;box-sizing: border-box;transition: all .4s;margin-top: 30px;background: #111;transition: background .3s;}
.brochure .item .btn:hover, .brochure .item .btn:active{background: #04356f;}

/* 태양광발전소 */
.overview_info{width: 58%;}
.overview_info .txt_area{display: inline-flex;flex-direction: column;justify-content: center;align-items: flex-start;height: 100%;position: relative;z-index: 1;}
.overview_info .txt_area .title{font-size: 40px;font-weight: 800;margin-bottom: 16px;}
.overview_info .txt_area .text{font-size: 19px;font-weight: 600;max-width: 420px;}
.overview_info .txt_area .text strong{color: #054694;}

.plant_info{display: flex;gap: 64px;margin-top: 40px;}
.plant_info .info{display: grid;grid-template-areas: "ico title" "ico text";align-items: center;position: relative;}
.plant_info .info:not(:last-child):after{content: '';position: absolute;right: -32px;top: 0;width: 1px;height: 100%;background: rgba(136, 136, 136, .4);}
.plant_info .info::before{content: '';grid-area: ico;width: 56px;height: 56px;margin-right: 12px;background-position: center;background-repeat: no-repeat;background-size: contain;}
.plant_info .info01::before{background-image: url(/images/main/plant_ico01.png);}
.plant_info .info02::before{background-image: url(/images/main/plant_ico02.png);}
.plant_info dt{grid-area: title;}
.plant_info dd{grid-area: text;line-height: .7;}
.plant_info dd strong{font-size: 40px;font-weight: 800;display: inline-block;margin-right: 4px;color: #1172e9;}
.plant_info dd em{font-size: 15px;font-weight: 600;}

.overview_info .btn{line-height: 1.2;font-size: 19px;display: inline-flex;justify-content: center;align-items: center;gap: 28px;min-height: 60px;min-width: 300px;padding: 8px 24px;text-align: center;word-break: keep-all;border-radius: 12px;background:#0758b9;color: #fdfdfd;-webkit-appearance: none;cursor: pointer;box-sizing: border-box;transition: background-color .4s, padding .4s;margin-top: auto;}
.overview_info .btn::after{content: '';display: block;background: url(/images/main/arrow_ico_w.png) center / 10px no-repeat;width: 10px;height: 16px;}
.overview_info .btn:hover, .overview_info .btn:active{background-color: #04356f;padding-left: 32px;}
/* 지도영역 */
.plant_map{background: url(/images/main/plant_map.png) top 10px left / contain no-repeat;position: absolute;right:max(16px,calc(50vw - 880px + 130px));top: 0;width: 411px;height: 100%;}
.plant_map .plant_item .item{position: absolute;background: url(/images/main/map_ico.png) center / contain no-repeat;width: 48px;height: 62px;}
.plant_map .plant_item .map_value{border-radius: 50%;z-index: 1;position: absolute;width: 36px;line-height: 36px;left: 6px;top: 6px;font-size: 19px;color: #0758b9;font-weight: 700;text-align: center;}
.plant_map .plant_item .item01{left: 160px;top: 39px;}
.plant_map .plant_item .item02{left: 198px;top: 74px;}
.plant_map .plant_item .item03{left: 280px;top: 51px;}
.plant_map .plant_item .item04{left: 148px;top: 134px;}
.plant_map .plant_item .item05{left: 215px;top: 136px;}
.plant_map .plant_item .item06{left: 168px;top: 214px;}
.plant_map .plant_item .item07{left: 138px;top: 315px;}
.plant_map .plant_item .item08{left: 315px;top: 172px;}
.plant_map .plant_item .item09{left: 295px;top: 272px;}
.plant_map .plant_item .item10{left: 115px;top: 391px;}


/* 하단 영역 */
main .btm_cts .wrap{display: grid;grid-template-areas: "news solar" "company link";grid-template-columns:minmax(0 ,66fr) minmax(480px,34fr);justify-content: space-between;gap: 70px clamp(32px,2vw,60px);}

/* 켑코솔라 뉴스룸 */
.board_wrap{position: relative;height: 370px;}
.board_wrap h3{font-size: 40px;font-weight: 800;}
.board_wrap .board{display: flex;justify-content: flex-end;gap: 8px;padding: 6px 68px 0 280px;position: absolute;width: 100%;top: 0;}
.board_list .board_btn{border: 1px solid #ccc;background: #fff;color: #555;font-weight: 600;min-width: 96px;height: 48px;border-radius: var(--main-radius-l);position: relative;z-index: 1;transition: background .3s ,border .3s, color .3s;}
.board_list.is_current .board_btn{border-color: #0758b9;background: #0758b9;color: #fff!important;}
.board_list .board_btn:hover,.board_list .board_btn:active{border-color: #0758b9;color: #0758b9;}
.board_list .board_inner{position: absolute;left: 0;top: 0;padding-top: 90px;width: 100%;}
.board_list .board_inner[hidden]{display:none!important}
.board_inner .more_btn{position: absolute;right: 0;top: 6px;display: block;width: 48px;height: 48px;border-radius: 50%;background: #555;transition: background .3s;}
.board_inner .more_btn:hover, .board_inner .more_btn:active{background-color: #04356f;}
.board_inner .more_btn:disabled{background-color: #e0e0e0;cursor: default;}
.board_inner .more_btn:disabled:hover, .board_inner .more_btn:disabled:active{background-color: #e0e0e0;}
.board_inner .more_btn::before, .board_inner .more_btn::after{content: '';position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);background: #fff;}
.board_inner .more_btn::before{width: 16px;height: 2px;}
.board_inner .more_btn::after{width: 2px;height: 16px;}

.board_inner ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;}
.board_inner ul li{position:relative;height:280px;}
.board_inner ul a{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;height:260px;padding:24px 24px 36px;border-radius:var(--main-radius-m);color:#222;transition:color .3s;}
.board_inner ul a:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;border-radius:var(--main-radius-m);background:#fff;box-shadow:0 0 0 1px #ddd inset;transition:top .3s,bottom .3s,box-shadow .3s,background .3s;}
.board_inner ul a>*{position:relative;z-index:1;}
.board_inner ul li:hover a, .board_inner ul li:active a, .board_inner ul li:focus-within a{color:#04356f;}
.board_inner ul li:hover a:before, .board_inner ul li:active a:before{top:-10px;bottom:-10px;background:#ecf3fc;box-shadow:0 0 0 3px #0758b9 inset,0 0 10px rgba(0,0,0,.2);}

.board_inner .tit{display: inline-flex;align-items: center;justify-content: center;min-width: 52px;height: 28px;color: #fff;font-size: 15px;text-align: center;border-radius: 6px;padding: 0 8px;margin-bottom: 32px;}
.board_inner .tit01{background: #0b78cb;} 
.board_inner .tit02{background: #228738;} 
.board_inner .tit03{background: #f47a26;} 
.board_inner .title_ellipsis{font-weight: 600;font-size: 19px;width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;/* 라인수 */-webkit-box-orient: vertical;max-height: 4.5em;height: 4.5em;}
.board_inner .date{font-size: 15px;color: #777;margin-top: 32px;}

.board_mobile{font-size: 15px;text-align: left;padding: 0 24px;position: absolute;z-index: 1;right: 56px;top: 0;width: calc(100% - 56px - 280px);min-width: 200px;background: #fff;height: 48px;border-radius: var(--main-radius-l);border: 1px solid #ddd;display: none;}
.board_mobile::after{content: '';position: absolute;right: 24px;top: 16px;background: url(/images/main/arrow_ico.png) center / contain no-repeat;width: 14px;height: 14px;transform: rotate(90deg);}
.board_mobile.is_open::after{transform: rotate(-90deg);}

/* 태양광 용어 */
.solar_info{display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;height: calc(100% - 10px);}
.solar_info .list{border-radius: var(--main-radius-m);padding: 32px 40px;position: relative;overflow: hidden;}
.solar_info .list01{background: linear-gradient(to bottom, #031931, #055170);}
.solar_info .list02{background: linear-gradient(to bottom, #051732, #36237e);}
.solar_info .list::after{content: '';position: absolute;transition: all .3s;background-repeat: no-repeat;background-position: right bottom;background-size: contain;height: 220px;width: 270px;}
.solar_info .list01::after{right: 0;bottom: 8px;background-image: url(/images/main/solarInfo_bg01.png);}
.solar_info .list02::after{right: -28px;bottom: 30px;background-image: url(/images/main/solarInfo_bg02.png);}
.solar_info .list .title{font-size: 24px;font-weight: 700;color: #fff;margin-bottom: 8px;}
.solar_info .list .text{font-size: 15px;color: #d2ddfe;max-width: 182px;}
.solar_info .list:hover::after, .solar_info .list:active::after{transform: scale(1.06);}

/* 회사소개 */
.company_info{background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);padding: 40px;display: grid;justify-content: space-between;grid-template-areas: "title list" "text list";grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);grid-template-rows: 60px auto;border-radius: var(--main-radius-l);gap: 0 12px;}
.company_info h3{grid-area: title;font-size: 32px;font-weight: 800;margin-bottom: 12px;}
.company_info .text{grid-area: text;color: #777;font-weight: 600;}
.company_link{grid-area: list;display: grid;grid-template-columns: repeat(4, minmax(0,1fr));gap: 12px;margin-left: auto;width: 100%;max-width: 676px;}
.company_link .link{border-radius: var(--main-radius-m);display: flex;flex-direction: column;min-height: 200px;text-align: center;justify-content: center;align-items: center;font-size: 19px;font-weight: 600;padding: 10px 8px 0;transition: all .3s;position: relative;background: #f5f5f5;overflow: hidden;height: 100%;}
.company_link .link .tit{display: block;font-size: 14px;color: #0758b9;margin-bottom: 4px;z-index: 1;transition: transform .4s;}
.company_link .link .title{z-index: 1;transition: transform .4s;}
.company_link .link::after{content: '';width: 56px;aspect-ratio: 1;background-repeat: no-repeat;background-position: center;background-size: contain;order: -1;margin-bottom: 20px;z-index: 1;transition: transform .4s;}
.company_link .link01::after{background-image: url(/images/main/company_ico01.png);}
.company_link .link02::after{background-image: url(/images/main/company_ico02.png);}
.company_link .link03::after{background-image: url(/images/main/company_ico03.png);}
.company_link .link04::after{background-image: url(/images/main/company_ico04.png);}
.company_link .link:hover, .company_link .link:active{color: #04356f;}
.company_link .link:hover .tit, .company_link .link:active .tit{transform: translateY(-8px);}
.company_link .link:hover .title, .company_link .link:active .title{transform: translateY(-8px);}
.company_link .link:hover::after, .quick_link:active::after{transform: translateY(-8px);}
.company_link .link::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0;background:#e4eefa;transition:height .4s ease-in-out;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath fill='black' d='M0 12 C20 0 40 0 60 12 C80 24 100 24 120 12 V24 H0 Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);-webkit-mask-size:120px 24px,100% calc(100% - 23px);-webkit-mask-position:0 0,0 23px;-webkit-mask-repeat:repeat-x,no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath fill='black' d='M0 12 C20 0 40 0 60 12 C80 24 100 24 120 12 V24 H0 Z'/%3E%3C/svg%3E"),linear-gradient(#000 0 0);mask-size:120px 24px,100% calc(100% - 23px);mask-position:0 0,0 23px;mask-repeat:repeat-x,no-repeat;animation:quick_wave 2s linear infinite;}
.company_link .link:hover::before,.company_link .link:active::before{height:calc(100% + 24px);}


/* 링크 바로가기 */
.shortcut_list{display: grid;gap: 20px;justify-content: space-between;grid-template-columns: 1fr;}
.shortcut_list .list{position: relative;height: 100%;border-radius: var(--main-radius-l);display: flex;flex-direction: column;justify-content: center;gap: 8px;background: #fff;box-shadow: inset 0 0 0 1px #ddd;padding: 20px 140px 20px 40px;transition: all .3s;}
.shortcut_list .list:hover, .shortcut_list .list:active{box-shadow: inset 0 0 0 3px #0758b9, 0 0 10px rgba(0, 0, 0, 0.2);}
.shortcut_list .list::after{content: '';width: 100px;height: 100px;background-position: center;background-repeat: no-repeat;background-size: contain;position: absolute;right: 40px;top: 50%;transform: translateY(-50%);}
.shortcut_list .list01::after{background-image: url(/images/main/shortcut_ico01.png);}
.shortcut_list .list02::after{background-image: url(/images/main/shortcut_ico02.png);}
.shortcut_list .list .title{font-size: 24px;font-weight: 700;}
.shortcut_list .list .text{font-size: 15px;color: #555;}