@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* Noto Sans KR */
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');
/* Material Icons Outlined*/
@import url('https://fonts.googleapis.com/css2?family=Material+Icons');
/* Material Icons baseline*/
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Round');
/* Material Icons Round*/
@import url('//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
/* slick css*/
@import url('introIE.css');
/* ie css*/



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

body {
    min-width: 1280px;
    color: #222;
    font-family: 'Noto Sans KR', sans-serif;
    word-break: keep-all;
    background-color: #3C4559;
}

.inner {
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: #222;
}

li {
    list-style: none;
}




header {
    width: 100%;
    height: 142px;
    background: #fff;
}

.head01 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.head01 .inner {
    display: flex;
    justify-content: space-between;
}

.link {
    display: flex;
}

.link a {
    display: block;
    background-color: #627FA4;
    padding: 7px 12px;
    font-size: 14px;
    color: #fff;
    border-right: 1px solid #fff;
}


.link span {
    font-size: 13px;
    margin-left: 6px;
}


.login {
    display: flex;
}

.login > a {
    font-size: 17px;
    padding: 0 16px;
    line-height: 34px;
}


.sns {
    position: relative;
}

.sns >div {
    padding: 0 16px;
    font-size: 13px;
    line-height: 34px;
    color: #1F497D;
    cursor: pointer;
}

.sns >div >span {
    font-size: 17px;
}

.sns ul {
    align-items: center;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: all 2s;
    display: none;
}


.sns:hover ul {
    display: flex;
    transition: all 2s;
}


.sns li {
    width: 37px;
    height: 37px;
    margin: 4px 2px;
}

.sns li a {
    display: inline-block;
    width: 100%;
    height: 100%;

}

.sns li:nth-child(1) {
    background: url(../img/iconset.png) no-repeat -399px -57px;
}
.sns li:nth-child(2) {
    background: url(../img/iconset.png) no-repeat -399px 0;
    
}
.sns li:nth-child(3) {
    background: url(../img/iconset.png) no-repeat -399px -228px;
}
.sns li:nth-child(4) {
    background: url(../img/iconset.png) no-repeat -399px -171px;
}
.sns li:nth-child(5) {
    background: url(../img/iconset.png) no-repeat -399px -114px;
}



.head02 > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29px 0 0 0;
}

.logo a:nth-child(1) {
    display: inline-block;
    width: 372px;
    height: 62px;
    background: url(../img/logo.png) no-repeat center/ contain;
}

.mLan {
    display: none;
}

.head02 > div > div:nth-child(2) {
    display: flex;
}

.sear {
  position: relative;
}

.sear > input {
    width: 262px;
    height: 45px;
    border-radius: 40px;
    border: 1px solid #1F497D;
    padding: 0 50px 0 20px;
}

.sear > span {
    position: absolute;
    top: 2px;
    right: 12px;
    font-size: 26px;
    line-height: 41px;
    color: #1F497D;
    background: #fff;
    border-radius: 100%;
    cursor: pointer;
}



.lan {
    display: flex;
    margin-left: 15px;
}

.lan > a {
    display: block;
    border: 1px solid #999;
    background-color: transparent;
    font-size: 18px;
    color: #aaa;
    padding: 8px;
}

.lan > a:nth-child(1) {
    color: #1F497D;
}
.lan > a:nth-child(2):hover {
    color: #1F497D;
}

.mMenuBt {
    display: none;
}




nav .mCloseBt,
nav .mlogin {
    display: none;
}


nav {
    position: relative;
}



nav .gnb {
    width: 100%;
    height: auto;
    background-color: #E5E5E5;
}

nav .gnb ul {
    display: flex;
}

nav .gnb ul > li {
    width: 200px;
    height: 59px;
    border-right: 1px solid #fff;
}
nav .gnb ul > li:first-child {
    border-left: 1px solid #fff;
}

nav .gnb ul > li:first-child,
nav .gnb ul > li:last-child {
    background: #aaa;
}

nav .gnb ul > li > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 18px;
    text-align: center;
    line-height: 59px;
}


nav .lnb {
    width: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 999;
    display: none;
    box-shadow: 1px 20px 50px rgba(0, 0, 0, 0.1);
}


nav .lnb.on {
    display: block;
}

nav .lnb >div {
    display: flex;
    background-color: #fff;
}

nav .lnb >div > ul {
    width: 200px;
    padding: 30px 0 64px 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}


nav .lnb > div > ul:nth-child(1) {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

nav .lnb >div > ul > li {
    margin-bottom: 29px;
}

nav .lnb >div > ul > li > a,
nav .lnb >div > ul > li > span {
    font-size: 18px;
    font-weight: 500;
    color: #1F497D;
}

nav .lnb >div > ul > li > ul {
    margin-top: 7px;
}

nav .lnb >div > ul > li > ul > li {
    margin-top: 2px;
}

nav .lnb >div > ul > li > ul > li > a {
    font-size: 15px;
    color: #666;
}

nav .lnb >div > ul > li > ul > li > a::before {
    content: "-";
    display: inline-block;
    margin-right: 8px;
}

nav .lnb a:hover {
    color: #F3AC4A;
}









.sec {
    background: #fff;
}

.sec>div {
    display: flex;
    justify-content: space-between;
}

aside {
    width: 20%;
}

aside h2 {
    font-size: 32px;
    color: #1F497D;
    text-align: center;
    margin: 43px 0;
    cursor: pointer;
}

.asideBox {
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.Tab {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    font-size: 19px;
    color: #1F497D;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.Tab:hover {
    background-color: #1F497D;
    color: #fff;
}

.asideBox li.on .Tab {
    background-color: #1F497D;
    color: #fff;
}
/* .asideBox li .Tab span.material{
    transform: rotate(0deg);
    transition: all 0.3s;
} */
/* .asideBox li.on .Tab span.material{
    transform: rotate(180deg);
    transition: all 0.3s;
} */
.asideBox > li:first-child >div {
    border-top: none;
    /* border-bottom:  1px solid rgba(0, 0, 0, 0.1); */
}

/* .inside {
    display: none;
} */

.inside li {
    position: relative;
    font-size: 16px;
    padding: 0px 0 0 29px;
    color: #666;
    margin: 4px;
}

.inside li:hover {
    color: #F3AC4A;
}

.inside li.on {
    color: #F3AC4A;
}

.inside li::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background-color: #1F497D;
    position: absolute;
    top: 12px;
    left: 15px;
}











section {
    width: 70%;
    overflow: hidden;
}

.homeBt {
    display: flex;
    align-items: center;
    padding: 24px 0 41px 0;
}

.homeBt a:nth-of-type(1) {
    width: 24px;
    height: 24px;
    color: #1F497D;
}

.homeBt a:nth-of-type(2) {
    font-size: 15px;
    color: #666;
}

.homeBt a:nth-of-type(3) {
    font-size: 14px;
}

.homeBt > span {
    font-size: 20px;
    color: #666;
    padding: 0 6px;
}





section>div:nth-child(2) > div {
    display: none;
}

section>div:nth-child(2) > div.on {
    display: block;
}




section h2 {
    /* display: inline-block; */
    width: 176px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    /* border-right: 1px solid rgba(0, 0, 0, 0.1); */
    cursor: pointer;
}

section h2:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

section h2:hover {
    background-color: #1F497D;
    color: #fff;
}

section h2.on {
    background-color: #1F497D;
    color: #fff;
}

section>div:nth-child(2)>div>div:first-child {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.massageWrap {
    position: relative;
    display: none;
}

.massageWrap.on {
    display: block;
}

.massageWrap .next {
    font-size: 32px;
    position: absolute;
    top: 42px;
    right: 204px;
    color: #666;
    z-index: 10;
    cursor: pointer;
}

.massageWrap .prev {
    font-size: 32px;
    position: absolute;
    top: 42px;
    left: 204px;
    color: #666;
    z-index: 10;
    cursor: pointer;
}
.message {
    width: 100%;
    padding: 36px 16px;
}
.message>.slick-list {
    overflow-x: hidden;
    overflow-y: visible;
    /* ie에서는 x, y모두 선언해줘야 적용됨 */
}

.message>div>div {
    text-align: center;
}

.message div>span {
    padding: 0px 8px 11px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.message p {
    margin: 24px 4px;
    text-align: start;
}


.message span>span {
    color: #F3AC4A;
    font-size: 24px;
    margin-right: 8px;
}


/* .message .slick-slide {
    width: 809px;
} */


.message video {
    width: 100%;
}

/* .message video[poster] {
    object-fit: cover;
} */



.VR20th {
    /* display: flex; */
    padding: 36px 16px;
    display: none;
}

.VR20th.on {
    display: flex;
}

.VR20th img {
    width: 60%;
}

.VR20th div {
    padding: 24px 0px 0px 43px;
    line-height: 36px;
}

.VR20th span {
    color: #1F497D;
    font-weight: 500;
}

.VR20th ul {
    counter-reset: circle 0;
}

.VR20th li {
    position: relative;
    padding-left: 26px;
}

.VR20th li::before {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    counter-increment: circle 1;
    content: counter(circle);
    font-size: 12px;
    font-weight: 600;
    color: #F3AC4A;
}

.VR20th li::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: inline-block;
    border: 2px solid #F3AC4A;
    border-radius: 50%;
    width: 16px;
    height: 16px;
}








.specialEvent {
    width: 100%;
    /* position: relative; */
    display: none;
}

.specialEvent.on {
    display: block;
}

.specialEvent >div {
    padding: 36px 16px;
    position: relative;
}

.specialEvent >div:first-child {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.specialEvent p:nth-of-type(1) {
    font-size: 21px;
    margin-bottom: 16px;
    text-align: center;
}



.specialEvent .slick-list {
    width: 100%;
    height: 370px;
}

.specialEvent .slick-list .slick-track {
    height: 100%;
}

.specialEvent .next {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 58px;
    cursor: pointer;
    color: #666;
}

.specialEvent .prev {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 58px;
    cursor: pointer;
    color: #666;
}

.specialEvent button {
    display: none;
}

.specialEvent .slick-dots {
    display: flex;
    justify-content: center;
}

.specialEvent .slick-dots li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #1F497D;
    margin: 24px 4px;
}

.specialEvent .slick-dots li.slick-active {
    background-color: #F3AC4A;
}







.specialEvent01 .img1 {background: url(../img/special01.do) no-repeat center / contain;}
.specialEvent01 .img2 {background: url(../img/special02.do) no-repeat center / contain;}
.specialEvent01 .img3 {background: url(../img/special03.do) no-repeat center / contain;}
.specialEvent01 .img4 {background: url(../img/special04.do) no-repeat center / contain;}
.specialEvent01 .img5 {background: url(../img/special05.do) no-repeat center / contain;}
.specialEvent01 .img6 {background: url(../img/special06.do) no-repeat center / contain;}
.specialEvent01 .img7 {background: url(../img/special07.do) no-repeat center / contain;}
.specialEvent01 .img8 {background: url(../img/special08.do) no-repeat center / contain;}
.specialEvent01 .img9 {background: url(../img/special09.do) no-repeat center / contain;}
.specialEvent01 .img10 {background: url(../img/special10.do) no-repeat center / contain;}
.specialEvent01 .img11 {background: url(../img/special11.do) no-repeat center / contain;}
.specialEvent01 .img12 {background: url(../img/special12.do) no-repeat center / contain;}




.specialEvent02 .img1 {background: url(../img/Event01.do) no-repeat center / contain;}
.specialEvent02 .img2 {background: url(../img/Event02.do) no-repeat center / contain;}
.specialEvent02 .img3 {background: url(../img/Event03.do) no-repeat center / contain;}
.specialEvent02 .img4 {background: url(../img/Event04.do) no-repeat center / contain;}
.specialEvent02 .img5 {background: url(../img/Event05.do) no-repeat center / contain;}
.specialEvent02 .img6 {background: url(../img/Event06.do) no-repeat center / contain;}
.specialEvent02 .img7 {background: url(../img/Event07.do) no-repeat center / contain;}
.specialEvent02 .img8 {background: url(../img/Event08.do) no-repeat center / contain;}
.specialEvent02 .img9 {background: url(../img/Event09.do) no-repeat center / contain;}










.video20th {
    padding: 36px 16px;
    display: none;
}

.video20th.on {
    display: block;
}

.video20th video {
    width: 100%;
}

.video20th p {
    padding: 16px 8px;
}













.greetings {
    background: url(../img/getImage1.png) no-repeat;
    background-size: contain;
    margin: 36px 0;
}

.greetings div {
    padding-top: 356px;
}

.greetings p {
    margin-bottom: 6px;
    text-align: justify;
}

.greetings span {
    color: #F3AC4A;
    font-size: 21px;
}



.misson img {
    padding: 36px 0;
    width: 100%;
    height: auto;
}




.history {
    margin: 36px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 12px;
}


.history>div {
    margin: 0px 24px 24px 24px;
    position: relative;
}

.history>div::before {
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    border: 3px solid #1F497D;
    background: #fff;
    position: absolute;
    top: 14px;
    left: -43px;
}

.history>div>p:nth-child(1) {
    font-size: 24px;
    color: #1F497D;
    margin: 0 0 8px 0;
}


.history span {
    display: inline-block;
    color: #F3AC4A;
    margin: 0 12px;
}


.change2012 {
    margin: 0 0 0 46px;

}

.change2012 p::before {
    display: inline-block;
    content: "-";
    padding-right: 6px;
}


.flex2005 {
    display: flex;
    align-items: baseline;
}




.building {
    background: url(../img/building.jpg) no-repeat 50% 0;
    background-size: contain;
    margin: 36px 0;
}

.building div {
    padding-top: 434px;
}

.building span {
    display: block;
    color: #F3AC4A;
    font-size: 21px;
    padding-bottom: 12px;
}

.building p {
    margin-bottom: 6px;
    text-align: justify;
}





footer {
    width: 100%;
    height: auto;
    background-color: #3C4559;
    color: #fff;
}

.foot01 {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.foot01 a {
    display: inline-block;
    margin: 29px 30px 29px 0;
    font-size: 15px;
    color: #fff;
}
.foot01 a:nth-child(2) {
    color: #FF6767;
}

footer > div:nth-child(2) {
    display: none;
}



.foot02 .inner {
    padding: 35px 0;
    display: flex;
    position: relative;
}

.foot02 a {
    display: block;
    width: 133px;
    height: 43px;
    background: url(../img/flogo.png) no-repeat 50% 50%;
}

.foot02 a + div {
    padding-left: 50px;
}

.foot02 address {
    font-style: normal;
    font-size: 14px;
    padding-bottom: 4px;
}

.foot02 address span:nth-child(2) {
    font-size: 13px;
    margin: 0 8px;
}

.foot02 small {
    font-size: 14px;
    font-weight: lighter;
}

.foot02 img {
    position: absolute;
    right: 0;
}