@media screen and (min-width:1201px) {  

#aboutTopbanner {position: relative; height: 400px; background-image: url(../img/aboutTopbanner.jpg);
    background-position: center ; background-size: cover; background-color: 0,0,0,0,0.5;}
#aboutTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
#aboutTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
#aboutTopbanner .top_text p{font-size: 18px; color: #FFF;}


#title {position: relative; width: 100%; height: 500px; background-image: url(../img/About_JamesDyson.jpg); background-size: cover; opacity: 0;}
#title .title_img {width: 100%;}
#title .title_img img{width: 100%;}
#title .text_box{position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%);}
#title .text_box h4{font-size: 50px; font-weight: 700; color: #79B928;}
#title .text_box p {width: 50%; margin-top: 25px; font-size: 18px;
font-weight: 400; color: #000;}


.contents {position: relative; width: 100%; max-width: 1256px; margin: 0 auto;} 
.contents h2 {text-align: center; font-size: 40px; font-weight: 700; color: #000;}
.contents .contents_wrap{width: 100%; position: relative;  display: flex; justify-content: space-between; margin-top: 80px;}
.contents .contents_wrap .contents_img{position: relative; width: 50%; }
.contents .contents_wrap .contents_img img{width: 100%;}
.contents .contents_wrap .contents_text{position: relative; width: 50%;}
.contents .contents_wrap .contents_text .text_box_wrap{position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; width: 100%;}
.contents .contents_wrap .contents_text h4{font-size: 30px; font-weight: 700; color: #000; margin-bottom: 40px;}
.contents .contents_wrap .contents_text p {font-size: 18px; font-weight: 400; color: #666;width: 70%; margin-top: 24px;}
.contents_right{position: absolute; margin-left: 150px;}
.contents_M {display: none;}



#midbanner {position: relative; height: 700px; background-image: url(../img/world.jpg);background-position: center ; background-size: cover; margin-top: -100px; max-width: 1256px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}
#midbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
#midbanner .top_text h2{font-size: 32px; font-weight: bold;color: #000; margin-bottom: 20px;}
#midbanner .top_text p{font-size: 18px; color: #000; margin-bottom: 15px;}





#esgbanner {position: relative; height: 324px; background-image: url(../img/esgbannerbg.jpg);background-position: center ; background-size: cover; max-width: 1256px; margin: 0 auto; margin-bottom: 100px;}
#esgbanner .top_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
#esgbanner .top_text h2{font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 20px;}
#esgbanner .top_text p{font-size: 20px; color: #fff; margin-bottom: 10px; font-weight: 500;}

#esgbanner .top_text .btn{position: relative;background-color: #79B928;color: #fff;width: 56px;height: 56px;display: flex;justify-content: center;align-items: center;transition-duration: 0.3s; overflow: hidden;}

#esgbanner .top_text a::before{ content: ''; position: absolute;  right: 23px;  width: 10px;  height: 10px; border-top:3px solid #fff; border-right:3px solid #fff;  transform: rotate(45deg); transition-duration: 0.3s;}
#esgbanner:hover .top_text a::before{transform: rotate(45deg) translate(50px,-50px);}
#esgbanner:hover .top_text a{ width: 200px; transition-delay: 0.3s;}
#esgbanner .top_text a::after{content: '';
position: absolute; left: -50px; right: 23px; width: 10px; height: 10px; border-top:3px solid #fff;  border-right:3px solid #fff;  transform: rotate(45deg) translate(-50px,50px); transition-duration: 0.3s;}
#esgbanner:hover .top_text a::after{transform: rotate(45deg) translate(50px,-50px); transition-delay: 0.5s;}
#esgbanner .top_text a span{ opacity: 0; visibility: hidden;
 transition: 0.3s;font-size: 16px;}
#esgbanner:hover .top_text a span{ visibility: visible;opacity: 1; color: #fff;transition-delay: 0.5s;font-size: 16px; transform: translateX(10px); }


.scroll_1 .contents_img{ left: -100px; opacity: 0;}
.scroll_1 .contents_text{left: 100px; opacity: 0;}


.scroll_2 .contents_img{ left: 100px; opacity: 0;}
.scroll_2 .contents_text{left: -100px; opacity: 0;}

.scroll_3 .contents_img{ left: -100px; opacity: 0;}
.scroll_3 .contents_text{left: 100px; opacity: 0;}

.scroll_4 .contents_img{ left: 100px; opacity: 0;}
.scroll_4 .contents_text{left: -100px; opacity: 0;}
}










@media screen and (min-width:901px) and (max-width:1200px) {

    #aboutTopbanner {position: relative; height: 400px; background-image: url(../img/aboutTopbanner.jpg);
        background-position: center ; background-size: cover; background-color: 0,0,0,0,0.5;}
    #aboutTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #aboutTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #aboutTopbanner .top_text p{font-size: 18px; color: #FFF;}
    
    
    #title {position: relative; width: 100%; height: 400px; background-image: url(../img/About_JamesDyson.jpg);  background-size: cover; opacity: 0;}
    #title .title_img {width: 100%;}
    #title .title_img img{width: 100%;}
    #title .text_box{position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%);}
    #title .text_box h4{font-size: 34px; font-weight: 700; color: #79B928;}
    #title .text_box p {width: 60%; margin-top: 25px; font-size: 18px;
    font-weight: 400; color: #000;}
    
    
    .contents {position: relative; width: 100%; max-width: 1256px; margin: 0 auto;} 
    .contents h2 {text-align: center; font-size: 40px; font-weight: 700; color: #000;}
    .contents .contents_wrap{width: 100%; position: relative;  display: flex; justify-content: space-between; margin-top: 80px;}
    .contents .contents_wrap .contents_img{position: relative; width: 50%; padding: 40px; }
    .contents .contents_wrap .contents_img img{width: 100%;}
    .contents .contents_wrap .contents_text{position: relative; width: 50%;}
    .contents .contents_wrap .contents_text .text_box_wrap{position: absolute; transform: translate(-50%,-50%); top: 50%; left: 40%; width: 120%;}
    .contents .contents_wrap .contents_text h4{font-size: 28px; font-weight: 700; color: #000; margin-bottom: 40px;}
    .contents .contents_wrap .contents_text p {font-size: 16px; font-weight: 400; color: #666;width: 70%; margin-top: 24px;}
    .contents_left {position: absolute; transform: translateX(30%);}
    .contents_right{position: absolute; margin-left: 150px;}
    .contents_M {display: none;}


    #midbanner {position: relative; height: 500px; background-image: url(../img/world.jpg);background-position: center ; background-size: cover; margin-top: -100px; max-width: 1256px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}
    #midbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #midbanner .top_text h2{font-size: 30px; font-weight: bold;color: #000; margin-bottom: 20px;}
    #midbanner .top_text p{font-size: 16px; color: #000; margin-bottom: 15px;}
    
    
    
    
    
    #esgbanner {position: relative; height: 324px; background-image: url(../img/esgbannerbg.jpg);background-position: center ; background-size: cover; max-width: 1256px; margin: 0 auto; margin: 0 40px 100px 40px;}
    #esgbanner .top_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #esgbanner .top_text h2{font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 20px;}
    #esgbanner .top_text p{font-size: 20px; color: #fff; margin-bottom: 10px; font-weight: 500;}
    
    #esgbanner .top_text .btn{position: relative;background-color: #79B928;color: #fff;width: 56px;height: 56px;display: flex;justify-content: center;align-items: center;transition-duration: 0.3s; overflow: hidden;}
    
    #esgbanner .top_text a::before{ content: ''; position: absolute;  right: 23px;  width: 10px;  height: 10px; border-top:3px solid #fff; border-right:3px solid #fff;  transform: rotate(45deg); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::before{transform: rotate(45deg) translate(50px,-50px);}
    #esgbanner:hover .top_text a{ width: 200px; transition-delay: 0.3s;}
    #esgbanner .top_text a::after{content: '';
    position: absolute; left: -50px; right: 23px; width: 10px; height: 10px; border-top:3px solid #fff;  border-right:3px solid #fff;  transform: rotate(45deg) translate(-50px,50px); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::after{transform: rotate(45deg) translate(50px,-50px); transition-delay: 0.5s;}
    #esgbanner .top_text a span{ opacity: 0; visibility: hidden;
     transition: 0.3s;font-size: 16px;}
    #esgbanner:hover .top_text a span{ visibility: visible;opacity: 1; color: #fff;transition-delay: 0.5s;font-size: 16px; transform: translateX(10px); }

    
    .scroll_1 .contents_img{ left: -100px; opacity: 0;}
    .scroll_1 .contents_text{left: 100px; opacity: 0;}
    
    
    .scroll_2 .contents_img{ left: 200px; opacity: 0;}
    .scroll_2 .contents_text{left: -200px; opacity: 0;}
    
    .scroll_3 .contents_img{ left: -100px; opacity: 0;}
    .scroll_3 .contents_text{left: 100px; opacity: 0;}
    
    .scroll_4 .contents_img{ left: 200px; opacity: 0;}
    .scroll_4 .contents_text{left: -200px; opacity: 0;}    
}
















@media screen and (min-width:601px) and (max-width:900px) {

    #aboutTopbanner {position: relative; height: 300px; background-image: url(../img/aboutTopbanner.jpg);
        background-position: center ; background-size: cover;}
    #aboutTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #aboutTopbanner .top_text h2{font-size: 34px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #aboutTopbanner .top_text p{font-size: 18px; color: #FFF;}
    
    
    #title {position: relative; width: 100%; height: 300px; background-image: url(../img/About_JamesDyson.jpg);  background-size: cover; opacity: 0;}
    #title .title_img {width: 100%;}
    #title .title_img img{width: 100%;}
    #title .text_box{position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%);}
    #title .text_box h4{font-size: 30px; font-weight: 700; color: #79B928;}
    #title .text_box p {width: 80%; margin-top: 25px; font-size: 18px;
    font-weight: 400; color: #000;}
    
    
    .contents {position: relative; width: 100%; max-width: 1256px; margin: 0 auto;}  
    .contents_no {display: none;}
    .contents h2 {text-align: center; font-size: 40px; font-weight: 700; color: #000;}
    .contents .contents_wrap{width: 100%; position: relative;  display: flex; justify-content: space-between; margin-top: 80px; flex-wrap: wrap;}
    .contents .contents_wrap .contents_img{position: relative; width: 100%; padding: 40px; }
    .contents .contents_wrap .contents_img img{width: 100%;}
    .contents .contents_wrap .contents_text{position: relative; width: 100%;}
    .contents .contents_wrap .contents_text .text_box_wrap{position: relative; margin-left: 40px;}
    .contents .contents_wrap .contents_text h4{font-size: 28px; font-weight: 700; color: #000; margin-bottom: 40px;}
    .contents .contents_wrap .contents_text p {font-size: 16px; font-weight: 400; color: #666;width: 85%; margin-top: 24px;}

    
    #midbanner {position: relative; height: 500px; background-image: url(../img/world.jpg);background-position: center ; background-size: cover; margin-top: -100px; max-width: 1256px; margin: 0 auto; margin-bottom: 50px; opacity: 0;}
    #midbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%;}
    #midbanner .top_text h2{font-size: 30px; font-weight: bold;color: #000; margin-bottom: 20px;}
    #midbanner .top_text p{font-size: 16px; color: #000; width: 70%; margin: 0 auto; margin-bottom: 15px;}
    
    
    
    
    
    #esgbanner {position: relative; height: 324px; background-image: url(../img/esgbannerbg.jpg);background-position: center ; background-size: cover; max-width: 1256px; margin: 0 auto; margin: 0 40px 100px 40px;}
    #esgbanner .top_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #esgbanner .top_text h2{font-size: 40px; font-weight: 700; color: #fff; margin-bottom: 20px;}
    #esgbanner .top_text p{font-size: 20px; color: #fff; margin-bottom: 10px; font-weight: 500;}
    
    #esgbanner .top_text .btn{position: relative;background-color: #79B928;color: #fff;width: 56px;height: 56px;display: flex;justify-content: center;align-items: center;transition-duration: 0.3s; overflow: hidden;}
    
    #esgbanner .top_text a::before{ content: ''; position: absolute;  right: 23px;  width: 10px;  height: 10px; border-top:3px solid #fff; border-right:3px solid #fff;  transform: rotate(45deg); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::before{transform: rotate(45deg) translate(50px,-50px);}
    #esgbanner:hover .top_text a{ width: 200px; transition-delay: 0.3s;}
    #esgbanner .top_text a::after{content: '';
    position: absolute; left: -50px; right: 23px; width: 10px; height: 10px; border-top:3px solid #fff;  border-right:3px solid #fff;  transform: rotate(45deg) translate(-50px,50px); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::after{transform: rotate(45deg) translate(50px,-50px); transition-delay: 0.5s;}
    #esgbanner .top_text a span{ opacity: 0; visibility: hidden;
     transition: 0.3s;font-size: 16px;}
    #esgbanner:hover .top_text a span{ visibility: visible;opacity: 1; color: #fff;transition-delay: 0.5s;font-size: 16px; transform: translateX(10px); }
 
    
    .scroll_1 .contents_img{ left: -100px; opacity: 0;}
    .scroll_1 .contents_text{left: 100px; opacity: 0;}
    
    
    .scroll_2 .contents_img{ left: 100px; opacity: 0;}
    .scroll_2 .contents_text{left: -100px; opacity: 0;}
     
    .scroll_3 .contents_img{ left: 100px; opacity: 0;}
    .scroll_3 .contents_text{left: -100px; opacity: 0;}
     
    .scroll_5 .contents_img{ left: 100px; opacity: 0;}
    .scroll_5 .contents_text{left: -100px; opacity: 0;}      

    .scroll_6 .contents_img{ left: 100px; opacity: 0;}
    .scroll_6 .contents_text{left: -100px; opacity: 0;}          
}


























@media screen and (max-width:600px) {


    #aboutTopbanner {position: relative; height: 300px; background-image: url(../img/aboutTopbanner.jpg);
        background-position: center ; background-size: cover;}
    #aboutTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #aboutTopbanner .top_text h2{font-size: 30px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #aboutTopbanner .top_text p{font-size: 15px; color: #FFF;}
    
    
    #title {position: relative; width: 100%; height: 300px; background-image: url(../img/About_JamesDyson.jpg);  background-size: cover; opacity: 0;}
    #title .title_img {width: 100%;}
    #title .title_img img{width: 100%;}
    #title .text_box{position: absolute; width: 100%;}
    #title .text_box h4{font-size: 26px; font-weight: 700; color: #79B928; margin: 0 auto; width: 80%; margin-top: 70px;}
    #title .text_box p {width: 80%; margin: 0 auto; margin-top: 25px; font-size: 16px;
    font-weight: 400; color: #000;}
    
    
    .contents {position: relative; width: 100%; max-width: 1256px; margin: 0 auto;}  
    .contents_no {display: none;}
    .contents h2 {text-align: center; font-size: 30px; font-weight: 700; color: #000;}
    .contents .contents_wrap{width: 100%; position: relative;  display: flex; justify-content: space-between; margin-top: 40px; flex-wrap: wrap;}
    .contents .contents_wrap .contents_img{position: relative; width: 100%; padding: 40px; }
    .contents .contents_wrap .contents_img img{width: 100%;}
    .contents .contents_wrap .contents_text{position: relative; width: 100%;}
    .contents .contents_wrap .contents_text .text_box_wrap{position: relative; margin-left: 40px;}
    .contents .contents_wrap .contents_text h4{font-size: 26px; font-weight: 700; color: #000; margin-bottom: 40px;}
    .contents .contents_wrap .contents_text p {font-size: 14px; font-weight: 400; color: #666;width: 85%; margin-top: 24px;}

    
    #midbanner {position: relative; height: 500px; background-image: url(../img/world.jpg);background-position: center ; background-size: cover; margin-top: -100px; max-width: 1256px; margin: 0 auto; opacity: 0;}
    #midbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%;}
    #midbanner .top_text h2{font-size: 26px; font-weight: bold;color: #000; margin-bottom: 20px;}
    #midbanner .top_text p{font-size: 14px; color: #000; width: 70%; margin: 0 auto; margin-bottom: 15px;}
    
    
    
    
    
    #esgbanner {position: relative; height: 250px; background-image: url(../img/esgbannerbg.jpg);background-position: center ; background-size: cover; max-width: 1256px; margin: 0 auto; margin: 0 40px 100px 40px;}
    #esgbanner .top_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #esgbanner .top_text h2{font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 20px;}
    #esgbanner .top_text p{font-size: 18px; color: #fff; margin-bottom: 10px; font-weight: 500;}
    
    #esgbanner .top_text .btn{position: relative;background-color: #79B928;color: #fff;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;transition-duration: 0.3s; overflow: hidden;}
    
    #esgbanner .top_text a::before{ content: ''; position: absolute;  right: 16px;  width: 8px;  height: 8px; border-top:3px solid #fff; border-right:3px solid #fff;  transform: rotate(45deg); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::before{transform: rotate(45deg) translate(50px,-50px);}
    #esgbanner:hover .top_text a{ width: 200px; transition-delay: 0.3s;}
    #esgbanner .top_text a::after{content: '';
    position: absolute; left: -50px; right: 23px; width: 10px; height: 10px; border-top:3px solid #fff;  border-right:3px solid #fff;  transform: rotate(45deg) translate(-50px,50px); transition-duration: 0.3s;}
    #esgbanner:hover .top_text a::after{transform: rotate(45deg) translate(50px,-50px); transition-delay: 0.5s;}
    #esgbanner .top_text a span{ opacity: 0; visibility: hidden;
     transition: 0.3s;font-size: 14px;}
    #esgbanner:hover .top_text a span{ visibility: visible;opacity: 1; color: #fff;transition-delay: 0.5s;font-size: 16px; transform: translateX(10px); }
  

    .scroll_1 .contents_img{ left: -100px; opacity: 0;}
    .scroll_1 .contents_text{left: 100px; opacity: 0;}
    
    
    .scroll_2 .contents_img{ left: 100px; opacity: 0;}
    .scroll_2 .contents_text{left: -100px; opacity: 0;}
     
    .scroll_3 .contents_img{ left: 100px; opacity: 0;}
    .scroll_3 .contents_text{left: -100px; opacity: 0;}
     
    .scroll_5 .contents_img{ left: 100px; opacity: 0;}
    .scroll_5 .contents_text{left: -100px; opacity: 0;}      

    .scroll_6 .contents_img{ left: 100px; opacity: 0;}
    .scroll_6 .contents_text{left: -100px; opacity: 0;}        
}