/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

@font-face {
  font-family: 'NanumGothic';
  src: url('../font/NanumGothic.eot');
  src: local('☺'),
       url('../font/NanumGothic.eot?#iefix') format('embedded-opentype'),
       url('../font/NanumGothic.woff') format('woff'),
       url('../font/NanumGothic.ttf') format('truetype'),
       url('../font/NanumGothic.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NanumGothicBold';
  src: url('../font/NanumGothicBold.eot');
  src: local('☺'),
       url('../font/NanumGothicBold.eot?#iefix') format('embedded-opentype'),
       url('../font/NanumGothicBold.woff') format('woff'),
       url('../font/NanumGothicBold.ttf') format('truetype'),
       url('../font/NanumGothicBold.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    font-family: 'NanumGothic', sans-serif;
}

a {
    text-decoration: none;
}

ol, ul {
    list-style: none;
    padding: 0px;
}

img {
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   Morusoft Web Page Defalut css
   ========================================================================== */

body {
   width: 1000px;
   height: 100%;
   min-height: 100%;
   margin: 0 auto;
   padding: 0px 0px 0;
   background-color: #EEEEEE;
   font-family: 'NanumGothic';
}
   #wrap {
       display: table;
       position: relative;
       width: 100%;
       min-height: 910px;
       margin: 0 auto;
       background: url(../img/bg_wrap.png) repeat-y 0 0;
   }
   
   #wrap .clear {
       clear: both;
   }
   
   header {
       display: table-cell;
       position: relative;
       vertical-align: top;
       width: 166px;
       background-color: #3f79ad;
   }
   
   header #logo {
       padding: 33px;
       background-color: #ffffff;
       margin: 0px;
       border-left: 1px #dddddd solid;
       border-right: 1px #dddddd solid;
   }
   
   header nav {
       /*margin: 15px 15px;*/
   }
   
   header .btn_nav { display: none; }
   
   header nav dl {
       margin: 0px;
   }
   
   header nav dt {
       background: url(../img/menudepth1_bg.png) repeat-x 0 0;
       height: 31px;
   }
   
   header nav dt a {
       /*font-family: 'NanumGothic', sans-serif;*/
       font-size: 14px;
       font-family: 'NanumGothic';
       color: #fff000;
       padding-left: 10px;
       line-height: 33px;
       display: block;
   }
   
   header nav dt a.active, header nav dt a:hover {
       text-decoration: underline;
   }
   
   header nav dt.m_title {
       display: none;
   }
   
   header nav dd {
       background: url(../img/menudepth2_bg.png) repeat-x 0 0;
       height: 40px;
       margin: 0px;
   }
   
   header nav dd a {
       font-size: 14px;
       font-family: 'NanumGothic';
       color: #ffffff;
       padding-left: 20px;
       line-height: 40px;
       display: block;
   }
   
   header nav dd a.active, header nav dd a:hover {
       background:url(../img/menu_on.png) 150px 16px no-repeat;
   }
   
   #companyInfo {
       position: absolute;
       bottom: 0px;
       margin: 250px 10px 0px 10px;
       padding-bottom: 30px;
       font-size: 10px;
       font-family: 'NanumGothic';
       color: #b5c7da;
   }
   
   #nav_info {
       position: absolute;
       right: 0px;
       padding: 10px 30px;
       text-align: right;
       font-size: 12px;
       font-family: 'NanumGothic';
       color: #222222;
   }
   
   #nav_info img {
       margin: -2px 0px 0px 0px;
   }
   
   #content {
       display: table-cell;
       position: relative;
       width: 834px;
       margin-top: 40px;
       padding-bottom: 50px;
   }
   
   #content section#main {
       width: 791px;
   }
   #content article {
       float: left;
   }
   
   #title {
       text-align: center;
       border-bottom: 2px #dddddd solid;
       width: 758px;
       margin: 0 auto;
       padding-top: 70px;
   }
   
   #title.no_border {
       border: none;
   }
   
   #title h1 { font-size: 30px;
       font-family: 'NanumGothicBold';
       font-weight: bold;
       color: #222222;
       margin: 0 0; }
   
   #title p {
       font-size: 16px;
       font-family: 'NanumGothic';
       color: #222222;
       line-height: 1.4em;
       margin: 0px;
       margin-bottom: 10px;
       height: 175px;
       margin-top: 10px;
   }
   
   #title p.title0201 { background: url(../img/subtitleBg_0201.png) center bottom no-repeat; }
   #title p.title0202 { background: url(../img/subtitleBg_0202.png) center bottom no-repeat; }
   #title p.title0203 { background: url(../img/subtitleBg_0203.png) center bottom no-repeat; }
   #title p.title0301 { background: url(../img/subtitleBg_0301.png) center bottom no-repeat; }
   #title p.title0101 { background: url(../img/subtitleBg_0101.png) center bottom no-repeat; }
   #title p.title0102 { background: url(../img/subtitleBg_0102.png) center bottom no-repeat; }
   #title p.title0103 { background: url(../img/subtitleBg_0103.png) center bottom no-repeat; }
   #title p.title0104 { background: url(../img/subtitleBg_0104.png) center bottom no-repeat; }
   #title p.title0105 { background: url(../img/subtitleBg_0105.png) center bottom no-repeat; }
   
   
   #title p span {
       font-size: 16px;
       font-family: 'NanumGothic';
       font-weight: bold;
       color: #00ade2;
   }
   
   #title .img_box {
       padding-top: 13px;
   }
   
   #title .img_title {
       position: absolute;
       top: 54px;
       width: 100%;
   }
   
   #title .img_title h1 {
       margin: 0px;
       font-size: 52px;
       font-family: 'NanumGothic';
       font-weight: bold;
       font-style: italic;
       color: #222222;
       line-height: 58px;
   }
   
   .index_content #title .img_title h1 {
     position: relative;
   }
   
   #title .img_title span {
       border-bottom: 3px solid #222222;
   }
   
   #title .img_title p {
       font-size: 16px;
       font-family: 'NanumGothic';
       font-style: italic;
       color: #222222;
       margin-top: 25px;
       height: auto;
       line-height: 30px;
       
   }
   
   #description {
       width: 718px;
       margin: 0 auto;
       font-size: 12px;
       font-family: 'NanumGothic';
       font-weight: normal;
       color: #222222;
       line-height: 1.8em;
       margin-top: 30px;
       text-align: left;
       word-spacing: -0.08em;
   }
   
   #description.no_border {
       margin-top: 0px;
   }
   
   #description .img_box {
       margin: 0 auto;
       padding: 10px 0px;
       text-align: center;
   }
   
   
   #description .img_box .img_companysummary {
       content:url('../img/img_companysummary.png');
   }
   
   #description .img_box .img_organizationChart {
       content:url('../img/img_organizationChart.png');
   }
   
   #description .contact_info .contact_info_box {
       border-top: 2px solid #e5e5e5;
       border-bottom: 1px solid #e5e5e5;
       margin-top: 10px;
   }
   
   #description .contact_info .contact_info_box th {
       background-color: #f7f7f7;
       width: 100px;
       text-align: center;
   }
   
   #description .contact_info .contact_info_box td {
       padding: 20px 0px 20px 10px;
   }
   
   #description .contact_info .contact_info_box li {
       padding: 0px;
   }
   
   #description .contact_info .contact_info_box .bus_info {
       border-bottom: 1px solid #d5d5d5;
   }
   
   #description .contact_info .contact_info_box .icon {
       display: inline-block;
       height: 25px;
       padding-left: 25px;
   }
   
   #description .contact_info .contact_info_box .icon.bus_green {
       background:url(../img/bus_green.png) 5px 3px no-repeat;
   }
   
   #description .contact_info .contact_info_box .icon.bus_blue {
       background:url(../img/bus_blue.png) 5px 3px no-repeat;
   }
   
   #description .contact_info .contact_info_box .icon.bus_red {
       background:url(../img/bus_red.png) 5px 3px no-repeat;
   }
   
   #description .contact_info .contact_info_box .icon.sub_green {
       background:url(../img/subway_green.png) 5px 3px no-repeat;
   }
   
   #description .contact_info .contact_info_box .icon.sub_red {
       background:url(../img/subway_red.png) 5px 3px no-repeat;
   }
   
   #description .contact_info .contact_info_box .icon.bus_red.indent {
       margin-left: 168px;
   }
   
   
   #description .recruit_info, #description .info_list, #description .system_list {
       margin-top: 20px;
       list-style: inside;
       list-style-type: square;
   }
   
   #description .info_list li {
       padding-bottom: 40px;
   }
   
   #description .info_list :last-child {
       padding-bottom: 0px;
   }
   
   #description li strong {
       margin-left: -2px;
   }
   
   #description .info_list p {
       margin: 0px;
       padding-left: 14px;
   }
   
   #description .info_list ol {
       overflow: hidden;
       margin-top: 10px;
       padding-left: 14px;
       height: 97px;
   }
   
   #description .info_list ol li {
       height: 97px;
       float: left;
       padding: 0px;
   }
   
   #description .info_list ol li div {
       float: left;
       width: 99px;
       height: 97px;
       background:url(../img/img_recruit.png) no-repeat;
   }
   
   #description .info_list ol li .next1 {
       float: left;
       width: 20px;
       height: 97px;
       background:url(../img/img_recruit.png) -612px 0px no-repeat;
   }
   
   #description .recruit_info .flow_1 { background-position: 0px 0px; }
   #description .recruit_info .flow_2 { background-position: -102px 0px; }
   #description .recruit_info .flow_3 { background-position: -203px 0px; }
   #description .recruit_info .flow_4 { background-position: -304px 0px; }
   #description .recruit_info .flow_5 { background-position: -406px 0px; }
   #description .recruit_info .flow_6 { background-position: -508px 0px; } 
   
   
   #description .business_info {
       margin-top: 30px;
       list-style: inside;
       list-style-type: square;
   }
   
   #description .business_info_box {
       padding: 15px 45px;
       width: 530px;
       margin: 0 auto;
   }
   
   #description .business_info_box li {
   }
   
   #description .business_info_box .box {
       width: 140px;
       height: 140px;
       float: left;
       padding: 5px 5px;
       margin-top: 10px;
       line-height: 1.5em;
       letter-spacing: normal;
       word-spacing: normal;
       font-size: 12px;
   }
   
   #description .business_info_box .flow {
       float: left;
       padding: 65px 12px;
       margin-top: 0px;
   }
   
   #description .business_info_box .box span {
       display: table;
       margin: 10px 5px 5px 5px;
   }
   
   #description .business_info_box .box .box_title {
       padding: 10px 0px;
       font-size: 12px;
       font-family: 'NanumGothic';
       font-weight: bold;
       text-align: center;
       background-color: #FFFFFF;
   }
   
   #description .business_info_box .box1 { background-color: #D2E8F6; }
   #description .business_info_box .box2 { background-color: #BDDDF2; }
   #description .business_info_box .box3 { background-color: #9FCCE9; }
   #description .business_info_box .flow_margin { margin-left: 9%; }
   #description .business_info_box .box4 { background-color: #82B8DC; }
   #description .business_info_box .box5 { background-color: #6AA6CB; }
   
   #description .tab_box {
       
   }
   
   #description .tab_box.system_tab {
   }
   
   #description .tab_box .tab {
       float: left;
       padding: 10px 0px;
       text-align: center;
       border: 1px solid #d7d7d7;
       cursor: pointer;
       font-size: 16px;
       font-family: 'NanumGothic';
       font-weight: bold;
       letter-spacing: -1px;
       color: #707070;
   }
   
   #description .tab_box.system_tab .tab {
       width: 49.7%;
   }
   
   #description .tab_box.history_tab .tab {
       width: 33%;
   }
   
   #description .tab_box .tab.active {
       padding: 7px 0px 10px 0px;
       border: 0px solid;
       border-top: 3px solid #184F97;
       color: #184F97;
   }
   
   #description .tab_box .tab1.active {
       border-left: 1px solid #cccccc;
   }
   
   #description .tab_box .tab2.active {
       border-right: 1px solid #cccccc;
   }
   
   #description .history_tab .tab2.active {
       border-right: none;
   }
   
   #description .history_tab .tab3.active {
       border-right: 1px solid #cccccc;
   }
   
   #description .tab_box.system_tab .tab1 {
   }
   
   #description .system_list {
       margin-top: 40px;
   }
   
   #description .system_list ul {
       list-style: inside;
       list-style-type: none;
       text-indent: 10px;
   }
   
   #description .system_list li {
       padding-bottom: 40px;
   }
   
   #description .system_list > :last-child {
       padding-bottom: 0px;
   }
   
   #description .system_list ul li:before {
       content: "-";
       margin-right: 4px;
   }
   
   #description .system_list ul li {
       padding-bottom: 0px;
       padding-left: 14px;
       text-indent: -8px;
   }
   
   #description .system_list .ohmymentor {
       padding: 10px 50px;
       margin-bottom: 10px;
       width: 246px;
       font-size: 16px;
       font-family: 'NanumGothic';
       font-weight: normal;
       border: 5px solid #d5d5d5;
       text-align: center;
       
   }
   
   #description .tab_contents {
       margin-top: 25px;
   }
   
   #description .tab_contents .year_box {
       background:url(../img/img_historyline.png) 160px 0px repeat-y;
   }
   
   #description .tab_contents .year_box.last {
       background: none;
   }
   
   #description .tab_contents .year_box.last:before {
       content: '';
       position: absolute;
       width:700px;
       height: 19px;
       background:url(../img/img_historyline.png) 160px 0px repeat-y;
   }
   
   #description .tab_contents .year_box div {
       display: table-cell;
       padding-bottom: 20px;
   }
   
   
   #description .tab_contents .year_box .year {
       float: left;
       padding: 0px 50px 0px 80px;
       font-size: 16px;
       font-family: 'NanumGothic';
       font-weight: bold;
       letter-spacing: -1px;
       color: #184F97;
   }
   
   #description .tab_contents .year_box .history {
   }
   
   #description .tab_contents .year_box .history ol {
       margin: 0px;
   }
   
   #description .tab_contents .year_box .history li {
       
   }
   
   #description .tab_contents .year_box .history li span {
       padding: 0px 10px;
       font-size: 10px;
       font-family: 'NanumGothic';
       font-weight: normal;
       color: #222222;
   }
   
   #description .instance_list {
       
   }
   
   #description .instance_list li {
       border-bottom: 1px dashed #D5D5D5;
       padding: 30px 0px 30px 0px;
   }
   
   #description .instance_list li .img_box {
       width: 300px;
       float:left;
   }
   
   #description .instance_list li .ex_desc {
       float: left;
       width: 415px;
       padding-top: 0px;
   }
   
   #description .instance_list li .ex_desc h3 {
       display: inline;
       margin: 0px;
       padding: 6px 16px;
       font-size: 11px;
       font-family: 'NanumGothic';
       font-weight: normal;
       color: #FFFFFF;
       background: #6978CB;
       border-radius: 25px;
       letter-spacing: normal;
       word-spacing: normal;
   }
   
   #description .instance_list li .ex_desc h3.title_solution {
       border: 1px solid #6978CB;
       background: #6978CB;
   }
   
   #description .instance_list li .ex_desc h4 {
       margin: 10px 0px 5px 0px;
   }
   
   #description .instance_list li .ex_desc p {
       margin: 0px 0px;
   }
   
   /*
   *  index page
   */
   
   #wrap.index_wrap {
       min-height: initial;
       min-height: auto;
   }
   
   #content.index_content {
       padding-bottom: 0px;
   }
   
   #description.index_section {
       margin: 0px;
       width: 100%;
       
   }
   
   #content.index_content #title {
       width: 100%;
       margin: 0px;
       border-bottom: 0px;
       background-color: #FFF;
       padding-top: 0px;
   }
   
   #description.index_section section {
       float: left;
       position: relative;
       margin: 5px 0px 5px 5px;
       border: 1px solid #d7d7d7;
   }
   
   #description.index_section section h2 {
       margin: 0px;
       font-size: 18px;
       font-family: 'NanumGothic';
       font-weight: bold;
   }
   
   #description.index_section section li:before {
       content: "-";
       margin-right: 4px;       
   }
   
   #description.index_section section a {
       font-weight: bold;
       font-size: 14px;
       font-family: 'NanumGothic';
       color: #222222;
   }
   
   #description.index_section section a.box_link {
       height: 100%;
       width: 100%;
       display: block;
   }
   
   #description.index_section section a:hover {
       text-decoration: underline;
   }
   
   #description.index_section .section1 {
       background-color: #eff2f4;
   }
   
   #description.index_section .section2 {
       background-color: #ffffff;
   }
   
   #description.index_section .section3 {
       background-color: #c8d7e2;
   }
   
   #description.index_section .section3 img {
   }
   
   #description.index_section .section4 {
       background-color: #eff2f4;
   }
   
   #description.index_section .section4 img {
   }
   
   #description.index_section .section3,
   #description.index_section .section4 {
       width: 210px;
       height: 137px;
       text-align: center;
       margin: 6px 0px 0px 6px;
       border: none;
   }
   
   #description.index_section .section3 .bg_img,
   #description.index_section .section4 .bg_img {
       margin-top: 7%;
       width: auto;
   }
   
   #description.index_section section .img_title {
     position: absolute;
     width: 100%;
     text-align: center;
   }
   #description.index_section section .img_title p {
     font-size: 12px;
     font-weight: normal;
   }
   
   #description.index_section .section1 .img_title {
     top: 60%;
   }
   
   #description.index_section .section2 .img_title {
       top: 15%;
   }
   #description.index_section .section2 .img_title h2 {
     margin: 0 auto;
   } 
   
   #description.index_section .section3 .img_title,
   #description.index_section .section4 .img_title {
       bottom: 15%;
   }
   #description.index_section .section3 .img_title h2,
   #description.index_section .section4 .img_title h2 {
     margin: 0 auto;
   }
   
   
   #map_canvas { height: 100% }


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


/* @media only screen and (min-width: 480px) and (max-width: 767px) { */
@media screen and (min-width: 200px) and (max-width: 767px) {
    
    body {
        width: 100%;
        background-color: #FFFFFF;
        overflow: hidden;
    }
    
    img {
        width: 100%;
    }
    
    #wrap {
        background: none;
        min-height: 660px;
    }
    
    header {
        display: block;
        position: static;
        float: none;
        width: auto;
        margin: 0 auto;
        padding: 10px 0%;
        background-color: #FFFFFF;
        border-bottom: 1px solid #dddddd;
        
    }
    
    header #logo {
        border: none;
        /* width: 20%; */
        width: 64px;
        margin: 0 auto;
        padding: 0px 30px;
    }
    
    header .btn_nav {
        z-index: 1000;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 60px;
        height: 64px;
        background-color: #FFFFFF;
    }
    
    header .btn_nav.active {
        background-color: #3f79ad;
    }
    
    header .btn_nav a {
        display: block;
        margin: 20px 0px 0px 11px;
        width: 34px;
        height: 34px;
        background: url(../img/icon_menu_off.png) no-repeat;
        background-size: 100%;
    }
    
    header .btn_nav a.active {
        background: url(../img/icon_menu_on.png) no-repeat;
        background-size: 100%;
    }
    
    header .btn_nav a span {
        width: 0px;
        height: 0px;
        overflow: hidden;
        display:block;
    }
    
    header nav, #companyInfo {
        position: absolute;
        top: 0px;
        left: -180px;
        z-index: 9999;
    }
    
    header nav {
        width: 180px;
        height: 100%;
        background-color: #3f79ad;
    }
    
    header nav dt.m_title {
        display: block;
        background: none;
        font: 20px NanumGothic;
        color: #FFF;
        padding: 22px 0px 11px 11px;
        margin: 0px;
    }
    
    #companyInfo {
        bottom: 0px;
        top: inherit;
        margin: 0px 5px 0px 5px;
        padding-bottom: 25px;
        width: 170px;
    }
    
    #companyInfo .info1 {
      
    }
    
    #nav_info {
        display: none;
    }
    
    #content {
        display: block;
        width: 95%;
        padding-bottom: 20px;
        margin: 25px auto 0px auto;
    }
    
    #title {
        width: 100%;
        padding-top: 0px;
    }
    
    #title p {
        width: 90%;
        margin: 0 auto 10px auto;
        padding: 10px 0px 0px 0px;
        font-size: 14px;
    }
    
    #title .img_box {
        max-width: 242px;
        margin: 0 auto;
    }
    
    #title h1 img {
        width: auto;
    }
    
    #description {
        width: 90%;
    }
    
    #description .img_box {
    }
    
    #description .img_box .img_companysummary {
       content:url('../img/mobileimg_companysummary.png');
       width: 400px;
    }
    
    #description .img_box .img_organizationChart {
       content:url('../img/mobileimg_organizationChart.png');
       width: 400px;
    }
    
    #description .contact_info .contact_info_box th {
        display: block;
        padding: 10px 0px;
        width: 100%;
    }
    
    #description .contact_info .contact_info_box td {
        display: block;
    }
    
    #description .business_info {
    }
    
    #description .business_info_box {
        width: 90%;
        padding: 15px 5%;
    }
    
    #description .business_info_box li {
        display: block;
        float: none;
    }
    
    #description .business_info_box .box {
        float: none;
        margin: 0 auto;
    }
    
    #description .business_info_box .box3 {
    }
    
    #description .business_info_box .box4 {
    }
    
    #description .business_info_box .flow {
        float: none;
        padding: 15px 0px;
        width: 14px;
        height: 21px;
        margin: 0 auto;
    }
    
    #description .business_info_box .flow img {
        transform: rotate(90deg);
        /* Firefox */
        -moz-transform:rotate(90deg);
        /* Safari and Chrome */
        -webkit-transform:rotate(90deg);
        /* Opera */
        -o-transform:rotate(90deg);
        /* IE9 */
        -ms-transform:rotate(90deg);
    }
    
    
    #description .tab_box.system_tab .tab, #description .tab_box.history_tab .tab {
        width: 100%;
        margin: 2px 0%;
    }
    
    #description .tab_box.system_tab .tab.active, #description .tab_box.history_tab .tab.active {
        color: #FFFFFF;
        border: none;
        background-color: #184F97;
    }
    
    #description .tab_contents .year_box {
        background: none;
    }
    
    #description .tab_contents .year_box .year {
        padding: 8px 40px 5px 0px;
        display: block;
        float: none;
    }
    
    #description .tab_contents .year_box .history li {
        padding-left: 20px;
        text-indent: -30px;
    }
    
    #description .tab_contents .year_box.last:before {
        /* content: '';
        position: absolute;
        width: 100%;
        height: 19px;
        background: url(../img/img_historyline.png) 105px 0px repeat-y; */
        background: none;
        width: auto;
    }
    
    #description .info_list ol {
        height: auto;
    }
    
    #description .info_list ol li {
        padding-bottom: 10px;
    }
    
    #description .contact_info .contact_info_box .icon.bus_red.indent{
        margin-left: 0px;
    }
    
    #description .instance_list li .ex_desc {
        width: 100%;
    }
    
    #description .instance_list li .img_box {
        float: none;
        width: auto;
    }
    
    /*
     *  index page
     */
     
    #content.index_content {
        width: 100%;
        margin: 0;
    }
    
    #content.index_content .img_box {
        max-width: 100%;
    }
    
    #content.index_content #title .img_title {
		  width: 100%;
		  top: 5.6%;
    }
    #content.index_content #title .img_title h1 {
      width: 80%;
      margin: 0 auto;
    }
    #content.index_content #title .img_title h1 img {
      width: 100%;
    }
    
    #content.index_content .img_title span {
        border-bottom: 1px solid #222222;
    }
    
    #content.index_content .img_title img {
        width: auto;
    }
    
    #content.index_content .img_title h1 {
        margin: 0px;
        width: 100%;
        font-size: 38px;
        font-family: 'NanumGothic';
        font-weight: bold;
        color: #222222;
    }
    
    #content.index_content section .img_title p {
        margin-top: 3%;
        line-height: 1.5em;
    }
    
    #content.index_content #title .img_box {
    }
    
    #description.index_section .img_title {
        top: 11%;
        /* width: initial; */
        width: 70%;
    }
    
    #description.index_section section,
    #description.index_section .section3, 
    #description.index_section .section4 {
        width: 50%;
        height: auto;
        border: none;
        margin: 0;
    }
    
    #description.index_section section {
      /*margin: 0.5% 0 0 0.5%;*/
     margin: 0;
    }
    
    #description.index_section section a {
        font-size: 75%;
    }
    
    #description.index_section section ul {
        line-height: 130%;
    }
    
    #description.index_section .section1 h2 img {
      width: 37.5%;
    }
    #description.index_section .section2 h2 img {
      width: 26.2195%;
    }
    #description.index_section .section3 h2 {
      width: 20.121%;
    }
    #description.index_section .section4 h2 {
      width: 19.81%;
    }
    #description.index_section .section3 .img_title,
    #description.index_section .section4 .img_title {
      top: 15%;
      width: 100%;
    }
    #description.index_section .section3 .img_title h2,
    #description.index_section .section4 .img_title h2 {
      margin: 0 15%;
    }
    #description.index_section .section3 .img_title h2 img,
    #description.index_section .section4 .img_title h2 img {
      width: 100%;
    }
    
    #description.index_section .section1 .bg_img, #description.index_section .section2 .bg_img {
    }
    
    #description.index_section .section3 .bg_img, #description.index_section .section4 .bg_img {
        margin: 15% 0px 0px 37%;
        padding-bottom: 5%;
        width: 59%;
    }
    
    #description .system_list .ohmymentor {
        width: auto;
        padding: 10px 0px;
    }
}



/*@media screen and (min-width: 768px) and (max-width: 1000px) {*/
@media screen and (min-width: 768px) and (max-width: 1000px) {
        
    body{
        width:100%;
    }
    
    img {
        width: 100%;
    }
    
    #wrap {
        table-layout: fixed;
        background: url(../img/bg_wrap.png) -36px 0px repeat-y;
        min-height: 910px;
    }
    
    header {
        width: 130px;
    }
    
    header #logo {
        padding: 28px;
    }
    
    header nav dt a {
        font-size: 13px;
        font-family: 'NanumGothic';
        padding-left: 7px;
        line-height: 33px;
    }
    
    header nav dd a {
        font-size: 13px;
        font-family: 'NanumGothic';
        padding-left: 14px;
        line-height: 40px;
    }
    
    header nav dd a.active, header nav dd a:hover {
       background:url(../img/menu_on.png) 114px 16px no-repeat;
   }
    
    #content {
        width: 100%;
        padding: 0px 40px 40px 40px;
    }
    
    #nav_info img {
        width:auto;
    }
    
    #content {
        width: 100%;
    }
    
    #title {
        /* width: 540px; */
        width: 100%;
    }
    
    #title h1 img {
        width: auto;
    }
    
    #description {
        /* width: 524px; */
        width: 100%;
    }
    
    #title .img_title span {
        border-bottom: 2px solid #222222;
    }
    
    #title .img_title p {
        font-size: 14px;
        font-family: 'NanumGothic';
        color: #222222;
        margin-top: 20px;
        line-height: 20px;
    }

    #title .img_box {
        max-width: 242px;
        margin: 0 auto;
    }
    
    #content.index_content .img_box {
        max-width: 100%;
    }
    
    #description .img_box {
        max-width: 545px;
        margin: 0 auto;
    }
    
    #description .instance_list li .img_box {
        float: none;
    }
    
    #description p {
    }
    
    #description .tab_box.history_tab .tab {
        width: 32%;
    }
    
    #description .tab_contents .year_box {
        background: url(../img/img_historyline.png) 110px 0px repeat-y;
    }
    
    #description .tab_contents .year_box .year {
        padding: 0px 50px 0px 30px;
    }
    
    #description .tab_contents .year_box .history li {
        padding-left: 20px;
        text-indent: -30px;
    }
    
    #description .tab_contents .year_box.last:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 19px;
        background: url(../img/img_historyline.png) 110px 0px repeat-y;
    }
    
    #description .info_list ol {
        height: auto;
    }
    
    #description .info_list ol li {
        padding-bottom: 10px;
    }
    
    #description .contact_info .contact_info_box .icon.bus_red.indent {
        margin-left: 0px;
    }
    
    #description .business_info_box {
        padding: 15px 10px;
    }
    
    #description .business_info_box .box3 {
        margin-right: 0;
    }
    
    #description .business_info_box .flow_margin {
        margin-left: 10%;
    }
    
    #description .instance_list {
        padding: 0px 0px;
    }
    
    #description .instance_list li .ex_desc {
        width: 100%;
    }
    
    #description .section1,
    #description .section2 {
        width: 285px;
    }
    
    section#sub .img_width_50 {
        width: 50%;
    }
    
    section#sub .img_width_25 {
        width: 25%;
    }
    
    /*
     *  index page
     */
    
    #wrap.index_wrap {
        min-height: initial;
        min-height: auto;
    }
    
    #content.index_content {
        padding: 0px;
    }
    
    #content.index_content #title {
    }
    
    #content.index_content #title .img_title h1 {
        margin: 0px;
        width: 100%;
    }
    
    #content.index_content #title .img_title img {
        width: auto;
    }
    
    #description.index_section section .img_title img {
      width: auto;
    }
    #description.index_section section,
    #description.index_section .section3, 
    #description.index_section .section4 {
        width: 48.8%;
        height: auto;
        margin: 5px 0px 0px 5px;
    }
    #description.index_section .section3, 
    #description.index_section .section4 {
        margin: 5px 0px 5px 6px;
    }
    
    #description.index_section .section1 .img_title,
    #description.index_section .section2 .img_title {
    }
    
    #description.index_section .section3 .bg_img, #description.index_section .section4 .bg_img {
        margin: 11% 0px 0px 57%;
        width: 36%;
        padding-bottom: 5%;
    }
    #description.index_section .section3 .img_title, #description.index_section .section4 .img_title {
      bottom: 60%;
    }
    #description.index_section .section3 .img_title h2,
    #description.index_section .section4 .img_title h2 {
     margin: 0 10%;
     text-align: left;
   }
}

/* @media only screen and (min-width: 35em) { */
@media screen and (min-width: 1000px) {
    /* Style adjustments for viewports that meet the condition */
   
}
/*
@media only screen and (min-width: 1176px) {
}
@media only screen and (max-width: 767px) {
}

*/

@media screen and (max-device-width: 350px) {
    #title p.title0201, #title p.title0202, #title p.title0203, #title p.title0301, #title p.title0101, #title p.title0102, #title p.title0103, #title p.title0104, #title p.title0105 {
        background-size: 80%;
    }
}

@media screen and (max-device-width: 420px) {
    #description .img_box .img_companysummary, #description .img_box .img_organizationChart {
        width: 90%;
    }
    #content.index_content section .img_title p {
      font-size: 1em;
      margin-top: 1%;
      line-height: 1.1em;
    }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}