@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
*{font-weight:300;}
#top{height: 108px;position: fixed;z-index: 999;width: 100%;background: white;}
.contents{padding-top: 120px;}
.wrap{width: 1500px;margin: auto;}
.banner{width: 100%;height: 750px;background:url("/img/banner_bg.png");position: relative;opacity: 0%;transition: all 0.5s ease-out;background-position: center center;background-size: cover;}
.banner_on{border-radius:0 200px 0 200px;transition: all 0.5s ease-in-out;}
.banner .text{color:white;position: absolute;right: 200px;transform: translateY(-50%);top:50%;}
.banner .text h1{font-size: 60px;font-weight: bold;opacity: 0;}
.banner .text h1 span{font-size: 60px;font-weight: bold;}
.banner .text h1 span.on{color:#59c6f2;transition: all 1s ease;}
.banner .text p{font-size: 20px;opacity: 0;}
.sec_2{padding: 50px 0;}
.sec_2 .wrap{display: flex;justify-content: space-evenly;align-items: center;}
.sec_2 .wrap .left_box h1{font-size: 55px;}
.sec_2 .wrap .right_box{padding: 10px;}

.sec_3{width: 100%;display: flex;padding: 50px 0;overflow: hidden;margin: 30px 0;flex-wrap: wrap;}
.sec_3 .product_list{width: 100%;text-align: center;}
.sec_3 .product_list h1{font-size: 50px;padding: 20px;}
.sec_3 ul.product_gnb{display: flex;justify-content: center;cursor: pointer;}
.sec_3 ul.product_gnb li{padding:20px 10px;opacity: 40%;}
.sec_3 ul.product_gnb li:first-child{opacity: 100%;}
.sec_3 ul.product_gnb li:hover{opacity: 100%;}
.sec_3 ul.proudct_view{display: flex;justify-content: center;height: 210px;}
.sec_3 ul.proudct_view li{width: 100px;margin: 20px;}
.sec_3 ul.proudct_view li img:hover{box-shadow: 0 0 10px rgba(0, 0, 0, 0.377);}
.sec_3 ul.proudct_view li img{width: 100%;border-radius: 100px;overflow: hidden;transition: all 0.2s ease-out;}
.sec_3 ul.proudct_view li a{color:#313131}



.sec_3 img{width: 100%;}
.sec_3 .left_box,.sec_3 .right_box{width: 100%;position: relative;overflow: hidden;height: 350px;background: #5c5c5c;}
.sec_3 .text{text-align: right;position: absolute;right: 35%;top: 80px;}
.sec_3 .text h1{font-size: 60px;line-height: 50px;color:white}
.sec_3 .text h2{font-size: 30px;color:wheat}
.sec_3 .left_box img{position: absolute;width: 600px;top: 0%;left: 40%;transform: translate(-50%);}
.sec_3 .right_box img{position: absolute;width: 469px;top: -8%;left: 40%;transform: translate(-50%);}
.sec_3 .right_box{height: 0;}





.about{padding-top: 108px}
.about section{padding: 20px 0;}
.about_wellnesson{width: 1200px;margin: auto;position: relative;height: 675px;padding:0 75px;}
.about_wellnesson .img_box{width: 900px;position: absolute;left: 0;}
.about_wellnesson .img_box img{width: 100%;}
.about_wellnesson .text_box{width: 480px;position: absolute;right: 0;}
.about_wellnesson .text_box h1{font-size: 50px;}
.about_wellnesson .text_box p{font-size: 18px;padding-left: 20px;}

.about_slider{width: 100%;height: 700px;position: relative;margin: auto;background: #fbfbfb;}
.about .swiper-slide .wrap{width: 100%;position: relative;height: 700px;}
.about .swiper> h1{position:absolute;font-size: 60px;right: 100px;text-shadow: 5px 5px 3px rgb(212, 212, 212);}
.about .swiper-slide .wrap .text_box{position: absolute;right: 100px;top: 240px;text-align: right;}
.about .swiper-slide .wrap .text_box h2{font-size: 28px;font-weight: bolder;}

.year{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;margin: 50px 0;}
.year .box{width: 700px;}
.year .box img{width: 100%;}

.about .family_site{width: 100%;padding: 50px 0;}
.family_site ul{display: flex;justify-content: center;}
.family_site ul li{width: 200px;height: 50px;margin: 10px;text-align: center;height: 50px;opacity: 20%;cursor: pointer;}
.family_site ul li.fam_on{opacity: 100%;}
.family_site ul li:hover{opacity: 100%;}
.family_site ul li{color:#313131;font-size: 20px;font-weight: bold;display: flex;align-items: center;justify-content: center;width: 200px;height: 50px;}
.fam_beauty{background: url("/img/logo1.png") no-repeat center center;background-size: 100%;}
.fam_medi{background: url("/img/logo3.png") no-repeat center center;}
.fam_csv{background: url("/img/logo4.png") no-repeat center center;background-size: 100%;}
.family_site .site_info{justify-content: center;padding: 60px 0;display:none}
.family_site .site_info.info_view{display: flex;width: 100%;}
.family_site .site_info .left{width: 700px;}
.family_site .site_info .left img{width: 100%;}
.family_site .site_info .right{width: 500px;text-align: center;padding: 20px;text-align: center;display: flex;flex-direction: column;align-items: center}
.family_site .site_info .right h1{padding: 20px 0;width: 200px;text-align: center;}
.family_site .site_info .right h1 img{width: 100%;margin: auto;}
.family_site .site_info .right h2{font-size: 30px;font-weight: bolder;}
.family_site .site_info .right p{font-size: 15px;padding-bottom: 20px;}
.family_site .site_info .right h3{font-size: 20px;font-weight: bolder;}    
.family_site .site_info .right .swiper {width: 100%;height: 200px;}

.family_site .site_info .right .swiper-slide {text-align: center;font-size: 18px;
display: flex;justify-content: flex-start;align-items: center;flex-direction: column;}
.family_site .site_info .right .swiper-slide a{color:#313131;font-size: 18px;}
.family_site .site_info .right .swiper-slide img {display: block;width:100px;object-fit: cover;padding: 10px 0;}



section h1{font-size: 30px;color:#313131;font-weight: 600;}
.about section .box > h2{font-size: 40px;color:#313131;font-weight: 600;width: 23%;}
.about section .box ul{width: 77%;padding:0 20px}
.about section .box ul li{list-style: disc;padding: 5px 0;}
.about section .box ul li i{font-size: 15px;font-style: normal;font-weight: bold;}
.clients{background: #f8f8f8;text-align: center;}
.about .wrap{width: 1000px;}
.clients .wrap > ul{display: flex;flex-wrap: wrap;}
.clients .wrap > ul li{width: 24%;height: 100px;border: 1px solid rgb(190, 190, 190);margin: 5px;background: white;border-radius: 5px;overflow: hidden;position: relative;text-align: center;line-height: 100px;font-size: 25px;font-weight: bold;color:rgb(73, 73, 73)}
.clients .wrap > ul li img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%;}
.clients .wrap > p{text-align: right;color:rgb(65, 65, 65)}
.tv .wrap{text-align: center;}
.tv .wrap .box{padding: 20px 0;display: flex;flex-wrap: nowrap;justify-content: space-evenly;}
.tv .wrap h2{font-size: 20px;}

.footer{width: 100%;background: rgb(73, 73, 73);padding: 20px 0;}
.footer .wrap{width: 1200px;margin: auto;color:white;display: flex;padding: 10px 0;}
.footer .footerSns{border-bottom: 1px solid rgb(87, 87, 87);}
.footer .footerSns p {padding:0 10px;}
.footer .footerSns .wrap a {color:white;font-size: 15px;padding:0 5px;}
    
.footer .footerInfo h1{padding-right: 60px}
.footer .box{padding-right: 60px}
.footer .box h3{font-size:12px}
.footer .box h3 span{font-weight: lighter}
.footer .box p{font-size: 12px}
.footer .box ul li a{font-size: 12px;color:white}
.footer .box ul li a:hover{color:#F8F6D6}

@media only screen and (max-width: 480px) 
{
    .banner{height: 300px;background: url(/img/banner_bg.png)center center cover;}
    .banner_on{border-radius: 0 50px 0 50px;}
    .banner .text{right: 0;}
    .banner .text h1{font-size: 20px;}
    .banner .text p{font-size: 13px;}
    .wrap,.sec_2 .wrap{width: 100%;}
    .sec_2 .wrap{flex-direction: column;}
    .sec_2 .wrap .right_box{width: 100%;text-align: center;}
    .sec_2 .wrap .right_box img{width: 80%;}
    .sec_2 .wrap .left_box h1{font-size: 30px;}
    .sec_3{flex-direction: column;}
    .sec_3 .left_box, .sec_3 .right_box{width: 100%;}
    .sec_3 .text h1{font-size: 25px;line-height: 20px;}
    .sec_3 .text h2{font-size: 20px;}
    .sec_3 .left_box .text{top: 20px;right: 50px;}
    .sec_3 .right_box .text{top: 20px;left: 50px;}
    .sec_3 ul.proudct_view{flex-wrap: wrap;height: auto;}
    .sec_3 ul.proudct_view li{width: 25%;}
    .sec_3 .right_box,.sec_3 .left_box{display: none}
    
    .about{width: 100%;}
  .about_wellnesson{width: 100%;display: flex;flex-direction: column;flex-wrap: wrap;}
  .about_wellnesson .img_box,.about_wellnesson .text_box{width: 100%;position: relative;text-align: center;}
  .about_wellnesson .text_box h1{font-size: 30px;}
  .about_wellnesson .text_box p{font-size: 15px;}
  .about_slider{height: 840px;}
  .about_slider .swiper{width: 100%;text-align: center;}
  .about .swiper> h1{position: relative;right: auto;font-size:40px}

  .about .swiper-slide .wrap .img_box img{width: 100%;}
  .about .swiper-slide .wrap .text_box{position: relative;top: auto;right: auto;padding: 10px;text-align: left;}
  .about .swiper-slide .wrap .text_box h2{font-size: 20px;}
  .about .swiper-slide .wrap .text_box p{font-size: 11px;}

  .radio-group label{font-size: 13px;}

  .family_site ul{padding:0 5px ;}
  .family_site .site_info.info_view{flex-direction: column;}
  .family_site ul li{width: 25%;font-size: 13px;margin: 5px;}
  .family_site .site_info .left{width: 100%;}
  .family_site .site_info .right{width: 100%;}
  .fam_medi{background-size: 100%;}
  .family_site .site_info .right h2{font-size: 20px;}
  .year{margin: 0;flex-direction: column;padding: 0 10px;}
  .year .box{width: 100%;}
    .about .wrap{width: 100%;}
    .clients .wrap > ul li{width: 30%;height:60px;line-height:55px;font-size: 15px;}
    .tv .wrap .box{flex-wrap:wrap;width: 100%;}
    .tv .wrap .box img{width: 33%;}

    .footer .wrap{display: block;overflow: hidden;width: 100%;padding: 10px;}
    .footer .box{padding-right: 0}
    .footer .wrap .box:nth-child(3), .footer .wrap .box:nth-child(4){float: left;width: 48%;padding-top:10px;}
    .footer .wrap .box:nth-child(4){text-align: right}
}

 /* IE6,7 */
 @media screen\9 {
  .contents .wrap .box .item a .text{padding: 25px 0px 0 30px;}
 }
  
 /* IE8 */
 @media \0screen {
  .contents .wrap .box .item a .text{padding: 25px 0px 0 30px;}
 }

 /* IE6,7,8 */
 @media \0screen\,screen\9 {
  .contents .wrap .box .item a .text{padding: 25px 0px 0 30px;}
 }
   
 /* IE9,10 */
 @media screen and (min-width:0\0){
  .contents .wrap .box .item a .text{padding: 25px 0px 0 30px;}
 }