@charset "utf-8"; label, input, select{vertical-align:middle;} body{font-size:14px; font-family:'Pretendard', '맑은 고딕', 'Malgun Gothic', Dotum, "돋움",Gulim, "굴림", Verdana, Tahoma, AppleGothic, sans-serif; color:#333; letter-spacing:0; } input, textarea, select{ font-family:'Pretendard', sans-serif !important; } input[type="checkbox"]{ border:1px solid #ddd;} /* font-family: 'Montserrat', sans-serif; */ /* header */ #header {position: fixed; width: 100%; left: 0; top: 0; z-index: 10000;} #header .h_inner {max-width: 1720px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; position: relative; padding: 0 260px;} #header .logo {position: absolute; font-size: 0; width: 200px; height: 51px; background: url(../images/common/logo.png) no-repeat center; left: 0; top: 40px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; z-index: 10;} #header .menu_btn {position: absolute; right: 0; top: 55px; width: 26px; height: 20px; cursor: pointer; z-index: 10;} #header .menu_btn span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #header .menu_btn.on span {background-color: #111;} #header .menu_btn span:nth-child(1) {top: 0;} #header .menu_btn.on span:nth-child(1) {top: 50%; margin-top: -1px; transform: rotate(135deg);} #header .menu_btn span:nth-child(2) {top: 9px;} #header .menu_btn.on span:nth-child(2) {opacity: 0;} #header .menu_btn span:nth-child(3) {bottom: 0;} #header .menu_btn.on span:nth-child(3) {bottom: 0; top: 50%; margin-top: -1px; transform: rotate(-135deg);} #header .lang_bx {position: absolute; box-sizing: border-box; right: 63px; top: 53px; border: 1px solid #fff; border-radius: 12px; overflow: hidden; z-index: 2; -webkit-transition: border 0.3s; -moz-transition: border 0.3s; transition: border 0.3s;} #header .lang_bx a {width: 50px; display: inline-block; font-size: 12px; color: #fff; font-weight: 500; letter-spacing: -0.025em; word-break: keep-all; line-height: 22px; -webkit-transition: color 0.3s, background 0.3s; -moz-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; margin-right: -2px; text-align: center;} #header .lang_bx a:last-child {margin-right: 0;} #header .lang_bx a.on {color: #111111; background-color: #fff; border-radius: 11px;} #header.scroll .logo, #header.on .logo {background: url(../images/common/logo_on.png) no-repeat center;} #header.smOn .logo {background: url(../images/common/logo.png) no-repeat center;} #header.scroll .menu_btn span, #header.on .menu_btn span {background-color: #111111;} #header.smOn .menu_btn span {background-color: #111111;} /* siteMap */ #siteMap {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; display: none; overflow: hidden;} /* footer */ #footer {background-color: #0f0f0f;} #footer .f_inner {max-width: 1720px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; position: relative; padding: 80px 420px 94px 260px;} #footer .logo {position: absolute; left: 0; top: 72px;} #footer .info_bx {max-width: 880px; margin-bottom: 22px;} #footer .info_bx li {font-size: 16px; color: #aaaaaa; word-break: keep-all; display: inline-block; margin-right: 25px; margin-bottom: 11px;} #footer .info_bx li:last-child {margin-right: 0;} #footer .logo_bx {font-size: 0; position: absolute; right: 0; top: 80px;} #footer .logo_bx li {display: inline-block; vertical-align: middle; margin-right: 30px;} #footer .logo_bx li:last-child {margin-right: 0;} #footer .btm_txt {font-size: 16px; color: #666666; word-break: keep-all; font-weight: 100;} /* s_visual */ #s_visual {position: relative; box-sizing: border-box; z-index: 50;} #s_visual .slogan { display:table; width:100%; table-layout:fixed; height: 520px; box-sizing:border-box; z-index: 1; overflow: hidden;} #s_visual .slogan > .title_box{ display:table-cell; vertical-align:middle; position: relative; padding: 81px 20px 0;} #s_visual .slogan .title_box > .bg_img {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; transform: scale(1.2);} #s_visual .slogan .title_box > .bg_img.on {transform: scale(1);} #s_visual .slogan > .title_box .ttl_w {position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;} #s_visual .slogan > .title_box .title {display:block; font-size: 58px; color: #ffffff; font-weight: 800; position: relative; word-break: keep-all;} #s_visual .slogan > .title_box .sub_tit {position: relative; margin-top: 17px;} #s_visual .slogan > .title_box .sub_tit span {font-family: 'Montserrat', sans-serif; font-size: 24px; color: rgba(255,255,255,0.5); word-break: keep-all;} #s_visual.s_visual_01 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_01.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_02 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_02.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_03 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_03.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_04 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_04.jpg') no-repeat center; background-size:cover;} .pc_show2 {display: block!important;} .m_show2 {display: none!important;} @media all and (min-width:1922px){ /* header */ #header .menu_bg {background-size: cover!important;} } /* PC */ @media all and (min-width:1025px){ .pc_show{ display:block !important;} .pc_i_show{ display:inline-block !important;} .m_show{ display:none !important;} .m_i_show{ display:none !important;} /* header */ #header .menu_bg {position: absolute; width: 100%; height: 130px; left: 0; top: 0; background: url(../images/common/menu_bg.jpg) no-repeat center 0; z-index: 1; opacity: 0; -webkit-transition: opacity 0.3s, height 0.3s; -moz-transition: opacity 0.3s, height 0.3s; transition: opacity 0.3s, height 0.3s;} #header.on .menu_bg {height: 440px; opacity: 1;} #header .menu_bx {text-align: center; font-size: 0;} #header .menu_bx .dep1_wrap {display: inline-block;} #header .menu_bx .dep1 {display: inline-block; padding: 0 60px; position: relative; z-index: 2; vertical-align: top; height: 100%; box-sizing: border-box; /*overflow: hidden;*/} #header .menu_bx .dep1::before {content: ''; width: 100%; height: 130px; background-color: #102768; position: absolute; top: 0; left: 0; -webkit-transition: opacity 0.3s, height 0.3s; -moz-transition: opacity 0.3s, height 0.3s; transition: opacity 0.3s, height 0.3s; opacity: 0;} #header .menu_bx .dep1_wrap:hover .dep1::before {height: 440px;} #header .menu_bx .dep1_wrap .dep1:hover::before {opacity: 1;} #header .menu_bx .dep1 > a {font-size: 18px; color: #ffffff; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all; display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 130px; padding: 0 20px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; position: relative; z-index: 1;} /*#header .menu_bx .dep2_wrap {height: 310px; position: relative; left: -50px; width: calc(100% + 100px); display: none; z-index: 1;} */ #header .menu_bx .dep2_wrap {height: 310px; position: absolute; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); width: calc(100% + 100px); display: none; z-index: 1;} #header .menu_bx .dep2_wrap > li {margin-bottom: 15px;} #header .menu_bx .dep2_wrap > li:last-child {margin-bottom: 0;} #header .menu_bx .dep2_wrap > li > a {font-size: 16px; color: #666666; letter-spacing: -0.025em; word-break: keep-all; display: inline-block; line-height: 25px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;} #header .menu_bx .dep1:hover .dep2_wrap > li > a {color: #fff;} #header.scroll .menu_bg {opacity: 1;} #header.scroll .lang_bx, #header.on .lang_bx {border-color: #102768;} #header.scroll .lang_bx a, #header.on .lang_bx a {color: #102768;} #header.scroll .lang_bx a.on, #header.on .lang_bx a.on {background-color: #102768; color: #fff;} #header.scroll .menu_bx .dep1 > a, #header.on .menu_bx .dep1 > a {color: #111111;} #header.on .menu_bx .dep1:hover > a {color: #fff;} /* siteMap */ #siteMap {background-image: linear-gradient(0deg, #d9e9f3, #d9e9f3);} #siteMap::before {content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; right: 0; top: 0; background: url(../images/common/sm_bg.png) no-repeat right bottom; transform: translate(70px, 70px); -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; transition: transform 0.6s;} #siteMap.on::before { transform: translate(0, 0px)} #siteMap .sm_img {width: 36.7845%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;} #siteMap .sm_img::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/common/sm_img.jpg) no-repeat center; -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; transition: transform 0.6s; transform: scale(1.2);} #siteMap.on .sm_img::before {transform: scale(1);} #siteMap .sm_w {position: absolute; z-index: 1; width: 63.2155%; height: 100%; right: 0; top: 0; overflow-y: auto;} #siteMap .menu_w {display: table; height: 100%; width: 100%; padding: 80px 100px; box-sizing: border-box;} #siteMap .lang_bx {display: none!important;} #siteMap .dep1_wrap {display: table-cell; vertical-align: middle; height: 100%; font-size: 0;} #siteMap .dep1 {padding-left: 40px; margin-bottom: 70px; opacity: 0; transform: translate(0, -50px); position: relative;} #siteMap.on .dep1 {-webkit-transition: transform 0.6s, opacity 0.6s; -moz-transition: transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; opacity: 1; transform: translate(0, 0px);} #siteMap.on .dep02 {transition-delay: 0.1s!important;} #siteMap.on .dep03 {transition-delay: 0.2s!important;} #siteMap.on .dep04 {transition-delay: 0.3s!important;} #siteMap .dep1:last-child {margin-bottom: 0;} #siteMap .dep1 > a {font-size: 40px; color: #111111; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all; position: relative; display: inline-block; padding-left: 40px; left: -40px;} #siteMap .dep1 > a::before {font-size: 16px; color: #102768; font-family: 'Montserrat', sans-serif; position: absolute; left: 0px; top: 6px; font-weight: 400;} #siteMap .dep1:nth-child(1) > a::before {content: '01';} #siteMap .dep1:nth-child(2) > a::before {content: '02';} #siteMap .dep1:nth-child(3) > a::before {content: '03';} #siteMap .dep1:nth-child(4) > a::before {content: '04';} #siteMap .dep2_wrap {max-width: 730px; margin-top: 9px; display: none;} #siteMap .dep2_wrap > li {display: inline-block; /*width: 25%;*/ margin-top: 20px; margin-right: 60px;} #siteMap .dep2_wrap > li:last-child {margin-right: 0;} #siteMap .dep2_wrap > li > a {font-size: 20px; color: rgba(70,70,70,0.6); word-break: keep-all; display: inline-block; line-height: 30px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;} #siteMap .dep2_wrap > li > a:hover {color: #111111;} /* s_visual */ #s_visual .tab_bx {position: relative;} #s_visual .tab_bx::before {content: ''; width: 100%; height: 1px; background-color: #dddddd; position: absolute; bottom: 0; left: 0;} /*#s_visual .tab_bx .dep2_wrap {display: flex!important; flex-flow: wrap; justify-content:center; max-width: 1200px; margin: 0 auto; box-sizing: border-box; height: auto!important;}*/ #s_visual .tab_bx .dep2_wrap {display: table!important; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; height: auto!important;} #s_visual.s_visual_02 .tab_bx .dep2_wrap {max-width: 800px;} #s_visual.s_visual_03 .tab_bx .dep2_wrap {max-width: 1000px;} #s_visual.s_visual_04 .tab_bx .dep2_wrap {max-width: 450px; table-layout: fixed;} /*#s_visual .tab_bx .dep2_wrap > li {width: 14.285%;}*/ #s_visual .tab_bx .dep2_wrap > li {display: table-cell;} #s_visual .tab_bx .dep2_wrap > li > a {display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 90px; font-size: 18px; color: #666666; word-break: keep-all; position: relative; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; text-align: center;} #s_visual .tab_bx .dep2_wrap > li > a:hover {color: #111;} #s_visual .tab_bx .dep2_wrap > li > a::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #102768; position: absolute; bottom: -3px; left: 50%; margin-left: -4px; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s; transform: scale(0);} #s_visual .tab_bx .dep2_wrap > li > a:hover::before {transform: scale(1);} #s_visual .tab_bx .dep2_wrap > li.on > a {font-weight: 700; color: #111111;} #s_visual .tab_bx .dep2_wrap > li.on > a::before {transform: scale(1);} } @media all and (max-width:1530px){ /* header */ #header .h_inner {padding: 0 195px 0 230px;} #header .menu_bx .dep1 {padding: 0 8px;} #header .menu_bx .dep2_wrap {max-width: 120px;} #header .menu_bx .dep2_wrap > li > a {font-size: 14px; line-height: 20px;} /* siteMap */ #siteMap .dep2_wrap > li {width: 100%; margin-right: 0;} } /* 태블릿&모바일 공통*/ @media all and (max-width:1024px){ .pc_show{ display:none !important;} .pc_i_show{ display:none !important;} .m_show{ display:block !important;} .m_i_show{ display:inline-block !important;} /* header */ #header {-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;} #header::before {content: ''; width: 100%; height: 1px; background-color: #e7e7e7; position: absolute; left: 0; bottom: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; opacity: 0;} #header.scroll {background-color: #fff;} #header.scroll::before {opacity: 1;} #header .h_inner {padding: 0; height: 80px;} #header .logo {width: 147px; height: 38px; background-size: 147px 38px!important; top: 21px;} #header.smOn .logo {background: url(../images/common/logo_on.png) no-repeat center;} #header .menu_btn {top: 30px;} #header .menu_bx {display: none!important;} /* siteMap */ #siteMap {background-image: linear-gradient(0deg, #d9e9f3, #d9e9f3);} #siteMap::before {content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/common/sm_bg.png) no-repeat right bottom; background-size: 275px auto; transform: translate(50px, 50px); -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; transition: transform 0.6s;} #siteMap.on::before { transform: translate(0, 0px)} /*#siteMap .menu_w {position: absolute; width: calc(100% - 40px); height: calc(100% - 237px); left: 20px; top: 147px; overflow-y: auto;}*/ #siteMap .menu_w {position: absolute; width: calc(100% - 40px); height: calc(100% - 207px); left: 20px; top: 117px; overflow-y: auto;} #siteMap .menu_w .dep1_wrap {font-size: 0;} #siteMap .menu_w .dep1 {padding-left: 33px; margin-bottom: 34px; opacity: 0; transform: translate(0, -50px);} #siteMap.on .dep1 {-webkit-transition: transform 0.6s, opacity 0.6s; -moz-transition: transform 0.6s, opacity 0.6s; transition: transform 0.6s, opacity 0.6s; opacity: 1; transform: translate(0, 0px);} #siteMap.on .dep02 {transition-delay: 0.1s!important;} #siteMap.on .dep03 {transition-delay: 0.2s!important;} #siteMap.on .dep04 {transition-delay: 0.3s!important;} #siteMap .menu_w .dep1:last-child {margin-bottom: 0;} #siteMap .menu_w .dep1 > a {padding-left: 33px; position: relative; display: block; left: -33px; width: calc(100% + 33px); font-size: 30px; color: #111111; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all; box-sizing: border-box;} #siteMap .menu_w .dep1 > a::before {font-family: 'Montserrat', sans-serif; font-size: 15px; color: #102768; font-weight: 400; position: absolute; left: 0; top: 4px;} #siteMap .menu_w .dep1:nth-child(1) > a::before {content: '01';} #siteMap .menu_w .dep1:nth-child(2) > a::before {content: '02';} #siteMap .menu_w .dep1:nth-child(3) > a::before {content: '03';} #siteMap .menu_w .dep1:nth-child(4) > a::before {content: '04';} #siteMap .menu_w .dep2_wrap {display: none;} #siteMap .menu_w .dep2_wrap > li {display: inline-block; width: 100%; margin-top: 15px;} #siteMap .menu_w .dep2_wrap > li > a {font-size: 15px; color: /*rgba(255,255,255,.6)*/#707070; display: inline-block; line-height: 25px; letter-spacing: -0.025em; word-break: keep-all;} #siteMap .lang_bx {position: absolute; width: calc(100% - 40px); left: 20px; bottom: 30px; top: auto; box-sizing: border-box; display: table; border-radius: 0; border-color: #102768;} #siteMap .lang_bx a {width: 50%; box-sizing: border-box; margin-right: 0; display: table-cell; border-radius: 0!important; line-height: 30px; color: #111;} #header .lang_bx a.on {color: #fff; background-color: #102768;} /* footer */ #footer .f_inner {padding: 50px 250px 43px 177px;} #footer .logo {max-width: 147px; width: 100%; top: 47px;} #footer .info_bx {margin-bottom: 0;} #footer .info_bx li {margin-bottom: 0; font-size: 11px; line-height: 18px;} #footer .logo_bx {top: 53px;} #footer .logo_bx li {margin-right: 18px;} #footer .logo_bx li img {height: 30px;} #footer .btm_txt {font-size: 11px; line-height: 18px; margin-top: 17px;} /* s_visual */ #s_visual .slogan {height: 300px;} #s_visual .slogan > .title_box {padding-top: 38px; text-align: center;} #s_visual .slogan > .title_box .title {font-size: 35px;} #s_visual .slogan > .title_box .sub_tit {margin-top: 8px;} #s_visual .slogan > .title_box .sub_tit span {font-size: 17px;} #s_visual .slogan > .title_box [data-aos=fade-left] {transform: translate3d(0,50px,0);} #s_visual .slogan > .title_box .aos-animate[data-aos=fade-left] {transform: translateZ(0);} #s_visual .tab_bx {position: relative;} #s_visual .tab_bx .on_txt {text-align: center; font-size: 15px; color: #111111; font-weight: 700; padding: 0 40px; position: relative; border-bottom: 1px solid #dddddd; box-sizing: border-box; cursor: pointer; -webkit-transition: background 0.3s, color 0.3s; -moz-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;} #s_visual .tab_bx .on_txt.on {background-color: #102768; color: #fff;} #s_visual .tab_bx .on_txt::before {content: ''; width: 10px; height: 7px; background: url(../images/icon/arrow2.png) no-repeat center; position: absolute; right: 20px; top: 50%; margin-top: -4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #s_visual .tab_bx .on_txt.on::before {transform: rotate(180deg); background: url(../images/icon/arrow3.png) no-repeat center;} #s_visual .tab_bx .on_txt span {height: 59px; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #s_visual .tab_bx .dep2_wrap {position: absolute; width: 100%; left: 0; top: 60px; z-index: 5; background-color: #fff; padding-left: 20px; padding-right: 20px; box-sizing: border-box; display: none; border-bottom: 1px solid #dddddd;} #s_visual .tab_bx .dep2_wrap > li {margin-bottom: 5px;} #s_visual .tab_bx .dep2_wrap > li:first-child {padding-top: 10px;} #s_visual .tab_bx .dep2_wrap > li:last-child {margin-bottom: 0; padding-bottom: 10px;} #s_visual .tab_bx .dep2_wrap > li > a {display: inline-block; font-size: 12px; color: #666; word-break: keep-all; line-height: 20px;} } /* 모바일 */ @media all and (max-width:768px){ /* footer */ #footer .f_inner {padding: 50px 0 43px; text-align: center;} #footer .logo {position: relative; left: auto; top: auto;} #footer .info_bx {margin-top: 25px;} #footer .info_bx li {margin-right: 0; padding: 0 9px;} #footer .logo_bx {position: relative; right: auto; top: auto; margin-top: 14px;} /* s_visual */ #s_visual.s_visual_01 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_01_m.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_02 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_02_m.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_03 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_03_m.jpg') no-repeat center; background-size:cover;} #s_visual.s_visual_04 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_04_m.jpg') no-repeat center; background-size:cover;} .pc_show2 {display: none!important;} .m_show2 {display: block!important;} }