@charset "utf-8";

a:hover{transition: all 300ms ease-out;}
.cicon{display:inline-block;overflow:hidden;background:url(/images/common/c/hak_b/sm_hg_main_ir.png) no-repeat;font-size:0;line-height:0;}
.cicon.email{width:34px;height:34px;background-position:-1px -56px;}


.layout{width:100%;}
#con1 .layout{max-width:100%;}
#mcontainer{background:url(/images/common/c/hak_b/sm_hg_main_bg.png) no-repeat;background-size:cover;}
#mcontainer:after{content:"";display:block;clear:both;visibility:hidden;}
@media only screen and (min-width:768px) {
/*#mcontainer{padding:1px 0 120px 0;}*/
}


.inner{display:block;width:100%;}
.inner{overflow:hidden;/*padding:40px;*/padding:20px;min-height:274px;background-color:#fff;}
.inner *{margin:0;padding:0;}
.inner h2{margin-bottom:22px;color:#252729;font-family:'nsr';font-size:25px;line-height:28px;font-weight:bold;}

div[id *= con]{position: relative;/*width:100%;*/}
.inner_box{position:relative; width:1200px;margin:auto;padding:20px 0;}
div[id *= con]:after{content:"";display:block;float:none;clear:both;visibility:hidden;}

#con1{width:100%; height:800px; }
#con1 .inner_box{position:absolute;left:50%;top:214px;width:80%; height:279px;margin-left:-40%;background: url(/images/common/c/hak_b/sm_a_h2.png) no-repeat center top;background-size: contain;z-index:1}   
#con1 h3{width:80%; height:auto;;margin:auto; text-align: center; font-size:50px;font-weight:600;line-height: 0px;color:#fff;}
#con1 h3 span.h3_ttl{display: block;padding-top:80px;letter-spacing:-1px;line-height: 1.3}
#con1 h3~p{font-size:40px;color:#fff;text-align: center;line-height: 1.3;font-family: nsr;}

#con1 .sld1{width:100%;padding-top:11%;background: url(/images/common/c/hak_b/sm_a_bg.png) no-repeat center top; background-size: cover;}
#con1 .sld2{}
#con1 .sld3{}
#con1 .sld4{}

#con1 .popup .grap{position:relative;width:100%;height:100%;}
#con1 .popup .grap .obj{position:relative;width:100%;height:100%;}
#con1 .popup .grap .obj:after{content:"";display:block;clear:both;visibility:hidden;}
#con1 .popup .grap .obj .item{display:none;position: absolute;
top: 0;left: 0;width:100%;height: 800px;float:left;background-color:#aaa;}


/* popup Control Style */
#con1 .popup .control{position:relative; top:650px;width:auto; height:auto;margin:auto;padding:50px 40px 30px; text-align:center; }

#con1 .popup .control button{/* display:inline-block; */width:13px;height:13px;color:#fff;line-height:15px;text-align:center;vertical-align:middle;word-wrap:break-word;word-break:keep-all;font-size:0;line-height:0;text-indent: -999px;}
#con1 .popup .control a{display: none;width:24px; height:40px; background:url(/images/common/c/hak_b/sm_m_ico.png) no-repeat; text-indent: -9999px;font-size:0;line-height:0;}
#con1 .popup .control .prev,
#con1 .popup .control .next{}
#con1 .popup .control .prev{}
#con1 .popup .control .next{background-position:-54px 0; }
#con1 .popup .control .play,
#con1 .popup .control .stop{width:20px;}
#con1 .popup .control .play{display:none;background-position:-35px 0;}
#con1 .popup .control .stop{background-position:-20px 0;}

/* Scroll Paging Style */
#con1 .popup .control .paging{display:inline-block;width:200px;height:20px;}
#con1 .popup .control .paging button{margin:0 1px;width:10px;height:10px;line-height:10px;background-color:#fff;}
#con1 .popup .control .paging button.ov{width:70px;background-color:#0032a1;}
#con1 .popup .control .paging em{font-weight:bold;text-decoration:underline;}


#con2{height:540px;padding:70px 0px 90px;}
.mgllry{overflow:visible;float:left;width:49%;height: 100%;position:relative;z-index:10}
.mgllry.inner{padding:0;}
.mgllry .more{display:block;overflow:hidden;position:absolute;top:220px;right:30px;width:18px;height:18px;background:url(/images/common/c/hak_b/sm_hg_main_ir.png) no-repeat -18px -48px;font-size:0;line-height:0;}


/* popup */
.popup{position:relative;}

/* popup Area */
.mgllry .popup .grap{position:relative;width:100%;height:100%;margin-left: 5%;}
.mgllry .popup .grap .obj{position:relative;width:95%;height:100%;}
.mgllry .popup .grap .obj:after{content:"";display:block;clear:both;visibility:hidden;}
.mgllry .popup .grap .obj .item{display:none;position: absolute;
top: 0;left: 0;width:100%;height:349px;float:left;background-color:#aaa;background-position: top center;}
.mgllry .popup .grap .obj .item:first-child{display:block;background:url(/images/common/c/hak_b/main_grrl.png) no-repeat center;background-size:cover}
.mgllry .popup .grap .obj .item a{display:block;color:#fff;}
.mgllry .popup .grap .obj .item a img{width:600px;height:375px;}
.mgllry .popup .grap .obj .item b{display:block;padding:220px 0 30px 30px; font-size:15px;text-align:left;}

/* popup Control Style */
.mgllry .popup .control{position:absolute;top:148px;width:210px; height:auto;padding:50px 40px 30px; text-align:center;background-color:#0032a1 }
.mgllry .popup .control button{/* display:inline-block; */width:13px;height:13px;color:#fff;line-height:15px;text-align:center;vertical-align:middle;word-wrap:break-word;word-break:keep-all;font-size:0;line-height:0;text-indent: -999px;}
.mgllry .popup .control a{display: inline-block;width:24px; height:40px; background:url(/images/common/c/hak_b/sm_m_ico.png) no-repeat; text-indent: -9999px;font-size:0;line-height:0;}
.mgllry .popup .control .prev,
.mgllry .popup .control .next{}
.mgllry .popup .control .prev{}
.mgllry .popup .control .next{background-position:-54px 0; }
.mgllry .popup .control .play,
.mgllry .popup .control .stop{width:20px;}
.mgllry .popup .control .play{display:none;background-position:-35px 0;}
.mgllry .popup .control .stop{background-position:-20px 0;}


.control h3{margin-bottom:20px;font-size:23px;line-height: 1.2;color:#fff;font-weight: 600;}
.control h3 em{font-size:36px;}


.mbrd {float:right;width:47%;position:relative;height: 100%;}
.mbrd h3{float:left;width:53%;height:106px;margin:auto 0;background: url(/images/common/c/hak_b/sm_a_h3.png) no-repeat;vertical-align:middle;}
.mbrd h3 span.h3_ttl{display:inline-block;padding:15px 0 0px;font-size: 21px;letter-spacing: -1.5px;font-weight: 600;}

.mbrd h4{width:23%;float:right;font-size:18px;font-weight:bold;text-align: right;color:#111}
.mbrd .obj {position: absolute;top: 135px;left: 0;width: 100%;height: 400px;padding: 10px 0px;}
.mbrd .obj:last-child{display:none}
.mbrd h4 a,
.mbrd h4 a:link, 
.mbrd h4 a:visited{color:#111;} 
.mbrd h4 a.ov{color:#0032a1;border-bottom:2px solid #0032a1}

.mbrd ul li{overflow:hidden; font-size:16px; line-height:1.2;padding-left:20px;background:url(/images/common/c/hak_b/sm_blt.png) no-repeat 5px center;  }
.mbrd ul li a{overflow:hidden;float:left;display:block;width:75%;padding:3px 0; white-space: nowrap;text-overflow: ellipsis;}
.mbrd ul li a span{overflow:hidden;display:block;width:100%;line-height:1.3}
.mbrd em.day{float:right;padding-top:10px;color:#222;font-size:14px; }

.mbrd ul li.impt{background: 0;padding-left:0;}
.mbrd ul li.impt a{height:90px;margin-left:20px;width:81%;white-space:normal;}

.mbrd ul li.impt a h5{font-size:18px;font-weight:600;word-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbrd ul li.impt a span.txt{height:40px;}
.mbrd ul li.impt>span{float:left;display:inline-block;width:85px;height:85px;background: url(/images/common/c/hak_b/sm_m_ico.png) no-repeat 0 -112px;}
.mbrd li.impt em.day{position: absolute;top: 60px;right: 0px;}

.mbrd h4 span{padding-left:8px;color:#7e869d;font-size:13px;}
.mbrd .more{display:block;overflow:hidden;position:absolute;top:-68px;right:0px;width:140px; padding-right:50px;height:35px;background:url(/images/common/c/hak_b/arw.png) no-repeat 80% 10px;color:#0032a1;}
.mbrd .more em{font-style:italic;}
.mbrd .more:hover{background-position-x: 90%;}
.mbrd .more span{ position: absolute;top: 0px;right: 0px;display: inline-block;width:35px;height:35px;border:1px solid #0032a1;}


#con3{height:220px;padding:40px 0 0;background-color: #e5e5e5}
#con3 h3{float:left;width:20%;height:101px;margin:auto 0;background: url(/images/common/c/hak_b/sm_qck.png) no-repeat;background-size: contain;vertical-align:middle;text-align: center; text-indent: -9999px;font-size:0px;line-height: 0px;}  
#con3 ul{float:right;width:79%;}
#con3 li{float:left;width:16%;margin-right:0.5%;}
#con3 li a{display: block;width:100%;height:100%;text-align: center;font-size:18px;font-weight:bold;color:#111;} 
#con3 li a span{display: block;width:80px;height:80px;margin:5px auto;background:url(/images/common/c/hak_b/sm_m_ico.png) no-repeat; }
#con3 li a span.ico1{background-position:-4px -221px}
#con3 li a span.ico2{background-position:-163px -221px}
#con3 li a span.ico3{background-position:-322px -221px}
#con3 li a span.ico4{background-position:-480px -222px}
#con3 li a span.ico5{background-position:-636px -218px}
#con3 li a span.ico6{background-position:-792px -220px}

#con3 li a:hover{color:#2a77ce;text-decoration: underline;} 
#con3 li a:hover span{border-radius: 70px; background-color:#d6d4d4; }


@media(max-width:1440px){
    .inner_box{position:relative; width:1000px;}
    .mbrd ul li.impt a{width: 70%;}
}



@media(max-width:1199px){
    #con3 .inner_box,
    #con2 .inner_box{width:98%;}
    #con1,#con1 .popup .grap .obj .item{height:600px;}
    #con1 .popup .control {top: 480px;}
}

@media(max-width:999px){
    div[id *= con]{overflow: hidden;height:auto;}
    #con3 .inner_box,
    #con2 .inner_box,
    .inner_box{width:100%;}

    #con2{height:auto;padding: 70px 0px 0px;}
    .mgllry,
    .mbrd{overflow: hidden;width:100%;height:auto;}
    .mbrd{height:450px;margin-top:70px;padding:0 5%;}
    .mbrd li.impt em.day{position: relative;top: auto;padding-top: 56px;}
    .mgllry .popup .grap{width:90%;margin-left:0;margin:auto;}
    .mgllry .popup .grap .obj{width:100%;height:250px}
    .mgllry .popup .grap .obj .item{height:320px;}
    .mgllry .popup .grap .obj .item a img{width:100%;height:auto;}
    .mgllry .popup .control {position:relative;top:auto;width: 90%;height: auto;margin:0px auto;padding:25px 30px;text-align: right;}

    .control h3 {float: left;width: auto;margin-bottom: 20px;font-size: 20px;text-align: center;}
    .control h3 em {font-size: 33px;}
    .mbrd .obj {padding:0;background-color: #F7F7F7;}
    .mbrd .obj li{float:left;position: relative;width:50%;height: 80px;padding:15px 5% 0;background-color: #F7F7F7;background-position: 17% 30px;}

    .mbrd .obj li a{float:none;width:100%;padding-left: 15%;white-space: normal;}
    .mbrd ul li.impt{width:100%;height: 100px;padding:0 8%; background: #fff;}
    .mbrd ul li.impt a{float:left;width:75%;padding-left: 10px;}
    .mbrd em.day{position: absolute;right: 20px;top: 38px;}


    /*.mbrd .obj .mboardWrap{width:90%;margin: 10px 5%;}*/

    .mbrd .more{right: 5%;}
    .mbrd ul li {margin-bottom: 10px;}


    #con3{padding: 20px 0 0;}
    #con3 h3{display: none;}
    #con3 ul{float:none;width:100%;}

}

@media(max-width:767px){
    #con1 .sld1{padding-top: 22%;}
    #con2{padding-top:30px}
    #con3 li a{font-size: 16px;}
    .mgllry .popup .grap .obj,
    .mgllry .popup .grap .obj .item{height:220px;}
    .mbrd ul li.impt a {width: 66%;}
    .control h3 {width:210px;text-align:left;}
}

@media(max-width:560px){

}

@media(max-width:500px){
    #con1 .sld1{padding-top: 45%;}
    #con1 h3{width: 95%;background: url(/images/common/c/hak_b/sm_a_h2_1.png) no-repeat center top;}
    .inner_box,
    #con2{padding:0px}
    .mgllry .popup .grap,
    .mgllry .popup .control{width:100%;}
    .mgllry .popup .grap .obj .item a {display:block;width:100%;height:100%;background-color:rgba(27,68,171,0.3);}
    .mbrd {height: 360px;margin-top: 50px;}
    .mbrd .more em,
    .mbrd li.impt em.day,
    .mbrd h3{display: none;}
    .mbrd h4{width:40%;text-align: left;}
    .mbrd .more{width:100px;top:-54px;}
    .mbrd .obj{top:54px;height:350px;}
    #con3{height:300px;}
    #con3 li{width:31.5%;}

    .mbrd .obj {padding:0;background-color: transparent;}
    .mbrd .obj li{float:none;position: relative;width:100%;height:auto;padding:0px 5% 0;background-position: 8% 15px;background-color: transparent;}


    .mbrd .obj li a{float:left;width:80%;padding-left: 10%;white-space: nowrap;}
    .mbrd ul li.impt{width:100%;height: 100px;padding: 0 20px 10px;}
    .mbrd ul li.impt a{float:left;width:73%;padding-left: 10px;}
    .mbrd em.day{position: relative;right: 0;top: auto;}

    

}

@media(max-width:450px){
    .mbrd ul li.impt a {width: 61%;}
}

@media (max-width:1400px){
    #con1 h3{font-size: 46px;}
    #con1 h3 ~ p{margin-top:5px;font-size: 34px;}
}

@media(max-width:1199px){
    #con1 h3{font-size: 40px;}
    #con1 h3 ~ p{font-size: 31px;}
}

@media (max-width:999px){
    #con1 h3{font-size: 40px;}
    #con1 h3 ~ p{font-size: 31px;}
}

@media (max-width:767px){
    #con1 h3{font-size: 32px;letter-spacing: -2px;}
    #con1 h3 span.h3_ttl{padding-top:70px;}
    #con1 h3 ~ p{font-size: 24px;}    
}

@media (max-width:580px){
    #con1 h3{font-size: 28px;}
    #con1 h3 span.h3_ttl{padding-top:60px;}
    #con1 h3 ~ p{font-size: 22px;}    
}

@media (max-width:500px){
    #con1 .inner_box{width:95%;margin-left:-74%;background: url(/images/common/c/hak_b/sm_a_h2_1.png) no-repeat center top;}
    #con1 h3{width:100%;font-size: 24px;}
    #con1 h3 span.h3_ttl{padding-top:50px;}
    #con1 h3 ~ p{font-size: 17px;width:80%;margin: 0 auto;}    
}