@charset "utf-8";

/* 메인 */
.video_area {
    max-width: 100%;
    height: 0;
    overflow: hidden;
    position: relative;
    padding-bottom: 57.25%;
}

#video {
    width: 100%;
    height: 98%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 0 50px 50px;
}

#main_area {
    margin-bottom: 141px;
    position: relative;
}

.text_area {
    color: white;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.text_area h2 {
    font-size: 60px;
    font-weight: 800;
    line-height: 80px;
    margin-bottom: 65px;
}

.main_button {
    margin: 0 290px;
    position: relative;
}

.main_button a {
    color: white
}

.main_button span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main_button .default {
    display: none;
    opacity: 0.5;
}

.main_button:hover .default {
    display: inline;
}

.main_button:hover .fixed {
    display: none;
}

.scroll {
    color: white;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 91%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.scroll .text{color: #fff;}
.scroll .ball {
    border: 1px solid white;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: white;
    position: absolute;
    left: 30px;
    top: 29px;
}

.scroll .line {
    border: 1px solid white;
    position: absolute;
    left: 33px;
    top: 35px;
    height: 56px;
    opacity: 0.5;
}
/* 메인 */



/* section-about */
#about {
    width: 1480px;
    margin: 0 auto; 
}

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

#about .left_tit {
    float: left;
}

#about .left_tit h3 {
    font-size: 48px;
    font-weight: 900;
    color: #045eac;
    margin-bottom: 26px;
}

#about .left_tit .color {
    color: #00ac72;
}

#about .left_tit p {
    font-size: 24px;
    font-weight: 500;
    color: #666666;
    line-height: 34px;
    margin-bottom: 140px;
}

#about .left_tit .bold {
    color: #444444;
    font-weight: 700;
}

#about .right_tit {
    float: right;
}

#about .right_tit span {
    font-size: 48px;
    font-weight: 900;
    color: #EEEEEE;
}

#about .right_tit span:hover {
    color: #666666;
}

#swiper-section {
    overflow: hidden;
    margin-bottom: 140px;
}

#swiper-section .swiper {
    overflow: unset;
    /* margin-right: 587px; */
    margin-left: 212px;
}

#swiper-section .swiper-slide {
    margin-right: 40px;
}

#swiper-section .swiper-pagination {
    display: none;
}

#swiper-section dl {
    position: relative;
    padding-bottom: 10px;
}

#swiper-section dl dt img{width: 100%;}

#swiper-section dd {
    border-radius: 0 20px 0 20px;
    width: 220px;
    height: 55px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    color: white;
    background: rgb(0,136,255);
    background: linear-gradient(90deg, rgba(0,136,255,1) 0%, rgba(0,212,140,1) 100%);
    position: absolute;
    bottom: 3px;
    left: 0;
}
/* section-about */


/* section-banner */
#banner {
    background-image: url(/assets/images/main_2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* width: 1720px; */
    width: 90%;
    margin: 0 auto;
    height: 450px;
    border-radius: 20px;
    /* margin-left: 100px; */
    margin-bottom: 141px;
}

#banner .banner_title {
    padding-left: 7%;
    padding-top: 4%;
}

#banner .fgss {
    color: #00AC72;
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 4px;
}

#banner h2 {
    font-size: 38px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 30px;
}

#banner p {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 70px;
}

#banner .bold_2 {
    font-weight: 800;
}

#banner .img_hover {
    position: relative;

}
/* #banner .img_hover a {display:inline-flex; width:200px; height:100px; clip-path: polygon(14% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0% 50%);} */

#banner .img_hover p {
    position: absolute;
    left: 6%;
    top: 47%;
    transform: translate(-50%,-50%);
    color: #00AC72;
    font-size: 15px;
    font-weight: 500;
}

#banner .img_hover .default {
    display: none;
}

#banner .img_hover:hover .default {
    display: inline;
}

#banner .img_hover:hover .fixed {
    display: none;
}

#banner .fa-regular {
    color: white;
    position: absolute;
    left: 11%;
    top: 47%;
    font-size: 15px;
    display: none;
}

#banner .img_hover:hover .fa-regular {
    display: block;
}
/* section-banner */




/* section-newsroom */
#newsroom {
    width: 1480px;
    margin: 0 auto; 
    margin-bottom: 219px;   
}
#newsroom .title {
    margin-bottom: 140px;
}

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

#newsroom .left_tit {
    float: left;
}

#newsroom .left_tit h3 {
    font-size: 48px;
    font-weight: 900;
    color: #045eac;
    margin-bottom: 26px;
}

#newsroom .left_tit .color {
    color: #00ac72;
}

#newsroom .left_tit p {
    font-size: 24px;
    font-weight: 500;
    color: #666666;
    line-height: 34px;
}

#newsroom .left_tit .bold {
    color: #444444;
    font-weight: 700;
}

#newsroom .right_tit {
    float: right;
}

#newsroom .right_tit span {
    font-size: 48px;
    font-weight: 900;
    color: #EEEEEE;
}

#newsroom .right_tit span:hover {
    color: #666666;
}

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

#newsroom .left_news {
    display: flex;
    flex-direction: column;
}

#newsroom .left_news a:first-child {
    border-top: 2px solid #707070;
}

#newsroom .left_news dt {
    float: left;
    font-size: 20px;
    font-weight: 500;
    color: #555555;
    border-bottom: 1px solid #EEEEEE;
    width: 1480px;
    padding: 33px 0 33px 10px;
    display:inline-flex;
    position:relative;
    transition: 0.5s;
}

#newsroom .left_news dd {
    float: right;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    margin-top: -51px;
}

#newsroom .left_news dl:hover dt {
    font-size: 20px;
    font-weight: 600;
    color: #045EAC;
}

#newsroom .left_news dl:hover dd {
    color: #666666;
}

#newsroom .fa-solid {
    color: #045EAC;
}

#newsroom dl span {width:0; transition: 0.5s; display:inline-flex; opacity:0; position:absolute; left:0;}
#newsroom .left_news dl:hover dt {padding-left:30px;}
#newsroom .left_news dl:hover span {width:auto; opacity:1;}

#newsroom .left_news dl:hover .fa-solid {
    display: inline;
}

/* section-newsroom */


/* header - hamburger button 추가 */
button.hamburger{position: relative; height: 80px; border: none; background-color: transparent;}
button.hamburger span{position: absolute; top: 47%; left: 50%; transform: translate(-50%,-47%); display: block; cursor: pointer; background-color: transparent; border: none; padding: 0; width: 15px; height: 13px; background: url('../../assets/images/hamburger_btn.png') center / contain no-repeat; width: 16px;}



#header.main_header:hover .hamburger span,
#header.main_header.fixed .hamburger span{display: block; background: url('../../assets/images/hamburger_btn_active.png') center / contain no-repeat; width: 15px; height: 13px;}

#header .bot_header .hamburger span{display: block; background: url('../../assets/images/hamburger_btn_active.png') center / contain no-repeat; width: 15px; height: 13px;}


#header.main_header .hamburger span{display: block; background: url('../../assets/images/hamburger_btn.png') center / contain no-repeat; width: 15px; height: 13px;}

#header .gnb_globe > ul > li:nth-of-type(2){margin-left: 35px;}
#header .gnb ul.menu > li:hover > .main-link::after {transform:translateX(-50%) scaleX(1);}
#header .gnb ul.menu > li.on > .main-link::after {transform:translateX(-50%) scaleX(1);}
#header .gnb ul.menu > li img {margin-top: 30px;}

#header .gnb_globe ul.menu > li:hover > .main-link::after {transform:translateX(-50%) scaleX(1);}
#header .gnb_globe ul.menu > li.on > .main-link::after {transform:translateX(-50%) scaleX(1);}
/* header - hamburger button 추가 */


/* 사이트맵 */
.siteMap.active{display: block;}
.siteMap{display: none; position: fixed;  box-sizing: border-box; width: 100%; height: 100%; z-index: 9999; top: 0px; background-color: #fff;}
.siteMap > .logo{width: 1480px; margin: 0 auto; margin-bottom: 120px; display: flex; justify-content: space-between; align-items: center;}
.siteMap > .logo a{display: block; line-height: 80px;}
.siteMap > .logo a img{display: block; line-height: 0;}
.siteMap > .logo .siteMapClose{display: block; height: 80px; position: relative; line-height: 80px; background-color: transparent; border: none;}
.siteMap > .logo .siteMapClose:after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../../assets/images/siteMapClose.png') center / contain no-repeat; width: 16px; height: 13px;}

.siteMap > .logo > div{display: flex;}

.siteMap > ul{display: flex; flex-wrap: wrap; width: 1480px; margin: 0 auto;}
.siteMap > ul > li{width: 23%; margin-bottom: 110px;}
/* .siteMap > ul > li:not(:nth-of-type(4n)){margin-right: 2.66%;} */
.siteMap > ul > li > a{ margin-bottom: 15px; color: #444444; font-size: 18px; font-weight: 600; padding: 15px 0; position: relative; display: block; border-bottom: 2px solid #dddddd;}
.siteMap > ul > li > a:before{content: ''; position: absolute; background-color: #00AC72; height: 2px; width: 40px; left: 0; bottom: -2px;}
.siteMap > ul > li > a img{position: absolute; right: 0;}

.siteMap > ul > li > ul > li > a{display: block; line-height: 40px; font-size: 18px; color: #666666;}
.siteMap > ul > li > ul > li > a:hover{text-decoration: underline;}
/* 사이트맵 */
.siteMap .lang-menu:after{content:''; position:absolute; left:50%; bottom:0; width:56px; height:2px; transform:translateX(-50%) scaleX(0); transition: .5s; background:transparent;}
.siteMap .lang-menu ul li {position:relative; text-align: center;}
.siteMap .lang-menu ul li:first-child {margin: 8px 0 10px; color:#999999;}
.siteMap .lang-menu ul li:first-child:hover {color: #00AC72;}
.siteMap .lang-menu ul li:last-child {margin-left:0; font-size:14px; font-weight:600; color:#999999;}
.siteMap .lang-menu ul li:last-child:hover {color: #00AC72;}
.siteMap .lang-menu ul li:last-child::after {content:none;}
.siteMap .lang-menu ul li.on { font-size:14px; font-weight:600;}
.siteMap .lang-menu ul li.on::after {content:""; width:100%; height:2px; position:absolute; left:50%; top:100%; transform:translateX(-50%);}
.siteMap .main-link{position: relative; width: 56px;}
.siteMap .main-link a{height: 80px;}
.siteMap .main-link a img{top: 30px; position: absolute; left: 50%; transform: translateX(-50%);}
.siteMap .main-link a img{display: inline;}
.siteMap .main-link.active{height: 80px; z-index: 999;}
.siteMap .main-link.active .lang-menu{display: block; width: 56px; left: 50%; transform: translateX(-50%); border-top: 2px solid #00AC72;}
.siteMap .sub_lang {position: absolute; left:50%; margin-left:-28px; top:100%; display:none; cursor:pointer;}
.siteMap .lang-menu {display: none; position: absolute; top: 75%; transform: translateY(-50%); vertical-align: top; width:56px; height: 58px; background-color: #FBFBFB;  }
.siteMap .gnb_globe > ul.menu > li > .main-link {position:relative;}
.siteMap .gnb_globe > ul.menu > li > .main-link a {font-weight:600; font-size:18px; line-height:80px; color:#444; position:relative;}
.siteMap .gnb_globe > ul.menu > li > .main-link::after {content:""; position:absolute; left:50%; bottom:0; width:56px; height:2px; transform:translateX(-50%) scaleX(0); transition: .5s; background:transparent;}
.siteMap .gnb ul.menu > li.on > .main-link::after {content:none;}

.siteMap > .logo .siteMapClose{margin-left: 15px;}

.siteMap .buttonBox{position: absolute;}
.siteMap .buttonBox a{color: #999999; cursor: pointer; padding: 0 20px; font-size: 14px; font-weight: 400; background-color: transparent; border: none;}
.siteMap .buttonBox .login_btn{position: relative;}
.siteMap .buttonBox .login_btn:after{content: ''; position: absolute; width: 1px; height: 14px; right: -1px; top: 1px;}

.siteMap .buttonBox.after{display: none;}
.siteMap .buttonBox.before.active{display: none;}
.siteMap .buttonBox.after.active{display: block;}
.siteMap .buttonBox{display: none;}