.wrapper {position: relative; height: 100%; overflow: hidden;}
header {width:100%; height:80px; position:fixed; top:0px; z-index:99;}
.menu-web {width:100%; position:relative; z-index:11;}
.menu-web h1.logo {width:70px; float:left; text-align:right; margin-top:13px;}
.menu-web h1.logo img.logo-web {display:inline-block;}
.menu-web h1.logo img.logo-mobile {display:none;}
.menu-web nav.navigation {width:780px; position:absolute; left:50%; margin-left:-390px; top:10px;}
.menu-web nav.navigation ul li {width:130px; float:left; text-align:center;}
.menu-web nav.navigation ul li a {width:100%; line-height:52px; text-align:center; display:block; font-size:14px; font-weight:bold; color:#fff;}

span.menu-mobile {display:none;position: absolute; top: 10px; right: 0px; width: 55px; height: 40px; font-size: 0px; line-height: 0; text-indent: 120%; background: url('/images/menu_mobile.png') no-repeat 10px 10px; cursor:pointer;}
header .menu-back-bg {position:absolute; left:0px; bottom:0px; width:100%; height:100%; z-index:10; display:none; border-bottom:1px solid #333; background-color:#fff;}


#sidebar {position: absolute; top: 70px; left: 0; width: 100%; height: 100%; z-index: 25; display: none; border-top:1px solid #333}
#sidebar > ul {list-style: none;}
#sidebar > ul > li {position: relative; float: left; width: 100%;}
#sidebar > ul > li > a {display: block; font-size: 17px; line-height: 17px; font-weight: bold; color: #fff; text-decoration: none; padding: 20px; border-bottom: 1px solid #333;}
#sidebar > ul > li > ul {float:left; width: 100%; list-style: none; display: none; border-bottom: 1px solid #333; padding: 10px 0px;}
#sidebar > ul > li > ul > li {float: left; width: 100%;}
#sidebar > ul > li > ul > li > a {display: block; font-size: 12px; line-height: 12px; font-weight: normal; color: #fff; text-decoration: none; padding: 10px 20px;}

.nav-block {position:absolute; top:0; left:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); text-indent: -150%; margin: 0px; z-index: 20; display: none;}



#content {width:100%; float:left;}
#content .section {width:100%; float:left;}
#content .container {width:950px; margin:0px auto;}

#footer {width:100%; float:left; padding:20px 0px; color:#999; background-color:#333; text-align:right;}
.foot-conts {width:950px; margin:0 auto;}


/* 메인컨텐츠 ***********************************/
#fullscreen {min-height:900px;}
#fullscreen > .container {width:100%; height:100%; min-height:900px; float:left;}
#fullscreen > .container > ul {width:100%; height:100%; float:left;}
#fullscreen > .container > ul > li {width:100%; height:100%; float:left;}

.full-bg-image {width:100%; height:100%; min-height:900px; position:absolute; z-index:-1;}
.full-bg-overlay {width:100%; height:100%; min-height:900px; position:absolute; z-index:0; background:url('/images/overlay-pattern_black.png') repeat;}

.full-visual-text {width:100%; height:100%; position:absolute; z-index:1; text-align:center;}
.full-visual-text h2 {width:100%; float:left; font-size:80px; font-weight:bold; margin-top:200px; color:#fff;}
.full-visual-text span {display:block; font-size:50px;}
.full-visual-text span.main-title {width:100%; float:left; display:block; color:#fff; font-size:25px; font-weight:normal;}

.main-list {width:950px; margin:80px auto 0px; height:300px;}
.main-list ul li {width:304px; float:left; height:300px; margin-left:16px; box-sizing:border-box; overflow:hidden}
.main-list ul li a {display:block; width:304px; height:170px; box-sizing:border-box; overflow:hidden;}
.main-list ul li a.on {border:6px solid #fff;}
.main-list ul li a.on img {margin:-6px;}
.main-list ul li:first-child {margin-left:0px;}

.main-list ul li h3 {font-size:16px; font-weight:normal; color:#fff; text-align:left; line-height:20px; margin-bottom:10px; padding-bottom:10px;}
.main-list ul li p {text-align:left; color:#fff; font-size:12px; line-height:18px; margin-top:10px; font-weight:normal; padding-top:10px;}

.main-box {width:304px; float:left; height:280px; padding:45px 0px 20px 0px; margin-left:16px;}
.main-box:first-child {margin-left:0px;}
/***************************************************/

#sub-visual {width:100%; float:left; height:400px; /*background:url('/images/main_visual_03.jpg') no-repeat center center; background-size:cover;*/ position:relative;}
#sub-visual .sub-visual-img {width:100%; height:400px; position:absolute;z-index:0}
#sub-visual .sub-visual-overlay {width:100%; height:100%; background:url('/images/overlay-pattern_black.png') repeat; position:absolute; top:0; left:0; z-index:1;}
#sub-visual .sub-visual-text {width:100%; text-align:center; position:absolute; top:40%; left:0;  z-index:2; color:#fff; font-size:50px;}

h3.sub-title {width:100%; float:left; font-size:40px; text-align:center; line-height:60px; padding:50px 0px 30px; background:url('/images/sub_title_bg_line.gif') no-repeat center bottom;}


/* Company ***********************************/
#sub-visual .sub-visual-ceo {background:url('/images/sub_visual_company.jpg') no-repeat center center; background-size:cover;}
.ceo-area {width:100%; float:left; margin:50px 0px; font-size:18px; color:#666; line-height:30px; font-weight:normal;}
.ceo-area p {margin-bottom:20px;}
.ceo-area img {display:block; float:right;}
/***************************************************/

/* Business ***********************************/
#sub-visual .sub-visual-business {background:url('/images/sub_visual_business.jpg') no-repeat center center; background-size:cover;}
.business-area {width:100%; float:left; margin:50px 0px; font-size:18px; font-weight:normal;}
.business-area ul li {width:33%; height:300px; float:left; text-align:center;}
.business-area ul li i {font-size:70px; display:block;}
.business-area ul li span {display:block; font-size:18px; margin-top:20px; font-weight:bold;}
.business-area ul li p {text-align:center; margin-top:20px;}
.business-area ul li p span {display:inline-block; font-size:14px; font-weight:normal; color:#666;}

.work-area {width:100%; float:left; margin:50px 0px; font-size:18px; font-weight:normal;}
.work-area ul {width:100%; float:left; border:1px solid #dedede;}
.work-area ul li {float:left; text-align:center; height:230px; background:url('/images/list_arrow.jpg') no-repeat left center;}
.work-area ul li:first-child {background-image:none;}
.work-area ul li.step01 {width:300px;}
.work-area ul li.step02 {width:248px; padding-left:40px; padding-right:20px;}
.work-area ul li.step03 {width:300px; float:right; padding-left:20px;}
.work-area ul li span.number {font-size:16px; display:inline-block; border-bottom:2px solid #b5b5b5; margin-bottom:16px; padding:40px 0 2px; color:#666;}
.work-area ul li span.number strong {color:#b60005; font-weight:normal;}
        
.work-area ul li span.title {display:block; font-size:20px; font-weight:bold;}
.work-area ul li dl {font-size:14px; line-height:25px; text-align:left;}
.work-area ul li dl dd {padding-left:10px; background:url('/images/icon_dot_01.gif') no-repeat left 10px; margin-top:10px;}
.work-area ul li span.text {display:block; font-size:14px; padding:0px 20px; line-height:25px;}

.step-box {width:100%; float:left; margin-bottom:10px;}
/***************************************************/

/* Project ***********************************/
#sub-visual .sub-visual-project {background:url('/images/sub_visual_project.jpg') no-repeat center center; background-size:cover;}
.project-area {width:100%; float:left; margin:50px 0px; font-size:18px; font-weight:normal;}
.project-history {width:100%; float:left; margin-bottom:50px;}
.project-history h3 {width:280px; float:left; font-size:46px;}
.project-history ul {width:670px; float:left; border-top:1px solid #dcdcdc;}
.project-history ul li {padding:15px 0px; border-bottom:1px solid #dcdcdc;}
.project-history ul li h4 {display:inline-block; font-size:16px; color:#444; width:80px;}
.project-history ul li span {display:inline-block; color:#666; font-size:14px; padding-left:10px; background:url('/images/icon_dot_01.gif') no-repeat left 5px;}
/***************************************************/

/* Project ***********************************/
#sub-visual .sub-visual-partner {background:url('/images/sub_visual_partner.jpg') no-repeat top center; background-size:cover;}
.partner-area {width:100%; float:left; margin:50px 0px; font-size:18px; font-weight:normal;}
.partner-list-item {float:left; width:18%; padding:1%;}
.partner-list-item .partner-logo {border:1px solid #e6e6e6; text-align:center;}
.partner-list-item .partner-logo img {width:100%; vertical-align:middle;}
.partner-list-item span {display:block; text-align:center; padding:10px; font-size:13px; color:#666;}
/***************************************************/

/* IBLab ***********************************/
#sub-visual .sub-visual-lab {background:url('/images/sub_visual_blog.jpg') no-repeat center center; background-size:cover;}
.lab-area {width:100%; float:left; margin:50px 0px; font-size:14px; color:#666; line-height:20px; font-weight:normal; min-height:500px;}

.lab-area ul {border-top:2px solid #dedede;}
.lab-area li {width:100%; float:left; border-bottom:1px solid #dedede; padding:20px 0px;}
.lab-area li h4 {font-size:16px;}
.lab-area li p {font-size:13px; margin-top:5px;}

.imagebox {width:20%; float:left; padding:0px 2%;}
.imagebox > img {width:100%;}
.contsbox {width:76%; float:left;}
/***************************************************/

.nav-page-box {width:100%; float:left; margin-top:20px; text-align:center;}
.nav-page-box a {display: inline-block; border: 1px solid #f2f2f2; min-width: 19px; margin-right: 1px; padding: 4px 3px; line-height: 19px; font-size: 12px; font-weight: bold; color:#666; text-decoration:none;}
.nav-page-box a:hover {border: 1px solid #dbdbdb; text-decoration: underline;}
.nav-page-box a.active {border: 1px solid #1091d0; color: #1091d0;}
.nav-page-box a.prev {margin-left: 7px; padding: 9px 6px 6px 16px; border: 1px solid #e9e9e9; font-weight: normal; line-height: 12px; background: url('/images/ico_lft_arr.gif') no-repeat 5px 50%;}
.nav-page-box a.next {margin-left: 7px; padding: 9px 16px 6px 6px; border: 1px solid #e9e9e9; font-weight: normal; line-height: 12px; background: url('/images/ico_rgt_arr.gif') no-repeat 35px 50%;}

@media screen and (max-width:970px) {
    header {position:absolute; height:50px;}
    .menu-web h1.logo {width:50px;}
    .menu-web h1.logo img.logo-web {display:none;}
    .menu-web h1.logo img.logo-mobile {display:inline-block;}
    span.menu-mobile {display: block;}
    header nav.navigation {display: none;}

    #content .container {width:100%;}
    .foot-conts {width:100%; text-align:center; line-height:25px;}

            

    /* 메인컨텐츠 ***********************************/
    #fullscreen, .full-bg-image, .full-bg-overlay  {min-height:1200px;}
    .full-visual-text h2 {font-size:50px; font-weight:bold; margin-top:100px; color:#fff;}
    .full-visual-text h2 span {font-size:32px;}
    .full-visual-text span.main-title {font-size:16px;}
            
    .main-list {width:100%; float:left;}
    .main-list ul li {width:100%; float:left; margin-left:0px;}

    .main-list ul li h3, .main-list ul li a, .main-list ul li p {width:304px; margin:0 auto;}
    /***************************************************/

    #sub-visual, #sub-visual .sub-visual-img {height:185px;}
    #sub-visual .sub-visual-text {font-size:30px;}
    h3.sub-title {font-size:30px;}


    /* Company ***********************************/
    .ceo-area p {padding:0px 20px; font-size:14px;}
    .ceo-area img {margin-right:20px;}
    /***************************************************/

    /* Business ***********************************/
    .business-area ul li {width:100%; height:auto; margin-bottom:50px;}
    .work-area {width:auto; padding:0px 3%;}
    .work-area ul {width:auto;}
    .work-area ul li {background:url('/images/list_arrow_down.jpg') no-repeat center top;}
    .work-area ul li.step01, .work-area ul li.step02, .work-area ul li.step03 {width:100%; height:auto; padding:0px 0px 40px 0px;}
    .work-area ul li.step02 dl {padding-left:20px; padding-right:20px;}
    .step-box {width:auto; overflow:hidden;}
    /***************************************************/

    /* Project ***********************************/
    .project-area {width:auto; padding:0px 20px;}
    .project-history h3 {width:100%; font-size:20px; margin-bottom:10px;}
    .project-history ul {width:100%;}
    .project-history ul li h4 {width:15%; vertical-align:top; font-size:14px;}
    .project-history ul li span {width:80%; vertical-align:top;}
    /***************************************************/

    /* Project ***********************************/
    .project-area {width:auto; padding:0px 20px;}
    .partner-list-item {width:23%}
    /***************************************************/
}    

@media screen and (max-width:620px) {
    .full-visual-text h2 {font-size:40px; font-weight:bold; margin-top:100px; color:#fff;}
    .full-visual-text h2 span {font-size:25px;}
    .full-visual-text span.main-title {font-size:13px;}

    /* Company ***********************************/
    #sub-visual .sub-visual-text {font-size:20px;}
    /***************************************************/

    /* Project ***********************************/
    .partner-list-item {width:48%}
    /***************************************************/

    /* IBLab ***********************************/
    .imagebox {display:none;}
    .contsbox {width:100%;}
    /***************************************************/
}