@charset "utf-8"; /****************************************/ /* Name: 한국철강협회 /* Version: 1.0 / day: 2020-05-11 /* Author: /* Summary 1)메인 레이아웃 2)반응형 레이아웃 3)메인 콘텐츠 4)반응형 메인 콘텐츠 */ /****************************************/ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap'); @import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700&display=swap'); /* Common */ body{text-align: left;font-size:15px;line-height:1.2;font-family: 'Noto Sans KR', sans-serif;color:#222;letter-spacing:-0.5px;font-weight:400;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,span,form,fieldset,p,button,address,table, tbody, tfoot, thead, th, tr, tdvideo, tt{margin:0;padding:0;box-sizing: border-box;word-break:keep-all} header,article,aside,canvas,details,figcaption,figure,footer,hgroup,menu,nav,section,summary,mark {display:block;margin: 0; padding: 0;box-sizing: border-box;} h1,h2,h3,h4,h5,h6,input,button,textarea,select,table{font-family:'Noto Sans KR',sans-serif;font-size:15px;box-sizing: border-box;} input,button,textarea,select{background-color:#fff;border-radius:0;box-sizing: border-box;} /*-webkit-appearance: none*/ button,textarea{-webkit-appearance: none} img,fieldset,iframe{border:0 none} li{list-style:none} img,input,select,button,textarea{vertical-align:middle;box-sizing: border-box;} img{max-width:100%} em,address,optgroup{font-style:normal} label,button{cursor:pointer} label{position: relative;vertical-align:middle} button{margin:0;padding:0;border:0;background:none} a{box-sizing: border-box} a:link,a:visited{text-decoration:none;color:#252525;} a:hover,a:focus,a:active{text-decoration:underline;color:#252525} hr{display:none} legend,caption{font-size:0; width:0; height:0; line-height:0;overflow:hidden;text-indent:-9999px} .blind{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)} p{word-break:keep-all} table {width:100%;border-spacing:0;border-collapse:collapse;} /* hidden contents */ .skip,.hidden{position:absolute; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; z-index:-1} .skip:focus{top:0;left:0;display:inline-block;width:auto;height:auto;padding:0 30px;font-size:14px;line-height:40px;color:#fff;background:#007cc3;z-index:10} #skip_navi {position:absolute;top:0;height:0px;width:100%;z-index:500;} #skip_navi a {display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center;color:#fff;white-space:nowrap;} #skip_navi a:focus, #skip_navi a:active {display:block;top:0;width:100%;height:45px;padding:10px 0;background:#007cc3;} #loading {position:fixed;top:0;left:0;display: block;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:50;} #loading .load{position:fixed;top:50%;left:50%;display: block;margin:-25px 0 0 -25px;width: 50px; height: 50px;border: 5px solid rgba(255,255,255,0.2);border-radius: 50%;border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } /* ================================================================================ 메인레이아웃 ================================================================================ */ #mpop{position:absolute;top:0;left:0;padding:0;width:100%;overflow:hidden;height:0;background:#1f1f1f;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:100} #mpop .box{position:relative;margin:0 auto;} #mpop .box .today{position:absolute;top:80%;right:40px;font-size:13px;color:#ffffff;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #mpop .box .btnpClose{position:absolute;top:80%;right:0;width:40px;height:40px;overflow:hidden;text-indent:-999px;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #mpop .box .btnpClose span{position:relative;display:block;margin:0 auto;width:30px;height:2px;background:transparent} #mpop .box .btnpClose span::before{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#ffffff;} #mpop .box .btnpClose span::after{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#ffffff;} .fp-viewing-0 #wrapper #header{top:80px} .fp-viewing-0 #mpop{height:80px} .fp-viewing-0 #mpop.on{height:0} .fp-viewing-0 #mpop.on ~ #wrapper #header{top:0} .fp-viewing-0 #mpop ~ #wrapper #totalMb{top:210px} .fp-viewing-0 #mpop.on ~ #wrapper #totalMb{top:80px} #wrapper{position:relative;min-width:320px;width:100%;height:100%;right:0;} /* ---- 상단영역 ---- */ #header{position:fixed;top:0;left:0;width:100%;min-width:320px;background:#fff;box-shadow:2px 2px 6px rgba(0,0,0,0.1);z-index:350} #header::after{position:absolute;top:80px;left:0;width:100%;height:0;content:'';border-top:1px solid #e8e8e8;z-index:2} #header .head_box{position:relative;margin:0 auto;padding:0 20px;max-width:1920px;min-height:80px;z-index:50} #header .head_box .logo{position:absolute;top:20px;left:20px;width:175px;z-index:200} #header .head_box .logo a{display:block;} #header .head_box .btninsta{position:absolute;top:0;right:270px;z-index:200} #header .head_box .btninsta a{display:block;line-height:80px;} #header .head_box .btnLang{position:absolute;top:0;right:180px;z-index:200} #header .head_box .btnLang a{display:block;padding-left:25px;font-size:18px;line-height:80px;font-weight:500;background:url('../img/ic_lang.png') no-repeat left center;} #header .head_box .btnLang a:hover{/*color:#f55708;*/color:#f17f11;text-decoration:none;background:url('../img/ic_lang_on.png') no-repeat left center;} #header .head_box .btnSearch{position:absolute;top:0;right:77px;width:80px;height:80px;overflow:hidden;text-indent:-999px;background:url('../img/ic_search.png') no-repeat center center;background-size:28px;border:1px solid #e1e1e1;border-width:0 1px;z-index:200} #header .head_box .btnSearch.on{background:#fff} #header .head_box .btnSearch.on span{position:relative;display:block;margin:0 auto;width:30px;height:2px;background:transparent} #header .head_box .btnSearch.on span::before{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#252525;} #header .head_box .btnSearch.on span::after{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#252525;} #header .head_box .searchForm{display:none;position:absolute;top:80px;right:77px;width:490px;box-shadow:2px 2px 5px rgba(0,0,0,0.2);z-index:200} #header .head_box .searchForm .box{padding-right:80px;} #header .head_box .searchForm .searTxt{margin:0;padding:10px 20px;width:100%;height:80px;font-size:18px;background:#f7f7f7;border:0} #header .head_box .searchForm .searTxt:-ms-input-placeholder{color: #222;} #header .head_box .searchForm .searTxt::-webkit-input-placeholder{color: #222;} #header .head_box .searchForm .searTxt::-moz-placeholder{color: #222;} #header .head_box .searchForm .searTxt::-moz-placeholder{color: #222;} #header .head_box .searchForm .btn{position:absolute;top:0;right:0;width:80px;height:80px;overflow:hidden;text-indent:-999px;background:#f17f11 url('../img/ic_search2.png') no-repeat center center;background-size:28px;border:0} #header .head_box .btnTotalMenu{position:absolute;top:0;right:0;width:77px;height:80px;overflow:hidden;text-indent:-999px;background:#fff;z-index:200} #header .head_box .btnTotalMenu span{position:relative;display:block;margin:0 auto;width:30px;height:3px;background:#252525;transition:all 0.2s ease} #header .head_box .btnTotalMenu span::before{position:absolute;top:-9px;left:0;width:100%;height:3px;content:'';background:#252525;transition:all 0.2s ease} #header .head_box .btnTotalMenu span::after{position:absolute;top:9px;left:0;width:100%;height:3px;content:'';background:#252525;transition:all 0.2s ease} #header .head_box .btnTotalMenu.on{background:rgba(32,34,41,0.98)} #header .head_box .btnTotalMenu.on span{position:relative;display:block;margin:0 auto;width:30px;height:3px;background:transparent} #header .head_box .btnTotalMenu.on span::before{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#fff} #header .head_box .btnTotalMenu.on span::after{position:absolute;top:0;left:0;width:100%;height:1px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#fff;} #header .head_box .search_bg{display:none;} #header .head_box .btnMenu{display:none;} #gnbArea{position:relative;min-height:80px;text-align:center;z-index:100} #gnb{position:relative;display:inline-block;text-align:left;overflow:hidden;vertical-align:top;} #gnb .gnb_menu{width:100%;} #gnb .gnb_menu:after{display:block;clear:both;content:''} #gnb .gnb_menu > li{position:relative;float:left;} #gnb .gnb_menu > li:first-child{background:none} #gnb .gnb_menu > li > a{position:relative;display:block;padding:0 60px;line-height:80px;font-size:21px;color:#222;text-decoration:none;font-weight:500} #gnb .gnb_menu > li > a span{position:relative;display:inline-block;} #gnb .gnb_menu > li > a span::after{position:absolute;left:50%;bottom:0;width:0;height:3px;content:'';transition: all 0.2s ease;-webkit-transition: all 0.2s ease;} #gnb .gnb_menu .gnbsingle{position:absolute;left:0;top:80px;padding:35px 30px;width:100%;height:360px;border-top:1px solid #e8e8e8;border-right:1px solid #e8e8e8;z-index:20} #gnb .gnb_menu > li:first-child .gnbsingle{border-left:1px solid #e8e8e8;} #gnb .gnb_menu .gnbsingle > ul:after{display:block;clear:both;content:''} #gnb .gnb_menu .gnbsingle > ul > li{position:relative;} #gnb .gnb_menu .gnbsingle > ul > li > a{display:inline-block;padding:5px 0;font-size:18px;color:#636363;line-height:1.1;} #gnb .gnb_menu .gnbsingle > ul > li > a:hover, #gnb .gnb_menu .gnbsingle > ul > li > a:focus{color:#222} #gnb .gnb_menu .gnbsingle > ul > li > a.blank{padding-right:20px;background:url('../img/ic_blank3.png') no-repeat right center;background-size:15px} #gnb .gnb_menu > li.hv > a span::after{left:0;width:100%;background:#f17f11;} #gnb .gnb_menu > li.hv > a{color:#f17f11 !important} #gnb .gnb_menu > li.hv .gnbsingle{background:#fbfbfb} .gnb_Bg{position:absolute;display:none;top:79px;left:0;width:100%;background:#fff url('../img/gnb_bg_line.png') repeat-y center top ;z-index:10;} .gnb_Bg.on{border-top:1px solid #e8e8e8;box-shadow:2px 2px 6px rgba(0,0,0,0.1);} /* ---- 중간영역 ---- */ #container{position:relative;height:100%} #container #content{position:relative;margin:0 auto;min-height:900px;} #container #content::after{display:block;clear:both;content:''} #subContainer{position:relative;height:100%} #subContainer #content{position:relative;margin:0 auto;padding:85px 20px;max-width:1390px;min-height:900px} .subSkin{padding-top:275px;height:560px;text-align:center;background-position:center center;background-size:cover} .subSkin h2{margin-bottom:15px;font-size:46px;color:#fff;line-height:1} .subSkin p{font-size:16px;color:#fff;} .subSkin.bg1{background-image:url('../img/sub_visual03.jpg')} .subSkin.bg2{background-image:url('../img/sub_visual03.jpg')} .subSkin.bg3{background-image:url('../img/sub_visual03.jpg')} .subSkin.bg4{background-image:url('../img/sub_visual03.jpg')} #lnb{position:relative;height:60px;z-index:10} #lnb .lnbWrap{position:absolute;top:0;left:0;width:100%;height:60px} #lnb .lnbCon{position:relative;margin:0 auto;max-width:1350px;background:#ebedf1;border-bottom:1px solid #d9dadd;transition:all 0.3s ease;-webkit-transition: all 0.3s ease;} #lnb .lnbBox{position:relative;margin:0 auto;max-width:1350px;} #lnb .lnbBox > ul{position:relative;padding-left:59px;} #lnb .lnbBox > ul::after{display:block;clear:both;content:''} #lnb .lnbBox > ul > li{position:relative;float:left;border-right:1px solid #d9dadd;transition:all 0.3s ease;-webkit-transition: all 0.3s ease;} #lnb .lnbBox > ul > li.home{position:absolute;top:0;left:0;width:59px;height:59px} #lnb .lnbBox > ul > li.home a{display:block;height:100%;text-indent:-999px;overflow:hidden;background:url('../img/ic_home.png') no-repeat center center;} #lnb .lnbBox > ul > li button{position:relative;padding-right:40px;min-width:200px;height:59px;font-size:16px;text-indent:20px;text-align:left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background:#ebedf1;border:0;transition:all 0.3s ease;-webkit-transition: all 0.3s ease;} #lnb .lnbBox > ul > li button::after{position: absolute; top: 50%; right: 20px;content: "";margin-top:-3px;width:5px;height:5px;border:1px solid #3b3b3c;border-width:0 0 1px 1px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease} #lnb .lnbBox > ul > li button.on::after{transform:rotate(135deg);-webkit-transform:rotate(135deg)} #lnb .lnbBox > ul > li:last-child button::after{border-color:#f45708} #lnb .lnbBox > ul > li > ul{display:none;position:absolute;top:59px;left:0;min-width:100%;background:#fff;border-bottom:1px solid #d9dadd;} #lnb .lnbBox > ul > li > ul li{font-size:16px;white-space: nowrap;} #lnb .lnbBox > ul > li > ul li a{position:relative;display:block;padding:15px 20px;color:#272d38;line-height:20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border:1px solid #d9dadd;border-width:1px 1px 0;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} #lnb .lnbBox > ul > li > ul li a:hover, #lnb .lnbBox > ul > li > ul li.on a{background:#dedfe3} #lnb .lnbBox > ul > li > ul li a:hover::after, #lnb .lnbBox > ul > li > ul li.on a::after{position:absolute;top:50%;right:20px;margin-top:-2px;width:4px;height:4px;content:'';border:1px solid #444;border-width:1px 1px 0 0;transform:rotate(45deg);-webkit-transform:rotate(45deg);} #lnb .lnbBox > ul > li:last-child button{color:#f45708;background:#fff;border-bottom:2px solid #f45708} #lnb .lnbBox > ul > li.last-child button::after{border-color:#f78247} #lnb .btnPrint{position:absolute;top:0;right:0;} #lnb .btnPrint a{display:block;width:60px;height:60px;text-indent:-999px;overflow:hidden;background:url('../img/ic_print.png') no-repeat center center} #lnb .btnPrint a::before{position:absolute;top:50%;left:0;margin-top:-6px;width:0;height:12px;content:'';border-left:1px solid #383838} #lnb .btnKato{position:absolute;top:0;right:65px;} #lnb .btnKato a{display:block;width:60px;height:60px;text-indent:-999px;overflow:hidden;background-image:url('../img/ic_kakao.png');background-repeat:no-repeat;background-position:center center;background-size:35px} /* ---- 하단영역 ---- */ #footer {clear:both;width:100%;background:#3a3a3a;} #footer .fBanner{padding:45px 20px;background:#fff;border-top:1px solid #ebebeb} #footer .fBanner .box{position:relative;margin:0 auto;padding-left:210px;max-width:1350px} #footer .fBanner .box .control{position:absolute;top:50%;left:0;transform:translateY(-50%);-webkit-transform:translateY(-50%)} #footer .fBanner .box h2{display:inline-block;margin-right:5px;font-size:16px;line-height:1} #footer .fBanner .box .control button{margin-left:-1px;width:33px;height:33px;text-indent:-999px;overflow:hidden;background-color:#fff;background-repeat:no-repeat;background-position:center center;border:1px solid #a9a9a9} #footer .fBanner .box .control .prevSlide{background-image:url('../img/ic_b_before.png')} #footer .fBanner .box .control .nextSlide{background-image:url('../img/ic_b_next.png')} #footer .fBanner .box .control .stopSlide{background-image:url('../img/ic_b_stop.png')} #footer .fBanner .box .control .startSlide{background-image:url('../img/ic_b_play.png')} #footer .footWrap{position:relative;margin:0 auto;padding:30px 20px;max-width:1390px;line-height:18px} #footer .footWrap .botBtTop{display:none;position:fixed;bottom:160px;left:50%;margin-left:700px;padding-top:10px;width:60px;height:60px;font-size:13px;color:#fff;background:#63a7c6;box-shadow:10px 10px 15px rgba(0,0,0,0.4)} #footer .footWrap .botBtTop::before{position:absolute;top:15px;left:50%;margin-left:-3px;width:6px;height:6px;content:'';border:1px solid #fff;border-width:1px 1px 0 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} #footer .footWrap .footMenu{margin-bottom:30px;padding-bottom:35px;border-bottom:1px solid #323232} #footer .footWrap .footMenu li{position:relative;display:inline-block;line-height:14px;} #footer .footWrap .footMenu li::before{position:absolute;top:50%;left:0;margin-top:-5px;width:0;height:11px;content:'';border-left:1px dotted #6a6a6a} #footer .footWrap .footMenu li a{display:block;padding:0 15px;font-size:15px;color:#a9a9a9;font-weight:400} #footer .footWrap .footMenu li a:hover{color:#fff} #footer .footWrap .footMenu li:first-child a{padding-left:0} #footer .footWrap .footMenu li:first-child::before{display:none} #footer .footWrap .fLinkCon{position:absolute;top:20px;right:20px;z-index:100} #footer .footWrap .fFamily{position:relative;display:inline-block;margin-left:5px} #footer .footWrap .fFamily button{position:relative;width:200px;height:40px;font-size:14px;color:#888;text-indent:10px;text-align:left;background:#2a2a2a;border:1px solid #262626;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} #footer .footWrap .fFamily button::after{position: absolute; top: 50%; right: 20px;content: "";width:6px;height:6px;margin-top: -3px;border:1px solid #8a8a8a;border-width:2px 2px 0 0;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} #footer .footWrap .fFamily button.on::after{margin-top: -5px;transform:rotate(135deg);-webkit-transform:rotate(135deg)} #footer .footWrap .fFamily button:hover, #footer .footWrap .fFamily button.on{background:rgba(0,0,0,0.5)} #footer .footWrap .fFamily ul{display:none;position:absolute;bottom:40px;right:0;width:100%;font-size:14px;text-align:left;background:#282828;} #footer .footWrap .fFamily ul li a{display:block;padding:7px 10px;color:#767676;border-bottom:1px solid #404040;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} #footer .footWrap .fFamily ul li a:hover{color:#fff;background:#000;} #footer .footWrap .fFamily ul.fm2{width:410px;border-bottom:1px solid #404040} #footer .footWrap .fFamily ul.fm2 li{float:left;width:33.33%;border-left:1px solid #404040} #footer .footWrap .fFamily ul.fm2 li:last-child a{border-bottom:0} #footer .footWrap .footLogo{position:absolute;right:20px;bottom:40px} #footer .footWrap address{font-size:15px;color:#888;line-height:1.6;} #footer .footWrap small{display:block;margin-top:5px;font-size:15px;color:#888;word-break: break-all;} .main #footer .footWrap .botBtTop{display:block} /* ================================================================================ 반응형 레이아웃 ================================================================================ */ /* PC Device */ @media all and (min-width:1251px){ #header{transition: all 0.2s ease;-webkit-transition: all 0.2s ease;} #header .head_box .logo a{ transition: all 0.3s ease; -moz-transition: all 0.3s ease; /* Firefox 4 */ -webkit-transition: all 0.3s ease; /* Safari and Chrome */ -o-transition: all 0.3s ease; /* Opera */ } #header, #header.fix #totalMb{position:absolute} #totalMb{display:none;position:fixed;top:80px;left:0;width:100%;height:calc(100% - 80px);overflow:auto;background:rgba(32,34,41,0.98);z-index:200} #totalMb.on{display:block} #totalMb .btnClose, #totalMb .mbTop{display:none} #totalMb > ul{position:relative;margin:0 auto;padding:50px 240px 0 0;max-width:1350px;} #totalMb > ul > li{position:relative;padding:40px 0 30px 155px;border-bottom:1px solid rgba(255,255,255,0.08)} #totalMb ul > li a{color:#fff} #totalMb > ul > li > a{position:absolute;top:40px;left:0;padding-right:20px;width:156px;height:calc(100% - 80px);font-size:28px;font-weight:700;line-height:1.2;border-right:1px solid rgba(255,255,255,0.05)} #totalMb > ul > li button{display:none} #totalMb > ul > li > ul::after{display:block;clear:both;content:''} #totalMb > ul > li > ul > li{float:left;margin:0 35px 15px;} #totalMb > ul > li > ul > li > a{/*font-size:16px;*/font-size:19px;font-weight:500} #totalMb > ul > li > ul > li > ul{margin-top:10px} #totalMb > ul > li > ul > li > ul li{margin-bottom:5px} #totalMb > ul > li > ul > li > ul li a{/*font-size:15px;*/font-size:17px;color:#9a9a9a} #totalMb > ul > li.hongBo{position:absolute;top:50px;right:0;padding:0;width:175px;height:calc(100% - 50px);/*background-image: linear-gradient(#ff6f18, #ff9218);*/background-image: linear-gradient(#68a8df, #97c0e4);border:0} #totalMb > ul > li.hongBo > a{position:relative;top:0;display:block;padding:60px 10px 0 20px;width:100%;height:100%;font-size:30px;color:#22242b;font-weight:500;line-height:1.1;background:url('../img/total_h_bg.png') no-repeat right bottom;border:0} #totalMb > ul > li.hongBo > a span{display:block;margin-top:25px;padding-bottom:40px;font-size:16px;font-weight:400;line-height:1.3;background:url('../img/ic_t_arrow.png') no-repeat left bottom} #totalMb > ul > li.hongBo > a:hover{text-decoration:none} #lnb.fix{z-index:200} #lnb.fix .lnbWrap{position:fixed;max-width:100%;} #lnb.fix .lnbCon{width:100%;max-width:100%;color:#fff;background:rgba(62,62,62,0.98);border-bottom:0;box-shadow:2px 2px 10px rgba(0,0,0,0.2)} #lnb.fix .lnbBox > ul > li{border-right:1px solid #505150} #lnb.fix .lnbBox > ul > li button{color:#fff;background:none} #lnb.fix .lnbBox > ul > li button::after{border-color:#eee} #lnb.fix .lnbBox > ul > li:last-child button{color:#f45708;background-color:#222} #lnb.fix .lnbBox > ul > li:last-child button::after{border-color:#f45708} #lnb.fix .lnbBox > ul > li.home a{background-image:url('../img/ic_home2.png')} #lnb.fix .lnbBox > ul > li > ul{background:#3e3e3e} #lnb.fix .lnbBox > ul > li > ul li a{color:#eee;border-color:#505150} #lnb.fix .lnbBox > ul > li > ul li a:hover, #lnb.fix .lnbBox > ul > li > ul li.on a{background-color:#222} #lnb.fix .lnbBox > ul > li > ul li a:hover::after, #lnb.fix .lnbBox > ul > li > ul li.on a::after{border-color:#eee} #lnb.fix .btnPrint a{background-image:url('../img/ic_print2.png')} #lnb.fix .btnPrint a::before{opacity:0.2;border-color:#fff} #lnb.fix .btnKato a{background-image:url('../img/ic_kakao2.png')} .fix_bg{display:none !important;} } /* TABLET Device */ @media all and (max-width:1250px){ #mpop{display:none !important} .fp-viewing-0 #wrapper #header{top:0} .fp-viewing-0 #mpop.on ~ #wrapper #totalMb{top:0} .fp-viewing-0 #mpop ~ #wrapper #totalMb{top:0} .main #footer .footWrap .botBtTop{display:none} #header::after{display:none} #header .head_box{padding:0 20px;height:98px;min-height:98px;overflow: visible} #header .head_box .logo{top:25px;left:0;width:100%;text-align:center;z-index:100} #header .head_box .logo a{display:inline-block} #header .head_box .btninsta{right: 90px;} #header .head_box .btninsta a {line-height: 95px;} #header .head_box .btninsta img {width: 30px;} #header .head_box .btnLang, #header .head_box .btnTotalMenu{display:none} #header .head_box .btnSearch{right:auto;left:0;height:98px;background:#fff url('../img/ic_search_mb.png') no-repeat center center;background-size:37px;border:0} #header .head_box .btnSearch.on{background:none} #header .head_box .btnSearch.on span{width:40px} #header .head_box .btnSearch.on span:after, #header .head_box .btnSearch.on span:before{background:#141414} #header .head_box .searchForm{top:98px;right:auto;left:0;padding:50px 40px;width:100%;background:#f17f11} #header .head_box .searchForm .box{position:relative;border-bottom:1px solid #000} #header .head_box .searchForm .searTxt{padding:20px 0;font-size:28px;color:#fff;background:none} #header .head_box .searchForm .searTxt:-ms-input-placeholder{color: #fff;} #header .head_box .searchForm .searTxt::-webkit-input-placeholder{color: #fff;} #header .head_box .searchForm .searTxt::-moz-placeholder{color: #fff;} #header .head_box .searchForm .searTxt::-moz-placeholder{color: #fff;} #header .head_box .searchForm .btn{background-size:40px} #header .head_box .search_bg{display:none;position:fixed;top:98px;left:0;width:100%;height:100%;background:#000;opacity:0.7} #header .head_box .btnMenu{display:block;position:absolute;top:0;right:0;width:95px;height:95px;text-indent:-999px;overflow:hidden;transition:all 0.2s ease;z-index:200} #header .head_box .btnMenu span{position:relative;display:block;margin:0 auto;width:43px;height:4px;background:#000;transition:all 0.2s ease} #header .head_box .btnMenu span::before{position:absolute;top:-12px;left:0;width:100%;height:4px;content:'';background:#000;transition:all 0.2s ease} #header .head_box .btnMenu span::after{position:absolute;top:12px;left:0;width:100%;height:4px;content:'';background:#000;transition:all 0.2s ease} #header .head_box .btnClose{display:block;position:absolute;top:0;right:0;width:98px;height:98px;text-indent:-999px;overflow:hidden;z-index:20} #header .head_box .btnClose span{position:relative;display:block;margin:0 auto;width:30px;height:2px;background:transparent} #header .head_box .btnClose span::before{position:absolute;top:0;left:0;width:100%;height:2px;content:'';transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background:#fff;} #header .head_box .btnClose span::after{position:absolute;top:0;left:0;width:100%;height:2px;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);background:#fff;} #gnbArea{display:none} #totalMb{display:block !important;position:fixed;top:0;right:-500px;width:500px;height:100%;background:#fff;z-index:500} #totalMb .mbTop{position:absolute;top:0;left:0;width:100%;z-index:10} #totalMb .mbTop ul{height:98px;background:#22242b} #totalMb .mbTop ul::after{display:block;clear:both;content:''} #totalMb .mbTop ul li{position:relative;float:left} #totalMb .mbTop ul li::after{position:absolute;top:50%;right:0;margin-top:-8px;width:0;height:17px;content:'';border-left:1px dotted #86baf0} #totalMb .mbTop ul li:first-child::after, #totalMb .mbTop ul li:last-child::after{display:none} #totalMb .mbTop ul li a{display:block;padding:0 20px 0 55px;font-size:24px;color:#fff;font-weight:500;line-height:98px;background-repeat:no-repeat;background-position:20px center} #totalMb .mbTop ul li.home a{background-image:url('../img/ic_home_mb.png')} #totalMb .mbTop ul li.eng a{background-image:url('../img/ic_lang_mb.png')} #totalMb .mbTop .txt{padding:40px 0 0 75px;height:105px;font-size:26px;color:#fff;background:#2b353e url('../img/ic_mb_mem.png') no-repeat 30px center} #totalMb > ul{padding:98px 0 20px 0;width:100%;height:100%;overflow:auto;background:#fff;} #totalMb > ul > li{position:relative;font-size:28px;line-height:1;border-bottom:1px solid #d5d5d5} #totalMb > ul > li.has-sub::after{position:absolute;top:45px;right:30px;width:14px;height:14px;content:'';border:1px solid #000;border-width:0 1px 1px 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease} #totalMb > ul > li.open::after{border-color:#fff;transform:rotate(45deg);-webkit-transform:rotate(45deg)} #totalMb > ul > li > a{display:block;padding:0 40px;font-size:28px;color:#000;line-height:108px} #totalMb > ul > li > button{position:absolute;top:0;left:0;width:100%;height:108px;text-indent:-999px;overflow:hidden} #totalMb > ul > li.open > a{color:#fff;background:#f17f11;} #totalMb > ul > li.hongBo{margin-top:35px} #totalMb > ul > li.hongBo > a{position:relative;padding:40px;font-size:30px;line-height:1.2;font-weight:500;/* background:#ff9518 url('../img/mb_hongbo_bg.jpg') no-repeat right bottom */background:#68a8df url('../img/mb_hongbo_bg.jpg') no-repeat right bottom} #totalMb > ul > li.hongBo > a br{display:none} #totalMb > ul > li.hongBo > a span{display:block;margin-top:5px;font-size:20px;font-weight:400} #totalMb > ul > li > ul{display:none;} #totalMb > ul > li > ul > li{position:relative;border-top:1px solid #d5d5d5} #totalMb > ul > li > ul > li > a{display:block;padding:0 64px;font-size:24px;color:#222;line-height:73px} #totalMb > ul > li > ul > li > a:hover, #totalMb > ul > li > ul > li.open > a{background:#eee6e1} #totalMb > ul > li > ul > li:hover{background:#eee6e1} #totalMb > ul > li > ul > li ul{display:block;padding:20px 60px;background:#f7f5f4;border-top:1px solid #d5d5d5} #totalMb > ul > li > ul > li ul li a{position:relative;display:block;padding:10px 0;font-size:22px;} #totalMb > ul > li > ul > li ul li a::before{content:'- '} #totalMb > ul > li > ul > li ul li a:hover{color:#ff6f18} /* 모바일메뉴 */ .fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:300} #wrapper.wra_box{position:fixed;top:0;width:100%;height:auto;z-index:200;} #container #content{min-height:300px} #subContainer #content{min-height:300px} .subSkin{padding-top:220px;height:415px} .subSkin h2{font-size:42px} #lnb .btnPrint{display:none} #lnb .lnbWrap{height:auto} #lnb .lnbBox > ul{padding:0 59px} #lnb .lnbBox > ul > li{width:33.33%} #lnb .lnbBox > ul > li button{width:100%;min-width:100%} #lnb .btnKato{right:0} #footer{position:relative;z-index:30} .main #container + #footer{position:relative;bottom:0} #footer .footWrap{padding:30px 20px;} #footer .footWrap .footMenu{position:relative;top:0;right:0;margin-bottom:20px;padding-bottom:20px} #footer .footWrap .fLinkCon{position:relative;top:0;right:auto;margin-bottom:20px} #footer .footWrap .fFamily{margin:0 5px 0 0} #footer .footWrap .footLogo{position:relative;right:0;bottom:0;margin-top:20px;text-align:center} #footer .footWrap .botBtTop{bottom:20px;left:auto;right:20px;margin-left:0;z-index:999} } /* Mobile Device */ @media all and (max-width:640px){ #header .head_box{padding:0;height:55px;min-height: 55px;} #header .head_box .logo{top:15px;} #header .head_box .logo img{width:130px;} #header .head_box .btninsta{right: 60px;} #header .head_box .btninsta a {line-height: 52px;} #header .head_box .btninsta img {width: 22px;} #header .head_box .btnSearch{width:55px;height:55px;background-size:20px} #header .head_box .btnSearch.on span{width:25px} #header .head_box .searchForm{top:55px;padding:25px 20px} #header .head_box .searchForm .searTxt{padding:0;height:40px;font-size:14px} #header .head_box .searchForm .box{padding:0 40px 0 0} #header .head_box .searchForm .btn{width:40px;height:38px;background-size:20px} #header .head_box .search_bg{top:55px} #header .head_box .btnMenu{right:0;width:55px;height:55px} #header .head_box .btnMenu span{width:25px;height:3px} #header .head_box .btnMenu span::before{top:-8px;height:3px} #header .head_box .btnMenu span::after{top:8px;height:3px} #header .head_box .btnClose{width:55px;height:55px} #header .head_box .btnClose span{width:20px;height:1px} #header .head_box .btnClose span::before{height:1px} #header .head_box .btnClose span::after{height:1px} #totalMb{width:260px} #totalMb .mbTop{height:55px} #totalMb .mbTop ul{height:55px} #totalMb .mbTop ul li a{padding: 0 10px 0 35px;font-size:13px;line-height:55px;background-size:20px;background-position:10px center} #totalMb > ul > li > button{height:60px} #totalMb > ul{padding-top:55px} #totalMb > ul > li > a{padding:0 20px;font-size:16px;line-height:60px} #totalMb > ul > li.has-sub::after{top: 26px;right: 20px;width: 8px;height: 8px;} #totalMb > ul > li > ul > li > a{padding:0 35px;font-size:14px;line-height:45px} #totalMb > ul > li > ul > li ul{padding:10px 35px} #totalMb > ul > li > ul > li ul li a{padding:8px 0;font-size:13px} #totalMb > ul > li.hongBo{margin-top:20px} #totalMb > ul > li.hongBo > a{padding:25px;font-size:18px;background-size:cover} #totalMb > ul > li.hongBo > a span{margin-top:3px;font-size:12px;} #subContainer #content{padding:50px 10px;} .subSkin{padding-top:135px;height:255px} .subSkin h2{margin-bottom:5px;font-size:28px;font-weight:500} .subSkin p{font-size:12px} #lnb{height:35px} #lnb .lnbWrap{height:auto;} #lnb .lnbBox > ul{padding:0 35px 0 30px} #lnb .lnbBox > ul > li.home{width:30px;height:35px} #lnb .lnbBox > ul > li.home a{background-size:15px} #lnb .lnbBox > ul > li button{padding-right:25px;height:35px;font-size:11px;text-indent:10px;} #lnb .lnbBox > ul > li button::after{right:10px;margin-top:-2px;width:4px;height:4px;} #lnb .lnbBox > ul > li > ul{top:35px} #lnb .lnbBox > ul > li > ul li{font-size:11px} #lnb .lnbBox > ul > li > ul li a{padding:5px 10px} #lnb .btnKato a{width:35px;height:35px;background-size:25px} #footer .fBanner{padding:15px 10px} #footer .fBanner .box{padding-left:80px} #footer .fBanner .box h2{display:block;margin-bottom:5px;font-size:11px} #footer .fBanner .box .control{left:0;} #footer .fBanner .box .control button{width:25px;height:25px;background-size:auto 8px} #footer .footWrap{padding:20px 10px;text-align:center} #footer .footWrap .footMenu{margin-bottom:15px;padding-bottom:10px} #footer .footWrap .footMenu li a{padding:0 8px;font-size:12px} #footer .footWrap .fFamily button{width: 140px;height:30px;font-size:12px} #footer .footWrap .fFamily button::after{right:10px;margin-top:-2px;width: 4px;height:4px;border-width:1px 1px 0 0 } #footer .footWrap .fFamily ul{bottom:30px} #footer .footWrap .fFamily ul li a{font-size:11px} #footer .footWrap .fFamily ul.fm2{width:288px} #footer .footWrap address, #footer .footWrap small{font-size:12px;line-height:1.2} #footer .footWrap .footLogo{margin-top:20px} #footer .footWrap .footLogo img{height:20px} #footer .footWrap .botBtTop{right:10px;bottom:10px;padding-top:10px;width:40px;height:40px;font-size:11px} #footer .footWrap .botBtTop::before{top:10px;width: 4px;height: 4px;} } /* ================================================================================ 메인콘텐츠 ================================================================================ */ /* 슬라이드 기본설정 */ .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; width: 100%; height: 100%; /* Fix of Webkit flickering */ z-index: 1; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 0; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } #fp-nav.fp-right{right:0} #fp-nav ul{position:relative;padding:25px 0} #fp-nav ul::after{position:absolute;top:0;left:27px;width:0;height:100%;content:'';opacity:0.15;border-left:1px solid #000;z-index:1} #fp-nav ul li{} #fp-nav ul li a{position:relative;display:block;padding-left:35px;width:165px;line-height:27px;font-family: 'Titillium Web';font-size:13px;color:#333;opacity:0.4;font-weight:700;text-decoration:none;transition: all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:2} #fp-nav ul li a:hover{opacity:1} #fp-nav ul li a.active{color:#fff;opacity:1;} #fp-nav ul li a::after{position:absolute;top:0;right:0;width:0;height:100%;content:'';background:#000;border-radius:14px 0 0 14px;transition: all 0.3s ease;-webkit-transition:all 0.3s ease;z-index:1} #fp-nav ul li a .fp-sr-only{position:relative;z-index:2} #fp-nav ul li a .fp-sr-only + span{position:absolute;top:0;left:0;padding-left:0;opacity:0;transition: all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:2} #fp-nav ul li a .fp-sr-only + span::before{font-size:12px;color:#ff6f18} #fp-nav ul li a.active .fp-sr-only + span{padding-left:10px;opacity:1} #fp-nav ul li:nth-child(1) a .fp-sr-only + span::before{content:'01';} #fp-nav ul li:nth-child(2) a .fp-sr-only + span::before{content:'02';} #fp-nav ul li:nth-child(3) a .fp-sr-only + span::before{content:'03';} #fp-nav ul li:nth-child(4) a .fp-sr-only + span::before{content:'04';} #fp-nav ul li a.active::after{width:100%} #fp-nav ul li .fp-tooltip{display:none} .fp-viewing-0 #fp-nav ul::after{border-color:#fff} .fp-viewing-0 #fp-nav ul li a{color:#fff} .ffam{font-family: 'Open Sans Hebrew', sans-serif;} .icGo{position:absolute;left:50%;bottom:50px;margin-left:-22px;width:43px;height:73px;text-indent:-999px;overflow:hidden;background:url('../img/ic_m_down.png') no-repeat center center;transition: all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:40} .section2 .icGo, .section3 .icGo{opacity:0 !important} .section2 .icGo:focus, .section3 .icGo:focus{opacity:1 !important} .shake{animation-duration: 4s;animation-iteration-count: infinite; animation-name: shake;} @keyframes shake { 0%, 50%, 100% {transform: translateY(-5px);} 25%, 75% {transform: translateY(0);} } .prevView{opacity:0;position:absolute;top:150px;left:50%;width:200px;height:30px;color:#fff;background:#094985;transform:translateX(-50%);-webkit-transform:translateX(-50%);z-index:-1;} .prevView:focus{opacity:1;z-index:900} #conFullPage .section{overflow:hidden;} .section1{position:relative} .section1 .control{position:absolute;top:50%;left:60px;width:52px;transform:translateY(-50%);-webkit-transform:translateY(-50%);z-index:50} .section1 .control button{position:relative;margin-bottom:5px;width:52px;height:52px;text-indent:-999px;overflow:hidden;border-radius:50%;border:1px solid rgba(255,255,255,0.5);transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .section1 .control button::after{position:absolute;top:50%;left:50%;content:'';transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .section1 .control button:hover{background:#fff} .section1 .control button:hover::after{border-color:#3f556a} .section1 .control .prevSlide::after{margin:-7px 0 0 -5px;width:15px;height:15px;border:1px solid rgba(255,255,255,0.8);border-width:0 0 1px 1px;transform:rotate(45deg);-webkit-transform:rotate(45deg)} .section1 .control .nextSlide::after{margin:-7px 0 0 -10px;width:15px;height:15px;border:1px solid rgba(255,255,255,0.8);border-width:0 1px 1px 0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} .section1 .control .stopSlide::after{margin:-9px 0 0 -3px;width:5px;height:18px;border:1px solid rgba(255,255,255,0.8);border-width:0 1px;} .section1 .control .startSlide::after{margin:-9px 0 0 -3px;border-left:10px solid rgba(255,255,255,0.8);border-top:10px solid transparent;border-bottom:10px solid transparent} .section1 .control .startSlide:hover::after{border-color:transparent;border-left-color:#3f556a} .topSlide ul{position:relative;z-index:3} .topSlide ul li{position:relative;height:100vh;overflow:hidden;} .topSlide ul li::after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:rgba(0,0,0,0.1);z-index:2} .topSlide ul li video{position:absolute;top:0;left:0;width:100% !important;height:auto !important; object-fit: cover !important;} .topSlide ul li img.mv{width:100%;height:100% !important;object-fit: cover;} .topSlide ul li p{position:absolute;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%);-webkit-transform:translateY(-50%);z-index:50} .topSlide ul li p span{display:block;color:#fff} .topSlide ul li p .txt1{margin-bottom:10px;font-family: 'Titillium Web';font-size:15px;letter-spacing:1px;} .topSlide ul li p .txt2{margin-bottom:25px;font-size:75px;font-weight:500;line-height:1} .topSlide ul li p .txt2 img{transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .topSlide ul li p .txt3{margin-top:35px;font-size:20px;font-weight:300} .topSlide .swiper-slide-active .txt1.ani_y2{opacity:0.6;} .section2{position:relative;/* background:url('../img/m_sec2_bg1.png') no-repeat left top, url('../img/m_sec2_bg2.png') no-repeat right bottom */} .section .mConBox{margin:0 auto;padding:80px 20px 0;max-width:1390px} .section .mConBox::after{display:block;clear:both;content:''} .section .mConBox .tit{margin-bottom:20px;font-size:40px;color:#222;text-align:center;line-height:1} .section .mConBox .htxt{margin-bottom:70px;font-size:16px;text-align:center} .mCon1_1{position:relative;float:left;margin-right:3%;width:24%;} .mCon1_1 .tab{position:relative;margin-bottom:30px;padding-right:30px} .mCon1_1 .tab::before{position:absolute;left:0;bottom:0;width:100%;height:0;content:'';border-bottom:4px solid #322e2c} .mCon1_1 .tab::after{display:block;clear:both;content:''} .mCon1_1 .tab li{position:relative;float:left;text-align:center;z-index:2} .mCon1_1 .tab li a{display:block;padding:0 5px;height:50px;/*font-size:17px;*/font-size:17px;color:#999;line-height:40px;font-weight:500;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon1_1 .tab li a::before{position:absolute;bottom:0;left:50%;width:0;height:0;content:'';/*border-bottom:4px solid #f55708;*/border-bottom:4px solid #f17f11;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon1_1 .tab li a:hover{/*color:#f55708;*/color:#f17f11;text-decoration:none} .mCon1_1 .tab li.on a{/*font-size:20px;*/padding:0 4px;font-size:20px;/*color:#f55708;*/color:#f17f11;} .mCon1_1 .tab li.on a::before{left:0;width:100%} .mCon1_1 .tabCon .btnMore{position:absolute;top:8px;right:0;z-index:10} .mCon1_1 .tabCon .btnMore a{display:block;width:25px;height:25px;text-indent:-999px;overflow:hidden;background:url('../img/ic_more.png') no-repeat center center;background-size:17px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon1_1 .tabCon .btnMore a:hover{transform:rotate(180deg);-webkit-transform:rotate(180deg)} .mCon1_2{float:left;margin-right:2%;width:24%;} .mCon1_2 dl{margin-bottom:30px} .mCon1_2 dl dt{position:relative;margin-bottom:20px;padding-top:12px;height:50px;/*font-size:20px;*/font-size:21px;font-weight:500;line-height:1;border-bottom:4px solid #322e2c} .mCon1_2 dl dt .btnMore{position:absolute;top:10px;right:0;z-index:10} .mCon1_2 dl dt .btnMore a{display:block;width:25px;height:25px;text-indent:-999px;overflow:hidden;background:url('../img/ic_more.png') no-repeat center center;background-size:17px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon1_2 dl dt .btnMore a:hover{transform:rotate(180deg);-webkit-transform:rotate(180deg)} .mCon1_2 dl dd ul li{position:relative;padding-right:85px} .mCon1_2 dl dd ul li a{display:block;line-height:40px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .mCon1_2 dl dd ul li .data{position:absolute;top:10px;right:0;font-size:13px;color:#888} .mCon1_3{float:left;margin-right:2%;width:19%;} .mCon1_3 .box{position:relative;height:239px;background-repeat:no-repeat;background-size:cover;background-position:right bottom} .mCon1_3 .box a{display:block;padding:40px 25px;height:100%} .mCon1_3 .box a:hover{text-decoration:none} .mCon1_3 .box h3{margin-bottom:15px;font-size:20px;line-height:1} .mCon1_3 .box .btn{position:absolute;top:40px;right:30px;width:17px;height:17px;text-indent:-999px;overflow:hidden;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:10} .mCon1_3 .box .btn::before{position:absolute;top:50%;left:0;width:100%;height:0;content:'';border-top:1px solid #1d91ad} .mCon1_3 .box .btn::after{position:absolute;top:0;left:50%;width:0;height:100%;content:'';border-left:1px solid #1d91ad} .mCon1_3 .box a:hover .btn {transform:rotate(180deg);-webkit-transform:rotate(180deg)} .mCon1_3 .box a::after{position:absolute;top:0;left:0;width:100%;height:0;content:'';opacity:0.5;border:1px solid #006983;border-width:0 1px;box-sizing:border-box;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} .mCon1_3 .box a::before{position:absolute;top:0;left:0;width:0;height:100%;content:'';opacity:0.5;border:1px solid #006983;border-width:1px 0;box-sizing:border-box;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} .mCon1_3 .box.con1{background-image:url('../img/m_sec2_img1.jpg')} .mCon1_3 .box.con1 a{/* color:#006983 */ color:#fff} .mCon1_3 .box.con1 a:hover::after{height:100%;border-color:#006983} .mCon1_3 .box.con1 a:hover::before{width:100%;border-color:#006983} .mCon1_3 .box.con1 .btn::before, .mCon1_3 .box.con1 .btn::after{border-color:#fff} .mCon1_3 .box.con2{background-image:url('../img/m_sec2_img2.jpg')} .mCon1_3 .box.con2 a{/* color:#9f3e00 */ color:#fff} .mCon1_3 .box.con2 a:hover::after{height:100%;border-color:#9f3e00} .mCon1_3 .box.con2 a:hover::before{width:100%;border-color:#9f3e00} .mCon1_3 .box.con2 .btn::before, .mCon1_3 .box.con2 .btn::after{/* border-color:#c65810 */ border-color:#fff} .mCon1_4{position:relative;float:left;width:26%;height:478px} .mCon1_4 a{display:block;height:100%;color:#fff;overflow:hidden} .mCon1_4 a img{width:100%;height:100%;transition:all 0.8s ease;-webkit-transition:all 0.8s ease} .mCon1_4 a:hover{text-decoration:none;background-size:110% 110%} .mCon1_4 a:hover img{transform:scale(1.1);-webkit-transform:scale(1.1)} .mCon1_4 .txt{position:absolute;top:0;left:0;padding:45px 40px;z-index:10} .mCon1_4 .txt span{display:block;margin-bottom:25px;font-family: 'Titillium Web';font-size:11px;opacity:0.5;letter-spacing:10px} .mCon1_4 .txt h3{position:relative;margin-bottom:10px;padding-top:10px;font-size:30px;line-height:1} .mCon1_4 .txt h3::before{position:absolute;top:0;left:0;width:23px;height:0;content:'';border-top:1px solid #fff;opacity:0.5} .mCon1_4 .txt p{margin-bottom:20px;font-size:16px} .mCon1_4 .txt .btn{display:block;width:35px;height:35px;opacity:1;background:url('../img/ic_arrow.png') no-repeat center center;background-size:13px;border:1px solid rgba(255,255,255,0.5);border-radius:50%} .section3{position:relative;/* background:url('../img/m_sec3_bg2.png') no-repeat right top, url('../img/m_sec3_bg1.png') no-repeat left bottom; */background-color:#f6f6f6} .mCon2_1{position:relative;float:left;margin-right:2.6%;width:34%;height:491px} .mCon2_1 .popSlide1 li a{display:block;height:100%;} .mCon2_1 .popSlide1 li a img{width:100%;height:100%;} .mCon2_1 .popSlide1 li a:hover dl{height:160px;background:rgba(0,0,0,0.9);} .mCon2_1 .popSlide1 li dl{position:absolute;left:0;bottom:0;padding:20px 40px;width:100%;height:145px;background:rgba(0,0,0,0.8);transition:all 0.3s ease;-webkit-transition:all 0.3s ease;z-index:2} .mCon2_1 .popSlide1 li dl dt{margin-bottom:15px;font-size:22px;color:#fff;font-weight:500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height:1} .mCon2_1 .popSlide1 li dl dd{font-size:14px;color:#ddd;overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 40px;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .mCon2_1 .control{position:absolute;left:40px;bottom:20px;z-index:50} .mCon2_1 .control .mPage{display:inline-block} .mCon2_1 .control .mPage span{display:inline-block;margin-right:3px;width:10px;height:10px;background:#b0b0b0;border-radius:50%} .mCon2_1 .control .mPage .swiper-pagination-bullet-active{/*background:#f55708*/background:#f17f11} .mCon2_1 .control button{position:relative;width:15px;height:15px;text-indent:-999px;overflow:hidden} .mCon2_1 .control button::after{position:absolute;top:50%;left:50%;content:'';} {margin:-9px 0 0 -3px;width:5px;height:18px;border:1px solid rgba(255,255,255,0.8);border-width:0 1px;} .mCon2_1 .control .stopSlide1::after{margin:-5px 0 0 -3px;width:2px;height:8px;border:1px solid #c0c0c0;border-width:0 2px;} .mCon2_1 .control .startSlide1::after{margin:-6px 0 0 -3px;border-left:5px solid #c0c0c0;border-top:5px solid transparent;border-bottom:5px solid transparent} .mCon2_2{position:relative;float:left;width:63.4%;height:240px} .mCon2_2 .mTabM{position:relative;padding-right:10px} .mCon2_2 .mTabM::after{display:block;clear:both;content:''} .mCon2_2 .mTabM::before{position:absolute;top:41px;left:0;width:100%;height:0;content:'';border-bottom:4px solid #322e2c} .mCon2_2 .mTabM > li{display:table;float:left} .mCon2_2 .mTabM > li > a{position:relative;display:table-cell;padding:0 15px 4px;height:45px;font-size:19px;color:#999;font-weight:500;text-align:center;vertical-align:middle;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon2_2 .mTabM > li > a::after{position:absolute;top:50%;right:0;margin-top:-7px;width:0;height:14px;content:'';border-left:1px solid #dadada} .mCon2_2 .mTabM > li > a::before{position:absolute;bottom:0;left:50%;width:0;height:0;content:'';border-bottom:4px solid #f55708;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon2_2 .mTabM > li:last-child > a::after{display:none} .mCon2_2 .mTabM > li > a:hover{color:#f17f11;text-decoration:none} .mCon2_2 .mTabM > li.on > a{font-size:21px;color:#f17f11;} .mCon2_2 .mTabM > li.on > a::before{left:0;width:100%} .mCon2_2 .mTabM > li .mTabCon{position:absolute;top:50px;left:0;padding:20px;width:100%} .mCon2_2 .mTabM > li .mTabCon ul::after{display:block;clear:both;content:''} .mCon2_2 .mTabM > li .mTabCon ul li{position:relative;float:left;width:50%} .mCon2_2 .mTabM > li .mTabCon ul li::before{position:absolute;top:50%;left:0;content:'';width:2px;height:2px;background:#525252} .mCon2_2 .mTabM > li .mTabCon ul li a{display:block;padding-left:10px;font-size:16px;line-height:35px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .mCon2_2 .mTabM > li .mTabCon .btnMore{position:absolute;top:-42px;right:0;z-index:10} .mCon2_2 .mTabM > li .mTabCon .btnMore a{display:block;width:25px;height:25px;text-indent:-999px;overflow:hidden;background:url('../img/ic_more.png') no-repeat center center;background-size:17px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon2_2 .mTabM > li .mTabCon .btnMore a:hover{transform:rotate(180deg);-webkit-transform:rotate(180deg)} .mCon2_2 .mTabM > li .mTabCon ul li::after { content: "N"; position: absolute; top: 50%; transform: translateY(-50%); right: 6%; width: 12px; height: 13px; background: #f17f11; font-size: .9px; font-weight: 600; color: #fff; line-height: 12px; text-align: center; } .mCon2_2 .mTabM > li .mTabCon ul li:nth-child(5)::after, .mCon2_2 .mTabM > li .mTabCon ul li:nth-child(6)::after, .mCon2_2 .mTabM > li .mTabCon ul li:nth-child(7)::after, .mCon2_2 .mTabM > li .mTabCon ul li:nth-child(8)::after { display: none; } .mCon2_3{float:left;margin-right:0.7%;width:19%;} .mCon2_3 ul li{margin-bottom:5px;} .mCon2_3 ul li a{position:relative;display:block;padding:0 24px;line-height:80px;color:#fff;/* background:#484341; */background:#26497f;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon2_3 ul li a::after{position:absolute;top:0;right:20px;padding-right:10px;font-size:12px;content:'GO';background:url('../img/ic_arrow2.png') no-repeat right center;background-size:5px} .mCon2_3 ul li a span{display:inline-block;font-size:16px;line-height:1.4;vertical-align:middle} .mCon2_3 ul li:nth-child(2) a{/* background:#6f6662 */background:#316aa0} .mCon2_3 ul li:nth-child(3) a{/* background:#8a807b */background:#358acb} .mCon2_3 ul li:nth-child(1) a:hover{background:#383433} .mCon2_3 ul li:nth-child(2) a:hover{background:#5a524e} .mCon2_3 ul li:nth-child(3) a:hover{background:#746b67} .mCon2_4{float:left;margin-right:0.7%;width:21.5%;/* background:#ff6f18 url('../img/m_sec3_img1.jpg') no-repeat right bottom; */} .mCon2_4 .child{width: 100%; height: 165px; padding:20px; background:#2a919a url('../img/m_sec3_img1.jpg') no-repeat right bottom;} .mCon2_4 .insta{display: block; width: 100%; height: 80px; margin-top: 5px; padding: 20px; background-image:linear-gradient(to right, #fed187, #f91f85, #9307dd); text-decoration: none; position: relative; } .mCon2_4 .insta::after { content: ""; position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 50px; height: 50px; background: url('../img/insta_icon.png') no-repeat 50% 50%; background-size: 30px; } .mCon2_4 h3{margin-bottom:18px;font-size:21px;color:#fff} .mCon2_4 h3 span{display:block;margin-bottom:5px;font-size:13px;font-weight:300} .mCon2_4 .btn{display:block;margin-bottom:6px;width:105px} .mCon2_4 .btn a{position:relative;display:block;padding:0 10px;font-size:12px;color:#fff;line-height:26px;border:1px solid rgba(255,255,255,0.5);border-radius:13px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon2_4 .btn a::after{position:absolute;top:0;right:15px;width:5px;height:100%;content:'';background:url('../img/ic_arrow2.png') no-repeat left center;background-size:5px} .mCon2_4 .btn a:hover{text-decoration:none;background:rgba(255,255,255,0.1);} .mCon2_5{position:relative;float:left;width:21.5%;height:250px} .mCon2_5 ul li img{width:100%;height:100%} .mCon2_5 .control{position:absolute;right:20px;top:25px;z-index:50} .mCon2_5 .control .mPage{display:inline-block} .mCon2_5 .control .mPage span{display:inline-block;margin-right:3px;width:10px;height:10px;opacity:0.5;background:#fff;border-radius:50%} .mCon2_5 .control .mPage .swiper-pagination-bullet-active{opacity:1;/*background:#f55708*/background:#f17f11} .mCon2_5 .control button{position:relative;width:15px;height:15px;text-indent:-999px;overflow:hidden} .mCon2_5 .control button::after{position:absolute;top:50%;left:50%;content:'';} {margin:-9px 0 0 -3px;width:5px;height:18px;border:1px solid rgba(255,255,255,0.8);border-width:0 1px;} .mCon2_5 .control .stopSlide2::after{margin:-5px 0 0 -3px;width:2px;height:8px;border:1px solid #fff;border-width:0 2px;} .mCon2_5 .control .startSlide2::after{margin:-6px 0 0 -3px;border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent} .section4 .fp-scroller{position:relative;background:/* url('../img/m_sec4_bg1.png') no-repeat center 100px, */url('../img/m_sec4_bg2.jpg') no-repeat center 350px;} .mCon3{position:relative;float:left;width:33.33%} .mCon3.con1{padding-top:135px;} .mCon3.con2{margin-bottom:290px;padding-top:265px;} .mCon3 a{display:block;overflow:hidden;} .mCon3 a img{width:100%;height:100%;transition:all 0.8s ease;-webkit-transition:all 0.8s ease} .mCon3 a:hover img{transform:scale(1.1);-webkit-transform:scale(1.1)} .mCon3 .txt{position:absolute;left:0;bottom:0;padding:45px;width:100%;color:#fff;z-index:10} .mCon3 .txt::before{position:absolute;bottom:60px;right:0;width:0;height:0;content:'';border-top:4px solid #ff6f18;transition:all 0.4s ease;-webkit-transition:all 0.4s ease} .mCon3 .txt p{margin-bottom:30px} .mCon3 .txt h2{font-size:30px} .mCon3 a:hover .txt::before{width:60%;} .mCon3.con2 a:hover .txt::before{width:40%;} .mCon3_txt{position:relative;float:left;padding-top:465px;width:33.33%;} .mCon3_txt p{position:relative;font-family: 'Titillium Web';font-size:50px;font-weight:600;transform:rotate(90deg);-webkit-transform:rotate(90deg)} .mCon3_txt p::after{position:absolute;top:50%;right:-120px;width:120px;height:0;content:'';border-top:2px solid #333} .mCon4{background:#fff} .mCon4 .box{margin:0 auto; /*max-width:1350px;*/} .mCon4 .box::after{display:block;clear:both;content:''} .mCon4 .box .con{position:relative;float:left; /*width:33.33%;*/ width: calc(100%/5); height:195px;border-left:1px solid #ebebeb;} .mCon4 .box .con:nth-of-type(3){border-right:1px solid #ebebeb} .mCon4 .box .con a{display:block;padding:40px;height:100%;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon4 .box .con h2{position:relative;margin-bottom:20px;padding-top:24px;font-size:24px;color:#23282b;line-height:1} .mCon4 .box .con h2::before{position:absolute;top:0;left:0;width:58px;height:0;content:'';border-top:4px solid #ff6f18;} .mCon4 .box .con p{font-size:14px;line-height:1.5} .mCon4 .box .con .btn{position:absolute;bottom:48px;right:20%;padding-right:9px;font-size:12px;background:url('../img/ic_arrow3.png') no-repeat right center;background-size:5px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .mCon4 .box .con a:hover{text-decoration:none;background:#fafafa} .mCon4 .box .con.left_b, .mCon4 .box .con.right_b {line-height: 195px; border-left: 0;} .mCon4 .box .con.left_b a, .mCon4 .box .con.right_b a { padding: 0; width: 100%; background: #110e11;} .mCon4 .box .con.left_b img, .mCon4 .box .con.right_b img {width: 95%; margin: 0 2.5%;} /* 애니효과 */ /*.ani_0{transition-property: all;transition-duration: 0.6s;-webkit-transition-property: all;-webkit-transition-duration: 0.6s;} .ani{opacity:0;transition-property: all;transition-duration: 0.6s;-webkit-transition-property: all;-webkit-transition-duration: 0.6s;} .ani_y{opacity:0;transform:translateY(50px);transition-property: all;transition-duration: 0.6s;-webkit-transform:translateY(50px);-webkit-transition-property: all;-webkit-transition-duration: 0.6s;} .ani_y.m{transform:translateY(-50px);-webkit-transform:translateY(-50px);transition-timing-function:ease;-webkit-transition-timing-function:ease} .ani_x{opacity:0;transform:translateX(50px);transition-property: all;transition-duration: 0.6s;-webkit-transform:translateX(50px);-webkit-transition-property: all;-webkit-transition-duration: 0.6s;} .ani_x.m{transform:translateX(-50px);-webkit-transform:translateX(-50px);transition-timing-function:ease;-webkit-transition-timing-function:ease} .delay1{transition-delay:0.2s;-webkit-transition-delay:0.2s;} .delay2{transition-delay:0.5s;-webkit-transition-delay:0.5s;} .delay3{transition-delay:0.8s;-webkit-transition-delay:0.8s;} .delay4{transition-delay:1.1s;-webkit-transition-delay:1.1s;} .delay5{transition-delay:1.4s;-webkit-transition-delay:1.4s;} .delay6{transition-delay:1.7s;-webkit-transition-delay:1.7s;} .delay7{transition-delay:2.0s;-webkit-transition-delay:2.0s;} .delay8{transition-delay:2.3s;-webkit-transition-delay:2.3s;} .delay9{transition-delay:2.6s;-webkit-transition-delay:2.6s;} .delay10{transition-delay:3.0s;-webkit-transition-delay:3.0s;}*/ .section.motion .ani{opacity:1;} .section.motion .ani_y{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} .section.motion .ani_x{opacity:1;transform:translateX(0);-webkit-transform:translateX(0);} .section.motion .ani_0{opacity:0;} .ani_y2{opacity:0;transform:translateY(50px);transition-property: all;transition-duration: 0.8s;-webkit-transform:translateY(50px);-webkit-transition-property: all;-webkit-transition-duration: 0.8s;} .swiper-slide-active .ani_y2{opacity:1;transform:translateY(0);-webkit-transform:translateY(0);} /* ================================================================================ 반응형 메인 콘텐츠 ================================================================================ */ @media all and (max-width:1600px){ .mCon4 .box .con .btn {display: none;} } /* PC Device */ @media all and (min-width:1021px){ } /* TABLET Device */ @media all and (max-width:1250px){ .mbr{display:none} #conFullPage{transform: none !important;} #fp-nav{display:none} .fp-scrollable,.section{height:auto !important} .topSlide ul li video{height:100% !important;max-width: none !important;} .section .icGo{display:none} .section1 .control{top:auto;bottom:60px;left:50%;width:auto;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);} .section1 .control button{margin:0 3px} .section .mConBox{padding:80px 30px} .mCon1_1{margin-right:1%;width:49%} .mCon1_2{margin-left:1%;margin-right:0;width:49%} .mCon1_3{margin-right:2%;width:46%} .mCon1_4{width:51%} .mCon2_1{margin-right:2%;margin-bottom:30px;width:45%;height:350px} .mCon2_2{width:53%;} .mCon2_2 .mTabM > li .mTabCon{padding:10px} .mCon2_2 .mTabM > li .mTabCon ul li{float:none;width:100%} .mCon2_2 .mTabM > li{width:20%} .mCon2_2 .mTabM > li > a{padding:0 1px 4px;font-size:16px;} .mCon2_2 .mTabM > li.on > a{/*font-size:20px*/font-size:16px;} .mCon2_3{clear:both;margin:0 0 30px;width:100%} .mCon2_3 ul::after{display:block;clear:both;content:''} .mCon2_3 ul li{float:left;margin-bottom:0;width:33.33%} .mCon2_4{margin-right:2%;width:48%} .mCon2_5{width:50%} .section4{position:relative;background:url('../img/m_sec4_bg1.png') no-repeat center 50px, url('../img/m_sec4_bg2.jpg') no-repeat left 400px;background-size:auto, 150%} .mCon3{width:50%} .mCon3.con1{padding-top:0} .mCon3.con2{margin-bottom:100px;padding-top:125px} .mCon3_txt{display:none} .mCon3 a:hover .txt::before{width:50%;} .mCon3.con2 a:hover .txt::before{width:25%;} .mCon4 .box .con{height:220px} .mCon4 .box .con a{padding:30px} .mCon4 .box .con p br{display:none} .mCon4 .box .con .btn{right:auto;left:30px;bottom:25px} } @media all and (max-width:880px){ .mCon4 .box .con{width: calc((100% - 150px)/3);} .mCon4 .box .con.left_b {width: 150px; line-height: 0;} .mCon4 .box .con.left_b img {padding-top: 40px;} .mCon4 .box .con.right_b {width: 150px; height: fit-content; position: absolute; bottom: 0; line-height: 0;} .mCon4 .box .con.right_b a {background: transparent;} .mCon4 .box .con.right_b img {padding-bottom: 40px;} } /* Mobile Device */ @media all and (max-width:640px){ .topSlide ul li p .txt1{font-size:11px} .topSlide ul li p .txt2{margin-bottom:15px;font-size:40px} .topSlide ul li p .txt2 img{height:30px} .topSlide ul li p .txt3{font-size:13px} .topSlide ul li p .txt4 img{height:65px} .section1 .control{bottom:30px} .section1 .control button{width:30px;height:30px} .section1 .control .prevSlide::after{margin: -4px 0 0 -3px;width:8px;height:8px} .section1 .control .nextSlide::after{margin: -4px 0 0 -6px;width:8px;height:8px} .section1 .control .stopSlide::after{margin: -4px 0 0 -2px;width:3px;height:10px} .section1 .control .startSlide::after{margin: -6px 0 0 -2px;border-left-width:6px;border-top-width:6px;border-bottom-width: 6px;} .section .mConBox{padding:35px 15px} .section .mConBox .tit{margin-bottom:10px;font-size:22px} .section .mConBox .htxt{margin-bottom:30px;font-size:11px} .section2{background:none} .section3{background-image:none} .mCon1_1{float:none;margin:0 0 30px;width:100%} .mCon1_1 .tab li a{padding:0 8px;font-size:15px} .mCon1_1 .tab li.on a{font-size:17px} .mCon1_1 .tab::before, .mCon1_1 .tab li a::before{border-bottom-width:2px} .mCon1_2{float:none;margin:0 0 20px;width:100%} .mCon1_2 dl{margin-bottom:20px} .mCon1_2 dl dt{font-size:17px;border-bottom-width:2px} .mCon1_2 dl dd ul li a{line-height:30px} .mCon1_2 dl dd ul li .data{top:5px} .mCon1_3{float:none;margin:0 0 20px;width:100%;} .mCon1_3 .box{height:150px;background-position:right bottom -10px} .mCon1_3 .box a{padding:30px 20px} .mCon1_3 .box h3{margin-bottom:10px;font-size:17px} .mCon1_4{float:none;width:100%;height:auto} .mCon1_4 .txt{padding:30px} .mCon1_4 .txt h3{font-size:22px} .mCon1_4 .txt p{font-size:14px} .mCon2_1{float:none;margin:0 0 30px;width:100%;} .mCon2_1 .popSlide1 li dl{padding:20px} .mCon2_1 .control{left:20px} .mCon2_1 .popSlide1 li dl{height:130px} .mCon2_1 .popSlide1 li dl dt{margin-bottom:10px;font-size:18px} .mCon2_2{float:none;margin-bottom:20px;width:100%;height:300px} .mCon2_2 .mTabM::before{top:38px;border-bottom-width:2px} .mCon2_2 .mTabM > li{width:19.5%} .mCon2_2 .mTabM > li > a{padding:0 3px 2px;height: 40px;font-size:14px;line-height:1.1} .mCon2_2 .mTabM > li > a::before{border-bottom-width:2px} .mCon2_2 .mTabM > li.on > a{font-size:14px} .mCon2_2 .mTabM > li .mTabCon{padding:5px} .mCon2_2 .mTabM > li .mTabCon ul li a{font-size:14px;line-height: 30px;} .mCon2_3{float:none;} .mCon2_3 ul li{float:none;width:100%} .mCon2_3 ul li a{padding:0 10px;line-height:50px} .mCon2_3 ul li a span{font-size:14px;line-height:1} .mCon2_3 ul li a span br{display:none} .mCon2_4{float:none;margin:0 0 20px;width:100%} .mCon2_5{float:none;width:100%;height:auto} .section4{background-size: auto, 200%;background-position:center 50px, left bottom 500px} .mCon3{float:none;margin:0 auto;width:80%} .mCon3 .txt{padding:20px 20px 30px} .mCon3 .txt p{margin-bottom:20px} .mCon3 .txt h2{font-size:20px;line-height:1} .mCon3.con2{margin-bottom:20px;padding-top:0} .mCon3 .txt::before{bottom:35px;border-bottom-width:2px:} .mCon4 .box .con{float:none;width:100%;height:auto;border-left:0;border-bottom:1px solid #ebebeb} .mCon4 .box .con:nth-of-type(3){border-bottom:0} .mCon4 .box .con a{padding:20px} .mCon4 .box .con h2{margin-bottom:10px;padding-top:10px;font-size:16px} .mCon4 .box .con h2::before{width:40px;border-top-width:2px} .mCon4 .box .con p{font-size:13px} .mCon4 .box .con .btn{left:auto;right:20px;bottom:auto;top:25px} .mCon4 .box .con.left_b {width: 100%; line-height: 0; height: 120px;} .mCon4 .box .con.left_b img { padding-top: 0; margin: 0 auto; display: block; object-fit: cover; height: 120px; width: auto;} .mCon4 .box .con.right_b {position: relative; width: 100%; height: 120px;} .mCon4 .box .con.right_b a {background: #000;} .mCon4 .box .con.right_b img { padding-bottom: 0; display: block; margin: 0 auto; object-fit: cover; height: 120px; width: auto;} } @media all and (max-width:370px){ .mCon2_2 .mTabM > li > a{font-size:13px} .mCon2_2 .mTabM > li.on > a{font-size:13px} } /* ================================================================================ 서브 콘텐츠 ================================================================================ */ .mt10 { margin-top:10px !important; } .mt15 { margin-top:15px !important; } .mt20 { margin-top:20px !important; } .mt25 { margin-top:25px !important; } .mt30 { margin-top:30px !important; } .mt35 { margin-top:35px !important; } .mt40 { margin-top:40px !important; } .mt50 { margin-top:50px !important; } .mt60 { margin-top:60px !important; } .mt70 { margin-top:70px !important; } .mb-70 { margin-bottom:-70px !important; } .mb10 { margin-bottom:10px !important; } .mb15 { margin-bottom:15px !important; } .mb20 { margin-bottom:20px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !important; } .mb35 { margin-bottom:35px !important; } .mb40 { margin-bottom:40px !important; } .mb45 { margin-bottom:45px !important; } .mb50 { margin-bottom:50px !important; } .mb60 { margin-bottom:60px !important; } .mb70 { margin-bottom:70px !important; } .mr5 { margin-right:5px !important; } .mr8 { margin-right:8px !important; } .mr10 { margin-right:10px !important; } .mr15 { margin-right:15px !important; } .mr20 { margin-right:20px !important; } .mr25 { margin-right:25px !important; } .mr30 { margin-right:30px !important; } .mr35 { margin-right:35px !important; } .mr40 { margin-right:40px !important; } .mr45 { margin-right:45px !important; } .mr50 { margin-right:50px !important; } .ml10 { margin-left:10px !important; } .ml15 { margin-left:15px !important; } .ml20 { margin-left:20px !important; } .ml25 { margin-left:25px !important; } .ml30 { margin-left:30px !important; } .pt5 { padding-top:5px !important; } .pt8 { padding-top:8px !important; } .pt10 { padding-top:10px !important; } .pt15 { padding-top:15px !important; } .pt20 { padding-top:20px !important; } .pt25 { padding-top:25px !important; } .pt30 { padding-top:30px !important; } .pt35 { padding-top:35px !important; } .pt40 { padding-top:40px !important; } .pt45 { padding-top:45px !important; } .pt50 { padding-top:50px !important; } .pb5 { padding-bottom:5px !important; } .pb8 { padding-bottom:8px !important; } .pb10 { padding-bottom:10px !important; } .pb15 { padding-bottom:15px !important; } .pb20 { padding-bottom:20px !important; } .pb25 { padding-bottom:25px !important; } .pb30 { padding-bottom:30px !important; } .pb35 { padding-bottom:35px !important; } .pb40 { padding-bottom:40px !important; } .pb45 { padding-bottom:45px !important; } .pb50 { padding-bottom:50px !important; } /* text-align */ .txt_left{text-align:left !important;} .txt_right{text-align:right !important;} .txt_center{text-align:center !important;} .mb_right{text-align:right !important;} .dib{display:inline-block !important} .pos_rel{position:relative} .col_red{color:#ff0000 !important} .col_orang{color:#f45708 !important} .col_gray{color:#888 !important} .col_gray2{color:#555 !important} .col_blue{color:#1d55d4 !important} .col_blue2{color:#4492e2 !important} .col_black{color:#222 !important} .linH1{line-height:1.6} .ftw400{font-weight:400} .ftw500{font-weight:500} .fon18{font-size:18px} .fon16{font-size:16px} h1.title{position:relative;margin-bottom:40px;padding-bottom:55px;font-size:46px;color:#222;text-align:center;line-height:1} h1.title::before{position:absolute;bottom:0;left:50%;width:0;height:30px;content:'';/* border-left:1px solid #222; */} h2.title{position:relative;margin:60px 0 20px;padding-left:25px;font-size:24px;font-weight:500;line-height:1.2} h2.title::before{position:absolute;top:0;left:0;width:0;height:32px;content:'';border-left:2px solid #ff6f18;} input[type="text"],input[type="password"],input[type="search"],input[type="tel"],input[type="email"]{margin:1px 0;padding:5px 10px;height:40px;font-size:14px;background:#fff;border:1px solid #e0e0e0;border-radius:0} textarea{margin:1px 0;padding:5px 3px 4px 3px;width:100%;border:1px solid #cdcdcd;border-radius:0} input[type="file"]{margin:1px 0;height:40px;font-size:14px;background:none;} /*input[type="text"]:hover,input[type="text"]:focus,input[type="password"]:hover,input[type="password"]:focus{background:#f1f9ff;}*/ input[type="submit"]{cursor:pointer;} .select{margin:1px 0;padding:0 30px 0 10px;height:40px;font-size:14px;cursor:pointer;outline:none;-webkit-appearance: none;-moz-appearance: none; appearance: none;-ms-appearance: none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:#fff url('../img/ic_select_arrow.png') no-repeat right 12px center;border:1px solid #e0e0e0;} .select::-ms-expand{display: none;} input::-ms-clear{display:none} input:-ms-input-placeholder {color: #999;} input::-webkit-input-placeholder {color: #999;} input::-moz-placeholder {color: #999;} input::-moz-placeholder {color: #999;} textarea::-ms-clear{display:none} textarea:-ms-input-placeholder {color: #999;} textarea::-webkit-input-placeholder {color: #999;} textarea::-moz-placeholder {color: #999;} textarea::-moz-placeholder {color: #999;} input:disabled, select:disabled{background-color:#f3f3f3} .btnList{margin:35px 0;text-align:center} .btnList::after{display:block;clear:both;content:''} .btnList2{margin:35px 0;} .btnList2::after{display:block;clear:both;content:''} .btnList2 .btn{float:right} .btnList2 .txt{float:left;line-height:1.8} .btnList3{margin:20px 0;text-align:center} /* 일반용 버튼 */ .btnBc{display:inline-block;margin:1px;vertical-align:middle;} .btnBc a, .btnBc button, .btnBc input{position:relative; margin:0; display:-moz-inline-stack; display:block;padding:0 20px;min-width:157px;width:100%;font-size:16px;color:#fff;line-height:50px;text-align:center;text-decoration:none;background-color:#222;cursor:pointer;transition: all 0.2s;-webkit-transition: all 0.2s;border-radius:0;border:1px solid #222} .btnBc a:hover, .btnBc button:hover, .btnBc input:hover{color:#222;background-color:#fff;border:1px solid #222} .btnBc.orang a, .btnBc.orang button, .btnBc.orang input{background-color:#ff6f18;border:1px solid #ff6f18} .btnBc.orang a:hover, .btnBc.orang button:hover, .btnBc.orang input:hover{color:#ff6f18;background-color:#fff;} .btnBc.gray a, .btnBc.gray button, .btnBc.gray input{background-color:#9098a5} .btnBc.blue a, .btnBc.blue button, .btnBc.blue input{background-color:#1572d2} .btnBc.white a, .btnBc.white button, .btnBc.white input{color:#222;background-color:#fff;border:1px solid #535353} .btnBc.white a:hover, .btnBc.white button:hover, .btnBc.white input:hover{color:#fff;background-color:#333;border:1px solid #333} .btnBc.w a, .btnBc.w button, .btnBc.w input{width:200px} .btnBc.w2 a, .btnBc.w2 button, .btnBc.w2 input{width:150px} .btnBc.big a, .btnBc.big button, .btnBc.big input{line-height:59px;} .btnBc.sm a, .btnBc.sm button, .btnBc.sm input{padding:0 20px;min-width:70px;font-size:15px;line-height:40px;font-weight:normal} .btnBc.ssm a, .btnBc.ssm button, .btnBc.ssm input{padding:0 15px;min-width:60px;font-size:14px;color:#555;font-weight:400;line-height:35px;background:#fff;border:1px solid #b9b9b9;border-radius:2px} .btnBc.ssm2 a, .btnBc.ssm2 button, .btnBc.ssm2 input{padding:0 10px;min-width:70px;font-size:14px;font-weight:400;line-height:36px;border-radius:3px} .btnBc.min a, .btnBc.min button, .btnBc.min input{min-width:190px} .btnBc.mid a, .btnBc.mid button, .btnBc.mid input{line-height:40px} .btnBc.down a, .btnBc.down button, .btnBc.down input{padding-left:50px;background-image:url('../img/ic_down2.png');background-repeat:no-repeat;background-position:20px center} .btnBc.down a:hover, .btnBc.down button:hover, .btnBc.down input:hover{background-image:url('../img/ic_down.png')} .btnBc.white.down a, .btnBc.white.down button, .btnBc.white.down input{background-image:url('../img/ic_down.png')} .btnBc.white.down a:hover, .btnBc.white.down button:hover, .btnBc.white.down input{background-image:url('../img/ic_down2.png')} .btnBc.link a, .btnBc.link button, .btnBc.link input{padding:0 60px 0 40px;background-image:url('../img/ic_blank.png');background-repeat:no-repeat;background-position:right 30px center} .btnBc.link a:hover, .btnBc.link button:hover, .btnBc.link input:hover{background-image:url('../img/ic_blank2.png')} .li_dot > li{position:relative;margin-bottom:10px;padding-left:10px;color:#555;} .li_dot > li::before{position:absolute;top:8px;left:0;width:3px;height:3px;content:'';background:#3b3b3b} .li_dot > li li{margin-bottom:5px} .h_li{margin-left:28px} .h_li > li{position:relative;margin-bottom:8px;padding-left:10px;color:#555;line-height:1.6} .h_li > li::before{position:absolute;top:10px;left:0;width:3px;height:3px;content:'';background:#3b3b3b} .h_li > li ol{margin-top:5px} .h_li > li li{margin-bottom:10px;padding-left:0} .h_p{padding-left:30px;font-size:16px;color:#555;line-height:1.6} .tabMenu{margin-bottom:50px} .tabMenu ul{border:1px solid #d4d4d4;border-width:1px 0 0 1px} .tabMenu ul::after{display:block;clear:both;content:''} .tabMenu ul li{float:left;text-align:center;overflow:hidden} .tabMenu ul li a{position:relative;display:block;margin-top:-1px;margin-left:-1px;padding:0 5px 4px;font-size:20px;line-height:56px;border:1px solid #d4d4d4;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:1} .tabMenu ul li a span{display:inline-block;line-height:1.2;vertical-align:middle;word-break:break-all;} .tabMenu ul li.on a, .tabMenu ul li a:hover{text-decoration:none;color:#fff;font-weight:500;background:#34394c;border-color:#34394c;z-index:2} .tabMenu ul.li2 li{width:50%} .tabMenu ul.li3 li{width:33.33%} .tabMenu ul.li4 li{width:25%} .tabMenu ul.li5 li{width:20%} .tabMenu ul.li6 li{width:16.66%} .tabMenu ul.li7 li{width:14.285%} .tabMenu2{margin-bottom:50px} .tabMenu2 .selet_txt{display:none} .tabMenu2 ul{background:#f3f4f8;} .tabMenu2 ul::after{display:block;clear:both;content:''} .tabMenu2 ul li{position:relative;float:left;text-align:center;overflow:hidden} .tabMenu2 ul li::before{position:absolute;top:50%;right:0;margin-top:-7px;width:0;height:15px;content:'';border-left:1px dotted #adadad} .tabMenu2 ul li:last-child::before{display:none} .tabMenu2 ul li a{position:relative;display:block;/*padding:0 29px;*/padding:0 26px;font-size:17px;color:#333;line-height:66px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;z-index:1} .tabMenu2 ul li.on a{color:#fff;font-weight:500;background:#5266b1} .td_right tbody td{text-align:right} .td_left tbody td{text-align:left} .th_left tbody th{text-align:left} .t_typelA{font-size:16px;line-height:1.6;border-top:2px solid #222;border-bottom:1px solid #222} .t_typelA tr{text-align:center;} .t_typelA > thead > tr > th{padding:20px 10px;line-height:18px;color:#252525;font-weight:500;word-break:keep-all;background:#fafafa;border-bottom:1px solid #e9e9e9;border-right:1px solid #e9e9e9} .t_typelA > tbody > tr > th{padding:20px 10px;color:#252525;font-weight:400;word-break:break-all;background:#fbf4f0;border-top:1px solid #e9e9e9;} .t_typelA > tbody > tr > td{padding:20px 10px;color:#555;background:#fff;border-top:1px solid #e9e9e9;border-right:1px solid #e9e9e9} .t_typelA > thead > tr > th:last-child, .t_typelA > tbody > tr > td:last-child{border-right:0px;} .t_typelA > tfoot > tr > th{padding:20px 10px;color:#252525;font-weight:400;background:#fbf4f0;border-top:1px solid #e9e9e9} .t_typelA > tfoot > tr > td{padding:20px 10px;color:#555;background:#fbf4f0;border-top:1px solid #e9e9e9} .tbOpen{position:relative} .tbOpen > tbody > .openTr > td{padding:0;border-top:0} .tbOpen > tbody > tr > td .btn{position:relative;float:right;margin:-20px -10px 0 30px} .tbOpen > tbody > tr > td .btnOpen{position:absolute;top:0;right:0;width:60px;height:59px;overflow:hidden;text-indent:-999px} .tbOpen > tbody > tr > td .btnOpen:hover{background-color:#f5f5f5} .tbOpen > tbody > tr > td .btnOpen:hover::after{border-color:#4d4d4d} .tbOpen > tbody > tr > td .btnOpen::after{position:absolute;top:50%;left:50%;margin:-10px 0 0 -7px;width:15px;height:15px;content:'';border:1px solid #c3c3c3;border-width:0 0 1px 1px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .tbOpen > tbody > tr > td .btnOpen.on{background:#ececec} .tbOpen > tbody > tr > td .btnOpen.on::after{margin-top:-6px;border-color:#4d4d4d;transform:rotate(135deg);-webkit-transform:rotate(135deg)} .tbOpen > tbody > tr > td .openCon{display:none;padding:55px 40px 30px;background:#ececec} table .up{color:#1d55d4 !important} table .down{color:#ff0000 !important} .t_typelB{font-size:15px;border-top:2px solid #222;border-bottom:1px solid #222} .t_typelB tr{text-align:center;} .t_typelB > thead > tr > th{padding:20px 10px;line-height:18px;color:#fff;font-weight:500;word-break:keep-all;background:#3c3c3c;border-bottom:1px solid #e9e9e9;border-left:1px solid #2f2f2f} .t_typelB > tbody > tr > th{padding:20px 10px;color:#222;font-weight:400;word-break:break-all;background:#fafafa;border-top:1px solid #e9e9e9;border-left:1px solid #e9e9e9} .t_typelB > tbody > tr > td{padding:20px 10px;font-size:16px;color:#555;background:#fff;border-top:1px solid #e9e9e9;border-left:1px solid #e9e9e9} .t_typelB > tfoot > tr > th{padding:20px 10px;color:#252525;font-weight:400;background:#f5ece8;border-top:1px solid #e9e9e9;border-left:1px solid #e9e9e9} .t_typelB > tfoot > tr > td{padding:20px 10px;color:#555;background:#fff;border-top:1px solid #e9e9e9;border-left:1px solid #e9e9e9} .boadSearchA{margin-bottom:30px;padding:27px 20px;text-align:center;background:#f9f9f9;border:1px solid #e0e0e0} .boadSearchA .yearselect{display:inline-block;margin-right:50px} .boadSearchA .select{margin:0 5px 0 10px;width:120px} .boadSearchA .inpTxt{width:30%} .boadSearchA span.name {display:none;} .boadSearchA .btn{width:87px;height:40px;font-size:15px;color:#fff;font-weight:500;background:#333;border:0} .bbs_top{margin-bottom:10px;text-align:right;color:#555} .bbs_top::after{display:block;clear:both;content:''} .bbs_top .listNum b{color:#e15a00} .listTypeA{table-layout: fixed;font-size:16px;border-top:2px solid #222;border-bottom:1px solid #222;} .listTypeA tr{text-align:center;} .listTypeA thead th{padding:25px 5px;color:#222;font-weight:500;background:#fff;border-bottom:1px solid #b1b1b1} .listTypeA tbody th,.listTypeA tbody td{border-top:1px solid #e9e9e9} .listTypeA tbody th{padding:25px 5px;line-height:20px;} .listTypeA tbody td{padding:25px 5px;color:#636363;word-break:keep-all;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .listTypeA tbody td .noTxt{display:inline-block;width:38px;color:#fff;line-height:20px;background:#f8941d} .listTypeA tbody td:first-child{border-left:0} .listTypeA tbody td.subject{text-align:left;font-weight:400} .listTypeA tbody td .txt{display:block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .listTypeA tbody td .state{display:inline-block;width:75px;font-size:14px;color:#fff;line-height:34px;text-align:center;border-radius:2px} .listTypeA tbody td .state.end{background:#aaa} .listTypeA tbody td .state.ing{background:#f45708} .listTypeA tbody td .divis{display:inline-block;width:61px;font-size:14px;color:#fff;line-height:32px;text-align:center;background:#fff;border:1px solid transparent;border-radius:2px} .listTypeA tbody td .divis.seminar{color:#2c8b58;border-color:#2c8b58} .listTypeA tbody td .divis.edu{color:#3378be;border-color:#3378be} .listTypeA tbody tr.notice_bg td{background:#fff9f6} .listTypeB{padding-top:33px;overflow:hidden;border:1px solid #222;border-width:2px 0 1px} .listTypeB ul li .box, .listTypeB ul li .box::after, .listTypeB ul li .box .photo img{transition:all 0.4s ease;-webkit-transition:all 0.4s ease;} .listTypeB ul{margin:0 -15px} .listTypeB ul::after{display:block;clear:both;content:''} .listTypeB ul li{float:left;margin-bottom:37px;padding:0 15px;width:25%} .listTypeB ul li:nth-child(5){clear:left} .listTypeB ul li .box{position:relative;padding-bottom:20px;text-align:center;background:#fff;border:1px solid #d7d7d7} .listTypeB ul li .box::after{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;content:'';border:2px solid #f45708;box-sizing:border-box} .listTypeB ul li .box .photo{position:relative;display:block;margin-bottom:25px;padding-top:65%;overflow:hidden;text-align:center} .listTypeB ul li .box .photo img{position:absolute;top:50%;left:50%;height:100%;max-width:none;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%)} .listTypeB ul li .box .tit{display:block;margin-bottom:25px;padding:0 10px;height:52px;font-size:20px;color:#252525;overflow:hidden;line-height:1.3; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;} .listTypeB ul li .box .infor{display:block;font-size:13px;color:#888;line-height:1} .listTypeB ul li .box .infor span{position:relative;display:inline-block;padding:0 10px} .listTypeB ul li .box .infor .data::after{position:absolute;top:50%;right:-3px;margin-top:-5px;width:1px;height:11px;content:'';background:#d7d7d7} .listTypeB ul li a{display:block} .listTypeB ul li a:hover{text-decoration:none} .listTypeB ul li a:hover .box, .listTypeB ul li a:focus .box{background:#fff;border:1px solid #f45708} .listTypeB ul li a:hover .box::after, .listTypeB ul li a:focus .box::after{opacity:1} .listTypeB ul li a:hover .box .photo img{transform:translate(-50%, -50%) scale(1.1);-webkit-transform:translate(-50%, -50%) scale(1.1)} .listTypeC{padding-top:33px;overflow:hidden;border:1px solid #222;border-width:2px 0 1px} .listTypeC ul li .box, .listTypeC ul li .box::after, .listTypeC ul li .box .photo img{transition:all 0.4s ease;-webkit-transition:all 0.4s ease;} .listTypeC > ul{margin:0 -12px} .listTypeC ul::after{display:block;clear:both;content:''} .listTypeC > ul > li{float:left;margin-bottom:24px;padding:0 12px;width:50%} .listTypeC > ul > li:nth-child(2n+1){clear:left} .listTypeC ul li .box{position:relative;padding:45px 30px 35px 200px;min-height:270px;background:#fff;border:1px solid #d7d7d7} .listTypeC ul li .box::after{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;content:'';border:1px solid #f45708;box-sizing:border-box;z-index:1} .listTypeC ul li .box .photo{position:absolute;top:35px;left:30px;padding:1px 4px 6px 1px;width:144px;background:url('../img/ebook_bg.png') no-repeat;z-index:2} .listTypeC ul li .box .tit{position:relative;display:block;margin-bottom:20px;font-size:20px;color:#252525;font-weight:500;line-height:1.2;z-index:2} .listTypeC ul li .box ul{position:relative;z-index:2} .listTypeC ul li .box ul li{position:relative;margin-bottom:6px;padding-left:8px;color:#666} .listTypeC ul li .box ul li::before{position:absolute;top:8px;left:0;width:2px;height:2px;content:'';background:#4492e2} .listTypeC ul li .box ul li span{color:#4492e2} .listTypeC ul li a{display:block} .listTypeC ul li a:hover{text-decoration:none} .listTypeC ul li a:hover .box, .listTypeC ul li a:focus .box{background:#fff;border:1px solid #f45708} .listTypeC ul li a:hover .box::after, .listTypeC ul li a:focus .box::after{opacity:1} .listTypeD{padding:38px 0 14px;border-top:2px solid #222;border-bottom:1px solid #222} .listTypeD > ul > li{position:relative;margin-bottom:24px;padding:20px 40px 20px 300px;min-height:220px;border:1px solid #d7d7d7} .listTypeD > ul > li .img{position:absolute;top:20px;left:30px;} .listTypeD > ul > li dl dt{margin-bottom:20px;padding-bottom:15px;font-size:25px;font-weight:600;line-height:1;border-bottom:1px solid #efefef} .listTypeD > ul > li dl dt span{font-size:18px;font-weight:400} .listTypeD > ul > li dl dd::after{display:block;clear:both;content:''} .listTypeD > ul > li dl dd ul{float:left;width:40%} .listTypeD > ul > li dl dd ul li{position:relative;margin-bottom:12px;padding-left:50px;min-height:24px;color:#666;line-height:1.6} .listTypeD > ul > li dl dd ul li .name{position:absolute;top:0;left:0;padding-left:8px;color:#f45708;font-weight:500} .listTypeD > ul > li dl dd ul li .name::before{position:absolute;top:10px;left:0;width:2px;height:2px;content:'';background:#f45708} .listTypeD > ul > li dl dd ul:nth-child(2){padding-left:17px;width:60%;min-height:115px;border-left:1px dotted #bfbfbf} .listTypeD > ul > li dl dd ul:nth-child(2) li{padding-left:80px} .listTypeD > ul > li dl dd .btn{position:absolute;top:17px;right:40px} .listTypeD > ul > li dl dd .btn a{display:block;padding:0 15px 0 32px;font-size:14px;color:#fff;line-height:34px;background:#333 url('../img/ic_blank.png') no-repeat 12px center;background-size:12px;border-radius:2px;;border:1px solid #333;transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} .listTypeD > ul > li dl dd .btn a:hover{color:#333;text-decoration:none;background-color:#fff;background-image:url('../img/ic_blank2.png');} /* 페이지표시 */ .page{text-align:center;margin:30px 0;} .page a{position:relative;display:inline-block;margin:2px 1px;width:43px;height:43px;font-size:14px;color:#666;text-align:center;vertical-align:middle;line-height:41px;text-decoration:none;letter-spacing:-1px;background:#fff;border:1px solid #ddd} .page a.on{color:#fff;background:#333;border:1px solid #333;z-index:2} .page a img{vertical-align:middle;} .viewTypeA{border-top:2px solid #222;border-bottom:1px solid #222} .viewTypeA h2{padding:25px 10px;font-size:24px;text-align:center;font-weight:500;border-bottom:1px solid #b1b1b1} .viewTypeA h2 .divis{display:inline-block;margin-right:5px;width:61px;font-size:14px;font-weight:400;line-height:30px;vertical-align:top;text-align:center;background:#fff;border:1px solid transparent;border-radius:2px} .viewTypeA h2 .divis.seminar{color:#2c8b58;border-color:#2c8b58} .viewTypeA h2 .divis.edu{color:#3378be;border-color:#3378be} .viewTypeA .infor{position:relative;padding:0 30px;color:#555;border-bottom:1px solid #e9e9e9} .viewTypeA .infor::after{display:block;clear:both;content:''} .viewTypeA .infor li{position:relative;float:left;padding:25px 55px 25px 0;} .viewTypeA .infor li .name{position:relative;display:inline-block;margin-right:10px;padding-left:10px;color:#222;font-weight:500} .viewTypeA .infor li .name::before{position:absolute;top:50%;left:0;width:2px;height:2px;content:'';background:#333;transform:translateY(-50%);-webkit-transform:translateY(-50%)} .viewTypeA .infor li a{display:inline-block;margin-right:10px;color:#555;} .viewTypeA .infor li.hit{position:absolute;top:0;right:0} .viewTypeA .infor.type1{background:#f9f9f9} .viewTypeA .infor.type1 li{padding-left:80px} .viewTypeA .infor.type1 li .name{position:absolute;top:24px;left:0;} /*.viewTypeA .content{padding:35px 15px;color:#666;line-height:1.8}*/ .viewTypeA .content{padding:35px 15px;line-height:1.8} .topNotic{position:relative;margin-bottom:35px;padding:45px 60px 45px 170px;background:#f9f9f9 url('../img/ic_notice.png') no-repeat 45px 28px;border:1px solid #e4e4e4} .topNotic::after{display:block;clear:both;content:''} .topNotic p{float:left;font-size:18px;line-height:1.6} .topNotic p span{color:#555} .topNotic .btnBc{float:right} .topNotic.ic1{background-image:url('../img/ic_notice2.png')} .s3_1_1_con .top{position:relative; margin-bottom: 90px;} .s3_1_1_con .top:after { content: ''; display: block; width: 200px; height: 3px; background: #f45708; position: absolute; bottom:-30px; left: 0px;} /* .s3_1_1_con .top:after { content: ''; display: block; width: 150px; height: 150px; background: url('/web/img/s2_1_img_logo.png') no-repeat; background-size: cover; opacity: .05; position: absolute; top: -50px; left: -40px;} */ .s3_1_1_con .top .txt1{margin-bottom:0px;font-size:35px;line-height:1.4;font-weight:500;} .s3_1_1_con .bottom{position:relative; display: flex; gap: 100px;} .s3_1_1_con .bottom .profile { position: relative; display: flex; width: 300px; height: 390px; align-items: flex-end; justify-content: center; border-radius: 20px;} /* .s3_1_1_con .bottom .profile:after { content: ''; display: block; width: 260px; height: 260px; background: url('/web/img/s2_1_img_logo.png') no-repeat; background-size: cover; opacity: .05; position: absolute; bottom: 40px; right: -30px; z-index: -1} .s3_1_1_con .bottom .profile:after { content: ''; display: block; width: 100%; height: 100%; background: #ebf2f8; position: absolute; top: 20px; left: 20px; z-index: -1; border-radius: 20px;} */ .s3_1_1_con .bottom .profile img{width:100%; background-size: cover; border-radius: 20px;} .s3_1_1_con .bottom p{width: calc(100% - 400px); font-size:18px;color:#555;line-height:1.6;} .s3_1_1_con .bottom p > b {display: block; width: 100%; font-size: 22px; text-align: right; color: #000; margin-top:60px;} .s3_1_4_con{position:relative;margin-bottom:100px;text-align:center} .s3_1_4_con::after{position:absolute;top:0;left:50%;width:0;height:425px;content:'';border-left:1px solid #d8d8d8;z-index:1} .s3_1_4_con ol, .s3_1_4_con ol li{position:relative;z-index:2} .s3_1_4_con > ol > li{position:relative;margin-bottom:20px;z-index:2} .s3_1_4_con > ol > li div{display:inline-block;font-size:24px;color:#fff;font-weight:500;line-height:1.2} .s3_1_4_con > ol > li div span{display:block;margin-top:2px;font-size:14px;font-weight:400} .s3_1_4_con > ol > li .ong1{padding-top:75px;width:254px;height:203px;background:url('../img/s3_1_4_bg.png') no-repeat center top;background-size:100%} .s3_1_4_con > ol > li .ong2{padding-top:55px;width:170px;height:170px;background:#313b60;border-radius:50%} .s3_1_4_con > ol > li .ong1 span{color:#ffb487} .s3_1_4_con > ol > li .ong2 span{color:#798099} .s3_1_4_con > ol > li > ol::after{position:absolute;top:32px;left:50%;width:50%;height:0;margin-left:-25%;content:'';border-top:1px solid #d8d8d8;z-index:1} .s3_1_4_con > ol > li > ol > li{display:inline-block;width:48%;vertical-align:top} .s3_1_4_con > ol > li > ol > li::after{position:absolute;top:0;left:50%;width:0;height:84px;content:'';border-left:1px solid #d8d8d8;z-index:1} .s3_1_4_con > ol > li > ol > li .ong3{position:relative;display:inline-block;margin-bottom:20px;width:342px;font-size:20px;color:#fff;font-weight:500;line-height:64px;background:#406dbf;z-index:2} .s3_1_4_con > ol > li > ol > li .ong3 a{display:block;color:#fff;} .s3_1_4_con > ol > li > ol > li > ol{display:inline-block} .s3_1_4_con > ol > li > ol > li > ol::after{position:absolute;top:0;left:50%;width:483px;height:0;margin-left:-241px;content:'';border-top:1px solid #d8d8d8;z-index:1} .s3_1_4_con > ol > li > ol > li > ol > li{display:inline-block;padding:20px 7px 0;vertical-align:top} .s3_1_4_con > ol > li > ol > li > ol > li::after{position:absolute;top:0;left:50%;width:0;height:100%;content:'';border-left:1px solid #d8d8d8;z-index:1} .s3_1_4_con > ol > li > ol > li > ol > li > a{display:block;} .s3_1_4_con > ol > li > ol > li > ol > li span{position:relative;display:block;padding-top:30px;width:104px;height:108px;font-size:17px;color:#32589e;background:#fff;border:1px solid #7b9acd;z-index:2} .s3_1_4_con > ol > li > ol > li > ol > li > ol li{padding-top:17px} .s3_1_4_con > ol > li > ol > li > ol > li > ol li span{display:block;padding-top:20px;width:104px;height:84px;font-size:16px;color:#353535;background:#fff;border:1px solid #aeaeae} .s3_1_4_con > ol > li > ol > li > ol.last::after{width:75.5%;margin-left:-37.5%} .s3_1_4_con > ol > li > ol > li.three > ol.last::after{width:67.5% !important;margin-left:-33.5%!important;} .s3_1_6_con .locTxt{margin:35px 0 65px;padding:30px;text-align:center;background:#f7f7f7} .s3_1_6_con .locTxt dt{display:inline-block;margin-right:10px;padding-left:34px;font-size:20px;color:#f45708;font-weight:500;line-height:32px;background:url('../img/ic_locat.png') no-repeat left center;} .s3_1_6_con .locTxt dd{display:inline-block;font-size:18px} .s3_1_6_con .traffic::after{display:block;clear:both;content:''} .s3_1_6_con .traffic li{position:relative;float:left;padding:0 20px;width:50%;text-align:center} .s3_1_6_con .traffic li::after{position:absolute;top:50%;left:0;margin-top:-45px;width:0;height:90px;content:'';border-left:1px solid #eaeaea} .s3_1_6_con .traffic li:first-child::after{display:none} .s3_1_6_con .traffic li dl{display:inline-block;padding:25px 0 25px 110px;text-align:left;background-position:left center;background-repeat:no-repeat} .s3_1_6_con .traffic li dl dt{margin-bottom:10px;font-size:20px;font-weight:500} .s3_1_6_con .traffic li dl dd{font-size:16px;color:#555} .s3_1_6_con .traffic li dl.ic1{background-image:url('../img/ic_traf1.png') } .s3_1_6_con .traffic li dl.ic2{background-image:url('../img/ic_traf2.png') } .s3_1_6_con .root_daum_roughmap{width:100% !important} .s3_1_6_con .root_daum_roughmap .wrap_controllers{display:none} .s3_1_3_con{overflow:hidden} .s3_1_3_con .top{display:table;margin-bottom:30px;width:100%;height:648px;background:url('../img/s3_1_3_bg.jpg') no-repeat center center;background-size:cover} .s3_1_3_con .top .box{display:table-cell;vertical-align:middle;text-align:center} .s3_1_3_con .top .box .txt1{position:relative;display:inline-block;margin-right:20px;padding-left:30px;width:270px;font-family: 'Titillium Web';font-size:54px;color:#fff;font-weight:600;letter-spacing:3px;text-align: left;line-height:1} .s3_1_3_con .top .box .txt1 span{color:#ff6f18} .s3_1_3_con .top .box .txt1::before{position:absolute;top:10px;left:0;width:0;height:87%;content:'';border-left:1px solid #fff;opacity:0.5;z-index:1} .s3_1_3_con .top .box .txt1::after{position:absolute;top:10px;left:0;width:0;height:46%;content:'';border-left:1px solid #ff6f18;z-index:2} .s3_1_3_con .top .box .txt2{display:inline-block;font-size:18px;color:#fff;text-align:left;font-weight:300;line-height:1.4} .s3_1_3_con .bottom{margin:0 -3%} .s3_1_3_con .bottom::after{display:block;clear:both;content:''} .s3_1_3_con .bottom dl{position:relative;float:left;margin:0 3%;padding:55px 0 20px 18%;width:calc(50% - 6%);min-height:280px;border-bottom:1px solid #e3e3e3} .s3_1_3_con .bottom dl:nth-child(2n+1){clear:left} .s3_1_3_con .bottom dl dt{position:absolute;top:50px;left:0;padding:0 0 85px 25px;width:40%;font-size:24px;font-weight:500;line-height:1.2;word-break:break-all;background-repeat:no-repeat;background-position:22px bottom} .s3_1_3_con .bottom dl dt::before{position:absolute;top:0;left:0;width:0;height:55px;content:'';border-left:2px solid #ff6f18} .s3_1_3_con .bottom dl:last-child{border-bottom:0} .s3_1_3_con .bottom dl dd ul li{position:relative;margin-bottom:10px;padding-left:10px;color:#555} .s3_1_3_con .bottom dl dd ul li::before{position:absolute;top:7px;left:0;width:2px;height:2px;content:'';background:#3b3b3b} .s3_1_3_con .bottom dl.ic1 dt{background-image:url('../img/s3_1_3_ic1.png') } .s3_1_3_con .bottom dl.ic2 dt{background-image:url('../img/s3_1_3_ic2.png') } .s3_1_3_con .bottom dl.ic3 dt{background-image:url('../img/s3_1_3_ic3.png') } .s3_1_3_con .bottom dl.ic4 dt{background-image:url('../img/s3_1_3_ic4.png') } .s3_1_3_con .bottom dl.ic5 dt{background-image:url('../img/s3_1_3_ic5.png') } .s3_1_3_con .bottom dl.ic6 dt{background-image:url('../img/s3_1_3_ic6.png') } .s3_1_3_con .bottom dl.ic7 dt{background-image:url('../img/s3_1_3_ic7.png') } .s4_top{position:relative;margin-bottom:95px;padding:40px 90px 80px;background:url('../img/s4_bg.jpg') no-repeat;background-size:cover} .s4_top .txt{display:block;margin-bottom:30px;font-size:12px;color:#8b7a71;font-weight:500;letter-spacing:1px} .s4_top dl dt{margin-bottom:15px;font-size:30px;font-weight:500;line-height:1} .s4_top dl dt span{color:#f45708} .s4_top dl dd{font-size:16px;line-height:1.4} .s4_top .btnBc{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);-webkit-transform:translateX(-50%)} .s4_con::after{display:block;clear:both;content:''} .s4_con dl{position:relative;float:left;margin-bottom:50px;padding-right:20px;width:50%;} .s4_con dl:nth-child(2n+1){clear:left} .s4_con dl.row{float:none;width:100%} .s4_con dl dt{position:relative;margin-bottom:15px;padding-left:27px;font-size:24px;font-weight:500;line-height:1.2;} .s4_con dl dt::before{position:absolute;top:0;left:0;width:0;height:100%;content:'';border-left:2px solid #ff6f18} .s4_con dl dd{padding-left:27px;color:#555;line-height:1.4} .s4_step{margin:0 auto;max-width:1235px} .s4_step::after{display:block;clear:both;content:''} .s4_step .con{float:left;padding:0 15px;width:25%;text-align:center} .s4_step .con2{width:50%} .s4_step .con .tit{display:block;margin-bottom:30px;padding:15px 0;font-size:18px;color:#222;font-weight:500;border:1px solid #646464;border-width:1px 0} .s4_step .con ul{position:relative} .s4_step .con ul li{position:relative;} .s4_step .con ul li::after{position:absolute;top:50%;left:-10%;margin-top:-15px;width:30px;height:20px;content:'';background:url('../img/ic_step_arrow.png') no-repeat center center;z-index:2} .s4_step .con ul li .box{position:relative;display:block;margin:0 auto;padding-top:50px;width:218px;height:218px;font-size:18px;background:#fff;border-radius:50%;border:1px solid #c7d1e0;z-index:1} .s4_step .con ul li .box span{display:block;margin:0 auto 15px;width:109px;font-size:15px;line-height:30px;color:#fff;font-weight:bold;background:#4f76c8;border-radius:15px} .s4_step .con1 ul{padding-top:260px} .s4_step .con1 ul li:nth-child(2){position:absolute;top:0;left:50%;transform:translate(-50%);-webkit-transform:translate(-50%)} .s4_step .con1 ul li:nth-child(2) .box{color:#fff;background:#3473ba;border-color:#3473ba} .s4_step .con1 ul li:nth-child(2) .box span{color:#3473ba;background:#fff} .s4_step .con2{background:#fafafa} .s4_step .con2 ul{padding-top:260px} .s4_step .con2 ul li{float:left;width:50%} .s4_step .con2 ul li:nth-child(2){position:absolute;top:0;left:0;} .s4_step .con2 ul li:nth-child(4){position:absolute;top:0;right:0;} .s4_step .con3 ul{padding-top:140px} .s4_step .con1 ul li:nth-child(1)::after{left:auto;right:-10%;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)} .s4_step .con1 ul li:nth-child(2)::after{left:50%;top:auto;bottom:-30px;margin-left:-15px;transform:rotate(-90deg);-webkit-transform:rotate(-90deg)} .s4_step .con2 ul li:nth-child(1)::after{left:auto;right:-5%;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)} .s4_step .con2 ul li:nth-child(3)::after{top:30%;left:100%;transform:rotate(135deg);-webkit-transform:rotate(135deg)} .s4_step .con2 ul li:nth-child(4)::after{left:-5%} .s4_step .con3 ul li:nth-child(1)::after{top:30%;transform:rotate(45deg);-webkit-transform:rotate(45deg)} .s3_1_2_con{position:relative;} .s3_1_2_con::after{position:absolute;top:0;left:50%;width:0;height:100%;content:'';border-left:1px solid #ebebeb;z-index:1} .s3_1_2_con dl{position:relative;margin-bottom:6%;padding-left:50%;min-height:480px;} .s3_1_2_con dl::after{position:absolute;top:0;left:50%;margin-left:-11px;width:23px;height:23px;content:'';background:#f45708;border:6px solid #fdebe1;border-radius:50%;box-sizing:border-box;z-index:2} .s3_1_2_con dl dt{position:absolute;top:-15px;left:0;padding-right:60px;width:50%;font-family: 'Titillium Web';font-size:48px;font-weight:700;text-align:right;line-height:1;} .s3_1_2_con dl dt .img{position:relative;margin-top:30px;padding-bottom:70px;z-index:3} .s3_1_2_con dl dt .img img{position:relative;z-index:3} .s3_1_2_con dl dt .img::before{position:absolute;bottom:0;left:0;font-family: 'Titillium Web';content:'HISTORY';font-size:120px;color:#f4f4f4;font-weight:700;z-index:2} .s3_1_2_con dl dd{position:relative;padding-left:40px;z-index:3} .s3_1_2_con dl dd ol li{position:relative;margin-bottom:20px;padding-left:77px;font-size:16px;color:#555} .s3_1_2_con dl dd ol li .month{position:absolute;top:0;left:0;color:#000;font-weight:600} .s5_con1{color:#555;line-height:1.6} .s5_con1 h2{margin:60px 0 10px;font-size:24px;color:#222;font-weight:500} .s5_con1 h2:first-of-type{margin-top:0} .s5_con1 h3{margin:40px 0 10px;font-size:18px;font-weight:500} .s5_con1 h2 + h3{margin-top:10px} .s5_con1 .box{margin-bottom:50px;padding:40px;background:#f9f9f9;border:1px solid #e0e0e0} .siteMap{overflow:hidden} .siteMap > ul{margin:0 -23px} .siteMap > ul::after{display:block;clear:both;content:''} .siteMap > ul > li{float:left;padding:0 23px;width:20%} .siteMap > ul > li > a{display:block;padding:20px;font-size:24px;font-weight:700;line-height:1;} .siteMap > ul > li > ul{border-top:2px solid #ff6f18;border-left:1px solid #e9e9e9} .siteMap > ul > li > ul > li > a{display:block;padding:16px 20px;font-size:16px} .siteMap > ul > li > ul > li > a:hover{color:#ff6f18;font-weight:500;text-decoration:none} .siteMap > ul > li > ul > li ul{padding:10px 30px;background:#f7f7f7} .siteMap > ul > li > ul > li ul li a{position:relative;display:block;padding:5px 8px;color:#555} .siteMap > ul > li > ul > li ul li a:hover{color:#222} .siteMap > ul > li > ul > li ul li a::after{position:absolute;top:13px;left:0;width:2px;height:2px;content:'';background:#3b3b3b} .searchCon{position:relative;margin-bottom:50px} .searchCon h2{margin-bottom:15px;font-size:24px;color:#222;font-weight:700} .searchCon .listNum{position:absolute;top:10px;right:0;color:#555} .searchCon .listNum b{color:#f45708} .searchCon .con{text-align:center;border-top:2px solid #222;border-bottom:1px solid #e9e9e9} .searchCon .con ul{text-align:left} .searchCon .con ul li{padding:30px 0;border-bottom:1px solid #e9e9e9} .searchCon .con ul li .tit{display:inline-block;margin:0 20px 20px 0;font-size:20px;color:#222;font-weight:500} .searchCon .con ul li .data{display:inline-block;font-size:15px;color:#888;font-weight:400} .searchCon .con ul li p{font-size:16px;color:#555;line-height:1.6;} .searchCon .con ul li a{color:#555;} .searchCon .con ul li:last-child{border-bottom:0} .searchCon .btnMore{display:block;margin-top:17px;text-align:right} .searchCon .btnMore a{position:relative;display:inline-block;padding:0 13px 0 30px;font-size:14px;line-height:34px;border:1px solid #5c5d5c;border-radius:3px;transition:all 0.2s ease;-webkit-transition:all 0.2s ease} .searchCon .btnMore a::before{position:absolute;top:50%;left:10px;width:11px;height:0;content:'';border-top:1px solid #333} .searchCon .btnMore a::after{position:absolute;top:50%;left:15px;margin-top:-5px;width:0;height:11px;content:'';border-left:1px solid #333} .searchCon .btnMore a:hover{color:#fff;text-decoration:none;background:#222} .searchCon .btnMore a:hover::before, .searchCon .btnMore a:hover::after{border-color:#fff} .searchCon .con .no{display:inline-block;margin:50px 0;padding:0 20px 0 50px;font-size:16px;color:#555;line-height:48px;background:url('../img/ic_no_file.png') no-repeat 18px center;border:1px solid #dbdbdb;border-radius:2px} /* ================================================================================ 반응형 서브 콘텐츠 ================================================================================ */ /* PC Device */ @media all and (min-width:1251px){ } /* TABLET Device */ @media all and (max-width:1250px){ .tabMenu{margin:0 -20px 50px} .tabMenu ul.li7 li{width:20%} .s3_1_1_con .bottom{padding-left:0} .s3_1_1_con .bottom h2{display:none} .s3_1_1_con .bottom p{padding-left:0;border-left:0} .tbOpen{table-layout:fixed} .tbOpen > tbody > tr {position:relative;} .tbOpen > tbody > tr > td{padding-bottom:60px} .tbOpen > tbody > tr > td .openCon{width:100%;overflow:hidden;overflow-x:auto} .tbOpen > tbody > tr > td .btn{position:absolute;left:0;margin:0;width:100%;height:50px} .tbOpen > tbody > tr > td .btnOpen{top:35px;right:auto;left:50%;margin-left:-65px;width:130px;height:50px} .tbOpen > tbody > tr > td .btnOpen::after{left:30px} .tbOpen > tbody > tr > td .btnOpen.on::after{margin-top:0} .tbOpen > tbody > tr > td .btnOpen::before{position:absolute;top:0;left:55px;content:'월별통계';color:#555;text-indent: 0;line-height:50px} .listTypeB ul li{width:50%} .listTypeB ul li:nth-child(5){clear:none} .listTypeC > ul{margin:0} .listTypeC > ul > li{float:none;padding:0;width:100%} .listTypeD > ul > li{padding-left:200px} .listTypeD > ul > li .img{width:150px} .listTypeD > ul > li dl dd ul{float:none;width:100%} .listTypeD > ul > li dl dd ul:nth-child(2){padding-left:0;width:100%;min-height:10px;border-left:0} .listTypeD > ul > li dl dd .btn{left:30px;top:150px;right:auto;} .s3_1_4_con > ol > li .ong2{margin-bottom:30px} .s3_1_4_con::after, .s3_1_4_con ::after{display:none} .s3_1_4_con > ol > li > ol > li .ong3{width:80%} .s3_1_3_con .top .box .txt1{margin-bottom:20px} .s3_1_3_con .bottom dl{padding-left:0} .s3_1_3_con .bottom dl dt{position:relative;top:0;margin-bottom:20px;padding-bottom:0;width:100%;background-position:right center;background-size:60px} .s4_step .con ul li .box{padding-top:30px;font-size:15px;width:160px;height:160px} .s4_step .con ul li .box span{margin-bottom:10px} .s4_step .con1 ul, .s4_step .con2 ul{padding-top:200px} .s4_step .con3 ul{padding-top:100px} .s4_step .con1 ul li:nth-child(1)::after{right:-25%} .s4_step .con2 ul li:nth-child(3)::after{left: 105%;} .s4_step .con3 ul li:nth-child(1)::after{left:-20%} .s4_step .con2 ul li:nth-child(1)::after{right:-10%} .s3_1_2_con dl{margin-bottom:80px;min-height:350px} .siteMap > ul > li{margin-bottom:30px;width:33.33%} .siteMap > ul > li:nth-child(4){clear:left} .boadSearchB .yearselect{margin-right:10px} .t_typelA > thead > tr > th, .t_typelA > tbody > tr > td{border-right:0px;} } /* pc Device */ @media all and (min-width:640px){ .tabMenu2 ul{display:block !important;} } @media all and (max-width:767px){ .s3_1_1_con .bottom { flex-direction: column; align-items: center; gap:60px;} .s3_1_1_con .bottom p { width: 100%;} } /* Mobile Device */ @media all and (max-width:640px){ body{font-size:12px;line-height:18px;} h1, h2, h3, h4, h5, h6, input, button, textarea, select, table{font-size:12px} .mt15 { margin-top:10px !important; } .mt20 { margin-top:10px !important; } .mt25 { margin-top:15px !important; } .mt30 { margin-top:20px !important; } .mt35 { margin-top:20px !important; } .mt40 { margin-top:25px !important; } .mt50 { margin-top:25px !important; } .mt60 { margin-top:30px !important; } .mt70 { margin-top:30px !important; } .mb15 { margin-bottom:10px !important; } .mb20 { margin-bottom:10px !important; } .mb25 { margin-bottom:15px !important; } .mb30 { margin-bottom:20px !important; } .mb35 { margin-bottom:20px !important; } .mb40 { margin-bottom:20px !important; } .mb45 { margin-bottom:25px !important; } .mb50 { margin-bottom:25px !important; } .mb60 { margin-bottom:30px !important; } .mb70 { margin-bottom:30px !important; } .mr15 { margin-right:10px !important; } .mr20 { margin-right:10px !important; } .mr25 { margin-right:15px !important; } .mr30 { margin-right:20px !important; } .mr35 { margin-right:20px !important; } .mr40 { margin-right:20px !important; } .mr45 { margin-right:25px !important; } .mr50 { margin-right:25px !important; } .ml15 { margin-left:10px !important; } .ml20 { margin-left:10px !important; } .pt15 { padding-top:10px !important; } .pt20 { padding-top:10px !important; } .pt25 { padding-top:15px !important; } .pt30 { padding-top:20px !important; } .pt35 { padding-top:20px !important; } .pt40 { padding-top:20px !important; } .pt45 { padding-top:25px !important; } .pt50 { padding-top:25px !important; } .pb15 { padding-bottom:10px !important; } .pb20 { padding-bottom:10px !important; } .pb25 { padding-bottom:15px !important; } .pb30 { padding-bottom:20px !important; } .pb35 { padding-bottom:20px !important; } .pb40 { padding-bottom:20px !important; } .pb45 { padding-bottom:25px !important; } .pb50 { padding-bottom:25px !important; } .mb_right{text-align:center !important} input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="email"]{padding:5px;height:35px;font-size:12px} .select{padding: 0 20px 0 5px;height:35px;font-size:12px;background-size:7px} .fon18{font-size:14px} .fon16{font-size:12px} h1.title{margin-bottom:20px;padding-bottom:30px;font-size:28px} h1.title::before{height:20px} h2.title{margin:30px 0 10px;padding-left:12px;font-size:18px;} h2.title::before{top:2px;height:17px} .tabMenu{margin:0 -10px 20px} .tabMenu ul li a{padding-bottom:2px;font-size:12px;line-height:30px} .tabMenu ul li a span{line-height:1} .tabMenu ul.li7 li{width:33.33%} .tabMenu2{position:relative;margin-bottom:10px} .tabMenu2 .selet_txt{position:relative;display:block;padding:0 10px;width:100%;height:35px;font-size:14px;text-align:left;border:1px solid #858585} .tabMenu2 .selet_txt::after{position:absolute;top:50%;right:10px;margin-top:-2px;width:9px;height:4px;content:'';background:url('../img/ic_select_arrow.png') no-repeat} .tabMenu2 .selet_txt.on{border:1px solid #111} .tabMenu2 .selet_txt.on::after{transform:rotate(180deg);-webkit-transform:rotate(180deg)} .tabMenu2 ul{display:none;position:absolute;top:35px;left:0;width:100%;z-index:20} .tabMenu2 ul li{float:none;width:100%;text-align:left;} .tabMenu2 ul li a{margin-left:0;padding:0 10px;font-size:13px;line-height:35px;background:#efefef;border-bottom:1px solid #e2e2e2} .btnBc a, .btnBc button, .btnBc input{padding:0 10px;min-width:90px;font-size:12px;line-height:30px} .btnBc.down a, .btnBc.down button, .btnBc.down input{padding-left:30px;background-position: 10px center;background-size:13px} .btnBc.link a, .btnBc.link button, .btnBc.link input{padding:0 30px 0 15px;background-position:right 10px center;background-size:10px} .btnList{margin:20px 0} .btnList2{margin:20px 0;text-align:center} .btnList2 .btn{float:none} .btnList2 .txt{float:none} .li_dot li{margin-bottom:5px} .li_dot li::before{top:8px;width:2px;height:2px} .h_li{margin-left:10px} .h_li li{margin-bottom:5px;padding-left:6px} .h_li li::before{top:8px;width:2px;height:2px} .h_li > li li{margin-bottom:5px} .h_p{padding-left:10px;font-size:12px} .t_typelA{font-size:12px;line-height:1.3} .t_typelA > thead > tr > th, .t_typelA > tbody > tr > th, .t_typelA > tbody > tr > td, .t_typelA > tfoot > tr > th, .t_typelA > tfoot > tr > td{padding:11px 5px} .t_typelB{font-size:12px} .t_typelB > thead > tr > th, .t_typelB > tbody > tr > th, .t_typelB > tbody > tr > td, .t_typelB > tfoot > tr > th, .t_typelB > tfoot > tr > td{padding:8px 5px} .t_typelB > tbody > tr > td{font-size:12px} .tbOpen{font-size:12px} .tbOpen > tbody > tr > td{padding-bottom:40px} .tbOpen > tbody > tr > td .btn{height:30px} .tbOpen > tbody > tr > td .btnOpen{top:24px;margin-left:-40px;width:80px;height:30px} .tbOpen > tbody > tr > td .btnOpen::after{left:15px;margin: -7px 0 0 -3px;width:8px;height:8px} .tbOpen > tbody > tr > td .btnOpen::before{left:30px;font-size:11px;line-height:30px;} .tbOpen > tbody > tr > td .btnOpen.on::after{margin-top:-2px} .tbOpen > tbody > tr > td .openCon{padding:15px} .tbOpen > tbody > tr > td .openCon table{width:800px} .tbOpen > tbody > tr > td .t_typelB{font-size:11px} .boadSearchA{margin-bottom:15px;padding:15px} .boadSearchA .select{margin:0;width:80px} .boadSearchA .inpTxt{width:calc(100% - 160px)} .boadSearchA .btn{width:70px;height:35px;font-size:12px} .boadSearchA .yearselect{display:block;margin-bottom:4px;text-align:left} .boadSearchA .yearselect label{margin-right:10px} .boadSearchA .yearselect .select{width:100px} .listTypeA thead th{padding:10px 5px;font-size:12px;line-height:1.2;word-break:break-all} .listTypeA tbody td{padding:10px 5px} .listTypeA.mb{display:block;} .listTypeA.mb tbody{display:block} .listTypeA.mb tr{position:relative;display:block;padding:10px 3px;text-align:left;border-bottom:1px solid #dfdfdf} .listTypeA.mb tr:last-child{border-bottom:0} .listTypeA.mb colgroup{display:none} .listTypeA.mb thead{display:none} .listTypeA.mb tbody td{position:relative;display:inline-block;padding:0 10px 0 0;font-size:12px;color:#888;border:0} .listTypeA.mb tbody td::after{position:absolute;top:50%;right:2px;margin-top:-5px;width:0;height:10px;content:'';border-right:1px solid #c3c3c3;} .listTypeA.mb tbody td.subject{display:block;font-size:14px} .listTypeA.mb tbody td.subject::after{display:none} .listTypeA.mb tbody td.subject a{display:block;line-height:30px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;} .listTypeA.mb tbody td:last-child::after{display:none} .listTypeA.mb tbody td img{height:17px} .listTypeA.mb tbody td.name, .listTypeA.mb tbody td.data, .listTypeA.mb tbody td.hit{} .listTypeA.mb tbody td.name::before{content:'작성자 '} .listTypeA.mb tbody td.data::before{content:'작성일 '} .listTypeA.mb tbody td.hit::before{content:'조회수 '} .listTypeA.mb tbody td.file{position:absolute;bottom:10px;right:0} .listTypeA.mb tbody td.file::after{display:none} .listTypeA.mb tbody tr:hover td{background:#fff} .listTypeA.mb tbody tr.edsm{padding-bottom:35px} .listTypeA.mb tbody td .state{width:45px;font-size:11px;line-height:20px} .listTypeA.mb tbody td .divis{width:45px;font-size:11px;line-height:20px} .listTypeA.mb tbody td.dis{position:absolute;bottom:13px;left:0} .listTypeA.mb tbody td.term{position:absolute;bottom:16px;left:60px} .listTypeA.mb tbody td.cond{position:absolute;bottom:14px;right:0} .listTypeB{padding-top:10px} .listTypeB ul{margin:0 -5px} .listTypeB ul li{margin-bottom:10px;padding:0 5px} .listTypeB ul li .box{padding-bottom:10px} .listTypeB ul li .box .photo{margin-bottom:10px} .listTypeB ul li .box .tit{margin-bottom:10px;padding:0 5px;height:35px;font-size:14px;} .listTypeB ul li .box .infor{font-size:12px} .listTypeB ul li .box .infor span{padding:0 5px} .listTypeC{padding-top:10px} .listTypeC > ul > li{margin-bottom:10px} .listTypeC ul li .box{padding: 15px 15px 15px 108px;min-height: 200px;} .listTypeC ul li .box .photo{top: 15px;left: 15px;padding: 1px 2px 4px 1px; width: 80px;background-size: 100%;} .listTypeC ul li .box .tit{margin-bottom: 10px;font-size: 14px;} .listTypeC ul li .box ul li{margin-bottom: 4px;padding-left:6px;} .listTypeD{padding:15px 0 0} .listTypeD > ul > li{margin-bottom:15px;padding:10px} .listTypeD > ul > li .img{top:10px;left:10px;width:140px} .listTypeD > ul > li dl dt{margin: 5px 0 65px 150px;font-size:18px;} .listTypeD > ul > li dl dt span{display:block;margin-top:5px;font-size:12px} .listTypeD > ul > li dl dd ul{float:none;width:100%} .listTypeD > ul > li dl dd ul li{margin-bottom:3px;padding-left:60px} .listTypeD > ul > li dl dd ul:nth-child(2){padding-left:0;width:100%;min-height:10px;border-left:0} .listTypeD > ul > li dl dd ul:nth-child(2) li{padding-left:60px} .listTypeD > ul > li dl dd .btn{top:85px;right:auto;left:160px} .listTypeD > ul > li dl dd .btn a{padding:0 10px 0 25px;font-size:12px;line-height:30px;background-position:8px center;background-size:10px} .topNotic{margin-bottom:20px;padding: 20px 20px 20px 90px;background-size: 60px;background-position:15px 15px} .topNotic p{float:none;margin-bottom:10px;font-size:14px;line-height:1.4} .topNotic .btnBc{float:none} .mbNone{display:none !important} .page{margin:20px 0} .page a{width:30px;height:30px;font-size:12px;line-height:28px;} .page a img{width:5px} .viewTypeA h2{padding:15px;font-size:16px;border-bottom:0} .viewTypeA h2 .divis{width:45px;font-size:11px;line-height:20px} .viewTypeA .infor{padding:0 10px} .viewTypeA .infor li{padding:10px 20px 10px 0} .viewTypeA .infor li .name{padding-left:0} .viewTypeA .infor li .name::before{display:none} .viewTypeA .infor.type1 li{padding-left:50px} .viewTypeA .infor.type1 li .name{top:10px} .viewTypeA .content{padding:20px 0} .s3_1_1_con:after { width: 150px; height: 180px; top: 107px; right: 10px;} .s3_1_1_con .top{margin-bottom:60px;} .s3_1_1_con .top:after {width: 100px; height: 2px; bottom: -15px;} .s3_1_1_con .top .txt1{margin-bottom:10px;font-size:16px;line-height:1.2} .s3_1_1_con .top .txt2{font-size:12px} .s3_1_1_con .top .txt2 img{display:block;margin:5px 0 0;height:25px} .s3_1_1_con .bottom {gap: 40px;} .s3_1_1_con .bottom p{font-size:12px} .s3_1_1_con .bottom p > b {font-size: 14px; margin-top: 30px;} .s3_1_1_con .bottom .profile { width: 220px; height: 270px;} .s3_1_1_con .bottom .profile:after { width: 200px; height: 200px; bottom: 40px; right: -30px;} .s3_1_4_con{margin-bottom:50px} .s3_1_4_con > ol > li{margin-bottom:10px} .s3_1_4_con > ol > li div{font-size:18px} .s3_1_4_con > ol > li div span{font-size:11px} .s3_1_4_con > ol > li .ong1{padding-top:55px;width:200px;height:160px} .s3_1_4_con > ol > li .ong2{padding-top:50px;width:140px;height:140px} .s3_1_4_con > ol > li > ol > li{padding:0 5px;width:45%} .s3_1_4_con > ol > li > ol > li .ong3{display:block;margin-bottom:0;width:100%;font-size:15px;line-height:50px} .s3_1_4_con > ol > li > ol > li > ol{display:block} .s3_1_4_con > ol > li > ol > li > ol > li{display:block;padding:5px 0 0;} .s3_1_4_con > ol > li > ol > li > ol > li span{padding-top:0;width:100%;height:auto;font-size:14px;;line-height:40px} .s3_1_4_con > ol > li > ol > li > ol > li span br{display:none} .s3_1_4_con > ol > li > ol > li > ol > li > ol li{padding:5px 0} .s3_1_4_con > ol > li > ol > li > ol > li > ol li span{padding-top:0;width:100%;height:auto;font-size:12px;;line-height:28px} .s3_1_6_con .root_daum_roughmap .wrap_map{height:220px !important} .s3_1_6_con .locTxt{margin:20px 0 30px;padding:15px} .s3_1_6_con .locTxt dt{margin:0 0 5px;padding-left:20px;font-size:15px;line-height:25px;background-size:15px} .s3_1_6_con .locTxt dd{display:block;font-size:13px} .s3_1_6_con .traffic li{float:none;margin-bottom:0;padding:0;width:100%;text-align:left} .s3_1_6_con .traffic li::after{display:none} .s3_1_6_con .traffic li dl{padding:15px 0 15px 60px;background-size:50px} .s3_1_6_con .traffic li dl dt{margin-bottom:5px;font-size:16px} .s3_1_6_con .traffic li dl dd{font-size:14px} .s3_1_3_con .top{margin-bottom:0;height:350px} .s3_1_3_con .top .box{padding:0 20px} .s3_1_3_con .top .box .txt1{width:auto;font-size:30px} .s3_1_3_con .top .box .txt1::before{top:5px} .s3_1_3_con .top .box .txt2{font-size:14px} .s3_1_3_con .top .box .txt2 br{display:none} .s3_1_3_con .bottom{margin:0} .s3_1_3_con .bottom dl{float:none;margin:0;padding:30px 0 20px;width:100%;min-height:100px} .s3_1_3_con .bottom dl dt{padding-bottom:45px;padding:0 0 0 15px;font-size:18px;background-size:40px;background-position:right 10px center} .s3_1_3_con .bottom dl dt::before{top:3px;height:88%} .s3_1_3_con .bottom dl dd{padding-left:15px} .s3_1_3_con .bottom dl dd ul li{margin-bottom:5px} .s4_top{margin-bottom:50px;padding:30px 20px 40px;text-align:center} .s4_top .txt{margin-bottom:10px;font-size:10px;line-height:1.2} .s4_top dl dt{margin-bottom:10px;font-size:18px} .s4_top dl dd{font-size:13px} .s4_top dl dd br{display:none} .s4_top .btnBc{bottom:-20px} .s4_con dl{float:none;margin-bottom:30px;padding-right:0;width:100%} .s4_con dl dt{margin-bottom:10px;padding-left:15px;font-size:16px} .s4_con dl dd{padding-left:15px} .s4_con dl dd ul li{margin-bottom:5px} .s4_con dl dd ul li::before{top:8px;width:2px;height:2px} .s4_con dl dd.step{padding-left:0} .s4_step .con{position:relative;float:none;margin:10px 0;padding:0 0 0 35px;width:100%} .s4_step .con .tit{position:absolute;top:0;left:0;padding:0 5px;width:30px;height:100%;font-size:13px;line-height:1.2;word-break:break-all;border-width:0 1px;} .s4_step .con ul::after{display:block;clear:both;content:''} .s4_step .con ul li{margin-bottom:0;padding:10px 0} .s4_step .con ul li::after{left:50%;background-size:15px} .s4_step .con ul li .box{padding:25px 5px 0;width:120px;height:120px;font-size:12px;line-height:1.2} .s4_step .con ul li .box span{margin-bottom:5px;width:80px;font-size:11px;line-height:20px;font-weight:400} .s4_step .con1 .tit{padding-top:30px} .s4_step .con2 .tit{padding-top:20px} .s4_step .con3 .tit{padding-top:15px} .s4_step .con1 ul, .s4_step .con2 ul, .s4_step .con3 ul{padding:0} .s4_step .con1 ul li{float:left;width:50%} .s4_step .con1 ul li:nth-child(2){position:relative;left:0;transform: translate(0);-webkit-transform: translate(0);} .s4_step .con2 ul li:nth-child(2), .s4_step .con2 ul li:nth-child(4){position:relative} .s4_step .con1 ul li:nth-child(1)::after{right:-10%;transform: rotate(0); -webkit-transform: rotate(0);} .s4_step .con1 ul li:nth-child(2)::after{bottom:-12px;transform: rotate(90deg);-webkit-transform: rotate(90deg);} .s4_step .con2 ul li:nth-child(2)::after{top:auto;left:40%;bottom:-10px;transform: rotate(90deg);-webkit-transform: rotate(90deg);} .s4_step .con2 ul li:nth-child(4)::after{top:auto;bottom:-15px;left:15%;transform: rotate(135deg); -webkit-transform: rotate(135deg);} .s4_step .con3 ul li:nth-child(1)::after{top:0;left:30%;transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} .s4_step .con2 ul li:nth-child(3)::after{top:5px;left:40%;transform: rotate(-90deg);-webkit-transform: rotate(-90deg);} .s4_step .con2 ul li:nth-child(1)::after{top:0;left:40%;transform: rotate(-90deg); -webkit-transform: rotate(-90deg);} .s3_1_2_con dl{margin-bottom: 60px;padding:0;min-height:100px} .s3_1_2_con::after{display:none} .s3_1_2_con dl::after{display:none} .s3_1_2_con dl dt{position:relative;top:0;padding-right:0;width:100%;font-size:30px;text-align:left} .s3_1_2_con dl dt .img{margin-top:10px;padding:0 20% 40px 0} .s3_1_2_con dl dt .img::before{font-size:75px;width:100%;text-align:right} .s3_1_2_con dl dd{margin-top:-10px;padding-left:30px} .s3_1_2_con dl dd::after {position: absolute;top: 0;left:0;width: 18px;height: 18px;content: '';background: #f45708;border: 5px solid #fdebe1;border-radius: 50%;box-sizing: border-box;z-index: 2;} .s3_1_2_con dl dd::before{position: absolute; top: 0;left:8px;width: 0;height: 100%;content: '';border-left: 1px solid #ebebeb;z-index: 1;} .s3_1_2_con dl dd ol li{margin-bottom:10px;padding-left:60px;font-size:13px} .s5_con1 h2{margin:30px 0 5px;font-size:18px} .s5_con1 h3{margin:15px 0 5px;font-size:16px} .s5_con1 h2 + h3{margin-top:5px} .s5_con1 .box{margin-bottom:20px;padding:20px} .siteMap > ul{margin:0 -10px} .siteMap > ul > li{margin-bottom:20px;padding:0 10px;width:50%} .siteMap > ul > li:nth-child(4){clear:none} .siteMap > ul > li:nth-child(2n+1){clear:left} .siteMap > ul > li > a{padding:15px 10px;font-size:18px} .siteMap > ul > li > ul > li > a{padding:10px 15px;font-size:13px} .siteMap > ul > li > ul > li ul{padding:5px 15px} .searchCon{margin-bottom:30px} .searchCon h2{margin-bottom:10px;font-size:18px} .searchCon .listNum{top:5px} .searchCon .con ul li{padding:15px 0} .searchCon .con ul li .tit{margin:0 10px 10px 0;font-size:15px} .searchCon .con ul li .data{font-size:12px} .searchCon .con ul li p{font-size:12px;} .searchCon .btnMore{margin-top:10px} .searchCon .btnMore a{padding: 0 10px 0 20px;font-size:12px;line-height:25px} .searchCon .btnMore a::before{left:6px;width:9px} .searchCon .btnMore a::after{left:10px;margin-top:-4px;height:9px} } @media all and (max-width:360px){ .s3_1_1_con:after { width: 120px; height: 145px; top: 142px;} .s3_1_1_con .top {padding-right: 100px;} }