/* font-family */ @font-face { font-family :'NanumGothic'; src: url('../font/NanumGothic.eot'); src: local(''), url('../font/NanumGothic.woff') format('woff'), url('../font/NanumGothic.ttf') format('truetype'); } @font-face { font-family :'NanumGothicLight'; src: url('../font/NanumGothicLight.eot'); src: local(''), url('../font/NanumGothicLight.woff') format('woff'), url('../font/NanumGothicLight.ttf') format('truetype'); } @font-face { font-family :'NanumGothicExtraBold'; src: url('../font/NanumGothicExtraBold.eot'); src: local(''), url('../font/NanumGothicExtraBold.woff') format('woff'), url('../img/font/NanumGothicExtraBold.ttf') format('truetype'); } ::-moz-selection { background-color:#666666; color:#fff; } ::selection { background-color:#666666; color:#fff; } * {padding:0;margin:0;} body,th,td,textarea,h1,h2,h3,h4,h5,h6 {font-family:NanumGothic;font-size:12px;color:#555555;letter-spacing:-0.5px;line-height:24px;word-break : keep-all;} article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; margin:0; padding:0;} body,th,td,textarea{} img,fieldset{ border:0; line-height:0px;} li{ list-style:none;} select,input{ font-family:NanumGothic;color:#555555;font-size:12px;} address,em{ font-style:normal;} button{ border:none;background:none;cursor:pointer;} table{ border:0px;} hr,legend{ display:none;} p,h1,h2,h3,h4,h5,h6,form,input,ul,li,dl,dt,dd {margin:0;padding:0;} a img {vertical-align:top;} a{color:#333333;} a:link{text-decoration:none;} a:visited{color:#333333;} a:hover{color:#333333;text-decoration:none;} .btn_gray{width: 90px; background: #333; color:#fff; border:none; padding: 5px 10px;height: 30px;} .btn_gray:hover{background: #666; color:#fff;} /* Skip Navigation */ #accessibility a {display:block; position:absolute; top:-40px; left:0; z-index:100; width:100%; height:25px; line-height:25px; text-align:center; font-weight:bold; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s;} #accessibility a:hover {top: 0px; z-index:1000; padding:10px 0; background:#4764ce; color:#fff;} #accessibility a:active {top: 0px; z-index:1000; padding:10px 0; background:#4764ce; color:#fff;} #accessibility a:focus {top: 0px; z-index:1000; padding:10px 0; background:#4764ce; color:#fff;} a#content {margin:0; padding:0; font-size:0; line-height:0;} /*레이아웃*/ #wrap{position:relative; overflow:hidden; width:100%;} #container{position:relative; overflow:hidden;} #content{clear:both;width:100%;} /*헤더*/ #header {background: url("../image/dachaeroumd/bg_tnb.gif") repeat-x 0px 0px; width: 100%;} #header .headerIn {margin: 0px auto; padding: 55px 10px 0px 10px; height: 75px; position: relative; max-width: 1200px;} #header .headerIn .logo {padding: 0px 0px 0px 2px;} #header .headerIn .logo a {vertical-align: top; display: inline-block;} #header .headerIn .logo a img { height: 60px; vertical-align: top;} #header .headerIn .tnbWrap {padding: 1px 89px 0px 0px; left: 0px; top: 0px; height: 39px; text-align: right; right: 5px;position: absolute;} #header .headerIn .tnbWrap a {padding: 0px 8px 0 25px; color: rgb(255, 255, 255); line-height: 39px; font-size: 11px; letter-spacing:-0.5px; vertical-align: top; border-left-color: rgb(35, 31, 32); display: inline-block;} #header .headerIn .tnbWrap .btnOpenGnb {display: none;} #gnb {left: 0px; top: 125px; right: 0px; position: absolute; z-index: 1;width:100%;box-shadow:0 2px 2px rgba(0,0,0,.12);background:#ffffff;} #gnb.hover {min-height: 200px;} #gnb .gnbScroll {margin:0px auto; position:relative; max-width:1200px;} #gnb .depth01 > li {line-height: 0;} #gnb .depth01 > li > a {padding: 10px 40px; top: -65px; height: 50px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing:-0.2px; display: block; position: absolute; cursor:pointer;} #gnb .depth01 > li > a span {padding: 10px 0px; line-height: 30px; display: inline-block;} #gnb .depth01 > li.on > a span {border-bottom-color: rgb(37, 37, 37); border-bottom-width: 2px; border-bottom-style: solid;} #gnb .depth01 > li.m00 > a {width: 0px; left: 0px;} #gnb .depth01 > li.m01 > a {width: 80px; right: 600px;} #gnb .depth01 > li.m02 > a {width: 80px; right: 485px;} #gnb .depth01 > li.m03 > a {width: 60px; right: 380px;} #gnb .depth01 > li.m04 > a {width: 110px; right: 210px;} #gnb .depth01 > li.m05 > a {width: 57px; right: 95px;} #gnb .depth01 > li.m06 > a {width: 80px; right: -47px;} #gnb .m00 .depth02 {padding: 0px;} #gnb .depth02 {padding: 0px 0px 30px 36px; display: none;float:left;} #gnb .depth02 > ul { min-height: 40px;} #gnb .depth02 > ul > li {padding: 0px 0px 0px 15px; width: 80px;} #gnb .depth02 > ul > li > a {padding: 15px 0px 0 0; line-height: 13px; font-size: 13px;color:#777777; letter-spacing:-0.3px;display: block;} #gnb .depth02 > ul > li > a:hover{color:#111111;} #gnb .depth01 > li.m00 .depth02 > ul {width: auto;} #gnb .depth01 > li.m01 .depth02 > ul {width: auto;} #gnb .depth01 > li.m02 .depth02 > ul {width: auto;} #gnb .depth01 > li.m03 .depth02 > ul {width: auto;} #gnb .depth01 > li.m04 .depth02 > ul {width: auto;} #gnb .depth01 > li.m05 .depth02 > ul {width: auto;} #gnb .depth01 > li.m06 .depth02 > ul {width: auto;} #gnb .depth01 > li.m00 .depth02 li {width: auto;padding:0 0 0 42px} #gnb .depth01 > li.m01 .depth02 li {width: auto;padding:0 0 0 0px} #gnb .depth01 > li.m02 .depth02 li {width: auto;padding:0 0 0 0px} #gnb .depth01 > li.m03 .depth02 li {width: auto;padding:0 0 0 28px;} #gnb .depth01 > li.m04 .depth02 li {width: auto;padding:0 0 0 43px;} #gnb .depth01 > li.m05 .depth02 li {width: auto;padding:0 0 0 51px;} #gnb .depth01 > li.m06 .depth02 li {width: auto;padding:0 0 0 48px;} /*IE 7*/ *:first-child+html #gnb .depth01 > li.m04 .depth02 li {width: auto;padding:0 0 0 30px;} *:first-child+html #gnb .depth01 > li.m05 .depth02 li {width: auto;padding:0 0 0 45px;} *:first-child+html #gnb .depth01 > li.m06 .depth02 li {width: auto;padding:0 0 0 25px;} #gnb .gnb-scrollbar {display: none;} #gnb .gnbImgBox {left: 0px; top: 0px; display: none; position: absolute;} #gnb .btnCloseGnb {display: none;} .tmpType#header .headerIn .tnbWrap {padding: 1px 0px 0px;} .dim{display:none;position:fixed;top:0;left:0;right:0;bottom:0; background:url("../image/dachaeroumd/dim.png") repeat; z-index:9999;} #go_to_top { position: fixed; bottom: -50px; right: 20px; z-index: 99999; width: 40px; height: 40px; background: #333; text-align: center; line-height: 40px; -webkit-border-radius: 25px; border-radius: 25px; -moz-border-radius:25px; -ms-border-radius:25px; behavior:url('../js/PIE.htc'); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #go_to_top a { display: block; } #go_to_top a strong { color: #eee; font-size: 16px; } #go_to_top.show { bottom: 20px; } /*하단메뉴*/ #snb {background: rgb(40, 40, 40); width: 100%;} #snb .snbIn {margin: 0px auto; padding: 40px 0px 70px; overflow: hidden; max-width: 1200px;} #snb .snbIn > li {padding: 0px 20px 0px 0px; width: 160px; float: left;} #snb .snbIn > li > span {background: url("../image/dachaeroumd/bar_snb.gif") no-repeat left bottom; color: rgb(100, 100, 100); line-height: 52px; font-size: 16px; display: block; font-weight:bold;} #snb .snbIn ul {padding: 15px 0px 0px;} #snb .snbIn ul li a {color: rgb(140, 140, 140); line-height: 28px; font-size: 14px;} #snb .hideMenu a {color: rgb(85, 85, 85) !important; font-weight: normal !important; display: none !important; cursor: default !important;} #snb .hideMenu a:hover {color: rgb(85, 85, 85) !important; font-weight: normal !important; display: none !important;} @media screen and (max-width:1200px) { #header {max-width: 1200px;background:none;} #header .headerIn { padding: 10px 20px 30px; height: 35px;} #header .headerIn .logo {padding: 0px; float: left;} #header .headerIn .logo a {padding: 0px 0px 0px; vertical-align: top; display: inline-block;} #header .headerIn .logo a img { height: 55px; vertical-align: top;} #header .headerIn .musicContral {display: none;} #header .headerIn .tnbWrap {padding:15px 0 0 0px; height: 40px; text-align: right; float: right; position: static;} #header .headerIn .tnbWrap a {margin: 5px 0px 0px 35px; padding: 0px; border: currentColor; width: 43px; height: 43px; color: transparent; overflow: hidden; display: inline-block;} #header .headerIn .tnbWrap a.linkLogin {background: url("../image/dachaeroumd/icon_login.png") no-repeat top; display:none;} #header .headerIn .tnbWrap a.linkJoin {background: url("../image/dachaeroumd/icon_join.png") no-repeat top;display: none;} #header .headerIn .tnbWrap a.linkContact {background: url("../image/dachaeroumd/icon_contact.png") no-repeat top;display: none;} #header .headerIn .tnbWrap .btnOpenGnb {background: url("../image/dachaeroumd/btn_open_gnb.png") no-repeat top; margin: 6px 0px 0px 20px; padding: 0px; width: 43px; height: 43px; display: inline-block;} #gnb {background: rgb(40, 40, 40); border: currentColor; transition:right 0.5s; left: auto; top: 0px; width: 47%; right: -60%; bottom: 0px; display: none; position: fixed;} .open#gnb {transition:right 0.5s; right: 0px; z-index: 9999;} #gnb .gnbScroll {margin: 0px auto; background:none; width: 100%; height: 100%;} #gnb .depth01 {border-bottom-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid;} #gnb .depth01 > li {line-height: 0; border-top-color: rgb(0, 0, 0); border-top-width: 1px; border-top-style: solid;} #gnb .depth01 > li > a {padding: 10px 0px 10px 20px; width: auto !important; height: auto; text-align: left; color: rgb(134, 134, 134); font-size: 16px; font-weight: bold; display: block; position: static;} #gnb .depth01 > li > a span {background: url("../image/dachaeroumd/ico_gnb_open01.gif") no-repeat right / auto 14px; padding: 10px 20px 10px 0px; line-height: 30px; display: block;} #gnb .depth01 > li.on > a span {background: url("../image/dachaeroumd/ico_gnb_close01.gif") no-repeat right / auto 14px; border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none;} #gnb .depth02 {background: rgb(54, 54, 54); padding: 0px; text-align: left; line-height: 18px; overflow: hidden; display: none;float:none;} #gnb .depth02 > ul {width: auto !important;float: none;} #gnb .depth02 > ul > li {padding: 0px; width: auto; border-top-color: rgb(40, 40, 40); border-top-width: 1px; border-top-style: solid;} #gnb .depth02 > ul > li :first-child {border-top-color: currentColor; border-top-width: medium; border-top-style: none;} #gnb .depth02 > ul > li > a { padding: 20px 0px 20px 20px; color: rgb(134, 134, 134); line-height: 30px; font-size: 14px; font-weight: bold; display: block;} #gnb .depth02 > ul > li > a:hover{color:#888888;} #gnb .depth02 {width:100%;} #gnb .depth02 ul {margin:0px!important;} #gnb .depth01 > li.m01 .depth02 li, #gnb .depth01 > li.m02 .depth02 li, #gnb .depth01 > li.m03 .depth02 li, #gnb .depth01 > li.m04 .depth02 li, #gnb .depth01 > li.m05 .depth02 li, #gnb .depth01 > li.m06 .depth02 li{width: auto;padding:0 0 0 0px;} #gnb .btnCloseGnb {background: url("../image/dachaeroumd/btn_close_gnb.png") no-repeat center / 40px auto; left: -80px; top: 20px; width: 58px; height: 58px; display: block; position: absolute;} #gnb .gnb-scrollbar {background: rgba(0, 0, 0, 0.1); border-radius: 10px; position: relative; -ms-touch-action: none;} #gnb .swiper-container-horizontal > .gnb-scrollbar {left: 1%; width: 98%; height: 5px; bottom: 3px; position: absolute; z-index: 50;} #gnb .swiper-container-vertical > .gnb-scrollbar {top: 1%; width: 5px; height: 98%; right: 3px; position: absolute; z-index: 50;} #gnb .swiper-scrollbar-drag {background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0px; top: 0px; width: 100%; height: 100%; position: relative;} #gnb .swiper-scrollbar-cursor-drag {cursor: move;} #gnb .hideMenu a {color: rgb(85, 85, 85) !important;} #gnb .hideMenu a:hover {color: rgb(85, 85, 85) !important;} /*하단메뉴*/ #snb .snbIn {padding: 0px;} #snb .snbIn > li {padding: 0px; width: auto; border-top-color: rgb(0, 0, 0); border-top-width: 2px; border-top-style: solid; float: none;} #snb .snbIn > li > span {background: url("../image/dachaeroumd/ico_gnb_open01.gif") no-repeat right / auto 14px; padding: 0px 20px; color: rgb(100, 100, 100); display: block; cursor: pointer;} #snb .snbIn > li.on > span {background: url("../image/dachaeroumd/ico_gnb_close01.gif") no-repeat right / auto 14px;} #snb .snbIn ul {background: rgb(54, 54, 54); padding: 0px; display: none;} #snb .snbIn ul li {border-top-color: rgb(40, 40, 40); border-top-width: 2px; border-top-style: solid;} #snb .snbIn ul li:first-child {border: 0px currentColor;} #snb .snbIn ul li a {padding: 20px; color:rgb(140, 140, 140); display: block;} } @media screen and (max-width:800px) { #header {margin: 0px auto; position: relative;} #header .headerIn {padding: 10px 15px; height: 45px;} #header .headerIn .logo a img { height: 45px;} #header .headerIn .tnbWrap {height: 30px;} #header .headerIn .tnbWrap a {margin: 6px 5px 0px 5px; width: 36px; height: 36px;} #header .headerIn .tnbWrap a.linkLogin {background: url("../image/dachaeroumd/icon_login.png") no-repeat top / auto 30px;;} #header .headerIn .tnbWrap a.linkJoin {background: url("../image/dachaeroumd/icon_join.png") no-repeat top / auto 30px;;} #header .headerIn .tnbWrap a.linkContact {background: url("../image/dachaeroumd/icon_contact.png") no-repeat top / auto 30px;;} #header .headerIn .tnbWrap .btnOpenGnb {background: url("../image/dachaeroumd/btn_open_gnb.png") no-repeat top / auto 33px; margin: 5px 0px 0px 0px; width: 36px; height: 36px; display: inline-block;} #gnb {width: 70%; right: -80%;} #gnb .depth01 > li > a {padding: 0px 0px 0px 20px; font-size: 15px;} #gnb .depth01 > li > a span {padding: 10px 20px 10px 0px; line-height: 20px; display: block; background-size: auto 10px;} #gnb .depth01 > li.on > a span {background-size: auto 10px;} #gnb .depth01 > li.m07 > a {padding: 0px 20px; width: auto; height: auto; position: static;} #gnb .depth02 > ul > li > a {padding: 10px 0px 10px 20px; color: rgb(134, 134, 134); line-height: 20px; font-size: 13px; font-weight: bold; display: block; background-size: auto 10px;} #gnb .depth02 > ul > li.on > a {background-size: auto 10px;} #gnb .depth01 > li.m02 .depth02 > ul.noDepth li a { padding: 10px 0px 10px 20px; line-height: 20px; display: block;} #gnb .depth03 > li > a {padding: 10px 0px 10px 20px; color: rgb(225, 225, 225); line-height: 20px; font-size: 11px; display: block;} #gnb .btnCloseGnb { left: -45px; top: 15px; width: 34px; height: 34px; display: block; position: absolute; background-size: 24px 24px;} .btnGoTop a {margin: 0px 0px 0px -35px; padding: 7px 0px 0px 18px; width: 52px; height: 20px; font-size: 12px; background-size: 70px 27px;} #snb .snbIn {padding: 0px;} #snb .snbIn > li {border-top-color: rgb(0, 0, 0); border-top-width: 1px; border-top-style: solid;} #snb .snbIn > li > span {background: url("../image/dachaeroumd/ico_gnb_open01.gif") no-repeat right / auto 10px; padding: 0px 15px; line-height: 50px; font-size: 14px;} #snb .snbIn > li.on > span {background: url("../image/dachaeroumd/ico_gnb_close01.gif") no-repeat right / auto 10px;} #snb .snbIn ul li {border-top-color: rgb(40, 40, 40); border-top-width: 1px; border-top-style: solid;} #snb .snbIn ul li a {padding: 10px 15px; color: rgb(140, 140, 140); font-size: 12px;} } /*비주얼*/ #VisualSlider {position:relative;width:100%;height:760px;overflow:hidden; background:#333;} #VisualSlider ul.ImgShow {position:relative; width:400%;} #VisualSlider ul.ImgShow li {position:relative; float:left; width:25%; height:760px; overflow:hidden; background-size:cover !important;} #VisualSlider ul.ImgShow li.img1 {background:url("../image/dachaeroumd/mainv01.jpg") center top no-repeat;} #VisualSlider ul.ImgShow li.img2 {background:url("../image/dachaeroumd/mainv02.jpg") center top no-repeat;} #VisualSlider ul.ImgShow li.img3 {background:url("../image/dachaeroumd/mainv03.jpg") center top no-repeat;} #VisualSlider ul.ImgShow li.img4 {background:url("../image/dachaeroumd/mainv04.jpg") center top no-repeat;} #VisualSlider ul.ImgShow li img {position:absolute; display:block; top:0; left:0; width:100%; height:100%;} #VisualSlider ul.ImgShow li .caption {position:relative; top:37%; max-width:1200px; margin:0 auto; padding:0 20px; text-align:center; z-index:20;} #VisualSlider ul.ImgShow li .caption h2 {font-size:80px;color:#ffffff; letter-spacing:-3.5px;font-family :'NanumGothicExtraBold'; text-align:center; line-height:80px;} #VisualSlider ul.ImgShow li .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px auto; background:#fff;} #VisualSlider ul.ImgShow li .caption p {font-family :'NanumGothic';color:#ffffff; font-weight: bold;font-size:18px;line-height:19px;letter-spacing:-0.7px;} #VisualSlider ul.pagination {position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:50;} #VisualSlider ul.pagination li {display:inline-block;*display:inline;*zoom:1; width:15px; height:15px; margin:0 3px; border:2px solid #fff; border-radius:50%; transition:all .3s ease; cursor:pointer;} #VisualSlider ul.pagination li.active {background:#fff;} #VisualSlider a.control {position:absolute; top:50%; margin-top:-55px; z-index:50;} #VisualSlider a.control.prev {left:40px;} #VisualSlider a.control.next {right:40px;} #VisualSlider a:hover{ /*IE8*/s -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity-60)"; /*IE 5-7*/ filter:alpha(opacity=60); /*Netscape*/ -moz-opacity:0.6; /*Safari 1.x*/ -khtml-opacity:0.6; /*Standard*/ opacity:0.6;} /*IE 7*/ *:first-child+html #VisualSlider ul.ImgShow li .caption h2{padding:0 0 50px 0; margin:0 0 50px 0;background: url("../image/dachaeroumd/title_linebg_white.gif") no-repeat center bottom;} @media screen and (max-width:1200px) { #VisualSlider {height:650px;} #VisualSlider ul.ImgShow li {height:650px;} #VisualSlider a.control {display:none;} } @media screen and (max-width:800px) { #VisualSlider ul.ImgShow li .caption h2 {padding:2% 0 0 0;max-width:800px;margin:0 auto;font-size:60px;line-height:60px; letter-spacing:-2.5px;} } @media screen and (max-width:600px) { #VisualSlider {height:500px;} #VisualSlider ul.ImgShow li {height:500px;} #VisualSlider ul.ImgShow li img {width:auto !important;} #VisualSlider ul.ImgShow li .caption {top:15%; padding:0 20px;} #VisualSlider ul.ImgShow li .caption h2 {padding:22% 0 0 0;max-width:600px;margin:0 auto;font-size:45px;line-height:45px; letter-spacing:-2.5px;} #VisualSlider ul.ImgShow li .caption h2:after {margin:15px auto; width:40px; height:2px;} #VisualSlider ul.ImgShow li .caption p {font-size:16px;line-height:24px;} #VisualSlider ul.pagination { bottom:20px;} #VisualSlider ul.pagination li {width:10px; height:10px;} } @media screen and (max-width:500px) { #VisualSlider {height:450px;} #VisualSlider ul.ImgShow li {height:450px;} #VisualSlider ul.ImgShow li .caption {padding:0;} #VisualSlider ul.ImgShow li .caption h2 {padding:26% 20px 0 20px;max-width:500px;margin:0 auto;font-size:40px;line-height:40px; letter-spacing:-2.5px;} #VisualSlider ul.ImgShow li .caption p {padding:0px;font-size:14px;line-height:24px;} } @media screen and (max-width:320px) { #VisualSlider {height:380px;} #VisualSlider ul.ImgShow li {height:380px;} #VisualSlider ul.ImgShow li .caption h2 {padding:26% 20px 0 20px;max-width:500px;margin:0 auto;font-size:35px;line-height:40px; letter-spacing:-2.5px;} #VisualSlider ul.ImgShow li .caption p {padding:0px;font-size:12px;line-height:24px;} } /*section*/ #container_wrap1{position:relative;padding:100px 0;} #container_wrap2{position:relative;background: url("../image/dachaeroumd/main_place_bg.jpg") center center no-repeat fixed; *background-attachment:scroll;padding:100px 0; } #container_wrap3{position:relative;padding:100px 0; } #container_wrap4{position:relative;background:#f7f7f7;padding:100px 0; } #container_wrap5{position:relative;padding:100px 0; } #container_wrap6{position:relative;background:#303030;padding:60px 0; } #inner{position:relative;overflow:hidden;max-width:1200px; margin:0px auto;padding:0 10px; display:block;} /*about*/ #inner .inbox_about_left{float:left;width:45%;} #inner .inbox_about_left .titwrap{margin:0 auto;overflow:hidden;} #inner .inbox_about_left .titwrap h2{color:#333333;font-family :'NanumGothicExtraBold';font-size:35px; letter-spacing:-1.5px;margin:0 0 40px;line-height:35px;} #inner .inbox_about_left .titwrap h2 span{font-family :'NanumGothicLight';} #inner .inbox_about_left .titwrap p{ text-align:justify;} #inner .inbox_about_right{float:right;overflow:hidden;width:49%;} #inner .inbox_about_right .titwrap{margin:0 auto;overflow:hidden;padding:70px 0 0 0;} #inner .inbox_about_right .titwrap dl{float:left;width:33%; text-align:center;} #inner .inbox_about_right .titwrap dl dt{font-family :'NanumGothicExtraBold';font-size:15px; letter-spacing:1px; line-height:23px; color:#333333;padding:10px 0 0 0;} #inner .inbox_about_right .titwrap dl dd img{width:85px;height:65px;} /*place*/ #inner .inbox_place{width:100%;margin:0 auto;overflow:hidden;text-align:center;} #inner .inbox_place h2{color:#ffffff;font-family :'NanumGothicExtraBold';font-size:35px;letter-spacing:-1.5px;margin:0 0 35px;line-height:35px;} #inner .inbox_place h2 a{color:#ffffff;} #inner .inbox_place p.title{color:#ffffff;font-weight:bold;font-size:15px;margin:0 0 20px;padding:0 10px;letter-spacing:-0.3px;} #inner .inbox_place p.text{color:#ffffff;padding:0 10px;} /*place 이미지슬라이드 */ #PlaceSlide {position:relative;padding:60px 30px 0 30px;} #PlaceSlide .Place_wrap {position:relative;overflow:hidden;} #PlaceSlide .Place_wrap > div {position:relative; width:10000%;} #PlaceSlide .Place_wrap > div:after {clear:both; display:block; content:''} #PlaceSlide .Place_wrap > div > table {float:left; width:270px; margin-right:20px; background:#fff; box-shadow:0 2px 2px rgba(0,0,0,.12) transition:all .4s ease} #PlaceSlide .Place_wrap > div > table .show_img {overflow:hidden; height:auto;} #PlaceSlide .Place_wrap > div > table .show_img img{display:block; width:100%; height:auto} #PlaceSlide .Place_wrap > div > table .show_img a{display:block; overflow:hidden} #PlaceSlide .Place_wrap > div > table td br {display:none !important} #PlaceSlide .Place_wrap > div > table .show_title {display:block; padding:15px 20px; font-size:13px; font-weight:bold; color:#666; letter-spacing:-0px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; transition:all .4s ease} #PlaceSlide .Place_wrap > div > table .show_title a {font-size:13px; font-weight:bold; color:#666;letter-spacing:-0px; text-align:center; transition:all .4s ease} /*#PlaceSlide .Place_wrap > div > table:hover {margin-top:-15px}*/ #PlaceSlide .Place_wrap > div > table:hover .show_title {color:#fff; background:#222222;} #PlaceSlide .Place_wrap > div > table:hover .show_title a {color:#fff} #PlaceSlide .control {position:absolute; display:block; top:50%; margin-top:-18px} #PlaceSlide .prev {left:0px;} #PlaceSlide .next {right:0px;} /*Real Wedding*/ #inner .inbox_real{width:100%;margin:0 auto;overflow:hidden;text-align:center;} #inner .inbox_real h2{color:#333333;font-family :'NanumGothicExtraBold';font-size:35px;letter-spacing:-1.5px;margin:0 0 35px;line-height:35px;} #inner .inbox_real h2 span{font-family :'NanumGothicLight';} #inner .inbox_real p.title{font-weight:bold;font-size:15px;margin:0 0 50px;letter-spacing:-0.3px;} #inner .inbox_real p.text{} #inner .inbox_real .portfolio{padding:0 10px;} #inner .inbox_real .portfolio li{ float:left; overflow:hidden; width:32.5%; margin:4px; line-height:0;} #inner .inbox_real .portfolio li img{width:100%; background:#222222;} .ani-img{ overflow:hidden;} /*on*/ .ani-img:hover img{ transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; /*IE8*/s -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity-80)"; /*IE 5-7*/ filter:alpha(opacity=80); /*Netscape*/ -moz-opacity:0.8; /*Safari 1.x*/ -khtml-opacity:0.8; /*Standard*/ opacity:0.8; } /*off*/ .ani-img img{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; } /*Directing*/ #inner .inbox_direct{width:100%;margin:0 auto;overflow:hidden;text-align:center;} #inner .inbox_direct h2{color:#333333;font-family :'NanumGothicExtraBold';font-size:35px;letter-spacing:-1.5px;margin:0 0 35px;line-height:35px;} #inner .inbox_direct p.title{color:#333333;font-weight:bold;font-size:15px;margin:0 0 20px;padding:0 10px; letter-spacing:-0.3px;} #inner .inbox_direct p.text{padding:0 10px;} #inner .inbox_direct .directing{margin:0 auto;overflow:hidden;padding:0 20px;} #inner .inbox_direct .directing dl{float:left;width:33%; text-align:center;padding:60px 0 0 0;} #inner .inbox_direct .directing dl dt{font-family :'NanumGothicExtraBold';font-size:23px; color:#333333;padding:30px 0 20px 0;} #inner .inbox_direct .directing dl dd{padding:0 15px;} #inner .inbox_direct .directing dl dd img{width:250px;height:250px;} /*contact*/ .inbox_contact{width:100%;overflow:hidden;padding:0 10px;} .inbox_contact h2{color:#333333;font-family :'NanumGothicExtraBold';font-size:35px; letter-spacing:-1.5px;margin:0 0 60px;line-height:35px;} .inbox_contact h2 span{font-family :'NanumGothicLight';} .inbox_contact_left{float:left;width:20%;padding:0 0 0 10px;} .inbox_contact_left dl{padding:0 0 40px 0;} .inbox_contact_left dl dt{font-family :'NanumGothicExtraBold';font-size:16px; letter-spacing:1px; line-height:16px; color:#333333;padding:20px 0 5px 0;} .inbox_contact_left dl dd{font-size:13px;} .inbox_contact_left dl dd img{width:55px;height:55px;} .inbox_contact_right{float:right;overflow:hidden;width:75%;padding:0 5px 0 0px;} /*------------------------------------------------------------------ + Contact -------------------------------------------------------------------*/ .contact_form {text-align:right;} .contact_form input.harf, .contact_form select.box, .contact_form select, .contact_form .policy1{ box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin-bottom: 10px; border-radius: 5px; padding: 15px 20px; color: #666666; background: #f7f7f7; font-size: 14px; position:relative; display:block; background:#f7f7f7; border:1px solid #d5d5d5; border-radius:3px; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; } .contact_form textarea { box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; width:100%; max-width: 100%; margin-bottom: 10px; border-radius: 5px; padding: 15px 20px; color: #666666; background: #f7f7f7; font-size: 14px; position:relative; display:block; background:#f7f7f7; border:1px solid #d5d5d5; border-radius:3px; transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; -moz-transition:all 300ms ease; } .contact_form select.box{padding:14px 20px; line-height:24px; height:48px;} .contact_form button{margin:0 10px;} .contact_form .row{ clear:both;} .contact_form .policy1 {text-align:left; font-size:12px;width:100%; background: #ffffff; overflow-y:scroll; height:90px; padding: 15px 20px; } .contact_form .check1, .contact_form .title{ text-align:left;margin:10px 5px;} @media all and (min-width:991px) and (max-width:1200px) { .contact_form input.harf, .contact_form select.box, .contact_form select, .contact_form .policy1{width: 100%;} .contact_form {text-align:center;} } @media all and (min-width:641px) and (max-width:990px){ .col-harf{ width:48%;} .col-textarea{width:100%;} .col-harf, .col-textarea{ float:left;} .policy1{width:97.5%;} .contact_form input.harf, .contact_form select.box, .contact_form select, .contact_form .policy1{width: 100%;} .contact_form {text-align:center;} } @media screen and (max-width: 640px;){ .contact_form input.harf, .contact_form select.box, .contact_form select, .contact_form .policy1{width: 100%;} .contact_form {text-align:center;} } .col-harf, .col-textarea{min-height:1px; position:relative;} /*파트너쉽*/ #inner .inbox_partner_left{float:left;width:49%;} #inner .inbox_partner_left .titwrap{text-align:right;padding:0 50px 0 0;} #inner .inbox_partner_left .titwrap h2{color:#ffffff;font-family :'NanumGothicExtraBold';font-size:28px;line-height:35px;} #inner .inbox_partner_left .titwrap h2 span{font-family :'NanumGothicLight';} #inner .inbox_partner_left .titwrap h2 a{color:#ffffff;} #inner .inbox_partner_right{float:none;overflow:hidden;width:49%;} #inner .inbox_partner_right .titwrap{padding:8px 0 0 50px;} #inner .inbox_partner_right .titwrap p.text{float:left;color:#ffffff;font-size:13px;} #inner .inbox_partner_right .titwrap p.more{padding:0 0 0 20px;overflow:hidden;} #inner .inbox_partner_right .titwrap p.more img{width:30px;height:30px;} /*사이트맵*/ #inner .box_list{float:left; text-align:left;} #inner .box_list dl{width:110px;margin:0 60px 0 0;} #inner .box_list dl dt a, #inner .box_list dl dd a{margin:10px 0 0 0;font-size:16px;color:#646464;line-height:28px;} #inner .box_list dl dt a{font-size:16px;font-weight:bold;} #inner .box_list dl dd a{font-size:15px; color:#8c8c8c;} /*footer*/ #footer_wrap{width:100%;background:#1e1e1e; } #footer_wrap .content_footer{position:relative;max-width:1200px;line-height:20px; margin:0 auto; padding:60px 10px 100px 10px;} #footer_wrap .content_footer .footer_logo{overflow:hidden;padding:0 0 20px 0;margin:0 0px 0 0px;} #footer_wrap .content_footer .footer_logo img{width:150px;height:55px;} #footer_wrap .content_footer .personal_link{overflow:hidden;padding:0 0 10px 0px;} #footer_wrap .content_footer .personal_link a{font-size:13px;color:#505050; font-weight:bold;padding:0 3px;letter-spacing:-0.3px;} #footer_wrap .content_footer .address{overflow:hidden;line-height:20px;color:#505050;padding:0 0 0 0px;letter-spacing:-0.1px;} #footer_wrap .content_footer .address span{padding:0 8px 0 0;} #footer_wrap .content_footer .foot02{overflow:hidden; position:absolute;top:65px;right:0;} #footer_wrap .content_footer .foot02 .sns_link{display: inline-block;padding:3px 0 0;} #footer_wrap .content_footer .foot02 .sns_link a{ float:left; padding:0 4px; overflow:hidden;width:30px; height:32px; vertical-align:middle;} #footer_wrap .content_footer .foot02 .sns_link a img{width:100%;} /* media */ @media screen and (max-width: 1200px){ #container_wrap2{background: url("../image/dachaeroumd/main_place_bg.jpg") center center no-repeat; } /*section*/ #container_wrap1, #container_wrap2, #container_wrap3, #container_wrap4, #container_wrap5, #container_wrap6{padding:70px 0; } /*about*/ #inner .inbox_about_left{float:none;width:100%;margin:0 auto;overflow:hidden;} #inner .inbox_about_left .titwrap{padding:0 10px;} #inner .inbox_about_left .titwrap h2{margin:0 0 30px; text-align:center;} #inner .inbox_about_left .titwrap{margin:0 auto;overflow:hidden;} #inner .inbox_about_right{float:none;overflow:hidden;width:100%;margin:0 auto;overflow:hidden;} #inner .inbox_about_right .titwrap{padding:30px 10px 0 10px;} /*place 이미지슬라이드 */ #PlaceSlide .Place_wrap ul li .caption h3 {font-size:12px} /*Real Wedding*/ #inner .inbox_real .portfolio li{ margin:3px;} /*Directing*/ #inner .inbox_direct .directing dl dd img{width:200px;height:200px;} /*footer*/ #footer_wrap .content_footer{ margin:0 auto; text-align:center;padding:50px 20px 150px 20px;} #footer_wrap .content_footer .foot02{left:50%;bottom:70px;top:auto; margin:0 0 0 -90px; width:177px;} #footer_wrap .content_footer .foot02 .sns_link{display: inline-block; float:none;margin:0;} #footer_wrap .content_footer .foot02 .sns_link a{width:44px; height:45px;} } @media screen and (max-width: 800px){ /*Real Wedding*/ #inner .inbox_real .portfolio li{ margin:2px;} /*Directing*/ #inner .inbox_direct .directing dl{float:none;width:100%;padding:40px 0 0 0;} #inner .inbox_direct .directing dl dt{font-size:18px;padding:20px 0 10px 0;} /*contact*/ .inbox_contact_left{width:30%;padding:0 0 0 20px;} .inbox_contact_right{width:65%;padding:0 5px 0 0px;} .section_wrap .inbox_contact_left{padding:0 0 0 0px;} /*파트너쉽*/ #inner .inbox_partner_left{float:none;width:100%;} #inner .inbox_partner_left .titwrap{text-align:center;padding:0 0px 0 0;} #inner .inbox_partner_right{float:none;width:100%;} #inner .inbox_partner_right .titwrap{padding:10px 0 0 0px;} #inner .inbox_partner_right .titwrap p.text{float:none;text-align:center;} #inner .inbox_partner_right .titwrap p.more{padding:20px 0 0 0;text-align:center;} /*footer*/ #footer_wrap .content_footer{padding:50px 20px 120px 20px;} #footer_wrap .content_footer .footer_logo{padding:0 0 15px 0;} #footer_wrap .content_footer .foot02{bottom:65px;} #footer_wrap .content_footer .foot02 .sns_link a{width:32px; height:33px;} } @media screen and (max-width: 700px){ /*about*/ #inner .inbox_about_right{float:none;overflow:hidden;width:100%;} #inner .inbox_about_right .titwrap{margin:0 auto;overflow:hidden;padding:0px 0 0 0;} #inner .inbox_about_right .titwrap dl{float:none;width:100%; text-align:center;padding:40px 0 0 0;} /*contact*/ .inbox_contact{width:100%;padding:0;} .inbox_contact h2{ text-align:center;} .inbox_contact_left{float:none;width:95%;padding:0 10px;} .inbox_contact_left dl{padding:0 0 40px 0; text-align:center;} .inbox_contact_right{float:none;width:96.5%;padding:0 10px;} .section_wrap .inbox_contact_left{padding:0px;} .section_wrap .inbox_contact_right{padding:0px;width:100%;} } @media screen and (max-width: 600px){ #gnb .depth02 {width:100%;} #gnb .depth02 ul {margin:0;} /*section*/ #container_wrap1, #container_wrap2, #container_wrap3, #container_wrap4, #container_wrap5, #container_wrap6{padding:50px 0;letter-spacing:-0.7px; } /*about*/ #inner .inbox_about_left{float:none;border-right:0px;} #inner .inbox_about_left .titwrap p.title{font-weight:bold;text-align:center;margin:0 0 30px;} #inner .inbox_about_left .titwrap h2, #inner .inbox_place h2, #inner .inbox_real h2, #inner .inbox_direct h2{font-size:25px;margin:0 0 20px;} #inner .inbox_direct .directing dl dd img{width:180px;height:180px;} #inner .inbox_contact h2{font-size:25px;margin:0 0 40px;} #inner .inbox_partner_left .titwrap h2{font-size:25px;} /*place 이미지슬라이드 */ #PlaceSlide {padding-top:40px;} #PlaceSlide .Place_wrap ul li .caption {padding:10px 15px} /*Real Wedding*/ #inner .inbox_real .portfolio li{ margin:1px;} #inner .inbox_real p.title{margin:0 0 40px;} #footer_wrap .content_footer .address span{ display:block;} } @media screen and (max-width: 500px){ .inbox_contact_right{width:95%;} .section_wrap .inbox_contact_right{width:100%;} } .btn_acele { position: relative; z-index: 1; display: inline-block; padding: 15px 50px; -webkit-border-radius: 40px; border-radius: 40px; -moz-border-radius:40px; -ms-border-radius:40px; color: #fff; font-family:'NanumGothic'; font-size: 14px; font-weight: bold; text-align: center; text-transform: uppercase; letter-spacing:-0.3px; overflow: hidden; } .btn_acele::after { position: absolute; content: ''; z-index: -1; width: 0%; height: 100%; top: 0; left: 0; -webkit-border-radius: 35px; border-radius: 35px; -moz-border-radius:35px; -ms-border-radius:35px; /* -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; */} .btn_acele:hover::after, .btn_acele:active::after { width: 100%; height: 100%; } .btn_acele:hover { -webkit-transition: box-shadow 0.7s ease; -moz-transition: box-shadow 0.7s ease; -ms-transition: box-shadow 0.7s ease; -o-transition: box-shadow 0.7s ease; transition: box-shadow 0.7s ease; } .btn_primary, .btn_white, .btn_black { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn_primary:hover, .btn_primary:active, .btn_white:hover, .btn_white:active, .btn_black:hover, .btn_black:active { color: #fff; } .btn_primary { background: #ef415a; color: #fff; } .btn_primary::after { background: #111; } .btn_primary:visited { color: #fff; } .btn_primary:hover { color: #fff; -webkit-box-shadow: inset 0 0 0 1px #111; box-shadow: inset 0 0 0 1px #111; } .btn_white { background: #fff; color: #ef415a; } .btn_white::after { background: #111; } .btn_white:visited { color: #ef415a; } .btn_white:hover { color: #fff; -webkit-box-shadow: inset 0 0 0 1px #111; box-shadow: inset 0 0 0 1px #111; } .btn_black { background: #333; *border:3px solid #333; border:3px solid #333\9; border:3px solid #333; color: #fff; } .btn_black::after { background: #777777; } .btn_black:visited { color: #fff; } .btn_black:hover { background: #777777; color: #fff; -webkit-box-shadow: inset 0 0 0 1px #777777; box-shadow: inset 0 0 0 1px #777777; *border:3px solid #777; border:3px solid #777\9; border:3px solid #777;} .btn_stroke_white { -webkit-box-shadow: inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 2px #fff; background: transparent; color: #fff; } .btn_stroke_white::after { background: #fff; } .btn_stroke_white:visited { color: #fff; } .btn_stroke_white:hover { color: #333333; } /* .btn_stroke_black { -webkit-box-shadow: inset 0 0 0 2px #333; box-shadow: inset 0 0 0 2px #333; background: transparent; color: #333; } .btn_stroke_white::after { background: #333; } .btn_stroke_white:visited { color: #333; } .btn_stroke_white:hover { color: #777; } */ .btn_stroke_gray { *border:2px solid #ddd; border:2px solid #ddd\9; border:2px solid #ddd; background: transparent; color: #333; } .btn_stroke_gray::after { background: #333; } .btn_stroke_gray:visited { color: #333; } .btn_stroke_gray:hover { *border:2px solid #333; border:2px solid #333\9; border:2px solid #333; background: #333; color: #fff; } .btn_stroke_black { *border:2px solid #333; border:2px solid #333\9; border:2px solid #333; background: transparent; color: #333; } .btn_stroke_black::after { background: #333; } .btn_stroke_black:visited { color: #333; } .btn_stroke_black:hover { background: #333; color: #fff; } @media screen and (max-width: 1020px) { .btn_acele { padding: 10px 30px; font-size:12px;} } @media screen and (max-width: 991px) { .bullets { margin-top: 30px; text-align: center; } } .bullets span { display: inline-block; vertical-align: middle; width: 20px; color: #111; opacity: 0.2; font-size: 30px; line-height: 30px; text-align: center; cursor: pointer; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -ms-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } .bullets span:hover { color: #ef415a; opacity: 1; } .bullets span.cycle-pager-active { color: #ef415a; opacity: 1; font-size: 60px; } .loader { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999999; background: #fff; } .loader .spinner { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; } .loader .double-bounce1 { width: 100%; height: 100%; border-radius: 50%; background-color: #111; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); opacity: 0.3; } 50% { -webkit-transform: scale(1); opacity: 1; } } @keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); opacity: 0.3; } 50% { transform: scale(1); -webkit-transform: scale(1); opacity: 1; } } .animated { opacity: 0; } /** * Animations */ .fromTopIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromTopOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,-10px); opacity: 0.0; } .fromBottomIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromBottomOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,10px); opacity: 0.0; } .fromLeftIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromLeftOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(-10px,0); opacity: 0.0; } .fromRightIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; } .fromRightOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(10px, 0); opacity: 0.0; } .scaleUpIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0; } .scaleUpOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.3,1.3); opacity: 0.0; } .scaleDownIn { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(1.0,1.0); opacity: 1.0; } .scaleDownOut { transition: transform 1.0s ease, opacity 1.0s ease; transform: scale(0.7,0.7); opacity: 0.0; } @keyframes chevronAnimation { 0% { transform: translate(0,0) scale(1.0,1.0); } 50% { transform: translate(0,5px) scale(0.8,0.8); } 100% { transform: translate(0,0) scale(1.0,1.0); } }