@font-face{
font-family:'Daehan';
font-style:normal;
font-weight:400;
src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/yoon/Daehan/DaehanR.woff2') format('woff2'),
    url('//cdn.jsdelivr.net/korean-webfonts/1/corps/yoon/Daehan/DaehanR.woff') format('woff');
}
@font-face{
font-family:'Daehan';
font-style:normal;
font-weight:700;
src:url('//cdn.jsdelivr.net/korean-webfonts/1/corps/yoon/Daehan/DaehanB.woff2') format('woff2'),
    url('//cdn.jsdelivr.net/korean-webfonts/1/corps/yoon/Daehan/DaehanB.woff') format('woff');
}

.daehan{
    font-family: 'Daehan';
}

header{position: absolute; top: 0; left: 0; z-index: 99;}
header.mobile .inner{position: absolute; top: 0; left: 0;}

.main01{width: 100%; height: 860px; position: relative;}
.main01 .slide_wrap{width: 100%; height: 100%;}
.main01 .slide_wrap li{width: 100%; height: 100%;}
.main01 .slide_wrap .pic01{background: url(../img/main_slide1.jpg);}
.main01 .slide_wrap .pic02{background: url(../img/main_slide2.jpg);}
.main01 .slide_txt{position: absolute; top: 52%; left: 50%; text-align: center; transform: translate(-50%,-50%); z-index: 10; width: 100%;}
.main01 .title{font-size: 44px; color: #fff;}
.main01 .title i{font-size: 60px;}
.main01 .title span{position: relative; top: -15px;}

.main02{width: 100%; position: relative; height: 650px;}
.main02 .main_bg{height: 100%;}
.main02 .main_bg li{width: 50%; height: 100%; float: left;}
.main02 .main_bg .bg_blue{background: url(../img/sec02_bg.png)#0f6593;}
.main02 .inner{position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 150px 0;}

.main02 .inner_txt span{color: #a1a1a1; font-size: 24px; line-height: 1; font-weight: bold;}
.main .inner_txt h1{font-size: 50px; font-weight: 400;}
.main .inner_txt p{font-size: 20px; color: #555; font-weight: 300; word-break: keep-all;}
.main02 .inner_txt h1{padding-top: 20px; letter-spacing: 2px;}
.main02 .con_wrap{position: relative;}
.main02 .con_wrap li{float: left;}
.main02 .con_wrap>li:nth-child(1){width: 26%;}
.main02 .con_wrap>li:nth-child(2){width: 170%; position: absolute; left: 26%; margin-left: 100px;}
.main02 .inner_txt p{padding: 40px 0 60px 0;}
.main02 .slide_btn{position: relative; display: inline-block;}
.main02 .slide_btn::before{content: ""; position: absolute; width: 1px; height: 15px; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main02 .slide_btn li{padding: 8px 14px; color: #fff; display: inline-block; background-color: #5cbbe2; cursor: pointer;}
.main02 .slide_btn li span{display: inline-block; position: relative; top: -2px;}
.main02 .slide_btn .prev span{margin-right: 10px;}
.main02 .slide_btn .next span{margin-left: 10px;}
.main02 .product_wrap li{padding: 0 10px; /* width: 340px; */}
.main02 .product_txt{background-color: #fff; padding: 24px 30px;}
.main02 .product_txt span{color: #5cbbe2; font-size: 20px; font-weight: bold; font-family: 'Lato', sans-serif;}
.main02 .product_txt p{font-size: 22px; font-weight: 400;}
.main02 .product_txt p.eng{font-weight: 500;}
.swiper_btn{width: 1px !important; height: 1px !important; opacity: 0 !important;}

.main03 .con_wrap>li{width: 50%; float: left; height: 500px; position: relative;}
.main03 .inner_txt{position: absolute; top: 50%; transform: translateY(-50%); left: 0; padding-left: 15.625%;}
.main03 .inner_txt p{font-family: 'Noto Sans KR', 'Sans-serif'; line-height: 1.6;}
.main03 .inner_txt p span{font-family:'Raleway'; font-weight: 500;}
.main03 .inner_txt h1{display: inline-block; padding-bottom: 110px; position: relative;}
.main03 .inner_txt h1::before{content: ""; width: 1px; height: 50px; background-color: #626262; position: absolute; bottom: 30px; left: 50%;}
.main03 .bg_logo{position: absolute; top: 48%; transform: translateY(-50%); left: 50px;}
.mobile_map{display: none;}

 /* ********************************************* *
 * 1300px
 * ********************************************* */
@media screen and (max-width: 1300px){

    .main01 {height: 730px;}
    .main01 .title{font-size: 35px;}
    .main01 .title i{font-size: 55px;}
    
    .main02 .inner_txt span{font-size: 18px;}
    .main .inner_txt h1{font-size: 44px;}
    .main .inner_txt p{font-size: 17px;}
    .main02 .inner_txt p{padding: 20px 0 40px 0;}
    .main .slide_btn li{font-size: 14px;}
    .main02 .con_wrap{padding-left: 40px;}

}
 /* ********************************************* *
 * 960px
 * ********************************************* */
 @media screen and (max-width: 960px){

    .main01 .title{font-size: 28px;}
    .main01 .title i{font-size: 36px; display: inline-block; padding: 5px 0;}
    .main01 .slide_txt{padding-left: 30px;}

    .main02{height: 710px;}
    /* .main02 .product_wrap li{width: auto !important;} */
    .main .inner_txt h1{padding-top: 0;}
    .main02 .con_wrap>li:nth-child(1){width: 100%; padding: 0 20px 40px 20px;}
    .main02 .con_wrap>li:nth-child(2){width: 100%; position: relative; left: 0; margin-left: 0;}
    .main02 .inner_txt span{display: none;}
    .main02 .inner{padding: 60px 0;}
    .main02 .main_bg li{width: 100%;}
    .main02 .main_bg li:nth-child(1){height: 60%;}
    .main02 .main_bg li:nth-child(2){height: 40%;}
    .main02 .con_wrap{padding-left: 0;}
    .main02 .product_txt p{font-size: 19px;}
    .main02 .product_txt span{font-size: 18px;}
    
    .main03 .con_wrap>li{width: 100%;}
    .main03 .con_wrap>li:nth-child(2){height: auto;}
    .main03 .inner_txt{position: relative; top: 0; left: 0; transform: translate(0,0); padding: 60px 20px; text-align: center;}
    .main .inner_txt p{font-size: 16px;}
    .pc_map{display: none;}
    .mobile_map{display: block;}
    .main03 .con_wrap>li{height: 360px;}
    

}

/* ********************************************* *
 * 860px
 * ********************************************* */
 @media screen and (max-width: 860px){

    .main02{height: 640px;}

 }


 /* ********************************************* *
 * 700px
 * ********************************************* */
 @media screen and (max-width: 700px){

    .main02{height: 600px;}

 }


 /* ********************************************* *
 * 600px
 * ********************************************* */
 @media screen and (max-width: 600px){
    
    .main01{height: 560px;}
    .main02{height: 680px;}

 }

  /* ********************************************* *
 * 520px
 * ********************************************* */
 @media screen and (max-width: 520px){
    
    .main02{height: 620px;}

 }

 /* ********************************************* *
 * 400px
 * ********************************************* */
 @media screen and (max-width: 400px){

    .main01{height: 470px;}
    .main01 .title{font-size: 20px;}
    .main01 .title i{font-size: 28px;}

 }

   /* ********************************************* *
 * 369px
 * ********************************************* */
 @media screen and (max-width: 369px){
    
    .main02{height: 750px;}

 }