@charset "utf-8";

/* basic */
body{-webkit-text-size-adjust:none; overflow-x:hidden}
.inner{width:100%; max-width:1200px; margin:0 auto; position:relative;}
.Lato{font-family: 'Lato', sans-serif;}
.poppins{font-family: 'Poppins';}


/* header */
#header{width:100%; height:79px; border-bottom:1px solid #e1e1e1; background:#fff; position:relative; z-index:10;}
#header .inner{height:100%;}
#header a.logo{display:block; position:absolute; left:30px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); z-index:2;}
#header .gnb{position:absolute; display:inline-block; width:100%; vertical-align:top; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
#header .gnb ul{font-size:0; text-align:center; letter-spacing:-4px;}
#header .gnb ul li{display:inline-block; vertical-align:top; margin:0 25px;}
#header .gnb ul li a{display:block; font-size:18px; color:#222; letter-spacing:-0.045em; font-weight:300; padding:26px 0; position:relative;}
#header .gnb ul li a:before{content:""; width:0; height:4px; background:#bfc4cc; position:absolute; left:50%; bottom:0; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); transition:0.2s; -ms-transition:0.2s; -webkit-transition:0.2s; -o-transition:0.2s; -moz-transition:0.2s;}
#header .gnb ul li:hover a:before{width:100%;}
#header .gnb ul li.on a:before{width:100%;}
#header .right{height:100%; position:absolute; right:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); z-index:2;}
#header .right .language{float:left; height:100%; margin-right:20px;}
#header .right .language ul{height:100%;}
#header .right .language ul li{display:inline-block; vertical-align:middle; padding:30px 10px; position:relative;}
#header .right .language ul li:before{font-weight:bold; content:"·"; position:absolute; right:-4px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
#header .right .language ul li:last-child:before{display:none;}
#header .right .language ul li a{display:block; font-size:12px; color:#8e939a; font-weight:bold;}
#header .right .language ul li a.on{color:#0a4595}
#header .right .language ul li a:hover{color:#0a4595}
#header .right > .search_btn{cursor:pointer; float:left; display:block; height:100%; width:80px; border-left:1px solid #e1e1e1; box-sizing:border-box; position:relative;}
#header .right > .search_btn .btn{width:100%; height:100%; position:relative;}
#header .right > .search_btn i{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
#header .right > .search_btn i{background:url('/img/search_btn.png')no-repeat center / cover; width:25px; height:25px; transition:all 0.3s; -ms-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s;}
#header .right > .search_btn .search_box{display:none; position:absolute; right:0; top:80px; background:rgba(0,0,0,0.7); width:558px; height:76px}
#header .right > .search_btn .search_box input{padding:0 30px; box-sizing:border-box; font-size:16px; color:#6f9fe0; font-weight:200; width:calc(100% - 80px); float:left; height:100%; background:none; -webkit-appearance: none; -webkit-border-radius: 0; border:0;}
#header .right > .search_btn .search_box input::placeholder{font-size:16px; color:#6f9fe0; font-weight:200;}
#header .right > .search_btn .search_box a{position:relative; width:80px; height:100%; position:relative; float:left; display:block;}
#header .right > .search_btn .search_box a img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
#header .right > .search_btn .btn.on i{background:url('/img/search_btn_on.png')no-repeat center / cover; width:25px; height:25px;}
#header .right > a.all_menu_btn{float:left; display:block; height:100%; width:80px; border-left:1px solid #e1e1e1; box-sizing:border-box; position:relative;}
#header .right > a.all_menu_btn .center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
#header .right > a.all_menu_btn .center span{display:block; width:26px; height:2px; background:#636363; margin:6px 0;}



.pc_menu{display:none; width:100%; height:380px; background:rgba(255,255,255,0.9); position:absolute; left:0; top:79px; z-index:5;}
.pc_menu .inner{height:100%}
.pc_menu .menu:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.pc_menu .menu{display:none; height:100%;}
.pc_menu .menu .depth_title{width:360px; float:left; padding:45px 45px 0 110px; box-sizing:border-box;}
.pc_menu .menu .depth_title h4{font-size:32px; color:#222; letter-spacing:-0.045em; font-weight:200; line-height:42px;}
.pc_menu .menu .depth_title p{font-size:16px; color:#666; letter-spacing:-0.045em; font-weight:200; margin:10px 0;}
.pc_menu .menu .depth_title .hr{width:25px; height:4px; background:#ff0000; margin-top:35px;}
.pc_menu .menu .depth01_menu{width:220px; float:left; background:#dadde2; height:100%; padding-top:30px; box-sizing:border-box;}
.pc_menu .menu .depth01_menu ul li a{display:block; padding:10px 10px 10px 30px; box-sizing:border-box; font-size:16px; color:#555; letter-spacing:-0.045em;}
.pc_menu .menu .depth01_menu ul li:hover a{color:#fff; background:#115bc0}
.pc_menu .menu .depth01_menu ul li.on a{color:#fff; background:#115bc0}
.pc_menu .menu .depth02_menu{overflow:auto; display:none; width:400px; float:left; background:#fff; height:100%; padding-top:30px; box-sizing:border-box;}
.pc_menu .menu .depth02_menu ul{display:none}
.pc_menu .menu .depth02_menu ul li a{display:block; padding:10px 10px 10px 30px; box-sizing:border-box; font-size:16px; color:#444; letter-spacing:-0.045em;}
.pc_menu .menu .depth02_menu ul li:hover a{color:#115bc0; font-weight:bold;}
.pc_menu .menu .depth02_menu ul li.on a{color:#115bc0; font-weight:bold;}

.all_menu{position:fixed; display:none; left:0; top:0; width:100%; height:100%; background:#fff; z-index:100;}
.all_menu a.x_btn{width:80px; height:78px; position:absolute; right:0; top:0; z-index:2; background:#115bc0}
.all_menu a.x_btn img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.all_menu .inner{padding-top:160px; height:100%; box-sizing:border-box;}
.all_menu .sub_common_gnb{height:80%; overflow:auto;}
.all_menu .sub_common_gnb > ul{font-size:0; text-align:center; letter-spacing:-4px;}
.all_menu .sub_common_gnb > ul > li{text-align:left; display:inline-block; vertical-align:top; width:20.6%;}
.all_menu .sub_common_gnb > ul > li > a{text-align:left; font-size:24px; color:#222; letter-spacing:-0.045em; font-weight:bold; line-height:33px; padding-bottom:20px; display:block; position:relative;}
.all_menu .sub_common_gnb > ul > li > a:before{content:""; width:27px; height:3px; background:#115bc0; position:absolute; left:0; bottom:0;}
.all_menu .sub_common_gnb > ul > li > ul{padding-top:50px;}
.all_menu .sub_common_gnb > ul > li > ul > li{margin:20px 0;}
.all_menu .sub_common_gnb > ul > li > ul > li > a{display:block; font-size:18px; color:#222; letter-spacing:-0.045em;}
.all_menu .sub_common_gnb > ul > li > ul > li > ul.depth03{margin:10px 0;}
.all_menu .sub_common_gnb > ul > li > ul > li > ul.depth03 li{margin:3px 0;}
.all_menu .sub_common_gnb > ul > li > ul > li > ul.depth03 li a{display:block; font-size:16px; color:#747a82; letter-spacing:-0.045em; padding-left:8px; box-sizing:border-box; font-weight:200; position:relative;}
.all_menu .sub_common_gnb > ul > li > ul > li > ul.depth03 li a:before{content:"·"; position:absolute; left:0;}



/* sub_footer */
#sub_footer{padding:40px 0;}
#sub_footer ul{font-size:0; text-align:center; letter-spacing:-4px;}
#sub_footer ul li{display:inline-block; vertical-align:top; width:12.5%; padding:4px;  box-sizing:border-box;}
#sub_footer ul li a{display:block;border:1px solid #dadada; border-radius:8px; padding:15px 0; box-sizing:border-box; width:100%; height:100%;}
#sub_footer ul li a i{width:82px; height:52px; display:block; margin:0 auto;}
#sub_footer ul li a p{font-size:14px; letter-spacing:0em; color:#666;}
#sub_footer ul li:hover p{color:#0a4595}

#sub_footer ul li:nth-of-type(1) a i{background:url('/img/sub_footer_icon01_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(2) a i{background:url('/img/sub_footer_icon02_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(3) a i{background:url('/img/sub_footer_icon03_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(4) a i{background:url('/img/sub_footer_icon04_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(5) a i{background:url('/img/sub_footer_icon05_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(6) a i{background:url('/img/sub_footer_icon06_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(7) a i{background:url('/img/sub_footer_icon07_off.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(8) a i{background:url('/img/sub_footer_icon08_off.png')no-repeat center / cover;}

#sub_footer ul li:nth-of-type(1):hover a i{background:url('/img/sub_footer_icon01_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(2):hover a i{background:url('/img/sub_footer_icon02_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(3):hover a i{background:url('/img/sub_footer_icon03_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(4):hover a i{background:url('/img/sub_footer_icon04_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(5):hover a i{background:url('/img/sub_footer_icon05_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(6):hover a i{background:url('/img/sub_footer_icon06_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(7):hover a i{background:url('/img/sub_footer_icon07_on.png')no-repeat center / cover;}
#sub_footer ul li:nth-of-type(8):hover a i{background:url('/img/sub_footer_icon08_on.png')no-repeat center / cover;}



/* footer */
#footer{position:relative; background:#fbfbfb; padding:80px 0 150px;}
#footer .top_btn{cursor:pointer; position:absolute; right:80px; top:0; width:71px; height:71px; background:#fff; border:3px solid #bd92ea; border-radius:15px; text-align:center; padding:20px 0; box-sizing:border-box;}
#footer .top_btn i{display:block; margin:0 auto 5px;}
#footer .top_btn p{font-size:14px; color:#686868; font-weight:500;}
#footer a.ft_logo{display:inline-block; vertical-align:top; margin-bottom:10px;}
#footer .text ul{font-size:0; text-align:left; letter-spacing:-4px;}
#footer .text ul li{letter-spacing:0em; display:inline-block; vertical-align:top; font-size:14px; color:#b9bdc1; font-weight:200; padding:0 15px; position:relative;}
#footer .text ul li:first-child{padding-left:0;}
#footer .text ul li:before{content:""; width:1px; height:9px; background:#dadada; position:absolute; right:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
#footer .text ul li:last-child:before{display:none}
#footer .text ul li span{color:#8d8d8d;}
#footer .right{position:absolute; right:0; top:0;}
#footer .right ul{font-size:0; text-align:right; letter-spacing:-4px;}
#footer .right ul li{letter-spacing:0em; display:inline-block; vertical-align:top;}
#footer .right ul li a{display:block; width:134px; height:33px; line-height:31px; border:1px solid #a3a49e; box-sizing:border-box; margin:0 5px; font-size:12px; color:#a6a6a6; text-align:center; letter-spacing:-0.025em}
#footer .right span{margin-top:30px;color:#b2b2b2; text-align:right; display:block; font-size:13px; letter-spacing:0em; font-weight:200;}


/* quick */
#quick{position:absolute; right:5%; top:500px; z-index:10;}
#quick ul li{background:#fff; border:3px solid #bd92ea; border-radius:15px; width:95px; height:95px; margin:5px 0; /* box-shadow:8px 0px 9px rgba(0,0,0,0.29); */ padding-top:15px; box-sizing:border-box; }
#quick ul li a{display:block; text-align:center; margin-top:-1px;}
#quick ul li a i{margin:0 auto; width:39px; height:40px; display:block;}
#quick ul li:nth-of-type(1) a i{background:url('/img/quick_icon01.png')no-repeat center / cover;}
#quick ul li:nth-of-type(2) a i{background:url('/img/quick_icon02.png')no-repeat center / cover;}
#quick ul li:nth-of-type(3) a i{background:url('/img/quick_icon03.png')no-repeat center / cover;}
#quick ul li a p{font-size:14px; color:#8b8d90; font-weight:500;}

#quick ul li:hover{background:#bd92ea; }
#quick ul li:hover a p{color:#fff}
#quick ul li:nth-of-type(1):hover a i{background:url('/img/quick_icon01_on.png')no-repeat center / cover;}
#quick ul li:nth-of-type(2):hover a i{background:url('/img/quick_icon02_on.png')no-repeat center / cover;}
#quick ul li:nth-of-type(3):hover a i{background:url('/img/quick_icon03_on.png')no-repeat center / cover;}


#wrap { min-width:1200px; }

/* 임시 보여주기용 */
.content{position:relative; min-width:1200px; max-width:1920px; margin:0 auto;}
.content > img{width:1920px;margin:0 auto; position:relative; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.content .area_box{top:0;height:200px; width:1200px; position:absolute; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.content .area_box a{position:absolute; left:0; top:690px; width:379px; height:682px; display:block;}

/*sub_common css*/
.sub_common{width:100%; height:395px; max-width:2560px; box-sizing:border-box; position:relative; border-bottom:1px solid #e2e2e2; margin-bottom:50px;}
.sub_common .img_box{width:100%; overflow:hidden; position:relative;}
.sub_common .img_box > img{position:relative; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); z-index:2;}
.sub_common .img_box .text{width:100%; text-align:center; z-index:2; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.sub_common .img_box .text h2{font-size:36px; color:#fff; font-weight:bold; margin:0;}
.sub_common .img_box .text p{font-size:16px; color:#c5c6ce; letter-spacing:0.1em;}

.subcontent { max-width:1200px; margin:0 auto; padding-bottom:50px; }

.sub_common .inner{padding-left:64px; box-sizing:border-box; z-index:4; background:#fff; width:100%; height:63px; }
.sub_common .inner:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.sub_common .inner > div{float:left; height:100%;}
.sub_common .inner .home{ background:#bd92ea; width:64px; height:64px; position:relative; position:absolute; left:0; top:0;}
.sub_common .inner .home a{display:block}
.sub_common .inner .home a img{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}

.sub_common .inner > div > div.m_depth01{position:relative; background:#fff; width:240px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth01 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth01 > div p{height:100%;}
.sub_common .inner > div > div.m_depth01 > div p span{display:block; width:100%; height:100%; font-size:16px; padding-left:20px; padding-right:40px; box-sizing:border-box; color:#000; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth01 > div p > i{background:url('/img/m_depth_on.png'); width:13px; height:7px; position:absolute; right:20px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth01 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth01 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth01 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:10px 0 10px 30px; box-sizing:border-box;}

.sub_common .inner > div > div.m_depth02{position:relative; background:#fff; width:240px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth02 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth02 > div p{height:100%;}
.sub_common .inner > div > div.m_depth02 > div p span{display:block; width:100%; height:100%; font-size:16px; padding-left:20px; padding-right:40px; box-sizing:border-box; color:#000; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth02 > div p > i{background:url('/img/m_depth_on.png'); width:13px; height:7px; position:absolute; right:20px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth02 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth02 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth02 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:20px 0 20px 30px; box-sizing:border-box;}

.sub_common .inner > div > div.m_depth03{display:none; position:relative; background:#fff; width:240px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth03 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth03 > div p{height:100%;}
.sub_common .inner > div > div.m_depth03 > div p span{display:block; width:100%; height:100%; font-size:16px; padding-left:20px; padding-right:40px; box-sizing:border-box; color:#000; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth03 > div p > i{background:url('/img/m_depth_on.png'); width:13px; height:7px; position:absolute; right:20px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth03 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth03 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth03 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:10px 0 10px 30px; box-sizing:border-box;}

.sub_common .inner > div.depth03_on > div.m_depth03{display:block}