@charset "utf-8";

#democracy {
	--visual-bg: url(../img/main/bg_main_visual01.jpg) no-repeat center/cover;
	--political_logo: url(../img/main/ico_political_logo01.svg) no-repeat center/cover;
	--txtgra: linear-gradient(90deg, #1A9799 0%, #1A65A0 100%);
	--quick-bg: --txtgra;
}

#nation {
	--visual-bg : url(../img/main/bg_main_visual02.jpg) no-repeat center/cover;
	--political_logo : url(../img/main/ico_political_logo02.svg) no-repeat center/cover;
	--txtgra: linear-gradient(90deg, #7244CE 0%, #E60024 100%);
	--quick-bg: linear-gradient(90deg, #EB2E32 0%, #E60024 100%);
}

body {font-family: var(--font-paper);}

#contents {overflow-x: hidden;}
#contents a:active,
#contents a:focus,
#contents a:hover,
#contents button:active,
#contents button:focus,
#contents button:hover{text-decoration: underline; text-underline-position: under;}

#main-visual {position: relative; height: 54rem; width: 192rem; left: 50%; transform: translateX(-50%); padding-top: 9.3rem; background: var(--visual-bg);}
#main-visual > div {display: flex; align-items: stretch; justify-content: space-between; height: 100%; gap: 7.6rem; padding-left: 6.4rem; padding-right: 6.4rem;}
#main-visual .left {flex-grow: 1; background-repeat: no-repeat; background-position: right bottom; background-size: 401px;}
#main-visual .left .political {margin-bottom: 3.2rem; background: var(--political_logo);}
#main-visual .left p {font-size: 2rem; line-height: 1.2;}
#main-visual .left h3 {display: block; margin-top: 1rem; font-size: 3.6rem; font-weight: 400; line-height: 1.2;}
#main-visual .left h3 strong {font-size: 4.4rem; font-weight: 600;}
#main-visual .right {position: relative; padding-top: 15.6rem;}
#main-visual .right .txt {position: absolute; right: 0; top: 0; width: 66rem;}
#main-visual .right .txt p {font-size: 4.5rem; line-height: 1.3; font-weight: 300; letter-spacing: -0.15rem; color: #554B4C;}
#main-visual .right .txt p:first-child {text-align: left;}
#main-visual .right .txt p:last-child {text-align: right;}
#main-visual .right .txt p span {background: var(--txtgra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main-visual .right ul {display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; width: 70.4rem; margin-top: 4rem;}
#main-visual .right ul li {display: flex; align-items: center; justify-content: flex-start; width: calc((100% - 1rem)/2); font-size: 1.8rem; font-weight: 500; color: #333; padding: 2rem 2.8rem; background: #fff; border-radius: 1.6rem;}
#main-visual .right ul li.role div {display: flex; align-items: center; padding-top: 0;}
#main-visual .right ul li.role div,
#main-visual .right ul li.area p {min-height: 4.8rem; padding-left: 6.8rem; background-repeat: no-repeat; background-position: left center;  background-size: 4.8rem;}
#main-visual .right ul li.role div {background-image: url(../img/main/ico_main_role.svg);}
#main-visual .right ul li.area p {background-image: url(../img/main/ico_main_area.svg);}
#main-visual .right ul li span {color: #666;}

.quick-menu {padding-top: 2.6rem; padding-bottom: 2.6rem;}
.quick-menu > div {display: flex; align-items: center; justify-content: space-between; color: #fff;}
.quick-menu h3 {font-size: 3.8rem; line-height: 0.8; letter-spacing: 0.038rem;}
.quick-menu ul {display: flex; align-items: stretch; gap: 8rem;}
.quick-menu ul li a {display: block; color: #fff; font-size: 1.8rem; line-height: 0.9; font-weight: 600; padding: 7.1rem 1rem 1rem; background-repeat: no-repeat; background-position: top 1rem center; background-size: 5rem;}
.quick-menu .bill a {background-image: url(../img/main/ico_quick_bill01.svg);}
.quick-menu .minutes a {background-image: url(../img/main/ico_quick_minutes01.svg);}
.quick-menu .qa a {background-image: url(../img/main/ico_quick_qa01.svg);}
.quick-menu .video a {background-image: url(../img/main/ico_quick_video01.svg);}
.quick-menu .speech a {background-image: url(../img/main/ico_quick_speech01.svg);}

#gallery {padding-top: 6rem; padding-bottom: 6rem;}
#gallery > div {position: relative;}
#gallery .gall-tit h3 {display: block; margin-bottom: 2.4rem; font-size: 3.8rem; line-height: 0.8;}
#gallery .gall-tit p {font-weight: 500; line-height: 0.8; color: #666;}
#gallery ul {display: flex; align-items: stretch; gap: 2.1rem; margin-top: 3.2rem;}
#gallery ul li {flex: 1; max-width: calc((100% - 4.2rem)/3);}
#gallery ul li a {display: block;}
#gallery ul li a .img {width: 100%; aspect-ratio: 466 / 300; border-radius: 2rem; overflow: hidden;}
#gallery ul li a .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
#gallery ul li a .txt {margin-top: 3.2rem;}
#gallery ul li a .txt p {font-size: 2rem; line-height: 1.4; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#gallery ul li a .txt span {display: block; line-height: 1; margin-top: 1.4rem; font-size: 1.5rem; font-weight: 500; color: #888;}
#gallery .more-btn {position: absolute; z-index: 1; top: 1.3rem; right: 2.4rem; width: 4rem; height: 4rem; border-radius: 1.3rem; overflow: hidden; text-indent: -999.9rem; background: #7C858F url(../img/main/ico_main_plus01.svg) no-repeat center;}

/* democracy */
#democracy #main-visual .left {padding-top: 4.3rem;}
#democracy #main-visual .left .political {width: 10.7rem; height: 5.4rem;}
#democracy .quick-menu {background: var(--txtgra);}

/* nation */
#nation #main-visual .left {padding-top: 5.8rem;}
#nation #main-visual .left .political {width: 10.7rem; height: 2.5rem;}
#nation .quick-menu {background: var(--quick-bg);}

/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1920px) {
	#main-visual {width: 100%; left: 0; transform: translateX(0);}
}

@media (max-width: 1400px) {
	#main-visual > div {padding-left: 2.4rem; padding-right: 2.4rem; gap: 4rem;}
	/* #main-visual .left {background-size: 64%;} */
	#main-visual .right ul {width: 54.6rem;}
	#main-visual .right ul li {padding: 1.5rem 2rem;}
}

@media (max-width: 1199px) {
	#main-visual {height: 70rem;}
	#nation #main-visual .left {padding-top: 0;}
	.quick-menu > div {flex-direction: column; align-items: center; gap: 5rem}
}
@media (max-width: 1023px) {
	#main-visual {height: auto;}
	/* #main-visual .left {width: 50%;} */
	#main-visual .right {width: 50%; padding-bottom: 5rem;;}
	#main-visual .right .txt p:first-child {text-align: right;}
	#main-visual .right ul {flex-direction: column; width: 100%;}
	#main-visual .right ul li {width: 100%;}

	.quick-menu ul {gap: 4rem;}
}

@media (max-width: 767px) {
	#democracy {--visual-bg: #E1EAFF; --quick-bg: #1A66A0;}
	#democracy #main-visual .left .political {width: 13.3rem; height: 6.7rem;}

	#nation {--visual-bg : #FFE8E8; --quick-bg: #E70626;}
	#nation #main-visual .left .political {width: 13.3rem; height: 3.1rem;}

	#main-visual {padding: 4rem 0;}
	#main-visual > div {flex-direction: column; align-items: flex-start; gap: 1rem;}
	#main-visual .left {position: relative; width: 100%; width: 100%; height: 45rem; padding-top: 9rem; padding-left: 4.5rem; background-color: #fff !important; border-radius: 2rem; overflow: hidden; background-size: 320px;}
	#nation #main-visual .left {padding-top: 5rem;}
	/* #main-visual .left::before {content:''; position: absolute; z-index: 1; bottom: 0; right: 0; width: 40rem;; height: 40rem; background-repeat: no-repeat; background-position: bottom left; background-size: 100%;} */
	#main-visual .left h3 {letter-spacing: -0.3rem;}
	#main-visual .left .political {margin-bottom: 4rem;}
	#main-visual .right {padding-top: 0; padding-bottom: 0;}
	#main-visual .right ul {margin: 0; gap: 1rem;}
	#main-visual .right .txt {display: none;}
	#main-visual .right {width: 100%;}
	#main-visual .right ul li {padding: 0 3.5rem;}
	#main-visual .right ul li.role,
	#main-visual .right ul li.area {min-height: 11.2rem; height: auto;}
	#main-visual .right ul li {height: 12.1rem;}

	.quick-menu {padding: 6.3rem 0;}
	.quick-menu ul {flex-wrap: wrap; gap: 1.25rem; width: 100%;}
	.quick-menu ul li {width: calc((100% - 2.6rem)/3); text-align: center;}
	.quick-menu ul li a {padding-left: 0; padding-right: 0; line-height: 0.8;}

	#gallery {padding-top: 4rem; padding-bottom: 4rem;}
	#gallery .gall-tit h3 {margin: 0;}
	#gallery .gall-tit p {display: none;}
	#gallery .more-btn {top: -0.6rem; right: 2rem;}
	#gallery ul {flex-direction: column; align-items: flex-start; gap: 2.6rem;}
	#gallery ul li {width: 100%; max-width: 100%;}
	#gallery ul li a span {line-height: 0.9;}
}

@media (max-width: 480px){
	#main-visual .left {height: 260px; padding-left: 3.5rem; padding-top: 3rem; background-size: 200px;}
	#nation #main-visual .left {height: 240px;}

	#main-visual .left::before {margin-left: -17% !important;}
	#main-visual .left::before {right: -12% !important;}
	#main-visual .left h3 {font-size: 2.6rem;}
	#main-visual .left h3 strong {font-size: 3rem;}
	#main-visual .left p {font-size:1.4rem;}
	#main-visual .left p span {display:block;}
}
@media (max-width: 374px){
	#nation #main-visual .left {padding-top: 3rem;}
	#main-visual .right ul li.role div,
	#main-visual .right ul li.area p {background-size: 3.7rem; padding-left: 5.7rem;}
	.quick-menu ul {gap: 1rem 0;}
	.quick-menu ul li {width: 33.33%;}

}