.clear:after {content:""; display:block; clear:both;} /* 밑줄 효과 */ .web_nav > li::after{content: ''; display: block; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: #47a5d9; transition: 0.4s;} .web_nav > li.on::after{width: 100%;} .web_nav > li > a{font-size: 20px; font-weight: 500; color: #333; text-align: center; padding: 30px 50px; height: 50px; display: flex; align-items: center;justify-content: center;} /* 모바일 박스 */ .m_box_r {position:fixed; top:0; right:-310px; width:310px; height:100%; background-color:#fff; /*overflow-y: scroll;*/ overflow-y:auto; z-index:999; transition:all .5s;z-index: 999999;} .m_box_r.on {right:0;} .m_box_r > div.m_top {padding:10px 20px; border-bottom:1px solid #ccc; background-color: #013981;} .m_box_r > div.m_top:after {content:""; display:block; clear:both;} .m_box_r > div.m_top > a.home_btn {display:inline-block; margin-top:5px; color:#fff; font-size:18px;} .m_box_r > div.m_top > a.home_btn > i {margin-right:5px;} .m_box_r > div.m_top > a.m_close_r {float:right;} .m_box_r > div.m_top > a.m_close_r > i {font-size:25px; color:#fff;} .m_box_r > ul.m_list > li {text-indent:20px; line-height:50px; border-bottom:1px solid #ccc;} .m_box_r > ul.m_list > li > a {position:relative; display:block; font-weight:500; font-size:17px;} .m_box_r > ul.m_list > li > a:after {content:"\f078"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;} .m_box_r > ul.m_list > li > a.fontbg:after {content:"\f077"; font-size: 13px; color: silver; font-family: FontAwesome; position: absolute; z-index: 99999; top:0px; right:15px;} .m_box_r > ul.m_list > li > ul.m_sub {background-color:#efefef; display:none;} .m_box_r > ul.m_list > li > ul.m_sub > li {border-bottom:1px solid #e5e5e5;} .m_box_r > ul.m_list > li > ul.m_sub > li:last-child {border-bottom:none;} .m_box_r > ul.m_list > li > ul.m_sub > li > a {display:block; color:#666; font-size:16px; font-weight:500;} /* 모바일 외부 링크 사이트 */ .m_box_r > .m_link {margin-top:30px; padding:0px 10px;} .m_box_r > .m_link > li {margin-bottom:5px; border:1px solid #d6d6d6; background:#f7f7f7 url("/nationalmschool/images/h_t_icon01.png") no-repeat left 20px center;} .m_box_r > .m_link > li:nth-child(2) {background-image:url("/nationalmschool/images/h_t_icon02.png");} /* .m_box_r > .m_link > li:nth-child(3) {background-image:url("/nationalmschool/images/h_t_icon03.png");} */ .m_box_r > .m_link > li > a {display:block; padding:10px 0px 10px 50px; background:url("/nationalmschool/images/m_site_arrow1.png") no-repeat right 15px center;} /* 해더 영역 */ #header_r {} #header_r .h_top {} #header_r .h_top .h_t_center {display:flex; justify-content:space-between; align-items:center; width:1500px; height:95px; margin:0px auto;} #header_r .h_top .h_r_gnb {} #header_r .h_top .h_r_gnb:after {content:""; display:block; clear:both;} #header_r .h_top .h_r_gnb > li {float:left; margin-left:30px;} #header_r .h_top .h_r_gnb > li:nth-child(1) {background:url("/nationalmschool/images/h_t_icon01.png") no-repeat left center;} #header_r .h_top .h_r_gnb > li:nth-child(2) {background:url("/nationalmschool/images/h_t_icon02.png") no-repeat left center;} #header_r .h_top .h_r_gnb > li:nth-child(3) {background:url("/nationalmschool/images/h_t_icon03.png") no-repeat left center;} #header_r .h_top .h_r_gnb > li.sns {margin-left:35px; background:url("https://komount.or.kr/renewal/images/h_sns.png") no-repeat left center;} #header_r .h_top .h_r_gnb > li.sns {position:relative;} #header_r .h_top .m_btn_r {display:none;} #header_r .h_top .m_btn_r > i {font-size:1.875rem; color: #013981; font-weight:600;} #header_r .h_top .h_r_gnb > li > a {display:inline-block; padding-left:23px; font-size:1.0625rem; font-weight:550; font-family:"pretendard";} #header_r .h_top .h_r_gnb > li.sns > a {color:#646464;} #header_r .h_top .h_r_gnb .h_t_sns_sub {display:none; position:absolute; left:50%; transform:translateX(-50%); width:100px; border-top:2px solid #013981; background-color:#fff; z-index:88; } #header_r .h_top .h_r_gnb .h_t_sns_sub > li {transition:all .5s;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li > a {display:block; padding:5px 0px 5px 5px; font-size:15px; } #header_r .h_top .h_r_gnb .h_t_sns_sub > li:hover {background-color:#013981;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li:hover > a {color:#fff;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li > a > i {margin-right:5px;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li:nth-child(1) > a > i {color:#0dbc54;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li:nth-child(2) > a > i {color:#4b6cb6;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li:nth-child(3) > a > i {color:#dc5b8d;} #header_r .h_top .h_r_gnb .h_t_sns_sub > li:nth-child(4) > a > i {color:#f2410f;} #header_r .h_bot {position:relative; background-color:#333;} #header_r .h_bot .h_b_center {width:1500px; margin:0px auto;} #header_r .h_bot .h_b_gnb {} #header_r .h_bot .h_b_gnb:after {content:""; display:block; clear:both;} #header_r .h_bot .h_b_gnb > li {float:left; width:20%; height:55px;} #header_r .h_bot .h_b_gnb > li > a {position:relative; display:block; height:100%; color:#fff; font-size:1.3125rem; line-height:55px; font-weight:500; text-align:center; font-family:"pretendard";} #header_r .h_bot .h_b_gnb > li:last-child > a:before {display:none;} #header_r .h_bot .h_b_gnb > li > a:before {content:""; display:block; width:1px; height:20px; background-color:#5c5c5c; position:absolute; top:50%; transform:translateY(-50%); right:0px;} #header_r .h_bot .h_b_gnb .h_bg_r {display:none; position:absolute; width:100%; height:220px; left:0px; background-color:#fff; z-index:77; border-bottom:1px solid #ccc;} #header_r .h_bot .h_b_gnb .h_line {height:200px; border-bottom:1px solid #ccc;} #header_r .h_bot .h_b_gnb .h_bg_r:after {content:""; display:block; clear:both;} #header_r .h_bot .h_b_gnb .h_bg_r .left_img {position:relative; float:left; width:20%; height:100%;} #header_r .h_bot .h_b_gnb > li:nth-child(1) .h_bg_r .left_img {background:#f3f3f3 url("/nationalmschool/images/h_icon05_f.png") no-repeat bottom 5px center;} #header_r .h_bot .h_b_gnb > li:nth-child(2) .h_bg_r .left_img {background:#f3f3f3 url("/nationalmschool/images/h_icon04_f.png") no-repeat bottom 5px center;} #header_r .h_bot .h_b_gnb > li:nth-child(3) .h_bg_r .left_img {background:#f3f3f3 url("/nationalmschool/images/h_icon03_f.png") no-repeat bottom 5px center;} #header_r .h_bot .h_b_gnb > li:nth-child(4) .h_bg_r .left_img {background:#f3f3f3 url("/nationalmschool/images/h_icon02_f.png") no-repeat bottom 5px center;} #header_r .h_bot .h_b_gnb > li:nth-child(5) .h_bg_r .left_img {background:#f3f3f3 url("/nationalmschool/images/h_icon01_f.png") no-repeat bottom center;} #header_r .h_bot .h_b_gnb .h_bg_r_center {width:1500px; height:100%; margin:0px auto;} #header_r .h_bot .h_b_gnb .h_bg_r_center:after {content:""; display:block; clear:both;} /* #header_r .h_bot .h_b_gnb > li:nth-child(6) .h_bg_r .left_img {background:#f3f3f3 url("https://komount.or.kr/renewal/images/h_icon06.png") no-repeat bottom 1.20vw right 1.82vw/6.98vw 7.03vw;} */ /* #header_r .h_bot .h_b_gnb .h_bg_r .left_img .h_font_box {text-align: center; position: absolute; top:2.08vw; left:2.08vw;} */ #header_r .h_bot .h_b_gnb .h_bg_r .left_img .h_font_box {padding-top:40px; box-sizing:border-box;} #header_r .h_bot .h_b_gnb .h_bg_r .left_img .h_font_box > b {display:block; margin-bottom:10px; font-size:25px; text-align:center; font-weight:550;} #header_r .h_bot .h_b_gnb .h_bg_r .left_img .h_font_box > p {font-size:16px; font-weight:450;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {float:right; width:80%; height:100%; box-sizing:border-box; padding-top:40px;} /* #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu {width:1018px;} */ #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu:after {content:""; display:block; clear:both;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li {float:left; width:21%; height:55px; margin-left:3.8%; border:1px solid #d0d4d8; border-radius:5px; box-sizing:border-box; transition:all .5s;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li:hover {background-color:#333;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li:hover > a {color:#fff;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li:nth-child(4n) {margin-right:0px;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li:nth-child(n+5) {margin-top:20px;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li > a {display:block; height:100%; font-size:15px; text-align:left; text-indent:16px; line-height:55px; font-weight:500;} /* @media screen and (max-width:1700px) { #header_r .h_top .h_t_center {width:95%;} #header_r .h_bot .h_b_center {width:95%;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu {width:100%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {padding:40px 40px 0px;} } @media screen and (max-width:1600px){ #header_r .h_bot .h_b_gnb .h_bg_r .left_img {width:28%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {width:72%;} } @media screen and (max-width:1500px){ #header_r .h_top .h_t_center .h_r_logo {width:250px;} #header_r .h_top .h_t_center .h_r_logo > a {display:block;} #header_r .h_top .h_t_center .h_r_logo > a > img {width:100%;} #header_r .h_bot .h_b_gnb .h_bg_r .left_img {width:27%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {width:73%; padding:30px 30px 0px;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li {width:23.5%; margin-right:2%;} } @media screen and (max-width:1400px){ #header_r .h_top {border-bottom: 1px solid #c8c9ca;} #header_r .h_bot .h_b_gnb > li > a {font-size:1.25rem;} #header_r .h_bot {display:none;} #header_r .h_top .m_btn_r {display:block;} #header_r .h_top .h_r_gnb {display:none;} } @media screen and (max-width:1200px){ #header_r .h_top .h_t_center {height:80px;} #header_r .h_top .h_t_center .h_r_logo {width:200px;} #header_r .h_top .m_btn_r > i {font-size:1.75rem;} } @media screen and (max-width:1024px){ #header_r .h_top .h_t_center {height:70px;} #header_r .h_top .h_t_center .h_r_logo {width:180px;} #header_r .h_top .m_btn_r > i {font-size:1.5625rem;} } @media screen and (max-width:768px){ #header_r .h_top .h_t_center {height:65px;} } @media screen and (max-width:600px){ #header_r .h_top .h_t_center {height:60px;} #header_r .h_top .h_t_center .h_r_logo {width:170px;} } @media screen and (max-width:500px){ #header_r .h_top .h_t_center .h_r_logo {width:150px;} } */ @media screen and (max-width:1700px) { #header_r .h_top .h_t_center {width:95%;} #header_r .h_bot .h_b_center {width:95%;} /* #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu {width:100%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {padding:40px 40px 0px;} */ } @media screen and (max-width:1600px){ /* #header_r .h_bot .h_b_gnb .h_bg_r .left_img {width:28%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {width:72%;} */ } @media screen and (max-width:1530px){ #header_r .h_bot .h_b_gnb .h_bg_r_center {width:100%;} } @media screen and (max-width:1500px){ #header_r .h_top .h_t_center .h_r_logo {width:250px;} #header_r .h_top .h_t_center .h_r_logo > a {display:block;} #header_r .h_top .h_t_center .h_r_logo > a > img {width:100%;} /* #header_r .h_bot .h_b_gnb .h_bg_r .left_img {width:27%;} #header_r .h_bot .h_b_gnb .h_bg_r .right_menu {width:73%; padding:30px 30px 0px;} #header_r .h_bot .h_b_gnb .h_bg_r .h_sub_menu > li {width:23.5%; margin-right:2%;} */ } @media screen and (max-width:1400px){ #header_r .h_top {border-bottom: 1px solid #c8c9ca;} #header_r .h_bot .h_b_gnb > li > a {font-size:1.25rem;} #header_r .h_bot {display:none;} #header_r .h_top .m_btn_r {display:block;} #header_r .h_top .h_r_gnb {display:none;} } @media screen and (max-width:1200px){ #header_r .h_top .h_t_center {height:80px;} #header_r .h_top .h_t_center .h_r_logo {width:200px;} #header_r .h_top .m_btn_r > i {font-size:1.75rem;} } @media screen and (max-width:1024px){ #header_r .h_top .h_t_center {height:70px;} #header_r .h_top .h_t_center .h_r_logo {width:180px;} #header_r .h_top .m_btn_r > i {font-size:1.5625rem;} } @media screen and (max-width:768px){ #header_r .h_top .h_t_center {height:65px;} } @media screen and (max-width:600px){ #header_r .h_top .h_t_center {height:60px;} #header_r .h_top .h_t_center .h_r_logo {width:170px;} } @media screen and (max-width:500px){ #header_r .h_top .h_t_center .h_r_logo {width:150px;} } /* 리뉴얼 컨테이너 */ /* div#container {width:100%; height: 100%;} */ div#container {font-family:"GmarketSans";} div#container > div.cont1 {background-color: #e4f5ff;} /* div#container > div.cont1 > div.cont1_list {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1400px; height:800px;} */ div#container > div.cont1 > div.cont1_list { width:1500px; margin:0px auto; padding:0px 0px 100px; } div#container > div.cont1 > div.cont1_list .cont1_top { background: url("/nationalmschool/images/tit_bg02.png") no-repeat right top;} div#container > div.cont1 > div.cont1_list div.tit_box {float:right; padding:60px 0px 0px;} div#container > div.cont1 > div.cont1_list div.tit_box > p {line-height:55px; font-size:45px; text-align:right; font-weight:300;} div#container > div.cont1 > div.cont1_list div.tit_box > p > span {position:relative;} /* div#container > div.cont1 > div.cont1_list div.tit_box > p > span:after {position:absolute; top:-12px; left:50%; transform: translateX(-50%); content: ""; display:inline-block; width:5px; height:5px; background-color:#47a5d9; border-radius:50%;} */ div#container > div.cont1 > div.cont1_list div.tit_box > p > span:after {position:absolute; /*top:-12px;*/ top:-23px; left:50%; transform: translateX(-50%); content: ""; display:inline-block; width:5px; height:5px; background-color:#47a5d9; border-radius:50%; animation: motion 0.3s linear 0s infinite alternate; margin-top: 0;} @keyframes motion { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } div#container > div.cont1 > div.cont1_list div.tit_box > p > strong {font-weight:500;} div#container > div.cont1 > div.cont1_list ul.c_hidden {display:none;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap {float:left; padding-top:70px; margin-bottom:35px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {float:none; width:700px; border-radius:10px; background-repeat:no-repeat; background-position: right 52px top 16px; box-shadow:1px 1px 1px #999; transition:all .5s;} div.cont1_list ul.c_reservation_wrap > li:hover {position: relative; animation:jmp_mn .5s ease;} @keyframes jmp_mn {0% {top:0px;} 50% {top:-10px;} 100% {top:0px} } div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:first-child {margin-bottom:30px; background-color:#45acbb; background-image:url("/nationalmschool/images/cont1_bg.png");} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:first-child:hover {background-color:#4cb7c7;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:last-child {margin-right:0px;background-color:#47a5d9; background-image:url("/nationalmschool/images/cont1_bg2.png");} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:last-child:hover {background-color:#54b3e8;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li > a {display:block; height:100%; color:#fff; font-size:35px; padding:30px 0px 30px 40px; box-sizing:border-box;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li > a > strong {font-weight:700;} #container .cont1 .c_bot_box {background-color:#fff; padding:30px; border-radius:10px; box-shadow:1px 1px 1px #999;} #container .cont1 .left_wrap {width:46%; float: left;} #container .cont1 .left {display:flex; align-items:center;} /* #container .cont1 .left > li {float:left; width:31.333333%; height:250px; margin-right:3%; margin-bottom:4.5%; border:1px solid #dfdfdf; box-sizing:border-box; background-repeat:no-repeat; background-position:right 20px bottom 10px;} */ #container .cont1 .left > li {width:31.333333%; height:250px; margin-right:3%; margin-bottom:35px; border:1px solid #dfdfdf; box-sizing:border-box; background-repeat:no-repeat; background:url("/nationalmschool/images/shop_bg.png") no-repeat left top;} #container .cont1 .left > li:nth-child(1) > a {background-image:url("/nationalmschool/images/list01_png.png");} /* #container .left > li:nth-child(2) {background-image:url("/nationalmschool/images/list02_png.png");} */ #container .cont1 .left > li:nth-child(2) > a {background-image:url("/nationalmschool/images/list03_png.png");} #container .cont1 .left > li:nth-child(3) > a {background-image:url("/nationalmschool/images/list04_png.png");} #container .cont1 .left > li:last-child {margin-right:0px;} /* #container .cont1 .left > li:last-child > a {margin-right:0px;} */ #container .cont1 .left > li > a {position: relative; display: block; height:100%; transition:all .5s; background-position:right 10px bottom 10px; background-repeat:no-repeat;} #container .cont1 .left > li:hover {border:none;} #container .cont1 .left > li:hover a::before {width:100%; z-index: 1;} #container .cont1 .left > li a::after {content: ''; position: absolute; right: 0px; top:0px; z-index:-1; width: 0%; height:1px; background: #47a5d9; -webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1); transition: all 0.4s cubic-bezier(.5, .24, 0, 1)} #container .cont1 .left > li:hover a::after {width:100%; z-index: 1;} #container .cont1 .left > li:hover a {border-left:1px solid #47a5d9; border-right:1px solid #47a5d9; border-bottom: 1px solid #47a5d9;} /* div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li > a > p.l_text {padding:23px 0px 0px 20px; font-size:20px;} */ #container .cont1 .left > li > a > p.l_text {padding:23px 0px 0px 15px; font-size:20px;} #container .cont1 .left > li > a > p.l_text:hover {text-decoration:underline; text-decoration-color:#45acbb;} #container .cont1 .left > li > a > p.l_text > span {display:block; margin-top:8px; color:#45acbb;} /* 리뉴얼 공지사항 */ #container .cont1 .right {display:flex; align-items:center; justify-content:space-between; float:right; width:50%; box-sizing: border-box;} /* #container .cont1 .right {height:250px;} */ #container .cont1 .right > div {width:49%;} #container .cont1 .plus_btn {position:absolute; top:0px; right:0px; width:28px; height:28px; background-color:#666; text-align:center; line-height:28px;} #container .cont1 .plus_btn > img {vertical-align:middle; transition:all .5s;} #container .cont1 .plus_btn > img:hover {transform:rotate(360deg);} #container .cont1 .r_top {position:relative; margin-bottom:4.5%;} /* div#container > div.cont1 .r_top > a.plus_btn {} */ #container .cont1 .r_top .t_r_tab {height:50px; border-bottom:1px solid #dfdfdf;} #container .cont1 .r_top .t_r_tab > li {float:left; margin-left:22px;} #container .cont1 .r_top .t_r_tab > li.color > a {color:#47a5d9;} #container .cont1 .r_top .t_r_tab > li > a{font-size:20px; color:#9e9e9e; line-height:50px;} #container .cont1 .r_top .t_r_tab > li > a:hover {color:#47a5d9;} #container .cont1 .tab_wrap {position:relative; height:200px;} #container .cont1 .tab_cont {height:100%;} #container .cont1 .tab_list {position:absolute; width:100%; left:0px; display: none;} #container .cont1 .tab_list:nth-child(1) {display:block;} /* div#container > div.cont1 .tab_list > li:after {content:""; display: block; clear:both;} */ #container .cont1 .tab_list > li {position:relative; height:50px; padding-left:20px; line-height:50px; border-bottom: 1px dotted #dfdfdf; box-sizing:border-box;} #container .cont1 .tab_list > li:last-child {border-bottom:none;} #container .cont1 .tab_list > li > a { display:inline-block; width:60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left:29px;} #container .cont1 .tab_list > li > a:hover {text-decoration:underline;} /* div#container > div.cont1 .tab_list > li > a::before {position:relative; top:3px; content:""; display:inline-block; width:20px; height:15px; background-image: url("/images/cont1_bg3.png"); margin-right:11px;} */ #container .cont1 .tab_list > li:before {position:absolute; top:15px; content:""; display:block; width:20px; height:15px; background: url("/nationalmschool/images/cont1_bg3.png") no-repeat left center ;} /* div#container > div.cont1 .tab_list > li > span {float:right; margin-right:140px; color:#a2a2a2;} */ #container .cont1 .tab_list > li > span {float:right; margin-right:30px; color:#a2a2a2;} /* 인공암벽장 갤러리/인공암벽장 동영상 */ #container .cont1 .r_bot > li {position:relative; width:100%; margin-right:3%; margin-bottom:35px; border:1px solid #dfdfdf; box-sizing:border-box;} #container .cont1 .r_bot > li:last-child {margin-bottom:0px;} #container .cont1 .r_bot > li > p {font-size:20px; line-height:50px; padding-left:22px; box-sizing: border-box; border-bottom: 1px solid #dfdfdf;} #container .cont1 .r_bot > li > p > a:hover {text-decoration:underline; text-decoration-color:#47a5d9;} #container .cont1 .r_bot > li > p span {color:#47a5d9;} #container .cont1 .r_bot > li > div {height:200px;} #container .cont1 .r_bot > li > div a {display:block; height:100%; overflow:hidden;} #container .cont1 .r_bot > li > div img {width:100%; height:100%; max-width:100%; transition:all .5s;} #container .cont1 .r_bot > li > div img:hover {transform:scale(1.1);} /* 배너 존 */ #container .cont1 .banner_box {border:1px solid #dadada; height:541px; overflow:hidden;} #container .cont1 .banner_box .banner_list {position:relative; height:100%;} #container .cont1 .banner_box .banner_list button {position:absolute; bottom:0px; right:0; display:block; width:40px; height:40px; border:1px solid #d7d7d7; z-index:999999;} #container .cont1 .banner_box .banner_list button.slick-prev {background:#fff url("/renewal/images/cont1_arrow_left.png") no-repeat center; right:80px;} #container .cont1 .banner_box .banner_list button.slick-next {background:#fff url("/renewal/images/cont1_arrow_right.png") no-repeat center;} #container .cont1 .banner_box .banner_list button.stop {background:#fff url("/renewal/images/cont1_arrow_stop.png") no-repeat center; right:40px;} #container .cont1 .banner_box .banner_list img {width:100%; height:100%; } #container .cont1 .banner_box .banner_list .slick-list {height:100%;} #container .cont1 .banner_box .banner_list .slick-track {height:100%;} #container .cont1 .banner_box .banner_list .slick-slide {height:100%;} /* 리뉴얼 풋터 영역 */ #footer_n {padding-bottom:33px; background-color:#656670;} /* div#footer_n > div.f_center {width:1340px; margin:0px auto;} */ #footer_n .f_center {width:1500px; margin:0px auto;} #footer_n .f_center div.f_left {float:left;} #footer_n .f_center div.f_left > h1.f_logo {float:left; margin-top:30px; margin-right:54px;} #footer_n .f_center div.f_left > div.f_l_text {float:left; margin-top:40px; font-size:14px;} #footer_n .f_center div.f_left > div.f_l_text > p {color:#fff; margin-bottom:14px;} #footer_n .f_center div.f_left > div.f_l_text > small {color:#a8a9b9;} #footer_n .f_center div.f_right {float:right;} #footer_n .f_center div.f_right .mz_link {position:relative; float:right; margin-top:30px; width: 250px; height:35px; border:1px solid #D0D0D0; box-sizing:border-box; } #footer_n .f_center div.f_right .mz_link h4 a { position:relative; display:block; line-height:32px; padding:0px 0px 0px 15px; font-size:14px; color:#fff; z-index:1001; } #footer_n .f_center div.f_right .mz_link h4 a:before {position: absolute; right: 15px; top: 0; height: 100%; font-size: 14px; content: '▼'; transform: rotate(0deg); transition: all .2s ease; color:#fff; } #footer_n .f_center div.f_right .mz_link.active h4 a:before { top: 2px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #footer_n .f_center div.f_right .mz_link ul {display:none; position: absolute; left:0; bottom:34px; width:100%; padding:0px 0; background-color: #4D525A; box-sizing: border-box; z-index:1000; } #footer_n .f_center div.f_right .mz_link li { border-bottom: 1px dotted #D2D2D2; transition:all .3s;} #footer_n .f_center div.f_right .mz_link li:last-child { border-bottom: none;} #footer_n .f_center div.f_right .mz_link li a {display:block; line-height:35px; font-size:14px; color:#fff; padding-left:15px; } #footer_n .f_center div.f_right .mz_link li:hover a{background-color: #373C44;} #footer_n .f_center div.f_right .right_text {float:right; margin-top:40px; margin-right:30px;} #footer_n .f_center div.f_right .right_text > li {float:left;} #footer_n .f_center div.f_right .right_text > li > a {color:#fff; margin-left:20px; font-size:16px;} @media screen and (max-width:1530px){ /* 반응형 컨테이너 영역 */ div#container > div.cont1 > div.cont1_list {width:97%;} div#container > div.cont1 > div.cont1_list > div.tit_box {padding:90px 0px 30px;} div#container > div.cont1 > div.cont1_list > div.tit_box > p {text-align:center;} .h_top > .h_t_center {width:97%;} /* 풋터 영엿 */ div#footer_n > div.f_center {width:97%;} } /* 반응형 */ /* 반응형 1440px */ @media screen and (max-width:1440px){ /* .h_top > .h_t_center {width:97%;} */ /* 반응형 컨테이너 영역 */ /* div#container > div.cont1 > div.cont1_list {width:97%;} div#container > div.cont1 > div.cont1_list > div.tit_box {padding:90px 0px 30px;} div#container > div.cont1 > div.cont1_list > div.tit_box > p {text-align:center;} */ } @media screen and (max-width:1300px){ /* 반응형 컨테이너 영역 */ /* body,html {height:153%;} */ /* div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:last-child {display:none;} */ #container .cont1 .left_wrap {width:48%;} /* 풋터 영엿 */ /* div#footer > div.f_center {width:97%;} */ } @media screen and (max-width:1200px){ div#container > div.cont1 > div.cont1_list .cont1_top {background:url(/);} div#container > div.cont1 > div.cont1_list div.tit_box {float:none;} div#container > div.cont1 > div.cont1_list div.tit_box > p {text-align:center;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap {float:none; padding-top:50px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {width:100%; } div#container > div.cont1 > div.cont1_list > div.c_bot_box {background-color:transparent; padding:0px; border-radius:0px; box-shadow:0px 0px 0px 0px;} #container .cont1 .left_wrap {width:100%;} #container .cont1 .left {float:none; width:100%; background-color:#fff; padding:30px 15px; box-shadow:1px 1px 1px #999; box-sizing: border-box;} #container .cont1 .left > li {width:48%;margin-right:0px;} #container .cont1 .left > li:nth-child(n+1) {margin:0px 1%;} /* #container .cont1 .left > li:nth-child(n+3) {margin-top:2%;} */ #container .right {float: none;} #container .cont1 > div.cont1_list ul.c_hidden {display: block; margin-top:50px;} #container .cont1 > div.cont1_list ul.c_hidden > li:first-child {display:none;} #container .cont1 > div.cont1_list ul.c_hidden > li:last-child {display: block;} #container .cont1 .r_top {background-color:#fff; width:100%; margin-bottom:50px; padding:30px 15px; box-shadow:1px 1px 1px #999; box-sizing: border-box; } #container .cont1 .right {height:auto; width:100%; align-items:flex-start; border:none; background-color:#fff; width:100%; margin-bottom:50px; padding:30px 15px; box-shadow:1px 1px 1px #999; box-sizing: border-box; } #container .cont1 .right > div {height:auto;} #container .cont1 .tab_list {border-bottom:1px solid #dfdfdf;} /* #container .cont1 .r_bot { background-color:#fff; width:100%; padding:30px 15px; box-shadow:1px 1px 1px #999; box-sizing: border-box;} */ #container .cont1 .r_bot { background-color:#fff; width:100%; padding:0px; box-shadow:1px 1px 1px #999; box-sizing: border-box;} #container .cont1 .r_bot > li > div {height:auto;} /* 풋터 영엿 */ div#footer_n {padding-bottom:0px;} div#footer_n > div.f_center {width:100%;} div#footer_n {background-color:transparent;} div#footer_n > div.f_center > div.f_right {float:none; padding:15px 0px; background-color:#a1a1a1; width:100%;} div#footer_n > div.f_center > div.f_right .mz_link {float:right; margin-top:0px; margin-right:20px;} div#footer_n > div.f_center > div.f_right > ul.right_text {float:left; margin-top:15px; margin-right:0px;} div#footer_n > div.f_center > div.f_left {float:none; padding-bottom: 33px; background-color:#656670;} div#footer_n > div.f_center > div.f_left > h1.f_logo {margin-left:20px;} } @media screen and (max-width:1024px){ .header {height: auto; padding:5px 0px;} } @media screen and (max-width:768px){ #container .tab_list > li > span {display:none;} } @media screen and (max-width:706px){ /* 원본 */ /* h1.logo {width:170px;} h1.logo > a > img {width:100%;} div#container > div.cont1 > div.cont1_list {width:94%; padding-bottom:45px;} div#container > div.cont1 > div.cont1_list div.tit_box {padding:50px 0px 30px;} div#container > div.cont1 > div.cont1_list div.tit_box > p {padding-right:0px; line-height:48px; font-size:33px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap {padding-top:0;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {background-size: 60px;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > div.right > div.r_top > div.tab_wrap > div.tab_cont > ul.tab_list > li > span {margin-right:10px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li > a {font-size:25px; padding:20px 0px 20px 20px; } div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left {margin-bottom:50px;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li {width:100%;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li:nth-child(n+1) {margin: 0px 0px; margin-bottom:4.5%;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li:last-child {margin-bottom:0px;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > div.right > ul.r_bot > li {float:none; width:100%;} div#container > div.cont1 > div.cont1_list > div.c_bot_box > div.right > ul.r_bot > li:first-child {margin-bottom: 4.5%;} div#footer_n > div.f_center > div.f_right .mz_link {float:none; width:50%; margin:0px auto;} div#footer_n > div.f_center > div.f_right > ul.right_text {float:none; text-align:center; } div#footer_n > div.f_center > div.f_right > ul.right_text > li {float:none; display: inline-block; margin:0px 5px;} div#footer_n > div.f_center > div.f_right > ul.right_text > li > a {margin-left:0px;} div#footer_n > div.f_center > div.f_left > h1.f_logo { width:170px; float:none; margin:0px auto; padding-top:20px;} div#footer_n > div.f_center > div.f_left > h1.f_logo > img {width:100%;} div#footer_n > div.f_center > div.f_left > div.f_l_text {float:none; margin-top:20px; text-align:center;} */ h1.logo {width:170px;} h1.logo > a > img {width:100%;} div#container > div.cont1 > div.cont1_list {width:94%; padding-bottom:45px;} div#container > div.cont1 > div.cont1_list div.tit_box {padding:50px 0px 30px;} div#container > div.cont1 > div.cont1_list div.tit_box > p {padding-right:0px; line-height:38px; font-size:28px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap {padding-top:0; margin-bottom:30px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {background-size: 60px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:first-child {margin-bottom:20px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li > a {font-size:20px; padding:18px 0px 18px 20px; } #container .cont1 .left > li > a > p.l_text {font-size:18px;} #container .cont1 .left > li > a > p.l_text > span {margin-top:0px;} #container .cont1 .left > li {background-size:140px;} #container .cont1 .left > li:nth-child(1) > a {background-size:100px;} /* #container .cont1 .left > li:nth-child(2) > a {background-size:130px;} */ #container .cont1 .left > li:nth-child(2) > a {background-size:115px;} #container .cont1 .left > li:nth-child(3) > a {background-size:70px;} #container .cont1 .left {margin-bottom:30px;} #container .cont1 .r_top {margin-bottom:30px;} #container .cont1 .tab_list > li > span {margin-right:10px;} #container .cont1 .tab_list > li {padding-left:10px;} #container .cont1 .tab_list > li > a {width:90%;} #container .cont1 .r_top .t_r_tab > li > a {font-size:18px;} #container .cont1 .r_top .t_r_tab > li {margin-left:15px;} #container .cont1 .r_bot > li > p {font-size:18px; padding-left:20px;} #container .cont1 .r_bot > li {float:none; width:100%;} #container .cont1 .r_bot > li:first-child {margin-bottom: 4.5%;} div#footer_n > div.f_center > div.f_right .mz_link {float:none; width:50%; margin:0px auto;} div#footer_n > div.f_center > div.f_right > ul.right_text {float:none; text-align:center; } div#footer_n > div.f_center > div.f_right > ul.right_text > li {float:none; display: inline-block; margin:0px 5px;} div#footer_n > div.f_center > div.f_right > ul.right_text > li > a {margin-left:0px;} div#footer_n > div.f_center > div.f_left > h1.f_logo { width:170px; float:none; margin:0px auto; padding-top:20px;} div#footer_n > div.f_center > div.f_left > h1.f_logo > img {width:100%;} div#footer_n > div.f_center > div.f_left > div.f_l_text {float:none; margin-top:20px; text-align:center;} } @media screen and (max-width:630px){ div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li {height:240px;} } @media screen and (max-width:600px){ div#container > div.cont1 > div.cont1_list > div.c_bot_box > ul.left > li > a {background-size:110px;} div#container > div.cont1 > div.cont1_list div.tit_box > p {font-size:23px; line-height:33px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li > a {font-size:18px; padding:15px 0px 15px 18px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {background-position: right 15px center; background-size:55px;} #container .cont1 .left {flex-wrap: wrap;} #container .cont1 .left > li {height:210px;} #container .cont1 .left > li:nth-child(1) {width:100%; margin-bottom:10px;} #container .cont1 .left > li > a > p.l_text {font-size:16px; padding:17px 0px 0px 15px;} #container .cont1 .left > li {background-size:90px;} #container .cont1 .left > li > a {background-position: right 10px bottom 8px;} #container .cont1 .left > li:nth-child(1) > a {background-size:90px;} /* #container .cont1 .left > li:nth-child(2) > a {background-size:110px;} */ #container .cont1 .left > li:nth-child(2) > a {background-size:100px;} #container .cont1 .left > li:nth-child(3) > a {background-size:60px;} #container .cont1 .tab_list > li:before {background-size:15px;} #container .cont1 .r_top .t_r_tab > li {margin-left:10px;} #container .cont1 .r_top .t_r_tab > li > a {font-size:16px;} #container .cont1 .right {display:block; margin-bottom:0px;} #container .cont1 .right > div {width:100%;} #container .cont1 .tab_list > li > a {font-size:15px; margin-left:23px;} #container .cont1 .r_bot {background-color:transparent; margin-bottom:4.5%; padding:0px; box-shadow:initial;} #container .cont1 .r_bot > li {margin-right:0px;} #container .cont1 .r_bot > li > p {font-size:17px; padding-left:15px;} /* #container .cont1 .banner_box {height:500px;} */ } @media screen and (max-width:530px){ #container .cont1 .left > li {height:200px;} } @media screen and (max-width:500px){ #container .cont1 .left {padding:25px 10px;} #container .cont1 .left > li {height:180px;} #container .cont1 .left > li:nth-child(1) > a {background-size:70px;} /* #container .cont1 .left > li:nth-child(2) > a {background-size:90px;} */ #container .cont1 .left > li:nth-child(2) > a {background-size:90px;} #container .cont1 .left > li:nth-child(3) > a {background-size:50px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li:first-child {margin-bottom:10px;} /* div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {background-position: right 10px top 16px;} */ div#footer_n > div.f_center > div.f_right .mz_link {width:90%;} div#footer_n > div.f_center > div.f_left > div.f_l_text > p {line-height:20px;} div#footer_n > div.f_center > div.f_left > div.f_l_text > small {line-height:20px;} div#container > div.cont1 > div.cont1_list ul.c_reservation_wrap > li {background-size:50px;} div#footer_n > div.f_center > div.f_left > div.f_l_text {margin-top:15px;} div#footer_n > div.f_center > div.f_left > h1.f_logo {width:140px;} div#footer_n > div.f_center > div.f_left {padding-bottom:20px;} div#footer_n > div.f_center > div.f_left > div.f_l_text > p {margin-bottom:8px;} /* #container .cont1 .banner_box {height:450px;} */ } @media screen and (max-width:410px){ #container .cont1 .left > li {height:160px;} #container .cont1 .left > li:nth-child(1) {background-size:50px;} #container .cont1 .left > li:nth-child(2) {background-size:70px;} #container .cont1 .left > li:nth-child(3) {background-size:70px;} #container .cont1 .left > li:nth-child(4) {background-size:40px;} #container .cont1 .left > li > a {background-size:80px;} #container .cont1 .left > li > a > p.l_text {padding:10px 0px 0px 10px;} } /* 20181127 */ .footer_banner_wrap {width:1500px; margin: 0 auto; padding:20px 0; overflow:hidden;} .banner_title {float:left; width:92px; color:#696e72; font-size:17px; font-weight:500; padding:5px 0 5px 6px; line-height:1; font-family:"GmarketSans";} .banner_wrap {float:left; position: relative;width: 1200px; height:34px; padding-left:168px;} .banner_wrap .bx-prev {border: 1px solid #e7e7e7;display:block;width:31px;height:24px;position:absolute;top:0;left:0;background:url("/nationalmschool/images/banner06.gif") no-repeat 0 0;text-indent:-99999px} .banner_wrap .bx-next {border: 1px solid #e7e7e7;display:block;width:31px;height:24px;position:absolute;top:0;left:62px;background:url("/nationalmschool/images/banner08.gif") no-repeat 0 0;text-indent:-99999px} .banner_wrap .bx-controls {position:absolute;top:0;left:0;} .banner_wrap .bx-controls .more {border: 1px solid #e7e7e7;position:absolute;top:0;left:93px;} /* .banner_wrap .bx-controls-auto{} */ .banner_wrap .bx-stop {border: 1px solid #e7e7e7;display:block;width:31px;height:24px;position:absolute;top:0;left:31px;text-indent:-99999px;background:url("/nationalmschool/images/banner07.gif") no-repeat center center;} .banner_wrap .bx-start {display:none;} .banner_wrap .bx-viewport .banner li {margin-bottom:20px;} @media screen and (max-width:1500px){ .footer_banner_wrap {width:97%;} } @media screen and (max-width:500px){ .banner_wrap {padding-left:120px;} .banner_wrap .bx-viewport .banner li {margin-right:30px !important;} }