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


/**/
*{margin:0; padding:0;}
ol,ul{list-style:none;}
a{text-decoration:none; color:inherit; outline:none;}
img{border:0;}
body{font-family: 'Noto Sans KR', sans-serif; font-size: 13px; color: #272727;}
.wrap{max-width:1200px; margin: 0 auto;}

/*nav_bg*/
.nav2{background:url(../image/nav2_bg.png) no-repeat center center;}
/*nav_bg*/

/*p1*/
.p1{width: 100%; height:930px; background:url(../image/p1_bg.png) no-repeat center center;}
.p1 .wrap{height: 930px;}
.txt1{max-width: 920px; height:500px; text-align: center; color: white; margin: 0 auto; padding-top: 155px;}
#txt1{font-size: 30px;}
#txt2{font-size: 48px; font-weight: 100;}
#txt3{font-size: 60px; font-weight:700;}
.button5{position:fixed; bottom:20px; right:30px; z-index:1; border:none; outline:none; background: white; cursor:pointer; opacity: 0.5; padding:15px; border-radius:10px; display:none;}
.button5:hover{background:black; opacity: 1; color:white;}

/*p1*/

/*p2*/
.p2{width: 100%; height:1020px; background:url(../image/p2_bg.png) no-repeat center center;}
.p2 .wrap{height: 1020px;}
.txt2{max-width: 920px; height:100px; text-align: center; margin: 0 auto; padding-top: 100px;}
#txt4{font-size:48px; font-weight:bold;}
#txt4 strong{color:#cc1515;}
#txt5{font-size:22px;}
.list{max-width: 1000px; height: 640px; margin: 0 auto; margin-top: 72px;}
.list ul{width: 1000px; height: 180px; float: left;}
.list li{float: left; height: 180px;}
#list1 li{width:300px; }
#list1_1{background:url(../image/p2_1.png) no-repeat center center;}
#list1_2{background:url(../image/p2_2.png) no-repeat center center; }
#list1_3{background:url(../image/p2_3.png) no-repeat center center; }
#list2{margin-top: 50px;}
#list2 li{width:160px;}
#list2_1{background:url(../image/p2_4.png) no-repeat center center;}
#list2_2{background:url(../image/p2_5.png) no-repeat center center;}
#list2_3{background:url(../image/p2_6.png) no-repeat center center;}
#list2_4{background:url(../image/p2_7.png) no-repeat center center;}
#list2_5{background:url(../image/p2_8.png) no-repeat center center; }
#list3{margin-top: 50px;}
#list3 li{width:475px;}
#list3_1{background:url(../image/p2_9.png) no-repeat center center;}
#list3_2{background:url(../image/p2_10.png) no-repeat center center;}
.list_margin{margin-left: 50px;}
/*p2*/

/*p3*/
.p3{width: 100%; height: 510px; background:url(../image/p3_bg.png) no-repeat center center; color: white; font-weight: 300;}
.p3 .wrap{height: 510px;}
.txt3{max-width: 350px; height: 180px; padding-top:98px ;}
#txt6{font-size: 25px; color: #cc1515; font-weight: 700; line-height: 80px;}
#txt7{font-size: 20px;}
#txt8{font-size: 40px;}
.button{width: 180px; height: 40px; line-height: 40px; font-size: 16px; border: 1px solid white; margin-top: 100px; text-align: center;}
.button a{display:block;}
.button a:hover{color:black; background-color: white;}
/*p3*/

/*p4*/
.p4{width: 100%; height: 510px; background:url(../image/p4_bg.png) no-repeat center center; font-weight: 300;}
.p4 .wrap{height: 510px;}
.wrap2{max-width:1200px; height: 320px; padding-top:90px;}
.video{width: 650px; height: 320px; background-color: black; float: left;}
.txt4{width: 350px; height: 180px; float: right; text-align: right;}
#txt9{font-size: 25px; color: #cc1515; font-weight: 700; line-height: 80px;}
#txt10{font-size: 20px;}
#txt10 strong{font-size: 14px;font-weight: 300;}
#txt11{font-size: 40px;}
.button2{width: 180px; height: 40px; line-height: 40px; font-size: 16px; border: 1px solid black; text-align: center;
margin-top: 280px; margin-left: 1020px;}
.button2 a{display:block;}
.button2 a:hover{color:white; background-color: black;}
/*p4*/

/*p5*/
.p5{width: 100%; height: 510px; background-color: white; position: relative; font-size: 15px;}
.p5 .wrap{height: 510px;}
#list4{max-width: 1200px; height: 260px; position: absolute; top:50%; transform: translateY(-50%); text-align: center; line-height: 40px;}
#list4 li{width: 400px; height: 260px; float: left; cursor: pointer; font-weight: 500;}
#list4 li img{margin-top: 30px;}
.txt12 strong{font-size: 22px; color: black;}
.txt12{color:#123060;}
.list4_1{position: relative;}
.list4_1::after{content:''; position:absolute; width:1px; height:260px; top:50%; transform: translateY(-50%); left:0px; background-color:#123060;}
/*p5*/


/*laptop*/
@media (min-width:1024px) and (max-width:1680px) {
    .wrap{max-width:1670px;}
    .m_wrap2{width:1024px; margin: 0 auto;}
    .wrap2{width:1024px; margin: 0 auto;}
    .txt3{padding-left: 50px;}
    .button{margin-left: 50px;}
    .video{width:500px; margin-left: 50px;}
    .video1{width:500px;}
    .txt4{padding-right: 50px; margin-top: 40px;}
    .button2{display: none;}
    #list4 li{width: 341px;}
}

/*tablet*/
@media (min-width:768px) and (max-width:1024px) {
    .wrap{max-width:1023px;}
    .m_wrap2{width:768px; margin: 0 auto;}
    .list{width:768px; margin: 0 auto;}
    .list ul{width: 700px; margin-top: 70px; margin-left: 34px;}
    #list1 li{width:210px;}
    #list2 li{width:112px;}
    #list3 li{width:332px;}
    .list_margin{margin-left: 35px;}
    .txt3{padding-left: 50px;}
    .button{margin-left: 50px;}
    .video{width:300px; margin-left: 50px;}
    .video1{width:300px;}
    .txt4{padding-right: 50px; margin-top: 40px;}
    .button2{display: none;}
    #list4 li{width: 250px;}
    .list4_1::after{display: none;}
    }
    
    /*mobile*/
@media (min-width:376px) and (max-width:767px) {
    .wrap{max-width:376px;}
    .m_wrap2{width:376px; margin: 0 auto;}
    .p1{height:736px;}
    #txt1{font-size: 20px;}
    #txt2{font-size: 25px;}
    #txt3{font-size: 48px;}
    #txt4{font-size: 38px;}
    #txt5{font-size: 20px;}
    .p2{display: none;}
    .p3{display: none;}
    .video{display: none;}
    .txt4{float: none; text-align: left; margin-left: 30px;}
    .p4{background:url(../image/p3_bg.png) no-repeat center center; color: white;}
    .button2{margin-top: 80px; margin-left: 30px;  border: 1px solid white;}
    .button2 a:hover{color:black; background-color: white;}
    .p5{display: none;}
}

/*mobile min*/
@media (min-width:320px) and (max-width:375px) {
    .m_wrap2{width:320px; margin: 0 auto;}
    .p1{height:736px; background:url(../image/p1_m_bg.png) no-repeat center center;}
    #txt1{font-size: 20px;}
    #txt2{font-size: 25px;}
    #txt3{font-size: 40px;}
    #txt4{font-size: 38px;}
    #txt5{font-size: 20px;}
    .p2{display: none;}
    .p3{display: none;}
    .video{display: none;}
    .txt4{float: none; text-align: left; width: 300px;}
    .p4{background:url(../image/p3_bg.png) no-repeat center center; color: white;}
    .button2{margin-top: 80px; margin-left:0;  border: 1px solid white;}
    .button2 a:hover{color:black; background-color: white;}
    .p5{display: none;}
}