@charset "utf-8"; @import url(../fonts/Roboto/style.css); @import url(../fonts/myfont/style.css); @import url(../fonts/NotoSans/style.css); @import url(../fonts/iconfont/iconfont.css); @font-face { font-family: 'myfont'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: 800; font-style: normal; } @font-face { font-family: 'myfont'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'myfont'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: 300; font-style: normal; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} i.fa{font-style:normal !important;} mark {background-color:#fff;color:#000;font-style:italic;font-weight:bold;} del {text-decoration: line-through} abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;} hr {display:block;height:0; border:0;border-top:0; margin:0;padding:0;} input, select {vertical-align:middle;resize:none} caption, th, td {font-weight:normal} table caption {visibility:hidden;width:0;height:0;overflow:hidden} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal} img {border:0;vertical-align:middle; max-width:100%} legend {display:none} html{font-size:10px; height:100%;} body{height:100%;} body, select,input,textarea,button {font-size:1.6rem; line-height:160%; font-family: "myfont","notosans","맑은 고딕","Nanum Gothic","Microsoft Yahei","Gulim", "dotum",Helvetica, sans-serif; color:#333; letter-spacing:-.06em; } input{font-size:1em;} iframe#hiddenframe {display:none;width:0;height:0} label,button{cursor:pointer} input, button, select, textarea { outline: none;} .iconfont{font-size:1em;} a{color:#333;text-decoration:none} a:hover, a:focus{color:#af0011;text-decoration:none} *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .placeholdersjs { color: #aaa !important; } @media (min-width:736px){ .nop{display:none; position:absolute; width:0; height:0; overflow:hidden;} } .clear{display:block; float:none; clear:both; border:0; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important;} .wrap{width:1200px; margin:0 auto; position:relative; zoom:1;} .wrap:after {display:block;visibility:hidden;clear:both;content:""} #bodyWrap{min-height:100%; position:relative; overflow-x:hidden;} @media (max-width:1200px){ #bodyWrap{width:1200px} } /* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #EEE;background:#fff} .hd_pops.mobile {display:none;} .hd_pops_con {} .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff} #header{position:fixed; z-index:20; left:0;right:0; top:0;} #header:before{position:absolute; background:#FFF; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:""; box-shadow:0 0 .3em rgba(0,0,0,.3)} #header h1{float:left; padding:2rem 0;} #header h1 img{height:4rem; } #header .hd_link{position:relative; float:right; margin-top:2.5rem; border:1px solid #DDD; padding:0 .5em; border-radius:.3em;} #header .hd_link li{position:relative; float:left; margin-left:0;font-size:14px; line-height:3rem; } #header .hd_link li a{display:block; padding:0 1em;} #header .hd_link li:before{position:absolute; top:50%; margin-top:-.5em; height:1em; width:1px; left:0; background:#ddd; content:"";} #header .hd_link li:first-child:before{display:none;} #btnMobileMenu{display:none} #topMenu{position:relative; float:right; margin-right:2em;} #topMenu dl{} #topMenu dd{float:left; position:relative; } #topMenu dd > a{position:relative; text-align:center; z-index:2; display:block; font-size:1em; line-height:8rem; height:8rem; padding:0 2em; letter-spacing:0; } #topMenu dd:hover > a{color:#af0011} #mobileMenu{position:fixed; display:none; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:99 } #mobileMenu ol{border-bottom:1px solid #DDD; line-height:4rem; text-align:center; } #mobileMenu ol:after {display:block;visibility:hidden;clear:both;content:""} #mobileMenu ol li{display:inline-block; padding:0 2rem} #mobileMenu .btn_close{position:absolute; right:100%; width:6rem; background:#333; height:6rem; text-indent:-100rem; overflow:hidden;} #mobileMenu .btn_close:after{position:absolute; left:50%; top:50%; margin-left:-40%; margin-top:-1px; width:80%; height:2px; background:#FFF; content:""; transform:rotate(45deg);-ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);-o-transform:rotate(45deg); } #mobileMenu .btn_close:before{position:absolute; left:50%; top:50%; margin-left:-40%; margin-top:-1px; width:80%; height:2px; background:#FFF; content:""; transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg); } #mobileMenu section{position:absolute; right:-70%; top:0; width:70%; height:100%; background:#FFF; overflow:auto; } #mobileMenu dl {margin:10%; } #mobileMenu dl dd{border-bottom:1px solid #999; } #mobileMenu dl dd > a{position:relative; display:block; padding-left:1rem; font-size:1.2em; line-height:45px;} #mobileMenu dl dd > a:after{ position:absolute; top:0; right:2rem; content:"\f107"; font-family:'fontawesome';} #mobileMenu dl dd.active > a:after{ content:"\f106";} #mobileMenu dl dd > ul{position:relative; max-height:0; overflow:hidden;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} #mobileMenu dl dd.active > ul{max-height:50rem; border-top:1px solid #DDD; } #mobileMenu dl dd > ul a{display:block; padding-left:1rem; border-bottom:1px solid #FFF; line-height:2.6em;} #mobileMenu dl dd > ul a:before{content:"- "; } /* #main_visual{position:relative; z-index:1; overflow:hidden; margin-top:8rem;} #main_visual ul{position:relative; z-index:1;} #main_visual li{position:relative; width:100%; height:80rem; background:#f3f4f7} #main_visual .swiper-pagination{position:absolute; z-index:10; bottom:3rem; width:100%; display:none} #main_visual .swiper-pagination-bullet{position:relative; width:8px; height:8px;margin:0 3px; background:#af0011; opacity:1; border-radius:1em; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} #main_visual .swiper-pagination-bullet-active{background-color:#af0011;width:6rem; } #main_visual .mvpn{position:absolute; top:50%; z-index:3; padding:0;height:0; left:0; right:0; } #main_visual .mvpn a{position:absolute; top:-2em; width:4em; height:4em; padding:0; margin:0;background:none; border:0; cursor:pointer; } #main_visual .mvpn a:after{position:absolute; top:50%; width:1em; height:1em; border-style:solid; border-color:#FFF; border-width:2px; content:"";} #main_visual .mvpn .swiper-button-prev{left:-4em;} #main_visual .mvpn .swiper-button-next{right:-4em;} #main_visual .mvpn .swiper-button-prev:after{left:1.5em; border-color:#999 transparent transparent #999; transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top; } #main_visual .mvpn .swiper-button-prev:after{transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} #main_visual .mvpn .swiper-button-next:after{right:1.5em; border-color:#999 #999 transparent transparent ; transform-origin:right top;-ms-transform-origin:right top;-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top; } #main_visual .mvpn .swiper-button-next:after{transform:rotate(45deg);-ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #main_visual section{position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; padding-bottom:15em; z-index:4; display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; } #main_visual section h3{position:relative;font-size:3em; line-height:120%; margin-bottom:.5em; font-weight:800; } #main_visual section h6{position:relative;font-size:2em; line-height:120%; font-weight:400; } #main_visual section a{position:relative;display:inline-block; background:#0077ed; color:#FFF; border-radius:2em; margin-top:2em; border:1px solid #0077ed; padding:.6em 0 .4em; width:12em; margin:2em auto 0;} #main_visual section dl{position:absolute; left:0; right:0; bottom:0;} #main_visual section dl dd{width:15em; height:18em; overflow:hidden; margin:0 .5em; border-radius:1em 1em 0 0} */ /*visual animation #main_visual section .a1{left:50px; opacity:0; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 300ms; transition-delay:300ms; } #main_visual section .a2{left:50px; opacity:0; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 800ms; transition-delay:800ms; } #main_visual section .a3{left:50px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 1200ms; transition-delay:1200ms; } #main_visual section .a4{left:50px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 1500ms; transition-delay:1500ms; } #main_visual .swiper-slide-active section .a1{left:0; opacity:1} #main_visual .swiper-slide-active section .a2{left:0; opacity:1} #main_visual .swiper-slide-active section .a3{left:0; opacity:1} #main_visual .swiper-slide-active section .a4{left:0; opacity:1} #main_visual section dl dd{opacity:0; top:4em; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease; } #main_visual section dl dd:nth-child(1){-webkit-transition-delay: 2000ms; transition-delay:2000ms;} #main_visual section dl dd:nth-child(2){-webkit-transition-delay: 2200ms; transition-delay:2200ms;} #main_visual section dl dd:nth-child(3){-webkit-transition-delay: 2400ms; transition-delay:2400ms;} #main_visual section dl dd:nth-child(4){-webkit-transition-delay: 2600ms; transition-delay:2600ms;} #main_visual .swiper-slide-active section dl dd:nth-child(1){top: 0; opacity:1;} #main_visual .swiper-slide-active section dl dd:nth-child(2){top: 0; opacity:1;} #main_visual .swiper-slide-active section dl dd:nth-child(3){top: 0; opacity:1;} #main_visual .swiper-slide-active section dl dd:nth-child(4){top: 0; opacity:1;} */ #main_visual2{position:relative; z-index:1; overflow:hidden; margin-top:8rem;} #main_visual2 ul{position:relative; z-index:1;} #main_visual2 li{position:relative; width:100%; height:100rem; background:#f3f4f7} #main_visual2 .swiper-pagination{position:absolute; z-index:10; bottom:3rem; width:100%; display:none} #main_visual2 .swiper-pagination-bullet{position:relative; width:8px; height:8px;margin:0 3px; background:#af0011; opacity:1; border-radius:1em; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;} #main_visual2 .swiper-pagination-bullet-active{background-color:#af0011;width:6rem; } #main_visual2 .mvpn{position:absolute; top:50%; z-index:3; padding:0;height:0; left:0; right:0; } #main_visual2 .mvpn a{position:absolute; top:-2em; width:4em; height:4em; padding:0; margin:0;background:none; border:0; cursor:pointer; } #main_visual2 .mvpn a:after{position:absolute; top:50%; width:1em; height:1em; border-style:solid; border-color:#FFF; border-width:2px; content:"";} #main_visual2 .mvpn .swiper-button-prev{left:-4em;} #main_visual2 .mvpn .swiper-button-next{right:-4em;} #main_visual2 .mvpn .swiper-button-prev:after{left:1.5em; border-color:#999 transparent transparent #999; transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top; } #main_visual2 .mvpn .swiper-button-prev:after{transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} #main_visual2 .mvpn .swiper-button-next:after{right:1.5em; border-color:#999 #999 transparent transparent ; transform-origin:right top;-ms-transform-origin:right top;-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top; } #main_visual2 .mvpn .swiper-button-next:after{transform:rotate(45deg);-ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #main_visual2 section{position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; z-index:4; display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; } #main_visual2 section h3{position:relative;font-size:3em; line-height:120%; margin-bottom:.3em; font-weight:800; } #main_visual2 section h6{position:relative;font-size:2em; line-height:120%; font-weight:400; } #main_visual2 .slide_1 section > dl {margin-top:2em} #main_visual2 .slide_1 section > dl > dd{width:15.6%; background:#FFF; margin:.5%; padding:2em 0} #main_visual2 .slide_1 section > dl > dd > dl{ display:block;} #main_visual2 .slide_1 section > dl > dd > dl dt{width:100%; height:12rem} #main_visual2 .slide_1 section > dl > dd > dl dt img{max-width:100%; max-height:100%;} #main_visual2 .slide_1 section > dl > dd > dl dd{width:100%; } #main_visual2 .slide_1 section > dl > dd > dl dd h4{font-size:1em; font-weight:600; line-height:120%; } #main_visual2 .slide_1 section > dl > dd > dl dd p{font-size:.9em; margin-top:.5em;font-family:'notosans'; line-height:1.2em} #main_visual2 .slide_2 section > dl {margin-top:4em} #main_visual2 .slide_2 section > dl > dd{width:15.66%; background:#FFF; margin:.5% } #main_visual2 .slide_3 section > dl {margin-top:2em} #main_visual2 .slide_3 section > dl > dd{width:13.66%; background:#FFF; margin:.5%; } #main_visual2 section .a1{top:50px; opacity:0; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 300ms; transition-delay:300ms; } #main_visual2 section .a2{top:50px; opacity:0; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 800ms; transition-delay:800ms; } #main_visual2 section .a3{top:50px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 1200ms; transition-delay:1200ms; } #main_visual2 section .a4{top:50px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;-webkit-transition-delay: 1500ms; transition-delay:1500ms; } #main_visual2 .swiper-slide-active section .a1{top:0; opacity:1} #main_visual2 .swiper-slide-active section .a2{top:0; opacity:1} #main_visual2 .swiper-slide-active section .a3{top:0; opacity:1} #main_visual2 .swiper-slide-active section .a4{top:0; opacity:1} #main_visual2 section dl dd{opacity:0; top:4em; -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease; } #main_visual2 section dl dd:nth-child(1){-webkit-transition-delay: 2000ms; transition-delay:2000ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(1){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(2){-webkit-transition-delay: 2100ms; transition-delay:2100ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(2){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(3){-webkit-transition-delay: 2200ms; transition-delay:2200ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(3){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(4){-webkit-transition-delay: 2300ms; transition-delay:2300ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(4){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(5){-webkit-transition-delay: 2400ms; transition-delay:2400ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(5){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(6){-webkit-transition-delay: 2500ms; transition-delay:2500ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(6){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(7){-webkit-transition-delay: 2600ms; transition-delay:2600ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(7){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(8){-webkit-transition-delay: 2700ms; transition-delay:2700ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(8){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(9){-webkit-transition-delay: 2800ms; transition-delay:2800ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(9){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(10){-webkit-transition-delay: 2900ms; transition-delay:2900ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(10){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(11){-webkit-transition-delay: 3000ms; transition-delay:3000ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(11){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(12){-webkit-transition-delay: 3100ms; transition-delay:3100ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(12){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(13){-webkit-transition-delay: 3200ms; transition-delay:3200ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(13){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(14){-webkit-transition-delay: 3300ms; transition-delay:3300ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(14){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(15){-webkit-transition-delay: 3400ms; transition-delay:3400ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(15){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(16){-webkit-transition-delay: 3500ms; transition-delay:3500ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(16){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(17){-webkit-transition-delay: 3600ms; transition-delay:3600ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(17){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(18){-webkit-transition-delay: 3700ms; transition-delay:3700ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(18){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(19){-webkit-transition-delay: 3800ms; transition-delay:3800ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(19){top: 0; opacity:1;} #main_visual2 section dl dd:nth-child(20){-webkit-transition-delay: 3900ms; transition-delay:3900ms;} #main_visual2 .swiper-slide-active section dl dd:nth-child(20){top: 0; opacity:1;} #ma{padding:10rem 0;text-align:center;} #ma .b1 > dd{width:32.33%; margin:.5%; border-radius:.5em; padding:1em;box-shadow:0 0 .3em rgba(0,0,0,.2)} #ma .b1 > dd dl{ } #ma .b1 > dd dt{width:40%; text-align:center; height:120px} #ma .b1 > dd dt img{max-width:100%; max-height:100%;} #ma .b1 > dd dd{width:55%; } #ma .b1 > dd dd h4{font-size:2rem; font-weight:600; line-height:120%; } #ma .b1 > dd dd p{font-size:1em; margin-top:.5em;font-family:'notosans'; line-height:1.2em} #ma .b2{ margin-top:2em; text-align:center; } #ma .b2{ } #ma .b2 span{font-size:2.6rem; line-height:4rem; display:block; margin-top:1em;} #mb{padding:10rem 0; text-align:center; position:relative;font-size:1em; } #mb:before{position:absolute; background:rgba(0,0,0,.05); top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #mb header{width:auto; width:74%; margin:0 auto;} #mb h3{font-size:2em; font-weight:400; line-height:120%; } #mb h2{font-size:3.2em; font-weight:800; line-height:120%; } #mb h2 strong{color:#af0011} #mb h6{font-size:1.2em;} #mb p{margin-top:1em; font-family:'notosans'} #mb article{margin-top:2em;} #mb canvas {position: absolute;top: 0;left:50%;width: 150vw; margin-left:-50vw; height: 60vw;} #mb #canvas {z-index: 1;opacity: 0.2;} #mb #canvasbg {z-index: -10;-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);filter: blur(3px); opacity: 0.8;} #mc{padding:10rem 0; text-align:center; position:relative; z-index:2;} #mc:before{position:absolute; background:#fff; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #mc dl{ margin-top:2em; background-size:cover; font-size:1.2em;} #mc dl dt{width:40%; background:url(/img/mc_bg.jpg) center no-repeat; background-size:cover; border-radius:1em;} #mc dl dt:after{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,.6) url(/img/logo_b.png) center center no-repeat; background-size:60%; content:"";} #mc dl dd{width:55%} #mc dl dd article{ text-align:left; position:relative; } #mc dl dd article h4{font-size:2.6em; font-weight:600; line-height:1em; color:#af0011} #mc dl dd article p{ margin:.5em 0;} #md{padding:10rem 0 5rem; position:relative; } #md:before{position:absolute; background:#f6f6f6; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #md dl{font-size:1.2em;} #md dl dt{} #md dl dt h6{color:#af0011; font-size:1.3em;} #md dl dt h4{font-size:4.6em; font-weight:600; line-height:1.2em; } #md dl dd {} #md2{padding:10rem 0; position:relative; } #md2:before{position:absolute; background:url(/img/md_bg.jpg) center no-repeat; background-attachment:fixed; background-size:cover; top:0; bottom:0; left:50%; margin-left:-50vw; width:100vw; min-width:100%; z-index:-1; content:"";} #md2 .bg{position:absolute; background:rgba(175,0,17, .8); top:0; bottom:0; left:50%; margin-left:-50vw; width:100vw; min-width:100%; z-index:-1; content:"";} #md2 dd{width:33%; text-align:center; color:#FFF;} #md2 dd i{display:inline-block; background:rgba(0,0,0,.5); width:6em; border-radius:50%; padding:1em;} #md2 dd h6{margin:1em 0; font-size:1.4em; } #me{padding:10rem 0; text-align:center; position:relative; } #me dl{ padding:4em 0; background:#333; color:#FFF; border-radius:2em;} #me dl + dl{margin-top:2em;} #me dl.me1{background:rgba(175,0,17, .6);} #me dl.me2{background:rgba(175,0,17, .8);} #me dl.me3{background:rgb(160, 64, 206);} #me dl dt{width:35%; padding:0 5%; } #me dl dd{} #me dl dt h4{font-size:4rem; line-height:130%; font-weight:800; line-height:130%;} #me dl dt img{display:block; margin-top:.5em; } #me dl dt a{display:block; margin-top:1em; background:#FFF; color:#333; font-size:2.5rem; padding:.6em;} #me dl dt span{display:block; margin-top:.5em; font-size:3.5rem; font-weight:800; line-height:100%;} #me dl dd{width:65%; text-align:left;border-left:1px solid #FFF; padding-left:5%;} #me dl dd h3{font-size:4rem; font-weight:800; line-height:130%;} #me dl dd h4{font-size:3rem; font-weight:800; line-height:130%;} #me dl dd p{font-size:2rem; margin-top:1em;line-height:130%;} #me dl dd h5{font-size:2.5rem; font-weight:800; line-height:130%;} #me dl dd h6{font-size:2rem; margin-top:1em;line-height:130%;} #me dl dd ul{padding:0; list-style-type: none; margin-top:.8em; } #me dl dd ul li{position:relative; margin:.5em 0; text-align:left; line-height:130%; padding-left:1em;} #me dl dd ul > li:before{position:absolute; top:0; left:0; content:"•"; color:#fff;} #me dl dd ul > li strong{} #me dl dd ul > li strong:after{content:"|"; padding:0 .6em; opacity:.3} #CLASS{padding:10rem 0;} #CLASS .tabs{} #CLASS .tabs dd{ font-size:1.5em; padding:.8em 2em; cursor:pointer; background:#EEE; margin:0 .1em; border-radius:.5em;} #CLASS .tabs dd.on{background:#af0011; color:#FFF; } #CLASS .tabs dd.on:after{ position:absolute; left:50%; top:100%; border:.3em solid transparent; border-top-color:#af0011; border-left-color:#af0011; content:"";} #CLASS article{position:relative; margin:4em auto 0; text-align:center; width:700px; display:none;} #CLASS article.on{display:block;} #CLASS article h6{font-size:1.3em; background:#} #CLASS article div.cr{color:#af0011; font-size:.9em; margin-top:1em;} #CLASS article.tab_ct1 ul{border-top:1px solid #DDD; text-align:left; margin-top:2em; } #CLASS article.tab_ct1 ul li{border-bottom:1px solid #DDD; display:flex; padding:1em 2em .8em} #CLASS article.tab_ct1 ul li label{width:6em; border-radius:4em; border:.1em solid #af0011; color:#af0011; text-align:center; } #CLASS article.tab_ct1 ul li span{width:8em; color:#af0011; text-align:right; } #CLASS article.tab_ct1 ul li p{flex-grow:1; margin:0 1em;} #CLASS article.tab_ct2 ul{border-top:1px solid #DDD; text-align:left; margin-top:2em;} #CLASS article.tab_ct2 ul li{border-bottom:1px solid #DDD; display:flex; padding:1em 2em .8em} #CLASS article.tab_ct2 ul li label{width:6em; border-radius:4em; border:.1em solid #af0011; color:#af0011; text-align:center; } #CLASS article.tab_ct2 ul li p{flex-grow:1; margin:0 1em;} #CLASS article.tab_ct3 > p{font-size:1.2em; margin-top:1em;} #CLASS article dl dd{width:19%; margin:.5%; background:#EEE; padding:1em 0; text-align:center; display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; } #CLASS article dl dd strong{font-weight:700; color:#666;} #CLASS article dl dd p{font-size:.9em; line-height:130%;} #PARTNERS{padding:10rem 0; position:relative; } #PARTNERS:before{position:absolute; background:#f6f6f6; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #PARTNERS dl.h1{font-size:1em; background:#FFF; padding:2em;} #PARTNERS dl.h1 dt{} #PARTNERS dl.h1 dt h6{color:#af0011; font-size:1.3em;} #PARTNERS dl.h1 dt h4{font-size:4em; font-weight:800; line-height:1.2em; } #PARTNERS dl.h1 dd{flex-grow:1; padding-left:5em; color:#999} #PARTNERS > h6{ font-size:2em;line-height:1.2em; margin-top:2em; text-align:center; } #PARTNERS > h6 strong{font-weight:800; font-size:1.2em;} #PARTNERS dl.s1{margin-top:5em;} #PARTNERS dl.s1 dt{ width:35%; } #PARTNERS dl.s1 dt img{ width:100%; } #PARTNERS dl.s1 dd{ width:55%; } #PARTNERS dl.s1 dd h4{font-size:3em; line-height:100%; font-weight:300; color:#999; margin-bottom:.6em; padding-bottom:.3em; border-bottom:1px solid #AAA;} #PARTNERS dl.s1 dd h4 strong{font-weight:800; color:#000} #PARTNERS dl.s1 dd ul{margin-top:1em;font-family:'notosans'} #PARTNERS dl.s1 dd ul li{position:relative; padding-left:1.5em;} #PARTNERS dl.s1 dd ul li:before{position:relative; left:-1em; content:"\e674"; font-family:"iconfont"; color:#af0011;} #PARTNERS dl.s1 dd p{margin-top:.5em;font-family:'notosans'} #PARTNERS dl.s1.dtr dd{text-align:right;} #PARTNERS p{} #PARTNERS ul, #PARTNERS ol{padding:0; list-style-type: none; } #PARTNERS li{position:relative; line-height:130%; margin:.5em 0; padding-left:.6em; } #PARTNERS ul > li:before{ content:"-"; position:relative; margin-left:-.6em; display:inline-block; width:.6em; text-align:left; } #PARTNERS ol{counter-reset:sign-num; } #PARTNERS ol > li{ padding-left:1em;} #PARTNERS ol > li:before {position:relative; width:1em; margin-left:-1em; top:0; left:-.3em; counter-increment:sign-num; content:counter(sign-num)'.'; font-size:1em;letter-spacing:-0.6px; } #mf2{padding:10rem 0; text-align:center; position:relative;} #mf2:before{position:absolute; background:url(/img/mf_bg.jpg) center no-repeat; background-size:cover; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #mf2 article{position:relative; z-index:1; } #mf2 article:before{position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; content:"";} #mf2 article header{ } #mf2 article header h6{font-size:1.2em;} #mf2 article header h5{font-size:1.5em;} #mf2 article header h3{font-size:3.6em; font-weight:800; line-height:100%; margin:.5em 0; } #mf2 article dl{ } #mf2 article dl dt{width:100%; padding-bottom:2em;} #mf2 article dl dt strong{width:100%; font-size:2em; } #mf2 article dl dd{width:20em; margin:.3em;text-align:center; background:#FFF; padding:2em 2em; padding-top:4em; border-radius:.4em;} #mf2 article dl dd:before{position:absolute; top:1em; left:50%; width:2em; margin-left:-1em; height:.3em; border-radius:1em; background:#AAA; content:"";} #mf2 article dl i{display:inline-block; width:4em; } #mf2 article dl h6{font-size:1.4em; line-height:120%; margin:1em 0 .8em; } #mf2 article dl p{opacity:.8; line-height:130%;font-family:'notosans' } .sTitle{ margin-bottom:4rem; text-align:center; } .sTitle strong{position:relative; display:inline-block; font-size:6rem; line-height:100%; color:#af0011; font-weight:800; text-transform:capitalize } .sTitle strong:after{display:block; width:.1em; height:.1em; background:#aaa; content:""; margin:.5em auto; border-radius:50%; box-shadow:.4em 0 0 #aaa,-.4em 0 0 #aaa} #PACKAGE{padding: 0; border:1px solid #EEE; padding:3em;} /*#PACKAGE:before{position:absolute; background:#eeE; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";}*/ #PACKAGE dl{} #PACKAGE dl dd{width:80%; } #PACKAGE dl dd h3{font-size:3rem; font-weight:800; } #PACKAGE dl dt{width:20%; } #PACKAGE p{ margin-top:1em; text-align:right;} #STUDIO{padding:10rem 0; text-align:center; } #STUDIO .hd{ border:1px solid #DDD; } #STUDIO .hd dd{width:18%; text-align:center; padding:2em 0; border-radius:.5em; } #STUDIO .hd dd + dd{ } #STUDIO .hd dd p{font-size:2rem; line-height:100%; margin-top:1em;} #STUDIO .hd dd i{display:inline-block; width:5rem; } #STUDIO h6{position:absolute; background:rgba(255,255,255,.7); padding:2em; top:2em; right:0; left:0; font-size:2.4rem; line-height:130%; font-weight:600;} #REFERENCE{padding:10rem 0; text-align:center; } #REFERENCE:before{position:absolute; background:#EEE; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #REFERENCE header img{height:6rem; } #REFERENCE header strong{line-height:5rem; font-size:4rem; vertical-align:middle;font-weight:800; padding-left:.5em; } #REFERENCE header p{display:block; margin-top:1em; color:#999; font-size:1.8rem; } #REFERENCE .ranking{ } #REFERENCE .ranking dt{ margin:0 3rem; margin-top:6rem; background:#FFF; font-size:2rem; padding-top:0;box-shadow:.1em .1em .8em rgba(0,0,0,.1); } #REFERENCE .ranking dd{ margin:0 3rem; margin-top:4rem; background:#FFF; font-size:1.8rem;padding-top:0;box-shadow:.1em .1em .8em rgba(0,0,0,.1); } #REFERENCE .ranking article{padding:1rem;} #REFERENCE .ranking h4{position:relative; margin:0; background:#af0011; color:#ffff07; padding:.6em; font-weight:600; } #REFERENCE .ranking dd h4{ color:#fff; } #REFERENCE .ranking h4 strong{ color:#FFF;font-weight:800;position:absolute; top:100%; right:0; width:2.5em; height:2em; margin-top:.5em; right:-.5em; line-height:2.3em; background:#af0011; color:#ffff07; text-align:center} #REFERENCE .ranking h4 strong:after{ position:absolute; top:0; right:-.6em; border-color:transparent; border-style:solid; border-width:1em .6em 1em 0; border-top-color:#af0011; content:""; } #REFERENCE .ranking h4 strong:before{ position:absolute; bottom:0; right:-.6em; border-color:transparent; border-style:solid; border-width:1em .6em 1em 0; border-bottom-color:#af0011; content:"";} #REFERENCE .best{margin:-1%; border-top:1px solid #AAA; margin-top:8rem; padding-top:5rem;} #REFERENCE .best dd{ margin:.5%; width:19%; background:#FFF; padding:1rem; box-shadow:.1em .1em .8em rgba(0,0,0,.1);} #REFERENCE .best dd img{width:100%} #REFERENCE .best dd p{ height:3em;} #REFERENCE .best dd p img{max-height:3em; width:auto; height:auto;} #REFERENCE .reference{margin:-.5%; border-top:1px solid #AAA; margin-top:8rem; padding-top:5rem;} #REFERENCE .reference dd{ margin:.5%; width:15.66%; background:#FFF; box-shadow:.1em .1em .8em rgba(0,0,0,.1);} #REFERENCE footer{background:#777; color:#FFF; padding:2em 0; font-size:3rem; line-height:150%; margin-top:10rem; font-weight:300} #REFERENCE .cate_title{margin-top:4em; margin-bottom:2em; text-align:left; font-size:2.4rem; border-bottom:1px solid #666;} #REFERENCE .cate_title strong{display:inline-block; line-height:180%; background:#666; color:#FFF; padding:.1em 2em 0 2em; text-transform: lowercase} #REFERENCE .list{margin:-.5%; } #REFERENCE .list dd{ margin:.5%; width:19%; background:#FFF; padding:.6em; } #REFERENCE .list dd img{width:100%} #REFERENCE .list dd h6{font-size:1.2em; padding:.8em 0; border-bottom:1px solid #DDD;} #REFERENCE .list dd p{margin-top:.6em;} #REFERENCE .list dt{width:100%; background:#FFF; padding:8em 0} #PROCESS{padding:10rem 0} #PROCESS dl{margin:-1%;} #PROCESS dl dd{margin:1%; width:31.33%; } #PROCESS dl dd p{ background:#af0011; color:#FFF; text-align:center; padding:1em ; font-size:2rem;} #CLIENT{padding:10rem 0} #CLIENT:before{position:absolute; background:#EEE; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #CLIENT dl{margin:-.5%;} #CLIENT dl dd{margin:.5%; width:15.66%; box-shadow:.1em .1em .8em rgba(0,0,0,.1); } #CLIENT dl dd .bg_img{ display:block; padding-top:50%; background-color:#FFF; background-position:center; background-repeat:no-repeat; background-size: 70%; } #mg{padding:10rem 0; text-align:center; } #mg h4{font-weight:700; line-height:180%; font-size:3rem; } #mg dl{ margin-top:4rem;} #mg dl dt{width:70%} #mg dl dt .root_daum_roughmap{position:absolute ;top:0; left:0; width:100%; height:100%; } #mg dl dt .root_daum_roughmap .wrap_map{width:100%; height:100%; } #mg dl dd{width:30%; border:1px solid #DDD;} #mg dl dd a{display:block; font-size:2.4rem; padding:2em 1.3em; color:#333; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; } #mg dl dd li + li{border-top:1px solid #DDD;} #mg dl dd a i{display:inline-block; font-size:2em; line-height:100%; line-height:2.2em; height:2em; width:2em; border-radius:50%; border:1px solid #AAA;} #mg dl dd a p{margin-top:.6em;} #mg dl dd a p span{font-size:.7em; line-height:1em; display:block;} #mg dl dd a:hover{background:#333; color:#FFF; } #mh{padding:10rem 0; } #mh:before{position:absolute; background:#eeE; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw; min-width:100%; z-index:-1; content:"";} #mh article{position:relative; overflow:hidden;} #mh dl dd{ background:#FFF; padding:.5em; } #mh dl dd p{margin:.8em 0; line-height:130%; } #mh dl dd span {display:block; border-bottom:1px solid #DDD; margin-bottom:.6em;} #mh dl dd span img{height:20px } #mh .controll{ position:absolute; top:50%; left:0; right:0; z-index:3;} #mh .controll button{ background:transparent; position:absolute; top:-60px; width:40px; height:80px; background:rgba(0,0,0,0); border:0;} #mh .controll button.prev{left:-40px} #mh .controll button.next{right:-40px} #mh .controll button.swiper-button-disabled{background:rgba(0,0,0,0);} #mh .controll button:after{position:absolute; top:50%; width:15px; height:15px; border-style:solid; border-width:2px; content:"";} #mh .controll button.prev:after{left:15px; border-color:#aaa transparent transparent #aaaFFF; transform-origin:left top;-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top; } #mh .controll button.prev:after{transform:rotate(-45deg);-ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);} #mh .controll button.next:after{right:15px; border-color:#aaa #aaa transparent transparent ; transform-origin:right top;-ms-transform-origin:right top;-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top; } #mh .controll button.next:after{transform:rotate(45deg);-ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg);-o-transform:rotate(45deg);} #footer{position:relative; padding:4em 0; color:#FFF; } #footer:before{position:absolute; background:#333; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw;z-index:-1; content:"";} #footer{position:relative; padding:3rem 0; color:#aaa; text-align:center; } #footer:before{position:absolute; background:#222222; top:0; bottom:0; left:50%; margin-left:-100vw; width:200vw;z-index:-1; content:"";} #footer h1 img{height:5rem; } #footer article{overflow:hidden; margin-top:1em;} #footer article address{font-size:.9em; } #footer article p{font-size:.9em; color:#999} #footer span{white-space: nowrap; padding-right:10px} /* #quickQna{position:fixed; top:20%; right:5%; width:12em; padding:2em 1em; background:#af0011; color:#FFF; text-align:center; border-radius:1em; z-index:3;} #quickQna h4{font-size:1.4em; font-weight:700;} #quickQna p{font-size:.75em; line-height:120%; margin-top:1em;} #quickQna dl {margin-top:1em;} #quickQna dl dd{margin-bottom:.4em; } #quickQna dl dd input{width:100%; } #quickQna dl dd textarea{width:100%; height:6em;} #quickQna dl dt button {width:100%; background:#000; color:#FFF; font-size:1.2em; padding:.4em 0 .2em; border:0;} #quickQna a.kakao {position:relative; background:#f7e111; color:#000000; margin-top:1rem; border-radius:0; display:block;line-height:4rem; padding-top:.5rem;} #quickQna a.kakao i{ font-size:2em; vertical-align:middle; } #quickQna a.kakao span{vertical-align:middle; } #quickQna a.totop {position:absolute; bottom:-5em; width:4em; height:4em; background:#000; left:50%; border-radius:50%; border-radius:50%; margin-left:-2em; color:#FFF; display: -webkit-flex; display: flex;flex-direction:column; justify-content:center;} #quickQna a.totop p{margin:0;} */ #quickQna{position:fixed; top:20%; right:5%; width:8em; text-align:center; z-index:3; font-size:.7em} #quickQna a.kakao {position:relative; background:#f7e111; color:#000000; margin-top:1rem; border-radius:0; display:block;line-height:4rem; padding:1.5rem 0; border-radius:1rem;} #quickQna a.kakao i{ font-size:4em; display:block; } #quickQna a.kakao span{display:block; line-height:1em; margin-top:.5rem} #quickQna a.totop {position:relative; background:#333; color:#fff; margin-top:1rem; border-radius:0; display:block;line-height:4rem; padding:1.5rem 0; border-radius:1rem;} #quickQna a.totop i{ font-size:3em; display:block; } #quickQna a.totop p{display:block; line-height:1em; margin-top:.5rem} hr.h-5 {height:.5em} hr.h1 {height:1em} hr.h1-5 {height:1.5em} hr.h2 {height:2em} hr.h2-5 {height:2.5em} hr.h3 {height:3em} hr.h4 {height:4em} hr.h5 {height:5em} hr.h6 {height:6em} hr.h7 {height:7em} hr.h8 {height:8em} hr.h9 {height:9em} hr.h10 {height:10em} .dlw{ position:relative; display: -webkit-flex; display: flex;} .dlw.jc{justify-content:center} /* 양쪽정열 */ .dlw.js{justify-content:space-between} /* 양쪽정열 */ .dlw.br{flex-flow:wrap;}/* 줄바꿈 */ .dlw > dt{position:relative; } .dlw > dd{position:relative; } .dlw.fg1 > dt, .dlw.fg1 > dd{ width:0; flex-grow:1; } /* 너비통일 */ .dlw > .vc{display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; }/*수직센터정열*/ .dlw.vc > dt{display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; }/*수직센터정열*/ .dlw.vc > dd{display: -webkit-flex; display: flex;flex-direction:column; justify-content:center; }/*수직센터정열*/ @media (min-width:737px){ .dlw.dtr > dt{ order:2;} } /* 체크박스 스타일시트 */ .ck_style{margin:0;display:inline-block;} .ck_style input[type="radio"] , .ck_style input[type="checkbox"]{display:none} .ck_style i{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:18px; margin-top:-1px;vertical-align:middle;width:18px;line-height:1; font-size:0} .ck_style input[type="radio"]:checked + i:after{background-color:#2fa2dd;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px} .ck_style input[type="checkbox"] + i{border-radius:0} .ck_style input[type="checkbox"]:checked + i:after{background-color:#2fa2dd;border-radius:0;content:"";display:inline-block;height:12px;margin:2px;width:12px} /* 기본테이블 */ table.tb{position:relative; width:100%; border-top:1px solid #555; } table.tb:after{position:absolute; top:0; left:0; right:0; height:1px; background:#555; content:"";} table.tb thead{} table.tb thead th{background:#FFF; padding:10px 0; text-align:center; font-weight:700; border-bottom:1px solid #EEE;} table.tb tbody th{border-bottom:1px solid #EEE; text-align:left; padding-left:10px;} table.tb tbody td{border-bottom:1px solid #EEE; padding:10px; } table.tb tfoot th{border-bottom:1px solid #EEE; background:#FFE; text-align:left; padding-left:10px;} table.tb tfoot td{border-bottom:1px solid #EEE; background:#FFE; padding:10px; height:36px;} table.tb .tc{text-align:center !important;} table.tb .tl{text-align:left !important; padding-left:10px !important;} table.tb .tr{text-align:right !important; padding-right:10px !important;} table.tb tfoot{} table.tb tbody img {margin-left:3px} table.tb .no_list{text-align:center; line-height:200px;} table.tb.center tbody th{text-align:center; } table.tb.center tbody td{ text-align:center; } table.tb.center tfoot th{text-align:center; } table.tb.center tfoot td{text-align:center; } table.tb.line thead th{border:1px solid #EEE; } table.tb.line tbody th{border:1px solid #EEE; padding-right:10px;} table.tb.line tbody td{border:1px solid #EEE; } table.tb.line tfoot th{border:1px solid #EEE; border-top:0; background:#FFE; padding-right:10px;} table.tb.line tfoot td{border:1px solid #EEE; border-top:0; background:#FFE; } @media only screen and (max-width:736px){ table.tb.block thead{display:none;} table.tb.block tbody tr{display:block;border-bottom:1px solid #EEE; padding:10px 0;} table.tb.block tbody th{display:block; border:0; width:auto; border-bottom:0; padding:0; padding-bottom:8px} table.tb.block tbody td{display:block; border:0; padding:0; height:auto;} table.tb.block tbody td .frm_input{width:100%;} table.tb.block tbody td select{width:100%;} table.tb.block tbody tr.noblock td{display: inline-block} table.tb.block tbody tr.noblock th{display: inline-block} } @media only screen and (max-width:736px){ table.tb.m_list thead{display:none;} table.tb.m_list tbody tr{display:block;border-bottom:1px solid #EEE; padding:10px 0;} table.tb.m_list tbody tr{position:relative; display:block; border-top:1px solid #DDD; padding:10px 0; padding-left:10%; } table.tb.m_list tbody tr:after {display:block;visibility:hidden;clear:both;content:""} table.tb.m_list tbody td{display:block; border:0; width:auto; padding:0; height:auto; float:left; margin-right:10px; background:#FFF;} table.tb.m_list tbody td:before{content: attr(title) " : "; color:#aaa} table.tb.m_list tbody td.chk{position:absolute; top: 10px; right:0; } table.tb.m_list tbody td.chk:before{display:none; } table.tb.m_list tbody td.num{position:absolute; top:10px; left:0; width:10%; } table.tb.m_list tbody td.num:before{display:none} table.tb.m_list tbody td.subject{float:none; clear:both; padding:0 !important } table.tb.m_list tbody td.subject:before{display: none} } /* 게시물 선택복사 선택이동 */ #copymove {} #copymove .win_desc {text-align:center;display:block} #copymove .tbl_wrap{margin:20px } #copymove .win_btn{padding:0 20px 20px} .copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;} .copymove_currentbg {background:#f4f4f4} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;} #captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:none} /* ckeditor 단축키 */ .cke_sc {display:none;} /* 버튼 */ a.btn,.btn{line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0; -webkit-transition: background-color 0.3s ease-out; -moz-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;} a.btn01 {display:inline-block;padding:0 7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:0 7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle;} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:right} /* 서식단계 진행 */ .btn_submit {border:0;background:#2fa2dd;color:#fff;cursor:pointer;border:0} .btn_submit:hover {background:#2787b8; color:#fff;} a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle;} button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} .btn_cancel:hover {background:#aaa; } a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:40px;border:0;background:#3c3c3c;border-radius:5px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {} button.btn_frmline {font-size:1em} /* 게시판용 버튼 */ a.btn_b01,.btn_b01 {display:inline-block;background:#4c4f6f;color:#fff;text-decoration:none;vertical-align:middle} .btn_b01:hover, .btn_b01:hover {background:#54598c} a.btn_b02,.btn_b02 {display:inline-block;background:#2fa2dd;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle;} a.btn_b02:hover, .btn_b02:hover {background:#2787b8} a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} a.btn_admin,.btn_admin {display:inline-block;background:#d13f4a;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ .btn_admin:hover, a.btn_admin:hover {background:#ff3746} /*컬러*/ .color_1 {background:#169dd6} .color_2 {background:#14d53d} .color_3 {background:#3814ff} .color_4 {background:#7520c5} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing: 0 5px;border:1px solid #ccc;} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 0 10px} .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:10px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ddd;background:#fafafa;height:40px} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8} .tbl_head01 td {color:#666;background:#fff;padding:10px 5px;border-top:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all} .tbl_head01 tbody tr:hover td{background:#fafafa;} .tbl_head01 a:hover {text-decoration:underline} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff} .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all} .tbl_head02 a {} /* 폼 테이블 */ .tbl_frm01 {margin:0 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} textarea, .frm_input , select{border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;padding:5px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input , select {height:40px;} .frm_address{margin-top:5px;} .ui-datepicker .ui-datepicker-title select{height:26px; padding:0;} .full_input{width:100%} .half_input{width:49.5%} .tbl_frm01 textarea, .write_div textarea {width:100%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} /*기본 리스트*/ .list_01 li{border:1px solid #dbdbdb;background:#fff;margin:3px 0;padding:10px 15px;list-style:none;position:relative;} .list_01 li:after {display:block;visibility:hidden;clear:both;content:""} .list_01 li:hover{background:#f9f9f9} .list_01 li.empty_li{text-align:center;padding:20px 0;color:#666} /*폼 리스트*/ .form_01 h2{margin:0 0 10px;font-size:1.167em} .form_01 li{margin:10px 0} .form_01 li:after {display:block;visibility:hidden;clear:both;content:""} .form_01 li .right_input{float:right} .form_01 textarea{height:100px;width:100%} .form_01 .frm_label{display:inline-block;width:130px} /* 자료 없는 목록 */ .empty_table {padding:50px 0 !important;text-align:center} .empty_list {padding:20px 0 !important;color:#666;text-align:center} /* 필수입력 */ .required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important;} /* 테이블 항목별 정의 */ .td_board {width:80px;text-align:center} .td_category {width:80px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_group {width:80px;text-align:center} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_name {width:100px;text-align:left} .td_nick {width:100px;text-align:center} .td_num {width:50px;text-align:center} .td_numbig {width:80px;text-align:center} .td_stat {width:60px;text-align:center} .txt_active {color:#5d910b} .txt_done {color:#e8180c} .txt_expired {color:#ccc} .txt_rdy {color:#8abc2a} /* 새창 기본 스타일 */ .new_win {position:relative;} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {font-size:1.25em;height:50px;line-height:30px;padding:10px 20px;background:#333;color:#fff;} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {border-right:1px solid #dfe6e7;} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li{float:left;background:#fff;width:33.333%;text-align:center;border:1px solid #ccc;margin-left:-1px} .new_win .win_ul li a{display:block;padding:10px 0} .new_win .win_ul .selected{background:#fff;border-color:#2fa2dd;position:relative;z-index:5} .new_win .win_ul .selected a{color:#2fa2dd;font-weight:bold} .new_win .win_desc {margin:5px 0;font-size:0.92em;color:#3598db;} .new_win .frm_info{font-size:0.92em;color:#3598db} .new_win .win_total{text-align:right;margin:10px 0} .new_win .win_total span{display:inline-block;line-height:30px;font-size:0.92em;color:#4e546f;background:#d4d4d4;padding:0 10px;border-radius:5px;} .new_win .new_win_con{margin:20px;} .new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} .new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_btn{text-align:right} .new_win .btn_close {position:absolute;top:0;right:0;height:50px;width:50px;background:url(../img/close_btn.gif) no-repeat 50% 50%;border:0;text-indent:-999px;overflow:hidden;cursor:pointer} .new_win .btn_submit {padding:0 20px;height:40px;font-weight:bold;font-size:1.083em;float:right} /* 검색결과 색상 */ .sch_word {color:#00c4ac} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333; -webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.2);} .sv_wrap .sv:before{content: "";position: absolute;top: -6px;left: 15px;width: 0;height: 0;border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent #333 transparent;} .sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb } .sv_wrap .sv a:hover{background:#000;color:#fff} .sv_member{color:#333} .sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {clear:both; padding-top:20px; text-align:center} .pg_page, .pg_current,.pg_skip {position:relative; display:inline-block; padding:0 14px; height:36px; line-height:36px;vertical-align:middle; background:#FFF;text-decoration:none; border:1px solid #DDD; z-index:1; margin-right:-1px;} .pg_page:hover{background-color:#DDD; border-color:#999; color:#000; z-index:2;} .pg a:focus, .pg a:hover {text-decoration:none} .pg_current { border:1px solid #2fa2dd; background:#2fa2dd;color:#FFF; z-index:2;} .pg_prev:before{ content:"\f104"; font-family:'fontawesome'; padding-right:5px; } .pg_next:after{ content:"\f105"; font-family:'fontawesome'; padding-left:5px; } @media only screen and (max-width:736px){ .pg_page{display:none} .pg_page, .pg_current,.pg_skip { } .pg_start{ display:inline-block;} .pg_prev{ display:inline-block;} .pg_next{ display:inline-block; } .pg_end{ display:inline-block; } } /**********************************************************************************************/ .animate [class*="aea_"] { opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .aea_1{-webkit-transition-delay: 250ms; transition-delay:250ms; } .animate .aea_2{-webkit-transition-delay: 300ms; transition-delay:500ms; } .animate .aea_3{-webkit-transition-delay: 750ms; transition-delay:750ms; } .animate .aea_4{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .aea_5{-webkit-transition-delay: 1250ms; transition-delay:1250ms; } .animate .aea_6{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .aea_7{-webkit-transition-delay: 1750ms; transition-delay:1750ms; } .animate .aea_8{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .aea_9{-webkit-transition-delay: 2250ms; transition-delay:2250ms; } .animate.on [class*="aea_"] { opacity:1;} .animate [class*="aet_"] {position:relative; top:80px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .aet_1{-webkit-transition-delay: 250ms; transition-delay:250ms; } .animate .aet_2{-webkit-transition-delay: 500ms; transition-delay:500ms; } .animate .aet_3{-webkit-transition-delay: 750ms; transition-delay:750ms; } .animate .aet_4{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .aet_5{-webkit-transition-delay: 1250ms; transition-delay:1250ms; } .animate .aet_6{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .aet_7{-webkit-transition-delay: 1750ms; transition-delay:1750ms; } .animate .aet_8{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .aet_9{-webkit-transition-delay: 2250ms; transition-delay:2250ms; } .animate.on [class*="aet_"] { opacity:1;top:0} .animate [class*="aets_"] {position:relative; top:80px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .aets_1{-webkit-transition-delay: 300ms; transition-delay:300ms; } .animate .aets_2{-webkit-transition-delay: 400ms; transition-delay:400ms; } .animate .aets_3{-webkit-transition-delay: 500ms; transition-delay:500ms; } .animate .aets_4{-webkit-transition-delay: 600ms; transition-delay:600ms; } .animate .aets_5{-webkit-transition-delay: 700ms; transition-delay:700ms; } .animate .aets_6{-webkit-transition-delay: 800ms; transition-delay:800ms; } .animate .aets_7{-webkit-transition-delay: 900ms; transition-delay:900ms; } .animate .aets_8{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .aets_9{-webkit-transition-delay: 1100ms; transition-delay:1100ms; } .animate .aets_10{-webkit-transition-delay: 1200ms; transition-delay:1200ms; } .animate .aets_11{-webkit-transition-delay: 1300ms; transition-delay:1300ms; } .animate .aets_12{-webkit-transition-delay: 1400ms; transition-delay:1400ms; } .animate .aets_13{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .aets_14{-webkit-transition-delay: 1600ms; transition-delay:1600ms; } .animate .aets_15{-webkit-transition-delay: 1700ms; transition-delay:1700ms; } .animate .aets_16{-webkit-transition-delay: 1800ms; transition-delay:1800ms; } .animate .aets_17{-webkit-transition-delay: 1900ms; transition-delay:1900ms; } .animate .aets_18{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .aets_19{-webkit-transition-delay: 2100ms; transition-delay:2100ms; } .animate.on [class*="aets_"] { opacity:1;top:0} .animate [class*="aeb_"] {position:relative; top:-80px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .aeb_1{-webkit-transition-delay: 250ms; transition-delay:250ms; } .animate .aeb_2{-webkit-transition-delay: 300ms; transition-delay:500ms; } .animate .aeb_3{-webkit-transition-delay: 750ms; transition-delay:750ms; } .animate .aeb_4{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .aeb_5{-webkit-transition-delay: 1250ms; transition-delay:1250ms; } .animate .aeb_6{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .aeb_7{-webkit-transition-delay: 1750ms; transition-delay:1750ms; } .animate .aeb_8{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .aeb_9{-webkit-transition-delay: 2250ms; transition-delay:2250ms; } .animate.on [class*="aeb_"] { opacity:1;top:0} .animate [class*="ael_"] {position:relative; left:-80px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .ael_1{-webkit-transition-delay: 250ms; transition-delay:250ms; } .animate .ael_2{-webkit-transition-delay: 300ms; transition-delay:500ms; } .animate .ael_3{-webkit-transition-delay: 750ms; transition-delay:750ms; } .animate .ael_4{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .ael_5{-webkit-transition-delay: 1250ms; transition-delay:1250ms; } .animate .ael_6{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .ael_7{-webkit-transition-delay: 1750ms; transition-delay:1750ms; } .animate .ael_8{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .ael_9{-webkit-transition-delay: 2250ms; transition-delay:2250ms; } .animate.on [class*="ael_"] { opacity:1;left:0} .animate [class*="aer_"] {position:relative; left:80px; opacity:0;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;} .animate .aer_1{-webkit-transition-delay: 250ms; transition-delay:250ms; } .animate .aer_2{-webkit-transition-delay: 300ms; transition-delay:500ms; } .animate .aer_3{-webkit-transition-delay: 750ms; transition-delay:750ms; } .animate .aer_4{-webkit-transition-delay: 1000ms; transition-delay:1000ms; } .animate .aer_5{-webkit-transition-delay: 1250ms; transition-delay:1250ms; } .animate .aer_6{-webkit-transition-delay: 1500ms; transition-delay:1500ms; } .animate .aer_7{-webkit-transition-delay: 1750ms; transition-delay:1750ms; } .animate .aer_8{-webkit-transition-delay: 2000ms; transition-delay:2000ms; } .animate .aer_9{-webkit-transition-delay: 2250ms; transition-delay:2250ms; } .animate.on [class*="aer_"] { opacity:1; left:0}