@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"이모셔널씨어터"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}

.bg-gray {background:#fafafa;}

.subsec-pd {padding:  clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}
.maintit.quotxt {position: relative;display: inline-block; padding: 0  clamp(22px, calc( 50 / var(--inner) * 100vw ), 50px);}
.maintit.quotxt .quo { position: absolute; top: 0; width:  clamp(13px, calc( 29 / var(--inner) * 100vw ), 29px); height:  clamp(10px, calc( 26 / var(--inner) * 100vw ), 26px); background-size: contain !important; text-indent: -999em;}
.maintit.quotxt .quo.before {left: 0; background: url(../images/sub/quo1.png) no-repeat;}
.maintit.quotxt .quo.after {right: 0; background: url(../images/sub/quo2.png) no-repeat;}

.linkwrap {display: flex; }
.linkwrap .btn-link {display: inline-flex; align-items: center; justify-content: center; margin-right: clamp(5px, calc( 20 / var(--inner) * 100vw ), 20px); padding: 0 15px; min-width:clamp(130px, calc( 200 / var(--inner) * 100vw ), 200px); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius: 24px; border: 2px solid #000; color: #000; font-weight: 600; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.linkwrap .btn-link:last-child {margin-right: 0;}
.linkwrap .btn-link:hover {background-color: #000; border-color: #000; color: #fff;}
.linkwrap .btn-link.large {min-width:clamp(150px, calc( 250 / var(--inner) * 100vw ), 250px); height: clamp(44px, calc( 60 / var(--inner) * 100vw ), 60px);border-radius: 30px;}

/* sub */
.sub01_01sec1 {border-top: 1px solid #242424;}
.sub01_01-list {padding: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) 0; border-bottom: 1px dashed #ddd;}
.sub01_01-list .inner {display: flex; align-items: center; flex-wrap: wrap;}
.sub01_01-list .rodibx {flex: 1 0 clamp(140px, calc( 220 / var(--inner) * 100vw ), 220px); max-width: clamp(140px, calc( 220 / var(--inner) * 100vw ), 220px); margin-right: clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px); border-right: 1px solid #ddd; text-align: center;}
.sub01_01-list .rodi lord-icon {width: clamp(60px, calc( 104 / var(--inner) * 100vw ), 104px); height: clamp(60px, calc( 104 / var(--inner) * 100vw ), 104px);}
.sub01_01-list .textbx {flex: 1 0 auto; width: 1%; text-shadow: -0.5px;}
.sub01_01-list .textbx .title {font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.sub01_01-list .textbx .desc {padding-top: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545; line-height: 1.6;}

.sub01_01sec2 {background: url(../images/sub/hisbg.jpg) no-repeat 50% 50% /cover;}
.history-wrap {padding-top:100px; position:relative; color: #454545; max-width: 850px; width: 100%; margin: 0 auto;}
.history-wrap:before {top:120px; bottom:0; position:absolute; left:300px; width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:70px; display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-item .history-year {position:relative; top:0; left:0; width:300px; color:#fff; font-size:clamp(19px, calc( 28 / var(--inner) * 100vw ), 28px); line-height:1.4em; letter-spacing:-.03em; text-align:right; padding-right:0; display:flex; justify-content:space-between;}
.history-item .history-year strong {line-height:1em; display:inline-block; text-align:center; transition:all 0.5s ease; font-weight:500; flex:1;}
.history-month-box {padding-left:105px; flex:1;}
.history-detail {margin-bottom:15px; display:flex; font-size:18px; letter-spacing:-.03em; font-weight:500; transition:all 0.5s ease; font-weight: 400;}
.history-detail:last-child {margin-bottom:0;}
.history-detail .month {width:55px; color:#fff; display:block; }
.history-detail p {flex:1; color: #fff;}

.history-item .dots {width:10px; height:10px; top:9px; right:-5px; margin:0; position:relative; border:2px solid #fff; background:#fff; border-radius:50%; transition:all 0.3s; z-index:0;}
.history-item .dots .inner-dots {width:100px; height:100px; position:absolute; background:rgba(255,255, 255, 0.1); border-radius:100%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; transition:all 0.3s;}
.history-item .dots .inner-dots:after {width:60px; height:60px; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; background:rgba(255,255, 255, 0.3); border-radius:100%; transition:all 0.5s;}

.history-item:hover .history-year {font-size:60px;}
.history-item:hover .history-year strong {font-weight:700;}
.history-item:hover .month {color:#fff; font-weight: 700;}
.history-item:hover .history-detail {font-weight:700;}
.history-item:hover .history-month-item {color:#fff;}
.history-item:hover .dots .inner-dots {transform:translate(-50%,-50%) scale(1); animation:ani .5s forwards ease; animation-delay:.05s;}
.history-item:hover .dots .inner-dots:before {width:40px; height:40px; display:block; content:""; background:#ddd; position:absolute; left:50%; top:50%; border-radius:100%; border:10px solid rgba(255,255, 255, 0.6); animation:ani .5s forwards ease; animation-delay:.02s;}
.history-item:hover .dots .inner-dots:after {animation:ani .5s forwards ease; animation-delay:.08s;}
.history-item:hover .history-year strong {line-height:.6em;}

@keyframes ani {
	0% {transform:translate(-50%,-50%) scale(0);}
	100% {transform:translate(-50%,-50%) scale(1);}
}

@media (max-width: 1024px) {
	.history-item {padding-bottom: 50px;}
	.history-item .history-year {width: 250px;}
	.history-month-box {padding-left:100px;}
	.history-detail {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
	.history-wrap:before {top:80px; left: 250px;}
	.history-item .dots .inner-dots {width:80px; height:80px;}
	.history-item .dots .inner-dots:after {width:50px; height:50px;}
	.history-item:hover .dots .inner-dots:before {width:30px; height:30px;}
	.history-item:hover .history-year {font-size: clamp(25px, calc( 36 / var(--inner) * 100vw ), 36px);}
}

@media (max-width: 640px) {
	.history-wrap {padding-top:50px;}
	.history-month-box {padding-left:0;}
	.history-item {padding-bottom: 30px; display:block;}
	.history-item .history-year {width:100%; text-align:left;}
	.history-item .history-year strong {text-align:left; line-height:1.5em; margin-bottom:15px; display:block;}
	.history-item .dots {display:none;}
	.history-wrap:before {display:none;}
	.history-detail {margin-bottom:7px;}
	.history-detail .month {width:42px;}
	.history-item:hover .history-year strong {line-height:1em;}
}

.location-area .flxWrap {flex-direction: row-reverse; align-items: center;}
.location-area .mapwrap {flex: 1 0 clamp(600px, calc( 700 / var(--inner) * 100vw ), 700px) ; max-width: clamp(600px, calc( 700 / var(--inner) * 100vw ), 700px); margin-left: 20px;}
.location-area .map {border-radius: 24px; overflow: hidden;}
.location-area .mapinfobx {flex: 1 0 auto; width: 1%; padding-left: clamp(50px, calc( 140 / var(--inner) * 100vw ), 140px); position: relative;}
.location-area .mapinfobx:after {position: absolute; content: ''; left: 0; top:  clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px); width: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); height: 1px; background: #242424;}
.mapinfobx .maptt {font-size:  clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.mapinfobx .mapicnitem {margin-top:  clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px);}
.mapinfobx .mapicnlist {display: flex; font-size:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.mapinfobx .mapicnlist + .mapicnlist {margin-top:  clamp(12px, calc( 27 / var(--inner) * 100vw ), 27px);}
.mapinfobx .namebx {flex:1 0  clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px); max-width:  clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px); display: flex; align-items: center;  font-weight: 500;}
.mapinfobx .namebx img { margin-right:8px; width:  clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px);}
.mapinfobx .descbx {flex: 1 0 auto; width: 1%; color: #454545;}
.mapinfobx .maplinkitem {display: flex;}
.mapinfobx .maplinklist {margin-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.mapinfobx .maplinklist:last-child {margin-right: 0;}
.mapinfobx .maplinklist img {width:  clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.mapinfobx .linkwrap {margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}

.prditem {display: flex; flex-wrap: wrap; margin: -30px;}
.prdlist {flex: 1 0 25%; max-width: 25%; padding: 30px;}
.prdlist .inner {display: block; position: relative;}
.prdlist .images {position:relative; padding-bottom:140.98%; overflow:hidden;}
.prdlist .images img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.prdlist .hoverbx {display: flex; align-items: center;justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0, 0, 0.6); transition: all 0.4s; opacity: 0;}
.prdlist .hoverbx img {width: clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px);}
.prdlist .inner:hover .hoverbx {opacity: 1;}

.viewtop {max-width: 1200px; width: 100%; margin: 0 auto;}
.viewtop .flxWrap {justify-content: flex-end;}
.viewtop .imgbx {flex:1 0 490px; max-width: 490px; margin-right:clamp(20px, calc( 78 / var(--inner) * 100vw ), 78px);}
.viewtop .images {position:relative; padding-bottom:140.40%; overflow:hidden;}
.viewtop .images img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.viewtop .textbx {flex: 1 0 auto; width: 1%; display: flex; flex-direction: column; justify-content: space-between; padding:clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px) 0;}
.viewtop .viewtt {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: bold;}
.viewtop .viewitem {margin-top: clamp(15px, calc( 23 / var(--inner) * 100vw ), 23px);}
.viewtop .viewlist {display: flex; line-height: 1.8;}
.viewtop .viewlist + .viewlist {margin-top:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px);}
.viewtop .viewlist .name {flex: 1 0 clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); max-width: clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; }
.viewtop .viewlist .desc {flex: 1 0 auto; width: 1%; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; }
.viewtop .linkwrap {margin-top: 20px;}
.viewadit {margin-top: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px);}

.labpertory {overflow: hidden;}
.labpertory .flxWrap {align-items: flex-end;}
.labpertory .logobx {flex: 1 0 clamp(280px, calc( 380 / var(--inner) * 100vw ), 380px); max-width: clamp(280px, calc( 380 / var(--inner) * 100vw ), 380px); margin-left: 20px;}
.labpertory .logobx img {width:clamp(160px, calc( 355 / var(--inner) * 100vw ), 355px);}
.labpertory .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px;}
.labpertory .titbx span {display: block;}
.labpertory .titbx .tit1 {font-size:clamp(22px, calc( 56 / var(--inner) * 100vw ), 56px); font-weight: 500;}
.labpertory .titbx .tit2 {font-size:clamp(24px, calc( 64 / var(--inner) * 100vw ), 64px); font-weight: bold;}
.labpertory .decbx {margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.labpertory .dec + .dec{padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); }
.labpertory .dec {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545;line-height: 1.7;}
.labpertory .linkwrap {margin-top: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px); justify-content: center;}

.creative .flxWrap {align-items: center;}
.creative .logobx {flex: 1 0 670px; max-width: 670px; margin-right: clamp(20px, calc( 160 / var(--inner) * 100vw ), 160px); text-align: right;}
.creative .textbx {flex: 1 0 auto; width: 1%;}
.creative .titbx {font-size:clamp(22px, calc( 48 / var(--inner) * 100vw ), 48px); font-weight: 500; line-height: 1.45;}
.creative .mmsitem {margin-top: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px);}
.creative .mmslist {display: flex; align-items: center;}
.creative .mmslist img {width:clamp(28px, calc( 40 / var(--inner) * 100vw ), 40px);}
.creative .mmslist .desc {margin-left:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: #454545;}
.creative .linkwrap {margin-top:clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px);}

.mapimg {margin-bottom:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.mapinfoitem {padding-left:clamp(10px, calc( 100 / var(--inner) * 100vw ), 100px);}
.mapinfoitem + .mapinfoitem {margin-top:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.mapinfoitem .title {margin-bottom:clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); font-size:clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px);font-weight:500;}
.mapinfolist + .mapinfolist {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.mapinfolist .infoflx {display:flex; flex-wrap: wrap;}
.mapinfolist .icn {flex:1 0 clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px); max-width:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}
.mapinfolist .icn img {width:clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px);}
.mapinfolist .textbx {flex:1 0 auto; width:1%;padding-top:clamp(2px, calc( 5 / var(--inner) * 100vw ), 5px);}
.mapinfolist .textbx .tit {margin-bottom:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight:500;}
.mapinfolist .textbx .desc {font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height:1.6;}

.mapinfotxt .linkwrap {padding-top:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);justify-content: center;}
.gallerywrap {padding-top:clamp(35px, calc( 90 / var(--inner) * 100vw ), 90px); margin-top:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); border-top:1px dashed #ddd;}

.galleryitem {position:relative;}
.galleryitem .images {position:relative; padding-bottom:53.57%; overflow:hidden; border-radius:40px;}
.galleryitem .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}

.btncontrol {display:inline-flex; align-items:center; justify-content:center; padding:clamp(6px, calc( 11 / var(--inner) * 100vw ), 11px) 18px; position:absolute; bottom:clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px); left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.6); min-width:clamp(230px, calc( 260 / var(--inner) * 100vw ), 260px); border-radius:25px; z-index: 5;}
.btncontrol .btn-arrow {margin-top:0; position:initial;width:18px; height:18px;}
.btncontrol .btn-arrow:after {display:none;}
.btncontrol .btn-arrow svg {color:#fff;width:18px; height:18px;}
.btncontrol .name {padding:0 10px; font-size:clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; color:#fff;}

#contArea.type2 {max-width:1780px;}
.design-list {display:flex;flex-wrap:wrap;margin:-20px;}
.design-item {flex:1 0 33.33%;max-width:33.33%;padding:20px;}
.design-item .inner {display:block;position:relative;}
.design-item .images {position:relative; padding-bottom:65.93%; overflow:hidden;}
.design-item .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.design-item .textbx {position:absolute;bottom: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);left:0;padding:0  clamp(12px, calc( 38 / var(--inner) * 100vw ), 38px); color:#fff;}
.design-item .title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);font-weight:bold;display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.design-item .subtit {padding-top:clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px);line-height:1.5;}
.design-item .kor {display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.design-item .eng {display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}

.topinfo-wrap .flxWrap + .flxWrap {padding-top:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.topinfo-wrap .titbx {flex:1 0 clamp(95px, calc( 580 / var(--inner) * 100vw ), 580px); max-width:clamp(95px, calc( 580 / var(--inner) * 100vw ), 580px);margin-right:clamp(30px, calc( 180 / var(--inner) * 100vw ), 180px); text-align:right;font-size:clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px);font-weight:bold;text-transform: uppercase;}
.topinfo-wrap .textbx {flex:1 0 auto;width:1%;padding-top:5px;}
.topinfo-wrap .textbx .item + .item {margin-top:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.topinfo-wrap .textbx .bold {font-size:clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);font-weight:600;}
.topinfo-wrap .textbx .normal {padding-top:12px;font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);color:#454545;}
.detailbox {margin-top:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);}


.fr-video {display:block !important;}