body {font-family: 'Nanum Barun Gothic', sans-serif;}

.pc_none {display: none;}
.rp_img {max-width: 100%;height: auto}

#header {transition: .4s;background: #008bce;}
#header .wrap {width: 1100px;margin: 0 auto;position: relative}
#header h1 {float: left;margin: 21px 0 0}
#header h1 a {background-image: url(/images/logo.png);background-size: cover;width: 176px;height: 38px;display: block;transition: .4s}
#header .top_menu {position: absolute;right: 250px}
#header .top_menu li {float: left;margin: 0 0 0 45px;position: relative}
#header .top_menu li:first-child {margin: 0}
#header .top_menu li a {font-size: 18px;color: #fff;display: block;height: 80px;line-height: 80px;transition: .4s}
#header .top_menu .t_sub_menu {position: absolute;left: 50%;background: #3c3c3c;padding: 20px 0 0;border-top: 3px solid #06457f;margin: -3px 0 0;display: none;transition: opacity .3s;z-index: 10;}
#header .top_menu .t_sub_menu li {float: none;margin: 0;padding: 0 20px 20px}
#header .top_menu .t_sub_menu li a {font-size: 16px;text-align: left;height: auto;line-height: normal;transition: 0s}
#header .top_menu .t_sub_menu li a:hover {color: #71c5ee}

#header .top_menu .t_sub_menu1 {width: 130px;margin-left: -49px}
#header .top_menu .t_sub_menu2 {width: 200px;margin-left: -51px}
#header .top_menu .t_sub_menu3 {width: 130px;margin-left: -59px}
#header .top_menu .t_sub_menu4 {width: 130px;margin-left: -49px}
#header.on .t_sub_menu {display: none!important}

#top_mn_btn {width: 20px;height: 16px;padding: 5px;position: absolute;top: 27px;right: 180px;cursor: pointer}
#top_mn_btn span {background: #fff;height: 2px;display: block;position: absolute;transition: .4s}
#top_mn_btn span:nth-child(1) {width: 20px;top: 5px}
#top_mn_btn span:nth-child(2) {width: 20px;top: 12px}
#top_mn_btn span:nth-child(3) {width: 12px;top: 19px}

#top_glb_img {width: 20px;height: 16px;padding: 5px;position: absolute;top: 27px;right: 140px;cursor: pointer}
#top_glb {width: 100px;height: 16px;padding: 5px;position: absolute;top: 27px;right: 30px;cursor: pointer}

#all_menu {height: 0;background: #fff;position: absolute;z-index: 200;overflow: hidden;transition: .4s;}
#all_menu .menu_wrap {width: 1100px;margin: 0 auto;font-size: 0;text-align: right}
#all_menu .mn {width: 178px;height: 388px;padding: 22px 0 0 22px;border-left: 1px solid #ececec;display: inline-block;font-size: 16px;vertical-align: top;text-align: left;transition: width .4s}
#all_menu .mn:last-child {border-right: 1px solid #ececec}
#all_menu .mlv1 a {color: #008bce;font-weight: 700;margin: 0 0 20px;display: block;cursor: default}
#all_menu .mlv3 {color: #696969;font-weight: 700;margin: 0 0 14px;display: block;}
#all_menu .mlv4 {margin: 0 0 25px}
#all_menu .mlv4 a {color: #696969;font-size: 14px;margin: 0 0 11px;display: block;}

#footer {width: 100%;height: 200px;background: #71bfe5;clear: both}
#footer .wrap {width: 1100px;margin: 0 auto;padding: 36px 0 0;position: relative}
#footer h1 {float: left}
#footer .f_mn {float: left;margin: 5px 0 15px 28px}
#footer .f_mn li {float: left;color: #fff}
#footer .f_mn li.dot {padding: 0 9px}
#footer .f_mn li a {color: #fff;font-size:15px}
#footer .ads {clear: both;width: 780px;padding: 17px 0 0;font-size: 13px;color: #fff;line-height: 20px}
#footer .ads span {display: inline-block;}
#footer .ads i {padding: 0 7px}
#footer .ft_btn_group {font-size: 15px;color: #fff;position: absolute;right: 0;top: 36px}
#footer .ft_btn_group a {position:relative;display:block;width:154px;height:38px;margin:0 0 10px;line-height:40px;color:#fff;text-align:left;font-size:15px;text-transform:uppercase;text-indent: 13px}
#footer .ft_btn_group a .hover {position:absolute;z-index:10;top:0;left:0;display:block;border:1px solid #fff;width:100%;height:100%;transition:transform .25s ease-out;-webkit-transition:-webkit-transform .25s ease-out;-moz-transition:-moz-transform .25s ease-out;}
#footer .ft_btn_group a:hover .hover {transform:rotateX(180deg);-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);}
#footer .ft_btn_group a:nth-child(1) img {float: right;margin: 21px 12px 0 0}
#footer .ft_btn_group a:nth-child(2) img {float: right;margin: 8px 14px 0 0}

@media screen and (max-width:1140px){
    #header .wrap {width: 95%}
    
    #all_menu .menu_wrap {width: 100%}
    
    #footer .wrap {width: 95%}
}
@media screen and (max-width:950px){
    #all_menu .mn1,
    #all_menu .mn3,
    #all_menu .mn4 {width: 150px}
    
    #footer {height: auto;padding-bottom: 30px}
    #footer .ft_btn_group {position: static;font-size: 0}
    #footer .ft_btn_group a {display: inline-block;}
    #footer .ft_btn_group a:first-child {margin: 0 10px 10px 0}
    #footer .ads {padding: 17px 0 15px;width: 100%}

	#header .top_menu {position: absolute;right: 130px}

    #top_mn_btn {top: 27px;right:90px;}
	#top_glb_img {width: 20px;height: 16px;padding: 5px;position: absolute;top: 27px;right: 50px;cursor: pointer}
	#top_glb {width: 40px;height: 16px;padding: 5px;position: absolute;top: 27px;right: 0px;cursor: pointer}
}
@media screen and (min-width:769px){
    #header {height: 80px}
    #header.on {background: #fff;}
    #header.on .top_menu li a {color: #4a4a4a}
    #header.on h1 a {background-image: url(/images/logo2.png)}
    #header.on #top_mn_btn span {background: #008bce}
    #all_menu.on {height: 410px;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;}
    
    #all_menu {width: 100%;}
}
@media screen and (min-width:150px) and (max-width:768px){
    .pc_none {display: block}
    .mb_none {display: none}
    
    #header {height: 50px}
    #header h1 {float: none;text-align: center;padding: 9px 0 0;margin: 0;width: 100%}
    #header h1 a {width: 140px;height: 30.22px;display: inline-block;}
    #header .top_menu {display: none;}
    #top_mn_btn {top: 12px;right:0px;}

	#top_glb_img {float:left;width: 20px;height: 16px;padding: 5px;position: absolute;top: 10px;left: 0px;cursor: pointer}
	#top_glb {float:left;width: 40px;height: 16px;padding: 5px;position: absolute;top: 10px;left: 25px;cursor: pointer}
    
    #all_menu {position: fixed;width: 300px;height: calc(100% - 50px);right: -300px;overflow: visible}
    #all_menu .menu_wrap {text-align: left;position:relative;height:100%;background: #2a313e;z-index: 80;overflow: auto}
    #all_menu .mn {width: auto;height: auto;padding: 0;display: block;border: 0;text-align: right}
    #all_menu .mn:last-child {border: 0}
    #all_menu .mlv1 {text-align: right;position: relative;z-index: 10;display: inline-block;}
    #all_menu .mlv1 a {margin: 0;width: 100px;/*height: 60px;line-height: 60px;*/color: #fff;background: #2a313e;text-align: center;border-bottom: 1px solid #555a65;padding: 17px 0px 17px 0;display: inline-block;cursor: pointer}
    #all_menu .mlv2 {position: absolute;right: 0;top: 0;width: 100%;display: none;}
    #all_menu .mlv3 {padding: 17px 15px 17px 0;width: calc(100% - 115px);/*height: 60px;line-height: 60px;*/margin: 0;border-bottom: 1px solid #e0e0e0;text-align: right;background: #fff;}
    #all_menu .mlv3:hover {color: #008bce}
    #all_menu .mlv4 {padding: 5px 0 5px 0;width: calc(100% - 100px);margin: 0;border-bottom: 1px solid #e0e0e0;background: #fff}
    #all_menu .mlv4 a {padding: 10px 15px 10px 0;margin: 0}
    #all_menu .mlv4 a:hover {color: #2a313e}
    #all_menu .bar_bg {background: #fff;width: 200px;height: 100%;position: absolute;right: 100px}
    #all_menu .black_bg {width: 100%;height: 100%;position: fixed;left: 0;background: rgba(0,0,0,0);z-index: 80;opacity: 0;visibility: hidden;transition: .4s}
    
    body.on {overflow: hidden;position: fixed;width: 100%}
    #all_menu.on {right: 0}
    #all_menu.on .black_bg {opacity: 1;visibility: visible;background: rgba(0,0,0,0.7);}
    #all_menu .mlv1 a.m_on {background: #efefef;color: #555a65}
    #all_menu .mlv2.m_on {display: block;}
    
    #footer h1 {text-align: center;float: none}
    #footer .f_mn {float: none;text-align: center;margin: 0;padding: 30px 0px;}
    #footer .f_mn li {float: none;display: inline-block;}
    #footer .ads {padding: 0;text-align: center;word-break: keep-all}
    #footer .ads span {display: block;}
    #footer .ads i {display: none;}
    #footer .ads .ft_br {display: none;}
    #footer .ads .copy {padding: 25px 0 30px;display: block;}
    #footer .ft_btn_group {text-align: center;}
}
@media screen and (max-width:355px){
    #footer .ft_btn_group a {padding: 0 5px}
    #footer .ft_btn_group a:first-child {margin: 0 0 10px}
}