@charset "utf-8";
body, html {width: 100%; height: 100%;}
.inner{width: 1200px; margin: 0 auto;}

#wrap{overflow: hidden;}
/* header */
#header{position: relative; z-index: 999;}
#header .utill{width: 100%; height: 40px; background: #2282a5;}
#header .utill ul{float: right;}
#header .utill ul li{float: left; position: relative;}
#header .utill ul li a{display: block; padding: 13px 10px; font-size: 14px; color: #fff;}
#header .utill ul li + li a::before{content: ''; display: block; width: 3px; height: 3px; margin: auto; background: #bbb; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: -1px;}
#header .header_bottom{width: 100%; height: 86px; position: relative; transition: .2s;}
#header .header_bottom:hover{background: #fff; border-bottom: 1px solid #eee;}
#header .header_bottom:hover .logo a{background: url(../img/common/logo_on.png) no-repeat; transition: .2s;}
#header .header_bottom:hover .gnb .depth1 > li > a{color: #454545; transition: .2s;}
#header .header_bottom:hover .gnb .depth1 > li:last-child a{background: url(../img/common/btn_sitemap_on.png) 100% center no-repeat; transition: .2s;}
#header .header_bottom::before{content: ''; display: block; width: 100%; height: 86px;background: #2c95bb; position: absolute; opacity: .7; z-index: -99;}
#header .header_bottom .logo{float: left; width: 310px; height: 63px;}
#header .header_bottom .logo a{display: block; width: 310px; height: 63px; margin-top: 4px; background: url(../img/common/logo.png) no-repeat; font-size: 0;}
#header .header_bottom .gnb{padding-left: 400px;}
#header .header_bottom .gnb .depth1{width: 100%; height: 86px; position: relative;}
#header .header_bottom .gnb .depth1 > li{float: left;}
#header .header_bottom .gnb .depth1 > li > a{display: block; padding: 34px 43px; font-size: 18px; color: #fff; position: relative;}
#header .header_bottom .gnb .depth1 > li > a::before{content: ''; display: none; width: 55%; height: 4px; margin: auto;  background: #2c95bb; position: absolute; left: 0; right: 0; bottom: 0px;}
#header .header_bottom .gnb .depth1 > li.on > a{color: #2c95bb;}
#header .header_bottom .gnb .depth1 > li.on > a::before{display: block;}
#header .header_bottom .gnb .depth1 > li > a::after{content: ''; display: none; width: 0px; height: 0px; margin: auto;  border-top: 8px solid #2c95bb; border-right: 5px solid transparent; border-left: 5px solid  transparent; position: absolute; bottom: -8px; left: 0; right: 0; z-index: 99;}
#header .header_bottom .gnb .depth1 > li.on > a::after{display: block;}
#header .header_bottom .gnb .depth1 > li:last-child a{padding: 35.5px 31px 35.5px 0; font-size: 15px; position: absolute; right: 0; background: url(../img/common/btn_sitemap.png) 100% center no-repeat;}
#header .header_bottom .gnb .depth1 > li:last-child a::before, #header .header_bottom .gnb .depth1 > li:last-child a::after{display: none;}
#header .header_bottom .gnb .depth2{width: 100%; background: #fff;}
#header .header_bottom .gnb .depth2 > li{display: none; width: 100%; height: 357px; background: #fff; border-bottom: 3px solid #2798c1; box-sizing: border-box; position: absolute; top: 87px; left: 0; z-index: 9;}
#header .header_bottom .gnb .depth2 > li.on{display: block;}
#header .header_bottom .gnb .depth2 > li .menu_left{float: left; width: 321px; height: 354px; padding: 50px 0 0 25px; box-sizing: border-box; background: #f2f7f9 url(../img/common/gnb_bg.png) no-repeat; position: relative;}
#header .header_bottom .gnb .depth2 > li .menu_left::before{content: ''; display: block; width: 1000px; height: 354px; left: -300px; background: #f2f7f9; position: absolute; left: -1000px; top: 0;}
#header .header_bottom .gnb .depth2 > li .menu_left span{display: block; font-size: 28px; color: #444; font-weight: 600;}
#header .header_bottom .gnb .depth2 > li .menu_left span::after{content: ''; display: block; width: 25px; height: 2px; margin: 25px 0; background: #666; }
#header .header_bottom .gnb .depth2 > li .menu_left p{margin-top: -5px; font-size: 15px; color: #818282; line-height: 1.5;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul{float: left; width: 879px; padding: 67px 0 0 50px; box-sizing: border-box;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li a{display: block; width: 226px; height: 47px; padding-left: 23px; box-sizing: border-box; background: url(../img/common/arrow1.png) 188px center no-repeat; border: 1px solid #ccc; border-radius: 5px; font-size: 15px; line-height: 45px; transition: all .4s;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li a:hover{border: 1px solid #2798c1; background: url(../img/common/arrow1_on.png) 188px center no-repeat; color: #2798c1;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li{float: left;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li + li{margin-left: 50px;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li:nth-child(3n+4){margin-left: 0px;}
#header .header_bottom .gnb .depth2 > li .menu_left + ul li:nth-child(n+4){margin-top: 30px;}
#header .header_bottom .sitemap{width: 1200px; margin: auto; background: #fff; position: absolute; left: 0; right: 0; top: 150px; z-index: 9;}
#header .header_bottom .sitemap h2{width: 100%; height: 65px; background: #19a5c8; font-size: 21px; color: #fff; line-height: 65px; text-align: center;}
#header .header_bottom .sitemap .btn_close{display: block; width: 25px; height: 25px; font-size: 0; position: absolute; top: 29px; right: 18px;}
#header .header_bottom .sitemap .btn_close::before{content: ''; display: block; width: 30px; height: 3px; background: #fff; transform:rotate(45deg); position: absolute; top: 0; transition: .5s;}
#header .header_bottom .sitemap .btn_close::after{content: ''; display: block; width: 30px; height: 3px; background: #fff; transform:rotate(135deg); position: absolute; top: 0; transition: .5s;}
#header .header_bottom .sitemap .btn_close:hover::before{transform:rotate(135deg);}
#header .header_bottom .sitemap .btn_close:hover::after{transform:rotate(45deg);}
#header .header_bottom .sitemap .all_menu{padding: 30px 25px;}
#header .header_bottom .sitemap .all_menu > ul{float: left; width: 250px;}
#header .header_bottom .sitemap .all_menu > ul + ul{margin-left: 50px;}
#header .header_bottom .sitemap .all_menu > ul > .first > a{display: block; padding-bottom: 23px; font-size: 19px; color: #454545; font-weight: 600; text-align: center; position: relative;}
#header .header_bottom .sitemap .all_menu > ul > .first > a::after{content: ''; width: 250px; height: 1px; background: #ccc; position: absolute; bottom: 0; left: 0;}
#header .header_bottom .sitemap .all_menu > ul > li + li{margin-top: 23px;}
#header .header_bottom .sitemap .all_menu > ul > li > a{display: block; font-size: 16px; color: #666; text-align: center; transition: .3s;}
#header .header_bottom .sitemap .all_menu > ul > li > a:hover{color: #19a5c8;}
#header .header_bottom  .sitemap_bg{display: block; width: 10000%; height: 10000%; background: #000; opacity: 0.2; position: absolute; top: -100%; left: -100%;}


#header .m_header_bottom{display: none; width: 100%; height: 80px; padding: 0 15px; box-sizing: border-box; background: #7aa8c1;}
#header .m_header_bottom .m_gnb_bg{position: absolute; width: 10000%; height: 10000%; background: rgb(0, 0, 0); left: 0px; top: 0px; opacity: 0.35;}
#header .m_header_bottom .logo{float: left;}
#header .m_header_bottom .logo a{display: block; width: 270px; height: 55px; margin-top: 4px; background: url(../img/common/m_logo.png) no-repeat; font-size: 0;}
#header .m_header_bottom .btn_menu{display: block; float: right; width: 36px; height: 37px; margin-top: 22px; background: url(../img/common/btn_menu.png) no-repeat; font-size: 0;}
#header .m_header_bottom .m_gnb{width: 292px; height: 10000%; background: #fff; position: absolute; right: -1000px; top: 0;}
#header .m_header_bottom .m_gnb .top{height: 54px; background: #2c95bb;}
#header .m_header_bottom .m_gnb .top ul{float: left; padding: 19.5px 0;}
#header .m_header_bottom .m_gnb .top ul li{float: left;}
#header .m_header_bottom .m_gnb .top ul li a{display: block; margin: 0 25px; font-size: 15px; color: #fff; letter-spacing: -0.01em; font-weight: 100; position: relative;}
#header .m_header_bottom .m_gnb .top ul li:nth-child(1) a{padding-left: 22px; background: url(../img/common/m_login_icon.png) no-repeat;}
#header .m_header_bottom .m_gnb .top ul li:nth-child(2) a{padding-left: 20px; background: url(../img/common/m_join_icon.png) no-repeat;}
#header .m_header_bottom .m_gnb .top ul li:nth-child(2) a::before{content: ''; display: block; width: 1px; height: 18px; background: #b3d6e2; position: absolute; left: -25px; top: -1px;}
#header .m_header_bottom .m_gnb .top .btn_close{float: right; width: 19px; height: 19px; margin: 17px 17px 0 0; background: url(../img/common/m_menu_close.png) no-repeat; font-size: 0;}
#header .m_header_bottom .m_gnb .depth1 > li > a{display: block; padding: 17px 0 17px 30px; border-bottom: 1px solid #ddd; font-size: 15px; color: #444; letter-spacing: -0.01em; background: url(../img/common/m_depth1_icon1.png) 253px center no-repeat;}
#header .m_header_bottom .m_gnb .depth1 > li > a.on{color: #2480a1; background: url(../img/common/m_depth1_icon2.png) 253px center no-repeat;}
#header .m_header_bottom .m_gnb .depth1 > li > .depth2{display: none; border-bottom: 1px solid #ddd;}
#header .m_header_bottom .m_gnb .depth1 > li > .depth2 > li > a{display: block; padding: 12px 0 12px 40px; background: url(../img/common/m_depth2_icon.png) 256px center no-repeat; font-size: 14px; color: #666; letter-spacing: -0.01em; position: relative;}
#header .m_header_bottom .m_gnb .depth1 > li > .depth2 > li > a::before{content: ''; display: block; width: 3px; height: 3px; margin: auto; background: #666; border-radius: 50%; position: absolute; left: 31px; top: 0; bottom: 0;}

/* footer */
#footer{padding-bottom: 48px; border-top: 1px solid #ddd;}
#footer .footer_top{float: right; padding: 43px 0 28px;}
#footer .footer_top > li{float: left; }
#footer .footer_top > li > a{display: block; padding: 0 10px; font-size: 14px; color: #666;}
#footer .footer_top > li:first-child > a{color: #267fb7; font-weight: 600;}
#footer .address img{float: left; margin-top: -35px;}
#footer .address p{font-size: 13px; color: #777; text-align: right; line-height: 1.5;}

@media screen and (max-width:1200px){
	.inner{width: 100%;}
	#header .header_bottom{display: none;}
	#header .m_header_bottom{display: block;}
	#footer{position: relative; padding: 0 15px 28px;}
	#footer .footer_top{float: left; width: 100%; padding: 83px 0 23px; box-sizing: border-box; text-align: center;}
	#footer .footer_top > li{float: initial; display: inline-block;}
	#footer .address img{margin: auto; position: absolute; top: 8px; left: 0; right: 0;}
	#footer .address p{text-align: center; word-break: keep-all;}	
}

@media screen and (max-width:350px){
	#header .m_header_bottom .logo a{width: 240px; margin-top: 12px; background-size: 100% !important;}
}