header {
    background:rgba(255,255,255,0);
    border-bottom:none;
}
#container {
    padding: 0 0;
}
section.sus {
    min-height:100rem;
}
footer {
    margin-top:0;
}


/* visual */
.sus-visual.for-pc {

}
.sus-visual.for-pc .mainvs {

}
.sus-visual.for-pc .mainvs .swiper-slide {
    position:relative;max-width:100%;height:0;overflow: hidden;
    padding-top: 56.25%;
}
.sus-visual.for-pc .mainvs .swiper-slide::after {
    display:block;
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    background:transparent;
}
.sus-visual.for-pc .mainvs .swiper-slide iframe {
    position:absolute;width:100%;height:100%;top: 0;left: 0;
    z-index:0;
}
@media (min-aspect-ratio: 16/9) {
    .sus-visual.for-pc .mainvs .swiper-slide iframe { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .sus-visual.for-pc .mainvs .swiper-slide iframe { width: 300%; left: -100%; }
}

.sus-visual.for-pc .mainvs .swiper-slide video {
    position:absolute;width:100%;height:100%;top: 0;left: 0;
    z-index:0;
}
@media (min-aspect-ratio: 16/9) {
    .sus-visual.for-pc .mainvs .swiper-slide video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
    .sus-visual.for-pc .mainvs .swiper-slide video { width: 300%; left: -100%; }
}

/* 모바일에서 동영상 감추기 //-> */
@media (max-width:991px){
    .sus-visual.for-pc {
        display:none;
    }
    .sus-visual.for-pc .mainvs .swiper-slide {
        padding-top: 75%;
    } 
}
@media (max-width:580px){
    .sus-visual.for-pc .mainvs .swiper-slide {
        padding-top: 168%;
    }
}
@media (max-width:450px){
    .sus-visual.for-pc .mainvs .swiper-slide {
        padding-top: 168%;
    }
}
/* <-// */

.sus-visual.for-mobile {
    display:none;
}
/* 모바일에서 배너 보이기 //-> */
@media (max-width:991px){
    .sus-visual.for-pc {
        display:none;
    }
    .sus-visual.for-mobile {
        display:block;
        position:relative;
        height:70.5rem;
    }
    .sus-visual.for-mobile .bg-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;
    }    
    .sus-visual.for-mobile .bg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }  
    .sus-visual.for-mobile .slg {
        position:absolute;
        top:50%;
        left:50%;
        width:100%;
        transform:translate(-50%,-50%);
        z-index:3;
        padding:0 5rem;
    }      
    .sus-visual.for-mobile .slg span {
        padding-top:5rem;
        display:block;
        text-align:center;        
        font-size:6rem;
        color:#fff;
        font-weight:600;
        line-height:1.4;
    }
    .sus-visual.for-mobile .slg span em {
        display:block;
        font-style:normal;
    }
    .sus-visual.for-mobile .slg p {
        margin-top:4rem;
        text-align:center;
        font-size:2rem;
        color:#fff;
        font-weight:500;
        line-height:1.6;        
    }
    .sus-visual.for-mobile .slg p em {
        display:block;
        font-style:normal;
    }
    .sus-visual.for-mobile .slg p + p {
        margin-top:1rem;
    }
}
@media (max-width:580px){
    .sus-visual.for-mobile {
        height:42.5rem;
    }
    .sus-visual.for-mobile .slg span {
        font-size:4rem;
    }
    .sus-visual.for-mobile .slg p {
        margin-top:3rem;
        font-size:1.8rem;
    }
    .sus-visual.for-mobile .slg .slg2 {display:none;}
    .sus-visual.for-mobile .slg p em {
        display:block;
    }     
}
@media (max-width:450px){
    .sus-visual.for-mobile {
        height:34.5rem;
    }      
    .sus-visual.for-mobile .slg span {
        font-size:3rem;
    }
    .sus-visual.for-mobile .slg p {
        margin-top:2rem;
        font-size:1.6rem;
    }
}
/* <-// */


/* 타이틀 */
h2.atit {
    font-size:5rem;
    color:var(--red);
    font-weight:600;
}
p.atxt {
    margin-top:2rem;
    font-size:3rem;
    color:#000;
    font-weight:500;
    line-height:1.6;
}

@media (max-width:580px){
    h2.atit {
        font-size:3.6rem;
    }
    p.atxt {
        font-size:2rem;
    }
}



/* Sustainability */
.sustainability {
    padding:0 3.125%;
    margin-top:10rem;
}
.sustainability ul {
    margin-top:6rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sustainability ul li {
    display:flex;
    align-items:center;
    justify-content:center;
    width:30rem;
    height:30rem;
    border:solid 1px var(--red);
    border-radius:100vh;
    margin:0 -1rem;
}
.sustainability ul li div {

}
.sustainability ul li div span {
    font-size:2rem;
    color:var(--red);
    font-weight:600;
}
.sustainability ul li div h3 {
    margin-top:1rem;
    font-size:3.4rem;
    color:#000;
    font-weight:600;
}

@media (max-width:1000px){
    .sustainability p.atxt br {
        display:none;
    }
}
@media (max-width:820px){
    .sustainability ul li {
        width:25rem;
        height:25rem;
    }
}
@media (max-width:680px){
    .sustainability ul li {
        width:20rem;
        height:20rem;
    }
    .sustainability ul li div span {
        font-size:1.8rem;
    }
    .sustainability ul li div h3 {
        font-size:3rem;
    }
}
@media (max-width:550px){
    .sustainability ul li {
        width:16rem;
        height:16rem;
    }
    .sustainability ul li div span {
        font-size:1.6rem;
    }
    .sustainability ul li div h3 {
        font-size:2.6rem;
    }
}
@media (max-width:450px){
    .sustainability {
        padding:0 5%;
        margin-top:6rem;
    }
}
@media (max-width:380px){
    .sustainability ul li {
        width:15rem;
        height:15rem;
    }
    .sustainability ul li div span {
        font-size:1.6rem;
    }
    .sustainability ul li div h3 {
        font-size:2.2rem;
    }
}


/* Innovate */
.innovate {
    padding:0 3.125%;
    margin-top:18rem;
}
.innovate ul {
    margin-top:6rem;
    display:flex;
    gap:5rem;
}
.innovate ul li {   
    flex:1;
}
.innovate ul li .thumb img {   
    width:100%;
}
.innovate ul li .name {  
    margin-top:2rem; 
    font-size:2rem;
    color:#000;
    font-weight:600;
}
.innovate ul li .memo {   
    margin-top:2rem; 
    font-size:1.8rem;
    color:#757575;
    font-weight:500;
    line-height:1.6;
}

@media (max-width:1220px){
    .innovate p.atxt br {
        display:none;
    }
}
@media (max-width:1000px){
    .innovate ul {
        gap:3rem;
    }
}
@media (max-width:780px){
    .innovate ul {
        gap:2rem;
    }
}
@media (max-width:450px){
    .innovate {
        padding:0 5%;
        margin-top:10rem;
    }
    .innovate ul {
        flex-direction:column;
        gap:5rem;
    }
}

/* Improve */
.improve {
    padding:0 3.125%;
    margin-top:18rem;
}
.improve ul {
    margin-top:6rem;
    display:flex;
    gap:8rem;
}
.improve ul li {   
    flex:1;
}
.improve ul li .thumb img {   
    width:100%;
}
.improve ul li .name {  
    margin-top:2rem; 
    font-size:2rem;
    color:#000;
    font-weight:600;
}
.improve ul li .memo {   
    margin-top:2rem; 
    font-size:1.8rem;
    color:#757575;
    font-weight:500;
    line-height:1.6;
}

@media (max-width:1140px){
    .improve p.atxt br {
        display:none;
    }
}
@media (max-width:1000px){
    .improve ul {
        gap:5rem;
    }
}
@media (max-width:780px){
    .improve ul {
        gap:3rem;
    }
}
@media (max-width:450px){
    .improve {
        padding:0 5%;
        margin-top:10rem;
    }
    .improve ul {
        flex-direction:column;
        gap:5rem;
    }
}


/* Interact */
.interact {
    padding:10rem 3.125%;
    margin-top:18rem;
    background:#f5f5f5;
}
.interact .bn-logo {
    margin-top:6rem;
}
.interact .bn-logo ul {
    display:flex;
    gap:6rem;
    background:url("../png/sus_interact_x.png") no-repeat center;
    background-size:2.3rem auto;
}
.interact .bn-logo ul li {
    flex:1;
    background:#fff;
    height:12rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    font-size:1.8rem;
    color:#000;
    font-weight:600;
    padding:0 2rem;
}
.interact .bn-logo ul li img {
    max-width:100%;
}
.interact .pans {
    padding:6rem 0;
    text-align:center;
}
.interact .pans .p1 {
    font-size:3.6rem;
    color:#000;
    font-weight:600;
}
.interact .pans .p2 {
    margin-top:3rem;
    font-size:6rem;
    color:#000;
    font-weight:750;
}
.interact .pans .p3 {
    margin-top:3rem;
    font-size:3rem;
    color:#000;
    font-weight:500;
}

@media (max-width:1250px){
    .interact p.atxt br {
        display:none;
    }
}
@media (max-width:800px){
    .interact .bn-logo ul {
        flex-wrap:wrap;
    }
    .interact .bn-logo ul li {
        flex-basis:100%;
    }
    .interact .pans .p1 {
        font-size:3rem;
    }
    .interact .pans .p2 {
        font-size:5rem;
    }
    .interact .pans .p3 {
        font-size:2.6rem;
    }    
}
@media (max-width:550px){
    .interact .bn-logo ul li.neoflam {
        flex-direction:column;
    }
    .interact .pans .p1 {
        font-size:2.6rem;
    }
    .interact .pans .p2 {
        font-size:4rem;
    }
    .interact .pans .p3 {
        font-size:2.2rem;
    }     
}


.interact .step {
    position:relative;
    margin-top:6rem;
    background:#fff;
}
.interact .step::before {
    display:block;
    content:"";
    width:25.4rem;
    height:27.1rem;
    position:absolute;
    top:-65%;
    left:2rem;
    background:url("../png/sus_interact_bg1.png") no-repeat center;
    background-size:contain;
}
.interact .step::after {
    display:block;
    content:"";
    width:24.3rem;
    height:26.5rem;
    position:absolute;
    top:-65%;
    right:0;
    background:url("../png/sus_interact_bg2.png") no-repeat center;
    background-size:contain;
}
.interact .step ul {    
    background:url("../png/sus_step_arr.png") no-repeat center;
    background-size:7.8rem auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20rem;
    padding:6rem 6rem;
}
.interact .step ul li {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
}
.interact .step ul li .txt {
    flex:1;
}
.interact .step ul li .txt span {
    display:inline-block;
    font-size:1.6rem;
    color:#fff;
    font-weight:600;
    padding:1rem 2rem;
    background:var(--red);
    border-radius:100vh;
}
.interact .step ul li .txt p {
    margin-top:2rem;
    font-size:2rem;
    color:#000;
    font-weight:600;
    line-height:1.6;
}
.interact .step ul li .img {
    flex:1;
}
.interact .step ul li .img img {
    max-width:100%;
}

@media (max-width:1000px){
    .interact .step::before {
        display:none;
    }
    .interact .step::after {
        display:none;
    }   
    .interact .step ul {
        align-items:flex-start;
        gap:10rem;
        padding:3rem 3rem;        
    } 
    .interact .step ul li {
        gap:2rem;
        flex-direction:column;
        text-align:center;        
    }
}
@media (max-width:680px){
    .interact {
        margin-top:13rem;
    }
}
@media (max-width:450px){
    .interact {
        padding:10rem 5%;
        margin-top:10rem;
    }
}

.sus .bottom {
    height:70rem;
    padding:0 3.125%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:url("../jpg/sus_bottom_bg.jpg") no-repeat center fixed;
    background-size:cover;
}
.sus .bottom .p1 {
    font-size:3.5rem;
    color:#fff;
    font-weight:500;
    text-align:center;
    line-height:1.6;
    word-break:keep-all; 
    word-wrap:break-word; 
}
.sus .bottom .p2 {
    margin-top:6rem;
    font-size:3.5rem;
    color:#fff;
    font-weight:750;
    text-align:center;
    line-height:1.6;
}

@media (max-width:1000px){
    .sus .bottom {
        height:50rem;
    }
    .sus .bottom .p1 {
        font-size:2.5rem;
    }
    .sus .bottom .p2 {
        margin-top:4rem;
        font-size:2.5rem;
    }
}
@media (max-width:500px){
    .sus .bottom {
        height:40rem;
    }
    .sus .bottom .p1 {
        font-size:2rem;
    }
    .sus .bottom .p2 {
        margin-top:3rem;
        font-size:2rem;
    }
}
@media (max-width:450px){
    .sus .bottom {
        padding:0 5%;
    }
}


/* */
.sus .gall {
    margin-top:6rem;
    display:flex;
    gap:8rem;
}
.sus .gall li {   
    flex:1;
}
.sus .gall li .thumb img {   
    width:100%;
}
.sus .gall li .name {  
    margin-top:2rem; 
    font-size:2rem;
    color:#000;
    font-weight:600;
}
.sus .gall li .memo {   
    margin-top:2rem; 
    font-size:1.8rem;
    color:#757575;
    font-weight:500;
    line-height:1.6;
}

@media (max-width:1140px){
    .sus p.atxt br {
        display:none;
    }
}
@media (max-width:1000px){
    .sus .gall {
        gap:5rem;
    }
}
@media (max-width:780px){
    .sus .gall {
        gap:3rem;
    }
}
@media (max-width:450px){
    .sus {
        
    }
    .sus .gall {
        flex-direction:column;
        gap:5rem;
    }
}