@charset "utf-8";


section {
    width: 100%;
}

.main_banner {
    height: 777px;
    width: 100%;
    min-width: 1024px;
    background: url(../image/index_back.png) center no-repeat;
    float: left;
    overflow: hidden;

}

.main_banner > .slide {
    width: 200%;
    min-width: 1024px;
    position: relative;
    left: 0;
    animation: slide 5s infinite;

}

.main_banner > .slide > li {
    width: 50%;
    float: left;
    overflow: hidden;
}

.main_banner > .slide > li > a {
    display: block;
    position: relative;
    width: 1920px;
    height: 777px;
    left: 50%;
    transform: translateX(-50%);

}

.main_banner > .slide > li > a > img {
    width: 100%;
    float: left;
    min-width: 1024px;
}


/*
.main_banner > span {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    transform: translateY(-50%);
    cursor: pointer;
    
}

.control_l {
    left: 45%;
    top:100%;
}

.control_r {
    right: 45%
}

.slide > span > img {
    width: 100%
}
*/

.info {
    margin: 0 auto;
    float: left;
    height: 735px;
    width: 100%;
    min-width: 1024px;
    background: url(../image/index_back02.png) center no-repeat;
    overflow: hidden;
}

.info > h3 {
    margin: auto;
    width: 1024px;
    text-align: right;
    font-family: "roboto";
    font-size: 35px;
}

.info > p {

    margin: 0 auto;
    width: 1024px;
    padding: 30px 0 125px 0;
    text-align: right;
    font: normal 15px/30px 'noto sans kr'
}

.mini_banner {

    margin: 0 auto;
    width: 1024px;
    height: 233px;
}

.mini_banner > li {
    float: left;
    width: 233px;
    height: 233px;
    margin: 0 auto;
}

.mini_banner li:nth-child(1) {
    margin: 0 61px 0 38px;
}

.mini_banner li:nth-child(2) {
    margin: 0 61px 0 61px;
}

.mini_banner li:nth-child(3) {
    margin: 0 38px 0 61px;
}

.mini_text {
    width: 1024px;
    margin: 0 auto;
}

.mini_text li {
    display: block;
    height: 40px;
    font-size: 16px;
    color: #383838;
}

.mini_text li:nth-child(1) {
    margin: 44px 115px 0 103px;
    border-bottom: 1px solid #adadad;
}

.mini_text li:nth-child(2) {
    margin: 44px 105px 0 120px;
    border-bottom: 1px solid #adadad;
}

.mini_text li:nth-child(3) {
    margin: 44px 0 0 110px;
    border-bottom: 1px solid #adadad;
}

.brand {
    width: 100%;
    float: left;
    height: 901px;
    min-width: 1024px;
    overflow: hidden;
    background: url(../image/index_back03.png) center no-repeat;

}

.left_btn {
    width: 21px;
    height: 41px;
    position: relative;
    transform: scale(0.8);
    right: 15%;
    top: 90px;
    cursor: pointer;
    z-index: 1;
}

.right_btn {
    width: 21px;
    height: 41px;
    position: relative;
    transform: scale(0.8);
    left: 15%;
    top: 90px;
    cursor: pointer;
    z-index: 1;
}

.brand > ul {
    width: 200%;
    position: relative;
    float: left;
    overflow: hidden;
    animation: slide
}

.brand > ul > li > h2 {
    margin-top: 10px;
    font: bold 24px/0 'roboto';
}

.brand > ul > li {
    width: 50%;
    font: normal 15px/30px 'noto sans kr'
}

.brand > ul > li > #line {
    margin-top: 18px;
    transform: scale(0.8);
}

.brand01_feed {
    width: 1024px;
    margin: 0 auto;
}

.brand01_feed > li {
    width: 141px;
    height: 241px;
    margin: 85px 50px 0 50px;
}

.pre_hover01:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_pre_brand-01-hover.png);
}

.pre_hover02:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_pre_brand-02-hover.png);
}

.pre_hover03:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_pre_brand-03-hover.png);
}

.pre_hover04:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_pre_brand-04-hover.png);}

.brand02_feed {
    width: 1024px;
    margin: 0 auto;
}

.brand02_feed > li {
    width: 141px;
    height: 241px;
    margin: 85px 50px 0 50px;
    float: left;
}

.sci_hover01:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_scien_brand-01-hover.png);}

.sci_hover02:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_scien_brand-02-hover.png);}

.sci_hover03:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_scien_brand-03-hover.png);}

.sci_hover04:hover {
    width: 141px;
    height: 241px;
    content: url(../image/index_scien_brand-04-hover.png);}

.brand_btn {
    width: 162px;
    height: 38px;
    margin-top: 120px;
}

.shelter {
    padding-top: 110px;
    width: 100%;
    min-width: 1024px;
    height: 550px;
    background: url(../image/index_mini_banner.png) center no-repeat;
    overflow: hidden;
}

.shel_text {
    width: 1024px;
    margin: auto;
    overflow: hidden;
}

.shel_title {
    text-align: left;
    min-width: 1024px;
    font font-size: 17;
    color: #8c8c8c;
}

.shel_title > h1 {
    font: 600 35px/55px 'roboto';
    color: rgba(252, 87, 81, 1);
    text-align: left;
}

.shel_info {
    font: normal 15px/30px 'noto sans kr';
    padding-top: 40px;
    float: left;
    text-align: left;
}

.shel_btn {
    margin: 160px auto 0;
    width: 162px;
    height: 38px;
    float: left;
    transform: scale(0.8)
}

.mini_dog > img {
    position: relative;
    float: right;
    width: 479px;
    height: 388px;
    bottom: 70px;
}