img{-webkit-touch-callout: none;}
.inner{width: 1520px;margin: 0 auto;}
.main_visual{position: relative;width: 100%;height: 100vh;overflow: hidden;;}
.main_visual .scr{position: absolute;bottom: 80px;left: 120px;z-index: 99;}
.main_visual .scr strong{display: block;writing-mode: vertical-rl;transform: rotate(-180deg);font-size: 15px;color: #FFFFFF;font-family: "Montserrat", sans-serif;font-weight: 600;}
.main_visual .scr .scr_icon{display: flex;flex-direction: column;width: 17px;gap: 5px;margin-top: 20px;}
.main_visual .scr .scr_icon i{display: block;height: 2px;background-color: #fff;animation: scr 1s infinite linear;}
.main_visual .scr .scr_icon i.line01{animation-delay: 0.3s;}
.main_visual .scr .scr_icon i.line03{animation-delay: 0.6s;}
@keyframes scr {
    0%{opacity: 1;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}
.main_visual .box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.main_visual .box .main_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.main_visual .box .mv_text{position: absolute;left: 0;width: 100%;height: 100%;display: flex;align-items: center;}
.main_visual .box .mv_text strong{font-size: 70px;color: #FFFFFF;line-height: 82px;display: block;margin-bottom: 50px;}
.main_visual .box .mv_text strong br{ display: block !important; }
.main_visual .box .mv_text p{font-size: 26px;color: #FFFFFF;}
.main_visual .box .mv_text div div{display: flex;align-items: center;justify-content: space-between}
.main_visual .box .mv_text div i{display: block;;width: calc(100% - 570px);height: 2px;background: rgba(255,255,255,0.2);position: relative;}
.main_visual .box .mv_text div i:after{content: '';display: block;width: 0%;height: 100%;position: absolute;top: 0;left: 0;background-color: #fff;}
.main_visual .box.on .mv_text div i:after{animation: pro 4s;animation-delay: 1s;}
@keyframes pro {
    0%{width: 0;}
    100%{width: 100%;}
}
#main .m_title strong{font-size: 70px;color: #222222;display: block;font-family: "Montserrat", sans-serif;font-weight: 800;margin-bottom: 5px;}
#main .m_title span{font-size: 26px;color: #2A71C8;display: block;font-family: "Montserrat", sans-serif;font-weight: 600;margin-bottom: 19px;}
#main .m_title p{font-size: 20px;color: #222222;line-height: 1.5;;}
#main .m_title a{display: flex;align-items: center;gap: 12px;color: #2A71C8;font-size: 20px;font-weight: 600;margin-top: 40px;transition: 0.5s;}
#main .m_title a svg{display: block;}

#main .m_title a .icon{display: block;width: 42px;height: 42px;border-radius: 8px;background-color: #2C7DDF;overflow: hidden;;}
#main .m_title a .icon > div{width: 200%;height: 100%;transition: 0.5s;display: flex;transform: translateX(-50%);}
#main .m_title a:hover .icon > div{transform: translateX(0%);}
#main .m_title a .icon > div i{display: flex;height: 100%;width: 50%;align-items: center;justify-content: center;transition: 0.5s;}
#main .m_title a:hover .icon > div i{background-color: #002553;}
#main .m_title a:hover {color: #002553;transition-delay: 0s;}

#main .main_con01 .m_title a .icon > div{width: 100%;height: 200%;flex-direction: column;transform: translateY(-50%);}
#main .main_con01 .m_title a:hover .icon > div{transform: translateY(0);}
#main .main_con01 .m_title a .icon > div > i{width: 100%;height: 100%;}
#main .main_con01{background: url(/img/main/catal_bg.jpg) center center;padding: 150px 0;}
#main .main_con01 .w{display: flex;align-items: center;justify-content: space-between;;}
#main .main_con01 .w .img{margin-right: -30px;}
#main .main_con02{padding-top: 260px;padding-bottom: 200px;;}
#main .main_con02 .grapic .grapic_w {background-color: #F8FAFC;width: 645px;height: 645px;border-radius: 50%;position: relative;}
#main .main_con02 .grapic .grapic_w i{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#main .main_con02 .grapic .grapic_w i img{display: block;animation: cir 30s infinite linear;}
@keyframes cir {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

#main .main_con02 .grapic .grapic_w .title{width: 332px;height: 332px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #fff;box-shadow: 0 0 40px #9BB5D620;align-items: center;justify-content: center;display: flex;border-radius: 50%;}
#main .main_con02 .grapic .grapic_w .title strong{font-size: 70px;color: #2B3662;font-family: "Montserrat", sans-serif;font-weight: 800;}
#main .main_con02 .grapic .grapic_w ul li{position: absolute;background: url(/img/main/btn.png) ;background-size: 100% 100%; width: 160px;height: 160px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #002553;font-size: 28px;font-weight: 600;transition: 0.5s;box-shadow: 0 0 30px #5C90D220; text-align: center; }
#main .main_con02 .grapic .grapic_w ul li br{ display: block; }
#main .main_con02 .grapic .grapic_w ul li.on{background: url(/img/main/btn_on.png) ;background-size: 100% 100%; color: #fff;}
#main .main_con02 .grapic .grapic_w ul li:nth-child(1){left: 50%;transform: translateX(-50%) translateY(-60px);}
#main .main_con02 .grapic .grapic_w ul li:nth-child(2){top: 125px;right: -36px;}
#main .main_con02 .grapic .grapic_w ul li:nth-child(3){bottom: 36px;right: 24px;}
#main .main_con02 .grapic .grapic_w ul li:nth-child(4){bottom: 36px;left: 24px;}
#main .main_con02 .grapic .grapic_w ul li:nth-child(5){top: 125px;left: -36px;}
#main .main_con02 > div{display: flex;align-items: center;gap: 136px;}
#main .main_con02 > div .ncp_txt{position: relative;width: 730px;background-color: #F2F4F9; border-radius: 12px;margin-top: 40px;;}
#main .main_con02 > div .ncp_txt .txt{position: absolute;top: 0;left: 0;padding: 40px;opacity: 0;transition: 0.5s;}
#main .main_con02 > div .ncp_txt .txt.on{opacity: 1;}
#main .main_con02 > div .ncp_txt .txt01{position: relative;top: 0;left: 0;;}
#main .main_con02 > div .ncp_txt .txt strong{font-size: 32px;color: #2B3662;font-weight: 600;display: block;margin-bottom: 20px;}
#main .main_con02 > div .ncp_txt .txt p{font-size: 24px;color: #5D6578;line-height: 36px;;}
#main .main_con03{display: flex;}
#main .main_con03 .link{flex: 1;overflow: hidden;height: 100vh;}
#main .main_con03 .link a{display: block;width: 100%;height: 100%;position: relative;}
#main .main_con03 .link a .img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
#main .main_con03 .link a:after{content: '';display: block;width: 100%;height: 0%;background: linear-gradient(to bottom, #0058C500, #0058C5);position: absolute;bottom: 0;left: 0;z-index: 2;transition: 0.7s;}
#main .main_con03 .link a:hover:after{height: 100%;}
#main .main_con03 .link a .txt{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 5;}
#main .main_con03 .link a .txt div{position: relative;}
#main .main_con03 .link a .txt i{display: block;display: flex;width: 42px;height: 42px;background-color: #FFFFFF;border-radius: 8px;align-items: center;justify-content: center;position: absolute;bottom: -70px;left: 50%;margin-left: -21px;;}
#main .main_con03 .link a .txt div strong{font-size: 27px;color: #FFFFFF;}
#main .main_con03 .link a .txt div{transition: 0.7s;}
#main .main_con03 .link a:hover .txt div{transform: translateY(-45px);}
#main .main_con03 .link a .txt i{transform: scale(0.7);opacity: 0;transition: 0.7s;}
#main .main_con03 .link a:hover .txt i{transform: scale(1);opacity: 1;}
#main .main_con04{padding-top: 170px;padding-bottom: 200px;background-color: #F5F8FB;}
#main .main_con04 ul{border-top: 2px solid #DCE2E8;margin-top: 40px;opacity: 8px;}
#main .main_con04 ul li{border-bottom: 1px solid #E3E5E8;}
#main .main_con04 ul li a{display: flex;;height: 100px;position: relative;align-items: center;padding-left: 40px;transition: 0.5s;}
#main .main_con04 ul li:hover a{background-color: #002553;border-radius: 8px;}
#main .main_con04 ul li a .date{position: absolute;right: 40px;}
#main .main_con04 ul li a .date p{font-size: 18px;color: #BABEC2;transition: 0.5s;}
#main .main_con04 ul li a:hover .date p{color: #708CAF;}
#main .main_con04 ul li a .title{display: flex;align-items: center;gap: 20px}
#main .main_con04 ul li a .title span{display: flex; width: 93px;height: 36px;background-color: #FFFFFF;;border-radius: 22px;align-items: center;justify-content: center;font-size: 16px;color: #002553;font-weight: 600;}
#main .main_con04 ul li a .title strong{display: block;width: calc(100% - 113px);font-size: 22px;color: #2E2F30;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;transition: 0.5s;}
#main .main_con04 ul li:hover a .title strong{color: #fff;}

.main_visual .box .mv_text strong{transform: translateY(100px);opacity: 0;transition: 1.2s;}
.main_visual .box.on .mv_text strong{transform: translateY(0px);opacity: 1;transition-delay: 0.2s;}
.main_visual .box .mv_text div div{transform: translateY(100px);opacity: 0;transition: 1.2s;}
.main_visual .box.on .mv_text div div{transform: translateY(0px);opacity: 1;transition-delay: 0.6s;}
.main_visual .box{opacity: 0;}
.main_visual .box.active{opacity: 1;}
.main_visual .box.on{opacity: 1;transition: 1s;z-index: 10}
.main_visual .box.prev{opacity: 1;transition: 1s;}
.main_visual .box .main_img img{transform: scale(1.1);min-height: 100vh;min-width: 100vw}
.main_visual .box.on .main_img img{transform: scale(1);display: block;transition: 3s;;}

#main .m_title strong{transform: translateY(70px);opacity: 0;}
#main .on .m_title strong{transform: translateY(0px);opacity: 1;transition: 1s;}
#main .m_title p{transform: translateY(70px);opacity: 0;}
#main .on .m_title p{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.6s;}
#main .m_title span{transform: translateY(70px);opacity: 0;}
#main .on .m_title span{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.3s;}

#main .m_title .link_w{transform: translateY(70px);opacity: 0;}
#main .on .m_title .link_w{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.9s;}

#main .main_con01 .w .img{transform: translateY(70px);opacity: 0;}
#main .main_con01.on .w .img{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 1.2s;}

#main .main_con02 .grapic{transform: translateY(70px);opacity: 0;}
#main .main_con02.on .grapic{transform: translateY(0px);opacity: 1;transition: 1s;}
#main .main_con04 ul{transform: translateY(70px);opacity: 0;}
#main .main_con04.on ul{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.6s}
#main .main_con02 > div .ncp_txt{transform: translateY(70px);opacity: 0;}
#main .main_con02.on > div .ncp_txt{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 1.5s;}
#main .main_con02.on .m_title strong{transition-delay: 0.3s;}
#main .main_con02.on .m_title span{transition-delay: 0.6s;}
#main .main_con02.on .m_title p{transition-delay: 0.9s;}
#main .main_con02.on .m_title .link_w{transition-delay: 1.2s;}
#main .main_con03 .link a .img img{display: block;transform: scale(1.1);transition: 3s;}
#main .main_con03.on .link a .img img{display: block;transform: scale(1);transition: 3s;}
#main .main_con04.on .m_title p{transition-delay: 0.3s;}
#main .main_con03 .link a .img img, #main .main_con03 .link a .img{min-width: 100%}
@media (max-width: 1920px) {
    .main_visual .box .main_img img{min-width: 0}
}
@media (max-width: 1620px) {
    .inner{width: 100%;padding: 0 20px;}
    #main .main_con01 .w .img{margin-right: 0;}
    #main .main_con01 .w .img img{width: 700px;}
    #main .m_title strong{font-size: 60px;margin-bottom: 15px;}
    #main .m_title span{font-size: 22px;}
    #main .m_title p{font-size: 17px;;}
    .main_visual .box .mv_text p{font-size: 22px;}
    .main_visual .box .mv_text strong{font-size: 60px;line-height: 1.2;}
    .main_visual .scr{left: 20px;bottom: 40px;;}
    #header .hd_wrap #gnb > ul > li > a{line-height: 90px;font-size: 18px;}
    #header .hd_wrap #gnb > ul > li > ul li a{font-size: 17px;}
    #header .hd_wrap{height: 90px;}
    #header:before{top: 90px;}
    #header .hd_wrap #logo{left: 20px;}
    #header .hd_wrap .btn_wrap{right: 20px;}
    #main .main_con02 > div .ncp_txt .txt strong{font-size: 26px;margin-bottom: 15px;}
    #main .main_con02 > div .ncp_txt .txt p{font-size: 20px;line-height: 1.5;}
    #main .main_con02 > div .ncp_txt{width: 600px;}
    #main .main_con02 > div{gap: 90px;justify-content: center;}
    #main .main_con02 .grapic .grapic_w{transform: scale(0.9);}
    #main .main_con03 .link a .img img{height: 100vh;display: block;}
    #btn_top{right: 20px;bottom: 20px;;}
}
@media (max-width: 1350px) {
    #main .main_con02{padding: 80px 0;}
    #main .main_con02 > div{gap: 0}
    #main .main_con02 .grapic .grapic_w{transform: scale(0.8);}
    #main .main_con04{padding: 80px 0;}
    #main .main_con04 ul li a{height: 90px;}
}
@media (max-width: 1100px) {
    #main .main_con01 .m_title{display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;margin-bottom: 40px;;}
    #main .main_con02 .m_title{display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;margin-bottom: 40px;;}
    #main .main_con01 .w{display: flex;flex-direction: column;}
    #main .main_con01{padding: 80px 0 ;background-size: auto 100%;}
    #main .main_con02 > div{display: flex;flex-direction: column;}
    #main .main_con03 .link a .txt{width: 100%;text-align: center;}
    #main .main_con03 .link a .img{transform: translate(-36%,-50%)}
    
}
@media (max-width: 960px) {
    #btn_top button .w{transform: scale(0.7);}
    #btn_top button{width: 65px;height: 65px;border-radius: 7px;}
    #header .menu_btn button{display: flex;flex-direction: column;gap: 5px}
    #header .menu_btn button i{width: 22px;height: 1px;margin: 0 0;;}
    #main .main_con04 ul li a{padding-right: 100px;}
    #header .hd_wrap #gnb{display: none;}
    #header .hd_wrap .btn_wrap{display: flex;align-items: center;gap:20px}
    #header .menu_btn{display: block}
    .main_visual .box .mv_text strong{font-size: 40px;margin-bottom: 20px;;}
    .main_visual .box .mv_text p{font-size: 16px;}
    .main_visual .box .mv_text div i{width: calc(100% - 360px);}
    .main_visual .scr strong{font-size: 12.5px;}
    #main .m_title strong{font-size: 40px;}
    #main .m_title span{font-size: 17px;}
    #main .m_title p{font-size: 14px;}
    #main .m_title a > i > svg{width: 32px;height: auto;;}
    #main .m_title a{font-size: 14px;gap: 7px;margin-top: 20px;}
    #main .main_con01 .w .img img{width: 550px;}
    #main .main_con02 .grapic .grapic_w{transform: scale(0.6) translateY(-30%);;}
    #main .main_con02 .txt_w{margin-top: -200px;}
    #main .main_con02 > div .ncp_txt .txt strong{font-size: 17px;margin-bottom: 10px;}
    #main .main_con02 > div .ncp_txt .txt p{font-size: 14px;}
    #main .main_con02 > div .ncp_txt .txt{padding: 20px;border-radius: 8px;}
    #main .main_con03 .link a .txt div strong{font-size: 20px;}
    #main .main_con03 .link a .txt i{width: 30px;height: 30px;bottom: -50px;border-radius: 6px;}
    #main .main_con03 .link a .txt i svg{width: 10px;height: auto;;}
    #main .main_con04 ul li a{padding-left: 20px;}
    #main .main_con04 ul li a .date{right: 20px;}
    #main .main_con04 ul li a{height: 60px;}
    #main .main_con04 ul li a .title strong{font-size: 15px;}
    #main .main_con04 ul li a .title span{font-size: 14px;width: 63px;height: 26px;;}
    #main .main_con04 ul li a .title{width: 100%;}
    #main .main_con04 ul li a .date p{font-size: 13px;;}
    #main .main_con04 ul{margin-top: 20px;}
    #footer .ft02 ul li{font-size: 14px;}
    #footer .ft01 .link a{font-size: 14px;}
    #footer .ft01 .link{gap: 10px}
    #footer .ft02 ul{gap: 8px}
    #footer .ft01 svg{width: 160px;height: auto;;}
    #footer{padding: 60px 0;}
    #footer .ft02 address{font-size: 11px;margin-top: 30px;word-break: keep-all;;}
    #footer .ft01{margin-bottom: 30px;}
    #header .hd_wrap{height: 65px;}
    #header::before{display: none;}
    #header .hd_wrap #logo svg{width: 120px;height: auto;}
    #header .hd_wrap .btn_wrap .lang_btn button svg{width: 12px;height: auto;;}
    #header .hd_wrap .btn_wrap .lang_btn button{font-size: 14px;}
    #main .m_title a .icon{width: 32px;height: 32px;border-radius: 6px;}
    #main .m_title a .icon svg{width: 10px;height: auto;}
    #all_menu > ul > li > a{font-size: 16px;}
    #all_menu{width: 280px;}
    #all_menu > ul > li ul li > a{font-size: 14px;line-height: 2;;}
    #all_menu .close{right: 20px;top: 20px;}
    #header .hd_wrap .btn_wrap .lang_btn ul{width: 60px;}
    #header .hd_wrap .btn_wrap .lang_btn ul li a{line-height: 30px;font-size: 13px}
}
@media (max-width: 620px) {
    #main .main_con03 .link a .img{transform: translate(-50%,-50%)}
    .main_visual .box .main_img img{min-height: 90vh}
    #main .main_con01 .w .img img{width: 360px;}
    #main .m_title strong{font-size: 32px;}
    #main .m_title span{font-size: 15px;}
    #main .main_con01{padding: 60px 0;padding-bottom: 40px;}
    #main .main_con02 > div .ncp_txt{max-width: 100%;}
    #main .main_con02 .grapic .grapic_w{transform: none;width: 295px;height: 295px;;}
    #main .main_con02 .grapic .grapic_w i img{width: 230px;}
    #main .main_con02 .grapic .grapic_w .title{width: 150px;height: 150px;}
    #main .main_con02 .grapic .grapic_w ul li{width: 75px;height: 75px;font-size: 15px;}
    #main .main_con02 .grapic .grapic_w ul li:nth-child(1) {transform: translateX(-50%) translateY(-27px);}
    #main .main_con02 .grapic .grapic_w ul li:nth-child(2){right: -20px;top: 58px;}
    #main .main_con02 .grapic .grapic_w ul li:nth-child(5){left: -20px;top: 58px;}
    #main .main_con02 .grapic .grapic_w ul li:nth-child(3){right: 9px;bottom: 16px;}
    #main .main_con02 .grapic .grapic_w ul li:nth-child(4){left: 9px;bottom: 16px;}
    #main .main_con02 .grapic .grapic_w .title strong{font-size: 30px;}
    #main .main_con02 .txt_w{margin-top: 30px;}
    #main .main_con02 .txt_w{width: 100%;}
    #main .main_con02 > div .ncp_txt .txt p br{display: none;}
    #main .main_con02 > div .ncp_txt .txt p{word-break: keep-all;}
    #main .main_con02 > div .ncp_txt .txt01{position: absolute;}
    #main .main_con02 > div .ncp_txt .txt03{position: relative;}
    #main .main_con03{height: 80vh;flex-direction: column;}
    #main .main_con03 .link{flex: 1;}
    #main .main_con03 .link a .img{width: 100%;}
    #main .main_con03 .link a .img img{height: auto;width: 100%;}
    #main .main_con03 .link a .txt i{display: none;}
    #main .main_con03 .link a:hover .txt div{transform: translateY(0px);}
    #main .main_con04 ul li a .title span{font-size: 12px;}
    #main .main_con04 ul li a .title{gap: 7px}
    #main .main_con04 ul li a .date p{font-size: 12px;}
    #main .main_con04 ul li a{padding-right: 80px;height: 45px;;}
    #main .main_con04 ul li a .title strong{font-size: 13px;width: calc(100% - 73px);}
    #main .main_con04 ul li a{padding-left: 10px;}
    #main .main_con04 ul li a .date{right: 10px;}
    .main_visual{height: 90vh;}
    .main_visual .box .mv_text strong{font-size: 28px;}
    .main_visual .box .mv_text div div{flex-direction: column;gap: 30px;align-items: flex-start}
    .main_visual .box .mv_text div i{width: 100%;}
    .main_visual .scr strong{font-size: 9px;}
    .main_visual .scr .scr_icon{width: 10px;gap: 3px;margin-top: 7px;}
	.main_visual .box .mv_text div div{justify-content: flex-start}
	.main_visual .box .mv_text strong em{display: block}
    #header .hd_wrap .btn_wrap .lang_btn ul{width: auto;gap: 10px}

}
@media (max-width: 500px) {
    #main .main_con04, #main .main_con02{padding: 60px 0;}
    #main .m_title span{word-break: keep-all;line-height: 1.5;}
    #main .main_con01 .m_title p{word-break: keep-all;}
    #main .main_con01 .m_title p br{display: none;}
    #main .main_con01 .w .img img{width: 300px;}
    #footer .ft02 ul li{font-size: 12px;}
    #footer .ft02 ul li span{width: 66px;}
	#footer .ft02 ul li p{width: calc(100% - 66px)}
    #footer .ft01 svg{width: 120px;}
    #footer .ft01 .link a{font-size: 13px;}
    #footer .ft01{margin-bottom: 20px;}
    #footer{padding: 45px 0;}
    #footer .ft02 address{margin-top: 20px;}
}