@charset "UTF-8"; #accessbility {position:fixed; z-index:20000; left:0; top:0; right:0} #accessbility a {position:absolute; left:0; top:-100px; right:0; padding:10px 0 8px; text-align:center; font-weight:bold; color:#000; background:#fff; border-bottom:1px solid #000} #accessbility a:focus {top:0} #wrapper {height:100%} #header {position:fixed; left:0; right:0; top:0; z-index:1000} #header:after {content:""; display:block; clear:both} #header .top-menu {position:relative; z-index:10000; min-width:1200px; height:70px; padding:0 30px; border-bottom:1px solid #ddd; background:#fff; transition:all .2s linear} #header .top-menu:after {content:""; display:block; clear:both} #header .menu-btns {float:left; margin-left:-3px; height:70px} #header .menu-btns:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #header .menu-btns a {display:inline-block; width:18px; height:18px; font-size:0; text-indent:-9999em; vertical-align:middle} #header .menu-btns .menu {background:url(/images/common/btn-menu.png) 0 50% no-repeat} #header .menu-btns .close {display:none; background:url(/images/common/btn-menu-close.png) 0 50% no-repeat} #header .logo {position:absolute; left:88px; top:50%; width:140px; height:10px; margin-top:-9px; padding:4px 0} #header .logo span {position:absolute; left:0; top:50%; width:140px; height:10px; margin-top:-5px; font-size:0; text-indent:-9999em} #header .logo span.b {background:url(/images/common/ico-bi-b.png) 0 50% no-repeat; transition:all .4s linear} #header .logo span.w {background:url(/images/common/ico-bi-w.png) 0 50% no-repeat; opacity:0; transition:all .4s linear} #header .menu-main {position:absolute; left:50%; top:50%; width:210px; margin:-35px 0 0 -105px; clear:both; height:70px; text-align:center} html.eng #header .menu-main {width:414px; margin-left:-207px} #header .menu-main:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #header .menu-main a {display:inline-block; font-family:"RixSGo B"; /*color:#767676;*/ vertical-align:middle} html.eng #header .menu-main a {font-family:'Montserrat'; font-weight:500} #header .menu-main a:first-child {color:#ce4c00} #header .menu-main a:nth-child(2) {color:#664e9c} #header .menu-main a:nth-child(3) {color:#0072bc} #header .menu-main.performance a, #header .menu-main.exhibit a, #header .menu-main.education a {color:#767676} #header .menu-main.performance a:first-child.on, #header .menu-main.exhibit a:first-child.on, #header .menu-main.education a:first-child.on {color:#ce4c00} #header .menu-main.performance a:nth-child(2).on, #header .menu-main.exhibit a:nth-child(2).on, #header .menu-main.education a:nth-child(2).on {color:#664e9c} #header .menu-main.performance a:nth-child(3).on, #header .menu-main.exhibit a:nth-child(3).on, #header .menu-main.education a:nth-child(3).on {color:#0072bc} #header .menu-main a ~ a {margin-left:55px} #header .menu-etc {float:right; height:70px} #header .menu-etc:after {content:""; display:block; clear:both} #header .menu-etc:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #header .menu-etc .links {float:left; height:70px; padding-bottom:2px} #header .menu-etc .links:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #header .menu-etc .links a {font-size:12px; vertical-align:middle; transition:all .4s linear} html.eng #header .menu-etc .links a {font-size:11px} #header .menu-etc .links a.doosan {margin-right:16px; padding:4px 0 4px 54px; background:url(/images/common/bg-doosan.png) 0 50% no-repeat} #header .menu-etc .links a.yonkang {line-height:20px} #header .menu-etc > a {display:inline-block; margin-left:46px; vertical-align:middle} #header .menu-etc .eng {margin-bottom:2px; padding-bottom:6px; font-family:"Montserrat"; font-size:11px; color:#555; border-bottom:2px solid #000; transition:all .4s linear} html.eng #header .menu-etc .eng {font-size:10px} #header .menu-etc .search {width:19px; height:18px; font-size:0; text-indent:-9999em; background:url(/images/common/btn-search.png) no-repeat; transition:all .4s linear} #header .menu-etc .search-area {display:none; position:absolute; top:0; left:0; right:0; height:70px; padding-left:72px; text-align:center; background:#000} #header .menu-etc .search-area input[type="text"] {width:500px; height:40px; line-height:40px; margin:13px 0 17px; padding:0 50px 0 0; font-family:"RixSGo B"; font-size:14px; color:#cecece; border:none; border-bottom:3px solid #bbb; background:#000} html.eng #header .menu-etc .search-area input[type="text"] {font-size:13px} #header .menu-etc .search-area input[type="text"]::-ms-clear {width:18px; height:18px; color:#ddd; border-radius:100%; background:#444} #header .menu-etc .search-area input[type="text"]::placeholder {color:#bbb} #header .menu-etc .search-area input[type="text"]::-webkit-input-placeholder {color:#bbb} #header .menu-etc .search-area input[type="text"]:-moz-placeholder {color:#bbb} #header .menu-etc .search-area input[type="text"]::-moz-placeholder {color:#bbb} #header .menu-etc .search-area input[type="text"]:-ms-input-placeholder {color:#bbb} #header .menu-etc .search-area label {width:0; height:0; overflow:hidden; font-size:0; line-height:0; opacity:0} html.eng #header .menu-etc .search-area input[type="text"] {font-family:'Montserrat'; } #header .menu-etc .search-area input[type="text"] + .submit {width:40px; height:40px; margin:11px 0 0 -40px; font-size:0; text-indent:-9999em; vertical-align:top; cursor:pointer; border:none; background:url(/images/common/btn-search-g.png) 50% 50% no-repeat} #header .menu-etc .search-area .close {float:right; width:72px; height:70px; font-size:0; text-indent:-9999em; vertical-align:middle; background:url(/images/common/btn-close-w.png) 50% 50% no-repeat} #header #gnb {overflow:hidden; position:absolute; left:0; right:0; top:-1999px; bottom:0; /*min-height:543px;*/ background:#fff} #header #gnb .upper-menu {min-width:1200px; height:45px; padding:0 30px 0 26px; border-bottom:1px solid #ddd} #header #gnb .upper-menu .menu-head {display:inline-block; height:45px} #header #gnb .upper-menu .menu-head:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #header #gnb .upper-menu .menu-head a {display:inline-block; font-size:14px; vertical-align:middle} html.eng #header #gnb .upper-menu .menu-head a {font-size:12px} #header #gnb .upper-menu .menu-head a ~ a {margin-left:45px} html.eng #header #gnb .upper-menu .menu-head a.dlive {font-family:"Montserrat"} #header #gnb .upper-menu .sns {float:right; height:45px} #header #gnb .upper-menu .sns a {display:inline-block; width:20px; height:20px; font-size:0; text-indent:-9999em; border-radius:100%} #header #gnb .upper-menu .sns a ~ a {margin-left:16px} #header #gnb .upper-menu .sns a.fb {background:#767676 url(/images/common/ico-fb.png) 50% 50% no-repeat} #header #gnb .upper-menu .sns a.tw {background:#767676 url(/images/common/ico-tw.png) 50% 50% no-repeat} #header #gnb .upper-menu .sns a.ins {background:#767676 url(/images/common/ico-ins.png) 50% 50% no-repeat} #header #gnb .upper-menu .sns a.yb {background:#767676 url(/images/common/ico-yb.png) 50% 50% no-repeat} #header #gnb .upper-menu .sns a.pb {background:#767676 url(/images/common/ico-pb.png) 50% 50% no-repeat} #header #gnb .lower-menu {overflow:auto; height:calc(100% - 90px); /*padding:0 30px 0 26px*/} #header #gnb .lower-menu:after {content:""; display:block; clear:both} #header #gnb .lower-menu .list {float:left; width:50%; padding-top:30px; padding-left:30px} #header #gnb .lower-menu .list > ul > li {margin-left:3px} #header #gnb .lower-menu .list > ul > li ~ li {margin-top:29px} #header #gnb .lower-menu .list > ul > li:after {content:""; display:block; clear:both} #header #gnb .lower-menu .list > ul > li > a {float:left; width:20%; background:url(/images/common/bg-path-arr.png) right 50% no-repeat} html.eng #header #gnb .lower-menu .list > ul > li > a {padding-right:6px; box-sizing:border-box} #header #gnb .lower-menu .list > ul > li > ul {float:left; width:80%; padding:0 24px} #header #gnb .lower-menu .list > ul > li > ul:after {content:""; display:block; clear:both} #header #gnb .lower-menu .list > ul > li > ul > li {float:left; width:33.33%; margin-top:12px} #header #gnb .lower-menu .list > ul > li > ul > li:first-child, #header #gnb .lower-menu .list > ul > li > ul > li:nth-child(2), #header #gnb .lower-menu .list > ul > li > ul > li:nth-child(3) {margin-top:0} #header #gnb .lower-menu .list > ul > li > ul > li:nth-child(3n-1) {padding-left:9px} #header #gnb .lower-menu .list > ul > li > ul > li:nth-child(3n) {padding-left:18px} #header #gnb .lower-menu .list > ul > li > ul > li > a {display:inline-block; font-size:12px; color:#767676} #header #gnb .lower-menu .lower-inner {position:relative; min-width:1200px; height:100%} #header #gnb .lower-menu .lower-inner:before {content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ddd} #header #gnb .lower-menu .lower-inner:after {content:""; position:absolute; right:15%; top:0; width:1px; height:100%; background:#ddd} html.eng #header #gnb .lower-menu .list > ul > li > ul > li > a {line-height:1.2; font-size:11px} #header #gnb .lower-menu .contact {float:left; position:relative; width:35%; padding:30px 0 0 31px} /*#header #gnb .lower-menu .contact:after {content:""; position:absolute; left:0; top:0; width:1px; height:100%; background:#ddd} #header #gnb .lower-menu .contact:before {content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#ddd}*/ #header #gnb .lower-menu .contact > ul ~ ul {/*position:absolute; left:31px; top:272px*/ margin-top:82px} #header #gnb .lower-menu .contact > ul > li ~ li {margin-top:32px} #header #gnb .lower-menu .contact > ul > li > strong {display:block; font-family:"RixSGo M"; font-size:12px} html.eng #header #gnb .lower-menu .contact > ul > li > strong {font-family:'Montserrat', "RixSGo M"; font-weight:400; font-size:11px} #header #gnb .lower-menu .contact > ul > li > strong > span {display:inline-block; margin-left:10px; font-family:"Montserrat"; font-size:10px} html.eng #header #gnb .lower-menu .contact > ul > li > strong > span {font-size:9px} #header #gnb .lower-menu .contact > ul > li > p {position:relative; display:inline-block; padding-top:10px; font-family:"Montserrat"; font-size:11px; color:#767676} #header #gnb .lower-menu .contact > ul > li > p > .num {color:#000} #header #gnb .lower-menu .contact > ul > li > p > .email {display:inline-block; margin-left:17px; padding-left:23px; color:#000; background:url(/images/common/ico-email.png) 0 50% no-repeat} #header #gnb .lower-menu .contact > ul > li > p > .email a {font-family:"Montserrat"; font-size:11px} html.eng #header #gnb .lower-menu .contact > ul > li > p > .email a {font-size:10px} #header #gnb .lower-menu .contact > ul > li > p > .map {position:absolute; top:6px; width:38px; height:19px; line-height:19px; text-align:center; font-family:"Montserrat"; font-weight:400; font-size:10px; color:#fff; border-radius:2em; background:#363636} html.eng #header #gnb .lower-menu .contact > ul > li > p > .map {font-size:9px} #header #gnb .lower-menu .contact > ul > li > p > .map1 {right:-55px} #header #gnb .lower-menu .contact > ul > li > p > .map2 {right:-56px} #header #gnb .lower-menu .contact > ul > li:nth-child(3){margin-top:29px} #header #gnb .lower-menu .contact > ul ~ ul > li:nth-child(3){margin-top:18px} #header #gnb .lower-menu .etc {float:left; position:relative; width:15%; padding:27px 0 0 33px} #header #gnb .lower-menu .etc > ul > li ~ li {margin-top:14px} #header #gnb .lower-menu .etc > ul > li > a {display:inline-block; font-size:12px; color:#767676} html.eng #header #gnb .lower-menu .etc > ul > li > a {font-size:11px} #header #gnb .lower-menu .etc > .info {/*position:absolute; left:30px; top:273px*/ margin-top:62px} #header #gnb .lower-menu .etc > .info p {line-height:1.4; font-size:11px; color:#767676} #header #gnb .lower-menu .etc > .info p ~ p {margin-top:35px} #header #gnb .lower-menu .etc > .info p > span {display:block; margin-top:7px} html.eng #header #gnb .lower-menu .etc > .info p > span {font-size:11px} #header #gnb .gnb-footer {position:absolute; left:0; right:0; bottom:0; height:45px; padding:0 30px; border-top:1px solid #ddd; background:#fff} #header #gnb .gnb-footer:after {content:""; display:block; clear:both} #header #gnb .gnb-footer p {float:left; margin:11px 0 14px; padding:6px 0 2px 54px; font-family:"Montserrat"; font-size:10px; color:#767676; background:url(/images/common/bg-doosan.png) 0 50% no-repeat} html.eng #header #gnb .gnb-footer p {font-size:9px} #header #gnb .gnb-footer .copy {float:right; line-height:45px; font-family:"Montserrat"; font-size:10px; color:#767676} html.eng #header #gnb .gnb-footer .copy {font-size:9px} /*#header.dopen .top-menu {border-color:#333; background:rgba(255, 255, 255, 0)} #header.dopen .menu-main a, #header.dopen .menu-main a.on, #header.dopen .menu-main.performance a:first-child.on, #header.dopen .menu-main.exhibit a:first-child.on, #header.dopen .menu-main.education a:first-child.on, #header.dopen .menu-main.performance a:nth-child(2).on, #header.dopen .menu-main.exhibit a:nth-child(2).on, #header.dopen .menu-main.education a:nth-child(2).on, #header.dopen .menu-main.performance a:nth-child(3).on, #header.dopen .menu-main.exhibit a:nth-child(3).on, #header.dopen .menu-main.education a:nth-child(3).on {color:#fff} #header.dopen .menu-btns .menu {background:url(/images/common/btn-menu-w.png) 0 50% no-repeat} #header.dopen .menu-etc .links a {color:#fff} #header.dopen .menu-etc .links a.doosan {background-image:url(/images/common/bg-doosan-open.png)} #header.dopen .menu-etc .eng {color:#fff; border-color:#fff} #header.dopen .menu-etc .search {background:url(/images/common/btn-search-w.png) no-repeat} #header.dopen .logo span.b {opacity:0} #header.dopen .logo span.w {opacity:1}*/ /*top banner*/ .top-bann {position:relative; z-index:10000; height:76px; background:#000} .top-bann p {position:relative; height:76px; text-align:center} .top-bann p:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} .top-bann p span {color:#fff; opacity:0.8; vertical-align:middle} .top-bann p strong {display:inline-block; font-size:20px; color:#ffd908; vertical-align:middle} html.eng .top-bann p strong {font-size:19px} .top-bann p span + strong, .top-bann p strong + span {margin-left:30px} .top-bann a:hover span, .top-bann a:focus span, .top-bann a:hover strong, .top-bann a:focus strong {text-decoration:underline} .top-bann .btns {position:absolute; right:20px; top:0; height:76px} .top-bann .btns:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} .top-bann .btns input[type="checkbox"] + label {height:16px; line-height:16px; padding-left:26px; font-size:12px; color:#fff; vertical-align:middle} html.eng .top-bann .btns input[type="checkbox"] + label {font-size:11px} .top-bann .btns input[type="checkbox"] + label:after {width:14px; height:14px; border:1px solid #fff; border-radius:0; background:#000} .top-bann .btns input[type="checkbox"]:checked + label:after {background:url(/images/common/ico-checkbox2.png) 50% 50% no-repeat} .top-bann .btns .close {display:inline-block; width:12px; height:12px; margin-left:37px; font-size:0; text-indent:-9999em; background:url(/images/common/btn-close-w.png) no-repeat; vertical-align:middle} /* Dlive */ #dlive {/*position:fixed;*/ top:0; right:0; bottom:0; left:0} #dlive nav {position:fixed; top:70px; right:0; bottom:0; z-index:3; width:68px; border-left:1px solid #ddd; background:rgba(255, 255, 255, .9);} #dlive nav:before {content:""; display:inline-block; width:0; height:100%; margin-left:-5px; vertical-align:middle} #dlive nav ul {display:inline-block; vertical-align:middle} #dlive nav ul li {text-align:center; } #dlive nav ul li a {display:inline-block; width:68px; padding-top:35px; font-size:10px} html.eng #dlive nav ul li a {font-family:"Montserrat"; font-size:9px} #dlive nav ul li ~ li {margin-top:78px} #dlive nav ul li.open a {background:url(/images/common/ico-dlive-live-black.png) 50% 0 no-repeat} #dlive nav ul li.login a {background:url(/images/common/ico-dlive-login-black.png) 50% 0 no-repeat} #dlive nav ul li.logout a {background:url(/images/common/ico-dlive-logout-black.png) 50% 0 no-repeat} #dlive .d-live {display:none; position:relative; right:-200%; z-index:1; width:100%; height:100%; background:#fff}/* 170508 */ #dlive .d-live .close {position:absolute; left:50%; top:14%; margin-left:-20px; padding:10px 0 10px 18px; font-family:"RixSGo B"; font-size:12px; background:url(/images/common/bg-close-black.png) 0 50% no-repeat} html.eng #dlive .d-live .close {font-family:"Montserrat"; font-size:9px} #dlive .d-live .d-calendar {position:absolute; left:50%; top:23.33%; width:1200px; margin-left:-600px; padding:0 30px} #dlive .d-live .d-calendar:after {content:""; display:block; clear:both} #dlive .d-live .d-calendar .month {float:left; position:relative; height:32px; margin-top:7px; padding-right:39px} #dlive .d-live .d-calendar .month strong {line-height:32px; font-family:"Montserrat"; font-size:24px} html.eng #dlive .d-live .d-calendar .month strong {font-size:23px} #dlive .d-live .d-calendar .month a {position:absolute; right:0; width:29px; height:16px; font-size:0; text-indent:-9999em} #dlive .d-live .d-calendar .month a.prev {top:0; background:url(/images/common/bg-dlive-prev-black.png) 50% 50% no-repeat} #dlive .d-live .d-calendar .month a.next {bottom:0; background:url(/images/common/bg-dlive-next-black.png) 50% 50% no-repeat} #dlive .d-live .d-calendar .date {float:right} #dlive .d-live .d-calendar .date ul:after {content:""; display:block; clear:both} #dlive .d-live .d-calendar .date ul li {float:left; height:45px} #dlive .d-live .d-calendar .date ul li ~ li {margin-left:1px} #dlive .d-live .d-calendar .date ul li a {display:block; width:30px; height:45px; line-height:45px; font-family:"Montserrat"; font-size:15px; color:#767676; text-align:center; box-sizing:border-box} html.eng #dlive .d-live .d-calendar .date ul li a {font-size:15px} #dlive .d-live .d-calendar .date ul li a:hover, #dlive .d-live .d-calendar .date ul li a:focus {position:relative; padding-top:1px; line-height:39px; color:#e1002a; border:2px solid #e1002a} #dlive .d-live .d-calendar .date ul li a:hover:after, #dlive .d-live .d-calendar .date ul li a:focus:after {content:""; position:absolute; left:50%; top:-13px; width:12px; height:6px; margin-left:-6px; background:url(/images/common/bg-dlive-pointer.png) no-repeat} #dlive .d-live .d-calendar .date ul li.selected a:hover:after, #dlive .d-live .d-calendar .date ul li.selected a:focus:after {display:none} #dlive .d-live .d-calendar .date ul li.selected a {color:#fff; background:#e1002a} #dlive .d-live .d-works {font-size:0; position:absolute; /*left:50%;*/ left:0; top:34%; /*width:1200px;*/ width:100%; /*margin-left:-600px;*/ /*padding:3.5% 0 0 30px*/ padding:3.5% 0 0 0} #dlive .d-live .d-works.center {padding-left:0; text-align:center} #dlive .d-live .d-works .d-works-inner {width:10000px; font-size:0} #dlive .d-live .d-works.center .d-works-inner {display:inline-block} #dlive .d-live .d-works.center .slick-arrow-pc {display:none} #dlive .d-live .d-works .slick-arrow-pc.disabled {opacity:.4} #dlive .d-live .d-works .works {display:inline-block; position:relative; height:372px; margin:0 45px; text-align:center} #dlive .d-live .d-works .works.added {opacity:0} /*#dlive .d-live .d-works .works ~ .works {margin-left:90px}*/ #dlive .d-live .d-works .works .img {display:inline-block; overflow:hidden; height:245px} #dlive .d-live .d-works .works .img:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #dlive .d-live .d-works .works .img a {display:inline-block; width:100%} #dlive .d-live .d-works .works .img img {display:inline-block; width:100%; vertical-align:middle} #dlive .d-live .d-works .works .img.poster {width:180px} #dlive .d-live .d-works .works .img.work {width:270px} #dlive .d-live .d-works .works .info {position:absolute; left:0; bottom:0; width:100%; height:102px} #dlive .d-live .d-works .works .info > em {display:none; font-style:normal; font-size:12px} html.eng #dlive .d-live .d-works .works .info > em {font-size:11px} #dlive .d-live .d-works .works .info > strong {display:block; overflow:hidden; height:50px} #dlive .d-live .d-works .works .info > strong a {display:block; line-height:1.4; padding:0 15px; font-size:18px; letter-spacing:-0.04em} html.eng #dlive .d-live .d-works .works .info > strong a {font-size:18px} #dlive .d-live .d-works .works .info > strong a > span {display:block; line-height:1.4} html.eng #dlive .d-live .d-works .works .info > strong a > span {font-size:18px} #dlive .d-live .d-works .works .info > span {display:block; position:absolute; left:0; bottom:0; width:100%; font-family:'Montserrat'; font-size:11px; text-align:center} html.eng #dlive .d-live .d-works .works .info > span {font-size:10px} #dlive .d-live .d-works .works .info > span > span.place {display:block; margin-top:15px; font-family:"RixSGo M"; font-size:12px; color:#767676} html.eng #dlive .d-live .d-works .works .info > span > span.place {font-family:'Montserrat'; font-size:11px} #dlive .d-live .d-works .slick-arrow {position:absolute; bottom:initial; top:0; width:30px; height:19px; text-indent:-999em; cursor:pointer} #dlive .d-live .d-works .slick-prev {left:50%; margin-left:-50px; background:url(/images/common/btn-slide-prev-black.png) 0 0 no-repeat} #dlive .d-live .d-works .slick-next {right:50%; margin-right:-50px; background:url(/images/common/btn-slide-next-black.png) 0 0 no-repeat} #dlive .d-live .d-nodata {display:block; position:absolute; left:0; top:54%; width:100%; text-align:center} #dlive .d-live .d-nodata strong {display:block; margin-top:18px; font-family:"RixSGo M"; font-size:30px; color:#767676; letter-spacing:-0.04em} html.eng #dlive .d-live .d-nodata strong {font-family:'Montserrat'; font-size:29px} #container {padding-top:70px} /* mobile setting */ @media screen and (max-width:767px) { /*#wrapper.with-intro {height:0; overflow:hidden} #wrapper.with-intro #footer .fns {display:none}*/ #container {padding-top:44px} #container.section-main-m {padding-top:0} #header-m {position:fixed; left:0; right:0; top:0; z-index:1000} #header-m .top-menu {position:relative; text-align:center; background:#fff; transition:all .4s linear} #header-m .top-menu .inner-top-menu {position:relative; border-bottom:1px solid #000} #header-m .top-menu:after {content:""; display:block; clear:both} #header-m .top-menu .menu-btns {float:left; height:44px; padding-right:20px} html.eng #header-m .top-menu .menu-btns {padding-right:0} #header-m .top-menu .menu-btns a {display:inline-block; width:44px; height:44px; font-size:0; text-indent:-9999em; vertical-align:top} #header-m .top-menu .menu-btns a.menu {background:url(/images/common/btn-menu-m.png) 50% 50% no-repeat; background-size:15px 11px; transition:all .4s linear} #header-m .top-menu .menu-btns a.close {display:none; background:url(/images/common/btn-close-s-m.png) 50% 50% no-repeat; background-size:10px 10px; transition:all .4s linear} #header-m .top-menu .menu-btns a.close.w {display:none; background:url(/images/common/btn-close-sw-m.png) 50% 50% no-repeat; background-size:10px 10px; transition:all .4s linear} #header-m .top-menu .logo {display:inline-block; position:relative; width:120px; height:44px; font-size:0; text-indent:-9999em; vertical-align:top} #header-m .top-menu .logo span {position:absolute; left:0; top:0; width:120px; height:44px; font-size:0} #header-m .top-menu .logo span.b {background:url(/images/common/ico-bi-b-m.png) 50% 50% no-repeat; background-size:120px 9px; transition:all .4s linear} #header-m .top-menu .logo span.w {display:none; background:url(/images/common/ico-bi-w-m.png) 50% 50% no-repeat; background-size:120px 9px} #header-m .top-menu .menu-sub {float:right; margin-right:10px} #header-m .top-menu .menu-sub a {display:inline-block; width:30px; height:44px; font-size:0; text-indent:-9999em; vertical-align:top} /*#header-m .top-menu .menu-sub a.dlive {background:url(/images/common/btn-dlive-m.png) 50% 50% no-repeat; background-size:11.5px 14px; transition:all .4s linear} #header-m .top-menu .menu-sub a.dlive-close {display:none; background:url(/images/common/btn-close-sw-m.png) 50% 50% no-repeat; background-size:10px 10px; transition:all .4s linear}*/ #header-m .top-menu .menu-sub a.search {background:url(/images/common/btn-search-m.png) 50% 50% no-repeat; background-size:14px 14px; transition:all .4s linear} #header-m .top-menu .menu-sub a.search-close {display:none; position:relative; z-index:1501; background:url(/images/common/btn-close-sw-m.png) 50% 50% no-repeat; background-size:10px 10px; transition:all .4s linear} #header-m .top-menu .menu-sub a.login {background:url(/images/common/btn-login.png) 50% 50% no-repeat; background-size:15px auto; transition:all .4s linear} #header-m .top-menu .menu-sub a.logout {background:url(/images/common/btn-logout.png) 50% 50% no-repeat; background-size:15px auto; transition:all .4s linear} #header-m .top-menu .menu-sub .search-area {display:none; position:absolute; left:0; right:0; top:0; z-index:1500} #header-m .top-menu .menu-sub .search-area .search-inner {width:100%; height:52px; margin-top:44px; padding-left:15px; background:#000} #header-m .top-menu .menu-sub .search-area .search-inner:after {content:""; display:block; clear:both} #header-m .top-menu .menu-sub .search-area input[type="text"] {float:left; width:calc(100% - 47px); height:35px; line-height:1.2em; margin-top:6px; padding:11px 15px 8px; font-size:12px; color:#fff; border:2px solid #fff; background:transparent} #header-m .top-menu .menu-sub .search-area input[type="text"]::placeholder {color:#fff} #header-m .top-menu .menu-sub .search-area input[type="text"]::-webkit-input-placeholder {color:#fff} #header-m .top-menu .menu-sub .search-area input[type="text"]:-moz-placeholder {color:#fff} #header-m .top-menu .menu-sub .search-area input[type="text"]::-moz-placeholder {color:#fff} #header-m .top-menu .menu-sub .search-area input[type="text"]:-ms-input-placeholder {color:#fff} #header-m .top-menu .menu-sub .search-area input[type="text"] + .submit {float:left; width:47px; height:35px; margin-top:6px; font-size:0; text-indent:-9999em; border:none; background:url(/images/common/btn-search-w-m.png) 50% 50% no-repeat; background-size:14px 14px} #header-m .top-menu .menu-sub .search-area label {width:0; height:0; overflow:hidden; font-size:0; line-height:0; opacity:0} #header-m .top-menu .menu-main {width:100%; height:52px; padding:0 15px; border-bottom:1px solid #d1d1d1; text-align:center} html.eng #header-m .top-menu .menu-main {-webkit-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between} #header-m .top-menu .menu-main a {display:inline-block; width:25%; padding:19px 0; font-size:13px; color:#8c8c8c} html.eng #header-m .top-menu .menu-main a {width:auto} html.eng #header-m .top-menu .menu-main a ~ a {margin-left:13px} #header-m .top-menu .menu-main a.on {position:relative; color:#000} #header-m .top-menu .menu-main a.on:after {content:""; position:absolute; left:50%; bottom:0; width:30px; height:2px; margin-left:-15px; background:#000} #header-m .top-menu.start {background:transparent} #header-m .top-menu.start .inner-top-menu {background:transparent; border-color:rgba(255, 255, 255, 0.3); transition:all .4s linear} #header-m .top-menu.start .menu-btns a.menu {background:url(/images/common/btn-menu-w-m.png) 50% 50% no-repeat; background-size:15px 11px} #header-m .top-menu.start .logo span.b {display:none} #header-m .top-menu.start .logo span.w {display:inline-block} /*#header-m .top-menu.start .menu-sub a.dlive {background:url(/images/common/btn-dlive-w-m.png) 50% 50% no-repeat; background-size:11.5px 14px}*/ #header-m .top-menu.start .menu-sub a.search {background:url(/images/common/btn-search-w-m.png) 50% 50% no-repeat; background-size:14px 14px} #header-m .top-menu.start .menu-sub a.login {background:url(/images/common/btn-login-w.png) 50% 50% no-repeat; background-size:15px auto; transition:all .4s linear} #header-m .top-menu.start .menu-sub a.logout {background:url(/images/common/btn-logout-w.png) 50% 50% no-repeat; background-size:15px auto; transition:all .4s linear} #header-m .top-menu.start .menu-main {border-color:rgba(255, 255, 255, 0.3)} #header-m .top-menu.start .menu-main a {color:#fff; opacity:.6} #header-m .top-menu.start .menu-main a.on {opacity:1} #header-m .top-menu.start .menu-main a.on:after {background:#fff} #header-m .top-menu.active .inner-top-menu {background:#000; transition:all .4s linear} #header-m .top-menu.active .menu-btns a.menu {background:url(/images/common/btn-menu-w-m.png) 50% 50% no-repeat; background-size:15px 11px; opacity:.66} #header-m .top-menu.active .menu-btns a.close.w {opacity:.66} #header-m .top-menu.active .logo span.b {display:none} #header-m .top-menu.active .logo span.w {display:inline-block; opacity:.66} #header-m .top-menu.active .menu-sub a.dlive {background:url(/images/common/btn-dlive-w-m.png) 50% 50% no-repeat; background-size:11.5px 14px; opacity:.66} #header-m .top-menu.active .menu-sub a.search {background:url(/images/common/btn-search-w-m.png) 50% 50% no-repeat; background-size:14px 14px; opacity:.66} #header-m #gnb {position:fixed; top:-200%; left:0; right:0; z-index:1000; height:calc(100% - 45px); background:#fff; overflow-x:hidden; overflow-y:auto} #header-m #gnb .upper-menu .links {padding:0 15px; text-align:center; border-bottom:1px solid #ddd} #header-m #gnb .upper-menu .links .inner {display:inline-block} /*#header-m #gnb .upper-menu .links .inner:after {content:""; display:block; clear:both}*/ #header-m #gnb .upper-menu .links .inner {-webkit-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between} #header-m #gnb .upper-menu .links a {float:left; width:86px; height:50px; line-height:52px; font-size:10px; color:#767676} html.eng #header-m #gnb .upper-menu .links a {width:auto} html.eng #header-m #gnb .upper-menu .links a span {font-size:10px} /*#header-m #gnb .upper-menu .links a ~ a {margin-left:41px}*/ html.eng #header-m #gnb .upper-menu .links a ~ a {margin-left:18px} /*#header-m #gnb .upper-menu .links a.doosan {padding-left:40px; background:url(/images/common/bg-doosan-m.png) 0 50% no-repeat; background-size:34.5px 16px}*/ #header-m #gnb .upper-menu .links a.eng {font-family:'Montserrat'} #header-m #gnb .upper-menu .menu-head {padding:0 15px; text-align:center; border-bottom:1px solid #ddd} #header-m #gnb .upper-menu .menu-head .inner {display:inline-block} html.eng #header-m #gnb .upper-menu .menu-head .inner {display:inline-block} html.eng #header-m #gnb .upper-menu .menu-head .inner:after {content:""; display:block; clear:both} /*#header-m #gnb .upper-menu .menu-head .inner:after {content:""; display:block; clear:both}*/ #header-m #gnb .upper-menu .menu-head .inner {-webkit-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between} #header-m #gnb .upper-menu .menu-head a {float:left; display:inline-block; width:86px; height:50px; line-height:52px; font-size:10px; color:#767676} /*#header-m #gnb .upper-menu .menu-head a ~ a {margin-left:20px}*/ #header-m #gnb .lower-menu .list {border-bottom:1px solid #ddd} #header-m #gnb .lower-menu .list > ul > li {position:relative; padding:13px 15px} #header-m #gnb .lower-menu .list > ul > li ~ li {border-top:1px solid #ddd} #header-m #gnb .lower-menu .list > ul > li > a {display:inline-block; margin:5px 0; padding:5px 0; font-size:16px} #header-m #gnb .lower-menu .list > ul > li > a.toggle {position:absolute; right:0; top:0; width:52px; height:62px; margin:0; padding:0; font-size:0; text-indent:-9999em; background:url(/images/common/bg-gnb-toggle.png) 50% 50% no-repeat; background-size:20px 20px} #header-m #gnb .lower-menu .list > ul > li.on > a.toggle {background:url(/images/common/bg-gnb-toggle-on.png) 50% 50% no-repeat; background-size:20px 20px} #header-m #gnb .lower-menu .list > ul > li > ul {display:none; margin-top:5px} #header-m #gnb .lower-menu .list > ul > li > ul:after {content:""; display:block; clear:both} #header-m #gnb .lower-menu .list > ul > li > ul > li {float:left; width:50%; padding-bottom:12px} #header-m #gnb .lower-menu .list > ul > li > ul > li > a {display:inline-block; font-size:11px; color:#555} #header-m #gnb .lower-menu .etc {padding:25px 15px 30px; border-bottom:1px solid #ddd} #header-m #gnb .lower-menu .etc ul:after {content:""; display:block; clear:both} #header-m #gnb .lower-menu .etc ul li {float:left; width:50%} #header-m #gnb .lower-menu .etc ul li:nth-child(2) ~ li {margin-top:12px} #header-m #gnb .lower-menu .etc ul li a {display:inline-block; font-size:11px; color:#767676} html.eng #header-m #gnb .lower-menu .etc ul li a span {display:block; line-height:2; font-size:11px} #header-m #gnb .lower-menu .info {margin-top:30px} #header-m #gnb .lower-menu .info p {margin-top:12px; font-size:11px; color:#767676} #header-m #gnb .lower-menu .info p span {float:right; width:calc(100% - 82px)} html.eng #header-m #gnb .lower-menu .info p span {float:none; display:block; width:auto; line-height:2; font-weight:500; font-size:11px} #header-m #gnb .gnb-footer {padding:15px 15px 30px; text-align:center} #header-m #gnb .gnb-footer .sns {display:inline-block; text-align:center} #header-m #gnb .gnb-footer .sns a {display:inline-block; position:relative; width:30px; height:30px; font-size:0; text-indent:-9999em} #header-m #gnb .gnb-footer .sns a:after {content:""; position:absolute; left:50%; top:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:100%} #header-m #gnb .gnb-footer .sns a.fb:after {background:#767676 url(/images/common/ico-fb-m.png) 50% 50% no-repeat; background-size:4.5px 9px} #header-m #gnb .gnb-footer .sns a.tw:after {background:#767676 url(/images/common/ico-tw-m.png) 50% 50% no-repeat; background-size:6.5px 9px} #header-m #gnb .gnb-footer .sns a.ins:after {background:#767676 url(/images/common/ico-ins-m.png) 50% 50% no-repeat; background-size:10px 10px} #header-m #gnb .gnb-footer .sns a.yb:after {background:#767676 url(/images/common/ico-yb-m.png) 50% 50% no-repeat; background-size:10px 7px} #header-m #gnb .gnb-footer .sns a.pb:after {background:#767676 url(/images/common/ico-pb-m.png) 50% 50% no-repeat; background-size:10px 10px} #header-m #gnb .gnb-footer .sns a ~ a {margin-left:14px} #header-m #gnb .gnb-footer .copy {display:block; margin-top:20px; line-height:1.9; font-family:'Montserrat'; font-size:10px; color:#666666} #header-m #gnb .gnb-footer .copy span {display:block; font-size:10px} #header-m #gnb .gnb-footer p {position:relative; line-height:1.7; margin-top:30px; text-align:center; font-family:'Montserrat'; font-size:10px; color:#666666; } /* Dlive */ #dlive-m {position:fixed; top:-3000px; right:0; /*bottom:0;*/ left:0; overflow:hidden; z-index:1000} #dlive-m .d-live {/*display:none;*/ position:relative; top:-1200px; z-index:1; width:100%; height:100%; border-top:1px solid #000; background:#fff} #dlive-m .d-live .d-close {position:absolute; left:50%; top:15px; margin-left:-20px; padding:10px 0 10px 18px; font-size:12px; background:url(/images/common/btn-close-s-m.png) 0 50% no-repeat; background-size:10px 10px} html.eng #dlive-m .d-live .d-close {font-family:"Montserrat"; font-size:11px} #dlive-m .d-live .d-calendar {padding-top:65px; text-align:center} #dlive-m .d-live .d-calendar .month {display:inline-block; position:relative} #dlive-m .d-live .d-calendar .month strong {line-height:24px; font-family:"Montserrat"; font-size:20px} #dlive-m .d-live .d-calendar .month a {position:absolute; top:50%; width:24px; height:24px; margin-top:-13px; font-size:0; text-indent:-9999em} #dlive-m .d-live .d-calendar .month a.prev {left:-35px; background:url(/images/common/bg-dlive-prev-black-m.png) 50% 50% no-repeat; background-size:4px 9px} #dlive-m .d-live .d-calendar .month a.next {right:-35px; background:url(/images/common/bg-dlive-next-black-m.png) 50% 50% no-repeat; background-size:4px 9px} #dlive-m .d-live .d-calendar .date {overflow:auto; -webkit-overflow-scrolling:touch; position:relative; height:41px; margin-top:27px} #dlive-m .d-live .d-calendar .date ul {position:absolute; top:0; width:711px; padding:10px 14px 0} #dlive-m .d-live .d-calendar .date ul:after {content:""; display:block; clear:both} #dlive-m .d-live .d-calendar .date ul li {float:left; height:31px; margin-left:1px} #dlive-m .d-live .d-calendar .date ul li a {display:block; position:relative; width:21px; height:31px; line-height:31px; font-family:"Montserrat"; font-size:10px; color:#767676; text-align:center; box-sizing:border-box} #dlive-m .d-live .d-calendar .date ul li a:hover, #dlive-m .d-live .d-calendar .date ul li a:active {position:relative; line-height:28px; color:#e1002a; border:2px solid #e1002a} #dlive-m .d-live .d-calendar .date ul li a:hover:after, #dlive-m .d-live .d-calendar .date ul li a:active:after {content:""; position:absolute; left:50%; top:-10px; width:8px; height:3.5px; margin-left:-4px; background:url(/images/common/bg-dlive-pointer-m.png) no-repeat; background-size:8px 3.5px} #dlive-m .d-live .d-calendar .date ul li.selected a:hover:after, #dlive-m .d-live .d-calendar .date ul li.selected a:active:after {display:none} #dlive-m .d-live .d-calendar .date ul li.selected a {color:#fff; background:#e1002a} #dlive-m .d-live .d-works {width:100%; padding-top:45px} #dlive-m .d-live .d-works .slick-list {padding-left:40px} #dlive-m .d-live .d-works .works {float:left; position:relative; height:227px; text-align:center} #dlive-m .d-live .d-works .works ~ .works {margin-left:65px} #dlive-m .d-live .d-works .works.added {opacity:0} #dlive-m .d-live .d-works .works .img {display:inline-block; overflow:hidden; height:136px} #dlive-m .d-live .d-works .works .img:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} #dlive-m .d-live .d-works .works .img a {display:inline-block} #dlive-m .d-live .d-works .works .img img {display:inline-block; width:100%; vertical-align:middle} #dlive-m .d-live .d-works .works .img.poster {width:100px} #dlive-m .d-live .d-works .works .img.work {width:150px} #dlive-m .d-live .d-works .works .info {position:absolute; left:0; bottom:3px; width:100%; height:70px} #dlive-m .d-live .d-works .works .info > em {display:none; margin-bottom:7px; font-style:normal; font-size:10px; color:#767676} #dlive-m .d-live .d-works .works .info > strong {display:block; overflow:hidden; height:31px} html.eng #dlive-m .d-live .d-works .works .info > strong {width:calc(100% + 40px); margin-left:-20px} #dlive-m .d-live .d-works .works .info > strong a {display:block; line-height:1.4; padding:0 15px; font-size:12px; letter-spacing:-0.04em} #dlive-m .d-live .d-works .works .info > strong a > span {display:block; line-height:1.4} #dlive-m .d-live .d-works .works .info > span {display:block; position:absolute; left:0; bottom:-2px; width:100%; font-family:'Montserrat'; font-size:10px; text-align:center; white-space:nowrap} #dlive-m .d-live .d-works .works .info > span > span.place {display:block; margin-top:9px; font-family:"RixSGo M"; font-size:10px; color:#767676} html.eng #dlive-m .d-live .d-works .works .info > span > span.place {font-family:'Montserrat'} #dlive-m .d-live .d-works .slick-arrow {bottom:0; width:30px; height:19px} #dlive-m .d-live .d-works .slick-prev {margin-left:-47px; background:url(/images/common/btn-slide-prev-w-m.png) 0 0 no-repeat; background-size:27px auto} #dlive-m .d-live .d-works .slick-next {margin-right:-47px; background:url(/images/common/btn-slide-next-w-m.png) 0 0 no-repeat; background-size:27px auto} #dlive-m .d-live .d-nodata {display:block; position:absolute; left:0; top:47%; width:100%; text-align:center} #dlive-m .d-live .d-nodata span img {width:89px} #dlive-m .d-live .d-nodata strong {display:block; margin-top:18px; font-family:"RixSGo M"; font-size:24px; color:#767676; letter-spacing:-0.04em} html.eng #dlive-m .d-live .d-nodata strong {font-family:'Montserrat'} /*top banner*/ .top-bann-m {position:fixed; left:0; right:0; top:0; bottom:0; z-index:2000; height:100%; text-align:center; background:rgba(0, 0, 0, 0.65)} .top-bann-m:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} .top-bann-m .inner {display:inline-block; position:relative; width:270px; height:220px; padding:40px 20px 57px; vertical-align:middle; border:1px solid #4e4147; background:#000} .top-bann-m .inner p {position:relative; text-align:center} .top-bann-m .inner p span {line-height:1.6; font-size:11px; color:#fff} .top-bann-m .inner p em {display:block; line-height:1.6; font-style:normal} .top-bann-m .inner p strong {display:block; margin-top:20px; font-size:17px; color:#ffd908} .top-bann-m .inner .btns {position:absolute; left:20px; bottom:0; right:0; height:57px; text-align:left} .top-bann-m .inner .btns:before {content:""; display:inline-block; width:0; height:100%; vertical-align:middle} .top-bann-m .inner .btns input[type="checkbox"] + label {height:16px; line-height:16px; padding-left:26px; font-size:11px; color:#fff; vertical-align:middle} .top-bann-m .inner .btns input[type="checkbox"] + label:after {width:14px; height:14px; border:1px solid #fff; border-radius:0; background:#000} .top-bann-m .inner .btns input[type="checkbox"]:checked + label:after {background:url(/images/common/ico-checkbox2.png) 50% 50% no-repeat} .top-bann-m .inner .btns .close {float:right; width:57px; height:57px; font-size:0; text-indent:-9999em; background:url(/images/common/btn-close-w-m.png) 50% 50% no-repeat; background-size:12px 12px} }