@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:700');

html,body{height:100%; overflow-x:hidden; }

body{font-family: 'Nanum Gothic', sans-serif; letter-spacing:-0.1px; background:#ececec;  }
body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,table,caption,form,fieldset,legend,input{margin:0; padding:0;}
li{list-style-type:none;}
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6 { font-weight:600;  }
li img, li a, dd img, img, a img{vertical-align:middle;}
legend,caption{font-size:0; width:0; height:0; line-height:0; visibility:hidden; position:absolute;}
a{text-decoration:none; color:#777;}
a:hover, a:focus, a:active{text-decoration:none; color:#777;}


/* 웹 메뉴 */
#navi_web, #navi_web ul, #navi_web ul li #navi_web ul li ul{ margin:0; padding:0; }
#navi_web  { float:right; margin:14px 20px 0 0; z-index:99; }
#navi_web:before, #navi_web:after, #navi_web > ul:before, #navi_web > ul:after { content: ''; display: block; clear: both; }
#navi_web ul { list-style: none; }
#navi_web ul li { float: left; position: relative; vertical-align:middle; }
#navi_web ul li a {  display: block; color:#231815; font-weight:500; font-size:20px; text-decoration:none; line-height:18px; }
#navi_web > ul > li:hover > a { border-bottom:3px solid #555; padding-bottom:8px;  }
#navi_web ul .line { padding:0 5px;  }

/* 부메뉴 */
#navi_web > ul ul { opacity: 0; visibility: hidden; position: absolute; width:165px; border:1px solid #ccc; z-index:999; background:#fff; }
#navi_web > ul li:hover ul { opacity: 1; visibility: visible; top:34px; right:-30px; }
#navi_web > ul ul li { float:left; width:50px; margin:2px; list-style: none; }
#navi_web > ul ul li a {display:block; color:#fff; font-size: 13px; text-decoration: none; width:50px; 
-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
#navi_web > ul ul li a:hover {  }
#navi_web > ul ul li a:hover img {    }


/* 모바일 메뉴 */
#navi_mob, #navi_mob ul, #navi_mob ul li #navi_mob ul li ul{ margin:0; padding:0; }
#navi_mob  { float:right; margin-top:5px; z-index:99; }
#navi_mob:before, #navi_web:after, #navi_mob > ul:before, #navi_mob > ul:after { content: ''; display: block; clear: both; }
#navi_mob ul { list-style: none; }
#navi_mob ul li { float: left; position: relative; vertical-align:middle; margin-right:10px; }
#navi_mob ul li img { width:80px; }
#navi_mob ul li a {  display: block; color:#231815; font-weight:500; font-size:16px; text-decoration:none; line-height:18px; }
#navi_mob > ul > li:hover > a {    }
#navi_mob ul .line { padding:0 5px;  }

/* 부메뉴 */
#navi_mob > ul ul { opacity: 0; visibility: hidden; position: absolute; width:108px; margin-right:32px; border:1px solid #ccc; z-index:999; background:#fff; }
#navi_mob > ul li:hover ul { opacity: 1; visibility: visible; top:34px; right:-60px; }
#navi_mob > ul ul li { float:left; width:50px; margin:2px; list-style: none; }
#navi_mob > ul ul li img { width:100%; }
#navi_mob > ul ul li a {display:block; color:#fff; font-size: 13px; text-decoration: none; width:50px; 
-webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
#navi_mob > ul ul li a:hover {   }
#navi_mob > ul ul li a:hover img {   }

/* 스마트폰대상  레이아웃 지정：100px～769px */
@media only screen and (min-width: 100px) {

#top_web {  display:none; }
#top_mob {  display:block; }

.body_wrap { width:100%; margin:0 auto;  }
.header_mob { width:90%; padding:10px 0; margin:0 auto; }
.header_mob .left { float:left; width:30%; margin:5px 0 0 0; }
.header_mob .right { float:right; width:70%; }
.header_mob .right .right_pdf { float:right; margin:0 15px 0 0px; }
.header_mob .right .right_pdf img { width:30px; }
.header_mob .right .right_btn {  float:right; }
.header_mob .right .right_btn img { width:26px; }


/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999;  overflow:hidden; -webkit-overflow-scrolling:touch; }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:100%; height:100%; padding-bottom:0; z-index:9999; background:#333;}
.gnb .inner_width { width:90%; margin:0 auto; }
.gnb .inner_width .top {  }

.gnb .top .gnb_logo { float:left; width:80%; }
.gnb .top .gnb_logo ul li { float:left; font-size:24px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li:last-child { margin-top:30px; width:100%; padding-bottom:20px; }
.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:20px 0 40px 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:20px; color:#fff; border-bottom:1px solid #777; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .title span { font-size:14px; color:#97c72f; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#1eb6dd; }
.gnb .gnb_con .con {  float:left; width:calc(100%/ 2 - 10px); margin:10px 5px 0 5px;  }
.gnb .gnb_con .con .img { float:left; width:100%; padding:2px 0 0 0; transition:all ease .3s; }
.gnb .gnb_con .con .img a img { width:100%; border-radius:10px; }
.gnb .gnb_con .con .img:active { transform:scale(.95, .95); }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#ddd; }
.gnb .gnb_con .con a:hover { color:#fff; }

/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:15px;  }
.contents_width { width:90%; margin:0 auto;  }
.contents_banner .left { float:left; width:100%; height:100%; overflow:hidden; margin:10px 0 0px 0; }
.contents_banner .right { float:right; width:100%; height:100%; margin:10px 0 0px 0; }
.contents_banner .right .right_img1 { float:left; width:50%; height:100%;   }
.contents_banner .right .right_img2 { float:left; width:50%; height:100%; }

/*상단콘텐츠_박스*/
.contents_banner .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; height:100%; overflow:hidden; }
.contents_banner .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_banner .box a img { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; width:100%; height:100%; }
.contents_banner .box a:active {cursor:pointer}
.contents_banner .box a:active img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.contents_banner .box a:active .box_bg{opacity:0.5;  }
/*/*.contents_banner .box_bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; background:url(../images/main/box_bg.png) center top no-repeat !important; }*/
.contents_banner .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}
.img_v1 { padding:25% 51% 15% 31%;  }
.img_v2 { padding:13% 32%; }

/* 6종콘텐츠 */
.contents_banner { float:left; width:100%; height:100%; padding:0 0 30px 0; }
.contents_banner ul li {float:left; width:50%; display:block; margin:2.5% 0 2.5% 0;}
.contents_banner ul li.last {margin-right:0;}
.contents_banner ul li > a {display:block; width:100%; color:#000; }
.contents_banner ul li > a div {transition: box-shadow 0.3s ease-in-out; border:5px solid #fff; border-width:3px 1px 1px 1px; }
.contents_banner ul li > a:active div {box-shadow: 5px 5px 7px rgba(86, 86, 86, 0.2); border:5px solid #97c72f; border-width:3px 1px 1px 1px; }
.contents_banner ul li > a img { width:100%;  }
/* .contents_banner ul li > a:hover div {box-shadow: 5px 5px 7px rgba(86, 86, 86, 0.2); border:5px solid #97c72f; border-width:7px 1px 1px 1px; } */
.contents_txt { width:90%; height:50px; padding:10px 0 60px 0; margin:-44px auto 0 auto; position:relative; background:#fff url('https://sample.designpk.kr/shingu_admission2023/page/images/main/btn_plus.png') center 90px no-repeat;
font-size:18px; line-height:1.25em; text-align:center; font-weight:400; background-size:16px 16px; word-break:keep-all;}
.contents_txt span { font-size:12px; color:#013f94; width:100%; display:block; }
.contents_txt .txt_spot {font-size:10px; color:#000;    }
/*카피라이터*/
.main_copy_wrap { float:left; width:100%; padding:20px 0 70px 0; }
.main_copy { width:90%; margin:0 auto;  }
.main_copy_le { float:left; width:100%; font-size:12px; color:#555; padding:5px 0 0 0; text-align:center; word-break:keep-all; }
.main_copy_ri { float:right; width:100%; text-align:center; margin:15px 0 0 0; }
.main_copy_ri img { width:170px; }



}







/* 태블릿 대상 레이아웃 지정：800px ~ 1280px */
@media only screen and (min-width: 800px) {

#top_web {  display:block; }
#top_mob {  display:none; }

.body_wrap { width:100%; margin:0 auto;  }
.header_web { width:90%; padding:15px 0; margin:0 auto; }
.header_web .left { float:left; width:20%; margin-top:10px; }
.header_web .right { float:right; width:70%; padding-top:15px;  }
.header_web .right .right_pdf { float:right; margin:5px 15px 0 15px;   }
.header_web .right .right_pdf img { width:30px;  }
.header_web .right .right_btn {  float:right; }
.header_web .right .right_btn img { width:30px; }



/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:500px; height:100%; padding-bottom:0; z-index:9999; background:#333;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px;}

.gnb .top .gnb_logo { float:left; width:200px;   }
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:20px 0 0 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:20px; color:#fff; border-bottom:1px solid #777; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#1eb6dd; }
.gnb .gnb_con .con {  float:left; width:calc(100%/ 2 - 10px); margin:10px 5px 0 5px;  }
.gnb .gnb_con .con .img { float:left; width:100%; padding:2px 0 0 0; transition:all ease .3s; }
.gnb .gnb_con .con .img a img { width:100%; border-radius:10px; }
.gnb .gnb_con .con .img:active { transform:scale(.95, .95); }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#ddd; }
.gnb .gnb_con .con a:hover { color:#fff; }

/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:35px;  }
.contents_width { width:90%; margin:0 auto;  }
.contents_banner .left { float:left; width:65.4%; height:38vw; overflow:hidden; margin:30px 3.4% 0px 0; }
.contents_banner .right { float:right; width:40.3%; height:100%; margin:30px 0 0px 0; }
.contents_banner .right .right_img1 { float:left; width:100%; height:100%;   }
.contents_banner .right .right_img2 { float:left; width:100%; height:100%; margin:6.5% 0 0 0;  }

/*상단콘텐츠_박스*/
.contents_banner .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; height:100%; overflow:hidden; }
.contents_banner .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_banner .box a img { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; width:100%; height:100%; }
.contents_banner .box a:hover {cursor:pointer}
.contents_banner .box a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.contents_banner .box a:hover .box_bg{opacity:0.5;  }
/*/*.contents_banner .box_bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; background:url(../images/main/box_bg.png) center top no-repeat !important; }*/
.contents_banner .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}
.img_v1 { padding:25% 10% 30% 41%;  }
.img_v2 {  padding:65% 34%; }

/* 6종콘텐츠 */
.contents_banner { float:left; width:100%; height:100%; padding:0 0 30px 0; }
.contents_banner ul li {float:left; width:31%; display:block; margin:2.5% 3.4% 2.5% 0;}
.contents_banner ul li:last-child { }
.contents_banner ul li.last {margin-right:0;}
.contents_banner ul li > a {display:block; width:100%; color:#000; }
.contents_banner ul li > a div {transition: box-shadow 0.3s ease-in-out; border:5px solid #fff; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a:hover div {box-shadow: 5px 5px 7px rgba(86, 86, 86, 0.2); border:5px solid #97c72f; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a img { width:100%;  }

.contents_txt {width:90%;height:100px;padding:20px 0 35px 0;margin:-84px auto 0 auto;position: relative;background: #fff url('https://sample.designpk.kr/shingu_admission2023/page/images/main/btn_plus.png') center 110px no-repeat;
font-size:2vw; line-height:1.25em;text-align: center;font-weight: 400;background-size:27px 27px; letter-spacing:-12.px;  word-break:keep-all;}
.contents_txt span { font-size:1.8vw; color:#013f94; }
.contents_txt .txt_spot {font-size:12px; color:#000; }

/*카피라이터*/
.main_copy_wrap { float:left; width:100%; padding:20px 0 70px 0; }
.main_copy { width:90%; margin:0 auto;  }
.main_copy_le { float:left; width:500px; font-size:14px; color:#555; padding:5px 0 0 0; text-align:left;  }
.main_copy_ri { float:right; width:180px; margin:0px 0 0 0; }
.main_copy_ri img { width:100%; }


}






/* PC대상 */

@media only screen and (min-width: 1280px) {

#top_web {  display:block; }
#top_mob {  display:none; }

.body_wrap { width:1280px; margin:0 auto;  }
.header_web { width:100%; padding:20px 0;  }
.header_web .left { float:left; }
.header_web .left img { width:181px; }
.header_web .right { float:right; width:850px; padding-top:15px;  }
.header_web .right .right_pdf { float:right; margin:0 15px;  }
.header_web .right .right_pdf img { width:30px; margin-top:5px; }
.header_web .right .right_btn {  float:right; }
.header_web .right .right_btn img { width:30px; }



/*모바일 메뉴 */
.gnb{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background-color: rgba( 0, 0, 0, 0.6 ); }
.gnb .inner{position:fixed; overflow-y:scroll; right:-50%; width:500px; height:100%; padding-bottom:0px; z-index:9999; background:#333;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px; float:left; }
.gnb .inner_width .top { float:left; width:100%; }

.gnb .top .gnb_logo { float:left; width:80%; margin-top:20px; }
.gnb .top .gnb_logo ul li { float:left; font-size:26px; line-height:30px; color:#fff; margin-top:30px; }
.gnb .top .gnb_logo ul li:last-child { margin-top:10px; }

.gnb .top .home { float:right; width:50px; margin:30px 0 0 0; }
.gnb .gnb_con { float:left; width:100%; margin:30px 0 0 0;  }
.gnb .gnb_con .title { float:left; width:100%; font-size:20px; color:#fff; border-bottom:1px solid #777; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .title span { font-size:14px; color:#97c72f; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#1eb6dd; }
.gnb .gnb_con .con {  float:left; width:calc(100%/ 3 - 10px); margin:10px 5px 0 5px;  }
.gnb .gnb_con .con .img { float:left; width:100%; padding:2px 0 0 0; transition:all ease .3s; }
.gnb .gnb_con .con .img:hover { transform:scale(.95,.95); }
.gnb .gnb_con .con .img a { display:block; border-radius:15px; }
.gnb .gnb_con .con .img a img { width:100%; border-radius:10px; }
.gnb .gnb_con .con .txt { float:left; font-size:14px; color:#ececec; padding:0 0 0 20px; line-height:20px;  }
.gnb .gnb_con .con .txt span { color:#999; }
.gnb .gnb_con .con a { color:#ddd; }
.gnb .gnb_con .con a:hover { color:#fff; }

/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:35px;  }
.contents_width { width:1220px; margin:0 auto;  }
.contents_banner .left { float:left; width:800px; height:507px; overflow:hidden; margin:30px 30px 0 0; }
.contents_banner .right { float:right; width:385px; height:385px; margin:30px 30px 0px 0; }
.contents_banner .right .right_img1 { width:100%; height:507px; }
.contents_banner .right .right_img2 { width:100%; height:300px; margin:30px 0 0 0; }

/*상단콘텐츠_박스*/
.contents_banner .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; overflow:hidden; }
.contents_banner .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_banner .box a img { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; width:100%; height:100%; }
.contents_banner .box a:hover {cursor:pointer}
.contents_banner .box a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
.contents_banner .box a:hover .box_bg{opacity:0.5;  }
/*/*.contents_banner .box_bg {width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; background:url(../images/main/box_bg.png) center top no-repeat !important; }*/
.contents_banner .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}
.img_v1 { bottom:20%; }

/* 6종콘텐츠 */
.contents_banner { float:left; width:100%; height:100%; padding:0 0 30px 0; }
.contents_banner ul li {float:left; width:385px; display:block; margin:30px 30px 10px 0px; }
.contents_banner ul li:last-child { }
.contents_banner ul li.last {margin-right:0;}
.contents_banner ul li > a {display:block; width:100%; color:#000; }
.contents_banner ul li > a div {transition: box-shadow 0.3s ease-in-out; border:5px solid #fff; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a:hover div {box-shadow: 5px 5px 7px rgba(86, 86, 86, 0.2); border:5px solid #97c72f; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a img { width:100%; }

.contents_txt {width:90%; height:135px; padding:10px 0 30px 0; margin:-84px auto 0 auto; position:relative; background:#fff url('https://sample.designpk.kr/shingu_admission2023/page/images/main/btn_plus.png') center 120px no-repeat; 
font-size:26px; line-height:1.25em; text-align:center; font-weight:400; background-size:27px 27px;}
.contents_txt span { font-size:16px; color:#013f94; display:block; }
.contents_txt .txt_spot {font-size:14px; color:#000; }

/*카피라이터*/
.main_copy_wrap { float:left; width:100%; padding:20px 0 70px 0; }
.main_copy { width:100%; }
.main_copy_le { float:left; width:600px; font-size:14px; color:#555; padding:5px 0 0 0; text-align:left; line-height:20px; }
.main_copy_le span { font-weight:bold; }
.main_copy_ri { float:right; width:230px; margin:0px 0 0 0; }
.main_copy_ri img { width:100%; }

}