@charset "utf-8";

.content_title h2{text-align: center; display: block; padding:4% 0; font-size: 200%; font-weight: 700;}
#page h3 {font-weight: 700; color:#333}


.p0101  {  padding-bottom:30px}
.p0101::after  {content: ''; display: block; clear: both;}
.p0101 .img { float: left; position: relative; width:520px; background: url(/images/teenager/contents/p0101_bg.jpg) no-repeat; background-size: 100% 100%; border-radius: 20px;}
.p0101 .img img{ position: relative; margin-right:-40px; width:100%; }
.p0101 .img .name{ position:absolute; bottom:-30px; right:-20px; background:#4848a5; padding:20px 40px;  border-radius: 20px; color:#fff; font-size: 120%;}
.p0101 .img .name i{font-family:'Nanum Brush Script', cursive; font-size: 200%; display: inline-block; padding-left:20px}
.p0101 .txt {float: left; width:calc(100% - 520px); padding-left: 100px;}
.p0101 .txt strong{font-size: 270%; font-weight: 700; display: block; color:#000; padding-top:10px}
.p0101 .txt strong span{font-size: 60%; display: block;}
.p0101 .txt strong::after{content: ''; display: block; margin:50px 0; height:2px; width:50%; margin-left:-100px}
.p0101 .txt em{font-size: 160%; font-weight: 700; display: block; padding-bottom:30px}
.p0101 .txt p{font-size: 120%; }


.teenager_family_site .list {display: flex; flex-wrap: wrap;}
.teenager_family_site .list li {width:25%;}
.teenager_family_site .list li a{font-weight: 400; position: relative;}
.teenager_family_site .list li a:before{content: ''; position: absolute; left:0; width:0; height:1px; bottom:0; background:#555; transition: all 0.3s ease-out;}
.teenager_family_site .list li a:hover:before{width:100%;}








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

    .p0101 .img {  width:350px; }
    .p0101 .txt { font-size:80%; width:calc(100% - 350px);}
    .p0101 .txt strong::after{width:70%; }

}


@media only screen and (max-width:992px){	
    .content_title h2{padding:50px 0;}

    .p0101 .img {  width:85%; margin:0 auto 80px auto ; float: none;  }
    .p0101 .txt { font-size:90%; width:100%; float: none; padding-left:20px; text-align: center;}
    .p0101 .txt strong::after{width:50%;  margin:30px auto}


}


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

}


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

}