@media screen and (max-width:1024px) {

/* header */
#header{position: fixed;left: 0;top: 0;width: 100%;z-index: 2000;transition:.3s;}
#header .inner{display: flex;align-items: center;justify-content: space-between;height: 80px;width: 100%;}
#header h1 a{display: block;width: 154px;height: 38px;background: url(../images/main/main_logo01.png);background-size: cover;transition:.3s;}
#header .btn_box{display: flex;align-items: center;gap:20px;}
#header .navi_btn{display: block; position: relative;width: 22px;height: 19px;}
#header .navi_btn span{position: absolute; width: 100%;height: 2px;background: #000;left: 0;transition: .3s;}
#header .navi_btn span:nth-child(1){top: 0;}
#header .navi_btn span:nth-child(2){top: 50%;transform: translate(-50% , -50%);left: 50%;}
#header .navi_btn span:nth-child(3){bottom: 0;}
#header .navi_btn.on span{background: #000;}
#header .navi_btn.on span:nth-child(1){top: 50%;transform: translateY(-50%) rotate(45deg);}
#header .navi_btn.on span:nth-child(2){opacity: 0;}
#header .navi_btn.on span:nth-child(3){top: 50%;transform: translateY(-50%) rotate(-45deg);}
#header .btn_box a{font-size: 15px;color: #fff;transition: .3s;font-weight: 500;}
/* 태블릿/모바일: 헤더 아이콘은 드로어로 이동 — 인라인 style·JS 제어를 이기기 위해 !important */
#header #user_menu_area, #header #auth_area{display: none !important;}



/* gnb */
.menu_box{position: absolute;display: none; left: 0;width: 100%;top: 0;align-items: center;justify-content: center;}
.gnb{display: flex;}
.gnb > li > a{display: block;line-height: 100px;text-align: center;width: 190px;font-size: 17px;transition: .3s;font-weight: 700;color: #fff;}
.gnb > li .fade_box{display: none; position: absolute;width: 100%; left: 0;top: 100%;background: #fafafa;}
.gnb > li ul{display: flex;width: 100%;justify-content: center;gap:50px;}
.gnb > li ul li a{position: relative; display: block;line-height: 100px;color: #232323;font-weight: 600;}
.gnb > li ul li a:hover{color: var(--ma_c01);}
.gnb > li ul li a:after{content:'';position: absolute;right: -26px;top: 50%;transform: translateY(-50%);width: 1px;height: 16px;background: #232323;}
.gnb > li ul li:last-child a:after{display: none;}



/* 네비게이션 */
#navigation{display: none; position: fixed;left: 0;top: 80px;z-index: 1000;width: 100%;height: calc(100vh - 80px);background: rgba(0,0,0,.5);}
#navigation .navi_box{position: absolute; width: 50%;right: 0;top: 0;background: #fff;height: 100%;display: flex;flex-direction: column;}
#navigation .navi_box > ul{flex: 1 1 auto;overflow-y: auto;}
/* 드로어 상단: 접속자 정보 (프로필 + 퀵버튼) */
#navigation .navi_box .drawer_user{flex-shrink: 0;padding: 20px 16px;}
#navigation .navi_box .drawer_profile{display: flex;align-items: center;gap: 12px;margin-bottom: 14px;}
#navigation .navi_box .drawer_avatar{display: flex;align-items: center;justify-content: center;flex-shrink: 0; width: 44px;height: 44px;border-radius: 50%;background: #eef6fc;}
#navigation .navi_box .drawer_avatar i{font-size: 22px;color: #0479cc;}
#navigation .navi_box .drawer_name_line{display: flex;align-items: center;gap: 8px;min-width: 0;}
#navigation .navi_box .drawer_user_name{font-size: 17px;font-weight: 700;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#navigation .navi_box .drawer_user_type{flex-shrink: 0; font-size: 11px;font-weight: 600;font-style: normal;padding: 3px 9px;border-radius: 20px;color: #0479cc;background: rgba(0,191,246,.12);}
#navigation .navi_box .drawer_quick{display: flex;gap: 8px;}
#navigation .navi_box .quick_btn{position: relative;display: flex;align-items: center;justify-content: center;gap: 5px;flex: 1;height: 40px;border-radius: 8px;border: 1px solid #ddd;font-size: 14px;font-weight: 600;color: #333;}
#navigation .navi_box .quick_btn i{font-size: 15px;}
#navigation .navi_box .quick_btn.primary{background: #0d498c;border: none;color: #fff;}
#navigation .navi_box #drawer_cart_btn .red_dot{top: 6px;right: 10px;}
#drawer_cart_btn.active .red_dot{display: block !important;}
#navigation .navi_box .drawer_login_btn{display: flex;align-items: center;justify-content: center;gap: 6px;width: 100%;height: 44px;border-radius: 8px;background: #0d498c;color: #fff;font-size: 15px;font-weight: 700;}
/* 드로어 하단: 로그아웃 */
#navigation .navi_box .drawer_footer{flex-shrink: 0;padding: 15px 16px;border-top: 1px solid #ddd;}
#navigation .navi_box .drawer_logout_btn{display: flex;align-items: center;justify-content: center;gap: 6px;width: 100%;height: 46px;border-radius: 8px;border: 1px solid #ddd;background: #fafafa;font-size: 15px;font-weight: 600;color: #555;}
#navigation .navi_box > ul > li > a{position: relative; display: block;line-height: 60px;padding: 0 20px;border-top: 1px solid #ddd;font-size: 16px;}
#navigation .navi_box > ul > li > a:after{content:'';position: absolute;transition: .3s; right: 20px;top: 50%;transform: translateY(-50%);width: 12px;height: 8px;background: url(../images/main/navi_ico01.png);}
#navigation .navi_box > ul > li.on > a:after{transform:  translateY(-50%) rotate(180deg);}
#navigation .navi_box > ul > li > a.no_ico:after{display: none;}
#navigation .navi_box > ul > li:last-child > a{border-bottom: 1px solid #ddd;}
#navigation .navi_box > ul > li ul{display: none; background: #f8fafc;padding: 8px 12px;}
#navigation .navi_box > ul > li ul li a{display: flex;align-items: center;padding: 13px 12px;font-size: 15px;color: #555;border-radius: 8px;transition: .2s;}
#navigation .navi_box > ul > li ul li a:before{content:'';flex-shrink: 0;width: 4px;height: 4px;border-radius: 50%;background: #c5d3e0;margin-right: 10px;transition: .2s;}
#navigation .navi_box > ul > li ul li.on a{color: #0479cc;font-weight: 600;background: rgba(0,191,246,.08);}
#navigation .navi_box > ul > li ul li.on a:before{background: #0479cc;}


/* visual_wrap */
#visual_wrap{margin-top: 80px;}
#visual_wrap .inner{width: 100%;padding: 0;}
#visual_wrap .slide_box{position: relative;}
#visual_wrap ul li{position: relative; width: 100%;height: calc(100vh - 80px);border-radius: 0;overflow: hidden;}
#visual_wrap ul li > img{width: 100%;height: 100%;object-fit: cover;transition: 1s;}
#visual_wrap ul li.swiper-slide-active > img{transform: scale(1.03);}
#visual_wrap ul li .txt_box{position: absolute;left: 0%;top: 10%;opacity: 0;transition: .8s;}
#visual_wrap ul li.swiper-slide-active .txt_box{left: 7%;opacity: 1;}
#visual_wrap ul li .txt_box .txt01{font-size: 40px;font-family: 'Taenada';}
#visual_wrap ul li .txt_box .txt01 .c01{color: #0479cc;}
#visual_wrap ul li .txt_box .txt01 .c02{color: #61dcff;}
#visual_wrap ul li .txt_box .txt02{font-size: 55px;line-height: 1.2;margin: 10px 0 25px;font-family: 'Taenada';}
#visual_wrap ul li .txt_box .txt02 .c01{color: #00afff;}
#visual_wrap ul li .txt_box .txt02 .c02{color: #005c9d;}
#visual_wrap ul li .txt_box .txt02 .c03{color: #00bff6;}
#visual_wrap ul li .txt_box .txt03{color: #363636;font-size: 23px;margin-bottom: 40px;}
#visual_wrap ul li .txt_box a{display: flex;padding: 0 35px;align-items: center;height: 70px;font-size: 30px;border-radius: 70px;color: #fff;font-family: 'Taenada';background: #0d498c;border: 1px solid #000;width: fit-content;}
#visual_wrap ul li .txt_box a span{position: relative;top: 5px;}
#visual_wrap .visual_items{position: absolute;display: flex; left: 7%;bottom: 12%;z-index: 1000;align-items: center;gap:10px;}
#visual_wrap .visual_items .visual_num{display: flex;gap:8px;align-items: center;}
#visual_wrap .visual_items .visual_num span{font-size: 20px;font-weight: 800;}
#visual_wrap .visual_items .visual_num em{position: relative; display: block;width: 110px;height: 3px;background: rgba(0,0,0,.5);}
#visual_wrap .visual_items .visual_num em:after{content:'';position: absolute;left: 0;top: 0;width: 0;height: 100%;background: #000;}
#visual_wrap .visual_items .btn_box{position: relative;}
#visual_wrap .visual_items .btn_box div{cursor: pointer;}
#visual_wrap .visual_items .btn_box .play{display: none;}
#visual_wrap .visual_items .btn_box img{width: 12px;}
#visual_wrap .swiper-slide-active .visual_num em:after{animation: visAni01 5s linear forwards;}

@keyframes visAni01 {
    0%{width: 0;}
    100%{width: 100%;}
}

/* 공통 */
.main_tit{display: flex;justify-content: space-between;margin-bottom: 50px;}
.tit_st01{font-size: 50px;font-family: 'Taenada';}
.tit_st02{font-size: 50px;font-family: 'Taenada';text-align: center;margin-bottom: 60px;}
.tit_st02 span{color: #00bff6;}

a.btn_st01,
button.btn_st01{display: flex;align-items: center;justify-content: center;padding: 0 20px;height: 40px;border-radius: 40px; color: #fff;background: #000;font-size: 16px;font-weight: 700;width: fit-content;transition: .3s;}
a.btn_st01:hover,
button.btn_st01:hover{transform: scale(1.1);}
a.btn_st01.white,
button.btn_st01.white{background: #fff;border: 1px solid #000;color: #000;}
a.btn_st01.blue,
button.btn_st01.blue{background: #072e59;}


ul.list_st01{display: flex;gap:10px;}
ul.list_st01 li{width: calc((100% - 20px)/3);}
ul.list_st01 li a{position: relative; display: block;border-radius: 20px;background: #fff;border: 1px solid #ddd;transition: .4s;padding: 30px 20px;max-height: 315px;}
ul.list_st01 li a:hover{transform: translateY(-10px);}
ul.list_st01 li a:after{content:'';position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 20px;border: 2px solid #0479cc;opacity: 0;transition: .4s;}
ul.list_st01 li a:hover:after{opacity: 1;}
ul.list_st01 li a .box01 strong{font-size: 15px;color: #00bff6;}
ul.list_st01 li a .box01 p{font-size: 22px;font-weight: 700;margin: 10px 0;white-space: nowrap; overflow:hidden;text-overflow: ellipsis;}
ul.list_st01 li a .box01 span{font-size: 14px;font-weight: 500;color: #757575;}
ul.list_st01 li a .box02{display: flex; margin: 30px 0 30px;align-items: flex-end;gap:6px;}
ul.list_st01 li a .box02 strong{font-size: 25px;}
ul.list_st01 li a .box02 p{font-size: 13px;font-weight: 500;}
ul.list_st01 li a .box03{display: flex;align-items: center;gap:10px;}
ul.list_st01 li a .box03 .ico_box{width: 70px;height: 70px;border-radius: 15px;overflow: hidden;}
ul.list_st01 li a .box03 .ico_box img{width: 100%;height: 100%;object-fit: cover;}
ul.list_st01 li a .box03 .txt_box{width: calc(100% - 80px);}
ul.list_st01 li a .box03 .txt_box .txt01{font-size: 13px;font-weight: 700;margin-bottom: 10px;}
ul.list_st01 li a .box03 .txt_box .txt02{display: flex;gap:5px;flex-wrap:wrap;align-items: center;}
ul.list_st01 li a .box03 .txt_box .txt02 p{padding: 0 5px;line-height: 21px;border: 1px solid #757575;border-radius: 5px;font-size: 12px;font-weight: 500;color: #757575;}
ul.list_st01 li a .box03 .txt_box .txt02 span{color: #757575;}

.main_bg_box{padding: 120px 0 95px;background: url(../images/main/sec02_bg01.png) no-repeat top center;}

/* section01 */
#section01{padding: 120px 0 100px;}

/* section02 */
#section02{margin-bottom: 150px;}
#section02 ul{display: flex;gap:20px;flex-wrap:wrap;}
#section02 ul li{width: calc((100% - 20px)/2);}
#section02 ul li a{display: block;position: relative; height: 250px;padding: 45px 35px;background: #fff;border-radius: 20px;box-shadow: 1px 1px 15px 0px rgba(0,0,0,0);transition: .4s;border: 1px solid #ddd;}
#section02 ul li a:hover{box-shadow: 1px 1px 15px 0px rgba(0,0,0,.1);}
#section02 ul li a strong{display: block;padding: 0 9px;border-radius: 5px;line-height: 26px;margin-bottom: 17px;background: #d4ecfb;font-size: 18px;color: #005c9d;width: fit-content;}
#section02 ul li a strong.notice{background: #f1f1f1;color: #000;}
#section02 ul li a p{font-size: 22px;font-weight: 700;line-height: 32px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;}
#section02 ul li a span{position: absolute;left: 35px;bottom: 35px;font-size: 16px;font-weight: 500;color: #757575;}

/* section03 */
#section03 ul{display: flex;gap:20px;justify-content: center;flex-wrap:wrap;margin-bottom: 70px;}
#section03 ul li{padding: 0 43px;line-height: 60px;font-size: 23px;font-weight: 500;color: #0d498c;background: #e5f7ff;}
#section03 ul li.bl{border-radius: 25px 25px 25px 0px;}
#section03 ul li.tr{border-radius: 25px 0px 25px 25px;}
#section03 ul li.br{border-radius: 25px 25px 0px 25px;}
#section03 ul li.tl{border-radius: 0px 25px 25px 25px;}
#section03 ul li.blue01{background: #0d498c;color: #fff;}
#section03 ul li.blue02{background: #61dcff;color: #fff;}
#section03 ul li.blue03{background: #00afff;color: #fff;}
#section03 a.btn_st01{margin: 0 auto;}

/* section04 */
#section04{padding: 90px 0 70px;background:#88cff8;height: 400px;}
#section04 .inner{position: relative;}
#section04 p{font-size: 60px;font-family: 'Taenada';}
#section04 p strong{color: #0d498c;}
#section04 span{display: block; font-size: 26px;font-weight: 500;margin: 30px 0 90px;}
#section04 img{position: absolute;right: -50px;bottom: -65px;width: 500px;}

/* footer */
#footer{padding: 40px  0;}
#footer .inner{display: flex; width: 1780px;align-items: flex-end;justify-content: space-between;}
#footer .left_box .logo_box{display: block; margin-bottom: 45px;}
#footer .left_box ul{display: flex;gap:30px;margin-bottom: 15px;}
#footer .left_box ul li a{font-size: 16px;font-weight: 600;}
#footer .left_box address{font-style: normal;font-size: 16px;font-weight: 500;color: #757575;margin-bottom: 35px;line-height: 24px;}
#footer .left_box address span{padding: 0 7px;}
#footer .left_box address span:nth-child(5){display: block;width: 0;height: 0;opacity: 0;}
#footer .left_box .copy{font-size: 14px;color: #757575;opacity: .7;}
#footer .right_box{display: flex;gap:10px;}
#footer .right_box li a{display: block;width: 50px;height: 50px;border-radius: 50%;background: url(../images/main/footer_sns01_on.png);transition: .3s;background-size: cover;}
#footer .right_box li a:hover{background: url(../images/main/footer_sns01_on.png);background-size: cover;}
#footer .right_box li:nth-child(2) a{background: url(../images/main/footer_sns02_on.png);background-size: cover;}
#footer .right_box li:nth-child(2) a:hover{background: url(../images/main/footer_sns02_on.png);background-size: cover;}
#footer .right_box li:nth-child(3) a{background: url(../images/main/footer_sns03_on.png);background-size: cover;}
#footer .right_box li:nth-child(3) a:hover{background: url(../images/main/footer_sns03_on.png);background-size: cover;}


/* ---------------------------------------------- sub ----------------------------------------------*/
/* 공통 */
.sub_wrap{margin-top: 80px;}
.sub_wrap .sub_inner{padding: 0 2.6%;}

.sub_wrap02{margin-top: 80px;padding: 90px 0;}
.sub_wrap03{padding-bottom: 90px;}

.sub_wrap_detail{padding: 80px 0;}

/* 제목 */
.sub_tit{margin-bottom: 40px;text-align: center;}
.sub_tit h3{font-size: 26px;}
.sub_tit p{font-size: 14px;font-weight: 500;color: #454545;margin-top: 10px;}

.sub_tit02{margin-bottom: 60px;text-align: center;}
.sub_tit02 span{display: block;font-size: 20px;font-weight: 600;color: var(--ma_c01);}
.sub_tit02 p{font-size: 37px;font-weight: 500;margin:20px 0;}
.sub_tit02 h3{font-size: 42px;}

.sub_tit03{margin-bottom: 80px;}
.sub_tit03 h3{font-size: 45px;font-family: var(--font_01);text-align: center;}
.sub_tit03 h3 span{color: var(--ma_c01);}
.sub_tit03 p{font-size: 22px;font-weight: 500;text-align: center;margin-top: 20px;}

.sub_tit04 h3{margin:20px 0;}
.sub_tit04 p{margin: 0;font-size: 20px;font-weight: 500;}


/* 검색 */
.search_box{position: relative;display: flex; width: 600px;margin: 0 auto 65px;}
.search_box input{width: calc(100% - 55px);padding:0 25px;border-radius: 12px 0 0 12px;border: 2px solid #1b6da7;border-right: 0;font-weight: 500;height: 54px;}
.search_box input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}
.search_box input::placeholder{color: #797979;}
.search_box input:focus{outline: none;}
.search_box button{position: relative; width: 55px;padding-left: 12px;border-radius: 0 12px 12px 0;border: 2px solid #1b6da7;border-left: 0 ;text-align: left;}
.search_box button:after{content:'';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 1px;height: 18px;background: #e8e8e8;}


/* 페이징 */
ul.paging{display: flex;justify-content: center;align-items: center;margin-top: 75px;}
ul.paging li a{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;font-size: 16px;font-weight: 700;color: #000;}
ul.paging li.on a{background: #000;color: #fff;}

/* 버튼스타일 */
.sub_btn.sub_btn_p{padding: 0 15px;}
.sub_btn.f_btn{display: flex;gap:10px;margin-top: 20px;}
.sub_btn.f_btn button,
.sub_btn.f_btn a{width: calc((100% - 10px)/2);}
.sub_btn button,
.sub_btn a{width: 100%;height: 50px;border-radius: 10px;border: 2px solid #005c9d;font-size: 15px;font-weight: 700;color: #fff;background: #005c9d;}
.sub_btn button.white,
.sub_btn a.white{background: #fff;color: #005c9d;}
.sub_btn button.gray,
.sub_btn a.gray{background: #efefef;color: #797979;border: 2px solid #efefef;}

/* form스타일 */
form.form_st01 ul li:not(:last-child){margin-bottom: 30px;}
form.form_st01 ul li.f_box{display: flex;align-items: center;justify-content: space-between;}
form.form_st01 ul li input[type="checkbox"]{display: none;}
form.form_st01 ul li input[type="checkbox"] + label{position: relative; padding-left: 30px;}
form.form_st01 ul li input[type="checkbox"] + label:after{content:'';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;border-radius: 50%;background: url(/asset/images/sub/agree_ico01.png);background-size: cover;transition: .2s;}
form.form_st01 ul li input[type="checkbox"]:checked + label:after{background: url(/asset/images/sub/agree_ico02.png);}
form.form_st01 ul li input[type="checkbox"] + label span{color: #797979;}
form.form_st01 ul li input[type="checkbox"] + label strong{font-size: 18px;}
form.form_st01 ul li .c_wrap{display: flex; margin-top: 25px;gap:60px;padding-left: 20px;}
form.form_st01 ul li button{display: flex;align-items: center;gap:6px;color: #005c9d;}
form.form_st01 .sub_btn.sub_btn_p{margin-top: 60px;}

form.info_form ul.list02{margin-top: 35px;padding-top: 45px;border-top: 1px solid #ddd;}
form.info_form ul.list02 .gap_none{gap:0;}
form.info_form ul.list02 .gap_none .left_box{width: auto;}
form.info_form ul.list02 .gap_none .f_box{display: flex; width: calc(100% - 100px);align-items: center;gap:10px;}
form.info_form ul.list02 .gap_none .f_box input{display: none;}
form.info_form ul.list02 .gap_none .f_box label{display: flex; padding: 0 10px;height: 26px;border: 1px solid #464646;border-radius: 8px;font-size: 14px;font-weight: 500;color: #464646;line-height: 26px;align-items: center;gap:5px;cursor: pointer;}
form.info_form ul.list02 .gap_none .f_box .txt_box{display: flex;align-items: center;gap:5px;}
form.info_form ul.list02 .left_box button{padding: 0 10px;height: 26px;border: 1px solid #464646;border-radius: 8px;font-size: 14px;font-weight: 500;color: #464646;}
form.info_form .hide_wrap{display: none; margin-top: 20px;padding: 0;}
form.info_form .hide_wrap .hide_box{padding: 20px 0;background: none;border-radius: 0;border-top: 1px solid #ddd;}
form.info_form .hide_wrap .hide_box:last-child{border-bottom: 1px solid #ddd;}
form.info_form .hide_wrap .hide_box .left_box{width: 100%;}
form.info_form .hide_wrap .hide_box button{display: block; margin-left: auto;padding: 0 18px;margin-top: 10px; line-height: 32px;border-radius: 8px;background: #fff;border: 1px solid #aeaeae;font-size: 15px;font-weight: 700;color: #797979;}

/* 진행상황 */
.step_box{display: flex;gap:85px;justify-content: center;margin-bottom: 55px;}
.step_box li{display: flex;align-items: center;justify-content: center;flex-direction: column;gap:10px;}
.step_box li span{position: relative;display: block; width: 25px;height: 25px;border-radius: 50%;line-height: 29px;text-align: center; font-size: 13px;color: #a9c4db;font-family: 'Taenada';background: #e5f7ff;}
.step_box li.on span{background: #0d498c;color: #fff;}


/* 게시판 */
.board_box .top_box{display: flex;align-items: center;justify-content: space-between;padding: 0 20px;margin-bottom: 15px;}
.board_box .top_box p{font-weight: 700;color: #666;}
.board_box .top_box p span{color: #000;}
.board_box .top_box .btn_box{display: flex;gap:15px;}
.board_box .top_box .btn_box button{display: flex;align-items: center;gap:3px;color: #888;}
.board_box .top_box .btn_box button.on{color: #000;}
.board_box .top_box .btn_box button img{opacity: .6;}
.board_box .top_box .btn_box button.on img{opacity: 1;}

.board_box table{width: 100%;table-layout: fixed;border-top:2px solid #000;}
.board_box table th{height: 65px;border-bottom: 1px solid #e8e8e8;text-align: center;background: #f7f7f7;font-weight: 700;font-size: 14px;}
.board_box table td{padding: 23px 0;text-align: center;font-size: 16px;font-weight: 500;border-bottom: 1px solid #e8e8e8;}
.board_box table td:last-child{color: #666;}
.board_box table td.blue{color: var(--ma_c04);}
.board_box table td a{display: block;font-size: 18px;font-weight: 700;white-space: nowrap; overflow:hidden;text-overflow: ellipsis;text-align: left;padding: 0 10px;}


/* 서브 현재 경로 */
#contents .navi_wrap{display: flex;align-items: center;gap:5px;margin-bottom: 20px;}
#contents .navi_wrap li{font-size: 18px;font-weight: 600;color: #797979;}
#contents .navi_wrap li:last-child{color: #000;}


/* 서브 비주얼 */
.sub_visual{display: flex; height: 350px;align-items: center;justify-content: center;background: url(/asset/images/sub/sub_visual01.jpg)right -300px center no-repeat #f8f8f9;}
.sub_visual .sub_tit02{margin-bottom: 0;}


/* 서브메뉴 */
.sub_menu{margin: 40px 0 80px;}
.sub_menu ul{display: flex;gap:50px;}
.sub_menu ul li a{display: block; padding-bottom: 10px;font-size: 20px;color: #797979;font-weight: 800;}
.sub_menu ul li.on a{color: var(--ma_c04);border-bottom: 3px solid var(--ma_c04);}


/* login_wrap */
#login_wrap{background: url(../images/sub/login_bg01.jpg);}
#login_wrap .sub_inner{display: flex;min-height: calc(100vh - 80px);align-items: center;justify-content: center;height: 100%;padding: 40px 2.6%;}
#login_wrap .login_box{width: 460px;max-width: 100%;padding: 70px 50px 85px;border-radius: 25px;background: #fff;}
#login_wrap .login_box h3{font-size: 22px;text-align: center;margin-bottom: 45px;}
#login_wrap .login_box ul{display: flex;flex-direction: column;gap:10px;}
#login_wrap .login_box ul.gap_l{gap:20px;}
#login_wrap .login_box ul li input[type="text"],
#login_wrap .login_box ul li input[type="password"]{width: 100%;height: 50px;border: 1px solid #aeaeae;padding: 0 15px;font-weight: 500;border-radius: 10px;font-size: 15px;}
#login_wrap .login_box ul li input[type="text"]::placeholder,
#login_wrap .login_box ul li input[type="password"]::placeholder{color: #757575;}
#login_wrap .login_box ul li input[type="text"]:focus,
#login_wrap .login_box ul li input[type="password"]:focus{border: 1px solid #072e59;outline: none;}
#login_wrap .login_box ul li .a_box{display: flex;align-items: center;justify-content: flex-end;gap:3px;margin-bottom: 13px;}
#login_wrap .login_box ul li .a_box a{font-size: 14px;font-weight: 500;}
#login_wrap .login_box ul li select{width: 100%;height: 50px;border: 1px solid #aeaeae;padding: 0 15px;font-weight: 500;border-radius: 10px;font-size: 15px; background: url(../images/sub/login_ico01.png) no-repeat right 20px center; appearance: none;}
#login_wrap .login_box ul li select:focus{border: 1px solid #072e59;outline: none;}
#login_wrap .login_box ul li p{position: relative; width: fit-content;font-size: 16px;font-weight: 700;margin-bottom: 10px;}
#login_wrap .login_box ul li p:after{content:'';position: absolute;right: -9px;top: -1px;width: 4px;height: 4px;border-radius: 50%;background: #f12c3f;}
#login_wrap .login_box ul li input + span{display: block; font-size: 14px;font-weight: 500;color: #f12c3f;margin-top: 10px;}


/* signup_wrap */
#signup_wrap{padding: 120px 0 150px;}
#signup_wrap ul{display: flex;gap:20px;width: 860px;max-width: 100%;margin: 0 auto;}
#signup_wrap ul li{width: calc((100% - 40px)/3);}
#signup_wrap ul li a{display: block;position: relative;border-radius: 10px;overflow: hidden;aspect-ratio: 13/14;}
#signup_wrap ul li a img{width: 100%;height: 100%;object-fit: cover;transition: .3s;}
#signup_wrap ul li a:hover img{transform: scale(1.05);}
#signup_wrap ul li a p{position: absolute;bottom: 30px;left: 0;width: 100%;text-align: center;font-size: 20px;font-weight: 700;color: #fff;}


/* agree_wrap */
#agree_wrap{padding: 70px 0;}
#agree_wrap .agree_box{width: 440px;max-width: 100%;margin: 0 auto;}
#agree_wrap .agree_box .sub_tit{margin-bottom: 50px;}
#agree_wrap .agree_box .sub_tit h3{margin-bottom: 20px;}


/* data_wrap_cate */
#data_wrap_cate .con01{margin-bottom: 130px;}
#data_wrap_cate .con01 ul{display: flex;justify-content: center;flex-wrap: wrap;width: 600px;margin: 0 auto;gap:20px 10px;}
#data_wrap_cate .con01 ul a{display: flex;flex-direction: column;align-items: center;}
#data_wrap_cate .con01 ul a .ico_box{position: relative;}
#data_wrap_cate .con01 ul a .ico_box:after{content:'';position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 15px;border: 3px solid var(--ma_c03);box-sizing: border-box;opacity: 0;transition: .2s;}
#data_wrap_cate .con01 ul a.on .ico_box:after,
#data_wrap_cate .con01 ul a:hover .ico_box:after{opacity: 1;}
#data_wrap_cate .con01 ul a .ico_box img{width: 90px;}
#data_wrap_cate .con01 ul a p{margin-top: 12px;text-align: center;font-size: 17px;font-weight: 500;transition: .2s;}
#data_wrap_cate .con01 ul a:hover p,
#data_wrap_cate .con01 ul a.on p{color: #005c9d;}
#data_wrap_cate .con02 h4{font-size: 35px;font-weight: 800;margin-bottom: 30px;text-align: center;}
#data_wrap_cate .con03 .btn_box{display: flex;justify-content: flex-end;gap:15px;margin-bottom: 25px;}
#data_wrap_cate .con03 .btn_box button{display: flex;gap:3px;align-items: center;padding-bottom: 4px;border: 1px solid transparent;transition: .2s;}
#data_wrap_cate .con03 .btn_box button.on{border-bottom: 2px solid #000;}


/* data_wrap_detail */
#data_wrap_detail .con{padding: 35px 15px;border-bottom: 1px solid #e8e8e8;}
#data_wrap_detail .con:nth-child(2){border-top: 2px solid #000;}
#data_wrap_detail p.tit{font-size: 25px;font-weight: 800;margin-bottom: 30px;}
#data_wrap_detail p.tit span{font-size: 16px;font-weight: 500;padding-left: 5px;}
#data_wrap_detail p.tit span.red{color: #f23838;}
#data_wrap_detail .txt_list span{display: block;font-weight: 500;line-height: 1.5;color: #333;}
#data_wrap_detail .con01 .box01{display: flex;align-items: center;gap:25px;margin-bottom: 45px;}
#data_wrap_detail .con01 .box01 .ico_box{width: 100px;height: 100px;border-radius: 15px;overflow: hidden;}
#data_wrap_detail .con01 .box01 .ico_box img{width: 100%;height: 100%;object-fit: cover;}
#data_wrap_detail .con01 .box01 .txt{width: calc(100% - 125px);}
#data_wrap_detail .con01 .box01 .txt span{font-size: 20px;font-weight: 600;color: var(--ma_c01);}
#data_wrap_detail .con01 .box01 .txt p{font-size: 32px;font-weight: 800;margin-top: 20px;}
#data_wrap_detail .con01 .box02{display: flex;align-items: center;gap:30px;margin-bottom: 40px;}
#data_wrap_detail .con01 .box02 ul{width: calc(100% - 350px);}
#data_wrap_detail .con01 .box02 ul li{display: flex;margin-bottom: 20px;}
#data_wrap_detail .con01 .box02 ul li:last-child{margin-bottom: 0;align-items: center;}
#data_wrap_detail .con01 .box02 ul li span{position: relative; display: block;top: 4px; width: 80px;font-size: 15px;font-weight: 500;color: #757575;}
#data_wrap_detail .con01 .box02 ul li:last-child span{top: 1px;}
#data_wrap_detail .con01 .box02 ul li p{font-size: 15px;font-weight: 600;width: calc(100% - 80px);line-height: 1.5;}
#data_wrap_detail .con01 .box02 ul li:last-child p{font-size: 25px;font-weight: 700;}
#data_wrap_detail .con01 .box02 .img_box{width: 320px;border: 1px solid #e8e8e8;overflow: hidden;}
#data_wrap_detail .con01 .box02 .img_box img{width: 100%;height: 100%;object-fit: cover;}

#data_wrap_detail .con02 .s_box{width: 100%;overflow-x: scroll;max-width: 100%;height: max-content;padding-bottom: 10px;margin-bottom: 40px;cursor: grab;}
#data_wrap_detail .con02 .s_box::-webkit-scrollbar {height: 8px;}
#data_wrap_detail .con02 .s_box::-webkit-scrollbar-thumb{height: 30%;background: #e8e8e8;border-radius: 10px;}
#data_wrap_detail .con02 .s_box::-webkit-scrollbar-track {background: #fff;}
#data_wrap_detail .con02 .s_box table{border: 1px solid #e8e8e8;width: max-content;min-width: 100%;}
#data_wrap_detail .con02 .s_box table th{padding: 0 30px;height: 40px;border: 1px solid #e8e8e8;font-weight: 600;background: #f7f7f7;text-align: center;}
#data_wrap_detail .con02 .s_box table td{padding: 0 30px;height: 40px;border: 1px solid #e8e8e8;text-align: center;font-size: 14px;}
#data_wrap_detail .con02 .txt p{font-size: 20px;font-weight: 700;margin-bottom: 15px;}

#data_wrap_detail .con03{ padding-bottom: 100px;margin-bottom: 65px;}
#data_wrap_detail .con03 .tit{margin-bottom: 25px;}
#data_wrap_detail .con03 .box02{position: relative;display: block;align-items: flex-start;gap:20px;margin-top: 35px;}
#data_wrap_detail .con03 .box02 .left_box{width: 100%;}
#data_wrap_detail .con03 .box02 .left_box form{padding: 23px;border-radius: 4px;background: #f7f7f7;margin-bottom: 470px;}
#data_wrap_detail .con03 .box02 .left_box form p{font-size: 20px;font-weight: 700;margin-bottom: 10px;}
#data_wrap_detail .con03 .box02 .left_box form ul{margin-bottom: 10px;}
#data_wrap_detail .con03 .box02 .left_box form ul li{display: flex;align-items: center;margin-bottom: 5px;}
#data_wrap_detail .con03 .box02 .left_box form ul li:last-child{margin-bottom: 0;}
#data_wrap_detail .con03 .box02 .left_box form ul li span{display: block;width: 80px;font-size: 15px;font-weight: 500;}
#data_wrap_detail .con03 .box02 .left_box form ul li select{width: calc(100% - 80px);height: 32px;border: 1px solid #e8e8e8;padding: 0 15px;font-size: 14px;appearance: none;background: url(/asset/images/sub/data_d_ico01.png) no-repeat center right 15px #fff;background-size: 9px auto;}
#data_wrap_detail .con03 .box02 .left_box form ul li select:focus{outline: none;border: 1px solid #000;}
#data_wrap_detail .con03 .box02 .left_box form button{display: block; width: 160px;height: 42px;background: #000;color: #fff;font-size: 15px;font-weight: 700;border-radius: 12px;margin-left: auto;}
#data_wrap_detail .con03 .box02 .left_box .m_box{margin-bottom: 25px;}
#data_wrap_detail .con03 .box02 .left_box .m_box .txt01{font-size: 20px;font-weight: 700;margin-bottom: 25px;}
#data_wrap_detail .con03 .box02 .left_box .m_box .txt02{display: flex;align-items: flex-end;justify-content: space-between;}
#data_wrap_detail .con03 .box02 .left_box .m_box .txt02 span{font-weight: 500;color: #757575;}
#data_wrap_detail .con03 .box02 .left_box .m_box .txt02 p{font-size: 18px;font-weight: 500;}
#data_wrap_detail .con03 .box02 .left_box .m_box .txt02 p strong{font-size: 30px;}
#data_wrap_detail .con03 .box02 .left_box .sub_btn_box01 button,
#data_wrap_detail .con03 .box02 .left_box .sub_btn_box01 a{width:200px;}

#data_wrap_detail .con03 .box02 .right_box{position: absolute; width: 100%;padding: 25px;border: 1px solid #e8e8e8;overflow: scroll;height: 415px;margin-top: 30px;top: 230px;}
#data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar {height: 8px;width: 8px;}
#data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar-thumb{height: 30%;background: #e8e8e8;border-radius: 10px;}
#data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar-track {background: #fff;}
#data_wrap_detail .con03 .box02 .right_box .tit{margin-bottom: 25px;font-size: 20px;}
#data_wrap_detail .con03 .box02 .right_box table{border: 1px solid #e8e8e8;width: max-content;min-width: 100%;}
#data_wrap_detail .con03 .box02 .right_box table th{border: 1px solid #e8e8e8;background: #eefafd;text-align: center;font-size: 14px;height: 40px;}
#data_wrap_detail .con03 .box02 .right_box table tr:nth-child(1) th{font-size: 16px;}
#data_wrap_detail .con03 .box02 .right_box table td{border: 1px solid #e8e8e8;text-align: center;font-size: 14px;height: 40px;}


/* 게시판 상세 */
#tidings_detail .detail_box .tit_box{padding: 55px 40px 40px;border-top: 2px solid #000;border-bottom: 1px solid #000;}
#tidings_detail .detail_box .tit_box p{font-size: 20px;font-weight: 600;color: var(--ma_c01);}
#tidings_detail .detail_box .tit_box strong{display: block;margin: 15px 0 20px;font-size: 30px;line-height: 1.4;font-weight: 800;}
#tidings_detail .detail_box .tit_box span{color: #757575;font-size: 18px;font-weight: 500;}
#tidings_detail .detail_box .txt_box{padding: 55px 40px;border-bottom: 1px solid #e8e8e8;font-size: 17px;font-weight: 600;line-height: 33px;color: #333;}
#tidings_detail .detail_btn{display: flex;gap:35px;align-items: center;justify-content: center;margin-top: 70px;}
#tidings_detail .detail_btn .btn{display: flex;align-items: center;font-weight: 700;}
#tidings_detail .detail_btn .btn i{font-size: 20px;}
#tidings_detail .detail_btn .btn_st01{margin: 0;}


/* introduce 우정샵 소개 */
#introduce_wrap .con01{display: flex; margin-bottom: 80px;align-items: center;flex-direction: column-reverse;gap:50px;}
#introduce_wrap .con01 .txt{width: 100%;text-align: center;}
#introduce_wrap .con01 .txt p{font-size: 35px;color: #0f65c4;font-family: var(--font_01);line-height: 50px;margin-bottom: 10px;}
#introduce_wrap .con01 .txt span{font-size: 20px;font-weight: 500;line-height: 32px;}
#introduce_wrap .con01 .txt strong{display: block;margin-top: 10px;font-size: 20px;}
#introduce_wrap .con01 .img{width: 100%;}
#introduce_wrap .con01 .img img{display: block; width: 100%;max-width: 768px;margin: 0 auto;}

#introduce_wrap .con02{display: flex; margin-bottom: 100px;align-items: center;gap:50px;flex-direction: column;}
#introduce_wrap .con02 .img{width: 450px;}
#introduce_wrap .con02 .img img{width: 100%;}
#introduce_wrap .con02 .txt{width:100%;text-align: center;}
#introduce_wrap .con02 .txt .tit{font-size: 25px;font-weight: 800;line-height: 40px;}
#introduce_wrap .con02 .txt ul{margin: 35px 0;padding-left: 10px;}
#introduce_wrap .con02 .txt ul li{display: flex;align-items: center;gap:15px;margin-bottom: 15px;justify-content: center;}
#introduce_wrap .con02 .txt ul li:last-child{margin-bottom: 0;}
#introduce_wrap .con02 .txt ul li span{display: block;width: 24px;height: 24px;border-radius: 2px;background: #61dcff;}
#introduce_wrap .con02 .txt ul li:nth-child(2) span{background: #38a3ef;}
#introduce_wrap .con02 .txt ul li:nth-child(3) span{background: #1064c4;}
#introduce_wrap .con02 .txt ul li:nth-child(4) span{background: #05406b;}
#introduce_wrap .con02 .txt ul li p{font-size: 20px;font-weight: 700;}
#introduce_wrap .con02 .txt .s_txt{font-size: 20px;font-weight: 500;line-height: 32px;color: #454545;}

#introduce_wrap .con03{margin-bottom: 90px;}
#introduce_wrap .con03 .tit{font-size: 30px;line-height: 50px;color: #05406b;margin-bottom: 50px;font-family:var(--font_01);}
#introduce_wrap .con03 .tit span{color: #0f65c4;}
#introduce_wrap .con03 .tit br{display: none;}
#introduce_wrap .con03 .tit i{display: block;}
#introduce_wrap .con03 .img_box{margin-bottom: 50px;}
#introduce_wrap .con03 .img_box img{width: 100%;}
#introduce_wrap .con03 ul{padding-left: 60px;}
#introduce_wrap .con03 ul li{display: flex;gap:10px;margin-bottom: 30px;}
#introduce_wrap .con03 ul li:last-child{margin-bottom: 0;}
#introduce_wrap .con03 ul li p{font-size: 20px;color: #fff;font-family: var(--font_01);width: 32px;height: 32px;border-radius: 50%;background: #78d4f0;text-align: center;line-height: 37px;}
#introduce_wrap .con03 ul li:nth-child(2) p{background: #62bcfc;}
#introduce_wrap .con03 ul li:nth-child(3) p{background: #2a80a3;}
#introduce_wrap .con03 ul li:nth-child(4) p{background: #1064c4;}
#introduce_wrap .con03 ul li:nth-child(5) p{background: #59b2d1;}
#introduce_wrap .con03 ul li .txt{position: relative;top: 7px;}
#introduce_wrap .con03 ul li .txt strong{display: block;font-size: 24px;font-family:var(--font_01);margin-bottom: 7px;}
#introduce_wrap .con03 ul li .txt span{font-size: 18px;font-weight: 500;line-height: 26px;}

#introduce_wrap .con_list:not(:last-child){margin-bottom: 90px;}
#introduce_wrap .con_list .tit{font-size: 35px;text-align: center;margin-bottom: 40px;font-family:var(--font_01);color: #00bff6;}
#introduce_wrap .con_list.con05 .tit{color: #2ba1f5;}
#introduce_wrap .con_list.con06 .tit{color: #1064c4;}
#introduce_wrap .con_list ul{display: flex;flex-wrap: wrap;gap:20px;}
#introduce_wrap .con_list ul li{position: relative;display: flex;gap:10px; width: calc((100% - 20px)/2);height: 250px;border: 1px solid #e8e8e8;border-radius: 15px;padding: 40px 30px;flex-direction: column;justify-content: end;}
#introduce_wrap .con_list.con05 ul li{background: #fafafa;border: 1px solid #fafafa;}
#introduce_wrap .con_list ul li .ico{position: absolute;top: 30px;right: 20px;transform: scale(.8);}
#introduce_wrap .con_list ul li p{font-size: 24px;font-weight: 700;}
#introduce_wrap .con_list ul li span{font-size: 16px;font-weight: 500;line-height: 22px;}
#introduce_wrap .con_list a{display: block;width: 200px;height: 50px;border-radius: 10px;font-size: 18px;font-weight: 700;color: #fff;margin: 60px auto 0; line-height: 50px;text-align: center;background: #00bff6;}
#introduce_wrap .con_list.con05 a{background: #229cf3;}
#introduce_wrap .con_list.con06 a{background: #1064c4;}


/* faq 자주묻는 질문 */
#faq_wrap{word-break: keep-all; }
#faq_wrap .con_box ul{border-top: 1px solid #e8e8e8;}
#faq_wrap .con_box ul li{padding: 30px 40px 30px 0;border-bottom: 1px solid #e8e8e8;}
#faq_wrap .con_box ul li .txt01{display: flex;}
#faq_wrap .con_box ul li .txt01 > p{position: relative;top: 2px; width: 120px;text-align: center;font-size: 16px;color: #3ccaf7;font-weight: 700;padding: 0 7px;line-height: 1.5;}
#faq_wrap .con_box ul li .txt01 button{display: flex; width: calc(100% - 120px);justify-content: space-between;}
#faq_wrap .con_box ul li .txt01 button span{display: block;font-weight: 700;font-size: 20px;width: calc(100% - 90px);text-align: left;line-height: 1.5;}
#faq_wrap .con_box ul li .txt01 button img{position: relative;top: 10px;transform: rotate(180deg);transition: .3s;}
#faq_wrap .con_box ul li.active .txt01 button img{transform: rotate(0deg);}
#faq_wrap .con_box ul li .txt02{display: none; margin-top: 25px;padding-left: 120px;font-size: 16px;font-weight: 500;line-height: 1.5;}


/* usage 이용방법 */
#usage_wrap .con{padding: 60px 0;border-radius: 20px;border: 1px solid #e8e8e8;margin-bottom: 70px;}
#usage_wrap .con:last-child{margin-bottom: 0;}
#usage_wrap .con .tit{font-size: 35px;color: #2ba1f5;font-family: var(--font_01);margin-bottom: 50px;text-align: center;}
#usage_wrap .con02 .tit{color: #1189ef;}
#usage_wrap .con03 .tit{color: #1064c4;}
#usage_wrap .con .f_box{display: flex;gap:70px;align-items: flex-start;justify-content: center;margin-bottom: 55px;}
#usage_wrap .con03 .f_box{margin-bottom: 0;}
#usage_wrap .con ul{display: flex;gap:70px;justify-content: center;}
#usage_wrap .con ul li{position: relative; display: flex;flex-direction: column;align-items: center;gap:12px;}
#usage_wrap .con ul li:after{content:'';position: absolute;right: -47px;top: 76px;width: 22px;height: 18px;background: url(/asset/images/sub/usage_arrow01.png);background-size: cover;}
#usage_wrap .con .f_box + ul li:nth-child(2):after{right: -59px;}
#usage_wrap .con .f_box ul:nth-child(2) li:last-child:after{display: none;}
#usage_wrap .con .f_box + ul li:last-child:after{display: none;}
#usage_wrap .con ul li img{width: 110px;}
#usage_wrap .con ul li span{width: 90px;line-height: 34px;border-radius: 34px;text-align: center;color: #fff;font-size: 17px;font-weight: 700;background: #62bcfc;}
#usage_wrap .con .f_box ul:nth-child(2) li span{background: #38a3ef;}
#usage_wrap .con .f_box + ul li:nth-child(1) span{background: #38a3ef;}
#usage_wrap .con .f_box + ul li:nth-child(2) span{background: #1064c4;}
#usage_wrap .con .f_box + ul li:nth-child(3) span{background: #1064c4;}
#usage_wrap .con.con03 ul:nth-child(1) li:nth-child(2) span{background: #38a3ef;}
#usage_wrap .con.con03 ul:nth-child(2) li:nth-child(1) span{background: #38a3ef;}
#usage_wrap .con.con03 ul:nth-child(2) li:nth-child(2)  span{background: #1064c4;}
#usage_wrap .con ul li p{text-align: center;font-size: 16px;font-weight: 700;line-height: 22px;}

}