@charset "utf-8";

/********************
 * common
 ********************/

/* 공통컬러 */
.m_title strong, #page h2, .localNavi > ul > li:hover > a, .p0101 .txt strong span, .teenager_family_site .list li a.new:after, #page .tc3
{color:#d24468 !important}

.subMenu > #now, .localNavi > ul > li > .depth2 li a:hover, .m_title:after, .task .cell:hover span, #main_visual .wrap_container > div span, #subVisual .visual_txt span, .p0101 .txt strong::after, .bill dl dt, .box_design01 li, .bbs_search_box .input_box button, .bbs_search_box.dictionary .search_initial dd li.on A, .pager_wrap ul li.num.on a, .history dl:after
{background-color:#d24468 !important }


#page h3:before, .task .cell:hover span, #page h3:before, .bbs_search_box .input_box input
{border-color:#d24468 !important}

#page h4:before {border: 4px solid #333 !important;}

html, body {font-family:'Noto Sans KR'; overflow-x:hidden; font-size:18px; font-weight:300;}


/*컨테이너 사이즈*/
.wrap_container, .content_wrap {width: 1300px; margin: 0 auto;}
#container {padding-top:149px; min-height: 1000px;}


h1.logo {position: relative; float: left; padding:25px 10px 20px 10px; margin:0; letter-spacing: -0.03em;}
h1.logo img {float: left; margin-right: 10px;}
h1.logo span {display: block; font-size: 14px;font-weight: 500; color: #777; line-height: 13px; margin-top:3px}
h1.logo strong {display: block; overflow: hidden; text-align: left; font-size: 30px; font-weight: 700;}


/* 스크롤시 메뉴 높이 */
header.sticky .localNavi > ul > li > a{line-height:80px; height:80px;}
header.sticky h1.logo {padding:8px 10px; margin:0}
header.sticky .menu_wrap {top:80px}
header.sticky .localNavi > ul > li > ul {top:80px;}


/* 메뉴영역 */
.nav_wrap .localNavi {float:right; width: 78%; margin-right:0px;}
.localNavi > ul > li:before {display:none}
.localNavi > ul > li > a{font-weight:500; font-size: 20px;}
.localNavi > ul > li > .depth2 {background:#333; padding:0px 0; box-shadow:4px 4px 7px rgba(0,0,0,0.2); top:105px; border:none}
.localNavi > ul > li:hover > .depth2 {background:#333;  }
.localNavi > ul > li > .depth2 li a {color:rgba(255,255,255,0.7); line-height: 35px; transition: all 0.3s ease-out; padding-left:30px}
.localNavi > ul > li > .depth2 li a:hover {color:rgba(255,255,255,1)}

#subVisual{background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover;  position:relative;overflow:hidden; background-image:url(/images/teenager/common/sub_visual.jpg); background-position:center center; }
#subVisual *{vertical-align:middle; letter-spacing: -0.05em;}
#subVisual .visual_txt{ position:relative; padding:80px 0 80px 30px; margin-bottom:60px}
#subVisual .visual_txt span{position:relative;color:#fff;font-size:90%; display:inline-block; line-height: 35px; padding:0 20px; border-radius: 30px;}
#subVisual .visual_txt strong{position:relative;color:#000;font-size:270%;margin:0 auto; font-weight:700; display:block;}
#subVisual .visual_txt p{color:rgba(0,0,0,1); font-size:120%;text-shadow:0 3px 5px rgba(255,255,255,0.3); margin:5px auto; font-weight: 400;}



.subMenu {margin-top:-60px; position: relative; background-color:rgba(86,82,97,0.9); height:60px}
.subMenu.Wide ul li a {color:#fff; line-height: 60px; height: 60px; font-size:20px}
.subMenu.Wide ul {margin:0 15%}
.subMenu.Wide .parents li .active { background:#fff; color:#000}



#page {margin-bottom: 90px;}


@media only screen and (max-width:1330px){
    .wrap_container, .content_wrap {width:100%; min-width: 320px; margin:0 auto;}
    .main_content .wrap_container { padding-right:20px; padding-left: 20px;}
    
    html, body {font-size:17px}

    #subVisual{background-size: auto 100%; background-position:70% center; }

}

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

    html, body {font-size:17px}
    #container {    padding-top: 80px;    }
    h1.logo {padding:8px 10px; margin:0}

}

@media only screen and (max-width: 750px) {
    html, body {font-size:15px}
	h1.logo span {font-size: 13px; margin-top:8px}
	h1.logo strong { font-size: 25px; letter-spacing:-0.05em}
	h1.logo img {margin-right:0}
}

@media only screen and (max-width: 650px) {
    #subVisual .visual_txt{ padding:40px 0 40px 30px; font-size: 80%;}
    #subVisual .visual_txt span{font-size:110%; display:inline-block; line-height: 30px;}
    #subVisual{ background-position:65% center; }

}