@media ( max-width: 1250px ) {
    main { margin: 25px; }
    .smallInner { padding: 0 25px; }
}

@media ( max-width: 1230px ) {
    #logo { left: auto; right: 25px; top: -35px; }
    #naviMainOut { float: none; }
}

@media ( max-width: 1100px ) {
    .size-40, h1, h2 {font-size: 30px;line-height: 1.5em; }
}

@media ( max-width: 730px ) {
    #footer .footerCon p { float: none; margin-bottom: 10px; }
    #footer #naviFooter { float: none; }
    #footer #naviFooter ul li  { display: block; }
    #footer #naviFooter ul li  { display: block; }
    .grid_50_50 > .row  { margin-bottom: 0px;}
    .grid_50_50 > .row > .col {  width: 100%;  float: none; margin-bottom: 15px; }

}

@media ( min-width: 880px ) {
    #naviMain { display: block!important; }
}

@media ( max-width: 880px ) {
    .mobicon { display: block; }
    #naviMainOut { margin: 0; height: 100px; position: relative; }
    #naviMain { display: none; position: absolute; top: 100%; z-index: 90; left: 0; width: 100%; background-color: #223884;  }
    #naviMain > ul > li { float: none; display: block; }
    #naviMain > ul > li.active> a,
    #naviMain > ul > li > a:hover { color: #fff;  }
    #logo { left: 50%; right: auto; top: 10px; max-width: 100px; transform: translate(-50%, 0); }
    .slider { margin-bottom: 50px; }

    #header { padding: 0; position: relative; }
}

@media ( max-width: 520px ) {
    /*font-size */
    .size-30, h3 { font-size: 26px; line-height: 1.5em; }
    .size-40, h1, h2  { font-size: 35px; line-height: 1.5em; }
    .size-60, .slider .slider-buttons .fa { font-size: 60px; }
}