ol,ul,li {
list-style:none
}
html,
body {
 height: 100%;
 width: 100%;
 background-color: black !important;
 color: white;
 font-family: 'Roboto', sans-serif;

}

.home {
 text-align: center;

}


h1 {
 color: white;
}


a {
 color: #0080ff;
}

a:hover {
 color: #0080ff;
}

.dropbtn {
 background-color: #0080ff;
 color: white;
 padding: 5px;
 font-size: 16px;
 border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
 position: relative;
 display: inline-block;
 padding: 1px 1px 1px 1px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #42a1ff;
 min-width: 16px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
 color: white;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
 background-color: #58abfe;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
 display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
 background-color: #0080ff;
}


.header a {
 float:left;
 color: black;
 text-align: center;
 padding: 12px;
 text-decoration: none;
 font-size: 18px;
 line-height: 25px;
 border-radius: 4px;
}

.about-wrap {
 display: flex;
 /* or inline-flex */
}

/* .center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
}*/


label,
input,
select {
 vertical-align: middle
}

#wrap {
 width: 100%;
 position: relative
}

#header {
 width: 100%
}

#footer {
 width: 100%;
 background: #252525;
 padding: 30px 0
}

#wrap {
 background: #fff
}

#header {
 position: fixed;
 right: 0;
 top: 0;
 width: 100%;
 z-index: 1000;
 height: 89px
}

.header_wrap {
 max-width: 1698px;
 margin: 0 auto;
 position: relative
}

.header_wrap h1 {
 float:left;
 margin: 21px 54px 0 0;
 width: 88px;
 height: 48px;
 text-indent: -9999px;
 background: url(../images/logo.png) no-repeat 0 0;
 background-size: 100%
}

.header_wrap h1 a {
 display: block;
 width: 100%;
 height: 100%
}

.main_wrap #header:hover h1,
#header.on h1 {
 background-image: url(../images/logo_over.png)
}

.main_wrap #header:hover,
.sub_wrap #header {
 background: #5597AA background-color: rgba(255, 255, 255, .4);

}

#header.on {
 background: #5597AA !important
}

.header_wrap .gnb {
 float:left;
 margin-right: 50px
}

.header_wrap .gnb>ul>li {
 float:left;
 position: relative
}

.header_wrap .gnb>ul>li>a {
 display: block;
 padding: 35px 42px 0 35px;
 font-size: 16px;
 height: 54px;
 font-weight: 700;
 transition: all .3s;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -ms-transition: all .3s;
 -o-transition: all .3s;
 color: #fefeff
}

.header_wrap .gnb>ul>li:hover>a {
 color: #333;
 transition: color .2s
}

.header_wrap .gnb>ul>li:hover div {
 display: block
}

.header_wrap .gnb>ul>li .hover {
 position: absolute;
 width: 100%;
 height: 0;
 background: #fff;
 top: 0;
 left: 0;
 z-index: -1;
 -webkit-transition: .2s height cubic-bezier(0.77, 0, 0.175, 1);
 transition: .2s height cubic-bezier(0.77, 0, 0.175, 1)
}

.header_wrap .gnb>ul>li:hover .hover {
 height: 100%
}

.header_wrap .gnb>ul>li div {
 position: absolute;
 left: 0;
 top: 100%;
 width: 100%;
 display: none;
 transition: all .3s;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -ms-transition: all .3s;
 -o-transition: all .3s;
 z-index: 600
}

.header_wrap .gnb>ul>li div li {
 margin-top: -1px;
 text-align: center
}

.header_wrap .gnb>ul>li div a {
 color: #646464;
 padding: 15px 0;
 display: block;
 background: #fff;
 font-size: 12px;
 border: 1px solid #dbdbdb
}

.header_wrap .gnb>ul>li div a:hover {
 color: #5597AA;
 opacity: .0;
 font-weight: 700;
 background: #f5f5f5
}

.header_wrap .lang {
 position: absolute;
 top: 35px;
 right: 0
}

.header_wrap .lang li {
 float:left;
 padding-left: 20px
}

.header_wrap .lang li a {
 color: #fff;
 font-size: 11px
}

.main_wrap #header:hover .header_wrap .lang li a,
#header.on .header_wrap .lang li a {
 color: #fff
}

.header_wrap .menu_btn {
 display: none
}

.header_wrap {
 padding-left: 15px;
 box-sizing: border-box
}

.header_wrap .lang {
 right: 15px
}
}




@media all and (min-width:1011px) and (max-width:1200px) {
.header_wrap h1 {
margin-right:20px
}

.header_wrap .gnb > ul > li > a {
padding:35px 25px 0;
transition:all .3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s
}
}

@media all and (min-width:501px) and (max-width:1010px) {
.header_wrap .gnb > ul > li > a {
padding:35px 15px 0
}
}

#header {
height:50px;
padding:0 20px;
box-sizing:border-box
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0
}
a {
text-decoration:none;
}