@charset "UTF-8";

/* TABLET */
@media (min-width: 768px) and (max-width: 1200px){
    
    .navbar-collapse ul li a { padding-left: 20px; padding-right: 20px;}

    .subnav {display: none !important;}
    .subnav-toggle { display: block; }

    #company {
        padding: 100px 0;
    }
    #company h1 {
        margin: 0 30px 50px;
    }
    #services {
        padding: 100px 0;
    }
    #services h1 {
        margin: 0 100px 50px 0;
    }
    #group {
        padding: 100px 0;
    }
    #world {
        padding: 100px 0;
    }
    #doc {
        padding: 100px 0;
    }

    #about {
        padding-top: 150px;
    }
    .about_slogan h1 {
        font-size: 1.85em;
        margin-bottom: 0.5em;
    }
    .about_copy p {
        font-size: 14px;
        line-height: 20px;
    }
    .about_title {
        margin: 0 0 100px 0;
    }

    #ceo {
        padding-top: 100px;
    }
    .ceo_slogan {
        font-size: 1.5em;
        font-weight: 400;
        margin-bottom: 1.25em;
    }
    .ceo_copy {
        font-size: 14px;
        line-height: 20px;
    }
    .ceo_img {
        height: 500px;
    }

    #history {
        padding: 100px 0;
    }
    .year {
        font-size: 1.5em;
        font-weight: 300;
        padding-right: 10px;
    }
    .issue {
        font-size: 13px;
        padding-left: 10px;
    }

    #service_fsn {
        margin-top: 70px;
        background-position: center 38%;
        height: 200px;
    }
    #service_fsn h1 {
        font-size: 1.5em;
        font-weight: 400;
        margin-top: 80px;
    }
    #service_group .left a h1 {
        font-size: 1.5em;
        margin-bottom: 1em;
    }
    #service_group .box {
        height: 120px;
    }

    #map_1 {
        padding: 50px 0;
        margin-bottom: 50px;
        background-position: left center;
        height: 400px;
    }
    #map_2 {
        padding: 50px 0;
        margin-bottom: 100px;
        background-position: left center;
        height: 400px;
    }
    #map_1 .pb, #map_2 .pb {
        margin-top: 7px;
    }
    #map_1 p, #map_2 p {
        font-size: 13px;
    }
    #map_1 p:last-child, #map_2 p:last-child {
        margin-top: 20px;
        margin-bottom: 30px;
    }


/* IR Page */
    #IR {
        padding-top: 120px;
    }


}

/* MOBILE */
/* -------------------------------------------------------------------------------------------------------------------------------------------- */

@media (max-width : 767px) {

/* COLLUPSABLE NAVIGATION MENU */
    header { min-height: 58px; background: white !important;}
    .navbar-header { margin-left: 0;}
    .navbar-brand { padding: 18px 6px; height: 22px;}
    .navbar-btn { display: block; float: right; width: 58px; height: 58px;}
    .navbar-collapse {display: none !important;}
    .navbar-toggle { display: none; }
    .brandname { width: 54px; height: 24px;}
    .subnav {display: none !important;}
    .subnav-toggle { display: block; }

    .t-line {
        width: 100px;
        height: 2px;
        margin-bottom: 15px;
    }
/*
INDEX PAGE
*/
    /* FSN AREA */
    #fsn {
        background-attachment: none;
        background-position: 40% 0;
        background-size: cover;
        height: 100vh;
    }
    #fsn .fsncontent{
        background-size: 80%;
    }

    #company {
        padding: 100px 15px;
    }
    #company h1 {
        font-size: 1.5em;
        letter-spacing: -0.8px;
        margin: 0 0 50px;
    }
    .main_btn img {
        width: 165px;
        height: 40px;
    }
 
    /*CAULY SECTION*/
    #services {
        padding: 100px 15px;
    }
    #services h1 {
        font-size: 1.5em;
        letter-spacing: -0.8px;
        margin: 0 0 50px;
    }
    #services h3 {
        font-size: 1em;
    }
    #services p {
        font-size: 12px;
        line-height: 20px;
    }

    #group {
        padding: 100px 15px;
    }
    #group .t-line {
        margin-top: 50px;
        margin-left: 0;
    }
    #group h1 {
        margin: 0 0 50px 0;
        font-size: 1.5em;
        letter-spacing: -0.8px;
    }
    #group .main_btn {
        margin-left: 0;
    }

    #world {
        padding: 100px 15px;
        background-attachment: inherit;
    }
    #world h1 {
        font-size: 1.5em;
        letter-spacing: -0.8px;
    }
    #world .box {
        background: rgba(255, 255, 255, 0.85);
    }

    /*DOC SECTION*/
    #doc {
        padding: 100px 15px;
    }
    #doc h1 {
        font-size: 1.5em;
        letter-spacing: -0.8px;
        margin-bottom: 50px;
    }
    #doc p       { margin-top: 14px; font-size: 7px; line-height: 12px;}
    .doc_title   { padding-bottom: 56px; width: 80px; padding-top: 0;}
    .doc_btn     { width: 94px; height: 118px;}

    footer {
        padding: 15px 0;
    }
    footer .copyright {
        font-size: 10px;
    }
/*
WHO WE ARE PAGE
*/
    /*ABOUT SECTION*/
    #about{
        background-attachment: scroll;
        background-position: center top;
        background-size: auto;
        padding: 120px 15px 80px;
    }
    .about_slogan{
        margin-bottom: 50px;
    }
    .about_slogan h1 {
        font-size: 2em;
        margin-bottom: 0.5em;
    }
    .about_title        { display: none;}
    .about_copy         { padding-top: 0; padding-bottom: 0;}
    .about_copy p       { font-size: 12px; line-height: 22px; padding: 0 15px;}

    /*CEO SECTION*/
    #ceo {
        overflow: hidden;
        padding: 100px 15px 0;
    }
    .ceo_slogan {
        font-size: 1.15em;
        font-weight: 600;
        margin-bottom: 30px;
        line-height: 1.5em;
    }
    .ceo_copy {
        font-size: 12px;
        letter-spacing: -0.02em;
        line-height: 20px;
    }
    .ceo_img {
        background-image: url(../img/sub/ceo_lee.jpg);
        background-position: right top;
        background-repeat: no-repeat;
        background-size: auto 100%;
        height: 300px;
    }
    #ceo .br{
        display: none;
    }

    #history {
        padding: 80px 15px;
    }
    #history h1{
        font-size: 1.15em;
        margin-bottom: 50px;
    }
    .history_copy {
        padding: 0 15px;
    }
    .history_copy p {
        padding-bottom: 5px;
    }
    #history td {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .year {
        font-size: 13px;
        font-weight: 400;
        vertical-align: top;
        padding-right: 0;
    }
    .month {
        font-size: 10px;
    }
    .issue {
        font-size: 10px;
        padding-left: 0;
    }

    .left_white {
        display: none;
    }
    .right_white {
        display: none;
    }
    .right_gray {
        display: none;
    }
    .left_yellow {
        display: none;
    }
    .right_blue {
        display: none;
    }
    .left_red {
        display: none;
    }


    .top_yellow {
        height: 130px;
    }
    .top_blue {
        height: 130px;
    }
    .top_red {
        height: 130px;
    }

/*
WHAT WE DO PAGE
*/
    #service_fsn {
        margin-top: 58px;
        background-position: center 38%;
        height: 200px;
    }
    #service_fsn h1 {
        font-size: 1.15em;
        font-weight: 400;
        line-height: 1.5em;
        margin-top: 80px;
    }
    #service_group {
        margin: 50px 15px 100px;
    }
    #service_group .left a h1 {
        border-top: 2px solid #000;
        padding-top: 15px;
        font-size: 1.15em;
        margin-bottom: 1.5em;
    }
    #service_group .box {
        height: 120px;
    }
    .box span {
        background-size: 100%;
    }


    #map_1 {
        padding: 240px 30px 0;
        margin-top: 58px;
        background-image: url(../img/sub/map_2.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        height: auto;
    }
    #map_2 {
        padding: 220px 30px 0;
        margin-top: 58px;
        background-image: url(../img/sub/map_1.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        height: auto;
    }
    #map_1 h3, #map_2 h3 {
        margin-bottom: 15px;
    }
    #map_1 .pb, #map_2 .pb {
        margin-top: 5px;
    }
    #map_1 p:last-child, #map_2 p:last-child {
        margin-top: 15px;
        margin-bottom: 0;
    }

    /* IR Page */
    #IR {
        padding-top: 100px;
    }

    .corporateDisclosure .tbl_title{
        margin-top: 10px;
    }

    .select-style {
        background: #fff url("../img/arrowdown.gif") no-repeat 95% 50%;
    }

    .mobile_none{
        display: none;
    }

    .stock_info .stock_now{
        float: none;
    }
    .stock_info .stock_desc{
        float: none;
        margin: 8px 0 0 0;
    }

    .invest_info{
        margin-top: 50px;
        margin-bottom: 0;
    }

    .invest_info.right{
        width: 100% !important;
    }
    .dateprice{
        position: relative;
        margin-top: 50px;
    }
    .scroll_guide{
        background-image: url("../img/scroll_guide.png");
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        z-index: 9999;
    }

    .earnings{
        padding-top: 40px;
    }

    .publicNotice{
        padding-top: 40px;
    }

    .publicNotice td h3{
        display: block;
    }

    .publicNotice td span{
        padding-left: 10px;
        float: none;
        font-style: 11px;
        color: #646e79;
    }

    .view_title{
        float: none;
        font-size: 14px !important;
        padding-left: 5px !important;
    }
    .view_date{
        float: none;
        font-size: 11px !important;
        padding-left: 5px !important;
    }
    .view_body{
        padding: 15px !important;
    }

    .btn-default{
        display: inline-block;
        border: 1px solid #646e79;
        color: #646e79;
        font-size: 13px;
        padding: 4px 20px;
    }

    .btn-primary{
        display: inline-block;
        border: 1px solid #4179f7;
        color: #4179f7;
        font-size: 13px;
        padding: 4px 20px;
    }

    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }

}