css

@charset "utf-8";
/*reset*/
* { margin: 0; padding: 0; box-sizing: border-box; }
ul,ol,li { list-style-type: none; }
a { text-decoration: none; color: inherit; }
img { vertical-align: top; }
button { border: 0; cursor: pointer; }
html, body { width: 100%; height: 100%; font-size: 15px; background-color: #fff; color: #666; }


/*common*/
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_st { align-items: flex-start; }
.a_flx_end { align-items: flex-end; }
.j_center { justify-content: center; }
.j_flx_end { justify-content: flex-end; }
.j_flx_st{ justify-content: flex-start; }
.j_spc_btw { justify-content: space-between; }
.hide { width: 1px; height: 1px; text-indent: -999999px; position: absolute; top: -999999px; left: -9999pc; overflow: hidden; } 


.wrap { position: relative; }
/*header*/
#header { width: 1340px; height: 100px; margin: 0 auto; }
.gnb > ul {  }
.gnb > ul >li { position: relative; width: 160px; height: 48px; line-height: 48px; text-align: center; }
.gnb > ul >li > a { display: block; width: 100%; height: 100%; font-size: 17px; font-weight: bold; }
.gnb > ul >li:hover > a { color: #fff; background-color :rgb(41, 98, 183, 0.5); }
.sub_menu { position: absolute; top: 48px; left: 0; width: 160px; z-index: 2; background-color: #fff; display: none; }
.sub_menu > li { height: 38px; line-height: 38px; }
.sub_menu > li:hover { color: #111; background-color: rgba(0, 0, 0, 0.1); }


/*main*/
#main{ width: 100%; height: auto; position: relative;}
#main .slide{ width: 100%; height: 350px; overflow: hidden; }
#main .slide .slide_wrap { width: 100%; height: 100%; }
#main .slide .slide_wrap > li { position: relative; width: 100%; height: 100%; }
#main .slide .slide_wrap > li span { padding: 10px 20px; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; }
.m_wrap { width: 1340px; height: auto; margin: 0 auto; position: relative;}
.m_wrap .link { width: 100%; height: 80px; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: -80px; padding: 0 20px; color: #fff; }
.m_wrap .link span { padding-left: 8px; }
.m_wrap .banner { height: 150px; padding: 0 10px; background-color: aliceblue; }
.m_wrap .banner .b_txt {  padding-left: 20px;}
.m_wrap .banner .b_txt .tit { font-size: 17px; height: 48px; line-height: 48px; font-weight: bold; }
.m_wrap .banner .b_txt .txt { font-size: 15px; height: 28px; line-height: 28px; }
.m_wrap .board { width: 55%; margin: 20px 0 ;}
.m_wrap .board .tab_btn > h3{ width: 100px; height: 38px; line-height: 38px; text-align: center; font-size: 17px; font-weight: bold; border: 1px solid #eee; border-bottom: 0; cursor: pointer; }
.m_wrap .board .tab_btn > h3.on { background-color: #3668E8; color: #Fff; }
.m_wrap .board .notice li { height: 48px; line-height: 48px; padding: 0 10px;}
.m_wrap .board .notice li:nth-child(odd) { background-color: #eee; }
.m_wrap .board .notice > ul { border: 1px solid #eee; }
.m_wrap .board .gallery { display: none; }

/*footer*/
#footer { width: 1340px; height: 120px; margin: 0 auto; background-color: #eee; padding: 0 10px; }
#footer .f_logo { margin-right: 40px; }
#footer .f_menu li { width: 150px; height: 38px; line-height: 38px; }
#footer .copy { height: 32px; line-height: 32px; }

/*modal*/
.modal_bg {  position: absolute; top: 0 ; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; }
.modal_bg .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; background-color: #fff; }
.modal_bg .modal h4{  font-size: 17px; font-weight: bold; height: 38px; line-height: 38px; }
.modal_bg .modal p { margin-bottom: 16px; }
.modal_bg .modal button { display: block; width: 150px; margin: 0 auto; padding: 6px 0 ; }
.modal_bg .modal button:hover { background-color: #3668E8; color: #fff; }