html, body {
width: 100%;
overflow-x: hidden;
}

#wrap {
    width: 100%;
}

#header {
    width: 100%;
}

#com_menu {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: transparent;
    background-color: rgba(17, 17, 17, 0.9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#e6111111, endColorStr=#e6111111);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#e6111111, endColorStr=#e6111111 )";
    zoom: 1;
}

/*상단메뉴로고부분*/

.row:before,
.row:after {
    content: "";
    display: table;
    zoom: 1;
}

.row:after {
    clear: both;
}

.col {
    width: 100%;
}


/* navigation menu */

#menu {
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#e6111111, endColorStr=#e6111111);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#e6111111, endColorStr=#e6111111 )";
}
  
#menu ul {
    margin: 0 auto;
    padding: 0;
    float: none;
    list-style: none; 
}

#logo {
    display: block;
    padding: 0px 30px;
    text-align: center;
    float: none;
    font-size: 1.250em;
    background-color: rgba(17, 17, 17, 1);
}

#logo img {
    padding: 4px 0px;
}

#menu .main-menu span {
    display: inline-block;
    height: 8px;
    width: 8px;
    border-left: 2px solid #f2f2f2;
    border-bottom: 2px solid #f2f2f2;
    transform: rotate(-45deg) translateY(-4px);
    -webkit-transform: rotate(-45deg) translateY(-4px);
}

#menu .toggle-menu {
    display: none;
}

#menu .main-menu {
    display: none;
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
    display: none;
}

#menu .drop-icon {
    cursor: pointer;
}



#menu label.drop-icon,
span.drop-icon {
    display: inline-block;
}




/*#menu .main-menu, .main-menu li a{color: #fff;}*/



/* section - sec01, section */

.sec01 {
    width: 100%;
    text-align: center;
}

.sec01 a {
    color: #ffffff;
}

.sec01 a:hover {
    text-decoration: underline;
}


/* section - sec02, section */

.sec02 {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.sec02 .sec02_con_area {
    margin-top: 20px;
    margin-bottom: 20px;
}

.sec02 .sec02_con_area a {
    font-size: 16px;
    color: #4e81b8;
    font-weight: 600;
}

.sec02 .sec02_con_area a:hover {
    text-decoration: underline;
}

.sec02 .sec02_con_area .sec02_con {
    margin-top: 20px;
}

.sec02 .sec02_con_area .sec02_con dl {
    margin-bottom: 35px;
}

.sec02 .sec02_con_area .sec02_con dl dt {
    font-size: 1.250em;
    font-weight: 700;
    color: #1e88e5;
    margin-bottom: 25px;
}

.sec02 .sec02_con_area .sec02_con dl dd {
    font-size: 1.125em;
    color: #666;
    line-height: 28px;
}


/* section - sec03, section */

.sec03 {
    width: 100%;
    margin: 0 auto;
}

.sec03 .sec0301 {
    background-color: #4e81b8;
    text-align: center;
}

.sec03 .sec0301 .sec0301_con {
    width: 600px;
    height: 200px;
}

.sec03 .sec0301 .sec0301_con h2.main_tit {
    float: left;
}

.sec03 .sec0301 .sec0301_con h2.main_tit a {
    line-height: 200px;
    color: #fff;
    background: #3f6792;
    display: block;
    min-width: 120px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.sec03 .sec0301 .sec0301_con ul,
.sec03 .sec0301 .sec0301_con li {
    margin: 0;
    padding: 0;
}

.sec03 .sec0301 .sec0301_con ul.sec0301_board li a {
    display: block;
    color: #fff;
}

.sec03 .sec0301 .sec0301_con ul.sec0301_board li {
    line-height: 40px;

}

.sec03 .sec0301 .sec0301_con ul.sec0301_board li a h3 {
    float: left;
    font-size: 0.875em;
    font-weight: 700;
    padding-left: 20px;
}

.sec03 .sec0302 {
    float: left;
    width: 100%;
    background: #f6f6f6 url(../images/sec0302_bg.jpg) no-repeat center center;
    height: 200px;
    background-position: -210px;
}

.sec03 .sec0302 dl {
    padding: 20px;
    text-align: left;
    color: #333;
}

.sec03 .sec0302 dl dt {
    font-size: 1.250em;
    font-weight: 600;
    padding-top: 10px;
}

.sec03 .sec0302 dl dd {
    font-size: 1.000em;
    line-height: 20px;
    padding: 20px 0 35px 0;
}

.sec03 .sec0302 dl a {
    border: 1px solid #bbb;
    padding: 10px 20px;
}


/* footer */

#footer {
    background: #222;
    width: 100%;
    position: relative;
    bottom: 0;
}

#footer .f_top {
    max-width: 1240px;
    margin: 0 auto;
    border-bottom: 1px solid #666;
    padding: 10px;
}

#footer .f_top h2.flogo {
    float: none;
}

#footer .f_bottom {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 60px;
    background: url(../images/footer_bg.png)no-repeat right top;
}

#footer .f_bottom ul {
    margin-top: 60px;
}

#footer ul.f_bottom li {
    text-align: left;
    font-size: 0.875em;
    font-weight: 500;
    color: #ddd;
    line-height: 26px;
}


/* main img slide css */

#main_visual .visual {
    width: 100%;
    margin: 0;
    position: relative;
}

#main_visual .visual ul,
li {
    margin: 0;
}

#main_visual .bx-viewport {
    display: block;
    height: 820px;
    margin: 0;
    padding: 0;
}

#main_visual .bx-wrapper {
    position: relative;
    margin: 0 auto;
    border-style: none;
}

#main_visual .bx-controls-direction {
    text-align: center;
}

#main_visual .bx-controls-direction a.bx-prev {
    background: url(../images/main_visual_arrow_l.png) no-repeat center center;
    margin-right: 1150px;
    margin-top: 10px;
    z-index: 1;
}

#main_visual .bx-controls-direction a.bx-next {
    background: url(../images/main_visual_arrow_r.png) no-repeat center center;
    margin-top: 10px;
    z-index: 1;
}

/* desktop view */

@media (max-width: 3600px) and (min-width: 1260px) {
    #menu {
        display: none;
    }
    .col-md-6 {
        width: 50%;
    }

    .col-md-4 {
        width: 33.3%;
    }

    .col-md-12 {
        width: 100%;
    }

    .col {
        float: left;
    }

    #footer .f_bottom ul li {
        text-align: left;
    }

}



/* tablet view */

@media (max-width: 1259px) and (min-width: 813px) {
    body {
        overflow-X: hidden;
    }

    #com_menu {
        display: none;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-4 {
        width: 33.33%;
    }

    .col-md-12 {
        width: 100%;
    }

    .col {
        float: left;
    }

    /* tablet menu */
    #menu{
        position: fixed;
    }
    
    #menu .main-menu {
        display: block;
    }

    #toggle-menu,
    #menu label.drop-icon {
        display: none;
      
    }

    #menu ul span.drop-icon {
        display: inline-block;
    }

    #menu li {
        float: left;
    }

    #menu .sub-menu li {
        float: none;
    }

    #menu .sub-menu {
        border-width: 0;
        margin: 0;
        position: absolute;
        top: 100%;
        left: 0;
        width: 12em;
    }

    #menu .sub-menu,
    #menu input[type="checkbox"]:checked + .sub-menu {
        display: none;
    }

    #menu .sub-menu .drop-icon {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1em;
    }

    #menu li:hover > input[type="checkbox"] + .sub-menu {
        display: block;
    }

    #menu .sub-menu {
        background-color: #474747;
        margin: 0 1.125em;
    }

    #menu li, #menu a {
        position: relative;
        display: block;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    }

    #menu {
        background-color: #111111;
    }
    
    #menu .main-menu {
       max-width: 750px;
    }

    #menu a {
        padding: 16px;
        transition: all .125s ease-in-out;
        -webkit-transition: all .125s ease-in-out;
    }

    #menu #logo a {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    #menu .sub-menu {
        display: none;
    }

    #menu .sub-menu li:hover {
        background-color: #4e81b8;
    }

    #menu .sub-menu a:hover {
        color: #c9c9c9;
    }

    .toggle-menu .drop-icon,
    #menu li label.drop-icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    #menu label.drop-icon,
    .toggle-menu span.drop-icon {
        padding: 1em;
        font-size: 1em;
        text-align: center;
        background-color: rgba(0, 0, 0, .125);
        text-shadow: 0 0 0 transparent;
        color: rgba(255, 255, 255, .75);
    }
 
    .sec02 {
        width: 100%;
        text-align: center;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .sec02 .sec02_con_area {
        width: 100%;
        margin: 0px;
    }

    #footer .f_top {
        width: 100%;
        padding-left: 40px;
    }

    #footer .f_bottom {
        width: 100%;
        padding-left: 30px;
    }
}

/* mobile view */

@media (max-width: 812px) {
    body {
        overflow-X: hidden;
        max-width:100%;
    }

    .container {
        padding: 0 12px;
    }

    #com_menu {
        display: none;
    }

    #head {
        width: 100%;
    }
    
    #menu{
        position: relative; 
        top: 0; 
        bottom: 0; 
        left: 0; 
        right: 0;
        width:100%;
        z-index: 999;
        display: block;
    }
    
    .toggle-menu {
        display: inline-block !important;
        position: absolute;
        top: 12px;
        right: 12px;
        cursor: pointer;
    }

    #menu .sub-menu {
        display: none;
    }

    #drop:checked + .main-menu {
        display: block;
    }

    #menu input[type="checkbox"]:checked + .sub-menu {
        display: block;
    }

    #menu .menu-item {
        border-bottom: 1px solid #9e9e9e;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        width: 100%;
        display: block;
        color: #fff;
        font-weight: 400;
        height: 52px;
        line-height: 52px;
        padding-left: 24px;
        background-color: #2b2b2b;
    }

    #menu .sub-menu a {
        border-bottom: 1px solid #9e9e9e;
        font-size: 0.938em;
        font-weight: 400;
        display: block;
        color: #fff;
        height: 52px;
        line-height: 52px;
        padding-left: 48px;
        background-color: #474747;
    }

    #menu label.drop-icon,
    span.drop-icon {
        background: #474747;
        border-right: 1px solid #9e9e9e;
        border-left: 1px solid #9e9e9e;
    }

    #menu label.drop-icon,
    span.drop-icon {
        float: right;
        padding-left: 20px;
        padding-right: 16px;
        height: 100%;
    }


    .sec01 {
        width: 100%;
        text-align: left;
    }

    .sec02 {
        width: 100%;
        text-align: center;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .sec02 .sec02_con_area {
        width: 100%;
        margin: 0px;
    }

    #footer .f_top {
        width: 100%;
    }

    #footer .f_top h2.flogo {
        text-align: center;
    }

    #footer .f_bottom {
        width: 100%;
    }

    #footer ul.f_bottom li {
        text-align: center;
        color: #ddd;
        line-height: 28px;
    }
}

@media (max-width: 330px) {
    #logo {
        text-align: left;
        padding-left: 5px;
    }
}



/* sec01 detail view image*/

@media (max-width: 4600px) and (min-width: 1000px){
    .sec01 {width: 100%; background: url(../images/sec01_bg.jpg) no-repeat center center;}
    .sec01 .sec0101 {width: 100%; float: right; height: 350px; position: relative;}
    .sec01 .sec0101 div {color: #fff; text-align: center; position: absolute; top: 60px; right: 135px;}
    .sec01 .sec0101 h5 {color: #fff; font-size: 16px; font-weight: 200;}
    .sec01 .sec0101 h2 {font-size: 26px; font-weight: 600; line-height: 30px;}
    .sec01 .sec0101 p {font-size: 18px; line-height: 20px; padding:20px 0px 30px 0px;}
    
    .sec01 .sec0102 {width: 100%; float: left;height: 350px; position: relative;}
    .sec01 .sec0102 div {color: #fff; text-align: center; position: absolute; top: 60px; left: 145px;}
    .sec01 .sec0102 h5 {color: #fff; font-size: 16px; font-weight: 200;}
    .sec01 .sec0102 h2 {font-size: 26px; font-weight: 600; line-height: 30px;}
    .sec01 .sec0102 p {font-size: 18px; line-height: 20px; padding: 20px 0px 30px 0px;}
} 

@media (max-width: 999px) and (min-width: 149px){
    .sec01 {width: 100%; text-align: left;}

    .sec01 .sec0101 {
        background: url(../images/sec01_bg_rwds.jpg) no-repeat center center;
        background-size: cover;
        padding: 20px 20px 90px 20px;
        color: #ffffff;
    } 

    .sec01 .sec0102 {
        background: url(../images/sec01_bg_rwds2.jpg) no-repeat center center;
        background-size: cover;
        padding: 20px 20px 90px 20px;
        color: #ffffff;
    }
}


/* sec01 detail view font-size, padding */

@media (max-width: 999px) and (min-width: 813px){
    .sec0101 h2 {font-size: 1.5000em; margin-bottom: 30px; font-weight: 600;}
    .sec0101 p {font-size: 1.125em; margin-bottom: 20px; font-weight: 500;}
    .sec0101 h5 {font-size: 1.000em; margin-bottom: 60px; font-weight: 200;}

    .sec0102 h2 {font-size: 1.500em; margin-bottom: 30px; font-weight: 600;}
    .sec0102 p {font-size: 1.125em; margin-bottom: 20px; font-weight: 500;}
    .sec0102 h5 {font-size: 1.000em; margin-bottom: 60px; font-weight: 200;}
}

@media (max-width: 812px) and (min-width: 505px){
    .sec0101 h2 { font-size: 1.5000em; margin-bottom: 30px; font-weight: 600;}
    .sec0101 p {font-size: 1.125em; margin-bottom: 40px; font-weight: 500;}
    .sec0101 h5 {font-size: 1.000em; margin-bottom: 90px; font-weight: 200;}

    .sec0102 h2 {font-size: 1.500em; margin-bottom: 30px; font-weight: 600;}
    .sec0102 p {font-size: 1.125em; margin-bottom: 40px; font-weight: 500;}
    .sec0102 h5 {font-size: 1.000em; margin-bottom: 90px; font-weight: 200;}
}


@media (max-width: 504px) and (min-width: 453px) {
    .sec0101 h2 {font-size: 1.188em; margin-bottom: 20px;}
    .sec0101 p {font-size: 1.063em; margin-bottom: 10px;}
    .sec0101 h5 {font-size: 0.938em; margin-bottom: 70px;}

    .sec0102 h2 {font-size: 1.188em; margin-bottom: 20px;}
    .sec0102 p {font-size: 1.063em; margin-bottom: 10px;}
    .sec0102 h5 {font-size: 0.938em; margin-bottom: 70px;}
}

@media (max-width: 452px) and (min-width: 400px) {
    .sec0101 h2 {font-size: 1.125em; margin-bottom: 10px;}
    .sec0101 p {font-size: 1.000em; margin-bottom: 10px;}
    .sec0101 h5 {font-size: 0.875em; margin-bottom: 70px;}

    .sec0102 h2 {font-size: 1.125em; margin-bottom: 10px;}
    .sec0102 p {font-size: 1.000em; margin-bottom: 10px;}
    .sec0102 h5 {font-size: 0.875em; margin-bottom: 70px;}
}

@media (max-width: 399px) and (min-width: 320px) {
    .sec0101 h2 {font-size: 0.938em; margin-bottom: 10px; font-weight: bold;}
    .sec0101 p {font-size: 0.813em; margin-bottom: 10px; font-weight: 300;}
    .sec0101 h5 {font-size: 0.750em; margin-bottom: 50px;}

    .sec0102 h2 {font-size: 0.938em; margin-bottom: 10px; font-weight: bold;}
    .sec0102 p {font-size: 0.813em; margin-bottom: 10px; font-weight: 300;}
    .sec0102 h5 {font-size: 0.750em; margin-bottom: 50px;}
}

@media (max-width: 319px) and (min-width: 259px) {
    .sec0101 h2 {font-size: 0.750em; margin-bottom: 5px;}
    .sec0101 p {font-size: 0.688em; margin-bottom: 5px;}
    .sec0101 h5 {font-size: 0.625em; margin-bottom: 5px;}

    .sec0102 h2 {font-size: 0.750em; margin-bottom: 5px;}
    .sec0102 p {font-size: 0.688em; margin-bottom: 5px;}
    .sec0102 h5 {font-size: 0.625em; margin-bottom: 5px;}
}