@charset "utf-8";
@import url('/common/font/ONEMobileTitle/ONEMobileTitle.css');
@import url('/common/font/montserrat/montserrat.css');



.mainSection {position:relative; padding-left:2rem; padding-right:2rem;}
.mainSection .inner {position:relative;}
.mainSection .inner:after {content:""; display:block; clear:both;}
.mainSection h2 strong,
.mainSection h3 strong,
.mainSection h4 strong,
.mainSection h5 strong {font-family:'ONEMobileTitle';}

.mainSection h2 strong {font-size:6.4rem;}
.mainSection h3 strong {font-size:4.2rem;}
.mainSection h4 strong {font-size:3.4rem;}
.mainSection h5 strong {font-size:2.6rem;}

@media (max-width:1024px){
	.mainSection h2 strong {font-size:5.4rem;}
}

@media (max-width:780px){
	.mainSection h2 strong {font-size:4.4rem;}
	.mainSection h3 strong {font-size:3.2rem;}
	.mainSection h4 strong {font-size:2.4rem;}
	.mainSection h5 strong {font-size:2rem;}
}
@media (max-width:580px){
	.mainSection h2 strong {font-size:3.4rem}
	
}

/* mainVisual */
.mainVisualWrap {padding-top:5rem; padding-bottom:5rem; background:linear-gradient(120deg, #ECEFF6, #F4F6F9);}
.mainVisualWrap .bak:before,
.mainVisualWrap .bak:after {content:""; display:block; position:absolute; z-index:1; background:url(../img/main/spr_viusal.png) no-repeat top 0 left 0; background-size:68.4rem auto;}
.mainVisualWrap .bak:before {bottom:-4rem; left:-17rem; width:20.2rem; height:24.5rem; background-position:0 0;}
.mainVisualWrap .bak:after {bottom:25rem; left:-20rem; width:15rem; height:15rem; background-position:-20.2rem 0;}
.mainLink h2 em {display:block; margin-bottom:2rem; color:#7D8597; font-family:'montserrat'; font-size:2.2rem;}
.mainLink h2 strong span {color:#0466C8;}
.mainLink .btnArea {padding-top:10rem;}
.mainLink .btnArea ul {display:flex; flex-wrap:wrap; margin:-1rem;}
.mainLink .btnArea li {width:33.3333%; padding:1rem; border-radius:2.5rem;}
.mainLink .btnArea li a {display:block; border-radius:2rem; text-align:center; font-weight:400; color:#333; background:#fff; box-sizing:border-box; transition:.3s all; -webkit-transition:.3s all;}
.mainLink .btnArea li a strong {position:relative; display:block; padding:2.5rem 0; font-size:1.8rem; font-weight:400;}
.mainLink .btnArea li a strong:before {content:""; display:block; width:4rem; height:4rem; margin:0 auto 1.5rem; background:url(../img/main/main_link_ico.svg) no-repeat; background-size:12rem;}
.mainLink .btnArea li a strong.ty1:before {background-position:0 0;}
.mainLink .btnArea li a strong.ty2:before {background-position:-4rem 0;}
.mainLink .btnArea li a strong.ty3:before {background-position:-8rem 0;}
.mainLink .btnArea li a:focus,
.mainLink .btnArea li a:hover {transform:translateY(-1rem); border:3px solid transparent; background-image:linear-gradient(#fff, #fff), linear-gradient(120deg, #0466C8, #00AC97); background-origin:border-box; background-clip:content-box, border-box;}
.mainLink .btnArea li a:focus strong,
.mainLink .btnArea li a:hover strong {color:#0466C8; font-weight:600;}

.mainGraph {position:relative;}
.mainGraph .graph-box {min-height:55rem; background:#fff; border-radius:12rem 2.5rem 2.5rem; box-shadow:0 0 3rem rgba(0,0,0,0.08);}
.mainGraph .graph-box h4 {text-align:center;}
.mainGraph .graph-box h4 strong {color:#000; vertical-align:middle;}
.mainGraph .graph-box h4 span {display:inline-block; margin-left:1.5rem; vertical-align:middle; padding:1rem 2rem; background:#979DAC; color:#fff; border-radius:3rem; font-family:'ONEMobileTitle';}
.mainGraph .graph-box .swiper-slide > a {padding:4rem 5rem;}
.mainGraph .control button {width:8rem; height:8rem; border-radius:50%; box-shadow:0 0 3rem rgba(0,0,0,0.08); text-indent:-9999px; background:#fff url(../img/main/main_graph_control.svg) no-repeat 0 0; background-size:32rem; overflow:hidden;}
.mainGraph .control .prev,
.mainGraph .control .next {position:absolute; top:50%; margin-top:-1.15em; z-index:5;}
.mainGraph .control .prev {left:-4rem;}
.mainGraph .control .next {right:-4rem; background-position:-16rem 0;}
.mainGraph .control button:hover {background-color:#0353A4;}
.mainGraph .control .prev:hover {background-position:-8rem 0;}
.mainGraph .control .next:hover {background-position:-24rem 0;}

.mainGraph .graphWrap .chartdiv {width:100%; min-height:66rem; font-size:14px;}
.mainGraph .graphArea {display:block; position:relative; max-width:85rem; margin:0 auto; height:45rem;}
.mainGraph .graphArea > * {display:block; position:relative; height:100%;}
.mainGraph .graphArea .counter-title {display:block; position:absolute !important; top:43%; font-size:1.9rem; left:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); height:auto !important; z-index:1; text-align:center; font-weight:800;}
.mainGraph .graphArea .counter-title strong {font-weight:800 !important;}
.mainGraph .graphArea .counter-title em {display:block; color:inherit !important; font-weight:500; line-height:1.2;}

@media all and (max-width:780px) {
	.graphArea.mo-scroll {height:380px; overflow:auto;}
}
@media all and (max-width:640px) {
	.graphArea.mo-scroll > * {min-width:640px;}
}

.mainInfo {position:relative; z-index:1; width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.mainInfo .population {display:flex; align-items:center; width:77.6rem; justify-content:space-between; background:linear-gradient(120deg, #0466C8, #00AC97); padding:3.5rem; border-radius:1.5rem 5rem 1.5rem 1.5rem; color:#fff;}
.mainInfo .population > h5 > span {display:inline-block; margin-left:2rem; font-weight:400;}
.mainInfo .population > h5 > span > span {color:#fff; font-weight:800;}
.mainInfo .population span.total {padding:0.5rem 2rem; border-radius:3rem; border:2px solid #fff; font-size:2.2rem; font-weight:600; font-family:'montserrat';}
.mainInfo .population span.num {font-size:1.9rem;}
.mainInfo .population span.num em {display:inline-block; width:1.8rem; height:1.8rem; text-indent:-9999px; background:url(../img/main/ico_arrow_up_down.svg) no-repeat; background-size:5.4rem;}
.mainInfo .population span.num em.up {background-position:0 0;}
.mainInfo .population span.num em.keep {background-position:-1.8rem 0;}
.mainInfo .population span.num em.down {background-position:-3.6rem 0;}
.mainInfo .population p {color:rgba(255,255,255,0.8);}

.mainInfo .weather {width:calc(100% - 77.6rem); margin-top:3rem;}
.mainInfo .weather ul {display:flex; align-items:center;}
.mainInfo .weather li {position:relative; padding:0 3rem; color:#333; height:100%;}
.mainInfo .weather li + li:before {content:""; position:absolute; top:8px; left:0; display:block; width:1px; height:16px; background:rgba(0,0,0,0.1);}
.mainInfo .weather li:last-child {padding-right:0;}
.mainInfo .weather li span {padding-right:2.5rem; font-size:1.7rem; font-family:'ONEMobileTitle'; vertical-align:middle;}
.mainInfo .weather li strong {display:inline-block;}
.mainInfo .weather li strong > * {display:inline-block; vertical-align:middle;}
.mainInfo .weather li .temp,
.mainInfo .weather li .hum {font-size:2.4rem; font-family:'montserrat'; font-weight:600; vertical-align:middle;}
.mainInfo .weather li .temp .ico {width:3rem; height:3rem; background:no-repeat 50% 50%; background-size:3rem auto;}
.mainInfo .weather li .temp[data-temp-icon="01"] .ico {background-image:url(../img/main/img_temp_01.png);}
.mainInfo .weather li .temp[data-temp-icon="02"] .ico {background-image:url(../img/main/img_temp_02.png);}
.mainInfo .weather li .temp[data-temp-icon="03"] .ico {background-image:url(../img/main/img_temp_03.png);}
.mainInfo .weather li .temp[data-temp-icon="04"] .ico {background-image:url(../img/main/img_temp_04.png);}
.mainInfo .weather li .temp[data-temp-icon="05"] .ico {background-image:url(../img/main/img_temp_05.png);}
.mainInfo .weather li .temp[data-temp-icon="06"] .ico {background-image:url(../img/main/img_temp_06.png);}
.mainInfo .weather li .temp[data-temp-icon="07"] .ico {background-image:url(../img/main/img_temp_07.png);}

.mainInfo .weather li .hum .ico {width:3rem; height:3rem; background:url(../img/main/img_humidity.png) no-repeat 50% 50%; background-size:3rem auto;}

.mainInfo .weather li .dust .ico {width:3.6rem; height:3.6rem; background:no-repeat 50% 50%; background-size:3.6rem auto;}
.mainInfo .weather li .dust[data-dust-icon="00"] {color:#ccc;}
.mainInfo .weather li .dust[data-dust-icon="00"] .ico {background-image:url(../img/main/img_dust_00.svg);}
.mainInfo .weather li .dust[data-dust-icon="01"] {color:#0466C8;}
.mainInfo .weather li .dust[data-dust-icon="01"] .ico {background-image:url(../img/main/img_dust_01.svg);}
.mainInfo .weather li .dust[data-dust-icon="02"] {color:#009966;}
.mainInfo .weather li .dust[data-dust-icon="02"] .ico {background-image:url(../img/main/img_dust_02.svg);}
.mainInfo .weather li .dust[data-dust-icon="03"] {color:#FF9933;}
.mainInfo .weather li .dust[data-dust-icon="03"] .ico {background-image:url(../img/main/img_dust_03.svg);}
.mainInfo .weather li .dust[data-dust-icon="04"] {color:#FF4C00;}
.mainInfo .weather li .dust[data-dust-icon="04"] .ico {background-image:url(../img/main/img_dust_04.svg);}
.mainInfo .weather li .dust[data-dust-icon="05"] {color:#CC0033;}
.mainInfo .weather li .dust[data-dust-icon="05"] .ico {background-image:url(../img/main/img_dust_05.svg);}
.mainInfo .weather li .dust[data-dust-icon="06"] {color:#000;}
.mainInfo .weather li .dust[data-dust-icon="06"] .ico {background-image:url(../img/main/img_dust_06.svg);}


@media (min-width:1025px){
	.mainLink {position:absolute; top:0; left:0; width:48rem; margin-top:8rem;}
	.mainGraph {width:85rem; float:right;}
	.mainInfo {float:left; margin-top:-2.5rem;}
	.mainInfo .weather ul {justify-content:end;}
}
@media (max-width:1440px){
	.mainInfo .weather li {padding:0 2rem;}
}

@media (max-width:1024px){
	.mainVisualWrap .bak:before {bottom:auto; left:0; top:0; width:9.2rem; height:11.5rem; background-size:31.4rem auto;}
	.mainVisualWrap .bak:after {bottom:auto; left:auto; top:-2rem; right:0; width:9rem; height:11rem; background-position:-16.2rem 0; background-size:53.4rem auto;}
	.mainInfo .population,
	.mainInfo .weather {width:100%; margin-top:2rem;}
	
	.mainLink h2 {position:relative; z-index:2; text-align:center;}
	.mainLink .btnArea {padding-top:4rem;}
	
	.mainInfo .weather ul {justify-content:center;}
	
	.mainGraph {margin-top:2rem;}
	.mainGraph .graph-box {border-radius:2.5rem;}
	.mainGraph .control .prev {left:-2rem;}
	.mainGraph .control .next {right:-2rem;}
}
@media (max-width:780px){
	.mainInfo .population {display:block;}
}
@media (max-width:600px){
	.mainLink h2 em {font-size:1.6rem;}
	.mainInfo .population {padding:2rem;}
	.mainInfo .weather li .temp,
	.mainInfo .weather li .hum,
	.mainInfo .weather li .dust  {display:block;}
	.mainInfo .weather li span {padding-right:0;}
	.mainGraph .graph-box h4 strong {display:block;}
	.mainGraph .graph-box h4 span {margin-left:0; margin-top:1rem;}
}
@media (max-width:490px){
	.mainVisualWrap .bak:before {display:none;}
	.mainInfo .population 	{text-align:center;}
	.mainInfo .population h5 > * {display:block; margin:1rem 0;}
	
	.mainInfo .weather li {width:33.3333%; text-align:center; padding:0 1rem;}
	
	.mainInfo .weather li .temp,
	.mainInfo .weather li .hum {font-size:1.6rem;}
	
	.mainLink .btnArea li {width:100%;}
	.mainLink .btnArea li a strong {text-align:left; padding-left:8rem;}
	.mainLink .btnArea li a strong:before {position:absolute; top:50%; left:2rem; transform:translateY(-50%);}
	.mainLink .btnArea li a strong br {display:none;}
}


/* mainQuickWrap */
.mainQuickWrap {padding-top:8rem; padding-bottom:4rem;}
.mainQuickWrap .inner:before {content:""; display:block; position:absolute; bottom:-10rem; right:-18rem; width:12rem; height:13rem; background:url(../img/main/spr_viusal.png) no-repeat top -15rem left -20.2rem; background-size:68rem;}
.mainQuick {position:relative;}
.mainQuick h3 strong {display:block; color:#00AC97; margin-bottom:2rem;}
.mainQuick h3 span {color:#888888; font-size:1.188em;}
.mainQuick ul {display:flex; flex-wrap:wrap; padding:2rem 0;}
.mainQuick ul li {width:20%;}
.mainQuick ul li a {display:block; text-align:center;}
.mainQuick ul li a .icon {display:block; margin:0 auto 1rem; width:8.7rem; height:8.7rem; transition:.3s all; -webkit-transition:.3s all; background:url(../img/main/main_quick_ico.svg) no-repeat; background-size:43.5rem auto;} 
.mainQuick ul li a .icon.ty1 {background-position:0 0;}
.mainQuick ul li a .icon.ty2 {background-position:-8.7rem 0;}
.mainQuick ul li a .icon.ty3 {background-position:-17.4rem 0;}
.mainQuick ul li a .icon.ty4 {background-position:-26.1rem 0;}
.mainQuick ul li a .icon.ty5 {background-position:-34.8rem 0;}
.mainQuick ul li a strong {color:#222; font-weight:400; font-size:1.9rem;}

.mainQuick ul li a:hover .icon {transform:translateY(-1rem);}



/* mainOtherWrap */
.mainOtherWrap {padding-top:8rem; padding-bottom:10rem;}
.mainOtherWrap .bak:before,
.mainOtherWrap .bak:after {content:""; display:block; position:absolute; z-index:1; background:url(../img/main/spr_viusal.png) no-repeat; background-size:68.4rem auto;}
.mainOtherWrap .bak:before {top:20rem; left:-18rem; width:12rem; height:13rem; background-position:-56.8rem 0;}
.mainOtherWrap .bak:after {bottom:-6rem; right:-15rem; width:21.2rem; height:22.2rem; background-position:-35.2rem 0;}
.mainSite h3 strong {display:inline-block; vertical-align:sub; margin-bottom:4rem; color:#023E7D;}

.mainSite h3 span {color:#888888; font-size:1.188em;}

.mainSite ul {display:flex; flex-wrap:wrap; margin:-1.5rem;}
.mainSite ul li {width:50%; padding:1.5rem;}
.mainSite ul li a {position:relative; display:block; background:#fff; text-align:center; border-radius:1rem; border:1px solid #DADADA; box-sizing:border-box; transition:.1s all; -webkit-transition:.1s all;}
.mainSite ul li a img {display:block; width:100%;}
.mainSite ul li a:hover {border:2px solid #023E7D; box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.05);}

.mainPopup {position:relative; width:50rem;}
.mainPopup h3 {margin-bottom:4rem;}
.mainPopup h3 strong {color:#0466C8;}
.mainPopup .slider {position:relative; min-height:42rem; border-radius:3rem; overflow:hidden;}
.mainPopup .slider .swiper-container {position:absolute; top:0; left:0; bottom:0; right:0;}
.mainPopup .slider .swiper-wrapper,
.mainPopup .slider .swiper-slide {height:100%;}
.mainPopup .slider .swiper-slide,
.mainPopup .slider a,
.mainPopup .slider span {display:block; position:relative; height:100%; background:#F1F1F1;}

.mainPopup .swiper-slide > a {overflow:hidden;}
.mainPopup .swiper-slide > a:after {content:""; display:block; position:relative; padding-top:84%;}
.mainPopup .swiper-slide img {display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.mainPopup .control {position:absolute; top:0; right:0;}
.mainPopup .control .pager {display:inline-block; vertical-align:middle; width:auto; margin:0 2rem; color:#898B95; font-family:'montserrat'; font-weight:600; font-size:1.8rem;}
.mainPopup .control .swiper-pagination-current {color:#0466C8;}
.mainPopup .control button {width:4rem; height:4rem; text-indent:-9999px; margin:0 0.2rem; border-radius:50%; border:1px solid #ccc; background:url(../img/main/main_popup_control.svg) no-repeat; background-size:32rem auto;}
.mainPopup .control button.prev {background-position:0 0;}
.mainPopup .control button.stop {background-position:-4rem 0;}
.mainPopup .control button.play {display:none; background-position:-8rem 0;}
.mainPopup .control button.next {background-position:-12rem 0;}
.mainPopup .control button:hover,
.mainPopup .control button:focus {background-color:#0466C8;}
.mainPopup .control button.prev:hover,
.mainPopup .control button.prev:focus {background-position:-16rem 0;}
.mainPopup .control button.stop:hover,
.mainPopup .control button.stop:focus {background-position:-20rem 0;}
.mainPopup .control button.play:hover,
.mainPopup .control button.play:focus {display:none; background-position:-24rem 0;}
.mainPopup .control button.next:hover,
.mainPopup .control button.next:focus {background-position:-28rem 0;}

@media (min-width:1025px){
	.mainQuick	{padding-left:35rem;}
	.mainQuick h3 {position:absolute; top:50%; left:0; width:26rem; transform:translateY(-50%); -webkit-transform:trnaslateY(-50%);}
	
	.mainSite {position:absolute; top:0; left:0; width:82rem;}
	.mainSite h3 span {margin-left:1em;}
	.mainPopup {float:right;}
}
@media (max-width:1024px){

	.mainQuickWrap {padding-top:4rem; padding-bottom:2rem;}
	.mainOtherWrap {padding-top:2rem;}
	
	.mainQuickWrap .inner:before {bottom:-4rem; right:0; width:8rem; height:9rem; background-position:-14.2rem -10rem; background-size:46rem;}
	
	.mainOtherWrap .bak:before {left:0; top:50%; z-index:-1;}
	.mainOtherWrap .bak:after {right:0;}
	
	.mainSite h3 strong {margin-bottom:2rem;}
	.mainSite h3 span {display:block; margin-bottom:2rem;}
	.mainPopup {margin:4rem auto 0;}
}
@media (max-width:780px){
	.mainQuick ul li {width:33.3333%;}
	
	.mainSite ul {margin:-1rem;}
	.mainSite ul li {padding:1rem;}
	.mainOtherWrap .bak:before,
	.mainOtherWrap .bak:after {background-size:52.4rem auto;}
	.mainOtherWrap .bak:before {width:11rem; height:12rem; background-position:-43.8rem 0;}
	.mainOtherWrap .bak:after {width:16.2rem; height:17.2rem; background-position:-26.2rem 0;}
}
@media (max-width:580px){
	.mainPopup {width:100%;}
	.mainSite ul li {width:100%;}
	.mainQuick ul li a strong {font-size:1.6rem;}
}
@media (max-width:400px){
	.mainPopup h3 {margin-bottom:1rem;}
	.mainPopup .control {position:relative; top:auto; right:auto; text-align:right; margin-bottom:1rem;}
}