@charset "utf-8";

/*************Visual*************/
.m_visual{position:relative;min-width:1200px;width:1200px; margin:0 auto; height:500px;}
.m_visual .visual{width:100%;height:700px;}
.m_visual .visual01{background:url(/lll/nanum/site/img/main/mvisual01.jpg) no-repeat top center;}
.m_visual .visual02{background:url(/lll/nanum/site/img/main/mvisual02.jpg) no-repeat top center;}
.m_visual .mvisual_txt {position:absolute; top:60px; left:0; z-index:2;}
.m_visual .mvisual_txt p.stxt {font-size:14px; color:#353535; text-align:center; font-family:'NotoKrM'; width:166px; height:37px; line-height:37px; background:url(/lll/nanum/site/img/main/mvisual_stxt_bg.gif) no-repeat 50% 0px;}
.m_visual .mvisual_txt .btxt {margin-top:40px;}
.m_visual .mvisual_txt .btxt p {margin-bottom:30px;}
/*.m_visual .mvisual_txt .btxt .txt1{position:absolute;top:75px;}
.m_visual .mvisual_txt .btxt .txt2{position:absolute;top:130px;}
.m_visual .mvisual_txt .btxt .eng{position:absolute;top:255px;font-family: 'Rajdhani', sans-serif; font-size:20px; color:#cecece; font-weight:600; width:300px;}*/
.m_visual .mvisual_txt p.eng {font-family: 'Rajdhani', sans-serif; font-size:20px; color:#cecece; font-weight:600;}
.m_visual .mvisual_txt a.start-autoplay,
.m_visual .mvisual_txt a.stop-autoplay{display:block;position:absolute;width:39px;height:43px;top: 332px;left: 0px;cursor:pointer;}
.m_visual .mvisual_txt a.start-autoplay{background:url(/lll/nanum/site/img/main/mvisual_play.png) no-repeat left 50%;}
.m_visual .mvisual_txt a.stop-autoplay{background:url(/lll/nanum/site/img/main/mvisual_stop.png) no-repeat left 50%;}

.mvisual_box {position:absolute; top:40px; right:0px;width:420px; height:380px; z-index:2;}
.mvisual_box .box {position:absolute; width:180px; height:160px; padding:30px 0 0 30px; box-shadow:2px -1px 7px #ddd;}
.mvisual_box .box p.eng {font-family: 'Rajdhani', sans-serif; font-size:14px; font-weight:600;  text-decoration:underline;}
.mvisual_box .box p.tit {font-family:'NotoKrB'; font-size:20px; margin-top:12px;}
.mvisual_box .box p.txt {font-family:'NotoKrM'; font-size:13px; margin-top:5px;}
.mvisual_box .box a {display:inline-block; padding:0 25px; height:30px; line-height:30px; margin-top:20px;}
.mvisual_box .box.blue {top:0; left:0; background:#007beb; color:#fff;}
.mvisual_box .box.blue p.txt {color:#8cc3f6;}
.mvisual_box .box.blue a {color:#007beb; background:#fff;}
.mvisual_box .box.white {top:0; left:210px; background:#fff; color:#9c9c9c; z-index:1;}
.mvisual_box .box.white p.tit {color:#3b3b3b;}
.mvisual_box .box.white a {color:#444; background:#efefef;}
.mvisual_box .box.orange {top:190px; left:210px; background:#ff9d00; color:#fff;}
.mvisual_box .box.orange p.txt {color:#ffd38c;}
.mvisual_box .box.orange a {color:#ff9d00; background:#fff;}

/*************section01*************/
.section01 {width:1200px; margin:0 auto; text-align:center;}
.section01 .section01_wrap {width:100%; display:inline-block; margin-top:35px;}
.section01 p.tit , 
.section02 p.tit {font-size:35px; color:#202020; font-family:'NotoKrB';}
.section01 p.txt ,
.section02 p.txt {font-size:17px; color:#666; font-family:'NotoKrR'; margin-top:5px; letter-spacing:-1px;}

/* 팝업존 */
.popupzone{float:left;position:relative;width:490px;height:515px; background:#ddd;}
.popupzone ul{float:right;padding: 35px 67px 0 0;text-align:right;}
.popupzone ul li{float:left;margin-left: 20px;text-align:right;}
.popupzone ul li:first-child{margin-left:0;}
.popupzone ul li a{display:block;position:absolute;z-index:2;}
.popupzone ul li div{position:absolute;top:0;left:0;z-index:1;}
.popupzone .control{position:absolute;top: 36px;right:36px;z-index:2;}

/*바로가기*/
.section01 .section01_wrap .area {float:left; width:710px; display:inline-block; }
.section01 .section01_wrap .area ul.shortcut {width:100%; display:inline-block;}
.section01 .section01_wrap .area ul.shortcut li {float:left;}
.section01 .section01_wrap .area ul.shortcut li a {display:inline-block;}

/*바로가기 - 버튼타입*/
ul.shortcut li.type_btn a {width:143px; height:155px; color:#fff; text-align:left; font-size:21px; font-family:'NotoKrR'; line-height:27px;padding-left:35px;}
ul.shortcut li.type_btn a span {display:block; padding:30px 0 8px 0; font-size:14px; font-family:'NotoKrB';}
ul.shortcut li.type_btn.color01 a {background:#ffc413 url(/lll/nanum/site/img/main/shortcut_btn_bg.png) no-repeat 150px 20px;}
ul.shortcut li.type_btn.color02 a {background:#27d26c url(/lll/nanum/site/img/main/shortcut_btn_bg.png) no-repeat 150px 20px;}
ul.shortcut li.type_btn.color03 a {background:#fff url(/lll/nanum/site/img/main/shortcut_btn_bg2.png) no-repeat 150px 20px; color:#3a3a3a;}
ul.shortcut li.type_btn.color03 a span {color:#222;}

/*바로가기 - 이미지타입*/
ul.shortcut li.type_img {width:177px; height:155px;}

/*바로가기 - 아이콘타입*/
ul.shortcut li.type_icon a {width:178px; height:55px; padding-top:100px; font-size:16px; font-family:'NotoKrM'; text-align:center; letter-spacing:-1px;}
ul.shortcut li.type_icon.icon01 {width:177px; background:#e5f4ff url(/lll/nanum/site/img/main/shortcut_icon01.gif) no-repeat 50% 38px;}
ul.shortcut li.type_icon.icon01 a {color:#4c4c4c;}
ul.shortcut li.type_icon.icon02 { background:#007beb url(/lll/nanum/site/img/main/shortcut_icon02.gif) no-repeat 50% 38px;}
ul.shortcut li.type_icon.icon02 a {color:#fff;}
ul.shortcut li.type_icon.icon03 {width:177px; background:#4c4c4c url(/lll/nanum/site/img/main/shortcut_icon03.gif) no-repeat 50% 38px;}
ul.shortcut li.type_icon.icon03 a {color:#fff;}

/*바로가기 - 공지사항, 자료실*/
.mboard {position:relative; float:left; height:203px; border:1px solid #ddd; border-left:none; text-align:left; padding: 0 70px 0 30px;}
.mboard.notice {width:350px;}
.mboard.reference {width:158px;}
.mboard p.tit {font-size:20px; color:#111; margin-top:25px; letter-spacing:-1px; font-family:'NotoKrM';margin-bottom:20px;}
.mboard div {position:relative;width:100%;height:110px;overflow:hidden;}
.mboard div ul {position:absolute;left:0;top:0;right:0;}
.mboard ul li {position:relative; width:100%; display:inline-block; margin-bottom:8px;}
.mboard ul li a {display:block; padding-right:35px; font-size:14px; color:#333; letter-spacing:-1px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.mboard ul li span {position:absolute; top:0; right:0; font-family: 'Rajdhani', sans-serif; font-size:13px; color:#bbb; font-weight:700;}
a.mboard_btn {position:absolute; right:-1px; width:44px; height:67px; background:#f8f8f8; border:1px solid #ddd;}
a.mboard_btn.plus {top:-1px; background:#f8f8f8 url(/lll/nanum/site/img/main/mboard_plus.gif) no-repeat 50% 50%;}
a.mboard_btn.before {top:67px;background:#f8f8f8 url(/lll/nanum/site/img/main/mboard_before.png) no-repeat 50% 50%;}
a.mboard_btn.after {top:135px;background:#f8f8f8 url(/lll/nanum/site/img/main/mboard_after.png) no-repeat 50% 50%;}
a.mboard_btn.off {background-color:#ececec;}


/*************section02*************/
.section02 {width:1200px; margin:60px auto 0 auto; text-align:center;}
.section02 ul.mphoto {width:100%;display:inline-block; margin:40px 0 55px 0; }
.section02 ul.mphoto li {position:relative; float:left; width:285px; height:275px; margin-left:20px;}
.section02 ul.mphoto li:first-child {margin-left:0px;}
.section02 ul.mphoto li div.img {width:285px; height:185px; overflow:hidden;}
.section02 ul.mphoto li div.img img { transition-duration: 0.4s;}
.section02 ul.mphoto li div.img:hover img{width: 100%; transition-duration: 0.4s; -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15);}

.section02 ul.mphoto li a {position:absolute; top:155px; display:inline-block; left:50%; margin-left:-125px; transition-duration:0.3s; width:250px; height:95px; padding-top:20px; letter-spacing:-1px; font-size:17px; color:#202020; background:#fff url(/lll/nanum/site/img/main/mphoto_plus.gif) no-repeat 50% 80px; box-shadow:0px 3px 4px 0px #ddd;}
.section02 ul.mphoto li a:hover {top:140px; transition-duration:0.3s;}
.section02 ul.mphoto li a span {display:block; font-size:16px; font-family: 'Rajdhani', sans-serif; font-weight:700; margin-top:5px;letter-spacing:0px;}
.section02 ul.mphoto li a.blue {border-bottom:3px solid #007beb;}
.section02 ul.mphoto li a.blue span {color:#007beb;}
.section02 ul.mphoto li a.mint {border-bottom:3px solid #27d26c;}
.section02 ul.mphoto li a.mint span {color:#27d26c;}



/********************모바일********************/
@media(max-width:736px){

.m_visual{min-width:auto;width:100%;height:auto;}
.m_visual .visual{ background-size:cover; height:250px; background-position:-25px 0px;}
.m_visual .mvisual_txt p.eng {font-size:14px; margin-left:10px;}
.mvisual_box {position:static; width:100%; height:auto; z-index:2; text-align:center; display:inline-block; margin-top:10px;}
.mvisual_box .box {float:left; position:static; width:33%; height:100px; padding:0; box-shadow:none; border-left:1px solid #e7e7e7;}
.mvisual_box .box p.tit {font-size:17px; letter-spacing:-1px; margin-top:0px;}
.mvisual_box .box p.txt {font-size:12px;}
/* .mvisual_box .box a {display:none;} */
.mvisual_box .box p.eng {display:none;}
.mvisual_box .box.blue {border-left:none;}
.mvisual_box .box.blue,
.mvisual_box .box.orange {background:#fff;}
.mvisual_box .box.blue p.tit,
.mvisual_box .box.orange p.tit {color:#3b3b3b;}
.mvisual_box .box.blue p.txt,
.mvisual_box .box.orange p.txt {color:#9c9c9c;}
.mvisual_box .box a {letter-spacing:-1px; color:#222 !important; background:#fff !important;  border:1px solid #ddd; margin-top:10px; padding:0 15px;}

.m_visual .mvisual_txt p.stxt {display:none;}
.m_visual .mvisual_txt .btxt {margin-top:0; margin-left:10px;}
.m_visual .mvisual_txt .btxt p img {width:150px;}

.m_visual .mvisual_txt a.start-autoplay,
.m_visual .mvisual_txt a.stop-autoplay {display:none;}

.section01,
.section02 {width:100%; margin-top:40px;}
.section01 p.tit, .section02 p.tit {font-size:24px;}
.section01 p.txt, .section02 p.txt {font-size:13px; margin:5px auto 0 auto;}
.section01 .section01_wrap {margin-top:20px;}
.popupzone {display:none;}

.section01 .section01_wrap .area {width:100%; float:none;}
.section01 .section01_wrap .area ul.shortcut li {width:33.3%;}
ul.shortcut li a {width:100% !Important; padding-left:0 !Important; text-align:center !Important; font-size:17px !Important; line-height:23px !Important;}
ul.shortcut li.type_btn a {background-image:none !Important; height:125px;}
ul.shortcut li.type_btn a span {padding-top:25px;}
ul.shortcut li.type_icon.icon01 {background-size:41px !important; background-position-y:25px;}
ul.shortcut li.type_icon.icon02 {background-size:35px !important; background-position-y:25px;}
ul.shortcut li.type_icon.icon03 {background-size:40px !important; background-position-y:25px;}
ul.shortcut li.type_icon a {font-size:14px !Important; padding-top:70px; line-height:19px !important;}
ul.shortcut li.type_img {display:none;}


.mboard {height:189px; box-sizing:border-box;}
.mboard.notice,
.mboard.reference{width:100%;}
.mboard p.tit {font-size:19px; margin-top:20px; margin-bottom:0px;}
.mboard ul {margin-top:15px;}
.mboard ul li a {font-size:13px;}
.mboard ul li span {font-size:14px;}
a.mboard_btn {height:62px;}
a.mboard_btn.before {top:62px;}
a.mboard_btn.after {top:125px;}
.mboard.reference {margin-top:-1px;}


.section02 ul.mphoto {margin:20px 0 0 0; height:530px; overflow:hidden;}
.section02 ul.mphoto li:first-child {margin:0 auto;}
.section02 ul.mphoto li {float:none; margin:0 auto; margin-bottom:20px;}
.section02 ul.mphoto li a {background-image:none; height:70px;}



}

/********************웹********************/
@media(min-width:737px){

.mvisual_box .box p.txt br {display:none;}
ul.shortcut li.type_icon a br {display:none;}
.section01 p.txt br,
.section02 p.txt br {display:none;}

}