/* main-header */

#main-page #header {
    position: relative;
}

/* animataion */

.visualWrap.active .visual-txt span {
    transition: ease 2s;
    opacity: 0.85;
    top: 0;
}

.visualWrap.active .visual-txt strong {
    transition: ease 2s 0.5s;
    top: 0;
    opacity: 1;
}


.visualWrap.active .visual-dots {
    opacity: 1;
    transition: ease 2s 1.4s;
}
/* 
#main.active .tabBtn > li {
    opacity: 1;
    top: 0;
}

#main.active .tab1 {
    transition: ease 1s 2.1s;
}

#main.active .tab2 {
    transition: ease 1.3s 2.2s;
}

#main.active .tab3 {
    transition: ease 1.6s 2.3s;
}

#main.active .tab4 {
    transition: ease 1.9s 2.4s;
} */

/* visual */

.visualWrap {
    width: 100%;
    height: 40rem;
    position: relative;
}

#visual {
    width: 100%;
    height: 100%
}

#visual div {
    width: 100%;
    height: 100%;
}

#visual .visual1 {
    background: url(/web//img/visual1.png)no-repeat center center / cover;
}

#visual .visual2 {
    background: url(/web//img/visual2.png)no-repeat center center / cover;
}

#visual .visual3 {
    background: url(/web//img/visual3.png)no-repeat center center / cover;
}

#visual .visual4 {
    background: url(/web//img/visual4.jpg)no-repeat center center / cover;
}

#visual .visual5 {
    background: url(/web//img/visual5.jpg)no-repeat center center / cover;
}


.visualWrap .visual-txt {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    z-index: 2;
    font-family: 'RIDIBatang';
    font-size: 2.65rem;
    text-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}

.visualWrap .visual-txt span {
    font-size: 2.05rem;
    font-weight: 500;
    opacity: 0;
    position: relative;
    top: -5rem;
}

.visualWrap .visual-txt strong {
    font-weight: 500;
    position: relative;
    top:-5rem;
    opacity: 0;
}

/* dots */

.dotWrap {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute; 
    top: 0;
    z-index: 1;
}

.visual-dots {
    width: 100%;
    height: 8px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 7rem;
    margin: auto;
    opacity: 0;
}

.dotWrap .slick-dots, .dotWrap .slick-dots li {
    display: inline-block;
    position: relative;
}

.dotWrap .play {
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
}

.dotWrap .play button {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
    font-size: 1.3rem;
    color: #fff;
}

.dotWrap .play button.active {
    display: block;
}

.dotWrap .slick-dots {
    width: 100%;
}

.dotWrap .slick-dots li {
    display: inline-block;
    width: 19%;
    margin-right: 1.25%;
    height: 5px;
    background: rgba(255,255,255,0.4);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.dotWrap .slick-dots li:last-child {
    margin-right: 0;
}

.dotWrap .slick-dots li button {
    text-indent: -9999px;
}

.dotWrap .slick-dots li:before, .dotWrap .slick-dots li:after {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    color: rgba(255,255,255, 0.4);
    font-weight: 300;
    font-family: 'Noto Sans KR';
    font-size: .7rem;
    padding-bottom: .7rem;
    box-sizing: border-box;
    word-break: keep-all;
    line-height: 1.2;
}

.dotWrap .slick-dots li:before {
    top: -2.7rem;
}

.dotWrap .slick-dots li:after {
    top: -1.7rem;
}


.dotWrap .slick-dots li:nth-of-type(5)::before {
    top: -3.35rem;
}

.dotWrap .slick-dots li:nth-of-type(5)::after {
    top: -2.4rem;
}

.dotWrap .slick-dots li:nth-of-type(1)::before {
    content: "2006. 1. 1.";
}

.dotWrap .slick-dots li:nth-of-type(1):after {
    content: "행정중심복합도시 예정지";
}

.dotWrap .slick-dots li:nth-of-type(2)::before {
    content: "2009. 9. 9.";
}

.dotWrap .slick-dots li:nth-of-type(2):after {
    content: "정부세종청사 건설현장";
}

.dotWrap .slick-dots li:nth-of-type(3)::before {
    content: "2012. 5. 21.";
}

.dotWrap .slick-dots li:nth-of-type(3):after {
    content: "정부세종청사 건설현장";
}

.dotWrap .slick-dots li:nth-of-type(4)::before {
    content: "2015. 5. 27.";
}

.dotWrap .slick-dots li:nth-of-type(4):after {
    content: "정부세종청사";
}


.dotWrap .slick-dots li:nth-of-type(5)::before {
    content: "2020. 3. 11.";
}

.dotWrap .slick-dots li:nth-of-type(5):after {
    content: "정부세종청사 (행정중심복합도시건설청제공)";
}

.dotWrap .slick-dots li.slick-active {
    background: #fff;
}

.dotWrap .slick-dots li.slick-active::after, .dotWrap .slick-dots li.slick-active::before  {
    color: #fff;
}

#next, #prev {
    position: absolute;
    top: 50.5%;
    transform: translateY(-50%);
    z-index: 5;
    text-indent: -9999px;
}

#prev {
    left: 1rem;
}

#next {
    right: 1rem;
}

#next::before, #prev::before {
    display: block;
    content: "";
    font-family: 'xeicon';
    color: rgba(255,255,255,0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 3rem;
    text-indent: 0;
    z-index: 5;
    transition:all 0.2s
}

#next:hover::before, #prev:hover::before {
    color: rgba(255,255,255,1);
}

#next::before {
    content: "\e93e";
}

#prev::before {
    content: "\e93b";
}

/* main */


.tabBtn {
    position: relative;
    top: -3.35rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tabBtn::after {
    display: block;
    content: "";
    clear: both;
}

.tabBtn > li {
    width: 24.5%;
    float: left;
    margin-right: 0.666667%;
    background: #e7f4ff;
    min-height: 9.2rem;
    padding: 1.15rem .5rem;
    box-sizing: border-box;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.tabBtn > li::after {
    display: block;
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    top: calc(100% + 2.1rem);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: #eee;
    transition: all 0.3s;
    opacity: 0;
}

.tabBtn > li.active::after {
    opacity: 1;
} 

.tabBtn > li.active, .tabBtn > li:hover {
    background: url(/web//img/tab-bg.png)no-repeat center center / cover;
}

.tabBtn > li:nth-of-type(4n) {
    margin-right: 0;
}



.tabBtn > li > a {
    display: block;
    text-align: center;
}

.tabBtn > li > a > div {
    position: relative;
    height: 2.45rem;
    overflow: hidden;
}

.tabBtn > li > a > div > img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
    opacity: 0;
}

.tabBtn > li > a > div > img.normal {
    bottom: .5rem;
    opacity: 1;
}

.tabBtn > li > a > div > img.hover {
    bottom: -100%;
}

.tabBtn > li:hover > a > div > img.normal, .tabBtn > li.active > a > div > img.normal {
    bottom: -100%;
    opacity: 0;
}

.tabBtn > li:hover > a > div > img.hover, .tabBtn > li.active > a > div > img.hover {
    bottom: .5rem;
    opacity: 1;
}

.tabBtn strong {
    display: block;
    font-family: 'SCDream';
    font-size: 1.2rem;
    color: #000;
    font-weight: 500;
    transition: all 0.3s;
}

.tabBtn span {
    display: block;
    font-size: .75rem;
    font-weight: 300;
    line-height: 1.2;
    margin-top: .4rem;
    transition: all 0.3s;
}

.tabBtn li.active strong, .tabBtn li:hover strong, .tabBtn li.active span, .tabBtn li:hover span {
    color: #fff;
}

/* contents */

#contents {
    background: #eee;
    padding: 3.9rem 0;
    box-sizing: border-box;
    display: none;
}

#contents.active {
    display: block;
}

#contents .after {
    width: 100%;
} 

#contents .con-title {
    font-family: 'SCDream';
    font-weight: 500;
    font-size: 1.3rem;
    padding: .5rem 0;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: .5rem;
}

#contents .sub-title {
    font-size: 1.3rem;
    font-family: 'SCDream';
    padding-bottom: .8rem;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 2rem;
    font-weight: 500;
}

.btn {
    display: inline-block;
}

.btn.type1 a {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    margin-right: .8rem;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    background: #245d9d;
    color: #fff;
}

.btn.type1 a:hover, .btn.type1 a.active {
    box-shadow: 6px 6px 20px rgba(0,0,0,0.3);
    background: linear-gradient(to right, #479fde, #4786e1);
}

#contents .after::after {
    display: block;
    content: "";
    clear: both;
}

#contents .con {
    display: none;
    position: relative;
    transition: all 0.2s;
}

#contents .con.active {
    display: block;
}

#con1 .after {
    position: relative;
    display: flex;
}

#con1 .after > div {
    height: 21rem;
    float: left;
    box-sizing: border-box;
} 

#con1 .after > div.left {
  width: 30rem;
}

#con1 .after > div.right {
  width: calc(100% - 30rem);
}

@media(max-width:768px) {
  #con1 .after {
    flex-direction: column;
  }

  #con1 .after > div {
    width: 100% !important;
  }
} 


#con1 .con1-img {
    width: 100%;
    height: 100%;
    background: url(/web//img/con1-1.png)no-repeat center center / cover;
} 

#con1 .right {
    padding: 2rem 2.5rem;
    background: #fff;
}

#con1 .right p {
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1rem;;
}

#con1 .con1-img2 {
    position: absolute;
    bottom: -2rem;
    right: -1.5rem;
}

/* 인사말 */

#con1 .sub > div {
    box-sizing: border-box;
    margin: 3rem 0 2rem;
    background: #fff;
    padding: 3rem 5rem;
    display: none;
}

#con1 .sub > div.active {
    display: block;
}

#con1 .intro::after {
    display: block;
    content: "";
    clear: both;
}

#con1 .intro .left {
    width: 50%;
    float: left;
    overflow: hidden;
}

#con1 .intro .intro-img {
    padding: 0 .5rem 1.5rem .5rem;
    box-sizing: border-box;
}

#con1 .intro .intro-img img {
    position: relative;
    left: 45%;
    transform: translateX(-50%);
}

#con1 .intro .right {
    width: 100%;
    float: none;
    padding: 0;
}

#con1 .intro-txt p {
    margin-bottom: 1.25rem;
}

#con1 .intro-title {
    display: inline-block;
    width: 50%;
    position: relative;
    text-align: center;
    font-size: 1.3rem;
    font-family: 'SCDream';
    font-weight: 500;
    margin: 1rem 0 2rem;
    letter-spacing: -2px;
    padding-left: 1.5rem;
}

#con1 .intro-title strong {
    font-weight: 500;
    color: #4781e2;
}

#con1 .intro-title1 {
    position: absolute;
    top: -.5rem;
    left: 0;
}

#con1 .intro-title2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 조직도 */

.organ1 {
    width: 72%;
    position: relative;
    margin: auto;
}

.organ1 .info {
    display: block;
    width: 11.35rem;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: .8rem;
    text-align: center;
    background: #eee;
    border-radius: 1rem;
    color: #000;
    margin: .8rem auto;
}

.organ1 > li > span {
    display: block;
    width: 15rem;
    text-align: center;
    background:linear-gradient(to right, #477ee2, #47a8dd);
    padding: .6rem 0;
    color: #fff;
    text-align: center;
    margin: auto;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.organ1 > li > span .info {
    margin: .2rem auto;
}

.organ1 > li > span::after {
    display: block;
    content: "";
    width: 1px;
    height: 2.1rem;
    background: #d5d5d5;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.organ2 {
    width: 100%;
    margin: 4.25rem auto 0;
    position: relative;
    z-index: 1;
}

.organ2::before {
    display: block;
    content: "";
    width: calc(100% - 14.85rem);
    height: 1px;
    background: #d5d5d5;
    position: absolute;
    bottom:calc(100% + 2.06rem);
    left: 50%;
    transform: translateX(-50%);
}

.organ2::after {
    display: block;
    content: "";
    clear: both;
}

.organ2 > li {
    display: inline-block;
    border: 4px solid #c0c8d5;
    position: relative;
    box-sizing: border-box;
    z-index: 1;
}

.organ2 > li::before {
    display: block;
    content: "";
    width: 1px;
    height: 2.35rem;
    background: #d5d5d5;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.organ2 .organ2-1 {
    float: left;
}

.organ2 .organ2-2 {
    float: right;
}

.organ2 > li > span {
    display: block;
    width: 100%;
    background: #e7edf6;
    font-size: .85rem;
    text-align: center;
    padding: .6rem 0;
    font-weight: 600;
}

.organ3 {
    padding:0 1rem 1rem;
    box-sizing: border-box;
    background: #fff;
    position: relative;
    z-index: 1;
}

.organ3 > ul > li {
    position: relative;
    font-size: .67rem;
    color: #767676;
    padding-left: 8px;
}

.organ3 > ul > li::before {
    display: block;
    content: "";
    width: 4px;
    height: 1px;
    background: #767676;
    position: absolute;
    top: .5rem;
    left: 0;
}