@charset "utf-8";

/* base */
*{ padding: 0; margin: 0; font-family: 'SpoqaHanSansNeo', "맑은 고딕", "Apple SD Gothic Neo", sans-serif; color: #000; font-weight: 400; }
li{ list-style: none; }
a{ text-decoration: none; }
img{ border: none; }

body{word-break: keep-all;}
#wrap{width: 100%; overflow-x: hidden; overflow-y: hidden;}
.inner{width: 1280px; margin: 0 auto;}
.scroll_hidden{overflow: hidden; position: fixed;}

/* header */
header{position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 70px; z-index: 999999; background-color: #fff;}

header > .inner{clear: both; display: flex; justify-content: space-between; align-items: center; height: 100%;}

header .logo a{display: block; width: 100%; height: 34px;}
header .logo a img{width: 113px;}

header nav .gnb_1depth{display: flex; align-items: center; height: 100%;}
header nav .gnb_1depth > li{position: relative; height: 100%; margin: 0 35px; line-height: 70px;}
header nav .gnb_1depth > li a{display: block; height: 100%; font-size: 18px; font-weight: 700;}

header nav .gnb_1depth .gnb_wrap{position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 140px; z-index: 99; opacity: 0; visibility: hidden;}
header nav .gnb_2depth{background-color: #fff; padding: 10px; box-shadow: 0px 30px 32px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; transition: 5s; transition: ease-in; transition-duration: 1s;}
header nav .gnb_2depth::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #D10010;}
header nav .gnb_2depth > li{text-align: center; line-height: 135%;}
header nav .gnb_2depth > li a{display: block; font-size: 14px; font-weight: 400; margin: 20px 0;}

header nav .gnb_1depth > li:hover .gnb_wrap{opacity: 1; visibility: visible;}
header nav .gnb_2depth > li a:hover{color: #D10010;}


header .subNav li:first-child{float: left; margin-right: 10px;}
header .subNav li:last-child{float: right;}

header .subNav .logout{width: 70px; height: 30px; border-radius: 15px; background-color: #D10010;}
header .subNav .logout a{display: block; width: 100%; height: 100%; text-align: center; margin-top: 8px; font-size: 12px; font-weight: 700; color: #fff; transition: ease-in 0.3s}
header .subNav .logout:hover{background-color: #1b1b56;}

#google_translate_element .goog-te-gadget-simple{position: relative; display: block; width: 70px; height: 30px; padding: 0; border: 2px solid #707070; border-radius: 15px; box-sizing: border-box; background-color: transparent;}
#google_translate_element .goog-te-gadget-simple::before{content: url(../image/ionic-ios-globe.png); position: absolute; top: 5px; left: 18px; z-index: -1;}
#google_translate_element .goog-te-gadget-simple::after{content: url(../image/ionic-ios-arrow-down.png); position: absolute; top: 3px; right: 18px; z-index: -1;}
#google_translate_element .goog-te-gadget-simple > img, #google_translate_element .goog-te-gadget-simple > span{display: none;}
#google_translate_element .VIpgJd-ZVi9od-xl07Ob-lTBxed{display: block; width: 100%; height: 100%; padding: 5px 17px; box-sizing: border-box;}

.skiptranslate[style*="display: none;"] + header {
  padding-top: 0;
}

.skiptranslate:not([style*="display: none;"]) + header {
  padding-top: 40px;
}

/* visual */
.main_visual{position: relative; width: 100%; min-width: 1280px;}
.main_visual img{width: 100%; display: block; margin: 0 auto;}

.main_visual .txt{position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-width: 1280px; width: 100%; height: 180px;}
.main_visual .txt strong{display: block; text-align: center; color: #fff; font-size: 60px; font-weight: bold; animation: fadeIn 0.8s ease-in-out;}
.main_visual .txt p{text-align: center; color: #fff; font-size: 24px; font-weight: 500; line-height: 36px; animation: fadeIn 1.5s ease-in-out;} 

@keyframes fadeIn{
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

.main_menu{background-color: #fff; position: absolute; bottom: 0; left: 0; right: 0; width: 1050px; transform: translateY(50%);}
.main_menu ul{display: flex; align-items: center; justify-content: center; border-radius: 0 0 15px 15px;}
.main_menu li{width: 525px; padding: 25px 0; box-sizing: border-box;}
.main_menu li:first-child{position: relative; border-top: 7px solid #D10010; background-color: #fff; border-bottom: 1px solid #CBCBCB; border-left: 1px solid #CBCBCB; border-radius: 0 0 0 15px;}
.main_menu li:first-child::after{content: ''; position: absolute; top: calc(50% - 20px); right: 0; display: block; width: 1px; height: 40px; background-color: #CBCBCB;}
.main_menu li:last-child{border-top: 7px solid #0C355C; background-color: #fff; border-bottom: 1px solid #CBCBCB; border-right: 1px solid #CBCBCB; border-radius: 0 0 15px 0;}
.main_menu li a{display: block; width: 100%; height: 100%; text-align: center; font-size: 24px; font-weight: 700; line-height: 135%;}
.main_menu li a span{font-size: 16px; font-weight: 500; color: #777;}
.main_menu li:first-child a{color: #D10010;}
.main_menu li:last-child a{color: #0C355C;}

.main_menu li:hover{transform: translateY(-10%); transition: ease-in 0.3s; border: none; border-radius: 15px; box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.2);}
.main_menu li:hover li{border: 1px solid #CBCBCB;}
.main_menu li:hover a, .main_menu li:hover a span{color: #fff;}
.main_menu li:first-child:hover{background-color: #D10010;}
.main_menu li:last-child:hover{background-color: #0C355C;}

.main_menu li:hover::after{display: none;}

/* main_content */
.main_content{padding: 160px 0 100px; box-sizing: border-box;}
.main_content h2{text-align: center; font-size: 42px; font-weight: 700; margin-bottom: 15px;}
.main_content > div > p{text-align: center; font-size: 20px; font-weight: 500; line-height: 28px;}

.main_content .info{margin: 50px 0 25px; width: 100%; height: 400px;}
.main_content .info .txt{position: relative; float: left; width: 550px; height: 100%; padding: 50px; box-sizing: border-box; background-color: #F8F8F8;}
.main_content .info .txt strong{display: block; font-size: 28px; font-weight: 700; margin-bottom: 16px;}
.main_content .info .txt p{font-size: 18px; font-weight: 400; color: #666; line-height: 32px;}
.main_content .info .txt .more{position: absolute; bottom: 50px; left: 50px; display: block; color: #666;}
.main_content .info .txt .more:hover{transform: translateX(10%); transition: ease-in-out; transition-duration: 0.3s;}
.main_content .info .txt .more::after{content: url(../image/ionic-ios-arrow-forward.png); position: relative; right: -10px; top: 2px;}
.main_content .info .txt .icon{position: absolute; bottom: 50px; right: 50px; width: 60px;}

.main_content .info .img{float: right; width: 730px; height: auto;}

.main_content .list{clear: both; display: flex; justify-content: space-between;}
.main_content .list li{width: 410px; border: 1px solid #E5E5E5; margin-right: 25px; padding: 45px 30px; box-sizing: border-box;}

.main_content .list li:hover{background-color: #D10010; transition: ease-in 0.3s; box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.2);}
.main_content .list li:hover .txt strong{color: #fff;}
.main_content .list li:hover .txt p{color: #fff;}

.main_content .list li:last-child{margin-right: 0;}
.main_content .list li .icon{float: left; position: relative; width: 110px; height: 110px; border-radius: 50%; margin-right: 25px; background-color: #D10010;}
.main_content .list li .icon img{position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; height: 45px;}
.main_content .list li .txt p{font-size: 16px; color: #666; line-height: 24px;}
.main_content .list li .txt strong{display: block; margin-bottom: 10px; font-size: 24px; font-weight: 700;}

/* footer */
footer{clear: both; width: 100%; min-width: 1280px; background-color: #333333; padding: 37px 0 36px;}
footer::after{content: ''; display: block; clear: both;}
footer .info{float: left;}
footer .info li{color: #fff; font-size: 14px; line-height: 24.5px;}

footer .footer_nav{float: right; display: flex;}
footer .footer_nav li{position: relative; margin-right: 30px;}
footer .footer_nav li::after{content: ''; position: absolute; top: 2.5px; right: -15px; width: 1px; height: 14px; background-color: #999;} 
footer .footer_nav li:last-child{margin-right: 0;}
footer .footer_nav li:last-child::after{display: none;}
footer .footer_nav a{color: #999; font-size: 14px;}