@charset "utf-8"; 
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/* reset */
html,body{height:100%;-webkit-text-size-adjust:none;font-size:16px;background:#fff}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,
table,th,td,form,
fieldset,legend,textarea,input,select,textarea,button,
figure,figcaption{margin:0;padding:0;font-family:"Noto Sans KR",sans-serif;color:#333;font-weight:400;letter-spacing:0;font-size:16px;line-height:1.25}


fieldset,li,img{border:0;vertical-align:baseline}
ul,ol{list-style:none}
button{overflow:visible;border:0;background-color:transparent;cursor:pointer}
button:active,button:focus{outline:none}
button::-moz-focus-inner{padding:0;}
input,button{-webkit-appearance:none;-moz-appearance:none;appearance:none}
address,caption,em{font-style:normal}
h1,h2,h3,h4,h5,h6,caption,strong{font-weight:normal}
a,a:focus,a:active,a:hover{color:#333;text-decoration:none;cursor:pointer}
hr{display:none}
legend{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;line-height:0;white-space:nowrap}

/* daft custom */
.outer-frame{position:fixed;background:#fff;transition:all .3s ease-in-out}
.outer-frame.top{left:20px;right:20px;top:0}
.outer-frame.bottom{left:20px;right:20px;bottom:0;height:20px}
.outer-frame.left{left:0;top:0;bottom:0;width:20px}
.outer-frame.right{right:0;top:0;bottom:0;width:20px}

.view3 .outer-frame.bottom,
.view4 .outer-frame.bottom{height:0}
.view3 .outer-frame.left,
.view4 .outer-frame.left,
.view3 .outer-frame.right,
.view4 .outer-frame.right{width:0}

.tb{display:table;width:100%;table-layout:fixed}
.tbc{display:table-cell;height:100%}
.tbc.variable{width:auto}
.tbc.vm{vertical-align:middle}
.tbc.hc{text-align:center}

#header{display:block;height:3.75rem}
#header .logo{position:absolute;left:0;width:7.5rem;top:1.375rem;transition:all .3s ease-in-out}
#header .logo img{display:block;width:100%;height:auto}
#gnb{position:absolute;left:7.5rem;right:1.25rem;top:0;height:100%;bottom:0}
#gnb .tb{height:100%}
#gnb .tbc{text-align:right}
#gnb a{font-size:12px;display:inline-block;position:relative;line-height:1.45;padding:0 1.25rem}
#gnb a:hover, #gnb a.selected{color:#000;text-decoration:underline}
.view3 #header{left:0;right:0}
.view3 #gnb{left:1rem;right:1rem}
.view3 #gnb a{font-size:12px;padding:0 .5rem}
.view3 #header .logo{left:1rem}

#footer{opacity:0;background:#333;padding:3.125rem 0 1.5625rem}
#footer img{width:100%;display:block;height:auto}
#footer .ci{margin:0 auto;display:block;width:2.25rem;padding:1rem 0}
#footer .logo{margin:0 auto;display:block;width:10.25rem;padding:1rem 0 2rem}
#footer .cp{font-weight:300;display:block;text-align:center;font-size:11px;line-height:16px;padding:0.5rem;color:rgba(255,255,255,.14)}

#wrapper{opacity:0;position:relative;padding:3.75rem 20px 20px}
.view3 #wrapper{padding:3.75rem 0 0}
.view4 #wrapper{padding:3.75rem 0 0}
.scene{position:relative}
.sect{position:relative}

#home{}
#bgCubes{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;background:#e8e7e4}
#bgCubes:after{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:#e8e7e4;mix-blend-mode:hard-light;}
#home .wrap{position:relative;width:55rem;height:100%;margin:0 auto;max-width:80%;transition:all .3s ease-in-out}
#home .wrap .tb{height:100%}
#home .tit{width:72.73%;transition:all .3s ease-in-out}
#home .tit h2{font-size:4rem;line-height:1.5625;text-transform:uppercase;font-weight:100;transition:all .3s ease-in-out}
#home .tit h2 span{display:block;text-align:left;font-style:italic;color:#37332e}
#home .ci{width:auto;transition:all .3s ease-in-out}
#home .ci span{display:block;margin:0 auto;width:80%}
.view1 #home .wrap,
.view3 #home .wrap{width:80%;height:auto;display:table;min-height:100%}
.view1 #home .wrap .tb,
.view3 #home .wrap .tb{display:table-cell;width:100%;height:100%;vertical-align:middle}
.view1 #home .tit,
.view3 #home .tit{display:block;width:100%;height:auto;padding:2rem 0}
.view3 #home .tit h2,
.view4 #home .tit h2{font-size:2.5rem}
.view1 #home .ci,
.view3 #home .ci{display:block;width:8rem;height:auto;padding:2rem 0 0}

#contact{background:#f8f8f8}
#contactDetails{padding:6rem 0 4.5rem}
#contactDetails .contact_info{width:60rem;margin:0 auto}
#contactDetails .contact_info:after{content:"";display:block;height:0;clear:both}
#contactDetails li{width:33.3%;float:left}
#contactDetails li img{display:block;margin:0 auto}
#contactDetails li span{font-weight:300;display:block;text-align:center;font-size:13px;line-height:1.5;padding-top:1em}
#map{}
#mapView{position:absolute;left:0;top:0;bottom:0;right:0;width:100%;height:100%;-webkit-filter:brightness(1.05) grayscale(0.93) hue-rotate(-45deg) invert(0.12) saturate(3);transition:0.15s all ease-in}
#mapView.night{-webkit-filter:brightness(0.65) grayscale(0.75) hue-rotate(-235deg) invert(1) saturate(1.3)}

.custom_zoomcontrol {position:absolute;bottom:15px;right:15px;width:38px;height:83px;overflow:hidden;background-color:#fff;} 
.custom_zoomcontrol span {display:block;width:36px;border:1px solid #000;height:40px;text-align:center;cursor:pointer;}     
.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}            
.custom_zoomcontrol span + span{margin-top:-1px}

.view1 #contactDetails .contact_info,
.view3 #contactDetails .contact_info,
.view4 #contactDetails .contact_info{width:80%}
.view3 #contactDetails{padding:2.5rem 0}
.view3 #contactDetails li{float:none;width:100%;padding:2rem 0}


.navigation_buttons{display:none;position:absolute;left:15px;top:15px;width:auto;height:auto;text-align:left;vertical-align:middle;font-size:0;line-height:0}
.navigation_buttons .btn_navi{display:inline-block;width:56px;margin-right:8px;border-radius:12px;overflow:hidden;border:1px solid #4d4d4d}
.navigation_buttons .btn_navi img{display:block;width:100%;height:auto}