@charset "utf-8";

.main{overflow: hidden;}
.main h2{font-size: 24px;font-weight: 400;color: var(--tit_black);}
.main h2 strong{font-weight: 700;}
.bbs_tab{display: flex;flex-wrap: wrap;gap: 0 20px;justify-content: center;margin: 30px 0;align-items: center;}
.bbs_tab ul{display: flex;flex-wrap: wrap;gap: 0 20px;justify-content: center;}
.bbs_tab li a{display: block;font-weight: 400;padding: 10px 0;position: relative;}
.bbs_tab li.on a{font-weight: 700;}
.bbs_tab li a:after{display: none;position: absolute;left: 0;right: 0;bottom: 0;height: 3px;content: "";background: var(--tit_black);}
.bbs_tab li.on a:after{display: block;}
.bbs_tab .more{text-align: center;}
.bbs_tab .more a{display: inline-flex;border: 1px solid #333;border-radius: 20px;font-size: 20px;padding: 0 12px;}
.bbs_tab .more a:after{content: "+";font-size: 14px;}
.bbs_box>div{display: none;}
.bbs_box>div.on{display: block;}
.control .btns{display: flex;gap: 10px;}
.control .btns button{width: 16px;height: 16px;font-size: 0;overflow: hidden;background: url("/images/common/common_ico.png");cursor: pointer;}
.control .btns button.prev{background-position: center -414px;}
.control .btns button.play{background-position: center -430px;}
.control .btns button.stop{background-position: center -446px;}
.control .btns button.next{background-position: center -462px;}

section.hero{background: #fafafa;}
.visual{background: url("/images/main/main_bg.jpg") no-repeat center /cover;padding: 200px 20px;text-align: center;}
.visual p{font-family: var(--tit);font-size: 20px;color: var(--white);}
.vis_search{max-width: 600px;margin: 40px auto 0;}
.vis_search form{width: 100%;border: 3px solid var(--blue);background: var(--white);border-radius: 100px;/* overflow: hidden; */position: relative;}
.vis_search fieldset{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.vis_search fieldset>div{height: 80px;display: flex;}
.vis_search select{display: none;background: none;border: none;}
.vis_search label{font-size: 0;}
.vis_search select{display: none;background: none;border: none;}
.vis_search .sch_keyword{width: calc(100% - 80px);padding-left: 20px;}
.vis_search input[type="text"]{width: 100%;min-width: auto;padding: 0;height: auto;font-size: 18px;color: var(--tit_black);line-height: normal;border: none;background: none;}
.vis_search button{width: 82px;height: 82px;background: url("/images/common/common_ico.png") center -324px var(--blue);font-size: 0;border-radius: 100%;cursor: pointer;position: absolute;right: -1px;z-index: 2;}
.favorite{margin: -160px 12px 0;background: var(--light_blue);border-radius: 12px;padding: 20px;}
.favorite h2{margin-bottom: 20px;}
.favorite ul{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px 0;}
.favorite li a{display: flex;flex-direction: column;gap: 10px;font-size: 14px;text-align: center;align-items: center;position: relative;}
.favorite li a:before{width: 60px;height: 60px;content: "";background: var(--white);border-radius: 100%;}
.favorite li a:after{position: absolute;width: 40px;height: 40px;background: url("/images/main/fav_ico.png") no-repeat center 0;content: "";top: 10px;}
/* 2026-09-02 : 자주 찾는 서비스 6종 개편 - fav_ico.png 스프라이트 위치 재매핑 */
.favorite li:nth-child(1) a:after{background-position: center -360px;} /* AI 추천 */
.favorite li:nth-child(2) a:after{background-position: center 0;} /* 회원사 검색 */
.favorite li:nth-child(3) a:after{background-position: center -80px;} /* 제품·서비스관 */
.favorite li:nth-child(4) a:after{background-position: center -200px;} /* 행사·교육 일정 */
.favorite li:nth-child(5) a:after{background-position: center -120px;} /* 협회 정부지원사업 (기존 정책관 아이콘) */
.favorite li:nth-child(6) a:after{background-position: center -320px;} /* 증명서 발급 */

section.support{background: #fafafa;position: relative;}
section.support:before{position: absolute;width: 158px;height: 162px;content: "";background: url("/images/main/bg_img01.png") no-repeat center /cover;right: -70px;top: 8px;}
.jiwon{position: relative;padding: 80px 0 40px;}
.jiwon h2{text-align: center;margin-bottom: 20px;}
.jiwon .bbs_tab .more{position: absolute;bottom: 40px;}
.jiwon .bbs_box{padding-bottom: 70px;}
.jiwon .bbs_box ul{display: flex;flex-direction: column;gap: 20px;}
.jiwon .bbs_box li a{display: flex;flex-direction: column;padding: 20px;border-radius: 12px;background: var(--white);border: var(--line);}
.jiwon .bbs_box li em{color: var(--orange);}
.jiwon .bbs_box li strong{display: block;width: 100%;font-size: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px;}
.jiwon .bbs_box li span{display: flex;gap: 10px;color: var(--text_black);}
.calendar{background: var(--blue);padding: 40px 0; color: var(--white);position: relative;}
.calendar h2{color: var(--white);}
.calendar .tit p{display: none;}
.calendar .month{position: absolute;right: 20px;top: 40px;font-size: 20px;display: flex;align-items: center;}
.calendar .month strong{display: flex;align-items: center;}
.calendar .month strong:after{display: inline-block;width: 3px;height: 3px;content: "";background: rgba(255,255,255,.5);border-radius: 5px;margin: 0 10px;}
.cal_box ul{display: flex;gap: 15px;overflow-x: auto;padding: 30px 0 20px;width: 100%;}
.cal_box ul::-webkit-scrollbar{height: 3px;}
.cal_box ul::-webkit-scrollbar-track{background: transparent;}
.cal_box ul::-webkit-scrollbar-thumb{background: var(--white);border-radius: 3px;}
.cal_box li{width: calc((100% - 90px)/7);min-width: 35px;font-size: 20px;color: rgba(255,255,255,.5);text-align: center;position: relative;}
.cal_box li span{display: none;}
.cal_box li.today{color: var(--white);}
.cal_box li.on:before{position: absolute;content: "";width: 6px;height: 6px;border-radius: 100%;background: var(--white);left: 50%;top: -10px;transform: translateX(-50%);}
.cal_box p{margin-top: 20px;text-align: center;}
.cal_box p a{display: inline-flex;color: var(--white);border: 1px solid rgba(255,255,255,.5);font-size: 20px;padding: 0 10px;border-radius: 20px;}
.cal_box p a:after{content: "+";font-size: 14px;}
.cal_box:after{content: "";position: absolute;width: 92px;height: 120px;background: url("/images/main/bg_img02.png") no-repeat center /cover;left: -24px;bottom: -54px;}

section.product{background: linear-gradient(to bottom, var(--white) 0%, var(--bg_blue) 100%);padding: 60px 0 40px;}
.product .main_wrap{position: relative;}
.product h2{text-align: center;margin-bottom: 40px;}
.product .card_slide ul{display: flex;gap: 10px;}
.product .card_slide li{flex-shrink: 0;width: 300px;}
/* 링크 폭을 고정해 모든 카드를 300px 정사각형으로 맞추고, 이미지는 contain 으로 전체를 보여 준다 */
.product .card_slide li a{display:block;width:100%;max-width:300px;}
.product .card_slide li .img{border-radius: 12px;background: #fafafa;box-shadow: 0 0 10px rgba(0,0,0,.1);overflow: hidden;font-size: 0;height: 300px;}
.product .card_slide li .img img{width:100%;height:100%;object-fit:contain;}
.product .card_slide li .text{margin-top: 20px;}
.product .card_slide .text strong{display: block;font-size: 20px;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px;color: var(--tit_black);}
.product .control{display: flex;gap: 20px;margin: 30px 0;align-items: center;}
.product .control .bar{width: calc(100% - 90px);height: 3px;background: rgba(0,0,0,.1);border-radius: 3px;}
.product .control .bar span{display: block;height: 100%;background: var(--tit_black);}
.product .more{text-align: center;}
.product .more a{display: inline-flex;border: 1px solid #333;border-radius: 20px;font-size: 20px;padding: 0 12px;}
.product .more a:after{content: "+";font-size: 14px;}

section.experts{background: var(--bg_blue);padding: 60px 0 40px;position: relative;}
.experts h2{text-align: center;margin-bottom: 20px;}
.experts>div{padding-bottom: 40px;}
.experts .bbs_tab .more{position: absolute;bottom: 40px;;}
.experts .card_slide{ overflow: hidden; }
.experts .card_slide>ul{display: flex;gap: 0;flex-wrap: nowrap;width: 100%;transition: transform 0.45s ease;}
.experts .card_slide ul li{ flex: 0 0 20%; max-width: 20%; box-sizing: border-box;padding: 0 5px; }
.experts .card{width: 300px;height: 400px;flex-shrink: 0;}
.experts .card a{display: flex;height: 100%;padding: 30px;background: var(--white);border-radius: 20px;box-shadow: 0 5px 20px rgba(17,114,241,.1);flex-direction: column;gap: 30px;}
.experts .card .profile{display: flex;gap: 20px;}
.experts .card .profile .pic{display: inline-flex;width: 100px;height: 100px;align-items: center;justify-content: center;background: #efefef;border-radius: 100%;overflow: hidden;flex-shrink: 0;}
.experts .card .profile .pic img{object-fit: cover;width: 100%;height: 100%;}
.experts .card .profile strong{display: flex;flex-direction: column;justify-content: flex-end;font-family: var(--tit);font-size: 24px;}
.experts .card .profile strong span{color: var(--orange);font-size: 16px;display: flex;align-items: center;flex-wrap: wrap;}
.experts .card .profile span em{display: flex;align-items: center;}
.experts .card .profile span em:before{content: "";width: 3px;height: 3px;background: #d9d9d9;margin: 0 6px;}
.experts .card .profile span em:first-child:before{display: none;}
.experts .card .text{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 5;height: 7.5em;}
.experts .card_slide .card ul{display: flex;flex-wrap: wrap;gap: 4px;overflow: hidden;max-height: 60px;}
.experts .card_slide .card li{width: auto;max-width: none;padding: 4px 10px;background: var(--bg_blue);border-radius: 20px;font-size: 14px;color: var(--blue);white-space: nowrap;}
.experts .control{display: flex;gap: 20px;margin: 30px 20px;align-items: center;}
.experts .control .bar{width: calc(100% - 90px);height: 3px;background: rgba(0,0,0,.1);border-radius: 3px;}
.experts .control .bar span{display: block;height: 100%;background: var(--tit_black);}

section.community{padding: 60px 0 40px;background: #fafafa;}
.alim_box{position: relative;}
.alim_box .alim_slide{margin-top: 10px;}
.alim_box .alim a{display: block;border-radius: 12px;overflow: hidden;font-size: 0;}
.alim_box .alim a img{width: 100%;}
.alim_box .control{display: flex;justify-content: flex-end;gap: 20px;align-items: center;position: absolute;right: 0;top: 5px;}
.alim_box .control p{display: flex;}
.alim_box .control p strong{display: flex;align-items: center;}
.alim_box .control p strong:after{display: inline-flex;content: "";width: 3px;height: 3px;border-radius: 100%;background: #d9d9d9;margin: 0 10px;}
.noti_container{position: relative;padding-bottom: 40px;}
.noti_container .bbs_tab .more{position: absolute;bottom: 40px;}
.noti_container .bbs_box{margin: 40px 0;padding-bottom: 30px;}
.noti_container .bbs_box ul{display: flex;gap: 20px;flex-direction: column;}
.noti_container .bbs_box li a{display: flex;flex-direction: column;padding: 20px;border-radius: 12px;border: var(--line);background: var(--white);overflow: hidden;}
.noti_container .bbs_box li em{color: var(--orange);}
.noti_container .bbs_box li strong{display: block;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 20px;}
.noti_container .photo li a{padding: 0;}
.noti_container .photo li .thumb{height: 140px;}
.noti_container .photo li .thumb img{width: 100%;height: 100%;object-fit: cover;}
.noti_container .photo li .text{padding: 20px 15px;}
.noti_container .photo li .text span{color: var(--orange);}
.hongbo{position: relative;}
.hongbo .banner_slide{margin: 20px 0 0;}
.hongbo .banner_slide ul{display: flex;gap: 20px;}
.hongbo .banner_slide li{flex-shrink: 0;width: 100%;}
.hongbo .banner_slide li a{display: block;border-radius: 12px;overflow: hidden;font-size: 0;}
.hongbo .banner_slide li a img{width: 100%;}
.hongbo .control{position: absolute;right: 0;top: 5px;}

.member_list{border-top: var(--line);padding: 20px 0;}
.member_list h2{font-weight: 700;font-size: 20px;}
.member_list .list_slide{position: relative;margin-top: 20px;/*overflow: visible;*/}
.member_list .list_slide ul{display: flex;align-items: center;/*gap: 10px;*/}
.member_list .list_slide li{display: flex;align-items: center;gap: 10px;flex-shrink: 0;/*flex-grow: 1;width: auto!important;*/}
.member_list .list_slide li:after{content: "";width: 1px;height: 10px;background: #d9d9d9;}
.member_list .control{position: absolute;right: 0;top: -46px;}
/*2026-06-01 hsy 추가 */.member_list .main_wrap{position: relative;}

.quick_link{display: none;}

@media (max-width: 768px) {
.jiwon .bbs_box li:nth-child(n+5){display: none;}
}

/* tablet */
@media (min-width: 768px) {
.visual p{font-size: 28px;}
.vis_search{position: relative;}
.vis_search:before{width: 109px;height: 121px;content: "";background: url("/images/main/chat_icon.png") no-repeat;position: absolute;top: -121px;left: 4px;}
.vis_search .sch_keyword{padding-left: 30px;}
.favorite ul{grid-template-columns: repeat(6, 1fr);}
.favorite li a{font-size: 16px;}
.jiwon .bbs_box ul{flex-direction: row;flex-wrap: wrap;}
.jiwon .bbs_box li{width: calc((100% - 20px)/2);}
.noti_container .bbs_box ul{flex-direction: row;flex-wrap: wrap;}
.noti_container .bbs_box li{width: calc((100% - 20px)/2);}
.hongbo .banner_slide li{width: calc((100% - 20px)/2);}
}

/* pc */
@media (min-width: 1024px) {
.visual{padding: 330px 0 260px;}
.visual p{font-size: 40px;}
.vis_search{max-width: 980px;}
.vis_search:before{bottom: 3px;top: auto;left: 20px;z-index: 1;}
.vis_search fieldset{justify-content: flex-start;gap: 30px;padding-left: 140px;}
.vis_search fieldset>div{flex-wrap: wrap;height: 100px;align-items: center;gap: 20px;}
.vis_search .sch_area, .vis_search .sch_type{width: 20%;position: relative;}
.vis_search label{font-size: 24px;font-weight: 700;color: var(--blue);}
.vis_search select{display: block;width: calc(100% - 62px);min-width: auto;height: 40px;padding: 0 10px 0 0;font-size: 18px;line-height: normal;position: relative;}
.vis_search fieldset>div:after{position: absolute;content: "";width: 10px;height: 6px;background: url("/images/common/common_ico.png") center -782px;right: 4px;top: 47px;display: block;}
.vis_search .sch_keyword{width: calc(100% - 130px);padding: 0;}
.vis_search .sch_keyword:after{display: none;}
.vis_search input[type="text"]{width: calc(100% - 110px);height: 40px;}
.vis_search button{width: 102px;height: 102px;background-position: center -313px;margin: 0 0 0 auto;}
.favorite ul{display: flex;flex-wrap: wrap;}
.favorite{margin: -80px 20px 0;}
.favorite li{width: calc(100%/6);}
.experts .card_slide>ul{gap: 0;}
.experts .card_slide ul li{padding: 0 15px;}
section.community{padding: 60px 0;}
.community .col2{display: flex;flex-wrap: wrap;gap: 40px;margin-bottom: 40px;}
.alim_box{width: 507px;}
.noti_container{width: calc(100% - 547px);margin: 0;justify-content: flex-end;position: relative;padding: 0;}
.noti_container .bbs_tab{margin: 0;justify-content: flex-end;}
.noti_container .bbs_tab .more{position: static;}
.noti_container .bbs_box{margin: 20px 0 0;padding: 0;}
.noti_container .bbs_box ul{gap: 30px;}
.noti_container .bbs_box li{width: calc((100% - 30px)/2);}
.noti_container .bbs_box li a{gap: 10px;padding: 23px 30px;}
.noti_container .photo li .text{padding: 24px 20px;}
.noti_container .notice li strong{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;height: 3.0em;white-space: inherit;}
.noti_container .photo li a{padding: 0;}
.noti_container .photo li .thumb{height: 200px;}
.hongbo .banner_slide ul{gap: 30px;}
.hongbo .banner_slide li{width: calc((100% - 60px)/3);}
}
@media (max-width: 1440px) {
.noti_container .photo li:nth-child(n+3){display: none;}
}

/* wide */
@media (min-width: 1440px) {
.main a{transition: .3s;}
.main h2{font-size: 40px;margin-bottom: 40px;}
.bbs_tab li a{font-size: 20px;}
.bbs_tab li a:hover, .bbs_tab li a:focus{font-weight: 700;}
.bbs_tab, .bbs_tab ul{gap: 40px;}
.bbs_tab .more a:hover, .bbs_tab .more a:focus{background: var(--tit_black);color: var(--white);}
.main a:hover img, .main a:focus img{transform: scale(1.1);transition: .5s;}

.favorite{display: flex;flex-wrap: wrap;padding: 24px 60px;align-items: center;gap: 80px;max-width: 1600px;margin: -90px auto 0;}
.favorite h2{margin: 0;display: flex;flex-direction: column;font-size: 24px;}
.favorite ul{flex-grow: 1;}
.favorite li a:before{width: 100px;height: 100px;}
.favorite li a:after{top: 30px;}
.favorite li a:hover, .favorite li a:focus{font-weight: 700;}
.favorite li a:hover:before, .favorite li a:focus:before{box-shadow: 0 0 10px rgba(17,114,241,.3);transform: rotateY(180deg);transition: .3s;}
section.support:before{width: 333px;height: 342px;top: 35px;right: -70px;}
.jiwon{padding: 100px 0 90px;}
.jiwon .bbs_tab .more{position: static;}
.jiwon .bbs_box{padding-bottom: 0;}
.jiwon .bbs_box ul{gap: 30px;}
.jiwon .bbs_box li{width: calc((100% - 60px)/3);}
.jiwon .bbs_box li a{background: rgba(255,255,255,.5);padding: 30px 20px;}
.jiwon .bbs_box li a:hover, .jiwon .bbs_box li a:focus{background: var(--white);border-color: var(--orange);}
.jiwon .bbs_box li strong{margin: 5px 0 15px;}
.calendar{padding: 25px 0;}
.calendar .main_wrap{display: flex;flex-wrap: wrap;gap: 40px;align-items: center;}
.calendar .tit h2{font-size: 24px;margin-bottom: 20px;}
.calendar .tit p{display: block;}
.calendar .cal_box{display: flex;flex-wrap: wrap;gap: 30px;flex-grow: 1;}
.calendar .month{position: static;flex-direction: column;align-items: center;width: 100px;height: 100px;justify-content: center;}
.calendar .month strong{font-size: 40px;font-weight: 900;}
.calendar .month strong:after{display: none;}
.cal_box ul{width: auto;gap: 40px;padding: 10px 0 0;align-items: center;flex-grow: 1;}
.cal_box li{font-size: 28px;}
.cal_box li span{display: block;font-size: 20px;}
.cal_box p{margin: 0;display: flex;align-items: center;}
.cal_box p a:hover, .cal_box p a:focus{background: var(--white);color: var(--blue);}

.product h2{text-align: left;}
.product .card_slide ul{gap: 25px;}
.product .more{position: absolute;right: 80px;top: 15px;}

section.experts{padding: 100px 0 50px;}
.experts>div{padding: 0;}
.experts .control{padding: 0 80px;margin: 70px auto;}
.experts .bbs_tab .more{position: static;}
.experts .card a:hover, .experts .card a:focus{box-shadow: 0 5px 20px rgba(17,114,241,.3);}
section.community{padding: 100px 0 120px;}
.community h2{font-size: 24px;margin-bottom: 20px;}
.alim_box h2{font-size: 24px;margin-bottom: 20px;}
.noti_container .bbs_box li a:hover, .noti_container .bbs_box li a:focus{border-color: var(--orange);}
.noti_container .photo li{width: calc((100% - 60px)/3);}
.member_list h2{font-size: 20px;margin: 0;}
.member_list .main_wrap{display: flex;flex-wrap: wrap;align-items: center;/*gap: 40px;*/gap:24px;}
.member_list .list_slide{margin: 0;/*display: flex;flex-wrap: wrap;flex-direction: row-reverse;align-items: center;gap: 40px;width: auto!important;*/ flex: 1;min-width: 0; overflow:hidden;}
/*.member_list .list_slide ul{width: auto!important;}*/
/*.member_list .list_slide ul, .member_list .list_slide li{gap: 40px;}*/.member_list .list_slide li{gap:40px;}
.member_list .list_slide li a{font-size: 18px;}
.member_list .list_slide li a:hover, .member_list .list_slide li a:focus{text-decoration: underline;}
.member_list .control{position: static;flex-shrink: 0;}
}
@media (min-width: 1600px) {
.bbs_tab{margin-bottom: 60px;}
.calendar .main_wrap{position: relative;padding: 0 40px;}
.cal_box:after{width: 149px;height: 195px;bottom: 35px;left: -140px;}
.calendar .cal_box{gap: 40px;}
.product .more{right: 0;}
.experts .card_slide>ul{padding: 0;}
.experts .card{width: calc((100% - 120px)/5);}
.experts .control{gap: 40px;max-width: 1600px;padding: 0;}

.quick_link{display: block;position: fixed;right: 1.5vw;top: 50%;transform: translateY(-50%);z-index:1;}
.quick_link>div{border-radius: 12px;background: rgba(255,255,255,.8);backdrop-filter: blur(3px);box-shadow: 0 0 10px rgba(0,0,0,.1);overflow: hidden;width: 90px;text-align: center;}
.quick_link li a{display: flex;flex-direction: column;justify-items: center;align-items: center;padding: 20px 0;gap: 10px;word-break: keep-all;line-height: 1.2;}
.quick_link li a:before{display: inline-flex;width: 30px;height: 30px;content: "";background: url("/images/main/quick_ico.png") no-repeat;}
.quick_link li:nth-child(2) a:before{background-position: center -30px;}
.quick_link li:nth-child(3) a:before{background-position: center -60px;}
.quick_link li:nth-child(4) a:before{background-position: center -90px;}
.quick_link li a:hover, .quick_link li a:focus{background: var(--white);}
.quick_link p a{display: block;padding: 10px 0;background: var(--orange);color: var(--white);font-size: 14px;font-weight: 700;}
.quick_link p a:hover, .quick_link p a:focus{background: var(--text_black);}
}

/* 2026-09-07 : 메인 컨텐츠 순서 개편 보정
   순서 : hero > product > community.alim_sec > support.cal_sec > support > experts > community.hongbo_sec > member_list
   배경은 #fafafa <-> var(--bg_blue) 를 그라데이션으로 이어 섹션 경계가 드러나지 않게 한다. */
section.support.cal_sec:before{display: none;}
.community.alim_sec .col2{margin-bottom: 0;}

section.product{background: linear-gradient(to bottom, #fafafa 0%, var(--bg_blue) 100%);}
section.community.alim_sec{background: var(--bg_blue);}
section.support.cal_sec{background: linear-gradient(to bottom, var(--bg_blue) 0%, #fafafa 100%);}
section.experts{background: linear-gradient(to bottom, #fafafa 0%, var(--bg_blue) 25%, var(--bg_blue) 100%);}
section.community.hongbo_sec{background: linear-gradient(to bottom, var(--bg_blue) 0%, #fafafa 100%);}
