@charset "UTF-8";
@font-face {
    font-family: 'SuncheonB';
    src: url('../fonts/SuncheonB.eot');
    src: url('../fonts/SuncheonB.eot?#iefix') format('embedded-opentype'),
            url('../fonts/SuncheonB.woff2') format('woff2'),
            url('../fonts/SuncheonB.woff') format('woff'),
            url('../fonts/SuncheonB.ttf') format('truetype'),
            url('../fonts/SuncheonB.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SuncheonR';
    src: url('../fonts/SuncheonR.eot');
    src: url('../fonts/SuncheonR.eot?#iefix') format('embedded-opentype'),
            url('../fonts/SuncheonR.woff2') format('woff2'),
            url('../fonts/SuncheonR.woff') format('woff'),
            url('../fonts/SuncheonR.ttf') format('truetype'),
            url('../fonts/SuncheonR.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body {
    height:100%;
    margin:0;
    padding:0;
}
body { position:relative; }
div, table {
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
ol, ul, li {
    margin:0;
    padding:0;
    list-style:none;
}
p {
    margin:0;
    padding:0;
}
.blind{
    position:absolute;
    left:-9999em;
}
.clear:after{
    content:'';
    display:block;
    clear:both;
}
.up { color:#d80a0a; }
.down { color:#002269; }
.same { color:#1D9D5C; }
.contents_container {
    margin:0 auto;
    max-width:1280px;
    font-family:"SuncheonR", "맑은 고딕", "나눔고딕", sans-serif; font-size:16px;
    color: #333;
    text-align:center;
    background:#fff;
}

.section{
    position:relative;
}
#main_about, #main_business{
    color:#FFF;
    background:#000;
}
.pc_con { display:block; }
.mob_con, .mob_gnb, .mob_list { display:none; }
/* service : 로고 */
.nav_wrap{
    position:relative;;
    width:1280px;
    margin:0 auto;
}
.gsifn_logo{
    position:absolute;
    left:2%;
    top:-15px;
    width:auto;
    z-index:9980;
}
.gsifn_logo>a{
    display:block;
}
.gsifn_logo>a>img{
    width:auto;
    height:110px;
}

/* service : 탑메뉴 및 내비게이션 */
#gnb{
    position:fixed;
    top:5%;
    left:0;
    width:100%;
    height:100px;
    z-index:9950;
}
.top_nav{
    position:absolute;
    top:20px;
    right:0;
    padding-left:220px;
    text-align:center;
    z-index:9999;
}
.top_nav li{
    display:inline-block;
    height:21px;
    margin-left:120px;
}
.top_nav a {
    position:relative;
}
.top_nav a>img{
    height:18px;
}
.top_nav li>a:after{
    position:absolute;
    bottom:-20px;
    left:50%;
    content:'';
    display:block;
    width:42px;
    height:8px;
    background:url('../images/menu_ub.png') no-repeat center center;
    background-size:cover;
    transition:0.5s;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
}
.top_nav li>a.on:after{
    opacity: 1;
}
.top_nav li>a:hover:after{
    opacity: 1;
}

/* service : 스크롤 */
.bottom_scroll {
    position:absolute;
    bottom:0;
    padding-bottom:45px;
    background:url('../images/scroll_shape.gif') no-repeat center 47px;
    animation-name:upDownButton;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-delay:2s;
}
#main_about .bottom_scroll, #main_business .bottom_scroll  { background-image:url('../images/scroll_shape_w.png'); }
@keyframes upDownButton {
    0%{
        background-position:center 47px;
    }
    50%{
        background-position:center 27px;
    }
    100%{
        background-position:center 47px;
    }
}

/* ******* ABOUT ******* */
/* about : 로고 */
#logo_bottom {
    position:absolute;
    bottom:40px;
    left:50px;
    width:115px;
    z-index:9980;
}
#logo_bottom>a{
    position:absolute;
    left:-25px;
    bottom:-10px;
    width:170px;
    font-size:32px;
    color:#05ddc8;
    background:#fff;
    text-decoration:none;
}

#logo_bottom.on { display:none; }
.gsifn_logo {
    position:absolute;
    width:auto;
    left:5%;
    z-index:9980;
}
#main_top .gsifn_logo {
    left:40px;
    bottom:0px;
    width:100px;
    height:200px;
}
#main_about .gsifn_logo, #main_business .gsifn_logo { top:3%; }
.gsifn_logo>a { display:block; }
.gsifn_logo>a>img {
    width:auto;
    height:100px;
}

/* about : 큰 미니(?) 메뉴 */
.mini_menu{
    display:none;
    position:absolute;
    left:0;
    top:0;
    height:70vh;
    background:#000;
    z-index:9999;
}
.mini_menu ul{
    position:absolute;
    top:50%;
    right:220px;
    z-index:9999;
    transform:translateY(-50%);
}
.mini_menu li{
    width:340px;
    height:50px;
    margin-bottom:7vh;
    text-align:right;
    transition:0.7s;
    background-size:auto 40px;
}
.mini_menu li:last-child{
    margin:0;
}
.mini_menu li>a{
    display:block;
    height:50px;
}
.mini_menu #x_icon{
    position:absolute;
    top:50px;
    right:50px;
    width:36px;
    height:36px;
    cursor:pointer;
    transition:0.7s;
}
.mini_menu #x_icon:hover{
    -ms-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}
.mini_menu li:nth-of-type(1){
    background:url(../images/mini_about_c.png) no-repeat right top;
}
.mini_menu li:nth-of-type(1).on{
    background-image:url(../images/mini_about_c.png);
}
.mini_menu li:nth-of-type(2){
    background:url(../images/mini_service.png) no-repeat right top;
}
.mini_menu li:nth-of-type(2).on{
    background-image:url(../images/mini_service_c.png);
}
.mini_menu li:nth-of-type(3){
    background:url(../images/mini_works.png) no-repeat right top;
}
.mini_menu li:nth-of-type(3).on{
    background-image:url(../images/mini_works_c.png);
}
.mini_menu li:nth-of-type(4){
    background:url(../images/mini_contact.png) no-repeat right top;
}
.mini_menu li:nth-of-type(4).on{
    background-image:url(../images/mini_contact_c.png);
}
.mini_menu li:nth-of-type(n){
    background-size:auto 50px;
}

/* about : 첫 페이지 */

#main_top{
    background:url(../images/bg_main_b.png) no-repeat left bottom;
    background-size:cover;
}
#main_top>div{
    background:url(../images/bg_main.png) no-repeat left 22vh;
    background-size:92% 75vh;
}
#main_top .top_menu {
    position:absolute;
    top:0;
    padding-top:35px;
    background:url('../images/menu_shape.gif') no-repeat center -22px;
}
#main_top .top_menu.on{
    animation-name:downMenu;
    animation-duration:1s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
#main_top .top_menu.off{
    animation-name:upMenu;
    animation-duration:1s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
#main_top .top_menu>img{
    cursor:pointer;
    padding:10px 15px;
}
@keyframes downMenu {
    0%{
        background-position:center -22px;
    }
    100%{
        background-position:center -40px;
    }
}
@keyframes upMenu {
    0%{
        background-position:center -40px;
    }
    100%{
        background-position:center -22px;
    }
}
#show_index {
    display:inline-block;
    position:absolute;
    left:50%;
    top:50%;
    width:auto;
    transform:translateX(-50%) translateY(-50%);
}
.index_name, .index_time, .index_updown {
    position:absolute;
    width:auto;
    font-size:19px;
    font-weight:bold;
    color:#000;
}
.index_name {
    top:-36px;
    left:0px;
}
.index_time {
    bottom:-36px;
    right: 0px;
}
.index_updown {
    top:-36px;
    right:0px;
}
#contact_icon {
    position:absolute;
    bottom:40px;
    /* right:-258px; */
    right:0px;
    width:310px;
    height:160px;
    transition:0.8s;
    z-index:10;
}
#contact_icon>div {
    position:absolute;
    /* right:-136px; */
    right:0;
    width:auto;
    margin-bottom:10px;
    padding:10px 0 10px 20px;
    padding-right:20px;
    transition:0.7s;
}
#contact_icon>.phone.on, #contact_icon>.fax.on{
    right:0px;
    transition:0.7s;
}
#contact_icon>.location.on{
    right:0px;
    transition:1s;
}
.phone { top:0; }
.fax { top:53px; }
#contact_icon>.location{
    top:106px;
    right:0px;
}
#contact_icon>div:last-child { margin-bottom:0px; }
#contact_icon>div>img:first-child { margin-right:20px; }
#contact_icon>div:hover{ right:0px !important; }

/* sample / datocoli */
.btn_service{
    position:absolute;
    left:0;
    top:50%;
    margin-top:27vh;
    padding:0 52% 0 8%;
}
.btn_service>div{
    float:left;
    width:45%;
}
.btn_service>div>a{
    display:block;
    border:1px solid #ccc;
    padding:15px 0px;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    transition:0.5s;
    /* background:url(../images/btn_go.png) no-repeat 210px center; */
}
.btn_service>div>a:hover, .btn_service>div>a:focus{
    border:1px solid #05ddc8;
    color:#fff;
    background-color:#05ddc8;
}
.ir_sample { margin-right:10%; }

/* naver, tistory */
.etc_site{
    width:120px;
    position:absolute;
    left:8%;
    top:50%;
    margin-top:38vh;
}
.icon_naver, .icon_tistory{
    float:left;
    width:50px;
}
.icon_naver { margin-right:20px; }
.icon_naver>a{
    background:url(../images/icon_naver.png) no-repeat center;
}
.icon_naver>a:hover{
    background:url(../images/icon_naver_c.png) no-repeat center;
}
.icon_tistory>a{
    background:url(../images/icon_tistory.png) no-repeat center;
    background-size:contain;
}
.icon_tistory>a:hover{
    background:url(../images/icon_tistory_c.png) no-repeat center;
}
.icon_naver>a, .icon_tistory>a{
    display:block;
    height:50px;
    width:50px;
    transition:0.5s;
    background-size:contain;
}

/* main font */
.font_main{
    position:absolute;
    top:50%;
    left:5%;
    margin-top:-150px;
}
.font_sub{
    position:absolute;
    top:50%;
    left:5%;
    margin-top:60px;
    color:#fff;
    font-size:25px;
    font-weight:bold;
    text-align:left;
}

/* bar */
.empty_bar{
    width:6px;
    height:23vh;
    position:absolute;
    left:5%;
    bottom:0;
    background:#05ddc8;
}

/* about : GSIFN 소개 */
.menu_ex { margin-bottom:-40px; }
.menu_ex>div {
    float:left;
    text-align:left;
}
.about_title {
    width:40%;
    margin-left:5%;
}
.about_title>img {
    width:auto;
    height:46px;
}
.about_desc {
    width:45%;
    margin-left:5%;
    margin-right:5%
}
.about_desc p {
    margin-bottom:15px;
    text-align:left;
    font-weight:bold;
    letter-spacing:0.1em;
}
#main_about .menu_ex p.strong { color:#05ddc8; }

/* about : GSIFN 이니셜 */
#gsifn_init {
    position:absolute;
    top:50%;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
#gsifn_init li {
    position:relative;
    display:inline-block;
    width:200px;
    height:210px;
    vertical-align:top;
    overflow:hidden;
    transition:0.7s;
    cursor:pointer;
}
#gsifn_init li:first-child { background:url(../images/about_g.png) no-repeat top center; }
#gsifn_init li:nth-of-type(2) { background:url(../images/about_s.png) no-repeat top center; }
#gsifn_init li:nth-of-type(3) { background:url(../images/about_i.png) no-repeat top center; }
#gsifn_init li:nth-of-type(4) { background:url(../images/about_f.png) no-repeat top center; }
#gsifn_init li:nth-of-type(5) { background:url(../images/about_n.png) no-repeat top center; }
#gsifn_init li:first-child:hover { background-image:url(../images/about_g_c.png); }
#gsifn_init li:nth-of-type(2):hover { background:url(../images/about_s_c.png) no-repeat top center; }
#gsifn_init li:nth-of-type(3):hover { background:url(../images/about_i_c.png) no-repeat top center; }
#gsifn_init li:nth-of-type(4):hover { background:url(../images/about_f_c.png) no-repeat top center; }
#gsifn_init li:nth-of-type(5):hover { background:url(../images/about_n_c.png) no-repeat top center; }
#gsifn_init li:after{
    content:'';
    position:absolute;
    top:0%;
    left:50%;
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    transition:0.7s;
    background-color:rgba(255, 255, 255);
}
#gsifn_init li:first-child:after{
    background:url(../images/guaranteed.png) no-repeat top center; background-color:rgba(255, 255, 255, 0.8);
}
#gsifn_init li:nth-of-type(2):after{
    background:url(../images/specific.png) no-repeat top center; background-color:rgba(255, 255, 255, 0.8);
}
#gsifn_init li:nth-of-type(3):after{
    background:url(../images/interactive.png) no-repeat top center; background-color:rgba(255, 255, 255, 0.8);
}
#gsifn_init li:nth-of-type(4):after{
    background:url(../images/flexible.png) no-repeat top center; background-color:rgba(255, 255, 255, 0.8);
}
#gsifn_init li:nth-of-type(5):after{
    background:url(../images/nodes.png) no-repeat top center; background-color:rgba(255, 255, 255, 0.8);
}
#gsifn_init li.active:after { opacity:1; }
#gsifn_init li:nth-of-type(5).on:before{
    content:'';
    position:absolute;
    right:35px;
    bottom:90px;
    width:8px;
    height:10px;
    background:#333;
    z-index:999;
    animation-name:cursor;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes cursor {
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/* about : 사업파트 */
#main_business{
    position:relative;
    background:#000;
}
.business_part{
    position:absolute;
    left:0px;
    width:85%;
    height:20vh;
    border:2px solid #535353;
    box-sizing:border-box;
}
.business_title{
    position:absolute;
    bottom:calc(64vh + 30px);
    left:5%;
    width:auto;
    text-align:left;
}
.business_title>img {
    width:auto;
    height:46px;
}
.business_cover {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    z-index:1;
}
.business_logo {
    position:absolute;
    top:50%;
    right:60px;
    width:auto;
    height:
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    z-index:9980;
}
#irio {
    bottom:calc(42vh + 30px);
    background:url("../images/ir_io_bgimg.png") center center;
}
#datocoli {
    bottom:calc(21vh + 30px);
    background:url("../images/datocoli_bgimg.png") center center;
}
#onedu {
    bottom:30px;
    background:url("../images/onedu_bgimg.png") no-repeat center center;
    background-size:cover;
}
.business_ex {
    position:absolute;
    top:-2px;
    left:-2px;
    width:calc(100% + 4px);
    height:20vh;
    border:2px solid #05ddc8;
    padding-left:40px;
    box-sizing:border-box;
    text-align:left;
    color:#FFF;
    background:#000;
    z-index:9980;
    opacity: 0;
    transition:0.7s;
}
.business_ex h3 {
    margin:2vh 0;
    font-size:22px;
    font-weight:bold;
    color:#05DDC8;
}
.business_ex p {
    font-size:15px;
    font-weight:400;
    line-height:3.5vh;
}
.business_ex a{
    display:inline-block;
    position:absolute;
    width:124px;
    height:27px;
    right:5%;
    top:50%;
    text-indent:-9999em;
    transform:translateY(-50%);
    background:url(../images/btn_more_info.png) no-repeat center;
    background-size:cover;
    transition:0.7s;
}
.business_ex a.on{
    background-image:url(../images/btn_more_info_c.png);
}
.business_part:hover>.business_ex { opacity: 1;}
#to_top {
    display:none;
    position:absolute;
    right:5%;
    bottom:5%;
    width:auto;
    cursor:pointer;
    z-index:10;
}

/* ******* SERVICE ******* */
/* service : 메인 서비스 */
#main_service{
    position:relative;
    height:700px;
}
.online_service { margin-bottom:-40px; }
#main_service h2{
    margin:0 0 20px 2%;
    text-align:left;
}
#main_service h2>img {
    width:auto;
    height:46px;
}
#main_service .online_service>div{
    width:48%;
    height:45vh;
    margin-left:2%;
    vertical-align:top;
    transition:0.8s;
}
#main_service .online_service>div.data_coli{
    margin-left:0;
    margin-right:2%;
}
#main_service .ir_io{
    float:left;
    background:url("../images/gsifn_website_service_irio_bw.jpg") no-repeat center;
}
#main_service .data_coli {
    float:right;
    background:url("../images/gsifn_website_service_datocoli_bw.jpg") no-repeat center;
}
#main_service .ir_io:hover{
    background:url("../images/gsifn_website_service_irio_colour.jpg") no-repeat center;
}
#main_service .data_coli:hover{
    background:url("../images/gsifn_website_service_datocoli_colour.jpg") no-repeat center;
}
.ir_io>a, .data_coli>a{
    position:relative;
    display:block;
    height:100%;
}
.ir_io>a>img, .data_coli>a>img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}

/* service : IR 콘셉트 */
.ir_io>img {
    height:70px;
}
#ir_concept{
    height:700px;
}
.ir_io{
    width:96%;
    margin:0 auto;
}
#ir_concept3{
    position:relative;
    margin-top:20px;
}
#ir_concept3>ul{
    width:96%;
    margin:0 auto;
}
#ir_concept3>ul:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.4);
    z-index:10;
}
#ir_concept3 li{
    position:relative;
    float:left;
    margin:0;
    width:33.33%;
    height:30vh;
    background-position:center;
    background-size:auto 400px;
    background-repeat:no-repeat;
}
#ir_concept3 li:nth-child(1){
    background-image:url("../images/gsifn_website_service_irio_start.jpg");
}
#ir_concept3 li:nth-child(2){
    background-image:url("../images/gsifn_website_service_irio_newname.jpg");
}
#ir_concept3 li:nth-child(3){
    background-image:url("../images/gsifn_website_service_irio_end.jpg");
}
#ir_concept3 li:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(6, 221, 200,0.8);
    opacity:0;
    transition:0.5s;
    z-index:15;
}
#ir_concept3 li.active:before{
    opacity:1;
}
#ir_concept3 li>span{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    transform:translateX(-50%) translateY(-50%);
    color:#000;
    font-size:21px;
    font-weight:bold;
    z-index:20;
    transition:0.5s;
}
#ir_concept3 li>span.active{
    color:#fff;
}
.description_wrap{
    position:relative;
    width:96%;
    height:165px;
    margin:0 auto -40px auto;
}
.ir_description, .ir_description2, .ir_description3{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:0.7s;
}
.ir_description.active, .ir_description2.active, .ir_description3.active{
    top:0%;
    opacity:1;
}
.ir_description>h2, .ir_description2>h2, .ir_description3>h2{
    font-size:29px;
    font-weight:700;
    text-align:left;
    margin:30px 0;
}
.ir_description>p, .ir_description2>p, .ir_description3>p{
    font-size:14px;
    font-weight:bold;
    text-align:left;
}
.ir_description>p:nth-of-type(1), .ir_description2>p:nth-of-type(1), .ir_description3>p:nth-of-type(1){
    margin-bottom:20px;
}
.ir_description>p:nth-of-type(2), .ir_description2>p:nth-of-type(2), .ir_description3>p:nth-of-type(2){
    color:rgb(6, 221, 200);
}

/* service process */
.process{
    text-align:left;
    margin-bottom:20px;
    margin-left:2%;
}
.process>img { height:46px; }
.process_wrap{width:96%; margin:0 auto -80px auto;}
.process_wrap>div{
    position:relative;
    float:left;
    width:calc(100% / 7);
    height:350px;
}
.process_wrap>div:before{
    content:'';
    position:absolute;
    left:50%;
    width:0;
	height:0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
    transform:translateX(-50%) translateY(50%);
    z-index:10;
}
.process_wrap>div:nth-child(2n):before{
    bottom:50%;
    border-bottom: 10px solid #ccc;
    transform:translateX(-50%) translateY(-50%);
}
.process_wrap>div:nth-child(2n-1):before{
    top:50%;
    border-top: 10px solid #6b6b6b;
    transform:translateX(-50%) translateY(50%);
}
.process_wrap>div:after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:90%;
    height:10px;
    transform:translateX(-50%) translateY(-50%);
    background:#6b6b6b;
}
.process_wrap>div:nth-child(2n):after { background:#ccc; }
.process_wrap>div>img, .process_wrap>div>div{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    z-index:10;
}
.process_wrap>div>div { font-weight:600; }
.process_wrap>div>div:before{
    content:'';
    position:absolute;
    left:50%;
    width:70px;
    height:70px;
    border:2px solid #4d4d4d;
    border-radius:35px;
    background:transparent;
    z-index:5;
}
.process_wrap>div:nth-child(2n-1)>div:before{
    top:0;
    transform:translateX(-50%) translateY(-217px);
}
.process_wrap>div:nth-child(2n)>div:before{
    bottom:0;
    transform:translateX(-50%) translateY(217px);
}
.process_wrap>div>div:after{
    content:'';
    position:absolute;
    left:50%;
    width:2px;
    height:4.5vh;
    background:#4d4d4d;
}
.process_wrap>div:nth-child(2n-1)>div:after{
    top:0;
    transform:translateX(-50%) translateY(-120px);
}
.process_wrap>div:nth-child(2n)>div:after{
    bottom:0;
    transform:translateX(-50%) translateY(110px);
}
.process_wrap>div:nth-of-type(2n-1)>img{
    height:35px;
    top:26px;
}
.process_wrap>div:nth-of-type(2n)>img{
    height:35px;
    bottom:26px;
}
.process_wrap>div:nth-of-type(2n-1)>div{
    top:50%;
    transform:translateX(-50%) translateY(50px);
}
.process_wrap>div:nth-of-type(2n)>div{
    bottom:50%;
    transform:translateX(-50%) translateY(-50px);
}
.off{
    opacity: 1;
    transition:0.7s;
    transition-delay: 0.5s;
}
.pro_color{
    opacity:0;
    transition:0.7s;
    transition-delay: 0.5s;
}
.contract>.pro_color { transition-delay: 1s; }
.request>.pro_color { transition-delay: 1.5s; }
.schedule>.pro_color { transition-delay: 2s; }
.design>.pro_color { transition-delay: 2.5s; }
.deliver>.pro_color { transition-delay: 3s; }
.open>.pro_color { transition-delay: 3.5s; }
.contract>.gre_color { transition-delay: 1s; }
.request>.gre_color { transition-delay: 1.5s; }
.schedule>.gre_color { transition-delay: 2s; }
.design>.gre_color { transition-delay: 2.5s; }
.deliver>.gre_color { transition-delay: 3s; }
.open>.gre_color { transition-delay: 3.5s; }
.pro_color.on { opacity:1; }
.gre_color.off { opacity:0; }

/* IR I/O */
.ir_io2{
    position:relative;
    width:96%;
    margin:0 auto -40px auto;
    min-height:55vh;
    background:url(../images/gsifn_website_service_irio_sample_page_bg.jpg) no-repeat center;
}
.ir_io2:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    opacity: 0.5;
    z-index:5;
}
.ir_io2>div:nth-child(1){
    position:absolute;
    top:calc(50% - 170px);
    left:0;
    z-index:10;
}
.ir_io2>div:nth-child(2){
    position:absolute;
    bottom:4vh;
    left:0;
    z-index:10;
}
.ir_io2>div:nth-child(2)>div{
    position:relative;
    float:left;
    width:calc(82% / 3);
    min-height:260px;
    margin:0 3%;
    text-align:center;
    background:#fff;
}
.ir_io2>div:nth-child(2) h2{
    margin-top:30px;
    margin-bottom:15px;
    font-size:26px;
    font-weight:bold;
}
.ir_io2>div:nth-child(2) ul { margin-bottom:30px; }
.ir_io2>div:nth-child(2) ul li{
    position:relative;
    margin-bottom:5px;
    font-size:15px;
}
.ir_io2>div:nth-child(2) ul li:before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    height:6px;
    width:6px;
    border-radius: 3px;
    background:#333;
    transform:translateX(-50px) translateY(-50%);
}
.ir_io2>div:nth-child(2)>.disclosure ul li:before{
    transform:translateX(-72px) translateY(-50%);
}
.ir_io2>div:nth-child(2) p{
    position:absolute;
    width:70%;
    bottom:20px;;
    left:50%;
    transform:translateX(-50%);
}
.ir_io2>div:nth-child(2) p>a{
    display:block;
    padding:10px 0;
    border:2px solid #222;
    box-sizing: border-box;
    font-size:15px;
    font-weight:bold;
    color:#000;
    transition:0.5s;
}
.ir_io2>div:nth-child(2) p>a:hover, .ir_io>div:nth-child(2) p>a:focus{
    text-decoration: none;
    background:#05ddc8;
    color:#fff;
    border:2px solid #05ddc8;
}
.ir_io2>p:nth-child(3){
    position:absolute;
    bottom:-50px;
    left:50%;
    width:100%;
    line-height:50px;
    background:#000;
    color:#fff;
    font-size:14px;
    z-index:10;
    cursor:pointer;
    transform:translateX(-50%);
}
.download{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:1px solid #222;
    background:#fff url(../images/service_download_icon.png) no-repeat center;
    box-sizing:border-box;
    opacity:0;
    transition:0.7s;
    cursor:pointer;
    text-indent:-9999em;
}
.download:hover { opacity:1; }

/* ******* WORKS ******* */
/* partners */
#partners{
    position:relative;
}
#partners>div{
    overflow:hidden;
}
#partners img:nth-of-type(1){
    width:1240px;
    height:auto;
    opacity: 0.9;
    margin-bottom:-50px;
    transition-property: transform;
    transition-duration: 1s;
    transition-delay: 0.7s;
}
#partners img:last-child{
    position:absolute;
    top:60%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
    opacity:0;
    transition:1s;
}
#partners img:last-child.on{
    top:50%;
    opacity:1;
}

/* client list */
#main_client{
    position:relative;
}
.bg_client_wrap{
    position:relative;
    width:1240px;
    margin:0 auto -50px auto;
}
#main_client img.bg_client{
    width:1240px;
    opacity: 0.9;
}
#main_client2 img.bg_client{
    width:1240px;
    opacity: 0.9;
}
#main_client3 img.bg_client{
    width:1240px;
    opacity: 0.9;
}
.bg_client_wrap:before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgb(204, 204, 204);
    background:rgba(0,0,0,0.6);
    z-index:9920;
}
.client_list{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9960;
    box-sizing:border-box;
}
.client_list:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.5);
    opacity:0;
    transition:0.7s;
    z-index:9970;
}
.client_list.on:before{
    opacity:1;
}
.client_list>li{
    position:relative;
    float:left;
    width:calc(92% / 4);
    height:calc(12.5% - 20px);
    margin:10px 1%;
}
.client_list>li>img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    z-index:9999;
}
.poscointer, .samhwa{height:30px;}

/* navigation button */
#works_main #fp-nav {
    display:none !important;
}

/* ***** CONTACT ***** */
/* contact page 1 */
#map_wrap {
    width:96%;
    margin:0 auto -50px auto;
}
.contact_title {
    text-align:left;
    margin-bottom:20px;
}
.contact_title>img{
    height:40px;
    transform:scale(1.2);
    opacity:0;
    transition:1s;
    transition-delay: 0.3s;
}
.contact_title>img.on{
    opacity:1;
    transform:scale(1);
}
.map>iframe{
    display:block;
    width:100%;
    height:50vh;
}
.contact_info>ul { margin-top:20px; }
.contact_info>ul>li{
    font-size:16px;
    font-weight:bold;
    transform:translateY(100px);
    opacity:0;
    transition-duration:0.7s;
}
.contact_info>ul>li.on {
    opacity:1;
    transform:translateY(0);
}
.contact_info>ul>li.info_fax { text-align:center; }
.info_phone { transition-delay: 0.5s; }
.info_fax { transition-delay: 1s; }
.info_location { transition-delay: 1.6s; }
.info_phone, .info_fax{
    float:left;
    width:28%;
    text-align:left;
}
.info_phone>img, .info_fax>img { padding-right:10px; }
.info_location{
    float:right;
    width:44%;
    text-align:right;
}
.info_location>img, .info_location>address{
    display:inline-block;
    line-height:27px;
}
.info_location>img {
    padding-right:10px;
    vertical-align:top;
}
.info_location>address { margin:0; }

/* contact page 2 */
#send_wrap { margin-bottom:-60px }
#send_que {
    background:#000;
    box-sizing:border-box;
}
#send_que>div>div {
    width:96%;
    margin:0 auto;
}
.contact_title2 { text-align:left; }
.contact_title2>img { height:46px; }
#send_que p{
    margin:2vh 0;
    text-align:left;
    font-size:16px;
    font-weight:bold;
    color:#fff;
}
.qu_info_wrap>div{
    float:left;
    width:calc(94% / 5);
    margin-right:2%;
    border:1px solid #ccc;
    border-radius:5px;
    box-sizing:border-box;
}
.qu_info_wrap>.qu_email { width:calc((94% / 5)*2); }
.qu_info_wrap>.qu_select {
    margin-right:0;
    font-weight:bold;
}
.qu_info_wrap>div>select {
    height:34px;
    color:#666;
}
.qu_info_wrap>.qu_select option{
    height:15px;
    font-weight:bold;
}
.qu_info_wrap>div>input, .qu_info_wrap>div>select{
    border: none;
    padding: 6px 0;
    width: 100%;
    vertical-align: middle;
}
::-webkit-input-placeholder {
    font-weight:bold;
    color:#ccc;
}
:-ms-input-placeholder {
    font-weight:bold;
    color:#ccc;
}
::placeholder {
    font-weight:bold;
    color:#ccc;
}
#comments{
    display:block;
    width:100%;
    height:35vh;
    margin:2vh 0;
    border-radius: 5px;
    padding-top:10px;
}
.send_wrap { text-align:left; }
.send_wrap>input{
    border:2px solid #06ddc8;
    border-radius: 5px;
    padding:8px 15px;
    font-weight:bold;
    color:#06ddc8;
    background-color:transparent;
    transition:0.5s;
}
.send_wrap>input:hover{
    background:#06ddc8;
    color:#fff;
}

/* footer */
footer{
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    height:30px;
    border-top:2px solid #000;
    text-align:center;
}
footer.about_footer{
    position:absolute;
    border:none;
}
footer.service_footer, footer.contact_footer {
    position:absolute;
    width:96%;
    left:2%;
    height:30px;
    border:none;
}
footer>img{
    position:absolute;
    left:50%;
    top:50%;
    height:15px;
    vertical-align:middle;
    transform:translateY(-50%) translateX(-50%);
}