@charset "utf-8";
.real-cont {padding:100px 0 120px;}

.sub-visual {height:400px; background:#ddd; margin-top:100px;}

/* 캘린더 */
.calendar {padding-bottom: 150px;}
.calendar .calendar-wrap .calendar-title {display: flex; margin-bottom: 40px; align-items: center; justify-content: center;}
.calendar .calendar-wrap .calendar-title a {display:flex; justify-content:center; align-items:center; width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 50%; text-align: center;}
.calendar .calendar-wrap .calendar-title h4 {font-size: 40px; color: #111; padding: 0 15px;}
.calendar .calendar-wrap .calendar-title h4 span {display: inline-block; font-size: 40px; color: #111;}
.calendar .calendar-wrap table {border-spacing:3px; border-collapse:separate; width: 100%; table-layout: fixed;}
.calendar .calendar-wrap tr th {border-radius:5px; background: #f5f5f5; font-size: 20px; color: #333; line-height: 50px;}
.calendar .calendar-wrap tr td {height: 150px; border: 1px solid #ddd; border-radius:5px; vertical-align: top; font-size: 18px; color: #666; padding: 15px;}
.calendar .calendar-wrap tr td p {text-align: right; padding: 0 5px;}
.calendar .calendar-wrap tr td .date-sat {color: #0100ff;}
.calendar .calendar-wrap tr td .date-sun {color: #ff0000;}
.calendar .calendar-wrap tr td ul {padding-top: 10px;}
.calendar .calendar-wrap tr td ul li a{position: relative; display: block; padding-left: 10px; text-align: left; font-size: 15px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.calendar .calendar-wrap tr td ul li a:before {position: absolute; content:'-'; width: 10px; height: 1px; left: 0; top: 0;}
.calendar .calendar-wrap tr .sun {background: #ff8518; color: #fff;}
.calendar .calendar-wrap tr .sat {background: #00b58c; color: #fff;}  
@media(max-width: 1024px) {
	.calendar .calendar-wrap tr td {height: 120px; padding: 5px;}
}
@media(max-width: 640px) {
	.calendar {padding-bottom: 80px;}
	.calendar .calendar-wrap tr th {font-size: 18px;}
	.calendar .calendar-wrap tr td {font-size: 16px; height: 80px;}
	.calendar .calendar-wrap .calendar-title h4 span {font-size: 30px;}
	.calendar .calendar-wrap tr td ul li a {font-size: 12px;}

}


.grid {margin:-20px;}
.grid-item {width:33.3333333%; float:left; padding:20px;}
.grid-item .inner {background:#ddd; width:100%; height:100%;}


.menu {height:100vh; max-width:1400px; width:100%; margin:0 auto; position:relative; padding-right:60px; z-index:1;}
.menu .menu-open {position:absolute; width:40px; height:40px; background:#f0c; position:absolute; top:0; right:0; border-radius:50%; z-index:3;}
.menu ul {display:flex; margin:0 -10px -20px; transition:all 0.6s;}
.menu ul li {padding:0 10px; width:auto; margin-bottom:20px;}
.menu ul li a {display:inline-block; padding:0 20px; line-height:40px; background:#999; color:#111; border-radius:20px;}



/* sub 06 07 history 서우인 */
.history .real-cont {padding-bottom:0;}
.history .img-box {margin-bottom:96px;}
.history .col {display:flex; position:relative; padding-bottom:300px;}
.history .col:after {content:''; width:1px; height:100%; background:#ddd; position:absolute; top:0; left:660px;}
.history .year {width:100%; max-width:660px; padding:0 70px; position:relative; text-align:right;}
.history .year .tit {position:sticky; top:100px; right:0; display:inline-block;}
.history .year.active .tit {z-index:1;}
.history .year p {font-size:40px; line-height:1.2em; color:#000; font-weight:700; margin-bottom:24px;}
.history .year h4 {font-size:100px; line-height:1.1em; color:#518bd3; text-align:left;}
.history .wrap {width:1%; flex:1 1 auto; padding-left:50px;}
.history .txt-box {margin-bottom:140px;}
.history .txt-box .m-year {display:none;}
.history .txt-box .txt {display:flex; margin-bottom:6px;}
.history .txt-box .txt .month {width:100%; max-width:50px; font-size:18px; line-height:1.8em; color:#000; font-weight:700;}
.history .txt-box .txt p {width:1%; flex:1 1 auto; font-size:18px; line-height:1.8em; color:#666;}


/* gasp 연습 */

/* 7 1 */
.backimg {margin-bottom:140px; height:100vh; background:url('../img/sub/main-visual02.jpg') center center no-repeat; overflow:hidden;}
.backimg .col {display:flex; height:100%; align-items:center;}
.backimg .txt {font-size:30px; line-height:1.2em; color:#fff; font-weight:600; width:33.33333%; padding:0 30px; text-align:center;}

.gsaps .wrap {width:100%; max-width:1440px; padding:0 15px; margin:0 auto;}
.gsaps .title {margin-bottom:80px;}
.gsaps .title h3 {font-size:60px; color:#000; line-height:1.2em; text-align:center;}
.gsaps .img-box {height:80vh; background:url('../img/sub/main-visual02.jpg') center center no-repeat; margin:0 auto;}

.rolling {height:100vh; background:#333; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.rolling div {font-size:60px; color:#fff; background:#333; line-height:1.2em; font-weight:700; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
/* 7 2 */
.ghisto .col {display:flex; min-height:400px; margin-bottom:100px;}
.ghisto .col > div {width:50%;}
.ghisto .year {padding:0 60px; text-align:right; position:relative;}
.ghisto .year p {font-size:100px; line-height:1.1em; color:#518bd3; font-weight:600; position:sticky; top:120px;}
.ghisto .txt {display:flex; margin-bottom:30px; padding-top:40px;}
.ghisto .txt:last-child {margin-bottom:0;}
.ghisto .txt .month {width:100%; max-width:100px; font-size:24px; line-height:1.5em; color:#000;}
.ghisto .txt ul {width:1%; flex:1 1 auto;}
.ghisto .txt ul li {font-size:24px; line-height:1.5em; color:#666;}

/* 7 3 */
.ghistory .img-box {height:400px; background:url('../img/sub/history-img.jpg') center center no-repeat; width:1400px; margin:0 auto 100px; overflow:hidden;}
.ghistory .col {display:flex; padding-bottom:120px; min-height:300px;}
.ghistory .col:last-child {padding-bottom:60px;}
.ghistory .col > div {width:50%;}
.ghistory .year {padding:0 20px; text-align:center; font-size:100px; color:#518bd3; line-height:1.1em; font-weight:700;}
.ghistory .txt-box {padding:20px 20px 0;}
.ghistory .txt-box .txt {display:flex; font-size:20px; line-height:1.5em; margin-bottom:14px;}
.ghistory .txt-box .txt:last-child {margin-bottom:0;}
.ghistory .txt-box .txt .month {width:80px; color:#000; font-weight:500;}
.ghistory .txt-box .txt ul {display:flex;}
.ghistory .txt-box .txt ul li {color:#666;}
/* 7 4 */
.circleg {height:100vh; position:relative; background:#f0f0f0;}
.circleg > div {display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.circleg .ground {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.circleg .txt {text-align:center; display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center;}
.circleg .txt h2 {font-size:5rem; line-height:1.1em; margin-bottom:40px; font-weight:800;}	 
.circleg .txt p {font-size:3rem; line-height:1.2em; font-weight:600;}
.circleg .over .txt {color:#fff; will-change:clip-path; clip-path: circle(10vw); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:url('../img/sub/main-visual02.jpg') center center no-repeat; overflow:hidden; white-space:nowrap;}
/* 7 5 */
.anchor {position:relative; overflow:hidden;}
.anchor .section {position:relative; background-repeat:no-repeat; background-size:cover; background-position:center center; height:100vh; display:flex; width:100vw; justify-content:space-between;}
.anchor .section01 {background-image:url('../img/sub/main1920-02.jpg');}
.anchor .section02 {background-image:url('../img/sub/main1920-03.jpg');}
.anchor .section03 {background-image:url('../img/sub/main1920-04.jpg');}
.anchor .section04 {background-image:url('../img/sub/main1920-05.jpg');}

.anchor .section .txt-box {display:flex; justify-content:center; flex-direction:column; width:100%; height:100%; max-width:600px; color:#fff;}
.anchor .section .txt-box h3 {font-size:48px; line-height:1.2em; margin-bottom:24px;}
.anchor .section .txt-box p {font-size:24px; line-height:1.4em; margin-bottom:20px;}
.anchor .section .txt-box .more a {display:inline-block; font-size:20px; line-height:1.5em;}
.anchor .section .img-box {position:relative; transform:translateX(100%);}
.anchor .section .img-box ul li {min-height:360px;}


/* 기회소득 */
.wrapper08 #header {display:none;}
.wrapper08 #footer {display:none;}
.wrapper08 .sub-visual {display:none;}


.wrap640 {width:100%; max-width:640px; margin:0 auto; overflow:hidden; min-height:100vh; position:relative; letter-spacing:-.03em;}
.wrap640 .contain {padding:0 30px;}
.head {height:80px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ddd;}

/* section01 */
.section01 {padding:70px 0 40px;}
.section01 .col {display:flex; align-items:flex-end;}
.section01 .tit-box {width:100%; max-width:310px; color:#222;}
.section01 .tit-box p {font-size:36px; line-height:1.2em; font-weight:600;}
.section01 .tit-box p span {display:block; font-size:30px; font-weight:600; line-height:1.3em; color:#777;}
.section01 .tit-box a {min-width:210px; text-align:right; margin-top:26px; font-size:28px; font-weight:600; line-height:1.2em; position:relative; padding-right:46px; display:inline-block;}
.section01 .tit-box a span {font-size:43px; font-weight:700;}
.section01 .tit-box a:after {content:''; width:28px; height:28px; background:url('../img/sub/sec01-more.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-14px; right:0; border-radius:50%;}
.section01 .img-box {width:1%; flex:1 1 auto; text-align:right;}
/* section02 */
.section02 {background:#272B82; padding:70px 0 90px; border-radius:45px 45px 0 0; position:relative; overflow:hidden;}
.section02 .img {position:absolute;}
.section02 .img01 {right:0; top:0;}
.section02 .img02 {right:0; bottom:74px;}
.section02 .tit-box {margin-bottom:66px;}
.section02 .tit-box h3 {font-size:38px; line-height:1.2em; color:#fff;}
.section02 .txt-box {margin-bottom:120px;}
.section02 .txt-box .col {margin-bottom:22px; padding:0 58px; height:95px; background:#fff; border-radius:15px; display:flex; align-items:center; justify-content:space-between;}
.section02 .txt-box .col:last-child {margin-bottom:0;}
.section02 .txt-box .tit {display:flex; align-items:center;}
.section02 .txt-box .tit h4 {font-size:30px; line-height:1.2em; color:#222; font-weight:600; padding-left:58px;}
.section02 .txt-box .txt {width:100%; max-width:120px;}
.section02 .txt-box .txt p {font-size:25px; color:#222; font-weight:600; line-height:1.2em;}
.section02 .txt-box .txt p span {font-size:32px; font-weight:700;}
.section02 .foot-box {padding-left:38px; position:relative; color:#fff;}
.section02 .foot-box:before {content:''; width:8px; height:8px; background:#fff; border-radius:50%; position:absolute; top:38px; left:0;}
.section02 .foot-box h4 {font-size:74px; font-weight:600; margin-bottom:40px; line-height:1.1em;}
.section02 .foot-box p {font-size:28px; line-height:1.2em; margin-bottom:16px;}
.section02 .foot-box p:last-child {margin-bottom:0;}
.section02 .foot-box p span {color:#A8ABFF;}
/* section03 */
.section03 {background:url('../img/sub/sec03bg.jpg') center center no-repeat; background-size:cover; padding:90px 0 120px;}
.section03 .tit-box {color:#fff; padding:0 20px; margin-bottom:60px;}
.section03 .tit-box .tit {margin-bottom:60px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.3);}
.section03 .tit-box h3 {font-size:38px; line-height:1.2em;}
.section03 .tit-box p {font-size:30px; line-height:1.2em; font-weight:600;}
.section03 .tit-box p strong {font-size:100px; font-weight:600; line-height:1.1em;}
.section03 .wrap {margin-bottom:100px;}
.section03 .inner {margin-bottom:38px; padding:50px 40px; background:#fff; border-radius:45px;}
.section03 .inner:last-child {margin-bottom:0;}
.section03 .inner .tit {display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.section03 .inner .tit h4 {font-size:26px; line-height:46px; font-weight:600; padding:0 50px; background:#6B71FF; border-radius:23px; display:inline-block;}
.section03 .inner .txt {margin-bottom:36px;}
.section03 .inner .txt .reward {margin-bottom:20px; display:flex; align-items:flex-end; color:#222;}
.section03 .inner .txt .reward .counter {font-size:60px; line-height:1.1em; font-weight:700; margin-right:4px;}
.section03 .inner .txt .reward .unit {font-size:24px; line-height:1.6em; font-weight:600;}
.section03 .inner .txt .point p {font-size:24px; font-weight:600; color:#6B71FF; line-height:1.2em;}
.section03 .chart .col {padding:0 88px; height:250px; margin-bottom:100px; border-bottom:1px solid #ddd; display:flex; align-items:flex-end; justify-content:space-between;}
.section03 .chart .col .row {width:22px; height:50px; background:#fff; border-radius:11px;}
.section03 .chart .txt {text-align:center;}
.section03 .chart .txt p {font-size:28px; color:#fff; font-weight:600; line-height:1.5em; margin-bottom:12px;}
.section03 .chart .txt p:last-child {margin-bottom:0;}
.section03 .chart .txt p span {font-size:50px; font-weight:600; line-height:1.1em;}

.section04 {padding:120px 0 90px; background:#E8E8E8;}
.section04 .tit-box {margin-bottom:36px;}
.section04 .tit-box h3 {font-size:28px; line-height:1.5em; font-weight:600; color:#222;}
.section04 .col {display:flex; flex-wrap:wrap; margin:0 -14px -28px;}
.section04 .col .row {width:33.333333%; padding:0 14px; margin-bottom:28px;}
.section04 .inner {background:#fff; padding:30px 20px; text-align:center; border-radius:10px; box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.08);}
.section04 .inner .icon {margin-bottom:16px;}
.section04 .inner p {font-size:22px; font-weight:600; color:#777; line-height:1.8em;}