@charset "UTF-8";
#skip{position:absolute;top:-1px;left:0;width:100%;background-color:#333;z-index:999999}
#skip a{position:absolute;top:0;left:0;width:100%;padding:10px 25px;margin-top:-100px;background:#fff;white-space:nowrap;text-align:center;line-height:1;z-index:1000000000}
#skip a:link{text-decoration:none;color:#333}
#skip a:focus{margin-top:0;text-decoration:underline;color:#000}
html, body {overscroll-behavior-y: none }
img{max-width:100%}
body{background:hsl(0, 0%, 100%);color:#595959;}
body::-webkit-scrollbar {width:0.9rem/* 스크롤바의 너비 */}
body::-webkit-scrollbar-thumb {height:30%;/* 스크롤바의 길이 */background:rgba(126, 131, 156, 0.65);border:0.1rem solid rgba(83, 83, 83, 0.15); /* 스크롤바의 색상 */border-radius:1rem}
body::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.15)/*스크롤바 뒷 배경 색상*/}
body.scrolloff{overflow:hidden}
.wrap{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
#container{flex:1 0 auto;}
button:focus{border: 1px solid #0281f7;}

pre {border-radius: 20px;background-color: #E5E5E5;color: #2A2A2A;font-size: 1.5rem;margin-top: 1.5rem;letter-spacing: -0.75px;line-height: 1.3; min-width: 0;word-wrap: break-word;}

/* header */
.header-box{height: 9.2rem}
header{position: fixed;top: 0;left: 0; width: 100%; z-index: 1998; background-color: #fff; transition: all 0.35s}
header.on{border-bottom: 1px solid #DEDEDE;box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1)}
.header-wrap{border-bottom: 1px solid #DEDEDE; background-color: #fff}
.header-logo{position: absolute; top: 2.9rem; left: 8rem}
.header-logo > a{font-size: 2.2rem; font-weight: 600; color: #091151}
.header-logo > a >em{font-weight: 700}
.nav-list{display: flex; align-items: center; justify-content: center; background-color: #fff}
.nav-list > li.nav-item{position: relative}
.nav-list > li.nav-item > a{position: relative; display: block; font-size: 1.8rem; font-weight: 600; color: #2a2a2a; padding: 3.2rem 0; margin: 0 5rem; transition: all .28s}
.nav-list > li.nav-item:hover > a{color: #4466E3;}
.nav-list > li.nav-item > a:focus{color: #4466E3;}
.nav-list > li.nav-item > a:after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2rem; background-color: #4466E3; transition: all .28s; transform: scaleX(0)}
.nav-list > li.nav-item:hover > a:after{transform: scaleX(1)}
.nav-list > li .depth2{position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; padding: 2rem 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.28s}
.nav-list > li .depth2.on{opacity: 1; visibility: visible}
.nav-list > li .depth2 > li{text-align: center; padding: 0.8rem 0}
.nav-list > li .depth2 > li > a{font-size: 1.6rem; font-weight: 400; color: #5C6670}
.nav-list > li .depth2 > li > a:hover{font-weight: 600; color: #4466E3}
.nav-list > li .depth2 > li > a:focus{font-weight: 600; color: #4466E3}

.header-quick{position: absolute; top: 3.6rem; right: 8rem; margin-left: auto; display: flex}
.login-list{display: flex; align-items: center}
.login-list > li.login-item{margin-left: 1rem; position: relative}
.login-list > li.login-item > a{position: relative; display: block; padding: 0 1rem 0 3rem; font-size: 1.4rem; color: #5C6670; font-weight: 500}
.login-list > li.login-item > a >img{position: absolute; top: 50%; left: 0; transform: translateY(-50%)}
.login-list > li.login-item > a:after{content: ''; width: 0.1rem; height: 1.2rem; position: absolute; top: 50%; transform: translateY(-50%); right: 0; background-color: #DEDEDE}
.login-list > li.login-item:last-child > a:after{display: none}
.menu-btn{display: none; position: relative; top: 0; left: 0; width: 2.4rem; height: 1.7rem;margin-left: 2rem;z-index:2000}
.menu-btn button.gnb-all-btn{width: 100%; height: 100%; padding: 0; position: absolute;  top: 0; right: 0; cursor: pointer}
.menu-btn button.gnb-all-btn span{position: absolute; top: 0; left: 0; width: 100%; height: 0.2rem; background-color: #5C6670;transition:all .4s ease-out; text-indent: -9999999px;}
.menu-btn button.gnb-all-btn span:nth-child(2){top: 0.7rem}
.menu-btn button.gnb-all-btn span:nth-child(3){width: 70%; bottom: 0; top: unset}
.menu-btn.active button.gnb-all-btn span{transform: translateY(0.8rem) rotate(-45deg)}
.menu-btn.active button.gnb-all-btn span:nth-child(2){display:none}
.menu-btn.active button.gnb-all-btn span:nth-child(3){width:100%;transform: translateY(-00.6rem) rotate(45deg)}

.rnb{position: absolute; top: 0; left: 100%; background-color: #fff; z-index: 1999; width: 100%; height: 100vh; transition: all 0.6s}
.rnb.active{left: 0; right: unset}
.quick-login{padding: 2rem 2rem 4rem}
.quick-list{display: flex; align-items: center; justify-content: flex-end;margin-right: 4rem}
.quick-list > li > a{position: relative; display: flex; padding: 0 0.7rem}
.quick-list > li > a::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 0.1rem; height: 1.8rem; background: #DEDEDE}
.quick-list > li:last-child > a::after{display: none}
.rnb-nav{height: calc(100vh - 8.4rem); overflow: auto}
.mnav-list {padding: 0 2rem;margin-top: 6rem;}
.mnav-list > li > a{position: relative; display: block; padding: 2rem;font-size: 2rem;color: #202020;border-bottom: 1px solid #E1E1E1;font-weight: 700; transition: 0.25s}
.mnav-list > li > a::after{content: ''; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%) rotate(45deg); border: 2px solid #000; border-bottom: none; border-left: none; width: 1rem; height: 1rem; transition: 0.25s}
.mnav-list > li > a.active{color: #1C5DB1}
.mnav-list > li > a.active::after{transform: translateY(-50%) rotate(135deg); border: 2px solid #1C5DB1; border-bottom: none; border-left: none}
.mnav-list > li .mnav-depth2{display: none; border-bottom: 1px solid #E1E1E1; padding: 2.3rem}
.mnav-list > li .mnav-depth2 > li > a{display: block; padding: 0.7rem 0; font-size: 1.8rem}


/* footer */
footer{width:100%;padding:2.5rem 0 2.5rem;background:#313842;border-top-width:1px;border-color:#E1E1E1;border-top-style:solid}
.footer-inner{max-width:124rem;margin:0 auto}
.footer-logo{display:inline-block;align-self:flex-start;margin-top:1rem;width:17.5rem;height:3.8rem}
.footer-logo img{width:100%}
.foot_menu{font-weight:500;margin-top:0.8rem}
.foot_menu a{margin-right:2rem; color: #fff}
.foot_menu a.indivisual{font-weight:600;color:#1C5DB1}
.foot_menu a:last-child{margin-right:0}
.foot-content{flex:1}
address{margin-top:0.8rem;letter-spacing:-0.07rem;font-size:1.5rem;color:#fff}
address span{position:relative;}
address span em{margin-right:0.5rem;font-weight:400;color:#fff}
/* 2023-11-07 */
address span + span:after{content:'';position:absolute;top:0.1rem;left:-1.1rem;width:0.1rem;height:1.6rem;background:#E1E1E1}
address span:nth-of-type(1){margin-left:0;margin-right:0.2rem}
address span:nth-of-type(2){margin-left:1.5rem}
address span{margin:0 1rem}
address .copyright{margin-top:0.3rem;font-weight: 400;color:rgba(255, 255, 255, 0.70)}
address .copyright br{display:none}

/* top-btn */
/*20231107*/
.btTop{position:fixed;right:5rem;bottom:11rem;opacity: 0;pointer-events: none;width:4.6rem;height:4.6rem;background: #F7F7F7 url(../images/common/arrow_top.svg) center no-repeat;background-size:1.4rem 1rem;border:0.1rem solid #CFDAE2;border-radius:50%;cursor: pointer;transition: opacity .3s;z-index: 50;box-shadow: 0.1rem 0.4rem 0.12rem 0 rgba(34, 34, 34, 0.08);vertical-align:middle;text-align:center}

.btTop span{display:inline-block;font-size:0}
.btTop img{width:100%}
.btTop.active {display: block;opacity: 1;pointer-events: visible}

/* drop-down */
.dropdown-select{background-color: #F5F5F5;border-bottom: 1px solid #E7E7EE;width: 100%;}
.location-wrap{height: 4rem; max-width: 124rem; margin: 0 auto}
.location-inner{ position: relative; height: 100%}
.home_btn{position: absolute;width: 5rem;height: 4rem;background: url(../images/sub/home_btn.svg)no-repeat center;background-size:1.8rem 1.8rem;border-left: 1px solid #E7E7EE;border-right: 1px solid #E7E7EE;text-indent: -99999px}
.location-drop-wrap{display: flex; align-items: center; padding-left: 5rem; height: 100%}
.location-drop{position: relative;height: 100%;border-right: 1px solid #E7E7EE}
.location-drop > a{position: relative;display: flex;align-items: center;height: 100%;padding: 0 3rem 0 2rem;min-width: 23rem;color: #5C6670;font-size: 1.6rem}
.location-drop > a:after{content: '';position: absolute;top: 50%;transform: translateY(-50%) rotate(0deg);right: 2rem;background: url(../images/common/sel_icon.svg)no-repeat center;width: 1rem;height: 1.1rem; transition: 0.25s;background-size: contain}
.location-drop > a.active:after{transform: translateY(-50%) rotate(180deg)}
.location-drop-bx{display: none; z-index: 99; position: absolute; top: 100%; left: 0; width: 100%; background-color: #F5F5F5; border: 1px solid #E7E7EE}
.location-2depth-list{padding: 1rem}
.location-2depth-list > li > a{padding: 0.5rem 1.5rem; display: block; word-break: break-all; line-height: 1.2;color: #5C6670}

/* main-content */
.main-visual-inner{position: relative; padding-bottom: 31%}
.visual-img-frame{position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden}
.visual-img-frame::after{content: '';position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%)}
.visual-img-frame.visual01{background-image: url(../images/main/main-visual.png)}
.visual-text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; z-index: 9}
.visual-text h2{font-size: 3.6rem; font-weight: 600; color: #fff}
.visual-text p{font-size: 1.6rem; font-weight: 400; color: #fff; margin-top: 1.5rem}
.swiper-pagination.visual-pagination .swiper-pagination-bullet{width: 0.8rem; height: 0.8rem; background: rgba(255, 255, 255, 0.80); transition: 0.25s; opacity: 1}
.swiper-pagination.visual-pagination .swiper-pagination-bullet-active{width: 4rem; height: 0.8rem; background: #568AE5; border-radius: 4px}
.swiper-button-prev.visual-prev{left: 8rem; width: 3rem; height: 3rem}
.swiper-button-prev.visual-prev::after{content: ''; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.70); transform: rotate(45deg); border-top: none; border-right: none}
.swiper-button-next.visual-next{right: 8rem; width: 3rem; height: 3rem}
.swiper-button-next.visual-next::after{content: ''; width: 100%; height: 100%; border: 2px solid rgba(255, 255, 255, 0.70); transform: rotate(45deg); border-bottom: none; border-left: none}
.content-text{padding: 7rem 0 11.5rem; text-align: center}
.content-text h2{font-size: 2.8rem; color: #2A2A2A; font-weight: 600}
.content-text p{font-size: 1.6rem; color: #5C6670; margin-top: 1rem}
.inner-page{position: relative; bottom: 7rem; left: 50%; transform: translateX(-50%); width: 10.3rem;z-index: 97}
.swiper-pagination.contnet-pagination{bottom: 50%; transform: translateY(-43%)}
.swiper-button-prev.contnet-prev{left: 0; top: 50%; transform: translateY(-50%); width: 0.7rem; height: 1.4rem;background: url(../images/main/swiper-arr-prev.svg)no-repeat center;z-index: 98}
.swiper-button-prev.contnet-prev::after{display: none}
.swiper-button-next.contnet-next{right: 0; top: 50%; transform: translateY(-50%); width: 0.7rem; height: 1.4rem;background: url(../images/main/swiper-arr-next.svg)no-repeat center;z-index: 98}
.swiper-button-next.contnet-next::after{display: none}
.swiper-pagination.contnet-pagination .swiper-pagination-current{color: #2A2A2A; font-weight: 600}
.procedure-guide{position: relative; width: 100%; height: 100%; height: 32.4rem; background: url(../images/main/content-visual.png)no-repeat center; padding: 5rem 0}
.procedure-guide::after{content: ''; position: absolute; bottom: 12rem; width: 100%; height: 0.1rem; background: #fff}
.procedure-guide-tit{text-align: center; font-size: 2.8rem; color: #fff; font-weight: 600}
.guide-line-wrap{max-width: 124rem; margin: 3.5rem auto 0; display: flex; align-items: center}
.guide-box{flex: 1}
.guide-icon{width: 5.8rem; height: 5.8rem; background: #091151; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem}
.guide-text{position: relative; padding-top: 2rem}
.guide-text::before{content: '';position: absolute; top: -0.6rem; left: 0; width: 1rem; height: 1rem; border: 1px solid #fff; background: #091151; z-index: 99; border-radius: 50%}
.step-tit{font-size: 1.4rem; font-weight: 400; color: #fff}
.step-name{font-size: 2rem; font-weight: 500; color: #fff}
.main-content-inner{max-width: 124rem; margin: 0 auto; padding-bottom: 8rem}
.flex-box{display: flex; flex-wrap: wrap; margin-top: 7rem}
.link-box{display: flex; flex-direction: column; justify-content: space-between; width: calc(25% - 3rem); padding: 4.5rem 4rem 3.5rem; background: #F6F6F8; margin-right: 3rem}
.link-box:nth-child(2n){margin-right: 6rem}
.link-box:last-child{margin-right: 0}
.link-tit span{display: block; font-size: 2.2rem; font-weight: 500; color: #000}
.link-tit em{font-size: 1.4rem; color: #568AE5; font-weight: 400}
.link-icon-wrap{display: flex; align-items: center; margin-top: 1.5rem}
.link-icon{margin-left: auto}
.bord-list-box{position: relative; width: calc(50% - 3rem); margin-right: 6rem}
.bord-list-box:last-child{margin-right: 0}
.bord-list-tit{padding-bottom: 2rem; border-bottom: 2px solid #E7E7EE; font-size: 2.8rem; font-weight: 600; color: #2A2A2A}
.bord-list > li{border-bottom: 1px solid #E7E7EE}
.bord-list > li > a{position: relative; display: block; padding: 1.7rem 11rem 1.7rem 2rem}
.bord-list > li > a::before{content: ''; position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); width: 0.4rem; height: 0.4rem; background: #5C6670}
.bord-list > li > a > em{display: block; font-size: 1.8rem; color: #2A2A2A; text-overflow: ellipsis; overflow: hidden; white-space: nowrap}
.bord-list > li > a > span{position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); font-size: 1.5rem; color: #5C6670}
.more-btn{position: absolute; top: 1.3rem; right: 0; cursor: pointer}
.related-site-wrap{margin-top: 7rem}
.related-site-tit{margin-bottom: 2.2rem; font-size: 2.8rem; font-weight: 600; color: #2A2A2A}
.site-box-wrap{display: flex; flex-wrap: wrap}
.site-box{display: flex; align-items: center; justify-content: center; width: calc(33.3333% - 2rem); margin-right: 3rem; background: #F6F6F8; padding: 1.6rem; text-align: center}
.site-box:last-child{margin-right: 0}

/* 2023-11-07 */
.chat-area{position: fixed; bottom: 16rem; right: 3rem; z-index: 50}
button.chat-bot-btn{cursor: pointer; border: none}
.chat-bx{ position: absolute; bottom: 10rem; right: 1rem; width: 36rem; height: 52rem; transition: all .5s; transform-origin: 100% 100%; transform: scale(0); opacity: 0}
.chat-area.active .chat-bx{ transform: scale(1); opacity: 1}
.chat-bx-inner{width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 20px; background-color: #fff; overflow: hidden; filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.08))}
.chat-bx-header{background-color: #2A2A2A; display: flex; align-items: center; padding: 1.5rem 2rem}
.chat-bx-header h4{font-size: 2rem; color: #fff; font-weight: 700}
.close-chat-btn{width: 1.6rem; height: 1.6rem; background: url(../images/main/chat-close.svg)no-repeat center; margin-left: auto; text-indent: -99999px; cursor: pointer}
.chat-bx-content{flex: 1; overflow-y: auto; padding: 2rem}
.chat-bx-content::-webkit-scrollbar {width: 0.7rem}
.chat-bx-content::-webkit-scrollbar-thumb {background-color: #929292; border-radius: 20px}
.chat-bx-content::-webkit-scrollbar-track {background-color: #E5E5E5; border-radius: 20px}
.default-area{display: flex; align-items: center; flex-direction: column}
.chat-icon-bx{position: relative; width: 8rem; height: 8rem; background: url(../images/main/default-icon.svg)no-repeat center; display: flex; align-items: center; justify-content: center}
.chat-icon-bx img{width: 6rem; height: 5.4rem}
.default-tit{font-size: 2rem; color: #2A2A2A; font-weight: 600; margin-top: 1.7rem}
.user-chat{margin-top: 1.5rem}
.qna-bx{padding: 1rem 1.5rem; border-radius: 20px; background-color: #E5E5E5; color: #2A2A2A; font-size: 1.5rem; margin-top: 1.5rem; letter-spacing: -0.75px; line-height: 1.3; min-width: 0; word-wrap: break-word}
.qna-bx.user{background-color: #D3E5FF}
.bold{font-weight: 600}
.qna-bx > span{display: flex}
.qna-bx > span > i{ text-overflow: ellipsis; white-space: nowrap;  overflow: hidden; margin-right: 0.5rem}
.qna-bx a{flex: none; color: #4466E3; text-decoration: underline}
.bot-block-bx{display: flex; justify-content: flex-start}
.user-block-bx{display: flex; justify-content: flex-end}
.explane-cont{margin: 0.5rem 0}
.chat-bx-footer{padding: 1rem; border-top: 1px solid #E7E7EE}
.chat-bx-footer .chat-input{height: 4rem; background-color: #E5E5E5; border-radius: 20px; color: #5C6670; font-size: 1.5rem; padding: 1.1rem 2rem}

@media screen and (max-width: 1600px) {
    .nav-list {
        padding-left: 20rem;
    }
    .location-drop-wrap{margin-top: 1rem}


}

@media screen and (max-width: 1500px){
    /* header */
    .header-box{height: 6.5rem}
    .header-logo{top: 2.2rem; left: 4rem; flex-shrink: 0;}
    .header-logo > a{font-size: 2rem}
    .header-quick{right: 4rem}
    .login-list > li.login-item > a > span{display: none}
    .nav-list > li.nav-item > a{padding: 2.5rem 0; margin: 0 2.5rem}
    .nav-list > li.nav-item > a{font-size: 1.6rem}
    .nav-list > li .depth2 > li{padding: 0.6rem 0}
    .nav-list > li .depth2 > li > a{font-size: 1.4rem}
}
@media screen and (max-width: 1200px) {
    .nav-list {
        display: flex;
        justify-content: flex-end;
        padding-right: 3rem;
        padding-left: 0rem;
    }
}
@media screen and (min-width: 1024px){
    .rnb{display: none}
}

@media screen and (max-width: 1024px){
    button:focus{ border: 1px solid #0281f7;}
    /* header */
    .header-box{height: 5.5rem}
    .header-wrap{display: flex; align-items: flex-end; padding: 2.3rem 2rem;flex-direction: column;}
    #menu{display: none}
    .menu-btn{display: block;margin-left: 0;}
    .header-quick{position: relative; top: 0; left: 0}
    .login-list{display: none}
    .location-drop{width: 100%}
    .location-drop > a{font-size: 1.4rem}
    .location-drop > a:after{right: 1.5rem}
    .location-drop > a{min-width: unset; flex: 1}
    .location-2depth-list > li > a{font-size: 1.3rem; padding: 0.5rem}
    .dropdown-select{background-color: #F5F5F5;border-bottom: 1px solid #E7E7EE;width: 100%;    padding-top: 0rem;}

    /* footer */
    footer{padding: 2rem}
    .footer-logo{width: 12.6rem}
    address span{font-size: 1.3rem}
    address span:nth-of-type(1){display: block; margin-right: 0}
    address span:nth-of-type(2){margin-left: 0}
    address span:nth-of-type(2):after{display: none}
    address .copyright{font-size: 1.3rem; margin-top: 0.6rem}
    address span + span:after{top: 0.1rem; height: 1.3rem}

    .btTop{width:3.2rem;height:3.2rem;right:2rem;bottom: 21.3rem;background-size:1.2rem 1rem}

    /* main-content */
    .visual-text h2{font-size: 3rem}
    .visual-text p{font-size: 1.4rem}
    .procedure-guide::after{display: none}
    .procedure-guide{height: unset; background: url(../images/main/content-visual-mb.png)no-repeat center; background-size: cover}
    .guide-text::before{display: none}
    .guide-line-wrap{max-width: 100%; flex-wrap: wrap; margin: 3.5rem 0 0; padding: 0 2rem}
    .guide-box{flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;  width: 33.3333%; text-align: center; margin-bottom: 5rem}
    .guide-box:nth-last-child(-n + 2){margin-bottom: 0}
    .guide-icon{margin-bottom: 0}
    .step-name{font-size: 1.8rem}
    .main-content-inner{padding: 0rem 2rem 7rem}
    .flex-box{margin-top: 3.5rem}
    .link-box{width: calc(50% - 0.8rem); margin-right: 1.5rem; margin-bottom: 1.5rem; padding: 3rem 2rem}
    .link-box:nth-child(2n){margin-right: 0}
    .link-tit span{font-size: 1.8rem}
    .link-icon-wrap{margin-top: 1rem}
    .link-icon{display: flex; justify-content: flex-end}
    .link-icon img{width: 70%}
    .bord-list-box{width: 100%; margin-right: 0; margin-bottom: 4rem}
    .bord-list-box:last-child{margin-bottom: 0;}
    .bord-list-tit{font-size: 2.2rem;}
    .bord-list > li > a{padding: 1.5rem 11rem 1.5rem 2rem}
    .bord-list > li > a > em{font-size: 1.6rem}
    .more-btn{top: 0.7rem}
    .related-site-wrap{margin-top: 3.5rem}
    .related-site-tit{font-size: 2.2rem}
    .site-box{width: 100%; margin-right: 0; margin-bottom: 1.5rem}

    /* 2023-11-07 */
    .chat-area{display: none;}
}


@media screen and (max-width: 850px){
    .main-visual-inner{padding-bottom: 96%}
    .visual-img-frame.visual01{background-image: url(../images/main/main-visual-mb.png)}
    .visual-text{padding: 0 5.8rem}
    .visual-text h2{font-size: 2.6rem}
    .visual-text p br{display: none}
    .swiper-button-prev.visual-prev{left: 2rem; width: 1.5rem; height: 1.5rem}
    .swiper-button-next.visual-next{right: 2rem; width: 1.5rem; height: 1.5rem}
    .content-text{padding: 5rem 3rem 10rem}
    .content-text h2{font-size: 2.4rem}
    .content-text p{font-size: 1.4rem}
    .inner-page{bottom: 5rem}
    .guide-box{width: 50%}
    .guide-box:nth-last-child(-n + 2){margin-bottom: 5rem}
    .guide-box:last-child{margin-bottom: 0}
    .visual-next, .visual-prev{top: 57%}
}
@media screen and (max-width: 770px) {
    .nav-list > li.nav-item > a {
        white-space: nowrap;
    }
}
@media screen and (max-width: 750px) {
    .nav-list {
        display: flex;
        justify-content: flex-end;
        padding-right: 1rem;
    }
    .nav-list > li.nav-item > a {
        white-space: nowrap;
        font-size: 1.4rem;
        margin: 0 1rem;
        padding: 2rem 0;
    }
    .header-wrap{display: flex; align-items: flex-end; padding: 2.3rem 2rem;flex-direction: column;}
    .nav-list > li .depth2 > li > a {
        font-size: 1.1rem;
    }
    .dropdown-select{background-color: #F5F5F5;border-bottom: 1px solid #E7E7EE;width: 100%;    padding-top: 0rem;}
}
@media screen and (max-width: 500px) {
    body{min-width: 320px;}
    #menu {display: none}
    .header-box{height: 4.5rem}
    .header-wrap{display: flex; align-items: flex-end; padding: 2.3rem 2rem;flex-direction: column;}
    .nav-list{display: none}

    .menu-btn{display: block;margin-left: 0;}
    .visual-text h2 {font-size: 2.0rem;}
    .dropdown-select {padding-top: 1rem;}

}


@media screen and (max-width: 360px){
    .location-drop > a{font-size: 1.2rem; padding: 0 2rem 0 1rem;}
    .location-drop > a:after{right: 0.8rem;}
    .visual-text h2{font-size: 1.9rem}
    .visual-text{padding: 0 4.5rem}
    .visual-text p{font-size: 1.3rem}
    .procedure-guide-tit{font-size: 2.3rem}
    .step-name{font-size: 1.6rem}
    .content-text h2{font-size: 2rem}
    .guide-box{margin-bottom: 3rem}
    .link-box{padding: 2rem 1.5rem}
    .link-tit span{font-size: 1.4rem}
    .link-icon img{width: 60%}
    .link-tit em{font-size: 1.2rem}
}

/* 교육자료 제목 */
.post-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* 교육자료 본문 */
.post-content {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    white-space: pre-line; /* 줄바꿈 유지 */
}

/*교육자료 첨부파일*/
#file-list-section {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background-color: #f3f4f6; /* 연한 회색 */
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

#file-list-section a {
    display: block;
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

#file-list-section a:hover {
    /*background-color: #e5e7eb;*/
    text-decoration: underline;
}

#file-list-section a::before {
    content: "📎 ";
}

#share-btn-section {
    margin: 11px;
}

/* 공유하기 버튼 - 아웃라인 스타일 */
.share-button-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    /*transition: all 0.3s ease;*/
}

.share-button-outline:hover {
    background-color: #667eea;
    color: white;
}