/* 섹션01 - 슬라이더 */
.section01 {position: relative;}
.slider {z-index: -999;}
.slider01 {background: url(images/main/slider04.png) no-repeat center / cover; max-width: 100%; height: 100vh;}
.slider02 {background: url(images/main/slider02.png) no-repeat center / cover; max-width: 100%; height: 100vh;}
.slider03 {background: url(images/main/slider03.png) no-repeat center / cover; max-width: 100%; height: 100vh;}
/*슬라이더 텍스트 */
.slider_text {position: absolute; color: #f1f1f1; z-index: 1; bottom: 15%; padding: 0 30px;}
.slider_text p:first-child {font-size: 4.2rem; font-weight: 500;}
.slider_text p:nth-child(2) {font-size: 5.2rem; font-weight: 600;}
.slider_text p:last-child {font-size: 2.0rem; font-weight: 400; margin-top: 10px;}
/* 모바일용 비디오 */
.video_wrap {display: none;}
/* 스크롤 */
.scroll {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); text-align: center;}
.scroll > p {font-size: 1.4rem; color: #ccc; margin-bottom: 5px;}
.scroll_line {width: 2px; height: 40px; background: #cccccc96; display: inline-block;}
.scroll_ball {position: absolute; z-index: 1; background: #fff; width: 2px; height: 12px;
transform: translateX(-2px); animation: scroll_ball 1.5s linear forwards infinite; transition: 1s;}
.scroll:hover {color: #fff;}
@keyframes scroll_ball {
    0% {top: 24px;}
    100% {top: 54px;}
}
/* 배경 */
.section_bg {background: url(images/main/main_bg03.png) no-repeat left top / cover; 
    width: 100%; height: 4556px; position: absolute; z-index: -999999;}

/* 섹션02 - 컨텐츠01(선박리스트)*/
.contents01 {height: 785px; max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between;}
.contents01 div {width: 25%; padding: 0px; margin: 0 20px;}
.contents01 div a:hover {filter: brightness(0.5); top: -36px;}
.contents01 div h3 {color: #fff; font-size: 2.6rem; font-weight: 900; text-align: center; position: relative; top: 50px; z-index: 1;}
.contents01 .item01 {border-radius: 10px; background: url(images/main/clover_mb.png)no-repeat top center / cover; width: 100%; height: 504px; position: relative; top: 0; transition: all .6s;}
.contents01 .item02 {border-radius: 10px; background: url(images/main/acacia_mb.png)no-repeat 20% center / cover; width: 100%; height: 504px; position: relative; top: 0; transition: all .6s;}
.contents01 .item03 { border-radius: 10px; background: url(images/main/cosmos_mb.png)no-repeat 80% center / cover; width: 100%; height: 504px; position: relative; top: 0; transition: all .6s;}
.contents01 .item04 {border-radius: 10px; background: url(images/main/dahlia_mb.png)no-repeat 55% center/ cover; width: 100%; height: 504px; position: relative; top: 0; transition: all .6s;}

/* 컨텐츠02(전구)*/
.contents02 {max-width: 1300px; height: 1305px; margin: 0 auto; position: relative;}
.contents02 .item05 {border-radius: 10px; background: url(images/main/light_bulb_bg.png)no-repeat 25% center / cover; 
    width: 547px; height: 761px;}
.contents02 > h3 {font-size: 4.8rem; color: #fff; position: absolute; z-index: 1; top: 30px; left: -240px;}
/* 컨텐츠03 - 회사소개 */
.contents03 {max-width: 1300px; height: 1963px; margin: 0 auto; color: #333; padding-top: 100px;}
.contents03 h2 {font-size: 7.6rem; font-weight: 900;}
.contents03 p {font-size: 2.2rem; font-weight: 500;}
.contents03 ul {margin-bottom: 116px;}
.contents03 .item06 {margin-top: 55px;}
.contents03 .img_box {width: 650px; height: 418px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); border-radius: 40px 0;}
.contents03 .img_box:hover {filter: brightness(0.7); transform: scale(1.02); transition: all .5s;}
.contents03 .item06 > .img_box > a {background: url(images/main/item1.jpg) no-repeat center / cover; width: 100%; 
    height: 100%; border-radius: 40px 0;}
.contents03 .text_box {width: 35%; height: 418px; align-content: center;}
.contents03 .text_box h4 {font-size: 2.0rem; margin-bottom: 55px; font-weight: 500;}
.contents03 .text_box h3 {font-size: 4.0rem; margin-bottom: 40px; font-weight: 700;}
.contents03 .text_box p {font-size: 1.8rem; line-height: 28px; margin-bottom: 40px; font-weight: 500; text-align: justify;} 
/* view more 버튼 */
.view_line {width: 148px; height: 50px; font-size: 1.8rem; font-weight: 500; color: #fff; cursor: pointer;
    background: #114e7f; border-radius: 5px; padding-top: 10px; margin-right: 20px; transition: 0.2s;
    float: right; box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1); justify-items: center; display: flex;}
.view_line a {color: #fff; margin: 0 auto;}
.view_line:hover {background: #0d3c63; box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.2); border-radius: 0 40px;}
.contents03 .item07 > .img_box > a {background: url(images/main/item2.jpg) no-repeat center / cover; width: 100%; 
    height: 100%; border-radius: 40px 0;}
.contents03 .item08 > .img_box > a {background: url(images/main/item3.jpg) no-repeat center / cover; width: 100%; 
    height: 100%; border-radius: 40px 0;}

/* 반응형 */
@media screen and (max-width: 1700px) {
    .section_bg {display: none;}
    .mb_bg {background: url(images/main/wave_bg3.png) no-repeat center top; width: 100%; height: 4000px; 
        display: block; position: absolute; z-index: -999;}
    .contents01 {height: 600px;}
    .contents02 {height: 500px; margin-bottom: 100px; text-align: left; 
        align-content: center; background-size: contain;}
    .contents02 > h3 {font-size: 4.8rem; left: 50%; top: 40%;}
    .contents02 .item05 {width: 100%; height: 100%; border-radius: 30px;}
    .contents03 {padding: 0 20px; height: 2600px;}
    .contents03 h2 {text-align: center;}
    .contents03 p {text-align: center;}
    .contents03 ul {flex-wrap: wrap; margin-bottom: 0;}
    .contents03 .img_box {width: 100%;}
    .contents03 .text_box {width: 100%; height: 350px; text-align: center;}
    .contents03 .text_box h4 {margin-bottom: 20px;}
    .contents03 .text_box h3 {margin-bottom: 30px; font-size: 3.0rem;}
    .contents03 .text_box p {text-align: center;}
    .contents03 .text_box .view_line {float: none; margin: 0 auto;}
}

@media screen and (max-width: 1300px) {
    .contents01 {flex-wrap: wrap; padding: 0 20px;}
    .contents01 div {width: 50%; margin: 0; height: 50%; padding-right: 20px; margin-bottom: 20px;}
    .contents01 div:nth-child(2) {padding: 0;}
    .contents01 div:last-child {padding: 0;}
    .contents01 .item01 {height: 100%; background-position: 50% 80%;}
    .contents01 .item02 {height: 100%; background-position: 50% 80%;}
    .contents01 .item03 {height: 100%; background-position: 50% 50%;}
    .contents01 .item04 {height: 100%; background-position: 50% 75%;}
    .contents02 {margin: 100px 0;}
    .contents02 > h3 {font-size: 4.8rem;}
    .contents03 .text_box .view_line {margin-top: 40px;}
}
  
@media screen and (max-width: 900px) {
    .bx-wrapper .bx-pager {bottom: 360px;}
    .slider_text p:first-child {font-size: 3.0rem;}
    .slider_text p:nth-child(2) {font-size: 4.0rem;}
    .slider_text p:last-child {font-size: 1.6rem;}
    
    .contents01 div h3 {font-size: 2.8rem;}
    .contents02 {height: 30vh; margin: 100px 0 30px 0; padding: 0 20px;}
    .contents02 .item05 {height: 100%;}
    .contents02 > h3 {font-size: 2.6rem; left: 50%; top: 50%;}
    .contents03 > h2 {font-size: 4.4rem;}
    .contents03 > p {font-size: 2.0rem; margin-top: 10px;}
    .contents03 .text_box h4 {font-size: 1.8rem;}
    .contents03 .text_box h3 {margin-bottom: 10px; font-size: 2.8rem;}
    .contents03 .text_box p {font-size: 1.6rem;}
}

@media screen and (max-width: 600px) {
    .bx-wrapper .bx-pager {display: none;}
    .bx-wrapper {filter: brightness(0.7); transition: all 1s;}
    .slider_text {bottom: 20%; color: #fff;}
    .slider_text p:first-child {font-size: 2.8rem;}
    .slider_text p:nth-child(2) {font-size: 3.4rem;}
    .slider_text p:last-child {font-size: 1.4rem;}
    .mb_bg {height: 3700px;}
}

@media screen and (max-width: 550px) {
    .slider_text {padding: 0 5%;}
    .slider_text p:first-child {font-size: 2.4rem;}
    .slider_text p:nth-child(2) {font-size: 3.0rem;}

    .contents01 div h3 {font-size: 2.2rem;}
    .contents01 .item03 {background-position: 80% center;}
    .contents02 {margin-bottom: 50px;}
    .contents02 > h3 {font-size: 2.0rem;}
    .contents03 {height: 2000px;}
    .contents03 > h2 {font-size: 3.6rem;}
    .contents03 > p {font-size: 1.4rem;}
    .contents03 .img_box {height: 240px;}
    .contents03 .text_box p {font-size: 1.4rem;}
}

@media screen and (max-width: 450px) {
    .slider_text p:first-child {font-size: 2.2rem;}
    .slider_text p:nth-child(2) {font-size: 2.6rem;}

    .contents01 div h3 {font-size: 2.0rem;}
    .contents02 > h3 {font-size: 1.8rem;}
    .view_line {width: 110px;}
    .contents03 > h2 {font-size: 3.0rem;}
    /* .contents03 > p {font-size: 1.2rem;} */
    .contents03 .text_box h4 {font-size: 1.4rem;}
    .contents03 .text_box h3 {font-size: 2.0rem;}
    .contents03 .text_box p {font-size: 1.2rem; margin-bottom: 10px;}
}

@media screen and (max-width: 400px) {
    .slider_text {bottom: 20%; color: #fff; padding: 0 2%}
    .contents02 > h3 {font-size: 1.6rem;}
    .slider_text p:last-child {font-size: 1.2rem;}
    
}