#wrap {}
#wrap > * {
    height: 80px;
    border: 2px solid #000;
    padding: 20px;
}
#wrap header {}
#wrap main {
    height: 200vh;
    background-color: #ddd;
}
/* swiper css 직접 입력시 주의사항 */
/* 1. swiper 적용 태그는 플러그인CDN연결파일에 의해서 기본값들이 먼저 내장되어있기 때문에 반드시 F12 개발자도구로 체크하고 필요한 값만 구분해서 넣어야한다. */
/* 2. css 디자인 입력 시 적용이 안된다면 기본값과 충돌되는지 개발자도구로 css우선순위를 확인하고 올바른 대상에 적용한다. */
/* 3. swiper, swiper-wrapper, swiper-slide 3요소에는 레이아웃 관련 css 삽입시 신중하게 사용한다. */
#wrap main .hero_bnr {
    background-color: tomato;
    width: 600px; height: 400px;
}
#wrap main .hero_bnr .swiper-wrapper {}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide {}
#wrap main .hero_bnr .swiper-wrapper .slide1 {
    background-image: url(../images/bnr1.jpg);
    background-size: cover;
    background-position: center;
}
#wrap main .hero_bnr .swiper-wrapper .slide2 {
    background-image: url(../images/bnr2.jpg);
    background-size: cover;
    background-position: center;
}
#wrap main .hero_bnr .swiper-wrapper .slide3 {
    background-image: url(../images/bnr3.jpg);
    background-size: cover;
    background-position: center;
}
#wrap main .hero_bnr .swiper-wrapper .swiper-slide p {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
/* swiper-wrapper, swiper-slide는 개별크기 입력하지 않기 */
/* swiper plugin 대표 css 내장속성:값 */
/* 1.swiper: position, overflow */
/* 2.swiper-wrapper: flex */
/* 3.swiper-slide: position, transform */
#wrap main hr {}
#wrap main .hero_bnr2 {
    min-width: 1800px; height: 400px;
}
#wrap main .hero_bnr2 .swiper-wrapper {
}
#wrap main .hero_bnr2 .swiper-wrapper .swiper-slide {
    background-size: cover;
    background-position: center;
}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_1 {
    background-image: url(../images/bnr1.jpg);
}
#wrap main .hero_bnr2 .swiper-wrapper .swiper-slide .contents {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 0 0;
}
#wrap main .hero_bnr2 .swiper-wrapper .swiper-slide .contents h1 {
    font-size: 3rem;
    margin: 0 0 50px;
    line-height: 1.3;
}
#wrap main .hero_bnr2 .swiper-wrapper .swiper-slide .contents h1 span {
    font-weight: 700;
}
#wrap main .hero_bnr2 .swiper-wrapper .swiper-slide .contents p {line-height: 1.5;}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_2 {
    background-image: url(../images/bnr2.jpg);
}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_2 .contents {}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_2 .contents h1 {}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_2 .contents span {}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_2 .contents p {}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_3 {
    background-image: url(../images/bnr3.jpg);
}
#wrap main .hero_bnr2 .swiper-wrapper .slide2_4 {
    background-image: url(../images/bnr4.jpg);
}
#wrap footer {}