/*@media all and (min-width: 321px) and (width: 768px) {*/ #wait {text-align:center} #wait img {width: 100%;} /**/ #skipBtnWrap a {display: block;width: 1px;height: 0;line-height: 0;text-align: center;background: #333;color: #fff;} #skipBtnWrap a:focus, #skipBtnWrap a:hover, #skipBtnWrap a:active {width: 100%;height: 30px;line-height: 30px;} /**/ #poplayer{position:absolute;z-index:99999;top:120px;left:50%;margin:0 0 0 -280px;width:560px;height:595px;} #poplayer *{margin:0;padding:0;border:0} #poplayer img{display:block} #poplayer .todays{padding:2px 20px 8px 20px;text-align:right;background:#323232} #poplayer .todays a{font-size:14px;color:#fff} #poplayer area{cursor:pointer} /* #popupbar{position:relative;background:#0e6faf url(../img/popupbarbg.png) no-repeat 50% 50%;overflow:hidden;display:none} #popupbar .popupbar{max-height:117px !important;overflow:hidden} #popupbar .popupbar .slide h3{display:inline-block;margin:0;padding:0 20px 5px 0;font-size:26px;color:#fff;text-shadow:-1px -1px 2px rgba(0,0,0,0.2)} #popupbar .popupbar .slide .close{display:inline-block} #popupbar .popupbar .slide .close button{font-size:14px;font-weight:800;letter-spacing:-1px;color:#fff;border:0;background:none} #popupbar .popupbar img{display:block} #popupbar .bx-controls{position:absolute;z-index:100;bottom:3px;left:50%} #popupbar .bx-pager{float:left;display:block} #popupbar .bx-pager .bx-pager-item{display:inline;*zoom:1} #popupbar .bx-pager.bx-default-pager a{display:inline-block;margin-right:5px;width:12px;height:12px;outline:0;border:2px solid #fff;background:transparent;border-radius:50px;text-indent:-9999px} #popupbar .bx-pager.bx-default-pager a.active{border:2px solid #00558b;background:#00558b} #popupbar .bx-prev{position:absolute;top:0px;right:80px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_prev.png) no-repeat} #popupbar .bx-next{position:absolute;top:0px;right:20px;display:none;width:10px;height:19px;text-indent:-9999px;background:url(../img/banner_next.png) no-repeat} #popupbar i.b1{position:absolute;z-index:3;top:0px;left:0%;display:block;width:100%;height:5px;background:#00558b} #popupbar i.b2{position:absolute;z-index:4;top:0px;left:50%;margin:0 0 0 570px;display:block;width:100%;height:5px;background:#ffbd3f} #popupbar .holidays{padding-top:40px;text-align:center} #popupbar .opens{text-align:center} #popupbar .opens a{display:block;text-align:center} #popupbar .opens a img{display:block;margin:0 auto}*/ #divpop { display:none;} #mm-blocker{display:none} #popupWindow{position:absolute} #OpenLayer {position: absolute;top: 150px;left: 100px;z-index: 9999;background: #fff;padding: 10px;border-radius: 5px;border: 1px solid #ccc;box-shadow: 5px 5px 20px rgba(0,0,0,0.3);text-align: right;} #OpenLayer > a {clear: both;font-size: 14px;} #OpenLayer #TodayClose {float: left;margin-right: 20px;} /******************************************** 1400px ~ ********************************************/ @media all and (min-width: 1400px) { /**/ #header{position:absolute;z-index:30002;top:0;left:0;width:100%;height: 95px;overflow:hidden;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header.sel {height: 360px;border-bottom:0; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);background: rgba(255,255,255,0.9);overflow: hidden;} #header.sub_on {overflow: visible;transition: none;} #header.sub_on .header {} #header.sub_on .gnb {overflow: hidden;height: 95px;} #header.fix_menu {background: rgba(255,255,255,0.9);position:fixed; top:0;border-bottom:1px solid #ddd;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header .header{position: relative;z-index: 30002;clear:both;/*width: 100%;*/max-width: 1300px;/*height:500px;*/height: 130px;margin: 0 auto;/*padding: 0 382px 0 320px;*/box-sizing:border-box;} #header .header::after {content: '';display: block;clear: both;} #header .header a.other_dp {position: absolute;top: 50%;right: 0;transform: translateY(-50%);} /*#header.sel .header::after {content: '';position: absolute;top: 120px;left: 0;width: 100%;height: 1px;background: #ddd;display: block;clear: both;}*/ #header .header h1{position: absolute;top: 0;left: 0;} #header .header h1 a{display:block;width: 650px;height: 130px;background: url(../img/logo.png) no-repeat 0 50%;/*background-size: auto 50px;*/text-indent: -9999px;} #header.sel .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header.fix_menu .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header .header button{display:none;} /* #gnb{width: 100%;margin: 0 auto;text-align: center;box-sizing: border-box;transition:all 0.5s;} #gnb.sel{height: 360px;transition:all 0.3s} #gnb .gnb{transition:all 0.6s} #gnb.sel .gnb{background:url(../img/gnb-visual.png) no-repeat 50px 170px;transition:all 0.6s} #gnb .depth1 {position:relative;} #gnb .depth1::after {content: '';display: block;clear: both;} #gnb.sel .depth1{height: 360px !important} #gnb .depth1 > li {display: inline-block;text-align: center;position:relative;height:500px;} #gnb .depth1 > li > a {position:relative;display:block;padding: 0 40px;height: 95px;line-height: 95px;font-size: 20px;font-weight:500;color:#fff;} #gnb .depth1 > li.sel > a {color: #65bafe;} #header.fix_menu #gnb .depth1 > li > a {color: #333;} #header #gnb.sel .depth1 > li:hover > a {color: #65bafe;} #gnb.sel .depth1 > li > a {color: #333;} #gnb .depth1 > li > a em{position:absolute;top:23px;right:0;display:block;margin:-10px 0 0 0;width:1px;height:16px;background:#ccc;display:none} #gnb .depth2{position:absolute;top:120px;width: 100%;left: 26%;visibility:hidden; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);box-sizing: border-box;} #header.sel #gnb .depth2 {display:block; top: 90px;left: 26%;visibility:visible; transition: all 0.8s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #gnb .depth2 li a{display:block;letter-spacing:-0.4px;padding: 5px 0;font-size:16px;text-align:left;color:#575757;} #gnb .depth2 li a:hover{color:#65bafe;text-decoration: underline;} #gnb .depth2 li.sel a{color:#da204c;} #gnb .mobile{display:none}*/ #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);display:none} /* #header .etc_wrap {position: absolute;top: 0;right: 30px;} #header .etc_wrap > ul {font-size: 0;text-align: right;} #header .etc_wrap > ul > li {position: relative;display: inline-block;vertical-align: top;} #header .etc_wrap > ul > li > a {display: block;padding: 0 10px;height: 95px;line-height: 95px;font-size: 16px;color: #fff;} #header .etc_wrap > ul > li.etc04 > a {width: 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_search.png) no-repeat 50%;background-size: auto 20px;} #header .etc_wrap > ul > li.etc05 > a {width: 45px;padding: 0 0 0 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_sitemap.png) no-repeat 50%;} #header.sel .etc_wrap > ul > li > a {color: #333;} #header.sel .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header.fix_menu .etc_wrap > ul > li > a {color: #333;} #header.fix_menu .etc_wrap > ul > li > a:hover {color: #f1a008;} #header.fix_menu .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header .etc_wrap > ul > li > ul {overflow: hidden;position: absolute;top: 120px;left: 50%;display: none;z-index: 300;width: 150px;padding: 3px 0;margin-left: -75px;background: #fff;box-shadow: 4px 4px 15px rgba(0,0,0,0.2)} #header .etc_wrap > ul > li > ul > li {border-bottom: 1px solid #eee;} #header .etc_wrap > ul > li > ul > li:last-child {border-bottom: 0;} #header .etc_wrap > ul > li > ul > li > a {display: block;padding: 10px 0;font-size: 15px;} #header .etc_wrap > ul > li > ul > li > a:hover {background: #da204c;color: #fff;}*/ /**/ #menu{position:absolute !important;z-index:10;top:17px;right:0;float:none} #menu a{display:block;margin:0 !important;padding:0 !important;width:42px;height:40px;background:url(../img/menu.png) no-repeat right center;text-indent:-9999em;overflow:hidden} /* grid */ #wrap {position: relative;z-index: 0;width: 100%;/*min-width: 1600px;*/min-height: 800px;} #wrap.wrap_main {min-height: 1080px;height: 100%;} .con_grid {position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;} .con_grid > div {position: relative;max-width: 1300px;height: 100%;margin: 0 auto;} .con_grid > div > span {position: absolute;top: 0;width: 1px;height: 100%;background-color: rgba(0,0,0,0.15);} .con_grid > div > span:nth-child(1) {left: 0;} .con_grid > div > span:nth-child(2) {left: 50%;} .con_grid > div > span:nth-child(3) {right: 0;} /* #mainWrap */ #mainWrap {width: 100%;height: 100%;min-height: 1080px;padding-bottom: 200px;border: 20px solid #fff;box-sizing: border-box;} #mainWrap::before {content: '';position: absolute;top: 0;left:0;z-index: -2;width: 100%;height: 100%;background-image: url(../img/bg_main.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-attachment: fixed;background-size: cover;} #mainWrap > div.main_wp {/*display: table;*/max-width: 1300px;padding: 0 1px;height: 100%;margin: 100px auto 0;box-sizing: border-box;} #mainWrap > div.main_wp .main_con {/*display: table-cell;*/width: 100%;/*vertical-align: middle;*/padding-bottom: 80px;background-image: url(../img/logo_228.png);background-repeat: no-repeat;background-position: 50% 100%;background-size: auto 50px;} #mainWrap .main_con h1 {position: relative;} #mainWrap .main_con h1 .go_228 {position: absolute;top: 0;right: 0;padding: 10px 25px;font-size: 15px;background-color: rgba(255,255,255,0.3);border: 1px solid #333;} #mainWrap .main_con h1 .go_228:hover {background-color: rgba(255,255,255,0.8);transition: all 0.5s;} #mainWrap .card-carousel { display: flex; align-items: center; justify-content: center; position: relative; left: 0 !important; } #mainWrap .card-carousel .my-card { height: 130px; width: 130px; border-radius: 130px; line-height: 130px; position: relative; z-index: 1; -webkit-transform: scale(0.8) translateY(-50%); transform: scale(0.8) translateY(-50%); opacity: 0; cursor: pointer; pointer-events: none; /*background: #2e5266; background: linear-gradient(to top, #2e5266, #6e8898);*/ background-color: #7a5f2f; background-position: 50% 130%; transition: 1s; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; box-sizing: border-box; } #mainWrap .card-carousel .my-card.active { z-index: 3; -webkit-transform: scale(1) translateY(0) translateX(0); transform: scale(1) translateY(0) translateX(0); opacity: 1; padding-bottom: 30px; pointer-events: auto; transition: 1s; line-height: 120px; font-size: 26px; font-weight: 600; background-image: url(../img/ico_year_arrow.png); background-repeat: no-repeat; background-position: 50% 85%; background-size: auto 14px; } #mainWrap .card-carousel .my-card.prev, #mainWrap .card-carousel .my-card.next { z-index: 2; -webkit-transform: scale(0.8) translateY(0) translateX(0); transform: scale(0.8) translateY(0) translateX(0); opacity: 0.6; pointer-events: auto; transition: 1s; } #mainWrap .year_sel {margin: 30px 0 60px;text-align: center;} #mainWrap #cate::after {content: '';display: block;clear: both;} #mainWrap #cate > div {overflow: hidden;float: left;display: table;width: 50%;height: 280px;text-align: center;background-color: rgba(255,255,255,0.5);} #mainWrap #cate > div:nth-child(2n) {float: right;} #mainWrap #cate > div > a {position: relative;z-index: 0;overflow: hidden;z-index: 0;display: table-cell;width: 100%;height: 280px;font-size: 26px;font-weight: 600;color: #333;vertical-align: middle;border-top: 1px solid rgba(0,0,0,0.2);border-bottom: 1px solid rgba(0,0,0,0.2);} /*#mainWrap #cate > div > a.active {position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);color: #000;}*/ #mainWrap #cate > div > a::after {content: '';z-index: -1;position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);border-radius: 50%;transform: translate(-50%, -50%) scale(1.8);} #mainWrap #cate > div > a:hover {overflow: hidden;padding-right: 50px;font-size: 28px;font-weight: 800;transition: ease-out all 0.5s;} #mainWrap #cate > div > a:hover::after {width: 100%;height: 504px;transition: all 0.5s;} #mainWrap #cate > div > a .ico {opacity: 0;position: absolute;top: 0;right: 0;z-index: 10;width: 80px;height: 280px;background-image: url(../img/ico_main_active.png);background-repeat: no-repeat;background-position: 50% 50%;} #mainWrap #cate > div > a:hover .ico {right: 50px;opacity: 1;transition: all 0.5s;} /* #footer */ #footer {position: absolute;bottom: 0;left: 0;width: 100%;padding-bottom: 20px;text-align: center;} #contain + #footer {background-color: #fff;} #footer .f_info {max-width: 1300px;margin: 0 auto;padding: 40px 0;} #contain + #footer .f_info {border-top: 1px solid #ccc;} #footer cite {display: block;font-size: 15px;font-weight: 400;color: #000;font-style: normal;font-weight: 300;} /********** 서브페이지 **********/ /**/ #contain{width: 100%;} #contain .contain{position:relative;} #contain .contain:before, #contain .contain:after{clear:both;display:table;content:"";line-height:0} /* 서브비주얼 */ #subVisual {max-width: 1300px;margin: 0 auto;padding: 50px 0 0;margin-bottom: 50px;box-sizing: border-box;background-color: #fff;} #subVisual .sub_visual::after {content: '';display: block;clear: both;} #subVisual .sub_visual .visual_logo {float: left;width: 300px;height: 145px;} #subVisual .sub_visual .visual_logo img {height: 145px;} #subVisual .sub_visual .visual_wp {position: relative;float: right;width: calc(100% - 300px);height: 145px;text-align: right;} #subVisual .sub_visual .visual_wp .logo_228 img {height: 45px;} #subVisual .sub_visual .visual_wp h2 {position: absolute;bottom: 0;right: 0;font-size: 32px;font-weight: 600;color: #333;word-break: keep-all;} #subNavi {margin: 50px 0 0;text-align: center;} #subNavi > ul {display: block;width: 100%;padding: 30px;background-color: #f4f4f4;box-sizing: border-box;font-size: 0;text-align: left;} #subNavi > ul > li {display: inline-block;width: 50%;margin: 10px 0;vertical-align: middle;text-align: left;} #subNavi > ul > li:first-child {margin-left: 0;} #subNavi > ul > li a {display: inline-block;padding: 2px 0;font-size: 19px;font-weight: 600;color: #000;} #subNavi > ul > li.active a {font-size: 20px;font-weight: 600;color: #e71e29;border-bottom: 1px solid #e71e29;} /* 페이지 타이틀 */ #design .page_title {margin: 0 0 50px;text-align: right;} #design .page_title .title {margin: 0;display: inline-block;vertical-align: middle;font-size: 22px;font-weight: 600;color: #333;} #design .page_title .title .tit_eng {display: block;margin-top: 5px;font-size: 17px;font-weight: 400;} #design .page_title .s_contents {display: inline-block;width: 60px;height: 60px;vertical-align: middle;font-size: 19px;font-weight: 600;background-color: #7a5f2f;line-height: 60px;text-align: center;margin-left: 15px;color: #fff;} /* #aside */ #aside {display: none;} /**/ #design {position:relative;width: 100%;min-height: 1000px;padding-bottom: 150px;} #design #dkboard .community {max-width: 1300px;margin: 120px auto 0;} /* gallery #design .gallery {width: 1300px;margin: 0 auto;box-sizing: border-box;} #design #g_list {padding: 0 1px;} #design #g_list::after {content: '';display: block;clear: both;} #design #g_list > li {float: left;width: 50%;min-height: 620px;padding: 0 50px 0 0;box-sizing: border-box;} #design #g_list > li:nth-child(2n) {margin-top: 70px;padding: 0 0 0 50px;text-align: right;} #design #g_list > li > a {display: block;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 19px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 16px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 10px;}*/ /* gallery - 수정 210218 */ #design .gallery {max-width: 1300px;margin: 0 auto;box-sizing: border-box;} #design #g_list {padding: 0 1px;font-size: 0;} #design #g_list::after {content: '';display: block;clear: both;} #design #g_list > li {display: inline-block;width: 50%;margin-bottom: 100px;padding: 0 50px 0 0;box-sizing: border-box;vertical-align: top;} /*#design #g_list > li:nth-last-of-type(1), #design #g_list > li:nth-last-of-type(2) {margin-bottom: 0;}*/ #design #g_list > li:nth-child(2n) {margin-top: 70px;padding: 0 0 0 50px;text-align: right;} #design #g_list > li > a {display: block;text-align: center;} #design #g_list > li > a div.img {background-color: #efefef;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 19px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 16px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 10px;} /********** 모바일메뉴 **********/ #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;position:absolute;z-index:10;left:0px;top:0px;width:260px;min-height:1000px;background:#fff;overflow:hidden} #dkleft .lefttit{padding:0 0 0 20px;height:70px;background:#f7941d} #dkleft .lefttit button{display:block;position:relative;top:17px;font-size:12px;font-family:'Roboto';color:#fff;border:0;background:transparent} #dkleft .lefttit button i{display:block;margin-bottom:3px;font-size:18px;color:#fff} #dkleft .select .join{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .join i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 15px;line-height:50px;font-size:16px;color:#555;border-bottom:1px solid #ccc;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{color:#000;border-bottom:1px solid #596170} #dkleft .depth1.sel em{background:url(/web/seomun/img/common/minus.png) no-repeat 50% 50%;background-size:11px 3px} #dkleft .depth1 i{display:block;margin:15px 10px 0 0;color:#767a81;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico{float:right} #dkleft .depth1.sel i.rightico{color:#00a19c;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#757c89} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:13px;color:#fff;border-bottom:1px solid #596170;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #closeleft{position:fixed;z-index:99999;left:215px;top:17px;display:block;font-size:30px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870"} /*#gotop, #gotop a{display:none !important}*/ #gotop{display: none;position:fixed;z-index:90000;/*bottom:-40px;left:50%;*/bottom: 30px;right: 30px;} #gotop a{display:block;margin-left:600px;width:50px;height:50px;padding:22px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.5) url(../img/gotop.png) no-repeat 48% 30%;border-radius:50px;overflow:hidden;line-height: 50px;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } /* #loading */ #loading .loading {text-transform:uppercase;width:150px;text-align:center;line-height:50px;position:absolute;left:0;right:0;top:50%;margin:auto;transform:translateY(-50%);} #loading .loading span {position:relative;z-index:999;color:#fff;} #loading .loading:before {content:'';background:#61bdb6;width:128px;height:36px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;animation:2s loadingBefore infinite ease-in-out;} @keyframes loadingBefore { 0% {transform:translateX(-14px);} 50% {transform:translateX(14px);} 100% {transform:translateX(-14px);} } #loading .loading:after {content:'';background:#ff3600;width:14px;height:60px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;opacity:.5;animation:2s loadingAfter infinite ease-in-out;} @keyframes loadingAfter { 0% {transform:translateX(-50px);} 50% {transform:translateX(50px);} 100% {transform:translateX(-50px);} } /* .featherlight */ .featherlight .modal {overflow-x: hidden;} .featherlight .featherlight-content {padding: 0 !important;border-bottom: 0 !important;margin: 0;width: 90%;max-width: 1200px;height: 90%;max-height: 800px !important;} .featherlight .featherlight-inner {position: relative;width: 100%;height: 100%;text-align: left;} .featherlight .featherlight-inner div.img img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;width: auto;height: 100%;max-width: 100%;max-height: 100%;margin: auto;} .featherlight .featherlight-inner p.img_view_title {position: absolute;bottom: 0;left: 0;width: 100%;z-index: 10;padding: 30px 80px 30px 30px;background: rgba(0,0,0,0.7);} .featherlight .featherlight-inner p.img_view_title > span {overflow: hidden;display: block;color: #fff;word-break: keep-all;} .featherlight .featherlight-inner p.img_view_title > span > span {display: block;animation: txt_up ease-in-out 1s;animation-fill-mode: both;} .featherlight .featherlight-inner p.img_view_title > span + span {margin-top: 10px;} .featherlight .featherlight-inner p.img_view_title > span.ko_tit {font-size: 17px;font-weight: 600;} .featherlight .featherlight-inner p.img_view_title > span.en_tit {font-size: 14px;} .featherlight .featherlight-inner p.img_view_title > span.en_tit > span {animation-delay: 1s;} .featherlight .featherlight-inner div.summary {position: absolute;top: 0;right: -60%;z-index: 29;width: 60%;height: 100%;padding-left: 50px;/*display: table;*/text-align: center;box-sizing: content-box;transition: all 0.5s;} .featherlight .featherlight-inner div.summary.active {right: 0;transition: all 0.5s;} .featherlight .featherlight-inner div.summary > div {overflow-y: auto;width: 100%;height: 100%;box-shadow: 5px 5px 40px rgba(0,0,0,0.8);} .featherlight .featherlight-inner div.summary > div > p {width: 100%;min-height: 100%;padding: 70px 50px;background-color: #f4f4f4;font-size: 19px;font-weight: 600;line-height: 1.7em;word-break: keep-all;vertical-align: middle;} .featherlight .featherlight-inner div.summary button {overflow: hidden;position: absolute;top: 50%;left: 0;width: 50px;height: 80px;margin-top: -40px;background-color: #333;border-radius: 5px 0 0 5px;text-indent: -9999px;cursor: pointer;text-indent: -9999px;} .featherlight .featherlight-inner div.summary button::before {content: '';display: block;width: 100%;height: 100%;background-image: url(../img/arrow_summary_btn.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 30px;transition: all 0.3s;} .featherlight .featherlight-inner div.summary button.active::before {transform: rotate(180deg);transition: all 0.3s;} .featherlight .featherlight-close-icon {top: auto !important;bottom: 0;width: 50px !important;height: 50px;line-height: 50px !important;font-size: 30px;background: rgba(255,255,255,.8) !important;} } /******************************************** 768px ~ 1399px ********************************************/ @media all and (min-width: 768px) and (max-width: 1399px) { /**/ #header{position:absolute;z-index:30002;top:0;left:0;width:100%;height: 95px;overflow:hidden;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header.sel {height: 360px;border-bottom:0; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);background: rgba(255,255,255,0.9);overflow: hidden;} #header.sub_on {overflow: visible;transition: none;} #header.sub_on .header {} #header.sub_on .gnb {overflow: hidden;height: 95px;} #header.fix_menu {background: rgba(255,255,255,0.9);position:fixed; top:0;border-bottom:1px solid #ddd;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header .header{position: relative;z-index: 30002;clear:both;/*width: 100%;*/max-width: 1300px;/*height:500px;*/height: 130px;margin: 0 auto;/*padding: 0 382px 0 320px;*/box-sizing:border-box;} #header .header::after {content: '';display: block;clear: both;} #header .header a.other_dp {position: absolute;top: 50%;right: 0;transform: translateY(-50%);} /*#header.sel .header::after {content: '';position: absolute;top: 120px;left: 0;width: 100%;height: 1px;background: #ddd;display: block;clear: both;}*/ #header .header h1{position: absolute;top: 0;left: 0;} #header .header h1 a{display:block;width: 650px;height: 130px;background: url(../img/logo.png) no-repeat 0 50%;/*background-size: auto 50px;*/text-indent: -9999px;} #header.sel .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header.fix_menu .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header .header button{display:none;} /* #gnb{width: 100%;margin: 0 auto;text-align: center;box-sizing: border-box;transition:all 0.5s;} #gnb.sel{height: 360px;transition:all 0.3s} #gnb .gnb{transition:all 0.6s} #gnb.sel .gnb{background:url(../img/gnb-visual.png) no-repeat 50px 170px;transition:all 0.6s} #gnb .depth1 {position:relative;} #gnb .depth1::after {content: '';display: block;clear: both;} #gnb.sel .depth1{height: 360px !important} #gnb .depth1 > li {display: inline-block;text-align: center;position:relative;height:500px;} #gnb .depth1 > li > a {position:relative;display:block;padding: 0 40px;height: 95px;line-height: 95px;font-size: 20px;font-weight:500;color:#fff;} #gnb .depth1 > li.sel > a {color: #65bafe;} #header.fix_menu #gnb .depth1 > li > a {color: #333;} #header #gnb.sel .depth1 > li:hover > a {color: #65bafe;} #gnb.sel .depth1 > li > a {color: #333;} #gnb .depth1 > li > a em{position:absolute;top:23px;right:0;display:block;margin:-10px 0 0 0;width:1px;height:16px;background:#ccc;display:none} #gnb .depth2{position:absolute;top:120px;width: 100%;left: 26%;visibility:hidden; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);box-sizing: border-box;} #header.sel #gnb .depth2 {display:block; top: 90px;left: 26%;visibility:visible; transition: all 0.8s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #gnb .depth2 li a{display:block;letter-spacing:-0.4px;padding: 5px 0;font-size:16px;text-align:left;color:#575757;} #gnb .depth2 li a:hover{color:#65bafe;text-decoration: underline;} #gnb .depth2 li.sel a{color:#da204c;} #gnb .mobile{display:none}*/ #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);display:none} /* #header .etc_wrap {position: absolute;top: 0;right: 30px;} #header .etc_wrap > ul {font-size: 0;text-align: right;} #header .etc_wrap > ul > li {position: relative;display: inline-block;vertical-align: top;} #header .etc_wrap > ul > li > a {display: block;padding: 0 10px;height: 95px;line-height: 95px;font-size: 16px;color: #fff;} #header .etc_wrap > ul > li.etc04 > a {width: 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_search.png) no-repeat 50%;background-size: auto 20px;} #header .etc_wrap > ul > li.etc05 > a {width: 45px;padding: 0 0 0 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_sitemap.png) no-repeat 50%;} #header.sel .etc_wrap > ul > li > a {color: #333;} #header.sel .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header.fix_menu .etc_wrap > ul > li > a {color: #333;} #header.fix_menu .etc_wrap > ul > li > a:hover {color: #f1a008;} #header.fix_menu .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header .etc_wrap > ul > li > ul {overflow: hidden;position: absolute;top: 120px;left: 50%;display: none;z-index: 300;width: 150px;padding: 3px 0;margin-left: -75px;background: #fff;box-shadow: 4px 4px 15px rgba(0,0,0,0.2)} #header .etc_wrap > ul > li > ul > li {border-bottom: 1px solid #eee;} #header .etc_wrap > ul > li > ul > li:last-child {border-bottom: 0;} #header .etc_wrap > ul > li > ul > li > a {display: block;padding: 10px 0;font-size: 15px;} #header .etc_wrap > ul > li > ul > li > a:hover {background: #da204c;color: #fff;}*/ /**/ #menu{position:absolute !important;z-index:10;top:17px;right:0;float:none} #menu a{display:block;margin:0 !important;padding:0 !important;width:42px;height:40px;background:url(../img/menu.png) no-repeat right center;text-indent:-9999em;overflow:hidden} /* grid */ #wrap {position: relative;z-index: 0;width: 100%;/*min-width: 1600px;*/min-height: 800px;} #wrap.wrap_main {min-height: 1080px;height: 100%;} .con_grid {position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;padding: 0 20px;box-sizing: border-box;} .con_grid > div {position: relative;width: 94%;height: 100%;margin: 0 auto;} .con_grid > div > span {position: absolute;top: 0;width: 1px;height: 100%;background-color: rgba(0,0,0,0.15);} .con_grid > div > span:nth-child(1) {left: 0;} .con_grid > div > span:nth-child(2) {left: 50%;} .con_grid > div > span:nth-child(3) {right: 0;} /* #mainWrap */ #mainWrap {width: 100%;height: 100%;min-height: 1080px;padding-bottom: 180px;border: 20px solid #fff;box-sizing: border-box;} #mainWrap::before {content: '';position: absolute;top: 0;left:0;z-index: -2;width: 100%;height: 100%;background-image: url(../img/bg_main.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-attachment: fixed;background-size: cover;} #mainWrap > div.main_wp {/*display: table;*/width: 94%;padding: 0 1px;height: 100%;margin: 100px auto 0;box-sizing: border-box;} #mainWrap > div.main_wp .main_con {/*display: table-cell;*/width: 100%;/*vertical-align: middle;*/padding-bottom: 80px;background-image: url(../img/logo_228.png);background-repeat: no-repeat;background-position: 50% 100%;background-size: auto 40px;} #mainWrap .main_con h1 {position: relative;} #mainWrap .main_con h1 .go_228 {position: absolute;top: 0;right: 0;padding: 10px 25px;font-size: 15px;background-color: rgba(255,255,255,0.3);border: 1px solid #333;} #mainWrap .main_con h1 .go_228:hover {background-color: rgba(255,255,255,0.8);transition: all 0.5s;} #mainWrap .card-carousel { display: flex; align-items: center; justify-content: center; position: relative; left: 0 !important; text-align: center; } #mainWrap .card-carousel .my-card { height: 130px; width: 130px; border-radius: 130px; line-height: 130px; position: relative; z-index: 1; -webkit-transform: scale(0.8) translateY(-50%); transform: scale(0.8) translateY(-50%); opacity: 0; cursor: pointer; pointer-events: none; /*background: #2e5266; background: linear-gradient(to top, #2e5266, #6e8898);*/ background-color: #7a5f2f; background-position: 50% 130%; transition: 1s; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; box-sizing: border-box; } #mainWrap .card-carousel .my-card.active { z-index: 3; -webkit-transform: scale(1) translateY(0) translateX(0); transform: scale(1) translateY(0) translateX(0); opacity: 1; padding-bottom: 30px; pointer-events: auto; transition: 1s; line-height: 120px; font-size: 26px; font-weight: 600; background-image: url(../img/ico_year_arrow.png); background-repeat: no-repeat; background-position: 50% 85%; background-size: auto 14px; } #mainWrap .card-carousel .my-card.prev, #mainWrap .card-carousel .my-card.next { z-index: 2; -webkit-transform: scale(0.8) translateY(0) translateX(0); transform: scale(0.8) translateY(0) translateX(0); opacity: 0.6; pointer-events: auto; transition: 1s; } #mainWrap .year_sel {margin: 30px 0 60px;text-align: center;} #mainWrap #cate::after {content: '';display: block;clear: both;} #mainWrap #cate > div {overflow: hidden;float: left;display: table;width: 50%;height: 280px;text-align: center;background-color: rgba(255,255,255,0.5);} #mainWrap #cate > div:nth-child(2n) {float: right;} #mainWrap #cate > div > a {position: relative;z-index: 0;overflow: hidden;z-index: 0;display: table-cell;width: 100%;height: 280px;font-size: 24px;font-weight: 600;color: #333;vertical-align: middle;border-top: 1px solid rgba(0,0,0,0.2);border-bottom: 1px solid rgba(0,0,0,0.2);} /*#mainWrap #cate > div > a.active {position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);color: #000;}*/ #mainWrap #cate > div > a::after {content: '';z-index: -1;position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);border-radius: 50%;transform: translate(-50%, -50%) scale(1.8);} #mainWrap #cate > div > a:hover {overflow: hidden;padding-right: 60px;font-size: 25px;font-weight: 800;transition: ease-out all 0.5s;} #mainWrap #cate > div > a:hover::after {width: 100%;height: 504px;transition: all 0.5s;} #mainWrap #cate > div > a .ico {opacity: 0;position: absolute;top: 0;right: 0;z-index: 10;width: 60px;height: 280px;background-image: url(../img/ico_main_active.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: 100% auto} #mainWrap #cate > div > a:hover .ico {right: 50px;opacity: 1;transition: all 0.5s;} /* #footer */ #footer {position: absolute;bottom: 0;left: 0;width: 100%;padding: 0 20px 20px;text-align: center;box-sizing: border-box;} #contain + #footer {background-color: #fff;} #footer .f_info {width: 94%;margin: 0 auto;padding: 30px 0;} #contain + #footer .f_info {border-top: 1px solid #ccc;} #footer cite {display: block;font-size: 14px;font-weight: 400;color: #000;font-style: normal;font-weight: 300;} /********** 서브페이지 **********/ /**/ #contain{width: 100%;} #contain .contain{position:relative;} #contain .contain:before, #contain .contain:after{clear:both;display:table;content:"";line-height:0} /* 서브비주얼 */ #subVisual {max-width: 1300px;margin: 0 auto;padding: 50px 0 0;margin-bottom: 30px;box-sizing: border-box;background-color: #fff;} #subVisual .sub_visual::after {content: '';display: block;clear: both;} #subVisual .sub_visual .visual_logo {float: left;/*width: 300px;height: 145px;*/} #subVisual .sub_visual .visual_logo img {height: 110px;} #subVisual .sub_visual .visual_wp {position: relative;float: right;width: calc(100% - 250px);/*height: 145px;*/text-align: right;} #subVisual .sub_visual .visual_wp .logo_228 img {height: 32px;} #subVisual .sub_visual .visual_wp h2 {/*position: absolute;bottom: 0;right: 0;*/margin-top: 20px;font-size: 24px;font-weight: 600;color: #333;word-break: keep-all;} #subNavi {margin: 20px 0 0;text-align: center;} #subNavi > ul {display: block;width: 100%;padding: 30px;background-color: #f4f4f4;box-sizing: border-box;font-size: 0;text-align: left;} #subNavi > ul > li {display: block;vertical-align: middle;text-align: left;} #subNavi > ul > li + li {margin-top: 10px;} #subNavi > ul > li:first-child {margin-left: 0;} #subNavi > ul > li a {display: inline-block;padding: 2px 0;font-size: 17px;font-weight: 600;color: #000;} #subNavi > ul > li.active a {font-size: 17px;font-weight: 600;color: #e71e29;border-bottom: 1px solid #e71e29;} /* 페이지 타이틀 */ #design .page_title {position: relative;margin: 0 0 50px;text-align: right;} #design .page_title .title {margin: 0;padding-right: 80px;display: block;vertical-align: middle;font-size: 20px;font-weight: 600;color: #333;} #design .page_title .title .tit_eng {display: block;margin-top: 5px;font-size: 15px;font-weight: 400;} #design .page_title .s_contents {position: absolute;top: 0;right: 0;width: 60px;height: 60px;vertical-align: middle;font-size: 18px;font-weight: 600;background-color: #7a5f2f;line-height: 60px;text-align: center;margin-left: 15px;color: #fff;} /* #aside */ #aside {display: none;} /**/ #design {position:relative;width: 100%;min-height: 1000px;padding-bottom: 80px;} #design #dkboard .community {max-width: 1300px;margin: 120px auto 0;} /* gallery #design .gallery {width: 1300px;margin: 0 auto;box-sizing: border-box;} #design #g_list {padding: 0 1px;} #design #g_list::after {content: '';display: block;clear: both;} #design #g_list > li {float: left;width: 50%;min-height: 620px;padding: 0 50px 0 0;box-sizing: border-box;} #design #g_list > li:nth-child(2n) {margin-top: 70px;padding: 0 0 0 50px;text-align: right;} #design #g_list > li > a {display: block;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 19px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 16px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 10px;}*/ /* gallery - 수정 210218 */ #design .gallery {width: 94%;margin: 0 auto;padding: 0 19px;box-sizing: border-box;} #design #g_list {padding: 0 1px;font-size: 0;} #design #g_list::after {content: '';display: block;clear: both;} #design #g_list > li {display: inline-block;width: 50%;margin-bottom: 70px;padding: 0 30px 0 0;box-sizing: border-box;vertical-align: top;} /*#design #g_list > li:nth-last-of-type(1), #design #g_list > li:nth-last-of-type(2) {margin-bottom: 0;}*/ #design #g_list > li:nth-child(2n) {margin-top: 30px;padding: 0 0 0 30px;text-align: right;} #design #g_list > li > a {display: block;text-align: center;} #design #g_list > li > a div.img {background-color: #efefef;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 17px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 15px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 7px;} /********** 모바일메뉴 **********/ #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;position:absolute;z-index:10;left:0px;top:0px;width:260px;min-height:1000px;background:#fff;overflow:hidden} #dkleft .lefttit{padding:0 0 0 20px;height:70px;background:#f7941d} #dkleft .lefttit button{display:block;position:relative;top:17px;font-size:12px;font-family:'Roboto';color:#fff;border:0;background:transparent} #dkleft .lefttit button i{display:block;margin-bottom:3px;font-size:18px;color:#fff} #dkleft .select .join{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .join i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 15px;line-height:50px;font-size:16px;color:#555;border-bottom:1px solid #ccc;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{color:#000;border-bottom:1px solid #596170} #dkleft .depth1.sel em{background:url(/web/seomun/img/common/minus.png) no-repeat 50% 50%;background-size:11px 3px} #dkleft .depth1 i{display:block;margin:15px 10px 0 0;color:#767a81;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico{float:right} #dkleft .depth1.sel i.rightico{color:#00a19c;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#757c89} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:13px;color:#fff;border-bottom:1px solid #596170;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #closeleft{position:fixed;z-index:99999;left:215px;top:17px;display:block;font-size:30px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870"} /*#gotop, #gotop a{display:none !important}*/ #gotop{display: none;position:fixed;z-index:90000;/*bottom:-40px;left:50%;*/bottom: 30px;right: 30px;} #gotop a{display:block;width:50px;height:50px;padding:22px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.5) url(../img/gotop.png) no-repeat 48% 30%;border-radius:50px;overflow:hidden;line-height: 50px;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } /* #loading */ #loading .loading {text-transform:uppercase;width:150px;text-align:center;line-height:50px;position:absolute;left:0;right:0;top:50%;margin:auto;transform:translateY(-50%);} #loading .loading span {position:relative;z-index:999;color:#fff;} #loading .loading:before {content:'';background:#61bdb6;width:128px;height:36px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;animation:2s loadingBefore infinite ease-in-out;} @keyframes loadingBefore { 0% {transform:translateX(-14px);} 50% {transform:translateX(14px);} 100% {transform:translateX(-14px);} } #loading .loading:after {content:'';background:#ff3600;width:14px;height:60px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;opacity:.5;animation:2s loadingAfter infinite ease-in-out;} @keyframes loadingAfter { 0% {transform:translateX(-50px);} 50% {transform:translateX(50px);} 100% {transform:translateX(-50px);} } /* .featherlight */ .featherlight .modal {overflow-x: hidden;} .featherlight .featherlight-content {padding: 0 !important;border-bottom: 0 !important;margin: 0;width: 90%;max-width: 1200px;height: 90%;max-height: 800px !important;} .featherlight .featherlight-inner {position: relative;width: 100%;height: 100%;text-align: left;} .featherlight .featherlight-inner div.img img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;width: auto;height: auto;max-width: 100%;max-height: 100%;margin: auto;} .featherlight .featherlight-inner p.img_view_title {position: absolute;bottom: 0;left: 0;width: 100%;z-index: 10;padding: 30px 80px 30px 30px;background: rgba(0,0,0,0.7);} .featherlight .featherlight-inner p.img_view_title > span {overflow: hidden;display: block;color: #fff;word-break: keep-all;} .featherlight .featherlight-inner p.img_view_title > span > span {display: block;animation: txt_up ease-in-out 1s;animation-fill-mode: both;} .featherlight .featherlight-inner p.img_view_title > span + span {margin-top: 10px;} .featherlight .featherlight-inner p.img_view_title > span.ko_tit {font-size: 17px;font-weight: 600;} .featherlight .featherlight-inner p.img_view_title > span.en_tit {font-size: 14px;} .featherlight .featherlight-inner p.img_view_title > span.en_tit > span {animation-delay: 1s;} .featherlight .featherlight-inner div.summary {position: absolute;top: 0;right: -70%;z-index: 29;width: 70%;height: 100%;padding-left: 50px;/*display: table;*/text-align: center;box-sizing: content-box;transition: all 0.5s;} .featherlight .featherlight-inner div.summary.active {right: 0;transition: all 0.5s;} .featherlight .featherlight-inner div.summary > div {overflow-y: auto;width: 100%;height: 100%;box-shadow: 5px 5px 40px rgba(0,0,0,0.8);} .featherlight .featherlight-inner div.summary > div > p {width: 100%;min-height: 100%;padding: 45px;background-color: #f4f4f4;font-size: 18px;font-weight: 600;line-height: 1.7em;word-break: keep-all;vertical-align: middle;} .featherlight .featherlight-inner div.summary button {overflow: hidden;position: absolute;top: 50%;left: 0;width: 50px;height: 80px;margin-top: -40px;background-color: #333;border-radius: 5px 0 0 5px;text-indent: -9999px;cursor: pointer;text-indent: -9999px;} .featherlight .featherlight-inner div.summary button::before {content: '';display: block;width: 100%;height: 100%;background-image: url(../img/arrow_summary_btn.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 30px;transition: all 0.3s;} .featherlight .featherlight-inner div.summary button.active::before {transform: rotate(180deg);transition: all 0.3s;} .featherlight .featherlight-close-icon {top: auto !important;bottom: 0;width: 50px !important;height: 50px;line-height: 50px !important;font-size: 30px;background: rgba(255,255,255,.8) !important;} } /******************************************** ~ 767px ********************************************/ @media all and (max-width: 767px) { /**/ #header{position:absolute;z-index:30002;top:0;left:0;width:100%;height: 95px;overflow:hidden;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header.sel {height: 360px;border-bottom:0; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);background: rgba(255,255,255,0.9);overflow: hidden;} #header.sub_on {overflow: visible;transition: none;} #header.sub_on .header {} #header.sub_on .gnb {overflow: hidden;height: 95px;} #header.fix_menu {background: rgba(255,255,255,0.9);position:fixed; top:0;border-bottom:1px solid #ddd;transition: all 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #header .header{position: relative;z-index: 30002;clear:both;/*width: 100%;*/max-width: 1300px;/*height:500px;*/height: 130px;margin: 0 auto;/*padding: 0 382px 0 320px;*/box-sizing:border-box;} #header .header::after {content: '';display: block;clear: both;} #header .header a.other_dp {position: absolute;top: 50%;right: 0;transform: translateY(-50%);} /*#header.sel .header::after {content: '';position: absolute;top: 120px;left: 0;width: 100%;height: 1px;background: #ddd;display: block;clear: both;}*/ #header .header h1{position: absolute;top: 0;left: 0;} #header .header h1 a{display:block;width: 650px;height: 130px;background: url(../img/logo.png) no-repeat 0 50%;/*background-size: auto 50px;*/text-indent: -9999px;} #header.sel .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header.fix_menu .header h1 a{background: url(../img/logo_on.png) no-repeat 50%;/*background-size: auto 50px;*/} #header .header button{display:none;} /* #gnb{width: 100%;margin: 0 auto;text-align: center;box-sizing: border-box;transition:all 0.5s;} #gnb.sel{height: 360px;transition:all 0.3s} #gnb .gnb{transition:all 0.6s} #gnb.sel .gnb{background:url(../img/gnb-visual.png) no-repeat 50px 170px;transition:all 0.6s} #gnb .depth1 {position:relative;} #gnb .depth1::after {content: '';display: block;clear: both;} #gnb.sel .depth1{height: 360px !important} #gnb .depth1 > li {display: inline-block;text-align: center;position:relative;height:500px;} #gnb .depth1 > li > a {position:relative;display:block;padding: 0 40px;height: 95px;line-height: 95px;font-size: 20px;font-weight:500;color:#fff;} #gnb .depth1 > li.sel > a {color: #65bafe;} #header.fix_menu #gnb .depth1 > li > a {color: #333;} #header #gnb.sel .depth1 > li:hover > a {color: #65bafe;} #gnb.sel .depth1 > li > a {color: #333;} #gnb .depth1 > li > a em{position:absolute;top:23px;right:0;display:block;margin:-10px 0 0 0;width:1px;height:16px;background:#ccc;display:none} #gnb .depth2{position:absolute;top:120px;width: 100%;left: 26%;visibility:hidden; transition: all 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860);box-sizing: border-box;} #header.sel #gnb .depth2 {display:block; top: 90px;left: 26%;visibility:visible; transition: all 0.8s cubic-bezier(0.785, 0.135, 0.150, 0.860);} #gnb .depth2 li a{display:block;letter-spacing:-0.4px;padding: 5px 0;font-size:16px;text-align:left;color:#575757;} #gnb .depth2 li a:hover{color:#65bafe;text-decoration: underline;} #gnb .depth2 li.sel a{color:#da204c;} #gnb .mobile{display:none}*/ #allbg{position:fixed;z-index:30000;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);display:none} /* #header .etc_wrap {position: absolute;top: 0;right: 30px;} #header .etc_wrap > ul {font-size: 0;text-align: right;} #header .etc_wrap > ul > li {position: relative;display: inline-block;vertical-align: top;} #header .etc_wrap > ul > li > a {display: block;padding: 0 10px;height: 95px;line-height: 95px;font-size: 16px;color: #fff;} #header .etc_wrap > ul > li.etc04 > a {width: 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_search.png) no-repeat 50%;background-size: auto 20px;} #header .etc_wrap > ul > li.etc05 > a {width: 45px;padding: 0 0 0 20px;font-size: 0;line-height: 0;background: url(../img/ico_top_sitemap.png) no-repeat 50%;} #header.sel .etc_wrap > ul > li > a {color: #333;} #header.sel .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header.fix_menu .etc_wrap > ul > li > a {color: #333;} #header.fix_menu .etc_wrap > ul > li > a:hover {color: #f1a008;} #header.fix_menu .etc_wrap > ul > li.etc05 > a {background: url(../img/ico_top_sitemap_on.png) no-repeat 50%;} #header .etc_wrap > ul > li > ul {overflow: hidden;position: absolute;top: 120px;left: 50%;display: none;z-index: 300;width: 150px;padding: 3px 0;margin-left: -75px;background: #fff;box-shadow: 4px 4px 15px rgba(0,0,0,0.2)} #header .etc_wrap > ul > li > ul > li {border-bottom: 1px solid #eee;} #header .etc_wrap > ul > li > ul > li:last-child {border-bottom: 0;} #header .etc_wrap > ul > li > ul > li > a {display: block;padding: 10px 0;font-size: 15px;} #header .etc_wrap > ul > li > ul > li > a:hover {background: #da204c;color: #fff;}*/ /**/ #menu{position:absolute !important;z-index:10;top:17px;right:0;float:none} #menu a{display:block;margin:0 !important;padding:0 !important;width:42px;height:40px;background:url(../img/menu.png) no-repeat right center;text-indent:-9999em;overflow:hidden} /* grid */ #wrap {position: relative;z-index: 0;width: 100%;/*min-width: 1600px;*/min-height: 800px;} #wrap.wrap_main {/*min-height: 1080px;min-height: 700px;height: 100%;*/min-height: 100%;} .con_grid {position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;padding: 0 12px;box-sizing: border-box;} .con_grid > div {position: relative;width: 90%;height: 100%;margin: 0 auto;} .con_grid > div > span {position: absolute;top: 0;width: 1px;height: 100%;background-color: rgba(0,0,0,0.15);} .con_grid > div > span:nth-child(1) {left: 0;} .con_grid > div > span:nth-child(2) {display: none;left: 50%;} .con_grid > div > span:nth-child(3) {right: 0;} /* #mainWrap */ #mainWrap {width: 100%;height: 100%;/*min-height: 1080px;*/min-height: 700px;padding-bottom: 120px;border: 12px solid #fff;box-sizing: border-box;} #mainWrap::before {content: '';position: absolute;top: 0;left:0;z-index: -2;width: 100%;height: 100%;background-image: url(../img/bg_main.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-attachment: fixed;background-size: cover;} #mainWrap > div.main_wp {/*display: table;*/width: 90%;padding: 0 1px;height: 100%;margin: 0 auto 0;box-sizing: border-box;} #mainWrap > div.main_wp .main_con {position: relative;/*display: table-cell;*/width: 100%;/*vertical-align: middle;*/padding: 100px 0 50px;background-image: url(../img/logo_228.png);background-repeat: no-repeat;background-position: 50% 100%;background-size: auto 24px;} #mainWrap .main_con h1 .go_228 {position: absolute;top: 0;left: 0;width: 100%;margin: 10px 0 30px;padding: 10px 15px;font-size: 13px;background-color: rgba(255,255,255,0.8);border: 1px solid rgba(0,0,0,0.15);text-align: center;box-sizing: border-box;border-right: 0;border-left: 0;} #mainWrap > div.main_wp .main_con h1 img {height: 100px;} #mainWrap .card-carousel { display: flex; align-items: center; justify-content: center; position: relative; left: 0 !important; text-align: center; } #mainWrap .card-carousel .my-card { height: 100px; width: 100px; border-radius: 100px; line-height: 90px; position: relative; z-index: 1; -webkit-transform: scale(0.8) translateY(-50%); transform: scale(0.8) translateY(-50%); opacity: 0; cursor: pointer; pointer-events: none; /*background: #2e5266; background: linear-gradient(to top, #2e5266, #6e8898);*/ background-color: #7a5f2f; background-position: 50% 130%; transition: 1s; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; box-sizing: border-box; } #mainWrap .card-carousel .my-card.active { z-index: 3; -webkit-transform: scale(1) translateY(0) translateX(0); transform: scale(1) translateY(0) translateX(0); opacity: 1; padding-bottom: 30px; pointer-events: auto; transition: 1s; /*line-height: 120px;*/ font-size: 20px; font-weight: 600; background-image: url(../img/ico_year_arrow.png); background-repeat: no-repeat; background-position: 50% 85%; background-size: auto 10px; } #mainWrap .card-carousel .my-card.prev, #mainWrap .card-carousel .my-card.next { z-index: 2; -webkit-transform: scale(0.8) translateY(0) translateX(0); transform: scale(0.8) translateY(0) translateX(0); opacity: 0.6; pointer-events: auto; transition: 1s; } #mainWrap .year_sel {margin: 20px 0 30px;text-align: center;} #mainWrap #cate::after {content: '';display: block;clear: both;} #mainWrap #cate > div {overflow: hidden;display: table;width: 100%;height: 180px;text-align: center;background-color: rgba(255,255,255,0.5);} #mainWrap #cate > div:nth-child(2n) {float: right;} #mainWrap #cate > div > a {position: relative;z-index: 0;overflow: hidden;z-index: 0;display: table-cell;width: 100%;height: 180px;font-size: 20px;font-weight: 600;color: #333;vertical-align: middle;border-top: 1px solid rgba(0,0,0,0.2);border-bottom: 1px solid rgba(0,0,0,0.2);} /*#mainWrap #cate > div > a.active {position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);color: #000;}*/ #mainWrap #cate > div > a::after {content: '';z-index: -1;position: absolute;top: 50%;left: 50%;width: 0;height: 0;background: linear-gradient(0.25turn, #917109, #d3bc49);border-radius: 50%;transform: translate(-50%, -50%) scale(1.8);} #mainWrap #cate > div > a:hover {overflow: hidden;padding-right: 30px;font-size: 21px;font-weight: 800;transition: ease-out all 0.5s;} #mainWrap #cate > div > a:hover::after {width: 100%;height: 504px;transition: all 0.5s;} #mainWrap #cate > div > a .ico {opacity: 0;position: absolute;top: 0;right: 0;z-index: 10;width: 40px;height: 180px;background-image: url(../img/ico_main_active.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: 100% auto} #mainWrap #cate > div > a:hover .ico {right: 20px;opacity: 1;transition: all 0.5s;} /* #footer */ #footer {position: absolute;bottom: 0;left: 0;width: 100%;padding: 0 12px 12px;text-align: center;box-sizing: border-box;} #contain + #footer {background-color: #fff;} #footer .f_info {width: 90%;margin: 0 auto;padding: 20px 0;} #contain + #footer .f_info {border-top: 1px solid #ccc;} #footer cite {display: block;padding: 0 20px;font-size: 13px;font-weight: 400;color: #000;font-style: normal;font-weight: 300;box-sizing: border-box;word-break: keep-all;} /********** 서브페이지 **********/ /**/ #contain{width: 100%;} #contain .contain{position:relative;} #contain .contain:before, #contain .contain:after{clear:both;display:table;content:"";line-height:0} /* 서브비주얼 */ #subVisual {padding: 30px 0 0;margin: 0 -1px 30px;box-sizing: border-box;background-color: #fff;} #subVisual .sub_visual::after {content: '';display: block;clear: both;} #subVisual .sub_visual .visual_logo {} #subVisual .sub_visual .visual_logo img {height: 90px;} #subVisual .sub_visual .visual_wp {text-align: center;padding: 0 10px;} #subVisual .sub_visual .visual_wp .logo_228 {margin-top: 20px;} #subVisual .sub_visual .visual_wp .logo_228 img {height: 20px;} #subVisual .sub_visual .visual_wp h2 {font-size: 21px;font-weight: 600;color: #333;word-break: keep-all;} #subNavi {margin: 20px 0 0;text-align: center;} #subNavi > ul {display: block;width: 100%;padding: 15px;background-color: #f4f4f4;box-sizing: border-box;font-size: 0;text-align: left;} #subNavi > ul > li {text-align: left;} #subNavi > ul > li + li {margin-top: 10px;} #subNavi > ul > li a {display: inline-block;padding: 2px 0;font-size: 15px;font-weight: 600;color: #000;} #subNavi > ul > li.active a {font-size: 15px;font-weight: 600;color: #e71e29;border-bottom: 1px solid #e71e29;} /* 페이지 타이틀 */ #design .page_title {position: relative;padding-top: 45px;margin: 0 0 30px;} #design .page_title .title {margin: 0;display: inline-block;vertical-align: middle;font-size: 17px;font-weight: 600;color: #333;} #design .page_title .title .tit_eng {display: block;margin-top: 3px;font-size: 14px;font-weight: 400;} #design .page_title .s_contents {position: absolute;top: 0;left: 0;height: 40px;padding: 0 10px;vertical-align: middle;font-size: 16px;font-weight: 600;background-color: #7a5f2f;line-height: 40px;text-align: center;color: #fff;} /* #aside */ #aside {display: none;} /**/ #design {position:relative;width: 100%;min-height: 1000px;padding-bottom: 75px;} #design #dkboard .community {max-width: 1300px;margin: 120px auto 0;} /* gallery #design .gallery {width: 1300px;margin: 0 auto;box-sizing: border-box;} #design #g_list {padding: 0 1px;} #design #g_list::after {content: '';display: block;clear: both;} #design #g_list > li {float: left;width: 50%;min-height: 620px;padding: 0 50px 0 0;box-sizing: border-box;} #design #g_list > li:nth-child(2n) {margin-top: 70px;padding: 0 0 0 50px;text-align: right;} #design #g_list > li > a {display: block;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 19px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 16px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 10px;}*/ /* gallery - 수정 210218 */ #design .gallery {width: 90%;margin: 0 auto;padding: 0 12px;box-sizing: border-box;} #design #g_list {padding: 0 1px;font-size: 0;} #design #g_list > li {margin-bottom: 70px;box-sizing: border-box;vertical-align: top;} /*#design #g_list > li:nth-last-of-type(1), #design #g_list > li:nth-last-of-type(2) {margin-bottom: 0;}*/ #design #g_list > li > a {display: block;text-align: center;} #design #g_list > li > a div.img {background-color: #efefef;} #design #g_list > li > a img {max-width: 100%;} #design #g_list > li > a p.title {display: block;text-align: left;margin-top: 10px;} #design #g_list > li > a p.title span {display: block;word-break: keep-all;} #design #g_list > li > a p.title span.ko_tit {font-size: 16px;font-weight: 600;color: #333;} #design #g_list > li > a p.title span.en_tit {font-size: 13px;font-weight: 400;color: #555;} #design #g_list > li > a p.title span + span {margin-top: 5px;} /********** 모바일메뉴 **********/ #blind{position:absolute;z-index:99998;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.7)} #dkleft{display:none;position:absolute;z-index:10;left:0px;top:0px;width:260px;min-height:1000px;background:#fff;overflow:hidden} #dkleft .lefttit{padding:0 0 0 20px;height:70px;background:#f7941d} #dkleft .lefttit button{display:block;position:relative;top:17px;font-size:12px;font-family:'Roboto';color:#fff;border:0;background:transparent} #dkleft .lefttit button i{display:block;margin-bottom:3px;font-size:18px;color:#fff} #dkleft .select .join{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .join i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .select .modify{display:block;position:relative;padding:0 17px;line-height:45px;font-size:16px;color:#000;border-bottom:1px solid #ccc;background:#eee;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .select .modify i{display:inline-block;position:relative;top:5px;padding:0 7px 0 0;font-size:24px;color:#333} #dkleft .depth1{display:block;position:relative;padding:0 15px;line-height:50px;font-size:16px;color:#555;border-bottom:1px solid #ccc;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 strong{position:relative;top:-2px;padding:0 4px;height:14px;line-height:14px;font-size:10px;background:#ff0000;border-radius:30px} #dkleft .depth1 span{font-style:normal;color:#ffa800} #dkleft .depth1 em{position:absolute;z-index:2;top:0;right:4px;width:39px;height:39px;background:url(/web/seomun/img/common/plus.png) no-repeat 50% 50%;background-size:11px 11px} #dkleft .depth1.sel{color:#000;border-bottom:1px solid #596170} #dkleft .depth1.sel em{background:url(/web/seomun/img/common/minus.png) no-repeat 50% 50%;background-size:11px 3px} #dkleft .depth1 i{display:block;margin:15px 10px 0 0;color:#767a81;transition:all 0.2s ease-out 0s;-webkit-transition:all 0.2s ease-out 0s} #dkleft .depth1 i.rightico{float:right} #dkleft .depth1.sel i.rightico{color:#00a19c;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);transition:all 0.2s ease-in-out 0s;-webkit-transition:all 0.2s ease-in-out 0s} #dkleft .depth2{display:none;background:#757c89} #dkleft .depth2 a{display:block;padding:0 20px;line-height:40px;font-size:13px;color:#fff;border-bottom:1px solid #596170;text-decoration:none} #dkleft .depth2 a.sel{color:#81c341} #closeleft{position:fixed;z-index:99999;left:215px;top:17px;display:block;font-size:30px;font-family:Linearicons-Free;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} #closeleft:before{content:"\e870"} /*#gotop, #gotop a{display:none !important}*/ #gotop{display: none;position:fixed;z-index:90000;/*bottom:-40px;left:50%;*/bottom: 10px;right: 5%;} #gotop a{display:block;width:40px;height: 40px;padding: 18px 0 0 0;font-size:10px;font-weight:800;text-align:center;color:#fff;background:rgba(0,0,0,0.5) url(../img/gotop.png) no-repeat 48% 30%;border-radius:50px;overflow:hidden;line-height: 40px;} @keyframes mv00 { from {background-position:center 110px; } to {background-position:center 0px; } } @keyframes mv01 { from {top:100px; opacity:0;} to {top:170px; opacity:1;} } @keyframes mv02 { from {top:200px;opacity:0;} to {top:295px;opacity:1;} } @keyframes v_img { from {right:50px; opacity:0} to {right:0px; opacity:1} } @keyframes v_text { from {padding-left:30px; opacity:0} to {padding-left:0px; opacity:1} } @keyframes v_navi { from {margin-top:-20px; opacity:0} to {margin-top:0px; letter-spacing:-1px; opacity:1} } @keyframes con_bg { from {background:url(../img/sub_con_bg.png) repeat-x left -30px; } to {background:url(../img/sub_con_bg.png) repeat-x left 138px; } } /* #loading */ #loading .loading {text-transform:uppercase;width:150px;text-align:center;line-height:50px;position:absolute;left:0;right:0;top:50%;margin:auto;transform:translateY(-50%);} #loading .loading span {position:relative;z-index:999;color:#fff;} #loading .loading:before {content:'';background:#61bdb6;width:128px;height:36px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;animation:2s loadingBefore infinite ease-in-out;} @keyframes loadingBefore { 0% {transform:translateX(-14px);} 50% {transform:translateX(14px);} 100% {transform:translateX(-14px);} } #loading .loading:after {content:'';background:#ff3600;width:14px;height:60px;display:block;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;opacity:.5;animation:2s loadingAfter infinite ease-in-out;} @keyframes loadingAfter { 0% {transform:translateX(-50px);} 50% {transform:translateX(50px);} 100% {transform:translateX(-50px);} } /* .featherlight */ .featherlight .modal {} .featherlight .featherlight-content {padding: 0 !important;border-bottom: 0 !important;margin: 0;width: 90%;max-height: 60%;/*-ms-overflow-style: none;scrollbar-width: none;*/} /*.featherlight .featherlight-content::-webkit-scrollbar {display: none;}*/ .featherlight .featherlight-inner {position: relative;width: 100%;height: 100%;text-align: left;} .featherlight .featherlight-inner div.img img {/*position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;*/width: auto;height: auto;max-width: 100%;max-height: 100%;margin: auto;} .featherlight .featherlight-inner p.img_view_title {/*position: absolute;bottom: 0;left: 0;width: 100%;z-index: 10;*/padding: 20px 50px 20px 20px;background: #fff;} .featherlight .featherlight-inner p.img_view_title > span {overflow: hidden;display: block;color: #fff;word-break: keep-all;} .featherlight .featherlight-inner p.img_view_title > span > span {display: block;animation: txt_up ease-in-out 1s;animation-fill-mode: both;color: #333;} .featherlight .featherlight-inner p.img_view_title > span + span {margin-top: 10px;} .featherlight .featherlight-inner p.img_view_title > span.ko_tit {font-size: 16px;font-weight: 600;} .featherlight .featherlight-inner p.img_view_title > span.en_tit {font-size: 13px;color: #555;} .featherlight .featherlight-inner p.img_view_title > span.en_tit > span {animation-delay: 1s;} .featherlight .featherlight-inner div.summary {/*position: absolute;*/position: fixed;top: 0;right: -90%;z-index: 30;width: 90%;height: 100%;padding-left: 40px;/*display: table;*/text-align: center;box-sizing: content-box;transition: all 0.5s;} .featherlight .featherlight-inner div.summary.active {right: 0;transition: all 0.5s;z-index: 10000;} .featherlight .featherlight-inner div.summary > div {overflow-y: auto;width: 100%;height: 100%;box-shadow: 5px 5px 40px rgba(0,0,0,0.8);} .featherlight .featherlight-inner div.summary > div > p {width: 100%;min-height: 100%;padding: 50px 20px 20px;background-color: #f4f4f4;font-size: 16px;font-weight: 600;line-height: 1.6em;word-break: keep-all;vertical-align: middle;} .featherlight .featherlight-inner div.summary button {overflow: hidden;position: absolute;top: 50%;left: 0;width: 40px;height: 60px;margin-top: -30px;background-color: #333;border-radius: 5px 0 0 5px;text-indent: -9999px;cursor: pointer;text-indent: -9999px;border: 1px solid rgba(255,255,255,0.2);border-right: 0;} .featherlight .featherlight-inner div.summary button::before {content: '';display: block;width: 100%;height: 100%;background-image: url(../img/arrow_summary_btn.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 20px;transition: all 0.3s;} .featherlight .featherlight-inner div.summary button.active::before {transform: rotate(180deg);transition: all 0.3s;} .featherlight .featherlight-close-icon {top: 0;width: 40px !important;height: 40px;line-height: 40px !important;font-size: 26px;background: rgba(255,255,255,.8) !important;} } /* animation - txt_up */ @keyframes txt_up { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }