@charset "utf-8";
/*main setting*/
.sub_container::after{display: none !important;}
.s_content>div{content:"";display:block;clear:both;}

/* Mobile */
.m_visual{width:100%;height: 65vh;background: url("/images/06_health/main/v_mobg.jpg")no-repeat left top;background-size: cover;overflow:hidden;}
.m_visual h2{font-family:'SBAggro';font-weight:300;font-size: 24px;text-align:center;width: 60%;word-break:keep-all;margin:0 auto;color:#2c3d58;}
.m_visual h2 strong{display:block;margin-top:20px;font-size:30px;}
@media all and (min-width: 470px) {
.m_visual{background: url("/images/06_health/main/v_bg.jpg")no-repeat right -426px top;background-size: cover;}
.m_visual h2{text-align: left;margin: 50px 30px;font-size:32px;/* margin-top: 146px; */width:58%;}
.m_visual h2 strong{font-size:44px;}
}

.m_quick{margin-top:-90px;}
.m_quick .wrap{position:relative;z-index:0;overflow: hidden;}
.m_quick ul{width: 84%;background: #fff;display: block;overflow: hidden;padding: 30px 0 0 20px;border-radius: 0 50px 0 0;}
.m_quick ul:before{z-index:-1;content:"";display:block;width:100%;height:90px;background: url("/images/06_health/main/quick_mo_bg.png")no-repeat right top;position:absolute;top: 0;right: 0;;}
.m_quick li{float:left;width:33.333%;text-align:center;margin-bottom: 20px;}
.m_quick li a{color:#666;letter-spacing: -1px;display: block;font-size: 16px;word-break: keep-all;}
.m_quick li span::before{content:"";width:70px;height: 70px;display: block;margin: 0 auto;background: url("/images/06_health/main/quick_i.png")no-repeat left top;}
.m_quick li:hover a, .m_quick li:focus a{color:#1f87c7;font-weight: 500;}
.m_quick .li01 span::before{background-position: 13px 8px;}
.m_quick .li02 span::before{background-position: -69px 9px;}
.m_quick .li03 span::before{background-position: -157px 10px;}
.m_quick .li04 span::before{background-position: -254px 9px;}
.m_quick .li05 span::before{background-position: -348px 10px;}
.m_quick .li06 span::before{background-position: -434px 7px;}
.m_quick .li07 span::before{background-position: 15px -70px;}
.m_quick .li08 span::before{background-position: -77px -68px;}
.m_quick .li09 span::before{background-position: -181px -69px;}
.m_quick .li10 span::before{background-position: -260px -72px;}
.m_quick .li11 span::before{background-position: -348px -70px;}
.m_quick .li12 span::before{background-position: -437px -72px;}
.m_quick .li07, .m_quick .li08, .m_quick .li09{min-height:116px;}

.m_bbs {padding: 0 12px;position: relative;height: 340px;margin: 30px 0 50px 0;}
.m_bbs h4{ background: none !important; float: left; position: relative; padding-top: 0; margin: 0;font-size: 22px;}
.m_bbs h4.last:before{content:"";display:block;width: 1px;height: 12px;border-left: 1px dashed #b3cad8;position: absolute;top: 20px;}
.m_bbs h4 a { display: block; color: #666; font-size: 20px;font-weight: 300; padding: 15px 20px;}
.m_bbs h4.on a { color: #1b9663; font-weight: 600;border-bottom: 1px solid #1b9663; width: fit-content;}
.m_bbs .bbs_con { display: none; position: absolute; top: 60px; left: 0;padding: 0 12px;}
.m_bbs .bbs_con.on { display: block; width: 100%;}
.m_bbs .bbs_con .bbs_new { padding: 15px; overflow: hidden;}
.m_bbs .bbs_con .bbs_new a { display: block;}
.m_bbs .bbs_con .bbs_new dl { display: grid;grid-template-columns: 85px auto;grid-template-rows: 42px auto;}
.m_bbs .bbs_con .bbs_new dt {text-overflow: ellipsis;font-size: 18px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;height: 25px;margin-left: 15px;grid-column-start: 2;grid-column-end: 3;font-weight: 500;letter-spacing: -1px;}
.m_bbs .bbs_con .bbs_new dt:hover, .m_bbs .bbs_con .bbs_new dd:hover{text-decoration: underline;}
.m_bbs .bbs_new .txt { text-overflow: ellipsis; font-size: 16px; overflow: hidden; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 44px; margin-left: 15px; color: #666;}
.m_bbs .bbs_con .bbs_new .date { text-align: center;background: #ebfff2; border-radius: 10px; display: flex;flex-direction: column-reverse;float: left;font-size: 14px;color: #4b4b4b;padding: 18px 8px; grid-column-start: 1; grid-column-end: 2;grid-row-start: 1;grid-row-end: 3;width: 85px;}
.m_bbs .bbs_con .bbs_new .date:hover{text-decoration: none;}
.m_bbs .bbs_con .bbs_new .date strong { color: #1b9663; font-size: 24px;}
.m_bbs .bbs_con .bbs_list li {  overflow: hidden; border-top: 1px solid #ddd;}
.m_bbs .bbs_con .bbs_list li a { display: block; padding: 15px 0 15px 15px; overflow: hidden;}
.m_bbs .bbs_con .bbs_list li a:hover strong{text-decoration: underline;}
.m_bbs .bbs_con .bbs_list li strong { display: block; float: left; font-weight: 500; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1; width: 65%;-webkit-box-orient: vertical;overflow: hidden;color: #575757;letter-spacing: -1px;}
.m_bbs .bbs_con .bbs_list li strong:before {content: ""; display: block; width: 5px;height: 5px;border-radius: 50%;background: #399bd8;float: left; margin: 8px 8px 0 0;}
.m_bbs .bbs_con .bbs_list li span {font-size: 14px;color: #666;margin-top: 2px; float: right;}
.m_bbs .bbs_con .more { display: block; position: absolute;top: -52px;right: 12px;width: 41px; height: 41px;background:url("/images/06_health/main/plus.png")no-repeat center #ebfff2;border-radius: 50%;font-size: 0;}

.m_medical{padding:0 12px;}
.m_medical .wrap{padding:40px;background:#ebfff2;border-radius: 30px 0 0 0;position:relative;}
.m_medical .wrap::before{content:"";display: block;width: 65px;height: 47px;background: url("/images/06_health/main/medical_i01.png")no-repeat;position: absolute;top:-18px;right:55px;}
.m_medical ul>li{margin-bottom: 30px;}
.m_medical ul>li>ul{margin-top: 10px;}
.m_medical ul>li>ul>li{margin-bottom: 5px;color: #4b4b4b;letter-spacing: -1px;}
.m_medical ul>li>ul>li::before{content:"-";display:inline-block;margin-right: 5px;color: #666666bd;}
.m_medical ul>li>ul>li strong{font-size:16px;color:#399bd8;line-height: 23px;}
.m_medical ul>li>ul>li strong span{font-size: 20px;line-height: 23px;}
.m_medical li strong{font-size: 20px;color: #317c5d;font-family: 'SBAggro';}
.m_medical .wrap a{position:relative;display: block;font-family: 'SBAggro';padding:15px 18px;font-size: 15px;background: #1b9663;max-width:330px;color: #fff;font-weight: 300;border-radius: 10px 0 0 0;margin: 0 auto;transition: all .3s;}
.m_medical .wrap a::after{content: "";display: block;position: absolute;width:85px;height: 144px;background: url("/images/06_health/main/medical_i02.png")no-repeat;bottom:-53px;right:-23px;background-size: cover;}
.m_medical .wrap a span::after{content:"→";display: inline-block;color:#fff;font-size: 14px;float: right;margin-right: 60px;}
.m_medical .wrap a:hover{box-shadow:-5px 5px 10px #56a58462;}

.m_info{margin:40px 0 50px 0;padding:0 12px;display:flex;flex-direction:column-reverse}
.m_info .info_img{border-radius:0 0 30px 10px;overflow:hidden;border:1px solid #bababa;}
.m_info li{float:left;width: 100%;}
.m_info li a{display:block;}
.m_info li img{width:100%;height:100%;}
.m_info .info_btn{padding:10px 20px;background:#1b9663;overflow:hidden;display: flex;justify-content: space-between;}
.m_info .info_btn p{float:left;}
.info_btn button{width: 25px;height: 25px;font-size: 0;background:url("/images/06_health/main/info_btn.png")no-repeat left top;margin-right: 10px;}
.info_btn .all{order: 1;background-position: -3px -3px;}
.info_btn .stop{order: 2;background-position: -6px -61px;width: 17px;}
.info_btn .play{order: 2;background-position: -2px -33px;width: 17px;}
.info_btn .prev{order: 3;background-position: -55px -61px;width:17px;}
.info_btn .number{order: 4;color: #ffffffa1;font-size: 14px;font-weight: 300;margin-top:3px;margin-right: 15px;}
.info_btn .number span{color: #fff;font-style: italic;display: inline-block;margin-top: -5px;}
.info_btn .number span::after{display:inline-block;content:"";width:89px;height:20px;background:url("/images/06_health/main/info_btn.png")no-repeat right top;margin: 0 5px;}
.info_btn .next{order: 5;background-position: -114px -61px;width: 17px;margin-right: 0;}

/*Tablet*/
@media all and (min-width: 768px) {
.m_visual{background-position: right -180px top;}

.m_quick ul{width: 93%;}
.m_quick li{width: 16.666%;}
.m_quick .li07, .m_quick .li08, .m_quick .li09{min-height: 93px;}

.m_medical{width: 45%;float: left;}
}

/*PC*/
@media (min-width: 1023px) {
/*비대면건강걷기챌린지 메뉴*/
.menu .menu8{background:#1b9663;border-radius:20px 20px 0 0;width: 170px!important;}
.menu .menu8>a{color:#fff;padding: 18px 0 0 18px !important;display:block;width: 69%;font-weight: 300;float: left;font-size: 18px;text-align: left;line-height: 24px;}
.menu .menu8>a strong{display: inline-block;font-size: 20px;line-height: 21px;}
.menu .menu8>a:before{display:none;}
.menu .menu8>a:after{display:block;content:"";width:88px;height:71px;position:absolute;background:url("/images/06_health/main/walk_i.png")no-repeat;bottom: -11px;right: -67px;}
.menu .menu8:hover>a{color:#fff;}


.m_quick li span::before{transition:all .3s;}
.m_quick li:hover span::before{background-color:#f5fbff;border-radius:15px;box-shadow:0 0 20px #399bd857;position:relative;top:-14px;}
    
.con_bottom{margin-top:60px;}
.con_bottom:after{content:"";display:block;clear:both;}
.con_bottom>div{float:left;width:33.3333%;}

.m_bbs{width:35%;margin-top:0;}
.m_medical ul>li{margin-bottom:20px;}
.m_info{margin:0;}
}

@media all and (min-width: 1440px) {
.sub_site .s_content{display:inherit;}
    
.m_visual{background:none;min-width: 1920px;height: 538px;}
.m_visual .wrap{width:auto;}
.m_visual:before{content:"";min-width: 1920px;height:538px;background: url("/images/06_health/main/v_bg.jpg")no-repeat left top;display:block;position: absolute;left: 0;top: 0;z-index: -1;}
.m_visual h2{font-size: 40px;}
.m_visual h2 strong{font-size: 50px;}

.m_quick{margin-top: -163px;width: 1400px;}
.m_quick .wrap{overflow:inherit;width: auto !important;}
.m_quick ul{overflow: auto;width: 82%;padding: 50px 0 0 20px;}
.m_quick ul:before{display:none;}
.m_quick li{margin-bottom:40px;}
.m_quick:before{content:"";display:block;position:absolute;background:url("/images/06_health/main/quick_bg.png")no-repeat left top;height:269px;width:1920px;left:0;/* top: 0; */}

.con_bottom{margin-top: 90px;margin-bottom: 119px;} 
    
.m_bbs{width:534px !important;margin-right:50px;padding: 0;}
.m_bbs:before{content:"";display:block;width:260px;height:380px;position:absolute;background:url("/images/06_health/main/cbt_bg01.png")no-repeat;top: 60px;left: -326px;}
.m_bbs h4 a{padding: 15px 30px;}
.m_bbs .bbs_con .bbs_new{padding: 20px 0;}
.m_bbs .bbs_con .bbs_list li a{padding:18px 0;}
    
.m_medical{width: 372px !important;margin-right:50px;padding: 0;}
.m_medical .wrap{width:auto;padding: 50px 50px 40px 50px;}
.m_medical .wrap a::after{width: 116px;height: 189px;background-size: auto;bottom: -76px;right: -33px;}
.m_medical .wrap>ul{margin-bottom:40px;}
.m_medical ul>li>ul{margin-top: 5px;}
.m_medical ul>li>ul>li{margin-bottom: 2px;}
    
.m_info{width:394px !important;padding:0;position:relative;}
.m_info:after{content:"";display:block;width:694px;height: 421px;background:url("/images/06_health/main/cbt_bg02.png")no-repeat;position:absolute;top: 12px;left: -12px;z-index: -1;}
.m_info .info_img img{height: 304px;}
.m_info .info_btn{padding: 10px 40px;}
.info_btn button{margin-right:20px;}
.info_btn .number{margin-right:25px;}
.info_btn .number span::after{margin: 0 10px;}


}

.sub_site .head{margin-top: 0 !important;padding-top: 30px;}
.head .gnb{top: 0 !important;}

@media all and (min-width:1023px) {
.sub_site .head{padding-top:0;padding-bottom: 0;height: 100px;}
}

/* 통합검색 */
.m_search{margin: 20px;max-width: 480px;box-shadow: 10px 10px 10px rgba(54, 139, 181, .3);border-radius: 20px;}
.m_search .search_con legend{display: none;}
.m_search .search_con form input[type="text"]{float: left; width: calc(100% - 60px); height: 60px; padding: 12px; font-size: 15px; border-radius: 20px 0 0 20px;}
.m_search .search_con form input[type="submit"]{float: right; width: 60px; height: 60px; font-size: 0; background: #0074a9 url('/images/01_potal/main/search_ico.png') center no-repeat; border-radius: 0 20px 20px 0;}

@media all and (min-width:768px) {
.m_search{margin: 50px 30px 30px;}
}

@media all and (min-width:1023px) {
.m_search .search_con form input[type="text"]{height: 70px;font-size: 17px;}
.m_search .search_con form input[type="submit"]{height: 70px;}
}