/* topBanner start */ #topBanner{position: relative; height: 100vh; background-image: url(../img/top_banner_01.jpg); background-position: right; background-repeat: no-repeat; background-size: cover; overflow: hidden;} @media screen and (max-width:910px){#topBanner{background-image: url(../img/top_banner_01.jpg); background-position: bottom center;}} #topBanner ul{position: relative; height: 100vh;} #topBanner ul li{position: absolute; top: 50%; left: 30%; transform: translate(-50%,-50%); display: none; color: #f1f1f1; text-shadow: 0 0 6px rgba(0,0,0,0.6);} #topBanner ul li:nth-child(1){display: block} #topBanner ul li h2{font-size: 3vw; font-weight: bold; margin-bottom: 40px; top: -100px;} #topBanner ul li h2 br{display: none;} #topBanner ul li p{font-size: 1.1em; margin-bottom: 40px;} #topBanner ul li:nth-child(4)>p:nth-child(2){margin-bottom: 10px;} #topBanner ul li p br:nth-child(2){display: none;} #topBanner ul li:nth-child(2)~li{color: #212121; text-shadow: none;} #topBanner ul li:nth-child(2)~li button{color: #212121; text-shadow: none; border-color: #212121;} #topBanner .top_banner_text button{border: 1px solid #fff; color: #f1f1f1; background: none; padding: 15px 30px; font-size: 1em; text-shadow: 0 0 6px rgba(0,0,0,0.6); box-shadow: 0 0 6px rgba(0,0,0,0.2); box-sizing: border-box; transition-duration: 0.5s; cursor: pointer;} #topBanner .top_banner_text button:hover{border-color: #00B8FC; background-color: #00B8FC;} #topBanner .top_banner_controls{position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); height: 40px; display: flex; padding: 0 100px;} #topBanner .top_banner_controls li{position: relative; left: 0; transform: translateX(0); display: block; height: 16px; width: 16px; background-color: #fff; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.5); box-sizing: border-box; transition-duration: 0.5s; cursor: pointer; margin: 0 10px;} #topBanner .top_banner_controls li:hover{border-color: #DCFD00;} #topBanner .top_banner_controls li.top_banner_select{background-color: #DCFD00; border-color: #DCFD00; width: 40px;} #topBanner>button{background: none; border: none; height: 100vh; width: 9%; opacity: 0.1; transition-duration: 0.5s; position: absolute;} #topBanner>button.top_prev{left: 0%; top: 50%; transform: translateY(-50%);} #topBanner>button.top_next{right: 0%; top: 50%; transform: translateY(-50%);} #topBanner>button img{margin: 0 auto;} #topBanner>button:hover{background-color: rgba(0,184,252,0.5); opacity: 1;} /* topBanner end */ /* sustainability start */ #sustainability{position: relative; height: 100vh; min-height: 800px; background-image: url(../img/cork-office-building.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #sustainability .sustainability_inner{position: relative; width: 90%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; overflow: hidden;} #sustainability .sustainability_title{position: relative; width: 60%; color: #f1f1f1;} #sustainability .sustainability_title h2{font-size: 3vw; font-weight: bold; margin-bottom: 40px; text-shadow: 0 0 8px rgba(0,0,0,0.7); opacity: 0; position: relative; left: -100px;} #sustainability .sustainability_title h2 span{font-size: 2.1vw; font-weight: 600; margin-bottom: 10px; text-shadow: 0 0 8px rgba(0,0,0,0.7);} #sustainability .sustainability_title p{font-size: 1.1em; text-shadow: 0 0 8px rgba(0,0,0,1); opacity: 0;} #sustainability .sustainability_box{position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;} #sustainability .sustainability_box li{background-color: rgba(0,0,0,0.6); padding: 10px; margin-bottom: 20px; cursor: pointer; position: relative; right: -200px; width: 45%; opacity: 0;} #sustainability .sustainability_box li:hover{background-color: rgba(0,184,252,0.9);} #sustainability .sustainability_box li>a{display: flex; flex-direction: column; justify-content: space-around; align-items: center; color: #212121;} #sustainability .sustainability_box li:hover>a>.sustainability_text h3{color: #212121;} #sustainability .sustainability_box li:hover>a>.sustainability_text p{color: #212121;} #sustainability .sustainability_box li>a>.sustainability_img{width: 50px;} #sustainability .sustainability_box li>a>.sustainability_img img{width: 100%;} #sustainability .sustainability_box li>a>.sustainability_text{text-align: center; color: #f1f1f1;} #sustainability .sustainability_box li>a>.sustainability_text h3{margin: 10px 0; font-weight: 600;} #sustainability .sustainability_box li>a>.sustainability_text p{font-size: 0.9em;} /* sustainability end */ /* product start */ #product{position: relative; background-image: url(../img/pattern.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 150px 0;} #product h2{font-size: 2.1em; font-weight: bold; color: #f1f1f1; text-align: center; opacity: 0;} #product h2 span{font-size: 0.9em; font-weight: 600;} #product .product_wrap{position: relative; width: 90%; max-width: 1400px; margin: 100px auto; display: flex; justify-content: space-between; overflow: hidden;} #product .product_wrap_m{display: none;} #product .product_controls{display: none;} #product .product_wrap .product_list:nth-child(2){justify-content: space-evenly;} #product .product_wrap .product_list{position: relative; width: 30%; display: flex; flex-direction: column; justify-content: space-around;} #product .product_wrap .product_list>a{display: flex; flex-direction: column; justify-content: space-between; color: #f1f1f1; position: relative; top: -100px; opacity: 0;} #product .product_wrap .product_list a .product_img{width: 100%; overflow: hidden;} #product .product_wrap .product_list a:hover .product_img img{transform: scale(1.1);} #product .product_wrap .product_list a .product_img img{width: 100%; transition-duration: 0.5s;} /* */ /* #product .product_wrap .product_list a .product_img::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(200,200,200,0.2); transform: translateX(-100%); transition-duration: 0.5s;} #product .product_wrap .product_list>a .product_img:hover::after{left: 150%; opacity: 1;} */ /* */ #product .product_wrap .product_list>a .product_img img{width: 100%;} #product .product_wrap .product_list>a .product_title{color: #f1f1f1; display: flex; justify-content: space-between; align-items: flex-end; margin: 10px 0;} #product .product_wrap .product_list>a .product_title p{font-size: 1.1em;} #product .product_wrap .product_list>a .product_title h3{font-size: 2em; font-weight: 600;} #product .product_wrap .product_list>a>p{margin-bottom: 40px;} /* product end */ /* socialContribution start */ #socialContribution{position: relative; background-image: url(../img/social_contribution.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} #socialContribution .socialContribution_title{position: relative; width: 60%; margin: 0 auto; color: #f1f1f1; text-align: center; margin-bottom: 80px; padding-top: 120px; padding-bottom: 80px;} #socialContribution .socialContribution_title h2{font-size: 2.1em; font-weight: bold; margin-bottom: 40px; text-shadow: 0 0 8px rgba(0,0,0,0.7); opacity: 0; position: relative; top: -100px;} #socialContribution .socialContribution_title h2 span{font-size: 0.9em; font-weight: 600; margin-bottom: 10px; text-shadow: 0 0 8px rgba(0,0,0,0.7);} #socialContribution .socialContribution_title p{font-size: 1.1em; text-shadow: 0 0 8px rgba(0,0,0,1); position: relative; opacity: 0; bottom: -100px;} #socialContribution .socialContribution_title div{width: 150px; margin: 0 auto; margin-top: 50px; border: 2px solid #f1f1f1; padding: 10px 20px; opacity: 0;} #socialContribution .socialContribution_title div img{width: 100%;} #socialContribution .social_box_wrap{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;} #socialContribution .social_box_wrap .social_box{width: 28%; height: 300px; background-color: rgba(0,0,0,0.6); padding: 10px; color: #f1f1f1; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 100px; transition-duration: 0.5s; opacity: 0;} #socialContribution .social_box_wrap .social_box h3{margin-bottom: 10px; font-size: 1.2em; font-weight: 600;} #socialContribution .social_box_wrap .social_box:hover{background-color: rgba(0,184,252,0.9); color: #212121;} #socialContribution .social_box_wrap .social_box .social_box_inner{height: 0; opacity: 0;} #socialContribution .social_box_wrap .social_box:hover .social_box_inner{height: 50%; opacity: 1;} #socialContribution .social_box_wrap .social_box .social_box_inner>p{margin: 20px 0; font-size: 0.9em; color: #212121;} #socialContribution .social_box_wrap .social_box .social_box_inner a{display: flex; justify-content: flex-end; align-items: center; color: #00B8FC; width: 220px; background-color: #fff; padding: 10px; margin-left: -5%; display: none; transition-duration: 0.5s; position: absolute; bottom: 30%;} #socialContribution .social_box_wrap .social_box .social_box_inner a:hover{background-color: #DCFD00;} #socialContribution .social_box_wrap .social_box .social_box_inner a>p{font-weight: bold;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect{display: flex; justify-content: space-between; width: 35px; margin-left: 10px;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect li:nth-child(1){opacity: 1.1;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect li:nth-child(2){opacity: 0.7;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect li:nth-child(3){opacity: 0.4;} /* socialContribution end */ /* giving start */ #giving{position: relative; background-image: url(../img/giving.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0;} #giving .giving_img{position: relative; opacity: 0;} #giving .giving_img img{width: 85%; margin: 0 auto; border-radius: 50%;} #giving .giving_text{margin: 40px 0; text-align: center; color: #212121; opacity: 0;} #giving .giving_text h3{font-size: 1.8em; margin-bottom: 10px; font-weight: 600;} #giving .giving_btn_wrap{opacity: 0;} #giving .giving_btn_wrap button{border: 1px solid #212121; background: none; color: #212121; padding: 10px 20px; box-sizing: border-box; transition-duration: 0.5s; font-weight: 600; margin: 0 10px;} #giving .giving_btn_wrap .giving_btn1{background-color: #212121; color: #f1f1f1;} #giving .giving_btn_wrap .giving_btn2{background-color: #fff; color: #212121; border-color: #fff;} #giving .giving_btn_wrap .giving_btn1:hover{background: none; color: #212121;} #giving .giving_btn_wrap .giving_btn2:hover{background: none; border-color: #212121;} /* giving end */ /* introduction start */ #introduction{position: relative; background-color: #212121; height: 800px;} #introduction .introduction_title{position: relative; padding-top: 120px; padding-bottom: 60px; text-align: center; color: #f1f1f1; top: 100px; opacity: 0;} #introduction .introduction_title h2{font-size: 2.1em; font-weight: bold; margin-bottom: 40px;} #introduction .introduction_title h2 span{font-size: 0.9em; font-weight: 600; margin-bottom: 10px;} #introduction .introduction_list{position: relative; width: 90%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; align-items: center;} #introduction .introduction_list .introduction_box_wrap{position: relative; width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: -1px; color: #f1f1f1; height: calc(100% + 120px); top: -100px; opacity: 0;} #introduction .introduction_list:first-child .introduction_box_wrap{margin-left: 0;} /* #introduction .introduction_list .introduction_box_wrap .introduction_box{width: 100%; border: 1px solid #fff; box-sizing: border-box; padding-left: 1px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 60px 0; border-radius: 20px; transition-duration: 0.5s;} */ #introduction .introduction_list .introduction_box_wrap .introduction_box{width: 100%; border: 1px solid #fff; box-sizing: border-box; padding-left: 1px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 60px 0; border-radius: 20px; background-color: #212121; position: relative;} #introduction .introduction_list:first-child .introduction_box_wrap .introduction_box{padding-left: 0;} #introduction .introduction_list .introduction_box_wrap .introduction_box img{width: 33%;} #introduction .introduction_list .introduction_box_wrap:nth-child(2) .introduction_box img{margin-left: 20px;} #introduction .introduction_list .introduction_box_wrap .introduction_box>h3{margin: 30px 0; font-size: 1.1em;} /* #introduction .introduction_list .introduction_box_wrap a{display: flex; align-items: center; padding: 20px 0; position: relative; display: none; transition-duration: 0.5s;} */ #introduction .introduction_list .introduction_box_wrap a{display: flex; align-items: center; padding: 20px 0; position: relative; display: none;} #introduction .introduction_list .introduction_box_wrap a>p{color: #00B8FC; margin-right: 10px; font-weight: 600; line-height: 20px;} #introduction .introduction_list .introduction_box_wrap a>img{width: 14px; height: 14px;} /* #introduction .introduction_list .introduction_box_wrap:hover .introduction_box{margin-top: -60px;} */ /* #introduction .introduction_list .introduction_box_wrap:hover a{display: flex;} */ #introduction .introduction_list .introduction_box_wrap:hover .introduction_box{background-color: #00B8FC;} /* #introduction .introduction_list .introduction_box_wrap:hover .introduction_box h3{font-weight: bold;} */ #introduction .introduction_list .introduction_box_wrap a::after{content: ''; display: block; width: 0%; height: 1px; background-color: #fff; position: absolute; bottom: 18px;} #introduction .introduction_list .introduction_box_wrap a:hover::after{width: 100%;} #introduction .introduction_list .introduction_box_wrap a{display: flex; display: none; padding: 0; padding-top: 10px; margin-bottom: -30px;} #introduction .introduction_list .introduction_box_wrap a::after{bottom: -5px;} /* introduction end */ /* PC */ @media screen and (min-width:1201){ #topBanner ul li{left: 10%;} } /* 타블랫 가로 */ @media screen and (min-width:801px) and (max-width:1200px) { /* topBanner start */ #topBanner ul li{left: 50%; text-align: center;} #topBanner ul li h2{font-size: 3.5vw; color: #fff;} #topBanner ul li p{font-size: 1.1em; color: #fff;} #topBanner ul li:nth-child(2)~li button{color: #fff; text-shadow: 0 0 0 6px rgba(0,0,0,0.7); border-color: #fff;} /* topBanner end */ /* sustainability start */ #sustainability{min-height: 0;} #sustainability .sustainability_inner{flex-direction: column; justify-content: center; align-items: center;} #sustainability .sustainability_title{width: 90%; text-align: center;} #sustainability .sustainability_title h2{margin-bottom: 30px; font-size: 3.5vw;} #sustainability .sustainability_title p br{display: none;} #sustainability .sustainability_box{flex-direction: row; justify-content: space-between; align-items: flex-start; margin-top: 60px; width: 100%; height: 30%;} #sustainability .sustainability_box li{width: 22%; height: 30%; transition-duration: 0.5s;} #sustainability .sustainability_box li>a{width: 100%; display: flex; align-items: center;} #sustainability .sustainability_box li>a>.sustainability_img{width: 40px;} #sustainability .sustainability_box li>a>.sustainability_text p{font-size: 0.8em; display: none;} #sustainability .sustainability_box li:hover{height: 55%;} #sustainability .sustainability_box li:hover>a>.sustainability_text p{display: block;} #sustainability .sustainability_box li>a>.sustainability_text p br{display: none;} /* sustainability end */ /* product start */ #product{padding: 100px 0;} #product h2{font-size: 1.9em;} #product .product_wrap{margin-bottom: 0;} #product .product_wrap .product_list>a .product_title p{font-size: 0.9em;} #product .product_wrap .product_list>a .product_title h3{font-size: 1.5em; font-weight: 600;} #product .product_wrap .product_list>a>p{font-size: 0.9em;} /* product end */ /* socialContribution start */ #socialContribution .socialContribution_title{width: 100%; padding: 100px 0; margin-bottom: 60px;} #socialContribution .socialContribution_title h2{font-size: 1.9em; margin-bottom: 30px;} #socialContribution .socialContribution_title h2 span{font-size: 0.9em; font-weight: 600; margin-bottom: 10px; text-shadow: 0 0 8px rgba(0,0,0,0.7);} #socialContribution .socialContribution_title p{font-size: 1em;} #socialContribution .socialContribution_title div{width: 130px;} #socialContribution .social_box_wrap .social_box{width: 29%; height: 250px; background-color: rgba(0,0,0,0.6); padding: 10px; color: #f1f1f1; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 100px;} #socialContribution .social_box_wrap .social_box h3{font-size: 1em;} #socialContribution .social_box_wrap .social_box p{font-size: 0.9em;} #socialContribution .social_box_wrap .social_box:hover .social_box_inner{height: 70%;} #socialContribution .social_box_wrap .social_box .social_box_inner>p{margin: 10px 0; font-size: 0.9em; height: 50%;} #socialContribution .social_box_wrap .social_box .social_box_inner a{font-size: 1em; line-height: 1.3em; margin-left: -18px; margin-top: 50px;} /* socialContribution end */ /* giving start */ #giving .giving_img img{width: 70%;} #giving .giving_text{margin: 30px 0;} #giving .giving_text h3{font-size: 1.6em; margin-bottom: 10px; font-weight: 600;} #giving .giving_text p{font-size: 1em;} /* giving end */ /* introduction start */ #introduction{height: 640px;} #introduction .introduction_title{padding-top: 100px;} #introduction .introduction_title h2{font-size: 1.9em;} #introduction .introduction_list{ padding-bottom: 100px;} #introduction .introduction_list .introduction_box_wrap .introduction_box{padding: 45px 0;} #introduction .introduction_list .introduction_box_wrap{height: calc(100% + 40px);} #introduction .introduction_list .introduction_box_wrap .introduction_box>h3{font-size: 1em; margin: 10px 0;} /* #introduction .introduction_list .introduction_box_wrap:hover .introduction_box{margin-top: -40px;} */ /* introduction end */ } /* 타블랫 세로 */ @media screen and (min-width:601px) and (max-width:800px) { /* topBanner start */ #topBanner ul li{left: 50%; text-align: center;} #topBanner ul li{text-align: center; width: 75%;} #topBanner ul li h2{font-size: 2.2em; margin-bottom: 20px; color: #F1F1F1; text-shadow: 0 0 6px rgba(0,0,0,1);} #topBanner ul li h2 br{display: block;} #topBanner ul li p{margin-bottom: 20px; color: #f1f1f1; text-shadow: 0 0 6px rgba(0,0,0,1);} #topBanner ul li p br{display: none;} #topBanner .top_banner_text button{border: 1px solid #fff; color: #212121; background-color: #fff; padding: 6px 15px; font-size: 0.9em; text-shadow: none; box-sizing: border-box; transition-duration: 0.5s;} #topBanner ul li:nth-child(2)~li br{display: none;} #topBanner ul li:nth-child(2)~li button{color: #212121; border-color: #f1f1f1; } /* #topBanner .top_banner_controls{top: 90%; left: 47%; transform: translateX(-50%);} */ /* topBanner end */ /* sustainability start */ #sustainability{min-height: 600px;} #sustainability .sustainability_inner{flex-direction: column; justify-content: center; align-items: center;} #sustainability .sustainability_title{width: 90%; text-align: center;} #sustainability .sustainability_title h2{margin-bottom: 30px; font-size: 4vw;} #sustainability .sustainability_title p{font-size: 1em; text-shadow: 0 0 6px rgba(0,0,0,1);} #sustainability .sustainability_title p br{display: none;} #sustainability .sustainability_box{flex-direction: row; justify-content: space-between; margin-top: 30px; width: 100%; flex-wrap: wrap;} #sustainability .sustainability_box li{width: 40%; height: 40%;} #sustainability .sustainability_box li>a{display: block; width: 100%; display: flex;} #sustainability .sustainability_box li>a>.sustainability_img{width: 40px;} #sustainability .sustainability_box li>a>.sustainability_text p{font-size: 0.8em; opacity: 1;} #sustainability .sustainability_box li>a>.sustainability_text p br{display: none;} /* sustainability end */ /* product start */ #product{padding-top: 80px; padding-bottom: 60px;} #product h2{font-size: 1.8em; font-weight: bold; color: #f1f1f1; text-align: center;} #product .product_wrap{display: flex; flex-direction: column; justify-content: space-between; margin: 60px auto;} #product .product_wrap .product_list{position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-around;} #product .product_wrap .product_list>a{width: 30%; display: flex; flex-direction: column; justify-content: flex-start; color: #f1f1f1;} #product .product_wrap .product_list>a .product_title{display: flex; justify-content: center; align-items: flex-end; flex-direction: column; margin-bottom: 40px;} #product .product_wrap .product_list>a .product_title p{font-size: 0.8em;} #product .product_wrap .product_list>a .product_title h3{font-size: 1.2em; font-weight: 600;} #product .product_wrap .product_list>a>p{margin-bottom: 40px; font-size: 0.8em; display: none;} /* product end */ /* socialContribution start */ #socialContribution .socialContribution_title{width: 90%; margin-bottom: 0px; padding-top: 80px; padding-bottom: 80px;} #socialContribution .socialContribution_title h2{font-size: 1.8em;} #socialContribution .socialContribution_title p{font-size: 1em;} #socialContribution .socialContribution_title div{width: 120px; margin-top: 40px; padding: 10px 20px;} #socialContribution .social_box_wrap .social_box{width: 28%; height: 180px; padding: 10px; transition-duration: 0.5s;} #socialContribution .social_box_wrap .social_box h3{font-size: 1.1em;} #socialContribution .social_box_wrap .social_box .social_box_inner>p{display: none;} /* #socialContribution .social_box_wrap .social_box .social_box_inner{transition-duration: 0.5s} */ #socialContribution .social_box_wrap .social_box:hover{background-color: rgba(0,184,252,0.9); color: #212121;} #socialContribution .social_box_wrap .social_box:hover .social_box_inner{height: 0%; opacity: 1;} /* #socialContribution .social_box_wrap .social_box .social_box_inner a{width: 120%; background-color: #fff; padding: 4%; margin-left: -50%; margin-top: 30px; opacity: 0;transition-duration: 0.5s;} #socialContribution .social_box_wrap .social_box .social_box_inner a:hover{background-color: #DCFD00;} */ #socialContribution .social_box_wrap .social_box:hover .social_box_inner a{margin-left: -17%; opacity: 1;} #socialContribution .social_box_wrap .social_box .social_box_inner a{width: 140px; bottom: 35%; font-size: 0.9em;} /* socialContribution end */ /* giving start */ #giving{padding: 80px 0;} #giving .giving_img img{width: 65%; margin: 0 auto; border-radius: 50%;} #giving .giving_text h3{font-size: 1.6em; margin-bottom: 10px; font-weight: 600;} #giving .giving_text p{font-size: 1em;} /* giving end */ /* introduction start */ #introduction{height: 600px;} #introduction .introduction_title{padding-top: 100px;} #introduction .introduction_title h2{font-size: 1.9em;} #introduction .introduction_list .introduction_box_wrap .introduction_box{padding: 30px 0;} #introduction .introduction_list .introduction_box_wrap{height: calc(100% + 30px);} #introduction .introduction_list .introduction_box_wrap .introduction_box>h3{font-size: 1em; margin: 10px 0;} /* #introduction .introduction_list .introduction_box_wrap:hover .introduction_box{margin-top: -40px;} */ /* introduction end */ } /* 모바일 */ @media screen and (max-width:600px) { /* topBanner start */ #topBanner ul li{left: 50%; text-align: center;} #topBanner ul li{text-align: center; width: 75%;} #topBanner ul li h2{font-size: 2em; margin-bottom: 20px; color: #F1F1F1; text-shadow: 0 0 6px rgba(0,0,0,1);} #topBanner ul li h2 br{display: block;} #topBanner ul li p{margin-bottom: 20px; color: #f1f1f1; text-shadow: 0 0 6px rgba(0,0,0,1); font-size: 0.9em;} #topBanner ul li p br{display: none;} #topBanner .top_banner_text button{border: 1px solid #fff; color: #212121; background-color: #fff; padding: 6px 15px; font-size: 0.9em; text-shadow: none; box-sizing: border-box; transition-duration: 0.5s;} #topBanner ul li:nth-child(2)~li br{display: none;} #topBanner ul li:nth-child(2)~li button{color: #212121; border-color: #f1f1f1; } /* #topBanner .top_banner_controls{top: 90%; left: 47%; transform: translateX(-50%);} */ /* topBanner end */ /* sustainability start */ #sustainability{height: 100vh; min-height: 640px;} #sustainability .sustainability_inner{flex-direction: column; justify-content: center; align-items: center;} #sustainability .sustainability_title{width: 90%; text-align: center;} #sustainability .sustainability_title h2{margin-bottom: 30px; font-size: 1.8em;} #sustainability .sustainability_title h2 span{font-size: 0.8em;} #sustainability .sustainability_title p{font-size: 0.9em; text-shadow: 0 0 6px rgba(0,0,0,1);} #sustainability .sustainability_title p br{display: none;} #sustainability .sustainability_box{flex-direction: row; justify-content: space-between; margin-top: 30px; width: 100%; flex-wrap: wrap;} #sustainability .sustainability_box li{width: 40%; height: 40%; display: flex; justify-content: center; align-items: center;} #sustainability .sustainability_box li>a{display: block; width: 100%; display: flex;} #sustainability .sustainability_box li>a>.sustainability_img{width: 40px;} #sustainability .sustainability_box li>a>.sustainability_text p{display: none;} #sustainability .sustainability_box li:hover>a>.sustainability_text h3{color: #F1F1F1;} #sustainability .sustainability_box li>a>.sustainability_text p br{display: none;} /* sustainability end */ /* product start */ #product{padding: 80px 0;} #product h2{font-size: 1.8em; font-weight: bold; color: #f1f1f1; text-align: center;} #product .product_wrap{display: none;} #product .product_wrap_m{width: 90%; margin: 0 auto; margin-top: 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;} #product .product_wrap_m a{display: flex; flex-direction: column; width: 48%; opacity: 0;} #product .product_wrap_m a:nth-child(4)~a{display: none;} #product .product_wrap_m a .product_img img{width: 100%;} #product .product_wrap_m a .product_title{display: flex; flex-direction: column; color: #fff; margin: 10px 0 20px 0; align-items: flex-end;} #product .product_wrap_m a .product_title p{font-size: 0.9em; font-weight: 400;} #product .product_wrap_m a .product_title h3{font-size: 1.2em; font-weight: 600;} #product .product_controls{display: flex; justify-content: space-between; position: relative; width: 50px; margin: 0 auto; margin-bottom: 40px; margin-top: 20px;} #product .product_controls li{width: 14px; height: 14px; border-radius: 7px; background-color: #f1f1f1;} #product .product_controls li.product_control_select{width: 24px; background-color: #DCFD00;} /* product end */ /* socialContribution start */ #socialContribution .socialContribution_title{width: 90%; margin-bottom: 60px; padding-top: 80px; padding-bottom: 0px;} #socialContribution .socialContribution_title h2{font-size: 1.8em;} #socialContribution .socialContribution_title p{font-size: 0.9em;} #socialContribution .socialContribution_title div{width: 120px; margin-top: 40px; padding: 10px 20px;} #socialContribution .social_box_wrap{flex-direction: column;} #socialContribution .social_box_wrap .social_box{width: 90%; height: 100%; padding: 10px; margin-bottom: 20px; cursor: pointer; transition-duration: 0.5s;} #socialContribution .social_box_wrap .social_box h3{font-size: 1.1em;} #socialContribution .social_box_wrap .social_box .social_box_inner>p{display: none;} #socialContribution .social_box_wrap .social_box:hover{background-color: rgba(0,184,252,0.9); color: #212121;} #socialContribution .social_box_wrap .social_box:hover .social_box_inner{height: 0%; opacity: 1;} #socialContribution .social_box_wrap .social_box .social_box_inner a:hover{background-color: #DCFD00;} */ #socialContribution .social_box_wrap .social_box:hover .social_box_inner a{margin-left: -17%; opacity: 1;} #socialContribution .social_box_wrap .social_box .social_box_inner{position: absolute; right: -5%; margin-top: 30px;} #socialContribution .social_box_wrap .social_box .social_box_inner a{width: 90px; position: relative; bottom: 10px; font-size: 0.8em; padding: 6px 15px 6px 0;} #socialContribution .social_box_wrap .social_box .social_box_inner a p{font-size: 0.8em;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect{display: flex; justify-content: space-between; width: 12px; margin-left: 5px; margin-top: -2px;} #socialContribution .social_box_wrap .social_box .social_box_inner a .impect li img{width: 7px;} /* socialContribution end */ /* giving start */ #giving{padding: 80px 0;} #giving .giving_img img{width: 50%; margin: 0 auto; border-radius: 50%;} #giving .giving_text{width: 90%;} #giving .giving_text h3{font-size: 1.2em; margin-bottom: 10px; font-weight: 600;} #giving .giving_text p{font-size: 0.9em;} #giving .giving_text p br{display: none;} #giving .giving_btn_wrap button{font-size: 0.9em; padding: 10px 10px;} /* giving end */ /* introduction start */ #introduction{max-height: 640px; height: 100vh; padding-bottom: 60px;} #introduction .introduction_title{padding-top: 80px; padding-bottom: 40px;} #introduction .introduction_title h2{font-size: 1.7em;} #introduction .introduction_list{flex-wrap: wrap; position: relative;} #introduction .introduction_list .introduction_box_wrap{width: 50%; flex-wrap: wrap; justify-content: flex-start;} /* #introduction .introduction_list .introduction_box_wrap .introduction_box{padding: 30px 0; transition-duration: 0.5s;} */ #introduction .introduction_list .introduction_box_wrap .introduction_box{padding: 29px 0;} /* #introduction .introduction_list .introduction_box_wrap{height: calc(100% + 30px);} */ #introduction .introduction_list .introduction_box_wrap:nth-child(2)~.introduction_box_wrap{margin-top: -1px;} #introduction .introduction_list .introduction_box_wrap .introduction_box>h3{font-size: 1em; margin: 10px 0;} #introduction .introduction_list .introduction_box_wrap a{display: flex; display: none; padding: 0; padding-top: 10px; margin-bottom: -30px;} #introduction .introduction_list .introduction_box_wrap a::after{bottom: -5px;} /* introduction end */ }