@charset "utf-8";
@import url("font.css");

/* Default Layout */
body {margin: 0; width:100%; overflow-x:auto; padding: 0 !important; color: #333; font-family:'Noto Sans KR';}
#wrap {position: relative; overflow: hidden; width:100%;}

dl.skipnavi {position:relative;z-index: 500;}
dl.skipnavi dt {display:none}
dl.skipnavi dd a {position:absolute; left:0; top:-50px; font-size:0}
dl.skipnavi dd a:active, dl.skipnavi dd a:focus {display:block; left:0; top:0; z-index:51; width:400px; height:30px; padding-top:9px; text-align:center; background:#333; line-height:14px; text-decoration:none; color:#fff; font-size:12px; font-weight:bold}

/*메뉴*/
.toparea {overflow: hidden; position: fixed; z-index: 101; padding: 0 50px 0 40px; width: 100%; top: 43px; left: 0;}
.toparea h1 {float: left;}
.toparea h1 a {display: block; width: 105px; height: 27px; background-image: url('../images/logo_w.png'); background-repeat: no-repeat; background-position: 0 center; background-size: 100%;}
.toparea .gnb {float: right;}
.toparea .gnb > ul {display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap; text-align: center;}
.toparea .gnb > ul > li {position: relative; float: left; margin-left: 40px;}
.toparea .gnb > ul > li > a {position: relative; display: block; color: #fff; font-size: 16px; line-height: 27px; font-weight: 600;}

/*최상단 메뉴바 - 투명*/
.fp-viewing-3rdPage .toparea h1 a {background-image: url('../images/logo_b.png');}
.fp-viewing-3rdPage .toparea .gnb > ul > li > a {color: #000;}

.mobile-category .mobild_menu {display: none; position: relative; z-index: 999; background:#fff; overflow-y: scroll;-ms-overflow-style: none;}
.mobile-category .mobild_menu::-webkit-scrollbar {display:none;}
.mobile-category .mobild_menu:-moz-scrollbar {display:none;}
.mobile-category .mobild_menu::-moz-scrollbar {display:none;}

#fp-nav {display: none;}

.midarea .section {position: relative; z-index: 25; background-position: center center; background-repeat: no-repeat; background-size: cover; font-family: 'ns', sans-serif;}
.midarea .section .area {padding-top: 150px;}
.midarea .section .area .title_area {color: #fff; text-align: center; }
.midarea .section .area .title_area h3 {position: relative; margin-bottom: 30px; font-size: 75px; font-weight: 600; opacity: 0;}
.midarea .section .area .title_area p {position: relative; font-size: 22px; opacity: 0;}
.midarea .section.active .area .title_area h3 {animation-duration:1s; animation-duration: leaner; animation-direction:alternate; animation-delay: 0.3s; animation-fill-mode: forwards; animation-name: titleup;}
.midarea .section.active .area .title_area p {animation-duration:0.5s; animation-duration: leaner; animation-direction:alternate; animation-delay: 0.5s; animation-fill-mode: forwards; animation-name: pup;}
@keyframes titleup {
    0% {
        top:100px;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
@keyframes pup {
    0% {
        top:100px;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
.midarea .section.section1 {background-image: url('../images/main_img1.jpg');}
.midarea .section.section1 .area {position: relative; padding-top: 0; top: 50%; transform: translateY(-50%); color: #fff; text-align: center;}
.midarea .section.section1 .area .title_area {font-size: 85px; font-weight: 600;}
.midarea .section.section1 .area .title_area h3 {font-size: 85px; font-weight: 600;}
.midarea .section.section1 .area .title_area p {font-size: 34px;}

.midarea .section.section2 {background-image: url('../images/main_img2.jpg');}
.midarea .section.section2 .area {margin: 0 auto; width: 1200px;}
.midarea .section.section2 .area .title_area {margin-bottom: 50px;}
.midarea .section.section2 .area .list {display: table; table-layout: fixed; margin-bottom: 10px; padding: 0 50px; width: 100%; background-color: rgba(0, 0, 0, 0);}
.midarea .section.section2 .area .list dt {display: table-cell; width: 150px; vertical-align: middle;}
.midarea .section.section2 .area .list dt span {position: relative; color: #1090fd; font-size: 22px; font-weight: 600; opacity: 0;}
.midarea .section.section2 .area .list dt span::after {content: ''; position: absolute; left: 70px; bottom: 2px; height: 1px; background-color: #1090fd;}
.midarea .section.section2 .area .list dd {display: table-cell; padding: 30px 0;}
.midarea .section.section2 .area .list dd ul {display: flex; margin-bottom: 50px; width: 100%; justify-content: space-between; flex-flow: wrap}
.midarea .section.section2 .area .list dd ul:last-child {margin-bottom: 0;}
.midarea .section.section2 .area .list dd ul li {padding-top: 80px; width: 150px; text-align: center; color: #fff; background-repeat: no-repeat; background-position: center 0; opacity: 0;}
.midarea .section.section2 .area .list dd ul li.icon {position: relative; width: 60px;}
.midarea .section.section2 .area .list dd ul li.icon::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 15px; height: 15px; background-color: #fff; border-radius: 15px;}
.midarea .section.section2 .area .list dd ul li.icon1 {background-image: url('../images/icon_contents2_1.png');}
.midarea .section.section2 .area .list dd ul li.icon2 {background-image: url('../images/icon_contents2_2.png');}
.midarea .section.section2 .area .list dd ul li.icon3 {background-image: url('../images/icon_contents2_3.png');}
.midarea .section.section2 .area .list dd ul li.icon4 {background-image: url('../images/icon_contents2_4.png');}
.midarea .section.section2 .area .list dd ul li.icon5 {background-image: url('../images/icon_contents2_5.png');}
.midarea .section.section2 .area .list dd ul li.icon6 {background-image: url('../images/icon_contents2_6.png');}
.midarea .section.section2 .area .list dd ul li.icon7 {background-image: url('../images/icon_contents2_7.png');}
.midarea .section.section2 .area .list dd ul li.icon8 {background-image: url('../images/icon_contents2_8.png');}
.midarea .section.section2 .area .list dd ul li.icon9 {background-image: url('../images/icon_contents2_9.png');}
.midarea .section.section2 .area .list dd ul li.icon10 {background-image: url('../images/icon_contents2_10.png');}
.midarea .section.section2 .area .list dd ul li.icon11 {background-image: url('../images/icon_contents2_11.png');}
.midarea .section.section2 .area .list dd ul li.icon12 {background-image: url('../images/icon_contents2_12.png');}

.midarea .section.section2.active .area .list {animation-duration:0.3s; animation-delay: 1s; animation-fill-mode: forwards; animation-name: list;}
@keyframes list {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.5);
    }
}
.midarea .section.section2.active .area .list dt span {animation-duration:0.5s; animation-delay: 1.3s; animation-fill-mode: forwards; animation-name: listtitle1;}
@keyframes listtitle1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.midarea .section.section2.active .area .list dt span::after {animation-duration:0.5s; animation-delay: 1.5s; animation-fill-mode: forwards; animation-name: listtitle1span;}
@keyframes listtitle1span {
    0% {
        width: 0;
    }
    100% {
        width: 30px;
    }
}
.midarea .section.section2.active .area .list dd ul li {position: relative; animation-duration:0.5s; animation-delay: 1.8s; animation-fill-mode: forwards; animation-name: listli;}
.midarea .section.section2.active .area .list dd ul li:nth-child(2) {animation-delay: 1.9s;}
.midarea .section.section2.active .area .list dd ul li:nth-child(3) {animation-delay: 2s;}
.midarea .section.section2.active .area .list dd ul li:nth-child(4) {animation-delay: 2.1s;}
.midarea .section.section2.active .area .list dd ul li:nth-child(5) {animation-delay: 2.2s;}
.midarea .section.section2.active .area .list dd ul li:nth-child(6) {animation-delay: 2.3s;}
@keyframes listli {
    0% {
        left: 20px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}
.midarea .section.section3 .area {margin: 0 auto; width: 1210px;}
.midarea .section.section3 .area .title_area {margin-bottom: 125px; color: #333;}
.midarea .section.section3 .area .title_area h3 {color: #333;}
.midarea .section.section3 .area .list {display: flex; width: 100%; justify-content: space-between; flex-flow: wrap;}
.midarea .section.section3 .area .list li a {display: block; width: 330px;}
.midarea .section.section3 .area .list li a .img_box {overflow: hidden; margin-bottom: 15px; height: 225px;}
.midarea .section.section3 .area .list li a .img_box img {width: 100%;}
.midarea .section.section3 .area .list li a .year {margin-bottom: 10px; font-size: 18px; font-family: 'Orator Std';}
.midarea .section.section3 .area .list li a .title {margin-bottom: 15px; font-size: 20px; font-weight: 600;}
.midarea .section.section3 .area .list li a .arrow {position: relative; width: 24px; height: 12px; opacity: 0;}
.midarea .section.section3 .area .list li a .arrow::after, .midarea .section.section3 .area .list li a .arrow::before {content: ''; position: absolute;}
.midarea .section.section3 .area .list li a .arrow::after {left: 0; top: 50%; width: 100%; height: 1px; background-color: #000;}
.midarea .section.section3 .area .list li a .arrow::before {right: 0; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg);}

.midarea .section.section3.active .area .list .slick-slide {position: relative; animation-duration:0.5s; animation-delay: 1.5s; animation-fill-mode: forwards; animation-name: listli3;}
.midarea .section.section3.active .area .list .slick-slide:nth-child(2) {animation-delay: 1.6s;}
.midarea .section.section3.active .area .list .slick-slide:nth-child(3) {animation-delay: 1.7s;}
@keyframes listli3 {
    0% {
        bottom: 50px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
.midarea .section.section3.active .area .list li a .arrow {animation-duration:1s; animation-delay: 1.8s; animation-fill-mode: forwards; animation-name: listli3arrow;}
.midarea .section.section3 .area .list li a:hover .arrow {animation-duration:2s; animation-iteration-count:infinite; opacity: 1;}
@keyframes listli3arrow {
    0% {
        width: 24px;
    }
    50% {
        width: 50px;
    }
    100% {
        width: 24px;
        opacity: 1;
    }
}

.midarea .section.section4 {background-image: url('../images/main_img3.jpg');}
.midarea .section.section4 .area {text-align: center;}
.midarea .section.section4 .area .title_area {margin-bottom: 110px;}
.midarea .section.section4 .area .list {margin: 0 auto 115px; width: 858px; display: flex; justify-content: space-between; flex-flow: wrap;}
.midarea .section.section4 .area .list li {position: relative; width: 195px; line-height: 165px; color: #fff; font-size: 40px; background-color: rgba(16, 79, 132, 0.55); opacity: 0;}
.midarea .section.section4 .area .list li::after {content: ''; position: absolute; left: 50%; top: -25px; width: 1px; height: 50px; background-color: rgba(255, 255, 255, 0.7);}
.midarea .section.section4 .area .btn {position: relative; display: inline-block; width: 230px; height: 60px; color: #037bd7; font-size: 22px; line-height: 60px; font-weight: 600; background-color: #fff; opacity: 0;}

.midarea .section.section4.active .area .list li {animation-duration:0.5s; animation-delay: 1.5s; animation-fill-mode: forwards; animation-name: listli4;}
.midarea .section.section4.active .area .list li:nth-child(2) {animation-delay: 1.6s;}
.midarea .section.section4.active .area .list li:nth-child(3) {animation-delay: 1.7s;}
.midarea .section.section4.active .area .list li:nth-child(4) {animation-delay: 1.8s;}
@keyframes listli4 {
    0% {
        bottom: 50px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
.midarea .section.section4.active .area .btn {animation-duration:0.5s; animation-delay: 2s; animation-fill-mode: forwards; animation-name: listbutton;}
@keyframes listbutton {
    0% {
        bottom: 50px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}

.web_only {display: block !important;}
.mobile_only {display: none !important;}
.mobileoff_in {display: inline-block !important;}
.mobileon_in {display: none !important;}


/*메인팝입*/
.popup.main {transform: translateX(0);} 
.popup.main .popup_inner {padding: 20px;} 
.popup.main .bottom {width: 100%; height: 50px; border-top: 1px solid #ccc;}
.popup.main .bottom .check_box {float: left; margin: 5px 0 0 10px;}
.popup.main .bottom .check_box input[type=checkbox] + label {font-size: 14px; background-position: 0 1px;}
.popup.main .bottom button {float: right; margin: 10px 15px 0 0; width: 70px; height: 30px; color: #fff; font-size: 13px; background: #717171;}

/*에러페이지*/
.error {overflow: hidden; width: 100%; height: auto; margin-top: -125px; position: absolute; top: 50%; background: #f8f8f9; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;}
.error .error_box {width: 640px; margin: 0 auto; padding: 50px;}
.error .error_box h3 {color: #333; padding-bottom: 20px; font-size: 18px;}
.error .error_box .text {color: #515151; font-size: 15px; line-height: 25px;}
.error .error_box button {padding: 5px 15px; color: #fff; font-size: 13px;}


@media screen and (min-width:320px) and (max-width:1200px){
    .midarea .section.section2 .area {padding: 0 50px; width: 100%;}
    .midarea .section.section3 .area {width: 100%;}
    
}
@media screen and (min-width:320px) and (max-width:1024px){
    .midarea .section .area {position: relative; top: 50%; transform: translateY(-50%); padding-top: 0;}
    .midarea .section.section2 .area .list {display: block;}
    .midarea .section.section2 .area .list dt {display: block; padding: 50px 0 30px; width: 100%; text-align: center;}
    .midarea .section.section2 .area .list dt span::after {left: 50%; bottom: -20px; transform: translateX(-50%);}
    .midarea .section.section2 .area .list dd {display: block;}
    .midarea .section.section2 .area .list dd ul li.icon {display: none;}
    
    .midarea .section.section3 .area .list {margin: 0 auto; width: 700px;}
    .midarea .section.section3 .area .list li {margin-bottom: 30px;}
    
    .midarea .section.section4 .area .list {width: 420px;}
    .midarea .section.section4 .area .list li:nth-child(-n+2) {margin-bottom: 40px;}
}
@media screen and (min-width:320px) and (max-width:784px){
	/*메뉴*/
    .toparea {padding: 7px 10px; top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5);}
    .toparea h1 a {width: 60px; height: 22px;}
    .toparea .gnb > ul > li {margin-left: 18px;}
    .toparea .gnb > ul > li > a {font-size: 12px; line-height: 22px;}
    
    .midarea .section .area .title_area h3 {margin-bottom: 10px; font-size: 37px;}
    .midarea .section .area .title_area p {font-size: 12px;}
    
    .midarea .section.section1 .area .title_area {font-size: 42px;}
    .midarea .section.section1 .area .title_area h3 {font-size: 42px;}
    .midarea .section.section1 .area .title_area p {font-size: 16px;}
    
    .midarea .section.section2 .area {padding: 0 10px;}
    .midarea .section.section2 .area .title_area {margin-bottom: 25px;}
    .midarea .section.section2 .area .list {padding: 10px;}
    .midarea .section.section2 .area .list dt {padding: 0 0 10px;}
    .midarea .section.section2 .area .list dt span {font-size: 16px;}
    .midarea .section.section2 .area .list dt span::after {width: 15px; bottom: -10px;}
    .midarea .section.section2 .area .list dd {padding: 10px 0;}
    .midarea .section.section2 .area .list dd ul {margin-bottom: 20px;}
    .midarea .section.section2 .area .list dd ul li {padding-top: 45px; width: 100px; font-size: 12px; background-size: auto 35px;}

    .midarea .section.section3 .area .title_area {margin-bottom: 50px;}
    .midarea .section.section3 .area .list {width: 460px;}
    .midarea .section.section3 .area .list li {margin-bottom: 30px;}
    .midarea .section.section3 .area .list li a {width: 220px;}
    .midarea .section.section3 .area .list li a .img_box {margin-bottom: 10px; height: 150px;}
    .midarea .section.section3 .area .list li a .year {margin-bottom: 0; font-size: 15px;}
    .midarea .section.section3 .area .list li a .title {margin-bottom: 5px; font-size: 17px;}
    .midarea .section.section3 .area .list li a .arrow {transform: scale(0.7);}
    
   
    
    .midarea .section.section4 .area .title_area {margin-bottom: 50px;}
    .midarea .section.section4 .area .list {margin: 0 auto 50px; width: 340px;}
    .midarea .section.section4 .area .list li {width: 160px; line-height: 140px; font-size: 20px;}
    .midarea .section.section4 .area .btn {width: 200px; height: 40px; font-size: 16px; line-height: 40px;}
}
@media screen and (min-width:320px) and (max-width:640px){
    
}
@media screen and (min-width:320px) and (max-width:480px){
    .midarea .section.section2 .area .list dt span {font-size: 12px;}
    .midarea .section.section2 .area .list dd ul li {padding-top: 35px; width: 70px; font-size: 9px; background-size: auto 26px;}
    
    .midarea .section.section3 .area .list {width: 310px;}
    .midarea .section.section3 .area .list li a {width: 150px;}
    .midarea .section.section3 .area .list li a .img_box {height: 100px;}
    .midarea .section.section3 .area .list li a .year {font-size: 9px;}
    .midarea .section.section3 .area .list li a .title {font-size: 10px;}
    .midarea .section.section3 .area .list li a .arrow {position: relative; width: 24px; height: 12px; opacity: 0;}
    
    .midarea .section.section4 .area .list {width: 210px;}
    .midarea .section.section4 .area .list li {width: 97px; line-height: 82px;}
    .midarea .section.section4 .area .list li::after {top: -12px; height: 25px;}
    .midarea .section.section4 .area .btn {width: 115px; height: 30px; font-size: 14px; line-height: 30px;}
}
@media screen and (min-width:320px) and (max-width:420px){

}