@charset 'utf-8';

body{
    color: #424242;
    letter-spacing: 0;
}

.empty{
    height: 67px;
}

/*1. 배너영역*/
.banner{
    width: 100%;
    background-color: #488bb7;
}
.banner_wrap{
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
    font-family: 'Montserrat', sans-serif;
}
.banner h2{
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0px;
}
.banner .deco_line{
    width: 36px;
    height: 2px;
    background-color: #fff;
    margin: 20px 0 ;
}
.banner p{
    color: #fff;
    letter-spacing: -0.5px;
}


/*2. 콘텐츠 영역*/
.contents{
    width: 90%;
    margin: 0 auto;
    padding: 60px 0 80px;
}
.contents h2{
    text-align: center;
}
.contents .deco_line{
    width: 40px;
    height: 1px;
    background-color: #e1e1e1;
    margin: 40px auto 60px;
}

.title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

/*2-1. 주요특징*/
.feature p{
    font-size: 14px;
    color: #616161;
    line-height: 1.75;
    -ms-word-break: keep-all;
    word-break: keep-all;
    margin-bottom: 60px;
}
.feature .title{
    margin-bottom: 12px;
    line-height: 1.5;
}

/*2-2. 예시 이미지*/
.ref{
    width: 100%;
    margin-bottom: 72px;
}
.ref img{
    width: 100%;
}

/*2-3. 제품 기능*/
.func ul{
    padding-left: 20px;
}
.func li{
    list-style: outside;
    line-height: 1.75;
    font-size: 14px;
    color: #616161;
    margin-bottom: 16px;
    -ms-word-break: keep-all;
    word-break: keep-all;
}
.func li:last-child{
    margin-bottom: 0;
}
.func li span{
    font-size: 16px;
    font-weight: bold;
}

/*2-4. API 사용하기*/
.use_api{
    margin-top: 80px;
}
.use_api p{
    width: 100%;
    margin: 0 auto;
    padding-left: 24px;
    color: #616161;
}
.use_api .btn_wrap{
    width: 226px;
    margin: 0 auto;
    margin-top: 80px;
}
.use_api .btn{
    width: 226px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
}
.use_api .btn:first-child{
    background-color: #60c130;
    margin-bottom: 12px;
}
.use_api .btn:last-child{
    background-color: #488bb7;
}
.use_api .btn a{
    display: block;
    width: 100%;
}




@media all and (min-width:768px){
    /*1. 배너영역*/
    .banner_wrap{
        width: 480px;
        padding: 80px 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .banner .deco_line{
        width: 4px;
        height: 40px;
        margin: -4px;
    }
    .banner p{
        font-size: 20px;
        margin-top: 4px;
    }
    
    /*2. 콘텐츠 영역*/
    .contents{
        padding: 80px 0 100px;
    }
    .contents h2{
        text-align: left;
    }
    .contents .deco_line{
        width: 100%;
        height: 1px;
        background-color: #e1e1e1;
        margin: 32px auto 48px;
    }
    
    /*2-1. 주요특징*/
    .feature p{
        font-size: 16px;
    }    
    
    /*2-3. 제품 기능*/
    .func li{
        font-size: 16px;
    }
    .func ul{
        padding-left: 44px;
    }

    /*2-4. API 사용하기*/
    .use_api .btn_wrap{
        width: 472px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }

}




@media all and (min-width:1132px){
    /*헤더영역*/
    header{
        /*포지션*/
        position: static;
        height: 76px;
        background-color: #fff;
    }
    
    .empty{
        height: 0px;
    }
    
    /*2. 콘텐츠 영역*/
    .contents{
        width: 1132px;
        padding: 100px 0 140px;
    }
    .contents .deco_line{
        width: 100%;
        height: 1px;
        background-color: #e1e1e1;
        margin: 32px auto 48px;
    }    
}