@charset "utf-8";
/* CSS Document */

/* 电脑板 */
@media screen and (min-width: 1025px) {

    .menu {right: -163px;}

    /* content */
    .bottom_bt {display: block; position: fixed; bottom: 0; left: 50%; width: 88px; margin-left: -44px; z-index: 1;}
    .bottom_bt2 {display: block; position: absolute; bottom: 0; left: 50%; width: 88px; margin-left: -44px; z-index: 1;}

    .scroll_img {position: relative; left: 50%; width: 106%; margin-left: -53%; z-index: 1;}
    .bg_img img{width: 100%;}
    .txt_cont {position: absolute; top: 0; left: 50%; width: 1100px; margin-left: -550px; text-align: center;}

    .s1_1 .txt_cont {top: 250px;}
    .s1_1 .title{font: bold 40px/46px 'NanumGothic'; color: #fff;}
    .s1_1 .txt1{font: 19px/28px 'NanumGothic'; color: #fff; padding-top: 30px;}
    .s1_1 .txt2{position: relative; font: 19px/28px 'NanumGothic'; color: #fff; padding-top: 50px;}
    .s1_1 .txt2::before{content: '\20'; position: absolute; top: 25px; left: 50%; width: 26px; margin-left: -13px; height: 1px; background: #fff;}
    .s1_1 .txt3{font: 17px/22px 'NanumGothic'; color: #fff; padding-top: 15px; opacity: .3;}
    .s1_1 .box{width: 100%; overflow: hidden; margin-top: 20px;}
    .s1_1 .box ul{width: 120%;}
    .s1_1 .box li{float: left; width: 213px; height: 213px; padding-top: 25px; margin-right: 8px; border: 1px solid rgba(255,255,255,.3);}
    .s1_1 .box div{position: relative; width: 100%; font: bold 32px/40px 'NanumGothic'; color: #fff; text-align: center; padding-top: 30px;}
    .s1_1 .box div:before{content: '\20'; position: absolute; top: 16px; left: 50%; width: 10px; margin-left: -5px; height: 2px; background: #008ad1;}
    .s1_1 .box p{font: 15px/20px 'NanumGothic'; color: #fff;}
    .s1_1 .box span{display: block; font: 15px/20px 'NanumGothic'; color: #aaa;}
	
	
    .s1_2 .txt_cont {top: 230px;}
    .s1_2 .title{font: bold 40px/46px 'NanumGothic'; color: #fff;}
    .s1_2 .txt1{font: 24px/34px 'MS Serif'; color: #fff; padding: 30px 0 80px;}
    .s1_2 .txt2{position: relative; font: 19px/28px 'NanumGothic'; color: #fff; padding-top: 30px;}

    .scroll_img.s1_3 {position: relative; left: 50%; width: 1920px; margin-left: -960px; z-index: 1; overflow: hidden; background: #f8f8f8 url('../img/sub01/sub_img03.jpg') no-repeat center top;}
    .s1_3 .txt_cont {position: relative; top: 80px;}
    .s1_3 .title{font: bold 40px/46px 'NanumGothic'; color: #252525;}
    .s1_3 .box2{background: url('../img/sub01/lain.jpg') repeat-y center; padding: 25px 0 150px 0; margin-top: 30px;}
    .s1_3 .box2 li{position: relative; top: 0; left: 50%; margin-left: -550px; padding-right: 100px; width: 560px; background: url('../img/sub01/lain_l.png') no-repeat right 18px; text-align: right;}
    .s1_3 .box2 li:nth-child(2n){margin: -20px 0 0 -11px; text-align: left; padding-left: 100px; padding-right: 0; background: url('../img/sub01/lain_r.png') no-repeat 1px 18px;}
    .s1_3 .box2 li p{font: bold 22px/22px 'NanumGothic'; color: #3c3c3c; padding-top: 20px; padding-bottom: 8px;}
    .s1_3 .box2 li div{display: block; font: 16px/30px 'NanumGothic'; color: #676767;}
    .s1_3 .box2 li div span{padding-left: 10px; vertical-align: top; font: bold 16px/30px 'NanumGothic'; color: #3c3c3c; float: right;}
    .s1_3 .box2 li div strong{display: inline-block; text-align: right; float: right;}
    .s1_3 .box2 li:nth-child(2n) div span{padding-right: 10px; float: left;}
    .s1_3 .box2 li:nth-child(2n) div strong{text-align: left; float: left;}

}

/* 小电脑 */
@media screen and (max-width: 1600px) {
    .scroll_img {position: relative; left: 50%; width: 160%; margin-left: -80%; z-index: 1;}
}

/* 手机版 */
@media screen and (max-width: 1024px) {

    /* content */
    .bottom_bt {display: none;}

    .scroll_img {position: relative; left: 50%; width: 1920px; margin-left: -960px; z-index: 1;}
    .bg_img img{width: 100%;height:100%;}
    .txt_cont {position: absolute; top: 0; left: 50%; width: 22rem; margin-left: -11rem; text-align: center;}

    .scroll_img.s1_1 {position: relative; left: 50%; width: 600%; margin-left: -300%; z-index: 1;}
    .s1_1 .txt_cont {top: 7rem;}
    .s1_1 .title{font: bold 2.2rem/2.8rem 'NanumGothic'; color: #fff;}
    .s1_1 .txt1{font: 1.2rem/1.8rem 'NanumGothic'; color: #fff; padding-top: 1.5rem;}
    .s1_1 .txt2{position: relative; font: 1.2rem/1.8rem 'NanumGothic'; color: #fff; padding-top: 2.5rem;}
    .s1_1 .txt2::before{content: '\20'; position: absolute; top: 1rem; left: 50%; width: 26px; margin-left: -13px; height: 1px; background: #fff;}
    .s1_1 .txt3{font: .9rem/1.8rem 'NanumGothic'; color: #fff; padding-top: 1rem; opacity: .3;}
    .s1_1 .box{width: 100%; overflow: hidden;}
    .s1_1 .box ul{width: 100%;}
    .s1_1 .box li{float: left; width: 10.5rem; height: 10.5rem; padding-top: 1.4rem; margin-top: 1rem; border: 1px solid rgba(255,255,255,.3);}
    .s1_1 .box li:nth-child(2n){float: right;}
    .s1_1 .box li:last-child{float: left; margin-left: 5.75rem;}
    .s1_1 .box li img{width: 4rem;}
    .s1_1 .box div{position: relative; width: 100%; font: bold 1.8rem/2.2rem 'NanumGothic'; color: #fff; text-align: center; padding-top: 1.2rem;}
    .s1_1 .box div:before{content: '\20'; position: absolute; top: .6rem; left: 50%; width: 10px; margin-left: -5px; height: 2px; background: #008ad1;}
    .s1_1 .box p{font: .9rem/1.4rem 'NanumGothic'; color: #fff;}
    .s1_1 .box span{display: block; font: 15px/20px 'NanumGothic'; color: #aaa;}

    .scroll_img.s1_2 {position: relative; left: 50%; width: 400%; margin-left: -200%; z-index: 1;}
	.s1_2 .bottom_bt2{display:none;}
	.s1_2 .bg_img{top:-50px;}
    .s1_2 .txt_cont {top: 9rem;}
    .s1_2 .title{font: bold 2.2rem/2.8rem 'NanumGothic'; color: #fff;}
    .s1_2 .txt1{font: 1.3rem/1.8rem 'MS Serif'; color: #fff; padding: 1.6rem 0 4rem;}
    .s1_2 .txt2{position: relative; font: 1.2rem/1.8rem 'NanumGothic'; color: #fff; padding-top: 1.6rem;}

    .scroll_img.s1_3 {position: relative; left: 50%; width: 500%; margin-left: -250%; z-index: 1; overflow: hidden; background: #f8f8f8 url('../img/sub01/sub_img03.jpg') no-repeat center top;}
    .s1_3 .txt_cont {position: relative; top: 4rem;}
    .s1_3 .title{font: bold 2.2rem/2.8rem 'NanumGothic'; color: #252525;}
    .s1_3 .box2{background: url('../img/sub01/lain.jpg') repeat-y 1rem 0; padding: 0 0 10rem 0; margin-top: 2rem;}
    .s1_3 .box2 li{position: relative; top: 0; left: 1rem; margin: 0 0 0 -.55rem; width: 100%; text-align: left; padding-left: 40px; background: url('../img/sub01/lain_r.png') no-repeat 1px 18px;}
    .s1_3 .box2 li p{font: bold 1.6rem/2.2rem 'NanumGothic'; color: #3c3c3c; padding-top: .5rem; padding-bottom: .1rem; margin-top: 1rem; background: #f8f8f8;}
    .s1_3 .box2 li div{display: block; font: .9rem/1.6rem 'NanumGothic'; color: #676767;}
    .s1_3 .box2 li div span{vertical-align: top; font: bold .9rem/1.6rem 'NanumGothic'; color: #3c3c3c; float: left; width: 1.6rem;}
    .s1_3 .box2 li div strong{display: inline-block; text-align: left; float: left; width: 17.5rem;}

}