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

html,body{height:100%;}

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:#fff;}
a:hover, a:focus, a:active{text-decoration:none; color:#fff;}


/* 웹 메뉴 */
#navi_web, #navi_web ul, #navi_web ul li #navi_web ul li ul{ margin:0; padding:0; }
#navi_web  { float:right; margin-top:13px; 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:16px; 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:1px; 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; }
#navi_mob ul li img { width:35px; }
#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:118px; 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:35px; margin:2px; list-style: none; }
#navi_mob > ul ul li img { width:35px; }
#navi_mob > ul ul li a {display:block; color:#fff; font-size: 13px; text-decoration: none; width:35px; 
-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 {   }
/*#navi_mob > ul ul li a:hover { background:#4b92c8;  }
#navi_mob > ul ul li a:hover img { opacity:0.3;   }*/

/* 스마트폰대상  레이아웃 지정：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 .left img {}
.header_mob .right { float:right; width:70%; }
.header_mob .right .right_pdf { float:right; margin:0 5px 0 0px;  }
.header_mob .right .right_pdf img { width:36px;   }
.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: #375ca2;}
.gnb .inner_width { width:90%; margin:0 auto;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.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:16px; color:#fff; border-bottom:1px solid #fff; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#375ca2; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.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; border-radius: 15px; }
.contents_width { width:90%; margin:0 auto;  }





/* 하단 콘텐츠 */
.contents_bottom .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; height:100%; overflow:hidden; border-radius: 15px; }
.contents_bottom .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_bottom .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_bottom .box a:hover {cursor:pointer}
.contents_bottom .box a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.contents_bottom .box a:hover .box_bg{opacity:0.5;  }
.contents_bottom .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}

.contents_bottom .right { float:left; width:100%; height:100%; margin:0px 0 30px 0; }
.contents_bottom .right .right_img1 { float:left; width:49%; height:100%; margin: 0 0px 0 0 }
.contents_bottom .right .right_img2 { float:right; width:49%; height:100%; }

/* 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-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:3px 1px 1px 1px; }
.contents_banner ul li > a:hover div {box-shadow: 5px 5px 7px rgba(86, 86, 86, 0.2); border:5px solid #375ca2; border-width:3px 1px 1px 1px;  }
.contents_banner ul li > a img { width:100%; border-radius: 15px; }

.contents_txt {width:90%;height:50px;padding:10px 0 40px 0;margin:-44px auto 0 auto;position: relative;background: #fff url('https://sample.designpk.kr/DXE_brief/05/images/main/btn_plus.png') center 80px no-repeat; font-size:12px; line-height:1.25em;text-align: center;font-weight: 400;background-size:16px 16px; word-break:keep-all; border-radius: 10px; }
.contents_txt span { font-size:12px; color:#375ca2;  }
.contents_txt .txt_spot {font-size:10px; color:#000;    }





}







/* 태블릿 대상 레이아웃 지정：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%; }
.header_web .left img {}
.header_web .right { float:right; width:70%; padding-top:15px;  }
.header_web .right .right_pdf { float:right; margin:0 15px 0 15px;   }
.header_web .right .right_pdf img { width:45px;  }
.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: #375ca2;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.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:16px; color:#fff; border-bottom:1px solid #fff; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#375ca2; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.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; border-radius: 15px; }
.contents_width { width:90%; margin:0 auto;  }




/* 하단 콘텐츠 */
.contents_bottom .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; height:100%; overflow:hidden; border-radius: 15px; }
.contents_bottom .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_bottom .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_bottom .box a:hover {cursor:pointer}
.contents_bottom .box a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.contents_bottom .box a:hover .box_bg{opacity:0.5;  }
.contents_bottom .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}

.contents_bottom .right { display:flex; width:100%; height:100%; margin:0px 0 30px 0; }
.contents_bottom .right .right_img1 { width:100%; height:100%; margin: 0 30px 0 0 }
.contents_bottom .right .right_img2 { width:100%; height:100%; }

/* 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 #375ca2; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a img { width:100%; border-radius: 15px;  }

.contents_txt {width:90%;height:100px;padding:25px 0 40px 0;margin:-84px auto 0 auto;position: relative;background: #fff url('https://sample.designpk.kr/DXE_brief/05/images/main/btn_plus.png') center 110px no-repeat; font-size:14px; line-height:1.25em;text-align: center;font-weight: 400;background-size:27px 27px; letter-spacing:-12.px;  word-break:keep-all; border-radius: 10px;}
.contents_txt span { font-size:13px; color:#375ca2;  }
.contents_txt .txt_spot {font-size:12px; color:#000; }



}






/* 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 {}
.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:45px;  }
.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:0px; z-index:9999; background: #375ca2;}
.gnb .inner_width { width:380px; margin:5px 0 0 60px;}

.gnb .top .gnb_logo { float:left; width:300px;   }
.gnb .top .gnb_logo ul li { float:left; font-size:14px; color:#fff; margin-top:25px; }
.gnb .top .gnb_logo ul li a { color:#fff;  }
.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:16px; color:#fff; border-bottom:1px solid #fff; padding:0 0 5px 0; margin:0 0 5px 0; }
.gnb .gnb_con .sub_title { float:left; width:100%; font-size:14px; color:#375ca2; }
.gnb .gnb_con .con {  float:left; width:100%; margin:5px 0 0 0;  }
.gnb .gnb_con .con .img { float:left; width:70px; padding:2px 0 0 0;  }
.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; }

.gnb .gnb_con:last-child{padding: 0 0 70px 0 ;}
/*상단콘텐츠*/
.contents_wrap { float:left; width:100%; height:100%; background:#fff; z-index:1; margin-top:35px; border-radius: 15px;  }
.contents_width { width:1220px; margin:0 auto;  }




/* 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 #375ca2; border-width:7px 1px 1px 1px; }
.contents_banner ul li > a img { width:100%; border-radius: 15px; }

.contents_txt {width:90%;height:135px;padding:25px 0 40px 0;margin:-84px auto 0 auto;position: relative;background: #fff url('https://sample.designpk.kr/DXE_brief/05/images/main/btn_plus.png') center 130px no-repeat; font-size:20px; line-height:1.25em;text-align: center;font-weight: 400;background-size:27px 27px; border-radius: 10px; }
.contents_txt span { font-size:16px; color:#375ca2; line-height: 16px; }
.contents_txt .txt_spot {font-size:14px; color:#000; }

/* 하단 콘텐츠 */
.contents_bottom .box {position:relative; margin:0px 0 0px 0; float:left; width:100%; height:100%; overflow:hidden; border-radius: 15px; }
.contents_bottom .box a  { color:#fff; width: 100%;height: 100%;display: block;}
.contents_bottom .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_bottom .box a:hover {cursor:pointer}
.contents_bottom .box a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.contents_bottom .box a:hover .box_bg{opacity:0.5;  }
.contents_bottom .box_bg {width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0; filter: alpha(opacity=0);}

.contents_bottom .right { display:flex; width:100%; height:332px; margin:0px 0 0px 0; }
.contents_bottom .right .right_img1 { width:594px; height:300px; margin: 0 30px 0 0 }
.contents_bottom .right .right_img2 { width:594px; height:300px; }

}