/*mainStyle.css*/
@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body.dark-mode { background:#333; }
body.dark-mode h1, h2 , h3, p { color:#fff; }
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#c71526;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#c71526;
    color:#eee
}
button { background:#c71526; }
#darkLight {
    width:70px; height:90px; 
    font-size:3em;
    padding-left:0.5%;
    position:fixed;
    right:0; bottom:3%;
    border-radius:100px 0 0 100px;
    transition:all .3s;
    z-index:99999;
}
#darkLight:hover {
    width:130px;
    padding-left:1%;
    background-color:#111;
}

#container{overflow: hidden; font-family: 'GongGothicLight';}
.bannerWrap{width: 100%; height: 570px; position: relative;}
.bannerWrap > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.bannerWrap > div{width: 768px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.bannerWrap > div img{margin: 30px auto;}
.bannerWrap > div h2, .bannerWrap > div p{text-align: center; color: #fff;}
.bannerWrap > div h2{font-size: 48px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 40px;}
.bannerWrap > div p{font-size: 28px; line-height: 1.5;}
.bannerWrap > div p span{display: block;}
.bannerWrap > div > div{width: 37px; height: 192px; position: absolute; font-size: 100px; color: #fff; z-index: 10; top: 30px; background: url(../img/main/square_bracket1.png); background-size: 100% 100%;}
.bannerWrap > div > div.square_bracket1{left: 100px;}
.bannerWrap > div > div.square_bracket2{background-image: url(../img/main/square_bracket2.png); right: 100px;}
.inner.box{padding: 0 20px 0px;} 
.main_title{padding: 100px 0;}
.main_title h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;}
.main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;}
.main_title h2 span{color: #ce9771; font-weight: 600; margin-right: 20px;}
.main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;}
.detail{width: 100%; margin: 0 auto;}
.detail > ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto;}
.detail > ul li{float: left; width: 32%; padding: 13px 0;}
.detail > ul li.second{margin: 0 2%;}
.detail > ul li img{margin: 30px auto 35px;}
.detail > ul li p{color: #666; font-size: 28px; margin-bottom: 26px;}
.detail > ul li p span{display: block;}
.detail > ul li strong{display: block; font-size: 35px; line-height: 1.5; color: #333; margin: 0 auto; text-align: center;} 
.detail > ul li strong span{font-size: 44px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;}
.detail > ul li p{text-align: center;}
.aboutWrap{width: 100%;}
.aboutWrap .detail > ul li strong{text-align: center;}



.consertWrap{background: url(../img/main/consert_bg.png);}
.consertWrap .inner{padding-bottom: 170px;}
.consertWrap .main_title{padding-bottom: 30px;}
.consertWrap .latest_wr{width: 100%; margin: 0 auto;}
.consertWrap .latest_wr > div{float: left; width: 45%;}
.hot_icon .latest_wr > div.ing_projects{ }
.pic_lt li .hot_icon { float:left; margin:1%; }
.consertWrap .latest_wr > div.news{float: right;}
.consertWrap .lat{margin-bottom: 0; border: none; padding: 60px; min-height: 493px;}
.consertWrap .lat .lat_title{border-bottom: none; background: none; padding: 0; line-height: 1.0em; font-size: 1.0em; color:#333; border-bottom: 1px solid #ddd;}
.consertWrap .lat .lat_title a{color: #333; font-size: 30px; color: #333; font-weight: 600; line-height: 70px; height: 70px;}
.consertWrap .lat ul{padding: 0; margin-top: 30px;}
.consertWrap .lat li{padding: 0; padding-right: 0; padding-left: 0; line-height: 45px; overflow: hidden; }
.consertWrap .lat li:before{display: none;}
.consertWrap .lat li a{width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 18px;}
.consertWrap .lat li a:hover{color:#c80e21; font-weight: bold;}
.consertWrap .lat .lt_date{color: #888; font-size: 18px; float:right; }
.consertWrap .lat .lat_title_area{position: relative;}
.consertWrap .lat .lt_more{top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0;  font-weight: normal; color: #7a838c; font-size: 45px;}
.consertWrap .lat .lt_more .fa{display: none;}
.consertWrap .lat li .new_icon{display: none;}
.consertWrap .lat li .hot_icon { float:left; margin: 4%; }
.consertWrap .lat .lat_title a:after{display: none;}
.consertWrap .lat .empty_li{line-height: 270px; font-size: 18px;}
.contactWrap{background: url(../img/main/bg_img2.png); background-size: cover; background-position: center;}
.contactWrap .inner{padding-bottom: 170px;}
.contactWrap .main_title{padding-bottom: 70px;}
.contactWrap .main_title h2::after{display: none;}
.contactWrap .main_title h2, .contactWrap .main_title h2 span, .contactWrap .main_title p{color: #fff;}
.contactWrap .main_title p{padding-top: 50px;}
.contactWrap .detail{width: 100%; height: 420px;}
.contactWrap .root_daum_roughmap{height: 100%;}
.contactWrap .root_daum_roughmap .wrap_map{height: 100%;}

.cs {display: flex;flex-wrap: wrap}
.cs > div {width: 50%;padding: 15px}

@media screen and (max-width: 1199px){
    .bannerWrap > div img{width:110px;}   
    .bannerWrap > div h2{font-size: 30px;}
    .bannerWrap > div p{width: 90%; margin: 0 auto; font-size: 28px;}
    .bannerWrap > div > div{top: 20px;}
    .bannerWrap > div > div.square_bracket1{left: 160px;}
    .bannerWrap > div > div.square_bracket2{right: 160px;}
    .inner{width: 100%; padding: 0 20px 60px;} 
    .main_title{padding: 30px 0;}
    .main_title h2{font-size: 42px;}
    .main_title h2::after{width: 1px; height: 24px; margin: 35px auto;}
    .main_title h2 span{margin-right: 15px;}
    .main_title p{width: 100%; font-size: 16px; padding: 0 30px;} 
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .detail > ul li, .detail > ul li img{-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;} 
    .aboutWrap .detail > ul li:hover img{-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
    .coreComWrap{background-size: auto 100%;}
    .coreComWrap .main_title h2{letter-spacing: -2px;}
    .coreComWrap .detail ul li strong{margin-bottom: 0; font-size: 26px;}
    .coreComWrap .detail ul li p{padding: 0 20px; font-size: 20px;}  
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px;}
    .portfolioWrap .port_go a{font-size: 16px;}
    .contactWrap .inner{padding-bottom: 100px;}
    .contactWrap .main_title{padding-bottom: 50px;}  
}
@media screen and (min-width:481px){
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{display: none;}
    .portfolioWrap .latest_wr2{display: block; width: 100%; height: auto; margin: 0 auto;} 
    .portfolioWrap .pic_lt ul{display: inherit; width: 100%; overflow: hidden; margin-bottom: 32px; padding: 0;}
    .portfolioWrap .pic_lt li{padding: 0; width: 32%;  padding: 0;}
    .portfolioWrap .pic_lt li .lt_img{margin: 0; width: 100%; overflow: hidden;}
    .portfolioWrap .pic_lt li .lt_img:hover img{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2); -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webokit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition: 0.6s; -0-transition-duration: 0.6s;}
}
@media screen and (min-width:481px) and (max-width: 1199px){
    .bannerWrap{height: 500px;}
}
@media screen and (max-width:1024px){
    .consertWrap .latest_wr > div{width: 49%;} 
    .consertWrap .lat .lat_title a{font-size: 20px;}
    .consertWrap .lat .lt_more{font-size: 30px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 270px; font-size: 16px;}
}
@media screen and (max-width:767px){
    .bannerWrap > div{width: 480px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
    .detail > ul{width: 80%; display: inherit;}
    .detail > ul li{width: 100%;}
    .detail > ul li.second{margin: 0;}
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .consertWrap .inner{padding-bottom: 80px;}
    .consertWrap .main_title{padding-bottom: 0;} 
    .consertWrap .latest_wr > div{float: left; width: 100%;}
    .consertWrap .latest_wr > div.ing_projects{margin-bottom: 5%;}
    .consertWrap .lat{padding: 40px;}
    .consertWrap .lat .lat_title a{font-size: 20px; line-height: 60px; height: 60px;}
    .consertWrap .lat li{line-height: 50px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;}
    .consertWrap .lat .empty_li{line-height: 300px; font-size: 16px;}
    .cs > div {width: 100%}
}
@media screen and (max-width:600px){
    .portfolioWrap .latest_wr{display: block;}
    .portfolioWrap .latest_wr2{display: none;}
    .portfolioWrap .pic_lt .empty_li{height: 200px; line-height: 200px;}
    .portfolioWrap .inner{position: relative;}
    .portfolioWrap .mainPagewrap{width: 100%; position: relative;}
    .portfolioWrap .latest_wr{width: 240px; height: auto; margin: 0 auto;}
    .portfolioWrap{padding-bottom: 60px;}
    .portfolioWrap .port_go a{width: 100%; margin-top: 35px; font-size: 12px; padding: 10px 0;}
}
@media screen and (min-width:481px) and (max-width:767px){
    .coreComWrap .detail ul{width: 40%; min-width: 320px;}
    .coreComWrap .detail img{margin: 10px auto 20px;}
    .coreComWrap .detail > ul li.second{margin: 20px 0;}
}
@media screen and (max-width: 480px){
    .bannerWrap{height: 460px;}
    .bannerWrap > div{width: 320px;}
    .bannerWrap > div img{width: 63px; height: 42px; margin: 30px auto 20px;}   
    .bannerWrap > div h2{font-size: 26px;}
    .bannerWrap > div p{font-size: 22px;}
    .bannerWrap > div > div{width: 20px; height: 104px;}
    .bannerWrap > div > div.square_bracket1{left: 20px;}
    .bannerWrap > div > div.square_bracket2{right: 20px;}
    .main_title{padding: 40px 0;}
    .main_title h2{font-size: 27px;}
    .main_title h2::after{width: 1px; height: 13px; margin: 20px auto;}
    .main_title h2 span{margin-right: 10px;}
    .main_title p{width: 100%; font-size: 12px; padding: 0 20px;} 
    .detail > ul{width: 240px;}
    .detail > ul li{width: 100%; height: 100px; overflow: hidden;}
    .detail > ul li img{width: 56px; margin: 0px auto 30px;} 
    .detail > ul li p{font-size: 16px;}
    .detail > ul li strong{font-size: 23px; line-height: 1.5; margin: 0 auto; text-align: left; line-height: 1.0;} 
    .detail > ul li strong span{font-size: 35px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;} 
    .detail > ul li p, .detail > ul li strong{text-align: left; width: 152px; margin-right: 0px;}
    .aboutWrap .detail > ul li img{float: left;}
    .aboutWrap .detail > ul li p{float: right;}
    .aboutWrap .detail > ul li strong{float: right;} 
    .aboutWrap .detail > ul li strong{text-align: left;}
    .coreComWrap .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrap .detail > ul li.second{margin: 15px 0;}
    .coreComWrap .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrap .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrap .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 
    .consertWrap .inner{padding-bottom: 60px;}
    .consertWrap .lat{padding: 30px; min-height: 373px;}
    .consertWrap .lat .lat_title a{font-size: 17px; height: 40px; line-height: 40px;}
    .consertWrap .lat .lt_more{font-size: 20px;}
    .consertWrap .lat li{line-height: 40px;}
    .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 14px;}
    .consertWrap .lat .empty_li{line-height: 240px; font-size: 14px;}
    .contactWrap .inner{padding-bottom: 50px;}
    .contactWrap .main_title{padding-bottom: 30px;}
    .contactWrap .detail{height: 220px; overflow: hidden;}  
    .portfolioWrap .pic_lt li .lt_img {height: 220px;}
}
@media screen and (max-width:350px){
    .portfolioWrap .port_go a{font-size: 12px;}
}

.cs_us h3 {font-size: 30px;margin-bottom: 10px}
.cs_us h5 {font-size: 24px;margin-bottom: 10px}
.cs_us p {font-size: 20px;margin-bottom: 20px}
.cs_us a {font-size: 20px;}

#sub {width: 100%;margin:0 auto 80px}
.sub0 {width: 100%;max-width: 1200px;margin: 80px auto}
.sub0 img {width: 100%}
.naver_btn {padding: 5px 10px;color: #03c95b;font-weight: bold;font-style: italic}

.sub-text {width: 100%;margin: 80px auto;padding: 0 20px}
.sub-text h2 {font-size: 24px;color: #615025;font-weight: bold;padding-bottom: 15px;word-break: keep-all}
.sub-text h2 > i {font-size: 34px}
.sub-text p {font-size: 20px;padding-bottom: 25px;word-break: keep-all;line-height: 34px}

/*제품 - 탈모*/


.tal01 {width: 100%;max-width: 1200px;text-align: center;margin:0 auto 80px}
.tal01 h1 {font-size: 50px;color: #483729}
.tal01 h2 {font-size: 40px;color: #483729}
.tal01 h3 {font-size: 35px;color: #483729;padding-bottom: 15px}
.tal01 p {font-size: 16px;color: #483729;}

.tal02 {width: 100%;max-width: 1200px;margin: 80px auto}
.tal02 ul {width: 100%; display: flex;;flex-wrap: wrap;}
.tal02 ul li {width: 198px;text-align: center;word-break: keep-all;margin: 10px auto}
.tal02 ul li p {color: #4b6faf;font-size:16px}
.tal02 ul li dd {color: #815e44;font-size:16px}
.tal02 ul li dt {color: #908366;font-size:16px}
.tal02 ul li span {color: #b26222;display: block;font-size: 16px}
.tal02 ul li img {height: 80px;padding-bottom: 10px}

.tal03 {width: 100%;background-color: #edf0f7;padding: 50px 35px;}
.tal03_1 {width: 100%;max-width: 1200px;margin: auto;display: flex}
.tal03_1 div:first-of-type {width: 40%;text-align: center;font-size: 30px;padding: 30px}
.tal03_1 div:last-of-type {width: 60%;font-size: 18px;word-break: keep-all}
.tal03_1 div:last-of-type p {padding: 5px}

.tal04 {width: 100%;max-width: 1200px;display: flex;margin: 80px auto;flex-wrap: wrap}
.tal04 article {width: 50%;padding: 30px;text-align: center}
.tal04 article:first-of-type img {height: 500px;padding: 50px 0}
.tal04 article h3 {font-size: 22px;color: #4b6faf;word-break: keep-all}
.tal04 article h4 {font-size: 22px;color: #614f25;word-break: keep-all}
.tal04 article h4 span {font-size: 22px;color: #c2986b;font-weight: bold}
.tal04 article p {font-size: 16px;color: #4b6faf}
.tal04 article:last-of-type table {width: 70%;margin:50px auto}
.tal04 article:last-of-type table td:first-of-type {width: 120px}
.tal04 article:last-of-type table span {font-size: 22px; color: #c2986b}
.tal04 article:last-of-type table td {padding: 10px;text-align: left;font-size: 18px}
.tal04 article:last-of-type img {width: 100px;height: 100px}


.tal05 {width: 100%;background-color: #f7efe8;padding: 50px 35px;}
.tal05_1 {width: 100%;max-width: 1200px;margin: auto;display: flex}
.tal05_1 div:first-of-type {width: 40%;text-align: center;font-size: 30px;padding: 30px}
.tal05_1 div:last-of-type {width: 60%;font-size: 18px;word-break: keep-all}
.tal05_1 div:last-of-type p {padding: 5px}

.tal06 {width: 100%;max-width: 1200px;margin: 80px auto}
.tal06 h3 {font-size: 30px;text-align: center;color: #a46423}
.tal06 ul {width: 70%;margin: auto; display: flex;}
.tal06 li {width: 50%;padding: 30px;text-align: center}
.tal06 li img {width: 100px; height: 100px}
.tal06 li span {display: block;padding: 10px;font-size: 22px;color: #a46423}
.tal06 li p {word-break: keep-all;font-size: 18px}

.tal07 {width: 100%;background-color: #f2efec;padding: 50px 35px;}
.tal07_1 {width: 100%;max-width: 1200px;margin: auto;display: flex}
.tal07_1 div:first-of-type {width: 40%;text-align: center;font-size: 30px;padding: 30px}
.tal07_1 div:last-of-type {width: 60%;font-size: 18px;word-break: keep-all}
.tal07_1 div:last-of-type p {padding: 10px}

.tal08 {width: 100%;max-width: 1200px;margin: 80px auto}
.tal08 h3 {font-size: 30px;text-align: center;color: #a46423}
.tal08 ul {width: 100%;margin: auto; display: flex;text-align: center;flex-wrap: wrap;margin-top: 60px}
.tal08 li {width: 198px;text-align: center;word-break: keep-all;margin: 10px auto}
.tal08 li img {width: 140px; height: 140px}
.tal08 li p {word-break: keep-all;padding: 10px 0;font-size: 16px}

.tal09 {width: 100%;background-color: #efede9;padding: 50px 35px;}
.tal09_1 {width: 100%;max-width: 1200px;margin: auto;display: flex}
.tal09_1 div:first-of-type {width: 40%;text-align: center;font-size: 30px;padding: 30px}
.tal09_1 div:last-of-type {width: 60%;font-size: 18px;word-break: keep-all}
.tal09_1 div:last-of-type p {padding: 5px}

@media(max-width:1000px){
    .tal04_1 img {width: 100%;height: auto!important}
}

@media(max-width:800px){
    .tal01 > img {width: 80%}
    .tal03_1 {display: block;width: 100%;text-align: center}
    .tal03_1 div {width: 100%!important;}
    .tal03_1 div p {word-break: keep-all}
    .tal05_1 {display: block;width: 100%;text-align: center}
    .tal05_1 div {width: 100%!important;}
    .tal05_1 div p {word-break: keep-all}
    .tal07_1 {display: block;width: 100%;text-align: center}
    .tal07_1 div {width: 100%!important;}
    .tal07_1 div p {word-break: keep-all}
    .tal09_1 {display: block;width: 100%;text-align: center}
    .tal09_1 div {width: 100%!important;}
    .tal09_1 div p {word-break: keep-all}
    .tal04 article {width: 100%}
    .tal04_1 img {width: 100%;height: auto!important}
    .tal04_2 img {width: 50%;height: auto!important}
}

#sub-ban img {width: 100%}

@media(min-width:1300px) {
    #sub-ban {width: 1240px; margin: auto}
}

.product {width: 100%;max-width: 1200px;margin: 80px auto; padding: 0 20px}
.product ul {display: flex;flex-wrap: wrap}
.product li {width: 100%;max-width: 365px;margin: 10px;border: 1px solid #e18f6d;padding:20px 15px;text-align: center}
.product li img {width: 100%}
.product li h3 {font-size: 30px;margin-bottom: 10px;letter-spacing: -1.4px;color: #483729}
.product li h4 {font-size: 22px;margin-bottom: 10px;letter-spacing: -1.4px;color: #483729}
.product li p {margin-bottom: 20px;letter-spacing: -0.4px;color: #483729}
.product li a {font-size: 14px; padding: 5px 15px;background: #483729;color: #fff;border-radius: 5px}
.mts {width: 100%;max-width: 365px;text-align: center;padding: 20px 15px;border: 1px solid #e18f6d;margin: 10px}
.mts img {width: 100%}
.mts h3 {font-size: 30px;margin-bottom: 10px;letter-spacing: -1.4px;color: #483729}
.mts h4 {font-size: 22px;margin-bottom: 10px;letter-spacing: -1.4px;color: #483729}
.mts p {margin-bottom: 10px;letter-spacing: -0.4px;color: #483729}

@media(max-width:830px){
    .product li {max-width: 340px}
    .mts {max-width: 340px}
}
@media(max-width:776px){
    .product li {max-width: 100%}
    .mts {max-width: 100%}
}

.rd1 {width: 100%;max-width: 1200px;margin: 80px auto 40px;padding: 0 20px;text-align: center}
.rd1 h5 {font-size: 25px;word-break: keep-all;color: #333;font-style: italic}
.rd1 h5::after {content: "";display: block;width: 1px;height: 50px;background-color: #333;margin: 25px auto;}
.rd1 h2 {font-size: 40px;color: #005250;word-break: keep-all;margin-bottom: 40px}
.rd1 table {width: 80%;margin: auto}
.rd1 table td {padding: 0 20px}
.rd1 table td img {width: 100%}

.rd2 {width: 100%;max-width: 1200px;margin: 80px auto 40px;padding: 0 20px;}
.rd2 h2 {font-size: 40px;color: #005250;word-break: keep-all;margin-bottom: 40px;text-align: center}
.rd2 ul {display: flex;flex-direction: row;margin-bottom: 20px}
.rd2 ul li {width: 100%;max-width: 580px;padding: 20px}
.rd2 ul li h5 {font-size: 24px;padding-bottom: 7px}
.rd2 ul li p:first-of-type {font-size: 20px;color: #005250;line-height: 28px}
.rd2 ul li p {font-size: 18px;padding-bottom: 7px;word-break: keep-all}
.rd2 ul li table {width: 100%;text-align: center}
.rd2 ul li table td {padding: 0 20px}
.rd2 ul li table td img {width: 100%;padding-bottom: 10px}
.rd2 ul li:nth-child(1) {order: 1;}
.rd2 ul li:nth-child(2) {order: 0;}

@media(max-width:800px){
    .rd2 ul {display: inherit}
    .rd2 ul li {padding: 0 20px;text-align: center}
}
@media(max-width:500px){
    .rd1 table {width: 100%;}
    .rd1 h2 {font-size: 30px;}
    .rd2 h2 {font-size: 30px;}
    .rd2 ul li h5 {font-size: 20px;}
    .rd2 ul li p:first-of-type {font-size: 18px}
    .rd2 ul li p {font-size: 16px}
}