@charset "utf-8";

/* 비주얼 영역 */
#main_visual {position: relative; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; padding-bottom:25%; background-image: url(/images/teenager/main/main_visual.jpg); }
#main_visual .wrap_container {height: 100%; position:absolute;  left:50%; margin-left:-650px; display: table; top:0; bottom:0;}
#main_visual .wrap_container > div { display: table-cell; vertical-align: middle; letter-spacing: -0.07em;}
#main_visual .wrap_container > div span {display: inline-block; color:#fff; font-weight: 500; line-height: 45px; font-size: 130%; padding: 0 40px; border-radius: 40px; animation-name:fadeInUp; -webkit-animation-delay:0.5s; animation-delay:0.5s; }
#main_visual .wrap_container > div strong, #main_visual .wrap_container > div em, #main_visual .wrap_container > div p {display: block; padding:5px 0; animation-name:fadeInUp;}
#main_visual .wrap_container > div strong {font-size: 300%; font-weight: 700; padding-bottom:10px; -webkit-animation-delay:1s; animation-delay:1s; }
#main_visual .wrap_container > div em {font-size: 140%; font-weight: 700; -webkit-animation-delay:1.5s; animation-delay:1.5s; }
#main_visual .wrap_container > div p {font-size: 120%; font-weight: 400;  -webkit-animation-delay:2s; animation-delay:2s; }

.m_pad {position: relative; padding-top:120px; padding-bottom: 5%;}
.m_bg {background-image: url(/images/teenager/main/main_patten.png); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center; background-color: #f1f1f1;}


.m_title{font-size: 200%; font-weight: 700; padding-bottom:5%; text-align: center;}
.m_title:before{content:''; position: absolute; left:50%; width:1px; height:70px; background-color: rgba(0,0,0,0.2); top:0;}
.m_title:after{content:''; position: absolute; left:50%; width:8px; height:8px; margin-left:-4px; top:70px; border-radius: 50%;}
.m_title strong{font-weight: 700;}

.task {display: flex; justify-content: space-between; flex-wrap: wrap;}
.task *{ transition:all 0.3s, font-size 0s; }
.task .cell{ position: relative; display:block; width:20%; border-radius: 30px; overflow: hidden; margin-bottom:20px}
.task .cell img {width:100%}
.task .cell:hover{box-shadow: 5px 5px 8px rgba(0,0,0,0.2); margin-top:-20px}
.task .cell:hover img{transform: scale(1.2); transition: all 1s ; }
.task .cell a {display:block;}
.task .cell dl {position: absolute; top:50px; left:30px; right:20px; color:#fff}
.task .cell dl dt{font-weight: 700; font-size:130%; display: block; padding-bottom: 10px;}
.task .cell dl dd{ font-size:90%; color:rgba(255,255,255,0.9)}
.task .cell span {position: absolute; width:60%; text-align:center; bottom:0; right:0px; background:#fff; line-height: 50px; height: 50px; font-size: 16px; border-radius: 50px 0px 0px 0px ;  border:1px solid #fff}
.task .cell:hover span {width:100%; color:#fff; border-radius: 0;}


/* 갤러리 */
.gallery .cell { text-align: left; overflow: hidden; }
.gallery .cell img {width:100%}
.gallery .cell a {overflow: hidden; display: block;}
.gallery .cell p {display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size:90%;}
.gallery .cell p span { display: block;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 110%; font-weight: 400;  line-height:40px; padding-top:10px}
.gallery .cell p i { font-family: 'Roboto'; color:#777; font-weight: 400;  line-height: 20px; }

.more { position: absolute; right:5px; top:10px; font-size: 0;width:40px; height:40px; border:1px solid #ddd; border-radius: 50%; line-height:40px;}
.more:after {content:'\f067'; position: absolute; left:0; right: 0; top: 0px;  font-size:14px; color:#444; font-family: 'FontAwesomeS';text-align:center; }



@media only screen and (max-width:1300px){
  #main_visual .wrap_container > div { font-size: 80%; padding : 20px;}
  #main_visual .wrap_container { position:absolute;  left:50%; margin-left:-50%;  width:100%;}
  #main_visual { padding-bottom:35%; }

}
@media only screen and (max-width:1100px){
  #main_visual {padding-bottom:35%; }
  .task .cell{width:47%; }
  .task .cell:hover{margin-top:0px}

}
@media only screen and (max-width:991px){
  .m_pad { padding-bottom:50px;}
  .bbs .col_6 {flex: 0 0 100%; max-width: 100%; }
  .bbs .col_6:last-child {margin-top:50px}

  #main_visual { padding-bottom:0%; }
  #main_visual .wrap_container > div { font-size: 70%; padding : 50px 20px;}
  #main_visual .wrap_container { position:relative;  left:0%; margin-left:0%;  width:100%;}
  #main_visual .wrap_container > div strong, #main_visual .wrap_container > div em, #main_visual .wrap_container > div p {padding:0;}
  #main_visual .wrap_container > div span { line-height: 30px;padding: 0 30px;}
  #main_visual .wrap_container > div strong { padding-bottom:10px; }

}

@media only screen and (max-width:880px){
  #committee_visual {padding-bottom:50%; }

  .gallery .col_4 { flex: 0 0 100%;  max-width: 100%; margin-bottom:20px}
  .more {right:5px; top:5px; width:30px; height:30px; border:1px solid #ddd; border-radius: 50%; line-height:30px;}

  .m_pad { padding-top:70px;}
  .m_title:before{height:50px; }
  .m_title:after{ top:50px;}
}

@media only screen and (max-width:650px){
  .m_title{padding-bottom:30px;font-size:180%;}
  #main_visual .wrap_container > div { font-size: 65%; padding : 35px 20px;}


}

@media only screen and (max-width:500px){
  .task .cell{ border-radius: 20px; }
  .task .cell span {width:70%; line-height:40px; height:40px;font-size:14px;}
  .task .cell dl {top:30px; left:20px; right:20px; font-size: 95%; text-shadow: 0px 0px 5px rgba(0,0,0,0.9);}


}