@charset "utf-8";

.m_content {position: relative;}

/* 공통타이틀 */
.title_area { display: flex; letter-spacing: -0.05em; margin-bottom: 5%; position: relative; justify-content: center; align-items: center;}
.title_area h3::before {content: ''; position: absolute; left:-50px; top:-30px; width: 60px; height: 40px; background-image: url(/_jbteenager/images/main/patten01.png); background-repeat: no-repeat;}
.title_area h3::after {content: ''; position: absolute; top:-70px; right:-80px; width: 150px; height: 150px; background-image: url(/_jbteenager/images/main/patten02.png); background-repeat: no-repeat;}
.title_area h3 {font-size: 240%; color:#1c1c1c; font-weight: 700; display: inline-block; line-height: 40px; position: relative; font-family: var(--jalnan_font); }
.title_area h3 span {color: var(--teenager_color);}
.title_area a {font-weight: 500; display: block; padding-right: 10px; font-size: 90%;}

.main_visual { padding-bottom: 55%; background-color: #857072; padding-top: 195px; position: relative; background-image: url(/_jbteenager/images/main/visual_bg.jpg); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center center;  }

.m_visual_txt {font-family: var(--jalnan_font); font-size: 200%; color: #111; line-height: 55px; display: block; position: absolute; padding-top: 9%; padding-left: 50px;}
.m_visual_txt strong span{ font-size: 150%; color: var(--teenager_color);}

.teenager_main {position: relative; margin-top: -20%;}

.nav { left:0px; right:0px; top:35%}
.nav .prev, .nav .next{  position:absolute; width:50px; height:50px;}
.nav .prev {left:0}
.nav .next {right:-10px}
.nav button{  background-color: var(--teenager_color);}
.nav button::before{ font-size: 130%; color: #fff;}


.m_goto{padding-bottom: 2%;}
.m_goto .title_area{margin-bottom: 2%; }
.m_goto ul li {padding-top: 15px; padding-bottom: 15px; }
.m_goto ul li a{width:100%;display: block; overflow: hidden; transition: all 0.3s; border-radius: 50%; color: #fff; position: relative; box-shadow: 3px 3px 6px rgba(0,0,0,0.2);  border: 3px solid transparent;}
.m_goto ul li a img{width:100%; }
.m_goto ul li:nth-child(2) {margin-top: 20px;}
.m_goto ul li:nth-child(3) { margin-top: 40px;}

.m_goto ul li:nth-child(1) a{background-color: #f19300;}
.m_goto ul li:nth-child(2) a{background-color: #e45759;}

.m_goto ul li:nth-child(3) a{background-color: #448ed0;}
.m_goto ul li:nth-child(4) a{background-color: #765ebb;}

.m_goto ul li a .text_box{position: absolute; left:0; top:0; bottom: 0; right: 0; text-align: center; padding:5%; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; }
.m_goto ul li a .text_box dl {width:100%;}
.m_goto ul li a .text_box dl dt{font-family: var(--jalnan_font); font-size: 140%; display: block; padding-bottom: 6%; text-shadow: 3px 3px 6px rgba(0,0,0,0.2);}
.m_goto ul li a .text_box dl dd{ font-weight: 700; font-size: 100%; line-height: 25px;}
.m_goto ul li a .text_box em{margin-top: 10%; display: inline-block; font-weight: 500; line-height: 30px; border: 2px solid rgba(255,255,255,0.3); padding: 0 30px; border-radius: 25px; font-size:90%}

.m_goto ul li a:hover {background-color: #fff; transform: translate(0px, -30px);}
.m_goto ul li a:hover .text_box dl dt {text-shadow:none;}
.m_goto ul li a:hover .text_box dl dd {color:#222}
.m_goto ul li a:hover .text_box em {background-color: #353535; border-color: #353535;}

.m_goto ul li:nth-child(1) a:hover {border-color: #f19300;}
.m_goto ul li:nth-child(1) a:hover .text_box dl dt{color: #f19300;}
.m_goto ul li:nth-child(2) a:hover {border-color: #e45759;}
.m_goto ul li:nth-child(2) a:hover .text_box dl dt{color: #e45759;}
.m_goto ul li:nth-child(3) a:hover {border-color: #448ed0;}
.m_goto ul li:nth-child(3) a:hover .text_box dl dt{color: #448ed0;}
.m_goto ul li:nth-child(4) a:hover {border-color: #765ebb;}
.m_goto ul li:nth-child(4) a:hover .text_box dl dt{color: #765ebb;}


.gallery_slider {position: relative; margin-left: -20px; margin-right: -20px;}
.gallery_slider .slider {margin: 0px}
.gallery_slider .cell {display: block; margin:5px; padding:0 20px}
.gallery_slider .cell a{display: block; transition: all 0.5s;}
.gallery_slider .cell a .img {display: block; overflow: hidden;  border-radius: 10px; }
.gallery_slider .cell a .img img{transition: all 2s;transform: scale(1);}
.gallery_slider .cell a:hover .img img{transform: scale(1.2);}
.gallery_slider .cell img{width: 100%; border-radius: 10px; transition: all 0.3s;}
.gallery_slider .cell .text_box {display: block; margin: 0 10px 10px 10px; background-color: #fff;  border-radius: 15px; position: relative; margin-top: -20px; padding: 15px 15px; transition: all 0.5s; box-shadow: 3px 3px 5px rgba(0,0,0,0.1); }
.gallery_slider .cell a:hover .text_box {  margin-left: 0; margin-right: 0; padding: 20px 15px; margin-top: -30px; box-shadow: 3px 3px 5px rgba(0,0,0,0.4); }
.gallery_slider .cell .text_box strong {display: block;text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 100%; color: #000; font-weight: 700; letter-spacing: -0.03em; font-size: 110%; }
.gallery_slider .cell .text_box span {font-family: 'Roboto';display: block; text-align: center;  color:#555; line-height: 30px;  }

.gallery_slider .cell:hover .text_box { background: var(--teenager_color)}
.gallery_slider .cell:hover .text_box strong, .gallery_slider .cell:hover .text_box span {color:#fff}

@media only screen and (max-width: 1300px) {
    .gallery_slider { margin-left: 0px; margin-right: 0px;}
    .title_area h3 {font-size: 200%;  }

}
@media only screen and (max-width: 1200px) {
    .main_visual { padding-bottom: 50%;  }
    .gallery_slider { margin-left: 0px; margin-right: 0px;}
    .m_goto ul li:nth-child(2), .m_goto ul li:nth-child(3) {margin-top: 0px;}
    .m_goto ul li a{border-radius: 15px; height: 100%;}
    .m_goto ul li a .text_box { position: relative; padding:10% 20px; height: 100%;}
    .m_goto ul li a img{display: none;}

    .m_visual_txt {  padding-top: 3%; padding-left: 30px; font-size: 150%; line-height: 35px;}

}

@media only screen and (max-width: 761px) {
    .main_visual { padding-bottom: 300px;  }
    .m_visual_txt {  padding-top: 0px; margin-top: -50px; font-size: 110%; padding-left: 10px;line-height: 25px; }

    .teenager_main { margin-top: -100px ;}

    .title_area h3 {font-size: 160%;  }
    .gallery_slider .cell { padding:0 5px}
    .nav {top:40%}
    .nav .prev, .nav .next{  position:absolute; width:30px; height:30px;}
}


@media only screen and (max-width: 450px) {
    .m_goto ul li a .text_box {font-size: 90%;}

}