@charset "utf-8";

/* layout */
body{overflow-x:hidden}
.wrap{max-width:940px; margin:0 auto; position:relative;}
.main{position:relative; padding-top:50px;}
.content{position:relative; padding:4%;}
.content.none_padding{padding:0}
.layer_bg{display:block; width:100%; max-width:940px; height:100%; position:fixed; left:50%; top:0; transform:translateX(-50%); background:rgba(0,0,0,0.3); z-index:100}
.view_web{position:relative; display:block !important;}
.view_mobile {position:relative; display:none !important;}
.bold{font-weight:700 !important}

a:link, a:visited, a:hover, a:active {color: inherit; text-decoration: none;}

@media screen and (max-width:600px){
	.view_web {display:none !important;}
	.view_mobile {display:block !important;}
}

/* header */
.header{width:940px; height:50px; position:fixed; left:50%; top:0; transform:translateX(-50%); z-index:100; background-color:#fff; border-bottom-width:1px; border-bottom-style:solid; display:flex; align-items:center; justify-content:space-between;}
.header h1{position:relative; font-size:20px;}
.header h1 > img{height:30px;}

.header.quick{border-bottom-color:#fff}
.header.quick h1{display:none}
.quick_haeader_tit{width:100%; height:100%; background:#ddd; border-bottom-color:#fff; text-align:center; line-height:50px; font-weight:500; color:#fff}
.quick_header{position:absolute; left:0; top:50px; width:100%; background-color:#fff; font-size:0; border-bottom:1px solid #ddd; display:none;}
.quick_header > li{display:inline-block; width:50%;}
.quick_header > li > a{position:relative; display:flex; height:50px; font-size:14px; align-items:center; justify-content:center; font-weight:500;}
.quick_header > li > a img{width:30px; margin-right:10px;}
.quick_header > li > a .quick_inner{display:flex; align-items:center; width:190px;}
.quick_header .bullet{content:''; position:absolute; left:50%; top:0; transform:translate(-50%); width:0; height:0; border-top:10px solid #666; border-left:10px solid transparent !important; border-right:10px solid transparent !important}

.quick_header > li > a:after, .quick_header > li > a:before{background-color:var(--theme1)}
.quick_header > li:nth-child(1) a:after {content:""; position:absolute; bottom:0; left:5%; width:90%; height:1px;}
.quick_header > li:nth-child(1) a:before {content:""; position:absolute; right:0; top:20%; width: 1px; height:60%;}
.quick_header > li:nth-child(2) a:after {content:""; position:absolute; bottom:0; left:5%; width:90%; height: 1px;}
.quick_header > li:nth-child(3) a:before {content:""; position:absolute; right:0; top:20%; width:1px; height:60%;}

.static_header .header{position:relative; left:auto; top:auto; transform:none; height:auto; min-height:50px; flex-wrap:wrap;}
.static_header .main{padding-top:0}
.static_header .quick_header{position:relative; top:auto;}
.static_header .side_menu_btn{position:absolute; top:0}
.static_header .side_menu_btn.active{position:fixed}

@media screen and (min-width:769px){
  .header.quick{padding:0;}
  .header.quick + .side_menu_btn span{background-color:#fff !important}
}

@media screen and (max-width:940px){
  .header{width:100%; left:0; transform:none; padding:0 10px;}
}

@media screen and (max-width:768px){
  .quick_haeader_tit{display:none}
  .header.quick h1{display:block}
}

/* Side Menu Btn */
.side_menu_btn{width:50px; height:50px; display:inline-block; font-size:0; text-indent:-9999px; border:0; background:none; z-index:9999; cursor:pointer; position:fixed; right:50%; margin-right:-470px}
.side_menu_btn span {display:block; margin:0 auto; width:28px; height:4px; transition:all .3s; position:relative; background-color:#666}
.side_menu_btn span + span {margin-top: 6px;}
.side_menu_btn:hover span:nth-child(1){animation:ease 0.4s hoverLeft;}
.side_menu_btn:hover span:nth-child(3){animation:ease 0.4s hoverRight;}
.side_menu_btn.active span{background:#fff !important}
.side_menu_btn.active span:nth-child(1) {animation: ease .7s top forwards;}
.side_menu_btn.active span:nth-child(2) {animation: ease .7s scaled forwards;}
.side_menu_btn.active span:nth-child(3) {animation: ease .7s bottom forwards;}

@keyframes hoverLeft {
	0%{transform:translateY(0px)}
	50%{transform:translateY(2px)}
	100%{transform:translateY(0px)}
}

@keyframes hoverRight {
	0%{transform:translateY(0px)}
	50%{transform:translateY(-2px)}
	100%{transform:translateY(0px)}
}

@keyframes top {
  0%{top: 0; transform: rotate(0);}
  50%{top: 10px; transform: rotate(0);}
  100%{top: 10px; transform: rotate(45deg);}
}

@keyframes bottom {
  0%{bottom: 0;transform: rotate(0);}
  50%{bottom: 10px; transform: rotate(0);}
  100%{bottom: 10px; transform: rotate(135deg);}
}

@keyframes scaled {
  50%{transform: scale(0);}
  100%{transform: scale(0);}
}

@media screen and (max-width:940px){
  .side_menu_btn{right:0px; margin-right:0;}
}

/* Side Menu */
.side_menu{position:fixed; right:50%; top:0; z-index:99; background:#fff; width:100%; max-width:320px; height:100%; overflow-y:auto; transform:translateX(152%); transition:0.3s; padding-bottom:50px; opacity:0; z-index:-1; box-sizing:border-box}
.side_menu.active{transform:translateX(147%); opacity:1; z-index:999}
.side_menu_tit{position:relative; padding:15px 45px 15px 15px; color:#fff; font-size:20px; font-weight:bold; line-height:1; background-color:#666}
.side_menu_tit>span {font-size: 11px;}
.side_menu_list{position:relative;}
.side_menu_list .menu{position:relative; border-bottom:1px solid #ddd; transition:0.2s;}
.side_menu_list .menu.active dt{background:rgba(0,0,0,0.2)}
.side_menu_list .menu.two_depth dt:before{content:''; display:block; width:20px; height:0; border-bottom:2px solid #a1a1a1; position:absolute; right:15px; top:50%; transform:rotate(90deg); transition:0.3s;; pointer-events:none}
.side_menu_list .menu.two_depth dt:after{content:''; display:block; width:20px; height:0; border-bottom:2px solid #a1a1a1; position:absolute; right:15px; top:50%; transition:0.3s;	pointer-events:none}
.side_menu_list .menu.two_depth.active dt:after{display:none}
.side_menu_list .menu.two_depth.active dt:before{transform:rotate(0deg)}
.side_menu_list .menu dt{position:relative;}
.side_menu_list .menu dt a{color:#000; padding:15px 15px; font-weight:bold; display:block; font-size:15px}
.side_menu_list .menu dt a:hover{background:rgba(0,0,0,0.1)}
.side_menu_list .menu dd{position:relative; display:none; max-height:490px; overflow-y:auto}
.side_menu_list .menu dd a{color:#666; padding:15px 0; font-weight:bold; display:block; font-size:14px; padding-left:25px}
.side_menu_list .menu dd a:hover{background:rgba(0,0,0,0.1)}

@media screen and (max-width:940px){
	.side_menu{right:0; transform:translateX(10%)}
	.side_menu.active{transform:translateX(0%)}
	.side_menu_btn.active{right:0; margin-right:0}
}

/* Footer */
.footer{position:relative; background:#fff; font-size:0; padding:15px 20px 35px 20px; background-color: #fff; text-align:center;}
.footer:after{content:''; display:block; clear:both}
.footer .footer_logo{display:inline-block; vertical-align:middle; margin-right:40px; font-size:0}
.footer .footer_logo a{display:inline-block; vertical-align:middle; margin-right:14px}
.footer .footer_logo a:nth-last-child(1){margin-right:0}
.footer .footer_logo a img{height:45px}
.footer .footer_copy{display:inline-block; vertical-align:middle; width:calc(100% - 400px); color:#000; font-size:14px; text-align:left;}
.footer .footer_copy p{position:relative; margin:3px 0}
.footer .footer_copy p:nth-last-child(1){margin-bottom:0}

@media screen and (max-width:940px){
	.footer .footer_logo{display:block; padding-bottom:20px; margin-right:0; text-align:center}
	.footer .footer_copy{display:block; width:auto; text-align:center}
}

@media screen and (max-width:768px){
	.footer{padding:20px 15px 20px 15px}
	.footer .footer_logo{display:block; margin-right:0; margin:0 auto; padding-bottom:10px}
  .footer .footer_logo a img{height:35px;}
	.footer .footer_copy{display:block; width:auto; padding:10px 0 0 0; font-size:12px; text-align:center}
}

@media screen and (max-width:600px){
	.footer_copy span{display: block;}
}

/* Share */
.share_wrap{position:relative; background:#808080; padding:15px 0; text-align:center;}
.share_list{position:relative; font-size:0; overflow:hidden;}
.share_list > li{position:relative; display:inline-block; width:33.3%; box-sizing:border-box;}
.share_list > li:after{content:''; display:block; width:2px; height:100%; background:#fff; position:absolute; right:-1px; top:0}
.share_list > li:nth-last-child(1):after{display:none}
.share_list .share_tit{position:relative; text-align:center; font-size:15px; color:#fff; font-weight:bold}
.share_list .share_link{display:block; position:relative; text-align:center;}
.share_list .share_link .icon img{width: 30px; max-width:30px; min-height:30px; height:auto}
.share_list .share_link .txt{position:relative; color:#fff; font-weight:bold; font-size:15px; padding:5px 0 0 0}
.share_list .share_sns{position:relative; overflow:hidden}
.share_list .share_sns > li{display:inline-block; margin:5px 5px 0 5px}
.share_list .share_sns .share_link .txt{display:none}

@media screen and (max-width:768px){
	.share_list > li{width:auto; margin:5px 5px 0 5px}
	.share_list > li:after{display:none}
	.share_list > li:first-child{display:block; padding:0 0 15px 0}
	.share_list .share_tit {display: none;}
	.share_list .share_link .txt{font-size:12px}
	.share_list .share_sns .share_link .txt{display:block}
}

/* quick menu */
.quick_menu{position:relative; font-size:0;}
.quick_menu .tit{position:relative; padding:10px 5px; text-align:center; background-color:#666; color:#fff; font-size:15px; font-weight:500; font-size:16px;}
.quick_menu .tit .bullet{position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:0; height:0; border-top:10px solid #666; border-left:10px solid transparent !important; border-right:10px solid transparent !important; z-index:1;}
.quick_menu ul{font-size:0; position:relative; display:flex; flex-wrap:wrap;}
.quick_menu ul > li {text-align:center; display:inline-block; width:50%; vertical-align:top; box-sizing:border-box;}
.quick_menu ul > li > a{position:relative; padding:25px 5px 25px 120px; height:100%; display:block; border-style:solid; font-weight:700; font-size:20px; text-align:left; box-sizing:border-box;}
.quick_menu ul > li > a:after, .quick_menu ul > li > a:before{background-color:var(--theme1)}
.quick_menu ul > li:nth-child(1) a:after {content:""; position:absolute; bottom:0; left:5%; width:90%; height:1px;}
.quick_menu ul > li:nth-child(1) a:before {content:""; position:absolute; right:0; top:20%; width: 1px; height:60%;}
.quick_menu ul > li:nth-child(2) a:after {content:""; position:absolute; bottom:0; left:5%; width:90%; height: 1px;}
.quick_menu ul > li:nth-child(3) a:before {content:""; position:absolute; right:0; top:20%; width:1px; height:60%;}
.quick_menu ul > li > a > img{width:50px; vertical-align:middle; margin-right:5px}

@media screen and (max-width:940px){
  .quick_menu ul > li > a{padding:8% 2% 8% 20%; font-size:3vw}
  .quick_menu ul > li > a > img{width:15%}
}

/* quick menu (style1) */
.quick_scroll{position:fixed; width:40px; z-index:100; bottom:80px; left:50%; margin-left:405px;}
.quick_scroll > li{margin-top:10px;}
.quick_scroll > li > a{display:block; width:100%; position:relative}
.quick_scroll > li > a > span{position:absolute; right:calc(100% + 10px); top:0; height:100%; background:#ddd; border-radius:10px; white-space:nowrap; display:flex; align-items:center; justify-content:center; padding:0 10px; font-size:13px; font-weight:500; display:none; transform:0.2s;}
.quick_scroll > li > a > span .bullet{display:inline-block; position:absolute; right:-5px; top:calc(50% - 2px); width:0; height:0; border-left:5px solid #ddd; border-bottom:5px solid transparent !important; border-top:5px solid transparent !important}
.quick_scroll > li > a:hover > span{display:flex;}

/* quick menu (style2) */
.quick_menu_open{display:flex; align-items:center; justify-content:center; width:60px; height:60px; overflow:hidden; border-radius:50%; background-color:#333; font-weight:600; font-size:14px; color:#fff; text-align:center;}
.quick_menu_open:hover{animation:quickBounce 0.4s ease;}
.quick_scroll_2{position:fixed; bottom:80px; left:50%; margin-left:395px; z-index:100;}
.quick_scroll_2 > ul{position:absolute; right:calc(100% + 20px); bottom:-55px; background-color:#333; padding:15px; text-align:left; border-radius:5px; display:none}
.quick_scroll_2 > ul > li{margin-bottom:10px;}
.quick_scroll_2 > ul > li:nth-last-child(1){margin-bottom:0}
.quick_scroll_2 > ul > li > a{display:flex; align-items:center;}
.quick_scroll_2 > ul > li > a .img{width:30px; background-color:#fff; margin-right:10px; padding:5px; border-radius:3px;}
.quick_scroll_2 > ul > li > a .txt{width:max-content; white-space:nowrap; font-weight: 400}
.quick_scroll_2 > ul > li > a .txt:hover{text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 1.5px; text-decoration-color: #FFFFFF;}
.quick_scroll_2 > ul > li.bullet{display:inline-block; position:absolute; right:-10px; top:calc(50% + 20px); width:0; height:0; border-left:10px solid #333; border-bottom:10px solid transparent !important; border-top:10px solid transparent !important}

@keyframes quickBounce {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(3px);
  }
  100% {
      transform: translateY(0);
  }
}

/* Scroll Top */
a.scroll_top{display:inline-block; width:50px; height:50px; overflow:hidden; border-radius:50%; background:url('../img/common/scroll_top.png') center 12px #d9d9d9 no-repeat; position:fixed; bottom:20px; left:50%; margin-left:400px; z-index:100; font-weight:400; font-size:15px; color:#fff; line-height:63px; text-align:center;}
a.scroll_top:hover{transition:0.3s; -webkit-transition:0.3s;}

@media screen and (max-width:940px){
	a.scroll_top{left:auto; right:20px; margin-left:0; width:45px; height:45px; font-size:12px; line-height:60px}
  .quick_scroll{left:auto; right:21px; margin-left:0;}
  .quick_scroll_2{left:auto; right:15px; margin-left:0;}
  .quick_menu_open{width:55px; height:55px; font-size:13px}
}

/* heading */
.heading{position:relative; padding:20px 20px; text-align:left; color:#fff; border-left-width:20px; border-left-style:solid; border-radius:0 0 80px 0;}

.heading.type1{background-color:#666; border-color:#999; padding:3% 6%; margin-bottom:30px;}
.heading.type1 .bullet{content:''; width:0; height:0; display:inline-block; border-top:30px solid #666; border-left:0px solid transparent !important; border-right:30px solid transparent !important; position:absolute; right:10%; bottom:-30px;}
.heading.type1 .num{display:inline-block; width:10%; height:auto; aspect-ratio:1/1; position:absolute; right:5%; top:20%; background-color:#fff; display:flex; align-items:center; justify-content:center; border-radius:100%; overflow:hidden; font-weight:700; font-size:30px}
.heading.type1 .num span{font-weight:500; font-size:16px; vertical-align:baseline;}
.heading.type1 .tit{position:relative}
.heading.type1 .tit img{width:30%}
.heading.type1 .voice{position:relative; margin-top:5%; font-size:18px; font-weight:500}
.heading.type1 .voice a{vertical-align:middle;}
.heading.type1 .voice button{width:11%; height:auto; aspect-ratio:1/1; border-radius:100%; background-color:#fff; overflow:hidden; vertical-align:middle; margin-right:2%}
.heading.type1 .voice button img{width:60%}
.heading.type1 .voice span {font-size: 15px; vertical-align:middle;}
.heading.type1 .date{position:absolute; right:5%; bottom:16.5%;}
.heading.type1 .date li{display:inline-block; font-size:15px; margin-left:20px; vertical-align:top;}
.heading.type1 .date li b{padding-right:10px; margin-right:10px; position:relative; vertical-align:top;}
.heading.type1 .date li b:after{content:''; display:inline-block; width:1px; height:70%; position:absolute; right:0; top:23%; background-color:#fff} 

.heading.type2{background-color:#fff; border-color:#999; padding:40px 20px; color:#000; display:flex; align-items:stretch;}
.heading.type2 .left{width:60%; border-right:1px solid #666; font-weight:700}
.heading.type2 .left .tit{font-size:30px;}
.heading.type2 .left .desc{font-size:20px; margin-top:2%;}
.heading.type2 .left .vol{margin-top:5%; font-size:20px;}
.heading.type2 .right{width:40%; padding:0 0 0 20px; font-weight:500; display:flex; flex-wrap:wrap;}
.heading.type2 .right .desc{font-size:18px;}
.heading.type2 .right span{font-weight:700;}
.heading.type2 .right .voice{position:relative; margin-top:20%; font-size:18px; font-weight:500}
.heading.type2 .right .voice button{width:25%; height:auto; aspect-ratio:1/1; border-radius:100%; background-color:#666; overflow:hidden; vertical-align:middle; margin-right:2%; margin-top:auto;}
.heading.type2 .right .voice button img{width:60%}
.heading.type2 .right .voice span{display:inline-block; vertical-align:middle; margin-left:1%;}

.heading.type3{background-color:#666; border-color:#999; padding:4% 15% 4% 4%;}
.heading.type3 .tit{font-size:45px; font-weight:700; margin-top:2%; line-height:1.2}
.heading.type3 .desc{font-size:20px; font-weight:700; margin-top:2%;}
.heading.type3 .tail{margin-top:5%; font-size:15px}
.heading.type3 .tail p:nth-child(1){font-weight:500}
.heading.type3 .tail p:nth-child(2){opacity:0.8; margin-top:0.5%}
.heading.type3 .vol{font-weight:700; font-size:30px; position:absolute; right:4%; top:4%; text-align:right;}
.heading.type3 .vol span{font-size:15px}
.heading.type3 .voice{position:absolute; width:10%; right:4%; bottom:10%; font-size:18px; font-weight:500; text-align:center;}
.heading.type3 .voice button{width:100%; height:auto; aspect-ratio:1/1; border-radius:100%; background-color:#666; overflow:hidden; vertical-align:middle; margin-right:2%; margin-top:auto;}
.heading.type3 .voice button img{width:60%}
.heading.type3 .voice span{display:block; font-size:15px; white-space:nowrap; margin-top:10%; margin-left:-10%}

.heading_bottom_img{position:relative; border-left-width:20px; border-left-style:solid; border-color:#999; background-color:#666; margin-top:-10%; padding:15% 5% 5% 5%;}

@media screen and (max-width:940px){
  .heading{border-left-width:2vw; border-radius:0 0 50px 0;}

  .heading.type1{padding:4% 4%}
  .heading.type1 .tit img{width:40%}
  .heading.type1 .num{width:15%; font-size:5vw}
  .heading.type1 .num span{font-size:3vw}
  .heading.type1 .voice{font-size:3vw}
  .heading.type1 .voice span {font-size: 2.5vw;}
  .heading.type1 .date{position:relative; right:0; bottom:0; margin-top:5%; text-align:right;}
  .heading.type1 .date li{font-size:2.2vw; margin-left:3%; white-space:nowrap;}

  .heading.type2{padding:4% 4%}
  .heading.type2 .left{width:55%}
  .heading.type2 .left .tit{font-size:4vw}
  .heading.type2 .left .desc{font-size:3vw}
  .heading.type2 .left .vol{font-size:3vw}
  .heading.type2 .right{width:45%}
  .heading.type2 .right .desc{font-size:2.2vw}
  .heading.type2 .right .voice{font-size:3vw}

  .heading.type3 .hd{font-size:2.7vw;}
  .heading.type3 .tit{font-size:6.5vw;}
  .heading.type3 .desc{font-size:3vw;}
  .heading.type3 .tail{font-size:3vw}
  .heading.type3 .vol{font-size:5.5vw}
  .heading.type3 .vol span{font-size:3vw}
  .heading.type3 .voice{right:6%;}
  .heading.type3 .voice span{font-size:2vw; margin-left:-15%}

  .heading_bottom_img{border-left-width:2vw;}
}

@media screen and (max-width:600px){
	 .heading.type1 .date li{font-size:14px; margin-left:1%; }
}


/* content */
.page_title{text-align:center; font-size:35px; margin:5px 0;}
.page_title_small{text-align:center; font-size:30px; margin:5px 0;}
.page_title_mini{text-align:center; font-size:22px; margin:5px 0;}
.br_solid{height:1px; background-color:#666; margin:20px 0;}
.br_dotted{height:0; border-bottom-width:1px; border-bottom-style:dotted; margin:5% 0;}

.box_title{padding:1.5% 2.5%; border-style:solid; border-width:1px; background-color:#999; font-weight:700; font-size:30px;}

.tit_style{text-align:left; font-size:17px; text-align:justify; word-break:break-all; word-wrap:break-word; line-height:1.6; color:#000; font-weight:700;}
.txt_style{text-align:left; font-size:16px; text-align:justify; word-break:break-all; word-wrap:break-word; line-height:1.6; color:#000; font-weight:400; margin:10px 0;}
.txt_style b{font-weight:600;}
.txt_style.indent{padding-left:10px; position:relative;}
.txt_style.indent:before{content:'-'; position:absolute; left:0; top:1px;}

.hover_bullon{position:relative; display:inline-block; cursor:pointer; text-indent:0; line-height:1.4;}
.hover_bullon .bullon{display:inline-block; position:absolute; left:-14px; bottom:-5px; box-sizing:border-box; text-align:left; font-size:13px; transform:translateY(95%); border-radius:3px; opacity:0; transition:0.2s; z-index:5; pointer-events:none; word-break:break-all; width:250px; background-color:#ddd;}
.hover_bullon .bullon a{position:relative; color:#fff; display:block; padding:10px; border-radius:5px; font-weight: normal;}
.hover_bullon .bullon_bullet{position:absolute; top:-10px; left:10px; display:inline-block; width:0; height:0; border-left:10px solid transparent !important; border-right:10px solid transparent !important; border-bottom-width:15px; border-bottom-style:solid;}
.hover_bullon:hover .bullon{transform:translateY(100%); opacity:1; pointer-events:auto}
.hover_bullon.right .bullon{left:auto; right:-15px}
.hover_bullon.right .bullon_bullet{left:auto; right:10px}
.hover_bullon .label_box:nth-child(n+2){margin-left:-3px;}

.label_box{display:inline-block; font-size:11px; background-color:#666; color:#fff; vertical-align:top; width:13px; height:13px; line-height:13px; text-align:center; cursor:pointer}
.label_box + .label_box{margin-left:3px}

.tit_point{position:relative; font-size:25px; font-weight:700; padding-left:35px; margin:1% 0;}
.tit_point:before{content:''; width:24px; height:26px; display:inline-block; background-color:var(--theme1); position:absolute; left:0; top:6px; border-radius:2px;}

.dl_style{position:relative; font-size:16px; text-align:justify; word-break:break-all; word-wrap:break-word; line-height:1.6; color:#000; font-weight:500; margin:1% 0;}
.dl_style dt{position:relative; font-weight:700; padding-left:10px;}
.dl_style dt:before{content:''; display:inline-block; width:4px; height:4px; border-radius:100%; background-color:#000; position:absolute; left:0; top:12px}
.dl_style dd{font-weight:400; position:relative; padding-left:10px; margin:0.5% 0;}
.dl_style dd:before{content:'-'; position:absolute; left:0; top:0px}

.lake_box{position:relative;}
.lake_box .lake_tit{background-color:#999; color:#fff; padding:1% 1%; font-weight:700; font-size:20px; text-align:center;}
.lake_box .lake_list{position:relative; padding:3% 2%; background-color:#ddd; display:flex; align-items:flex-start; justify-content:space-between;}
.lake_box .lake_list > li{width:20%;}
.lake_box .lake_list > li > a{display:flex; width:100%; height:100%; position:relative; align-items:center;}
.lake_box .lake_label{position:relative; display:flex; align-items:flex-end; justify-content: flex-start; background-color:#fff; width:60px; height:60px; box-sizing:border-box; border-style:solid; border-width:1px; border-radius:5px; font-size:12px; padding:2%; font-weight:500; margin-right:5px}
.lake_box .lake_label:after{content:""; display:inline-block; width:8px; height:8px; border-top: 2px solid var(--theme1); border-right:2px solid var(--theme1); position:absolute; right:10%; top:10%}
.lake_box .lake_label:before{content:''; display:inline-block; width:13px; height:2px; background-color:var(--theme1); transform:rotate(135deg); position:absolute; right:9.8%; top:20%}
.lake_box .lake_txt{font-size:14px; font-weight:500}

.label_tit{text-align:center; margin:2% 0;}
.label_tit span{display:inline-block; padding:0.5% 2%; color:#fff; font-weight:700; font-size:20px; border-radius:30px; background-color:#666;}

.bullet_tit{position:relative; text-align:center; font-weight:700; font-size:25px; padding:1.5% 1%; border-style:solid; border-top-width:1px; border-bottom-width:1px; border-color:#666; margin-bottom:25px;}
.bullet_tit:before {content: ""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); border-top:10px solid #666; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:0 solid transparent;}
.bullet_tit:after {content: ""; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-top: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0 solid transparent;}

.border_tit{position:relative; text-align:center; font-weight:700; font-size:25px; padding:1% 1%; border-style:solid; border-top-width:1px; border-bottom-width:1px; border-color:#666; margin-bottom:25px;}

.img_tit{font-weight:700; font-size:20px; margin:1.5% 0;}

.img_place{position:relative}
.img_place > img{width:100%;}

.img_grid{position:relative; display:flex; justify-content:space-between; gap:5%}
.img_grid > img{max-width:45%}
.img_grid.center_border > img{max-width:47%}
.img_grid.center_border:before{content:''; border-left:1px dotted #666; height:93%; position:absolute; left:50%; top:4%; display:inline-block;}

.poster_place{position:relative; padding:5% 4% 60% 4%; background-position:center bottom; background-size:100% auto; background-repeat:no-repeat;}
.color_place{position:relative; padding:5% 4%;}

.circle_tit{position:relative; text-align:center;}
.circle_tit span{display:inline-block; border-width:1px; border-style:solid; border-color:#666; color:#666; border-radius:50%; font-size:20px; padding:1.5% 3%; font-weight:500}

.tail_list{position:relative;}
.tail_list > li{display:block; margin:5px 0; font-size:13px; position:relative; padding-left:20px; list-style:none; font-weight:500;}
.tail_list > li > b{display:inline-block; background-color:#666; font-size:11px; width:13px; height:13px; line-height:13px; text-align:center; position:absolute; left:0; top:2px;}
.tail_list > li.pl30{padding-left:30px;}
.tail_list > li > span{position:absolute; left:0; top:0px;}

.inner_dl{padding:20px; text-align:left; background-color:#ddd;}
.inner_dl > dt{font-weight:700; font-size:17px;}
.inner_dl > dd{font-weight:400; font-size:16px; margin:5px 0 10px 0;}

.cursor_btn{display:flex; text-align:left; align-items:center; justify-content:flex-start; width:180px; height:auto; aspect-ratio:1/1; background-color:#ddd; border-radius:100%; overflow:hidden; font-size:28px; font-weight:700; box-sizing:border-box; padding-left:40px;}
.cursor_btn img{position:relative; top:5px;}

.popup{position:fixed; z-index:999; left:50%; top:5%; width:800px; height:90%; transform:translateX(-50%); overflow-y:auto; text-align:center; background-color:#fff; display:none; box-sizing:border-box; padding:20px 0;}
.popup > img{display:block; width:90%; margin:0 auto;}
.popup > img:nth-child(n+2){margin-top:10px;}
.popup .popup_close{width:40px; height:40px; display:inline-block; cursor:pointer; background:none; border:0; padding:8px 0 0 0; box-sizing:border-box; position:absolute; right:0; top:0px; z-index:99;}
.popup .popup_close span{display:block; margin:0 auto; width:24px; height:4px; background-color:#fff; position:relative; transition:all .3s;}
.popup .popup_close span + span{margin-top:6px;}
.popup .popup_close span:nth-child(1){animation:ease .7s top forwards;}
.popup .popup_close span:nth-child(2){animation:ease .7s scaled forwards;}
.popup .popup_close span:nth-child(3){animation:ease .7s bottom forwards;}

.popup#voice_popup{max-width:600px; height:auto;}

.voice_wrap{position:relative; padding:10% 5% 0 5%;}
.voice_wrap .backdrop{position:absolute; width:100%; left:0; top:0; transform:translateY(-75%); z-index:-1;}
.voice_wrap .voice_play{margin:20px auto 0;}
.voice_wrap .voice_play audio{width:100%; display:block;}

@media screen and (max-width:940px){
  .page_title{font-size:5vw}
  .page_title_small{font-size:3.5vw}
  .page_title_mini{font-size:2.5vw}
  .br_solid{margin:2% 0}

  .box_title{font-size:27px}

  .tit_style{font-size:16px}
  .txt_style{font-size:15px}

  .tit_point{padding-left:25px}
  .tit_point:before{width:20px; height:21px; top:5px}

  .tit_point{font-size:25px}

  .dl_style{font-size:15px}

  .lake_box .lake_tit{font-size:3.5vw}
  .lake_box .lake_list{gap:5px}
  .lake_box .lake_list > li > a{display:block}
  .lake_box .lake_label{width:65%; height:auto; padding:4%; aspect-ratio:1/1; font-size:1.8vw}
  .lake_box .lake_label:before{top:12px; right:6px}
  .lake_box .lake_label:after{right:6px; top:6px;}
  .lake_box .lake_txt{margin-top:5%; display:block; font-size:2.5vw}

  .label_tit span{font-size:3vw}

  .bullet_tit{font-size:20px}

  .border_tit{font-size:20px}

  .img_tit{font-size:17px}

  .poster_place{padding:5% 4% 50% 4%}

  .circle_tit span{font-size:17px;}

  .inner_dl{padding:4%;}
  .inner_dl > dt{font-size:16px;}
  .inner_dl > dd{font-size:15px;}

  .cursor_btn{font-size:4vw; width:30%; padding-left:7%}
  .cursor_btn img{width:20%}

  .hover_bullon .bullon{display:none !important}

  .popup{left:5%; top:5%; width:90%; height:90%; transform:none;}
  .popup#voice_popup{left:50%; transform:translateX(-50%)}
}

@media screen and (max-width:600px){
  .page_title{font-size:7vw}
  .page_title_small{font-size:21px}
  .page_title_mini{font-size:19px}

  .box_title{font-size:25px}
  .tit_point{font-size:22px}

  .img_grid{display:block; text-align:center;}
  .img_grid > img{display:block; width:100% !important; max-width:100% !important; width:auto; margin:0 auto;}
  .img_grid > img:nth-child(2){margin-top:5%;}
  .img_grid.center_border:before{display:none}
}


/* table */
		.table-title {color: #00a896; font-weight: 700; margin-bottom: 20px; font-size: 20px; }
		.pic-title {color: #00a896; font-weight: 700; margin-bottom: 20px; font-size: 20px; }
 
/* [표 1] 제22대 국회 담배·금연 관련 법안 발의 현황 */
    .table-container1 {border-collapse: collapse; width: 100%; max-width: 960px; }
    .table-header {background-color: #dcf0ec; color: #111; font-size: 18px; font-weight: bold; text-align: center; padding: 12px 0; border: none; }
    .table-container1 tbody tr {border-bottom: 1px dotted #a0a0a0; }
    .table-container1 tbody tr.last-row {border-bottom: none; }
    .table-container1 td {padding: 12px 10px; vertical-align: middle; }
    .table-container1 .col-title {width: 15%; font-size: 16px; font-weight: bold; text-align: left; border-right: 1px solid #333; padding-right: 15px; }
    .table-container1 .col-bar {width: 25%; padding-left: 0; }
    .table-container1 .col-desc {width: 60%; line-height: 1.5; letter-spacing: -0.3px; font-size: 15px; font-weight: 400 }
    .table-container1 .bar {height: 24px; background-color: #20a396; display: flex; align-items: center; justify-content: flex-end; color: white; font-weight: bold; padding-right: 8px; box-sizing: border-box; min-width: 40px; }
    .table-container1 .bar-group {display: flex; align-items: center; gap: 6px; }
    .table-container1 .bar-mini {width: 4px; height: 24px; background-color: #20a396; }
    .table-container1 .bar-label-out {color: #20a396; font-weight: bold; font-size: 14px; }
    .table-container1 .total-row {border-top: none; border-bottom: none; background-color: #fff; }
    .table-container1 .total-row td {padding: 10px 0; border-top: none; border-bottom: none; background-color: #fff; }
    .table-container1 .total-row .col-title { border-right: 1px solid #333; background-color: #fff; }
    .table-container1 .total-box-left {background-color: #f0f7f6; border: 1px solid #20a396; border-right: none; height: 42px; display: flex; align-items: center; padding-left: 10px; font-weight: bold; box-sizing: border-box; }
    .table-container1 .total-box-right {background-color: #f0f7f6; border: 1px solid #20a396; border-left: none; height: 42px; display: flex; align-items: center; padding: 5px 6px 5px 0; box-sizing: border-box; }
    .table-container1 .total-bar {height: 100%; width: 100%; background-color: #20a396; display: flex; align-items: center; justify-content: flex-end; color: white; font-weight: bold; padding-right: 15px; font-size: 15px; box-sizing: border-box; }


/* [표 2] 제22대 국회 담배·금연 관련 공포 법안 목록 */
    .timeline-container {position: relative; max-width: 900px; margin: 0 auto; padding-left: 50px; /* 세로선과 원형 숫자가 들어갈 공간 */}
    
    /* 왼쪽 세로 실선 (타임라인 기둥) */
    .timeline-container::before {content: ''; position: absolute; top: 10px; bottom: 10px; left: 15px; /* 원형 숫자 중앙에 맞춤 */ width: 2px; background-color: #20a396;}
    
    /* 개별 항목 아이템 */
    .timeline-item {position: relative; margin-bottom: 20px;}
    
    /* 원형 숫자 뱃지 */
    .timeline-number {position: absolute; left: -50px; /* 컨테이너 padding-left 만큼 이동 */ top: 50%; transform: translateY(-50%); width: 33px; height: 33px; background-color: #20a396; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; z-index: 2; /* 세로선 위로 올라오게 */}
    
    /* 원형 숫자와 박스 사이를 잇는 점선 */
    .timeline-item::before {content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 15px; border-top: 2px dotted #20a396; z-index: 1;}
    
    /* 둥근 테두리 박스 내용 */
    .timeline-content {border: 2px solid #20a396; border-radius: 10px; padding: 15px 20px; background-color: #F3FAF8; position: relative;}
    
    /* 날짜 및 법률명 제목 영역 */
    .timeline-title {color: #20a396; font-weight: 400; font-size: 16px; margin-bottom: 8px;}
    
    /* 설명 텍스트 */
    .timeline-desc {line-height: 1.6; word-break: keep-all; margin: 0; font-size: 15px; font-weight: 400;}    


/* [그림 1] 담배·금연 관련 국민건강증진법 개정안 */
      .table-container2 {border-collapse: collapse; width: 100%; max-width: 1000px;}
      .table-container2 th {background-color: #20a396; color: white; font-weight: bold; text-align: center; padding: 12px 10px; border-bottom: 1.5px solid #20a396;  border-left: 1px solid white; border-right: 1px solid white; font-size: 16px; font-weight: 400 }
      .table-container2 th:first-child {border-left: none; }
      .table-container2 th:last-child {border-right: none; }
      .table-container2 td {padding: 5px 5px; vertical-align: middle; border: 1px solid #20a396; }
      .table-container2 td:first-child {border-left: none; }
      .table-container2 td:last-child {border-right: none; }        
      .table-container2 .col-subject-text {width: 15%; text-align: center; color: #20a396; font-weight: bold; line-height: 1.5; background-color: #eaf6f5; }
      .table-container2 .col-subject-img {width: 12%; text-align: center; background-color: #eaf6f5; }
      .table-container2 .img-placeholder {display: inline-block; width: 100%; border-radius: 5px; }
      .table-container2 .col-count {width: 12%; text-align: center; line-height: 1.5; color: #333; background-color: #fff; font-size: 15px; font-weight: bold;}
      .table-container2 .col-desc {width: 61%; text-align: left; line-height: 1.6; background-color: #fff; font-size: 15px; font-weight: 400 }      
      .table-container2 .col-desc p {margin: 0 0 6px 0; padding-left: 12px; text-indent: -12px; }
      .table-container2 .col-desc p:last-child {margin-bottom: 0; }

      @media screen and (max-width: 900px) {
					.timeline-desc br:nth-child(1){display: none}
			}

      @media screen and (max-width: 850px) {
      		.table-container1 .col-desc br{display: none}
      }			

      @media screen and (max-width: 768px) {
          .table-container1 .col-title {width: 20%; }
          .table-container1 .col-title br{display: none; }
            
          .table-container2 .col-subject-text {width: 20%}
          .table-container2 .col-subject-text br{display: none;}
          .table-container2 .col-desc br:nth-child(1){display: none;}
          .table-container2 .img-placeholder {width: 50px;}  
      }