@charset "utf-8";

/*1.공통 스타일
  -기본 여백 제거
  -블릿 기호 제거
        list-style-type:lower-alpha;
        list-style-position: outside;
        list-style-image: url(../img/logo.JPG);
  -텍스트 장식(밑줄) 제거
  -외곽선 (선택자의 면적 안쪽 적용)
*/
*{  margin:0; padding:0; 
    list-style:none;
    text-decoration: none; 
    box-sizing: border-box; 
}
button{ 
    border:0;
    background: none;
    cursor: pointer;
}


/*  ★반응형웹(Section18)

    현재는 다양한 웹 디바이스 환경의 시대입니다.
    웹사이트를 이용하는 사용자 환경은 작게는 모바일에서부터 크게는 데스크탑까지
    스크린의 폭이 다양성을 가지고 있다는 점을 확인 할 수 있습니다.


    | ① |        |   ②   |     |      ③      |
    mobile        tablet           desktop

    ▼
    @media screen and (){    }
    CSS를 처리하는 다양한 미디어 디바이스 환경의 스크린 폭은 and (스크린 폭 조건 지정)


    ※스크린 폭 조건 목록(CSS의 미디어 쿼리, 조건부 CSS) ===============================

    (1)데스크탑(Desktop)- 최소(min) 브라우저의 해상도가 1280px 이상

        @media screen and (min-width:1280px){   css서술   }

    (2)태블릿 (tablet)- 최소(min) 브라우저의 해상도가 500px 이상~
                       최대(max) 브라우저의 해상도가 1280px 이하

        @media screen and (min-width:501px) and( max-width:1279px ){   css서술   }

    (3)모바일 (mobile)- 최대(max) 브라우저의 해상도가 500px 이하

        @media screen and (max-width:500px){   css서술   }

    ★반응형 웹의 궁극적 목적

    : 각 미디어 해상도별 웹사이틀 멋있게 변신이 목적이 아닌
      전 해상도를 통틀어 동일한 정보를 불편함 없이 제공하는것을 목적으로 한다.
*/


@media screen and (min-width:1280px){ /*====desktop=====*/



        /*#header, .gnb, .util*/
        #header{
            position: fixed; left:0; top:0; z-index:1;
            width:100%; height:90px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            /*flex-start, center, flex-end*/
            border-bottom: 1px solid #d9d9d9;
            overflow:hidden;
        }

                #header:hover{
                    height:250px;
                    transition: 0.3s all ease; /*차시 수업 예고*/
                }
                /*
                    JS
                    전역 메뉴의 a태그를 마우스로 오버시(마우스 조작)
                    헤더 영역의 높이값을 증가(슬라이드 애니메이션)-(동작)
                */

        h1{ margin: 27px 0 0 40px; }
        nav{ width:560px; }
        .gnb{ display: flex; }
        .gnb>li{
            flex:1; /*각각의 li들의 너비값을 1:1:1:1 */
            text-align: center;
        }
        .gnb a{ display: block;}
        .gnb>li>a{ 
            width:100%; height:90px;
            line-height: 90px;
            color:#000;
            font-weight: bold;
            font-size:18px;
        }
        .gnb>li>ul a{
            height:50px; line-height: 50px;
            color:rgb(86, 86, 86);
        }
        .util{
        display: flex; 
        margin: 27px 40px 0 0;
        }
        .util li{ margin-left:20px; }



        /*#main, .company, .newest, .news, .stock, .job*/

        #main{ margin-top:90px; }

        /*3번째 섹션의 h2를 제외한 나머지 섹션의 h2 비표시*/
        section:not(:nth-child(3)) h2{ display: none;}

        .company{ 
            width:100%; height:650px; 
            overflow: hidden;
        }

        .company ul{ width:200%; height:650px; display: flex; }
        .company ul li{ flex:1;}

        .company ul li:nth-child(1){
            background: url(../img/slide1.png) no-repeat center top/cover #009178;
        }
        .company ul li:nth-child(2){
            background: url(../img/slide2.jpg) no-repeat center top/cover;
        }
        .company ul li div{
            width:1200px; margin:0 auto;
        }
        .company li img{ 
            width:650px; margin: 150px 0 0 100px;
        }

        .slide_btn{
            width:125px; height:30px;
            border-radius: 15px; background: rgba(0,0,0,0.7);
            display: flex;
            position: absolute;
            top: 640px; left: 50%; margin-left: -500px;
            justify-content: space-around;
            line-height: 30px; 
            /*(1)행간설정
            (2)블럭요소내에 인라인 속성 태그들의 수직정렬
            */
        }
        .slide_btn p{ color:#fff; }

        .newest{
            width:100%; height:670px;
            background: #f5fbfa;
        }
        .newest ul{
            width:1200px; height:650px;
            margin: -50px auto 0 auto;
            display: flex;
            flex-wrap: wrap;
        }
        .newest li{
            width:32%; height: 290px; 
            margin-bottom:20px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);

        }
        .newest li:nth-child(2), .newest li:nth-child(5){
            margin-left:2%; margin-right: 2%;
        }

        .newest li:nth-child(1){
            background: url(../img/newest_bg1.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(2){
            background: url(../img/newest_bg2.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(3){
            background: url(../img/newest_bg3.png) no-repeat right bottom/250px auto #effbf7;
        }
        .newest li:nth-child(4){
            background: url(../img/newest_bg4.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(5){
            background: url(../img/newest_bg5.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(6){
            background: url(../img/newest_bg6.png) no-repeat right 30px bottom 30px #fff;
        }


        .newest li h3{
            height:50px; line-height: 50px;
            padding-left:20px;
            border-bottom:1px solid #d9d9d9;
        }
        .newest li h3 a{
            color:#000;
            width:100%; height:50px;
            display: block;    
            background: url(../img/more-btn3.gif) no-repeat right 20px center;
        }
        .newest li:not(:nth-child(3)) p:nth-of-type(1){ 
            font-size:22px; letter-spacing: -1px;
            margin:40px 0 40px 20px;
        }
        .newest li:nth-child(1) p:last-child,
        .newest li:nth-child(2) p:last-child{
            font-size:15px; color:#939393;
            margin-left:20px;
        }

        .newest li:nth-child(3) p:nth-of-type(1){
            font-weight: bold; color:#636363;
            margin:30px 0 20px 20px;
        }
        .newest li:nth-child(3) p:nth-of-type(2){
            font-size:16px; margin-left:20px; 
        }
        .newest li:nth-child(3) p:nth-of-type(2) strong{
            font-size: 35px; margin-right:10px;
        }
        .newest li:nth-child(3) p:last-child{
            margin:40px 0 0 20px; 
        }
        .newest li:nth-child(3) p:last-child span{

            margin-left:10px; padding-left:20px;
            background: url(../img/down-icon.gif) no-repeat left center;
        }
        .newest li:nth-child(3)~li>a{
            border:1px solid #d9d9d9;
            padding: 5px 35px 5px 10px;
            border-radius: 20px;
            position: absolute;
            margin-left:20px;
            color:#000;
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }
        .newest li:nth-child(3)~li>a:last-child{
            margin-top: 45px;
        }
        .newest li:last-child>a{
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }


        .news{ 
            width:1200px; height: 430px;
            margin:60px auto;
        }

        .news h2{
            float:left;
            margin-bottom:30px;
        }
        .news>a{ 

            float:right; 
            padding-right:25px;
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            color:#000;
        }

        .news ol{ clear: both; height:350px; display: flex; }

        .news ol li{ flex:1; }

        .news ol li:not(:last-child){ margin-right:40px; }

        .news ol li:nth-child(1){ 
            background: url(../img/news1.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(2){ 
            background: url(../img/news2.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(3){ 
            background: url(../img/news3.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(4){ 
            background: url(../img/news4.jpg) no-repeat center top/100% auto;
        }

        .news ol li a{ display: block; width:100%; height: 350px; padding-top: 180px; }

        .news p:first-child{
            width: 70px; height:30px;
            font-size:14px; text-align: center; line-height: 30px;
            color: #0c8570; font-weight: bold;
            border:1px solid #0c8570;
            border-radius: 5px;
        }
        .news p:nth-child(2){ margin:15px 0 30px 0; color:#434343; }
        .news p:last-child{ font-size:14px; color:#939393; }

        .stock{
            width:1200px; height:290px;
            margin: 0 auto 60px auto;
            display: flex;
            justify-content: space-between;
        }

        .stock div{ width:47%; }

        .stock h3{ 
            font-size:25px; float:left; 
            margin-bottom: 30px;
        }
        .stock>div>a{ 
            float:right; 
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            padding-right:25px;
            color:#000;
        }
        .stock>div>*:last-child{ clear:both; }

        .stock table{
            width:100%; height:200px;
        }

        .stock td:first-child{
            width:80%; font-size:18px; font-weight: bold;
        }
        .stock td:first-child a{ color:#434343;}

        .stock td:last-child{
            width:20%; text-align: right;
        }

        .stock ol{ display: flex; }
        .stock li{ 
            flex:1; height:200px; padding:0 20px;
            border-left: 1px solid #d9d9d9;
            font-size:18px; font-weight: bold;
            color:#434343;
        }
        .stock p{ margin-bottom: 80px; }

        .stock li a{ 
            background: url(../img/download-btn.gif) no-repeat right center;
            padding-right: 20px;
            color:#434343;
        }



        .job{ 
            width:100%; height:300px;
            background: url(../img/bg-recruit.png) no-repeat center top/cover;
        }

        .job>div{
            width:1200px; margin:0 auto;
            display: flex;
            justify-content: space-between;
        }
        .job p{
            font-size:25px; color:#fff;
            padding-top:110px;
        }

        .job_link{ 
            margin-top: 90px;
        }

        .job_link a{
            display: block;
            width:200px; height:50px;
            border-radius: 25px;
            padding:0 20px; line-height:50px;
            margin-bottom:10px;
            font-weight: bold; font-size:15px;
        }

        .job_link a:first-child{
            background: url(../img/more-btn1.GIF) no-repeat right 20px center #fff;
            color:#000; 
        }

        .job_link a:last-child{
            background: url(../img/more-btn2.GIF) no-repeat right 20px center #292f35;
            color:#fff; 
        }


        /*#footer, .footer_top, .footer_bottom*/

        #footer{ width: 100%; height:250px; background: #000;}
        #footer *{ color:#fff;}

        .footer_top{ width:100%; height:50px; border-bottom: 1px solid #fff;}
        .footer_top>div{
            width:1200px; height:50px; border:1px solid yellow;
            margin:0 auto;
            display: flex; justify-content: space-between;
        }
        .footer_top>div ul{ display: flex; line-height: 50px;}
        .footer_top>div ul:first-child li{
            margin-right:20px; font-size:15px;
        }
        .footer_top>div ul:last-child li{
            margin-left:20px; 
        }

        .footer_bottom{
            width:1200px; height: 200px;
            margin:0 auto;
            border:1px solid green;
        }

        .footer_bottom p{ float:left;}
        .footer_bottom a:last-child{ 
            float:right;
            position: relative;
            top: -20px;
        }

        .footer_bottom a:nth-of-type(1){
            display: block;
            margin:50px 0 30px 0;
        }
        .footer_bottom address{
            font-style: normal; margin-bottom:10px;
        }



}/*====desktop=====*/


@media screen and (min-width:501px) and (max-width: 1279px) {/*====tablet=====*/
    
          /*#header, .gnb, .util*/
          #header{
            position: fixed; left:0; top:0; z-index:1;
            width:100%; height:90px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #d9d9d9;
        }

        h1{ 
            margin: 27px 0 0 20px; 
            transition: all 0.3s ease; }

        /*모바일 & 태블릿 메뉴 구조 재설정*/
        nav{ 
            position: fixed; left:0; top:0; 
            width:100%; height:100%;
            background: #fff;
            margin-left: 100%;
        }
        .gnb::before{
            content: "X";
            font-size:30px;
            display: block;
            text-align: right;
            padding: 10px;
            color:#0c8570;
            cursor: pointer;
            border-bottom:1px solid #0c8570;
            background: url(../img/logo.JPG) no-repeat 10px center;
        }
        .gnb a{ 
            display: block;
            height:50px;
            line-height: 50px;
            text-align: center;
        }
        .gnb>li>a{
            width:50%; 
            background: #0c8570;
            color:#fff;
            border-bottom:1px solid rgba(255,255,255,0.3);
        }
        .gnb>li>ul{
            position: absolute; left:50%; top: 60px;
            width:50%; background: #f4f4f4;
        }
        .gnb>li>ul a{
            color:#000; border-bottom:1px solid #fff;
        }    


        .util{
            display: flex; 
            margin: 27px 20px 0 0;
        }
        .util li{ margin-left:20px; transition: all 0.3s ease;}
        .util li:nth-child(2), .util li:nth-child(3){ display: none;}


        /*#main, .company, .newest, .news, .stock, .job*/
        #main{ margin-top:90px; }
        /*3번째 섹션의 h2를 제외한 나머지 섹션의 h2 비표시*/
        section:not(:nth-child(3)) h2{ display: none;}

        .company{ width:100%; height:450px; overflow: hidden; }
        .company ul{ width:200%; height:450px; display: flex; }
        .company ul li{ flex:1;}

        .company ul li:nth-child(1){
            background: url(../img/slide1.png) no-repeat center top/cover #009178;
        }
        .company ul li:nth-child(2){
            background: url(../img/slide2.jpg) no-repeat center top/cover;
        }
        .company li img{ 
            width:450px;
            margin: 100px 0 0 15%; 
    
        }

        .slide_btn{
            width:125px; height:30px;
            border-radius: 15px; background: rgba(0,0,0,0.7);
            display: flex;
            position: absolute;
                top: 400px; left: 40px;
            justify-content: space-around;
            line-height: 30px; 

        }
        .slide_btn p{ color:#fff; }

        .newest{ width:100%; background: #f5fbfa; }

        .newest ul{
            width:95%;
            margin: 0 auto 0 auto;
            padding-top:50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .newest li{
            width:49%; height: 290px; 
            margin-bottom:20px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            transition: width 0.3s ease;
        }
        .newest li:nth-child(1){
            background: url(../img/newest_bg1.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(2){
            background: url(../img/newest_bg2.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(3){
            background: url(../img/newest_bg3.png) no-repeat right bottom/250px auto #effbf7;
        }
        .newest li:nth-child(4){
            background: url(../img/newest_bg4.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(5){
            background: url(../img/newest_bg5.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(6){
            background: url(../img/newest_bg6.png) no-repeat right 30px bottom 30px #fff;
        }


        .newest li h3{
            height:50px; line-height: 50px;
            padding-left:20px;
            border-bottom:1px solid #d9d9d9;
        }
        .newest li h3 a{
            color:#000;
            width:100%; height:50px;
            display: block;    
            background: url(../img/more-btn3.gif) no-repeat right 20px center;
        }
        .newest li:not(:nth-child(3)) p:nth-of-type(1){ 
            font-size:22px; letter-spacing: -1px;
            margin:40px 0 40px 20px;
        }
        .newest li:nth-child(1) p:last-child,
        .newest li:nth-child(2) p:last-child{
            font-size:15px; color:#939393;
            margin-left:20px;
        }

        .newest li:nth-child(3) p:nth-of-type(1){
            font-weight: bold; color:#636363;
            margin:30px 0 20px 20px;
        }
        .newest li:nth-child(3) p:nth-of-type(2){
            font-size:16px; margin-left:20px; 
        }
        .newest li:nth-child(3) p:nth-of-type(2) strong{
            font-size: 35px; margin-right:10px;
        }
        .newest li:nth-child(3) p:last-child{
            margin:40px 0 0 20px; 
        }
        .newest li:nth-child(3) p:last-child span{

            margin-left:10px; padding-left:20px;
            background: url(../img/down-icon.gif) no-repeat left center;
        }
        .newest li:nth-child(3)~li>a{
            border:1px solid #d9d9d9;
            padding: 5px 35px 5px 10px;
            border-radius: 20px;
            position: absolute;
            margin-left:20px;
            color:#000;
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }
        .newest li:nth-child(3)~li>a:last-child{
            margin-top: 45px;
        }
        .newest li:last-child>a{
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }


        .news{  width:95%; margin:60px auto; }

        .news h2{
            float:left;
            margin-bottom:30px;
        }
        .news>a{ 

            float:right; 
            padding-right:25px;
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            color:#000;
        }

        .news ol{ clear: both;  display: flex; flex-wrap: wrap; justify-content: space-between; }
        .news ol li{ width:49%; }
        .news ol li:nth-child(1){ 
            background: url(../img/news1.jpg) no-repeat center top/500px auto;
        }
        .news ol li:nth-child(2){ 
            background: url(../img/news2.jpg) no-repeat center top/500px auto;
        }
        .news ol li:nth-child(3){ 
            background: url(../img/news3.jpg) no-repeat center top/500px auto;
        }
        .news ol li:nth-child(4){ 
            background: url(../img/news4.jpg) no-repeat center top/500px auto;
        }
        .news ol li a{ 
            display: block; width:100%; padding-top: 300px; 
            margin-bottom:100px;
        }
        .news p:first-child{
            width: 70px; height:30px;
            font-size:14px; text-align: center; line-height: 30px;
            color: #0c8570; font-weight: bold;
            border:1px solid #0c8570;
            border-radius: 5px;
        }
        .news p:nth-child(2){ margin:15px 0 30px 0; color:#434343; }
        .news p:last-child{ font-size:14px; color:#939393; }

        .stock{ width:95%; margin: 0 auto 60px auto; }
        .stock div{ width: 100%; }
        .stock div:nth-of-type(1){ border-bottom: 1px solid #d9d9d9;
                                    padding-bottom: 50px; margin-bottom: 50px; }
        .stock h3{ 
            font-size:25px; float:left; 
            margin-bottom: 30px;
        }
        .stock>div>a{ 
            float:right; 
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            padding-right:25px;
            color:#000;
        }
        .stock>div>*:last-child{ clear:both; }
        .stock table{
            width:100%; height:200px;
        }
        .stock td{ border-bottom: 1px dotted #d9d9d9; }
        .stock td:first-child{
            width:80%; font-size:18px; font-weight: bold;
        }
        .stock td:first-child a{ color:#434343;}
        .stock td:last-child{
            width:20%; text-align: right;
        }
        .stock ol{ display: flex; }
        .stock li{ 
            flex:1; height:200px; padding:0 20px;
            border-left: 1px solid #d9d9d9;
            font-size:18px; font-weight: bold;
            color:#434343;
        }
        .stock p{ margin-bottom: 80px; }

        .stock li a{ 
            background: url(../img/download-btn.gif) no-repeat right center;
            padding-right: 20px;
            color:#434343;
        }
        .job{ 
            width:100%; height:200px;
            background: url(../img/bg-recruit.png) no-repeat center top/cover;
        }
        .job p{
            font-size:20px; color:#fff;
            padding:30px 0 0 20px;
        }
        .job_link{ 
            width:95%; margin: 30px auto 0 auto;
            display: flex; justify-content: space-between;
        }
        .job_link a{
            display: block;
            width:49%; height:50px;
            border-radius: 25px;
            padding:0 20px; line-height:50px;
            margin-bottom:10px;
            font-weight: bold; font-size:15px;
        }
        .job_link a:first-child{
            background: url(../img/more-btn1.GIF) no-repeat right 20px center #fff;
            color:#000; 
        }
        .job_link a:last-child{
            background: url(../img/more-btn2.GIF) no-repeat right 20px center #292f35;
            color:#fff; 
        }


        /*#footer, .footer_top, .footer_bottom*/

        #footer{ width: 100%; height:500px; background: #000;}
        #footer *{ color:#fff; transition: all 0.3s ease; }

        .footer_top>div{ width:100%; }


        .footer_top>div ul{ display: flex; line-height: 50px;}
        .footer_top>div ul:first-child{
            flex-wrap: wrap;
        }     
        .footer_top>div ul:first-child li{
            width:50%; font-size:15px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }

        .footer_top>div ul:last-child{
            width: 100%; justify-content: space-around;
            margin:30px auto;
        }

        .footer_top>div ul:last-child li{
            margin-left:20px; 
        }

        .footer_bottom{ width:95%; margin:0 auto; }
        .footer_bottom a:nth-of-type(1){
            display: block;
            margin:50px 0 30px 0;
        }
        .footer_bottom address{
            font-style: normal; 
        }
        .footer_bottom p{ margin-bottom:30px;}


}/*====tablet=====*/


@media screen and (max-width:500px) { /*====mobile=====*/

        /*CSS전환(애니메이션 효과)

            1. 데스크탑===========================     

                div{ 
                    width: 600px; 
                    height:300px; 
                    marign-left:200px; 
                    transition: all 0.3s ease;
                }

           2. 모바일============================
           
                div{ 
                    width:300px; 
                    height:500px; 
                    marign-left:300px; 

                    transition:     all                     3s             ease
                                ----------               -----------      ------
                            (1)애니메이션 적용 속성 선정   (2)진행시간      (3)구간별 속도 재분배
                } 
               ===========================
                출발              도착
                ||| | |  |   |   ||||   = 3s ease     
                | | | | | | | | | | |   = 3s linear 

        */
    



        /*#header, .gnb, .util*/
        #header{
            position: fixed; left:0; top:0; z-index:1;
            width:100%; height:90px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #d9d9d9;
        }

        h1{ 
            margin: 27px 0 0 20px; 
            transition: all 0.3s ease; }

        /*모바일 & 태블릿 메뉴 구조 재설정*/
        nav{ 
            position: fixed; left:0; top:0; 
            width:100%; height:100%;
            background: #fff;
            margin-left: 100%;
        }
        .gnb::before{
            content: "X";
            font-size:30px;
            display: block;
            text-align: right;
            padding: 10px;
            color:#0c8570;
            cursor: pointer;
            border-bottom:1px solid #0c8570;
            background: url(../img/logo.JPG) no-repeat 10px center;
        }
        .gnb a{ 
            display: block;
            height:50px;
            line-height: 50px;
            text-align: center;
        }
        .gnb>li>a{
            width:50%; 
            background: #0c8570;
            color:#fff;
            border-bottom:1px solid rgba(255,255,255,0.3);
        }
        .gnb>li>ul{
            position: absolute; left:50%; top: 60px;
            width:50%; background: #f4f4f4;
        }
        .gnb>li>ul a{
            color:#000; border-bottom:1px solid #fff;
        }    


        .util{
            display: flex; 
            margin: 27px 20px 0 0;
        }
        .util li{ margin-left:20px; transition: all 0.3s ease;}
        .util li:nth-child(2), .util li:nth-child(3){ display: none;}


        /*#main, .company, .newest, .news, .stock, .job*/
        #main{ margin-top:90px; }
        /*3번째 섹션의 h2를 제외한 나머지 섹션의 h2 비표시*/
        section:not(:nth-child(3)) h2{ display: none;}

        .company{ width:100%; height:450px; overflow: hidden; }
        .company ul{ width:200%; height:450px; display: flex; }
        .company ul li{ flex:1;}

        .company ul li:nth-child(1){
            background: url(../img/slide1.png) no-repeat center top/cover #009178;
        }
        .company ul li:nth-child(2){
            background: url(../img/slide2.jpg) no-repeat center top/cover;
        }
        .company li img{ 
            width:350px;
            margin: 100px 0 0 50px; 
    
        }

        .slide_btn{
            width:125px; height:30px;
            border-radius: 15px; background: rgba(0,0,0,0.7);
            display: flex;
            position: absolute;
                top: 400px; left: 40px;
            justify-content: space-around;
            line-height: 30px; 

        }
        .slide_btn p{ color:#fff; }

        .newest{ width:100%; background: #f5fbfa; }

        .newest ul{
            width:95%;
            margin: 0 auto 0 auto;
            padding-top:50px;
        }
        .newest li{
            width:100%; height: 290px; 
            margin-bottom:20px;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            transition: width 0.3s ease;
        }
        .newest li:nth-child(1){
            background: url(../img/newest_bg1.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(2){
            background: url(../img/newest_bg2.png) no-repeat right 30px bottom 30px #fff;
        }
        .newest li:nth-child(3){
            background: url(../img/newest_bg3.png) no-repeat right bottom/250px auto #effbf7;
        }
        .newest li:nth-child(4){
            background: url(../img/newest_bg4.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(5){
            background: url(../img/newest_bg5.jpg) no-repeat right bottom 30px/150px auto #fff;
        }
        .newest li:nth-child(6){
            background: url(../img/newest_bg6.png) no-repeat right 30px bottom 30px #fff;
        }


        .newest li h3{
            height:50px; line-height: 50px;
            padding-left:20px;
            border-bottom:1px solid #d9d9d9;
        }
        .newest li h3 a{
            color:#000;
            width:100%; height:50px;
            display: block;    
            background: url(../img/more-btn3.gif) no-repeat right 20px center;
        }
        .newest li:not(:nth-child(3)) p:nth-of-type(1){ 
            font-size:22px; letter-spacing: -1px;
            margin:40px 0 40px 20px;
        }
        .newest li:nth-child(1) p:last-child,
        .newest li:nth-child(2) p:last-child{
            font-size:15px; color:#939393;
            margin-left:20px;
        }

        .newest li:nth-child(3) p:nth-of-type(1){
            font-weight: bold; color:#636363;
            margin:30px 0 20px 20px;
        }
        .newest li:nth-child(3) p:nth-of-type(2){
            font-size:16px; margin-left:20px; 
        }
        .newest li:nth-child(3) p:nth-of-type(2) strong{
            font-size: 35px; margin-right:10px;
        }
        .newest li:nth-child(3) p:last-child{
            margin:40px 0 0 20px; 
        }
        .newest li:nth-child(3) p:last-child span{

            margin-left:10px; padding-left:20px;
            background: url(../img/down-icon.gif) no-repeat left center;
        }
        .newest li:nth-child(3)~li>a{
            border:1px solid #d9d9d9;
            padding: 5px 35px 5px 10px;
            border-radius: 20px;
            position: absolute;
            margin-left:20px;
            color:#000;
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }
        .newest li:nth-child(3)~li>a:last-child{
            margin-top: 45px;
        }
        .newest li:last-child>a{
            background: url(../img/download-btn.gif) no-repeat right 10px center;
        }


        .news{  width:95%; margin:60px auto; }

        .news h2{
            float:left;
            margin-bottom:30px;
        }
        .news>a{ 

            float:right; 
            padding-right:25px;
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            color:#000;
        }

        .news ol{ clear: both; }
        .news ol li{ width:100%; }
        .news ol li:nth-child(1){ 
            background: url(../img/news1.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(2){ 
            background: url(../img/news2.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(3){ 
            background: url(../img/news3.jpg) no-repeat center top/100% auto;
        }
        .news ol li:nth-child(4){ 
            background: url(../img/news4.jpg) no-repeat center top/100% auto;
        }
        .news ol li a{ 
            display: block; width:100%; padding-top: 300px; 
            margin-bottom:100px;
        }
        .news p:first-child{
            width: 70px; height:30px;
            font-size:14px; text-align: center; line-height: 30px;
            color: #0c8570; font-weight: bold;
            border:1px solid #0c8570;
            border-radius: 5px;
        }
        .news p:nth-child(2){ margin:15px 0 30px 0; color:#434343; }
        .news p:last-child{ font-size:14px; color:#939393; }

        .stock{ width:95%; margin: 0 auto 60px auto; }
        .stock div{ width: 100%; }
        .stock h3{ 
            font-size:25px; float:left; 
            margin-bottom: 30px;
        }
        .stock>div>a{ 
            float:right; 
            background: url(../img/more-btn1.GIF) no-repeat right bottom;
            padding-right:25px;
            color:#000;
        }
        .stock>div>*:last-child{ clear:both; }
        .stock table{
            width:100%; height:200px;
        }
        .stock td:first-child{
            width:80%; font-size:18px; font-weight: bold;
        }
        .stock td:first-child a{ color:#434343;}
        .stock td:last-child{
            width:20%; text-align: right;
        }
        .stock ol{ display: flex; }
        .stock li{ 
            flex:1; height:200px; padding:0 20px;
            border-left: 1px solid #d9d9d9;
            font-size:18px; font-weight: bold;
            color:#434343;
        }
        .stock p{ margin-bottom: 80px; }

        .stock li a{ 
            background: url(../img/download-btn.gif) no-repeat right center;
            padding-right: 20px;
            color:#434343;
        }
        .job{ 
            width:100%; height:200px;
            background: url(../img/bg-recruit.png) no-repeat center top/cover;
        }
        .job p{
            font-size:20px; color:#fff;
            padding:30px 0 0 20px;
        }
        .job_link{ 
            width:95%; margin: 30px auto 0 auto;
            display: flex; justify-content: space-between;
        }
        .job_link a{
            display: block;
            width:49%; height:50px;
            border-radius: 25px;
            padding:0 20px; line-height:50px;
            margin-bottom:10px;
            font-weight: bold; font-size:15px;
        }
        .job_link a:first-child{
            background: url(../img/more-btn1.GIF) no-repeat right 20px center #fff;
            color:#000; 
        }
        .job_link a:last-child{
            background: url(../img/more-btn2.GIF) no-repeat right 20px center #292f35;
            color:#fff; 
        }


        /*#footer, .footer_top, .footer_bottom*/

        #footer{ width: 100%; height:500px; background: #000;}
        #footer *{ color:#fff; transition: all 0.3s ease; }

        .footer_top>div{ width:100%; }


        .footer_top>div ul{ display: flex; line-height: 50px;}
        .footer_top>div ul:first-child{
            flex-wrap: wrap;
        }     
        .footer_top>div ul:first-child li{
            width:50%; font-size:15px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }

        .footer_top>div ul:last-child{
            width: 100%; justify-content: space-around;
            margin:30px auto;
        }

        .footer_top>div ul:last-child li{
            margin-left:20px; 
        }

        .footer_bottom{ width:95%; margin:0 auto; }
        .footer_bottom a:nth-of-type(1){
            display: block;
            margin:50px 0 30px 0;
        }
        .footer_bottom address{
            font-style: normal; 
        }
        .footer_bottom p{ margin-bottom:30px;}



}/*====mobile=====*/