@charset "utf-8"; .wrap_container { max-width: 1200px; width: 1200px; margin: 0 auto; position: relative; } 
/* #main_visual .quick_menu { width: 100%; height: 263px; margin: 0 auto; background: #fff; position: relative; } */
#main_visual .quick_menu ul { display: table; margin: 0 auto; height: 100%; max-width: 1200px; width: 100%; } 
#main_visual .quick_menu ul li:last-child { margin-right: 0; } 
.main_content02 { width: 100%; height: 550px; position: relative; } 
.main_content02 .main_div01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1200px; margin: 0px auto; position: relative; height: 100%; right: 0px; } 
.main_p01 { margin-top: 50px; color: #014099; font-size: 24px; line-height: 35px; } 
.main_p02 { font-size: 42px; color: #fff; /* margin-top: 50px; */margin-bottom: 23px; position: relative; } 
/* .main_p02::before { content:''; width: 47px; height: 1px; background:#fff; display: table; position: absolute; top: -30px; } */
.main_span02 { font-size: 28px; } 
.main_p03 { font-size: 18px; color: #fff; float: left; } 
.main_p04 { margin-left: 145px; font-size: 18px; color: #fff; } 
.main_a01 { margin-top: 40px; font-size: 18px; color: #fff; position: relative; z-index: 60; } 
.main_a01::before { content: ''; -webkit-transform: skew(45deg); -moz-transform: skew(45deg); transform: skew(45deg); width: 133px; height: 15px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; display: table; position: relative; bottom: -12px; left: -8px; } 
.main_a01::after { content: ''; width: 56px; height: 56px; position: relative; display: table; border-radius: 100%; background: #058fd3; right: -47px; top: 6px; z-index: -1; } 
.main_a01:hover:after { content: ''; background: #7ed305; } 
/* .main_div02 { float: left; width: calc(50% - 35px); margin-left: 35px; position: relative; } 
.main_div03 { position: absolute; right: 0px; bottom: 5%; padding: 2%; } */
.main_content02 .main_div01 .main_div02 { width: 50%; position: relative; height: auto; } 
.main_content02 .main_div01 .main_div02 div { position: relative; z-index: 55; } 
.main_content02 .main_div01 .main_div02 { position: relative; z-index: 55; margin-top: 60px; } 
.main_content02 .main_div01 .main_div03 { width: 50%; padding-top: 4%; } 
.main_div03 .mobile { display: none; } 
.main_content02 .main_div01 .main_div03 p::before { content: ''; position: absolute; top: 0; height: 2px; left: -50%; right: 70%; } 
#main_visual { display: table; width: 100%; padding-bottom: 0%; background-color: var(--default_color); height: 100%; position: relative; background-repeat: no-repeat; background-size: auto 100%; } 
.main_visual::before { content: ''; position: absolute; left: 0; top: 0; right: 50px; bottom: 150px; background-color: var(--default_color); border-radius: 0 250px 0 0; z-index: -1; } 
.m_visual_txt { z-index: 10; font-family: var(--jalnan_font); font-size: 193%; color: #fff; line-height: 55px; display: block; position: absolute; padding-top: 13%; padding-left: 5px; letter-spacing: 2px; animation-name: fadeInUp; animation-delay: 0.5s; } 
.m_visual_txt2 { z-index: 10; font-weight: 300; font-family: 'Noto Sans KR'; font-size: 108%; color: #6dffe7; line-height: 1.3em; display: block; position: absolute; padding-top: 3%; padding-left: 5px; letter-spacing: 0; animation-name: fadeInUp; animation-delay: 0.5s; } 
.m_visual_txt span { color: #d7ffb8; } 
.m_visual_txt p { font-size: 180%; letter-spacing: 0px; } 
.main_img { width: 100%; height: 600px; position: relative; } 
/* .m_txt { float: left; width: calc(140% - 35px); margin-left: 35px; position: relative; } */
 .wrap_container { display: flex; } 
 /* .m_txt { flex: 1; } 
 .main_div01 { flex: 1; } */
#main_visual .quick_menu { align-items: center; width: 100%; height: 263px; margin: 0 auto; background: #fff; padding-top: 3%; } 
#main_visual .quick_menu ul li:last-child { margin-right:0; } 
#main_visual .quick_menu ul li:hover { background-color: #004f86; } 
#main_visual .quick_menu ul li a { display: flex; color: #fff; font-size: 20px; font-family: var(--jalnan_font); } 
.quick_menu .goto_banner { border-radius: 100px; margin: 0 auto; width: 1200px; height: 140px; background-color: #e9f6fb; border: 3px solid #e9f6fb; position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } 
.quick_menu .goto_banner p { color: #006199; } 
.quick_menu .goto_banner:hover { background-color: #fff; border: 3px solid #006199; transform: translate(0px, -3px); } 
.quick_menu .goto_banner::before { content: ''; position: absolute; left: 80px; /* 왼쪽 여백 조절 */
background-image: url(/images/teenager/main/icons_school.png); background-repeat: no-repeat; background-position: center; top:12px; width: 180px; height: 140px; } 
.quick_menu .quick_4 { display: none; } 
/* 중앙 텍스트 링크 */
.quick_menu .goto_banner p { display: flex; font-family: var(--jalnan_font); align-items: center; gap: 10px; text-decoration: none; padding-left: 70px; font-size: 26px; } 
.quick_menu .goto_banner p span { color: #c83c64; } 
.quick_menu .goto_banner::after { content: ''; position: absolute; right: 50px; /* 오른쪽 여백 조절 */width: 48px; height: 48px; background: #fff url(/images/teenager/main/main_arrow.png) center no-repeat; background-size:; border-radius: 50%; } 
.quick_menu .quick_4 { background: #006199; } 
.quick_menu .quick_4 ul { display: block; color: #fff; } 
.quick_menu .quick_4 ul li { float: left; width: 50%; padding: 20px; } 
.quick_menu .quick_4 ul li a { white-space: nowrap; line-height: 48px; letter-spacing: 1px; } 
#photo_list { padding: 70px 0 77px 0; background: #fff; position: relative; z-index: 1; background-image: url(/images/teenager/main/main_img_bg02.png), url(/images/teenager/main/main_img_bg01.png); background-position: right bottom, left bottom; background-repeat: no-repeat, no-repeat; background-size: 28%, 30%; /* 필요에 따라 크기 조정 */
 padding-bottom: 5%; } 
#photo_list .photo_wrap { position: relative; width: 1200px; margin: 0 auto; } 
#photo_list .photo_wrap .photo_more { display: block; line-height: 50px; border-radius: 50px; width: 200px; margin: 0 auto; text-align: center; background-color: #379ad3; color: #fff; font-weight: 400; transition: all 0.3s; margin-top: 3%; font-size: 100%; letter-spacing: -0.05em; } 
#photo_list .photo_wrap .photo_more:hover { background-color: #00287a; } 
#photo_list .photo_wrap ul li { float: left; width: calc(94% / 3); margin-right: 3%; } 
#photo_list .photo_wrap ul li:last-child { margin-right: 0; } 
#photo_list .photo_wrap ul li img { width: 100%; height: auto; border-radius: 16px; } 
#photo_list .photo_wrap ul li p {  display: block; background: #fff; padding: 12px 40px 12px; text-align: center; border-radius: 10px; box-shadow: 2px 2px 10px rgba(160, 200, 230, 0.5); letter-spacing: -1px; width: 90%; justify-self: anchor-center; margin: 0 auto; } 
#photo_list .photo_wrap ul li p strong { display: block; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 18px;  height: 80px; white-space: normal; text-align: center; line-height: 20px; align-content: center; border-bottom: 1px solid #ddd; } 
#photo_list .photo_wrap ul li p span { color: #9d9fa8; font-size: 18px; font-weight: 300; line-height: 50px; letter-spacing: 0px; } 
.photo_wrap h2 { font-family: var(--jalnan_font); color: #00287a; text-align: center; margin-bottom: 35px; padding-bottom: 30px; font-size: 36px; } 
.photo_wrap { font-family: 'Noto Sans KR'; } 

.main-tit { max-width:1200px; margin-left:auto; margin-right:auto; text-align:center; font-family:'Core'; font-weight:600; color:#333; border-bottom:1px solid #616161 } 
#top-btn { text-align:center; margin-top:0px; position: relative; z-index: 100; background: #eef3fb; } 
#top-btn button { width:104px; height:97px; line-height:97px; color:#fff; background-color:#014099; font-size:1.5em } 
@media (min-width: 561px){
 #wraper { padding-top: 90px } 
 
 #container { margin: 0 auto } 
 
 #container .main-tit { font-size: 1.563em; padding-bottom: 22px; margin-bottom: 22px } 
 
 /* #container .wrap01,#container .wrap03 { padding:0 12px } */
 #container .wrap02 { margin: 30px 0 } 
 
 #container .wrap02 .main-tit { margin-left: 12px; margin-right: 12px } 
 #app { min-width:1200px } 
#wraper { padding-top:166px } 
#container .wrap01 { display:flex; justify-content:space-between; margin:60px auto 76px; max-width:1200px; width: 100%; } 
#container .wrap02 { background-color:#eef3fb; padding:60px 0 58px } 
#container .wrap02 .inner { max-width:1200px; width:100%; margin:0 auto; display:flex; justify-content:space-between } 
#container .wrap03 { padding-top:60px; width: 100%; max-width: 1200px; margin: 0px auto; } 
#container .wrap03 .inner { display:flex; justify-content:space-between } 
#container .main-tit { font-size:2em; padding-bottom:30px; margin-bottom:30px } 
#top-btn { margin-top:0px } 
#top-btn button { height:30px; line-height:30px; font-size:1em } 
.btn-pop { order: 3; color: #fff; font-size: 0.938em; height: 100%; padding: 0px 26px; border-right: 1px solid #c2cccf; float: left; } 
 }
 .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; } 
/*메인end*/
@media all and (max-width:1200px){
 #main_visual .quick_menu { width:100%; height: 100%; } 
#main_visual .quick_menu ul { display:block; margin:0; } 
#main_visual .quick_menu ul li:last-child { margin-right:0; } 
 
#photo_list .photo_wrap { width:95%; margin-bottom: 5%; } 
.wrap_container { padding: 2% 2% 2% 2%; } 
.main_content02 { height: auto; } 
 .m_visual_txt { width: 100%; padding-left: 0px; } 
 
.quick_menu .goto_banner { width: 100%; } 
 .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } 
 .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } 
.main_content02 .main_div01 .main_div03,
.main_content02 .main_div01 .main_div02 { margin: 0 auto; padding: 3%; } 
.main_content02 .main_div01 .main_div02::after { bottom: -50px; height: 100px; right: 50px; left: -100%; z-index: 3; background-size: 90px auto; } 
.main_content02 .main_div01 .main_div02 div { overflow: hidden; } 
.main_content02 .main_div01 .main_div03 { padding: 2%; } 
 }
@media all and (max-width:1040px) {.m_visual_txt2 { display: none; } 
.m_visual_txt { letter-spacing: 0; line-height: 50px; } 
.m_visual_txt p { font-size: 160%; letter-spacing: 0px; } 
 .m_visual_txt { padding-top: 18%; } 
 }
 @media all and (max-width:930px) {.m_visual_txt { font-size: 188%; } 
 }
@media all and (max-width:900px){
 .m_visual_txt { padding-top: 4%; } 
 .quick_menu .goto_banner { display: none; /* goto_banner 숨기기 */ } 
 .quick_menu .quick_4 { display: block; /* quick_4 보이기 */ } 
 .main_div03 .web { display: none; } 
 .main_div03 .mobile { display: block; } 
.quick_4 .after a img { margin-right: 32px; } 
 .main_content02 .main_div01 .main_div02 { width: 78%; text-align: center; } 
.main_content02 .main_div01 .main_div03 { width: 80%; padding-bottom: 8%; } 
 .quick_icon01 { border-right: 1px solid #e5e9ec; border-bottom: 1px solid #e5e9ec; border-top: 1px solid #e5e9ec; } 
 .quick_icon02 { border-bottom: 1px solid #e5e9ec; border-top: 1px solid #e5e9ec; } 
 .quick_icon03 { border-right: 1px solid #e5e9ec; border-bottom: 1px solid #e5e9ec; } 
 .quick_icon04 { border-bottom: 1px solid #e5e9ec; } 
 
 #main_visual .quick_menu { padding-top: 0px; } 
 .photo_wrap h2 { padding-bottom: 0px; } 
#photo_list .photo_wrap ul li { width:49%; margin:0 2% 10px 0; } 
#photo_list .photo_wrap ul li:nth-child(even) { margin-right:0; } 
#photo_list .photo_wrap ul li p a, #photo_list .photo_wrap ul li p span { font-size: 16px; } 
.wrap_container { flex-direction: column; } 
.m_txt,.main_div01 { width: 100%; } 
 }
@media all and (max-width:720px){
 #main_visual .main_content { width: 87%; height: auto; } 
#main_visual .quick_menu { width: 100%; height: auto; } 
 /* #main_visual .quick_menu ul li:nth-child(1) { background: #98dcc2; } 
#main_visual .quick_menu ul li:nth-child(2) { background: #0ba9b5; } 
#main_visual .quick_menu ul li:nth-child(3) { background: #0ba9b5; } 
#main_visual .quick_menu ul li:nth-child(4) { background: #69a3d5; } */
#main_visual .main_content .intro { padding:5% 9% 7% 9%; } 
#main_visual .main_content .intro .record dl:first-child { width:100%; } 
#main_visual .main_content .intro .record dl:last-child { width:100%; } 
#main_visual .main_content .intro .record dl { float:none; } 
#main_visual .main_content .intro .record ul { width:100%; float:none; padding-left:0; margin-top:25px; } 
#main_visual .main_content .intro .slogan h4 span { margin-bottom:10px; } 
#photo_list .photo_wrap ul li:nth-child(3) { display: none; } 
#photo_list .photo_wrap ul li:nth-child(4) { display: none; } 
#photo_list .photo_wrap ul li:nth-child(3) { display:none; } 
#photo_list .photo_wrap ul li:nth-child(4) { display:none; } 
 }
@media all and (max-width:620px) {.main_content02 .main_div01 .main_div02 { width: 100%; } 
.quick_4 .after a img { margin-right: 16px; } 
#main_visual .quick_menu ul li a { font-size: 16px; } 

 }
@media all and (max-width:520px){
 #photo_list .photo_wrap ul li { width: 100%; margin: 0 auto; padding-bottom: 8%; } 
#photo_list .photo_wrap ul li a {width: 100%;}
#photo_list .photo_wrap ul li:nth-child(2) { display:none; } 
#main_visual .main_content .intro .slogan h4 { font-size:38px; } 
#main_visual .main_content .intro .slogan h4 span { font-size:17px; margin-bottom:5px; } 
#main_visual .main_content .intro .slogan h4 strong { font-size:42px; } 
 .quick_4 .after a img { height: 32px; width: 32px; margin-right: 16px; align-self: anchor-center; } 
 }
@media all and (max-width:500px){
 #photo_list .photo_wrap ul li p { padding:9px 20px; } 
 .main_content02 .main_div01 .main_div03 { width: 90%; } 
 }
@media all and (max-width:440px){
 .m_visual_txt { font-size: 150%; line-height: 38px; } 
 .quick_4 .after a img { height: 32px; width: 32px; margin-right: 10px; letter-spacing: 0; align-self: anchor-center; } 
 
 #main_visual .quick_menu ul li a { font-size: 14px; } 
 .main_content02 .main_div01 .main_div02 { width: 95%; } 
 #main_visual .main_content .intro { padding:5% 7% 7% 7%; } 
#main_visual .main_content .intro .slogan h4 { font-size:29px; } 
#main_visual .main_content .intro .slogan h4 span { font-size:16px; margin-bottom:5px; } 
#main_visual .main_content .intro .slogan h4 strong { font-size:35px; } 
#main_visual .main_content .intro .slogan .intro_more { width:85px; padding-left:11px; bottom:19px; background:#309975; } 
 }
 @media all and (max-width:400px){
 .quick_4 .after a img { display: none; } 
 #main_visual .quick_menu ul li a { font-size: 14px; } 
 .quick_menu .quick_4 ul li { padding: 6px;
    justify-items: center; } 
 }
 @media all and (max-width:379px){
 .m_visual_txt { font-size: 130%; line-height: 38px; } 
 }
@media all and (max-width:330px){
 .m_visual_txt { font-size: 126%; line-height: 38px; } 
  #main_visual .quick_menu ul li a {
      font-size: 13px;
  }
 }
/*퀵메뉴*/
.goto ul li a:hover { background-color: #fff; transform: translate(0px, -30px); } 


.animated { animation-duration: 1s; animation-fill-mode: both; } 
.m_visual_txt.animated { animation-duration: 2s; animation-delay: 0.5s; } 
.m_visual_txt2.animated { animation-delay: 2s; animation-duration: 3s; } 

/* http://daneden.me/animate V3.5.2 - Copyright (c) 2017 Daniel Eden */



@keyframes fadeInUp { 
 from { opacity: 0; transform: translate3d(0, 50%, 0); } 

 to { opacity: 1; transform: none; } 
 }