#wrap{width:100%}
#header{display:block;position:relative;width:1007px;margin:0 auto;padding:25px 0}
nav{clear:both;width:100%;height:48px;background:#414c5d;text-align:center}
#container{/*overflow:hidden;*/position:relative;width:100%;margin:0 auto;padding-bottom:30px;height:auto}
#container::after{display:block; content:""; clear:both;}
.sub-wrap{position:relative;width:1007px;min-height:810px;margin:0 auto}
#contents{float:right;position:relative;width:750px;min-height:559px;margin-bottom:50px}
#footer{float:left;position:relative;width:100%;bottom:0px;padding-top:6px;padding-bottom:20px;background:#32363f}
/* 占쎈엘占쎈쐭 */
#header h1{width:310px;height:40px;margin-left:0px;background:url(../images/common/logo.gif) no-repeat 0 0;text-indent:-5000px}
#header h1 a{display:block;width:310px;height:40px}
#header .top-btn{position:absolute;width:50px;top:35px;right:0px}
#header .btn-home{display:block;float:left;width:20px;height:20px;background:url("../images/common/btn-top-home.gif") no-repeat 0 0;text-indent:-5000px}
#header .site-map{display:block;float:right;width:20px;height:20px;background:url("../images/common/btn-top-site.gif") no-repeat 0 0;text-indent:-5000px}
/* 筌롫뗀�뤀 */
nav button{width:100%;height:48px;line-height:48px;margin:0;padding:0;border-radius:0;font-size:1.4em;font-weight:400;background:#414c5d}
nav button:hover{background:#374151 url("../images/common/nav-hover.png") no-repeat bottom center !important;border-left:#2f3948 1px solid;border-right:#2f3948 1px solid;color:#eee}
nav ul{display:none;position:absolute;left:0;width:100%;padding:12px 10px;border-top:none !important;border:#d5d5d5 1px solid;background:#f9f9f9;box-shadow:3px 3px 0px 0px #eee;z-index:1}
nav ul li{list-style: none;width:100%;text-align:left;letter-spacing:-0.5px}
nav ul li a{width:100%;line-height:26px;padding-left:8px;background:url("../images/main/nav-dot.gif") no-repeat 0px 7px}
nav ul li a:hover{background:url("../images/main/notice-dot.gif") no-repeat 0px 7px}
.navbar{position:relative;width:1007px;margin:0 auto}
.subnav:hover .subnav-content {display: block}
.subnav{position:relative;float:left;width:14.2%}
.subnav:hover .subnavbtn{background:url("../images/common/nav-hover.png") no-repeat bottom center}
.subnav-content a:hover{color:#000;font-weight:600}

.hover_e {background:#374151 url("../images/common/nav-hover.png") no-repeat bottom center !important;border-left:#2f3948 1px solid;border-right:#2f3948 1px solid;color:#eee}
.hover_e1 {display: block}
.hover_e2 {background:url("../images/main/notice-dot.gif") no-repeat 0px 7px; color:#000;font-weight:600}

.blockA{display:block}
#dbFrm{height:max-content}

/* Sub Nav Style */
#accordian {float:left;background:#fff;width:227px;margin:44px auto 0 auto;padding:30px;box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.3), 0 0 200px 1px rgba(255, 255, 255, 0.5)}
#accordian h3 {font-size:1.2em;line-height:36px;border-bottom:#ddd 1px solid;cursor:pointer;font-weight:600}
#accordian h3:hover{border-bottom:#444 1px solid;color:#222}
#accordian li{list-style-type:none}
#accordian ul ul li a{text-decoration:none;line-height:28px;display:block;padding:0 17px;background:url("../images/sub/nav-bg03.gif") no-repeat 7px 13px;-webkit-transition:all 0.15s;-moz-transition:all 0.15s;-o-transition:all 0.15s;-ms-transition:all 0.15s;transition:all 0.15s}
/*hover effect on links*/
#accordian ul ul li a:hover{background:url("../images/sub/nav-bg02.gif") no-repeat 3px 10px;font-weight:600;color:#222}
/*Lets hide the non active LIs by default*/
#accordian ul ul{display:none}
#accordian li.active ul{display:block}
#accordian li.active h3{padding-left:10px;border-bottom:#444 1px solid;color:#222;background:url("../images/sub/nav-bg01.gif") no-repeat left 11px}
#accordian ul ul li.active a{background:url("../images/sub/nav-bg02.gif") no-repeat 3px 10px;font-weight:600;color:#222}
/* �뜮袁⑼폒占쎈섰占쎌뵠沃섎챷占� */
.visual{position:relative;margin:0 auto;width:1007px;padding:60px 0 40px 0;background: url("../images/main/visual-bg.png") no-repeat center 100px}
.visual ul{width:100%;height:75px;margin:0 0 10px 40px;border-top:none;background:url("../images/main/stick.png") no-repeat 405px 5px}
.visual ul li{float:left}
.visual ul h1{font-size:3em;font-weight:600;letter-spacing:-3px;color:#383838}
.visual ul .main-text01 p{margin-top:20px;font-size:1.2em;font-weight:600}
.visual ul span{font-size:2em;font-weight:600;letter-spacing:-3px}
.font-cR{color:#db476a}
.font-cB{color:#0c4452}
.visual ul .main-text02{margin:5px 100px 0;padding-left:20px;font-size:2em;font-weight:400;letter-spacing:-2.5px}
.visual ul .main-text02 p{margin:15px 13px 0;font-weight:600;color:#595959}
.visual-btn button{line-height:25px;margin-left:30px;padding:5px 15px 5px 20px;border:#fff 1px solid;border-radius:20px;font-size:1.2em;background:none}
.visual-btn button:hover{border:#ddd 1px solid;background:url("../images/main/dot-bg.png") repeat 0 0;color:#ddd}
.visual-btn button img{margin:7px 0 9px 20px}
.info-box01{overflow:hidden;float:left;width:305px;height:439px;margin:15px 45px 0 0;box-shadow:5px 5px 35px 10px #ccc;background:url("../images/main/visual01.jpg") no-repeat 0 0}
.info-box01 label{float:left;width:100%;line-height:38px;height:370px;padding:40px;font-size:2.2em;font-weight:300;letter-spacing:-1px;color:#fff}
.info-box02{overflow:hidden;float:left;width:305px;height:439px;margin:30px 45px 0 0;box-shadow:5px 5px 35px 10px #ccc;background:url("../images/main/infobox02-1.png") no-repeat 0 0}
.info-box02 label{float:left;width:100%;line-height:38px;padding:40px;font-size:2.2em;font-weight:300;letter-spacing:-1px;color:#fff}
.info-box03{float:right;position:relative;width:305px;height:465px;box-shadow:5px 5px 50px 5px #ccc;background:url("../images/main/visual03.png") no-repeat 0 0}
.info-box03 label{float:left;width:100%;line-height:38px;padding:40px 0 10px 40px;font-size:2.2em;font-weight:300;letter-spacing:-0.5px;color:#383838;background:url("../images/main/map-text.png") no-repeat 165px 30px}
.info-box03 p{position:absolute;width:100%;top:122px;left:0;text-align:center;z-index:2}
.info-box03 select{float:left;width:50%;margin-left:40px;margin-top:0;padding:6px 15px;box-sizing:border-box}
.info-box03 button{float:left;margin-top:0;margin-left:5px;padding:1px 13px;background:#333;box-sizing:border-box}
/* 筌롫뗄�뵥�굜�꼹�쀯㎘占� - 占쎌읈�뤃占썰틠�눘�뒄筌욑옙占쎈ご,占쎌냹癰귣�猷욑옙�겫占쎄맒,�⑤벊占쏙옙沅쀯옙鍮� */
.main-bg{background: url(../images/main/content-bg.gif) repeat-x 0 755px}
.main-content{overflow:hidden;position:relative;margin:0 auto;padding-top:0px;width:1007px;clear:both}
.infographic{position:relative;width:100%;height:100px;margin-bottom:40px;border:#cbd9ea 1px solid;background:#fff url("../images/main/info-bg.png") no-repeat -130px 0}
.infographic > div{float:left;width:100px}
.infographic p{float:left;width:79px;margin-top:12px;margin-left:16px}
.infographic h3{float:left;width:80px;line-height:25px;margin:0 0 0 15px;font-size:1.5em;font-weight:400;color:#383838}
.btn-info{position:absolute;top:55px;right:915px;line-height:24px;padding:0px 8px;background:#333;color:#fff;font-size:1.4em}
/*.btn-info{float:left;line-height:26px;margin:35px 0 0 5px;padding:0px 10px;background:#333;color:#fff}*/
.btn-info:hover{background:#000;color:#ccc}
.infographic-box{float:right;width:850px;height:70px;margin:10px 15px 0 0}
.infographic-box li{float:left;position:relative;width:170px;height:70px;background:#0b2040}
.infographic-box li img{position:absolute;top:0;left:0;width:170px;height:70px;z-index:3}
.infographic-box li div{position:absolute}
#info1{top:17px;left:0}#info1_sub{top:19px;right:5px;}
#info2{top:16px;left:0}#info2_sub{top:19px;right:6px;}
#info3{top:17px;left:0}#info3_sub{top:19px;right:4px;}
#info4{top:11px;left:0}#info4_sub{top:19px;right:0}
#info5{top:22px;left:0}#info5_sub{top:13px;right:10px;}

.slider{float:right;width:750px;height:70px;margin:10px 25px 0 0}
.movie{float:left;width:407px;height:152px}
.movie img{float:left;margin-right:20px}
.movie h3{float:left;width:160px;line-height:27px;font-size:1.5em;font-weight:400;color:#383838}
.movie p{float:left;width:160px;line-height:20px;margin:5px 0 10px 0}
.videoCover{position:relative;width:219px!important;margin:0 19px 0 0!important;height:143px;background: url('/chs/static/images/main/video_2024.gif') no-repeat center top / cover}
.videoCover::after,.videoCover::before{position:absolute;content:"";}
.videoCover::after{content:"2025년 지역사회 건강조사";width:100%;font-size:14px;text-align:center;color: white;padding:5px 0;bottom:-7%;background:black}
.videoCover::before{width:0;height:0;border-bottom: 17px solid transparent;border-top: 17px solid transparent;border-left: 27px solid white;border-right: 27px solid transparent;opacity:.85;top:55%;left:50%;transform:translate(-15%,-70%)}
.movie button{float:left;line-height:26px;padding:2px 10px;background:#333;color:#fff}
.movie button:hover{background:#000;color:#ccc}
/* tab - �⑤벊占쏙옙沅쀯옙鍮�,癰귣�猷꾬옙�쁽�뙴占�,筌욑옙占쎈열占쎄텢占쎌돳椰꾨떯而��⑥눘彛뤺퉪占� */
.tab{overflow:hidden}
.tab li{float:left;height:40px;line-height:40px;margin-right:3px;padding:0 20px;border:#cbdeea 1px solid;font-size:1.2em;background:#fff;text-align:center;box-sizing:border-box}
.tab li {display:inline-block;cursor:pointer}
.tab li.on{height:47px;line-height:42px;border:none;background:url("../images/main/notice-bg.png") no-repeat top center;color:#fff}
.tab_con {clear:both;border-top:1px solid #cbdeea;margin-top:-8px}
.tab_con .tab-ds{display:none;overflow:hidden;padding-top:20px;text-align:center}
.tab_con div ul{width:100%;font-size:1.077em}
.tab_con div ul li{float:left;position:relative;width:100%;line-height:30px;text-align:left}
.notice-box span{position:absolute;top:0;right:0}
.tab_con div ul li:hover{background:url("../images/main/dot-bg.png") repeat-x 0 bottom}
.tab_con div ul li a{height:30px;padding-left:17px;background:url("../images/main/notice-dot.gif") no-repeat 7px 7px}
.tab_con div ul li a:hover{color:#000;font-weight:600}
.tab_con div .btn-more{position:absolute;top:0;right:0px;height:29px;padding-right:0px;background:none;text-align:right}
.notice-box{float:right;overflow:hidden;position:relative;width:570px;height:190px}
.history-box{position:relative}
.history-box .tab_con div ul li:hover{background:none}
.history-box .tab_con {clear:both;border-top:1px solid #00a2d1;margin-top:-1px}
.history-box .tab li.on{height:43px;line-height:43px;border-style:solid;border-width:1px;border-color:#00a2d1 #00a2d1 #fff #00a2d1;background:#fff;color:#444;font-weight:600;z-index:10}
.history-box .tab li{float:left;white-space:nowrap;height:43px;line-height:43px;margin:5px 0 0 5px;padding:0 30px;border:#d5d5d5 1px solid;border-bottom:#00a2d1 1px solid;font-size:1.2em;background:#f9f9f9;text-align:center;box-sizing:border-box;transition: all .5s;cursor:pointer}
.healthy_factor_db ul{height:auto;display:flex;}
.healthy_factor_db li,.category_tab li{position:relative;display:flex;justify-content:center;align-items:center;width:calc(100% / 6 - 5px);height:auto;margin:5px 0 0 5px;padding:0 0 0 5px!important;border:#d5d5d5 1px solid;border-bottom:#00a2d1 1px solid;font-size:1.2em;line-height:230%;background:#f9f9f9;text-align:center;box-sizing:border-box;transition: all .5s;cursor:pointer}
.healthy_factor_db li.on,.category_tab li.on{border-style:solid;border-width:1px;border-color:#00a2d1 #00a2d1 #fff #00a2d1;background:#fff;color:#444;font-weight:600;z-index:10;height:auto;line-height:230%;}
.healthy_factor_db li span{overflow:hidden;white-space:nowrap;text-overflow: ellipsis}
.healthy_factor_db .xi-close-min{font-size:1.3em;transition:all.3s}
.healthy_factor_db .xi-close-min:hover{color:#00a2d1;transform: rotate(180deg)}
.history-box .tab li:first-child,.healthy_factor_db li:first-child,.category_tab li:first-child{margin:5px 0 0 0!important}
.category_tab li{border-bottom:#d5d5d5 1px solid;width: auto;white-space: nowrap; padding:0 10px!important}
/*section공통설정*/
.section{width:100%;left:0;height:auto;background:white;transition:all .5s}
/*healty factor_db*/
.healthy_factor_db::after,.category_tab::after{content:"";position:absolute;width:100%;height:1px;left:0;bottom:0;z-index:-1}
.healthy_factor_db::after{background:#00a2d1}
.category_tab::after{background:#d5d5d5}
.category_tab li.on {border-bottom:#00a2d1 1px #fff}
.healthy_factor_category{display: flex; justify-content: space-between;visibility:visible;z-index:50;opacity:1}
.healthy_factor_category>*{border:1px solid #b4b4b4;width:31%;transition:all .3s}
.healthy_factor_category p{color:#4d4d4d;font-size:17px;line-height:47px;font-weight:600;background:#e3ecf6;border-bottom:1px solid #b4b4b4; text-align: center}
.healthy_factor_category li{line-height:47px;font-size:16px;font-weight: 500;letter-spacing:-0.5px;cursor:pointer}
.healthy_factor_category ul.on li{padding:0 20px;display: flex;justify-content:space-between;align-items: center}
/*공통 스크롤 디자인*/
.db_listBox::-webkit-scrollbar,.db_box div div::-webkit-scrollbar{width:0;background:#fff}
.healthy_factor_category .scroll::-webkit-scrollbar,.grid_frame::-webkit-scrollbar,.scroll_frame::-webkit-scrollbar{width:10px!important;height:10px;background:#fff}
.healthy_factor_category .scroll::-webkit-scrollbar-thumb,.grid_frame::-webkit-scrollbar-thumb,.scroll_frame::-webkit-scrollbar-thumb{background:#C1C1C1;border-radius:5px;border:1px solid #fff}
.scroll .on li:not(:first-child){border-top:1px solid #dddddd}
.db_listBox:not(.scroll) .on li{border-bottom:1px solid #dddddd}
/*factor viewer*/
.factor_viewer{border:1px solid #bcbcbc;padding:0 20px 20px;height:auto}
.factor_viewer>p{position:relative;color:#686d74;border-bottom:1px solid #e4e4e4;padding:5px 0}
.category_tab{position:relative;margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:flex-start;transition: margin .3s}
.btn_box{display:block;position:absolute;top:0;right:0;display:flex;transition: all .7s}
.factor_viewer>ul.on::after{background:#00a2d1;z-index:0}
.factor_viewer>ul.on li:not(.on){border-bottom: 1px solid #00a2d1}
.factor_viewer .article{display:none}
/*factor viewer -  grid frame*/
.grid_frame{height:400px;display: flex; justify-content: space-between; border-style:solid;border-width:1px;border-color:transparent #00a2d1 #00a2d1 #00a2d1;}
.grid_frame>*{border:1px solid #b4b4b4;width:48%;transition:all .3s;padding:5px 5px;margin:5px 5px}
.item_frame div{overflow:auto;height:335px; padding:0 5px}
.item_frame li{padding:0 15px;line-height:25px;font-size:12px;font-weight: 500;letter-spacing:-0.5px;cursor:pointer}
.year_frame div{overflow:auto; height:310px; padding:0 5px}
.year_frame li{padding:0 15px;line-height:25px;font-size:12px;font-weight: 500;letter-spacing:-0.5px;cursor:pointer}
/*factor viewer -  db_classification_frame*/
.db_classification_frame>*{padding:20px 10px;width:100%;top:0;background:#fff;min-height:400px;height: auto;border-style:solid;border-width:1px;border-color:transparent #00a2d1 #00a2d1 #00a2d1;}
.db_classification_frame .db_box>div{width:45%;min-width:300px;border:1px solid #7e7e7e}
.db_classification_frame h5{font-size:0.9rem!important;line-height:180%!important;border-bottom:1px solid #7e7e7e}
.db_classification_frame label{margin-left:3px;font-size:0.8rem!important;line-height:180%;cursor:pointer}
.db_classification_frame label img{display:inline-block;margin-right:2px}
.db_classification_frame li{padding:0 5px 0 10px;white-space:nowrap}
.scroll_frame li:not(:first-child){border-top:1px solid #bbbbbb}
.db_box:not(:last-of-type) div div:not(.scroll_frame) li{border-bottom:1px solid #bbbbbb}
.db_box div div{height:400px;overflow: hidden scroll}
.txtR{text-align: center;}
/*category tab -> 항목 click*/
/*category tab -> 행정구역 click*/
.administrative_district>*{transition:all .3s;display:inline-block}
.middl_db_category{margin-left:10px}
.middl_db_category div>ul{position:relative}
.middl_db_category div>ul>li{position: absolute;width:100%;left:0;padding:0;}
/*category tab -> 시점 click*/
.time p{display:flex;justify-content:center;align-items: center}
.time em{font-size:1rem; font-weight:bold;margin:0 5px}
.time select{width:30%;min-width:70px}

/* 筌롫뗄�뵥獄쏄퀡瑗� */
.main-banner{display:block;width:100%;height:48px;clear:both}
.main-banner li{float:left;width:16.16%;height:42px;margin-right:0.6%;border:#ddd 1px solid;box-sizing:border-box;;text-align:center;background:#fff}
.main-banner li img{width:100%;height: 100%;}
/* 筌랃옙 占쎈뮞占쏙옙占쎌뵬 */
.ss_map_contain map > area,
.ss_map_contain map > area:active,
.ss_map_contain map > area:focus {outline: none; border:0}
.ss_map_contain {float:left;display:block;width:100%;padding:12px 0;border:#ddd 1px solid;text-align:center;background:#fff}
.ss_map_section {float:left;width:100%}
.ss_big_map {float:left;position:static;top:0;left:0;width:100%;}
.ss_mini_bg{position: relative;display:block;margin-top:110px;left:20px;background:url(../images/map/2023/base.png) no-repeat 0 0;width:269px;height:356px}
#imap{position:absolute;top:0px;left:0px}
#bmap{top:0px;left:0px}
/* Footer */
#footer ul{display:block;height:30px;}
#footer ul li{float:left;line-height:30px;padding:0 13px;;background:url("../images/main/footer-stick.gif") no-repeat right 8px;color:#aaa}
#footer ul li a{color:#aaa}
#footer ul li a:hover{color:#fff}
.footer-box{position:relative;width:1007px;margin:0 auto;color:#aaa}
.family-site{position:absolute;top:5px;right:0px;width:200px}
.family-site label{display:none}
.family-site select{float:left;width:76%;margin:0;border:#474a53 1px solid;color:#555}
.family-site a{float:right;line-height:26px;margin:0;padding:0px 10px;background:#040e23;color:#ccc}
.family-site a:hover{background:#000;color:#fff}
.footer-box img{bottom:10px;right:0px}
.btn-top{position:fixed;right:10px;bottom:10px;z-index:888}
.btn-top2{position:absolute;right:10px;bottom:10px;z-index:999}
.btn-top3{position:absolute;right:10px;bottom:33px;z-index:999}
/* sub */
.sub-bg{background:url(../images/sub/title-bg.gif) repeat-x left -116px}
#contents h3{line-height:50px;margin-bottom:20px;padding-top:10px;border-bottom:#ddd 1px solid;font-size:2em;font-weight:600;color:#222;letter-spacing:-1.5px}
.zeta-menu-bar{position:relative;display:inline-block;width:100%;height:83px}
.zeta-menu {position:absolute;top:0;margin:0;padding:0}
.zeta-menu li{float:left;list-style:none;position:relative;/*min-width:130px;*/background:url(../images/common/line.png) no-repeat right 30px}
.zeta-menu a{background:url("../images/common/down-arr.png") no-repeat 5px 10px}
.zeta-menu li.expand>a{color:#222;font-weight:600}
.zeta-menu ul{display:none;position:absolute;left:0;top:100%;width:100%;background:#fff;border:1px solid #ddd;padding:15px;z-index:10}
.zeta-menu ul li {float:none}
.zeta-menu ul li.expand{background:#ddd}
.zeta-menu ul li.expand a{color:#222}
.zeta-menu ul a {padding-left:10px;background:url("../images/sub/nav-bg03.gif") no-repeat 0 6px}
.zeta-menu ul ul {left:100%;top:0}
.step{line-height:83px;padding:0 20px;font-size:1.4em;font-weight:400;transition: all .3s}
.step img{margin-left:10px;}
.step-bw{width:140px !important}
.step-bw2{width:100px !important}
.step-bw3{width:160px !important}

/**************************** new_master css 占쎄텢占쎌뒠 ****************************/
.dis_none {display:none;}

.search-box{overflow:hidden;width:100%;border:#ccc 1px solid;border-radius:8px;box-shadow:0 3px #f3f3f3}
.search-box table{overflow:hidden;width:100%;border:#ccc 1px solid;border-radius:8px}
.search-box table tr:nth-child(2n){background:#f2f7f9}
.search-box table tr:nth-child(2n+1){background:#ebf1f5}

/**************************** 占쎈솚占쎈씜 占쎈뮞占쏙옙占쎌뵬 ****************************/

#popup_layer, #popup_layer_detail {position: relative; z-index: 100000;}
/* #Graybg {opacity: 0.7; width: 100%; height: 100%; left: 0%; top: 0%; position: absolute; background-color: gray; z-index:10000;} */
#Graybg {margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 0px; top: 0px; width: 100%; height: 100%; position: fixed; z-index: 1000; opacity: 0.5; background-color: #000;}
.pop_areaWrap {position: absolute; /*border: 4px solid rgb(36, 128, 166);*/ background-color: white; z-index:100001;box-shadow: 1px 1px 15px #333; }
/* .pop_areaWrap {position: absolute; border: 4px solid rgb(36, 128, 166); background-color: white; z-index:100001;box-shadow:5px 5px #33333; } */
.pop_conWrap {padding:10px;}

/* 占쎈솚占쎈씜 占쏙옙占쎌뵠占쏙옙 */
.pop_areaWrap h3 {height:36px; background:#143044; text-align:left; vertical-align:top; padding:9px 0 9px 10px; font-size:14px; font-weight:600; color:#fff;}
.popup-box {background:#366688; text-align:left; vertical-align:top; padding:9px 0 9px 10px; font-size:14px; font-weight:600; color:#fff;}
.popup-box button{background:url(../images/default/btn-popclose.png) no-repeat 0px 3px !important;border:0 !important}
.popup-box button span{display:none !important}
.pop_title_area {width: 100%;}
.pop_title_area h4 {height:25px; background:url(../cdc/images/default/new-bullet01.png) no-repeat 0px 5px; text-align:left; vertical-align:top; padding:1px 0 0 15px; font-size:13px; font-weight:600; color:#2a2a2a; float:left;}

/* 占쎈솚占쎈씜 甕곌쑵�뱣 */
.pop_btn_area {height:29px;}
.pop_btn_area dl { float:left;}
.pop_btn_area dd {float:left;}

.pop_btn_area .btn_bg_b {margin-left:5px; cursor:pointer;}
.pop_btn_area .btn_bg_b .btnbg_left {width:9px; height:24px; background: url(../cdc/images/default/btn_b_left.png) no-repeat;}
.pop_btn_area .btn_bg_b .btnbg_center {color:#ffffff; height:24px; padding-top:5px; padding-right:5px; font-weight:bold; vertical-align:middle; background: url(../cdc/images/default/btn_b_center.png) repeat-x;}
.pop_btn_area .btn_bg_b .btnbg_right {width:21px; height:24px; background: url(../cdc/images/default/btn_b_right.png) no-repeat;}

.pop_btn_area .btn_bg_o {margin-left:5px; cursor:pointer;}
.pop_btn_area .btn_bg_o .btnbg_left {width:9px; height:24px; background: url(../cdc/images/default/btn_o_left.png) no-repeat;}
.pop_btn_area .btn_bg_o .btnbg_center {color:#2a2a2a; height:24px; padding-top:5px; padding-right:5px; font-weight:bold; vertical-align:middle; background: url(../cdc/images/default/btn_o_center.png) repeat-x;}
.pop_btn_area .btn_bg_o .btnbg_right {width:21px; height:24px; background: url(../cdc/images/default/btn_o_right.png) no-repeat;}

.pop_btn_area .btn_bg_g {margin-left:5px; cursor:pointer;}
.pop_btn_area .btn_bg_g .btnbg_left {width:9px; height:24px; background: url(../cdc/images/default/btn_g_left.png) no-repeat;}
.pop_btn_area .btn_bg_g .btnbg_center {color:#ffffff; height:24px; padding-top:5px; padding-right:5px; font-weight:bold; vertical-align:middle; background: url(../cdc/images/default/btn_g_center.png) repeat-x;}
.pop_btn_area .btn_bg_g .btnbg_right {width:21px; height:24px; background: url(../cdc/images/default/btn_g_right.png) no-repeat;}

.pop_btn_area .btn_bg_gr {margin-left:5px; cursor:pointer;}
.pop_btn_area .btn_bg_gr .btnbg_left {width:9px; height:24px; background: url(../cdc/images/default/btn_gr_left.png) no-repeat;}
.pop_btn_area .btn_bg_gr .btnbg_center {color:#ffffff; height:24px; padding-top:5px; padding-right:5px; font-weight:bold; vertical-align:middle; background: url(../cdc/images/default/btn_gr_center.png) repeat-x;}
.pop_btn_area .btn_bg_gr .btnbg_right {width:21px; height:24px; background: url(../cdc/images/default/btn_gr_right.png) no-repeat;}


/* 占쎈솚占쎈씜 甕곌쑵�뱣占쎌겫占쎈열 占쎄쉽占쎄숲占쎌젟占쎌졊 */
.range_table {-dt-display:table; display:table; margin:0 auto; }
.range_cell {-dt-display:table-cell; *padding-left:5px; display:table-cell;}

/*site map*/
.sitemap{overflow:hidden;position:absolute;width:80%;padding:10px 40px 30px; left:10%; display: none; background:#fff;}
.popup-close{position:absolute;top:40px;right:70px;width:24px;height:24px;background: url(../images/common/btn-close.gif) no-repeat 0 0;text-indent:-5000px}
.sitemap h2{width:100%;padding:30px 0;border-bottom:#666 2px solid;font-size:2em;font-weight:600;color:#000}
.sitemap h3{width:100%;padding:20px 0;font-size:1.2em;font-weight:600;color:#444}
.sitemap h3.title{background: url(../images/common/site-bg.gif) no-repeat right 18px}
.sitemap ul{border-top:#ddd 1px solid}
.sitemap ul li{line-height:33px;border-bottom:#ddd 1px solid}
.site-block01{clear:both;width:100%}
.site-block01 div{height:252px}
.site-block02 div{height:482px}
.site-block02{overflow:hidden;clear:both;width:100%;border-bottom:#666 1px solid}

.s-block{float:left;width:25%;padding:20px 30px 40px;border-right:#ddd 1px solid}
.s-block ul li dl dd{padding-left:15px;background: url(../images/sub/nav-bg03.gif) no-repeat 7px 16px}
.s-block ul li dl{border-top:#ddd 1px solid}
.s-block ul li strong{padding-left:15px;background: url(../images/sub/nav-bg01.gif) no-repeat left 1px}

/* new 占쎈솚占쎈씜 甕곌쑵�뱣 */
/*.pop_btn_Wrap1 {position:relative;left:50%;float:left;padding:10px 0;}
.pop_btn_Wrap1 .pop_btn_Wrap2 {position:relative;left:-50%;float:left;padding:0 5px 0 0;}*/
.pop_btn_Wrap1 {text-align:center;padding:10px 0;}
.pop_btn_Wrap1 .pop_btn_Wrap2 {text-align:center;padding:0 5px 0 0;}

/**************************** //new_master css 占쎄텢占쎌뒠 ****************************/

/* 筌뤴뫀而�占쎌뵬 */
#header .m-logo{display:none}
#header .m-top{display:none}
.swiper-container{display:none}
.m-info{display:none}
.pop-layer{display:none}
.pop-layer2{display:none}
.m-footer{display:none}
.m-block{display:none}
.m-btn-top{display:none}
/* //筌뤴뫀而�占쎌뵬 */
/* 筌뤴뫀而�占쎌뵬 獄쏆꼷�벓占쎌굨 */
@media screen and (max-width:980px){
#wrap nav{display:none}
#wrap .top-btn{display:none}
.main-content{width:100%;padding-top:30px}
#wrap .sub-nav{display:none}
.main-bg{background:none}
#footer .footer-box{display:none}
.m-btn-top{display:block}
.m-hidden{display:none !important}
.m-logo2{width:80%;margin:10% 10% 0 }
.sub-wrap{width:100%;margin:0 auto}
.sub-bg{background:url(../images/sub/title-bg.gif) repeat-x left -83px}
#accordian{display:none}
#contents{width:100%;padding:0 2%}
#contents h3{text-align:center;line-height:60px;padding-top:0}
.zeta-menu-bar{width:100%;height:50px;text-align:center;background:#414c5d}
.zeta-menu{left:10px;width:100%}
.zeta-menu li.expand>a{color:#fff}
.step{line-height:50px;color:#eee}
.zeta-menu ul li {text-align:left}
.zeta-menu li{background:url(../images/common/line-w.png) no-repeat right 14px}
.zeta-menu a{display:block;width:100%;background:url("../images/common/down-arr-w.png") no-repeat 5px 23px}
.board-top-box{width:30% !important}
.board-top-sh{width:70% !important}
.total{width:100% !important;text-align:center}
.m-block{display:block}
.infographic{border:none}
.infographic > div{float:left;width:100%}
/* //占쎌럲 */
#header{margin:0 auto;width:100%/*1200px*/;height:80px}
#header h1{margin-left:5%}
#header h1{background-size:90%}
#header .m-top{display:block;position:absolute;top:22px;right:10px;text-align:right}
#header .m-top a{display:inline-block;font-size:18px;width:40px;line-height:38px;text-align:center;border-radius:5px;border:#ddd 1px solid;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */}
.visual{overflow:hidden;position:relative;margin:0 auto;width:100%;padding:30px 0 0;border-top:#ddd 1px solid;background:#f5f5f5 url("../images/main/visual-bg.png") no-repeat left top}
.visual ul{width:100%;height:75px;margin:0 0 0 0;background:none}
.visual ul li{float:left;width:100%;text-align:center}
.visual ul h1{font-size:2.4em;font-weight:600;letter-spacing:-3px;color:#383838}
.visual ul .main-text01 p{margin-top:20px;font-size:1.2em;font-weight:600}
.visual ul span{font-size:1.6em;font-weight:600;letter-spacing:-3px}
.visual ul .main-text02{display:none}
.visual-box{display:none !important;}
.visual-btn button{line-height:25px;width:70%;margin-left:15%;padding:5px 15px 5px 20px;border:#fff 1px solid;border-radius:20px;font-size:1.2em;background:none}
.swiper-container{display:block;height:500px}
.info-box01{overflow:hidden;float:left;width:100%;height:500px;margin:15px 45px 0 0;box-shadow:none;background:#0c7b84 url("../images/main/visual01.jpg") no-repeat center top;background-size:100%}
.info-box02{overflow:hidden;float:left;width:100%;height:500px;margin:15px 45px 0 0;box-shadow:none;background:#0e2962 url("../images/main/visual02.jpg") no-repeat center top;background-size:100%}
.info-box03{overflow:hidden;float:left;position:relative;width:100%;height:500px;margin:15px 45px 0 0;box-shadow:none;background:#444}
.info-box01 label{text-align:center;height:auto;padding:40px 0 20px 0}
.info-box02 label{text-align:center;height:auto;padding:40px 0 20px 0}
.info-box03 label{float:left;width:100%;line-height:38px;padding:40px 0 10px 0;font-size:2.2em;font-weight:300;letter-spacing:-0.5px;color:#fff;text-align:center;background:none}
.info-box03 p{position:absolute;width:100%;top:122px;left:0;z-index:2}
.info-box03 select{float:none;width:50%;margin-left:40px;margin-top:0;padding:6px 15px;box-sizing:border-box}
.info-box03 button{float:none;margin-top:0;margin-left:5px;padding:1px 13px;background:#333;box-sizing:border-box}
.ss_mini_bg{margin-top:130px !important;left:20px;background:url(../images/map/2023/base.png) no-repeat 0 0;width:269px;height:356px}
.infographic{height:auto;background:none}
.infographic h3{width:100%;/*margin:20px 0 0;*/padding-bottom:20px;border-bottom:#ddd 1px solid;text-align:center;font-weight:600}
.infographic-box{float:right;width:90%;height:auto;margin:10px 5%}
.infographic-box li{margin:10px 0;width:170px;height:70px}
.btn-info{top:20px;right:16px !important;}

.m-info{display:block;margin-bottom:20px;text-align:center}
.m-info h3{line-height:50px;font-size:1.8em;font-weight:600;text-align:center}
.movie{width:100%;height:auto;margin-bottom:30px;background:#333}
.movie img{width:96%;margin:2%}
.movie h3{width:100%;font-size:1.8em;font-weight:600;text-align:center;color:#fff;background:#333}
.movie p{width:100%;line-height:30px;margin:0;text-align:center;color:#ddd;background:#333}
.movie button{width:96%;margin:2%;background:#444}
.videoCover{display: none;}
/* tab - �⑤벊占쏙옙沅쀯옙鍮�,癰귣�猷꾬옙�쁽�뙴占�,筌욑옙占쎈열占쎄텢占쎌돳椰꾨떯而��⑥눘彛뤺퉪占� */
.tab li{padding:0 10px;margin-right:2px}
.notice-box .tab_con div ul li span{display:none}
.notice-box{width:100%;height:auto;margin-bottom:20px}
.tab_con div .btn-more{right:0px; padding: 0px 5px !important;}
/* 筌롫뗄�뵥獄쏄퀡瑗� */
.main-banner{display:block;width:100%;height:auto}
.main-banner li img{width:100%}
.main-banner li{float:left;width:48%;height:auto;margin:1%;border:#ddd 1px solid;box-sizing:border-box;text-align:center;background:#fff}
#layer1{right:0px;top:0}
/* 筌뤴뫀而�占쎌뵬 筌롫뗀�뤀 */
.pop-layer2{overflow:auto;display:none;position:fixed;top:0;right:0;width:75%;height:100%;background:#fff/*url('../images/trans.png')repeat 0 0*/;z-index:10}
.pop-layer2 .pop-conts{padding:15px 10%}
.pop-layer2 dl{clear:both;display:inline-block;width:100%;margin-top:10px}
.pop-layer2 dl dt{position:relative;line-height:40px;border-top:#e5e5e5 1px solid;color:#444;font-size:16px;font-weight:normal}
.pop-layer2 dl dd a{display:block;line-height:30px;color:#555;font-size:14px}
.pop-layer2 dl dd a em{display:inline-block;width:4px;height:4px;margin:0px 8px 2px 8px;vertical-align:middle;background:#666}
.pop-layer2 dl dd{display:none;margin-bottom:10px}
.pop-layer2 dl dt span{position:absolute;top:10px;right:0;width:20px;line-height:20px}
.pop-layer2 dl dt.on span{color:#12abe4}
.pop-layer2 .btn-r{position:fixed;bottom:10px;right:10px;background:#12abe4;width:40px;line-height:40px;text-align:center;z-index:1100}
.pop-layer2 .btn-r img{width:100%}
#layer2{right:0px;top:0px}
a.cbtn {display:inline-block;height:32px; padding:0 12px 0;line-height:15px}
#footer{padding:0px}
.m-footer{display:block;width:100%;padding:5px 0;line-height:40px;height:50px;text-align:center;font-size:11px;letter-spacing:-1px}
.graph-top button{width:100%}
.graph-top span{width:100%}
.chs-sub{width:100%}
.healthy_factor_category{justify-content: center;flex-wrap:wrap}
.healthy_factor_category>*{margin: 0 auto 20px;width:45%;min-width:300px}
}

.visual-box{
    display: flex;
}
.info02-wrap{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 50px;
}


.info-box02-1 {
    background-image: url('../images/main/infobox02-2.png');
    background-size: cover;
    background-position: center;
}
.button-bottom{
    position: relative;
    bottom: 15px;
}

@media screen and (min-width:730px){
    .visual-btn .color-navy{
        background-color: #092437;
        color: white;
    }
    .visual-btn .color-blue{
        background-color: #14265E;
        color: white;
    }
}

@media screen and (max-width:730px){
.category_tab{margin:50px 0 0}
.btn_box{top:unset;bottom:-35px}
.history-box .tab li,.healthy_facto_db li,.category_tab li{font-size:1em}
.db_classification_frame .db_box>div{display:block;margin:10px auto 0}
}

@media screen and (max-width:696px){
.middl_db_category{margin:10px 0 0 0;}
}
@media screen and (max-width:580px){
.step{font-size:3.5vw}.factor_article>div,.time>div{margin:0 auto;}
}

@media screen and (max-width:400px){
.infographic-box li{margin:10px 0;width:50%;height:70px}
.healthy_factor_category>*{width:95%;min-width: unset;}
}
@media screen and (max-width:360px){
.step{padding:0 5vw;font-size:0.75rem}
}