@charset "utf-8";
/* 서브상단 */
#shSubBnr{position:relative; width:calc(100% - 60px); max-width: 1800px; border-radius: 30px; margin:0 auto;}
#shSubBnr p{overflow:hidden;position:absolute;z-index:1;max-width: 1800px;width:100%;margin:0 auto;font-size:46px;font-weight:600;color:#222;font-family:'Pretendard'; text-align: center; top:40%;}
#shSubBnr p span{opacity:0;position:relative; color:#fff;}
#shSubBnr p b {display: block; font-family: 'Play'; font-size:20px; font-weight: 400}
#shSubBnr .bg{height:350px;background:center no-repeat;background-size:cover; border-radius: 30px; margin:0 auto;}

@media(max-width:1180px){
#shSubBnr p{padding:0 20px}	
}
@media(max-width:1024px){
#shSubBnr{background:#111;  width:calc(100% - 30px); }
#shSubBnr p{position:absolute;left:50%;top:50%;z-index:10;transform:translate(-50%,-50%);width:max-content;margin:0;font-size:32px;color:#fff}	
#shSubBnr .bg{opacity:.65;height:200px;margin:0}
#shSubBnr p b {font-size: 16px;}
}
@media(max-width:480px){
#shSubBnr{background:#fff; margin:0 0 0 0; width:100%;}
#shSubBnr p{position:relative;left:auto;top:auto;transform:none;width:100%;padding:15px 0;border-top:1px solid #e5e5e5;border-bottom:1px solid #eee;font-size:16px;color:#222;text-align:center;font-family:'Pretendard';font-weight:500}
#shSubBnr p span{opacity:1;bottom:auto; color:#222;}
#shSubBnr .bg{display:none}	
#shSubBnr p b {font-size:12px;}
}

.pc_view {display: block;}
.m_view {display: none;}

@media (max-width:991px){
    .pc_view {display: none;}
    .m_view {display: block;}
}


/* 기업개요 */
.comapnyCon .sec1 {padding-bottom: 60px;}
.comapnyCon .sec1 dl {display: flex; align-items:flex-start; margin-bottom:40px;}
.comapnyCon .sec1 dl dt {font-family: 'Play'; color:var(--primary); font-size:20px; width:250px; font-weight: bold;}
.comapnyCon .sec1 dl dd {width: calc(100% - 250px)}

.comapnyCon .sec2 {padding:4.5em 0; background: url('../../img/company-bg1.jpg') center top no-repeat;}
.comapnyCon .sec2 ul {display: flex; flex-wrap:wrap;}
.comapnyCon .sec2 ul li {background: #fff; border-radius: 10px; width:calc(100% / 4 - 30px); margin:15px; padding:50px 40px}
.comapnyCon .sec2 ul li .img {margin-bottom:40px;}
.comapnyCon .sec2 ul li .txt {color:#444;}
.comapnyCon .sec2 ul li .txt span {font-size: 1.5em; color:#222; display: block; font-weight: bold; padding-bottom:10px;}

.comapnyCon .sec3 {padding:70px 0;}
.comapnyCon .sec3 h4 {font-size:34px; margin-bottom:40px;}
.comapnyCon .sec3 ul {display: flex; flex-wrap: wrap}
.comapnyCon .sec3 ul li {width: calc(100% / 3 - 65px); margin-right: 65px; margin-bottom: 30px;}
.comapnyCon .sec3 ul li h5 {font-size:20px; color:#999; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #ddd;}
.comapnyCon .sec3 ul li p {font-size:18px;}

.comapnyCon .sec4 {background: url('../../img/company-bg2.jpg') center top no-repeat; padding:190px 0; color:#fff; text-align: center;}
.comapnyCon .sec4 span {color:var(--primary); font-family: 'Play'; font-size: 20px; font-weight: bold;}
.comapnyCon .sec4 h4 { font-size:34px; font-weight: 300; padding:15px 0 40px 0;}
.comapnyCon .sec4 p {font-size:20px;}
.comapnyCon .sec4 p > span {background: #fff; color:#222; font-family: 'Pretendard'}


@media (max-width:991px){
    .comapnyCon .sec2 {background-size: cover}
    .comapnyCon .sec4 {padding:70px 0;}
}

@media (max-width:768px){
    .comapnyCon .sec1 dl {display: block;} 
    .comapnyCon .sec1 dl dt {margin-bottom:10px;}
    .comapnyCon .sec1 dl dd {width:100%;}

    .comapnyCon .sec2 ul li {padding:20px; width:calc(100% / 2 - 30px); margin:5xp;}
    .comapnyCon .sec2 ul li .img {margin-bottom:20px;}
    .comapnyCon .sec2 ul li .txt br {display: none;}
    
    .comapnyCon .sec3 {padding:30px 0;}
    
    .comapnyCon .sec3 ul li {width: calc(100% / 2 - 65px);}
    .comapnyCon .sec4 h4 {font-size:24px;}
}

/* 오시는 길 */
.locationCon .tit {text-align: center;}
.locationCon .tit > span {font-family: 'Play'; color:var(--primary); font-weight: bold}
.locationCon .tit h4 {font-size:34px; font-weight: 300; line-height: 1.2; margin:25px 0 60px 0;}
.locationCon .tit h4 span {font-weight: 600; display: block;}
.locationCon .map {border-radius: 30px;}
.locationCon .location {display: flex; margin-top:50px;}
.locationCon .location h5 {width:350px; font-size:34px; font-weight: 600}
.locationCon .location ul {width: calc(100% - 350px); border-top:2px solid #444;}
.locationCon .location ul li {border-bottom:1px solid #ddd; display: flex; padding:30px 0;}
.locationCon .location ul li label {font-weight: 600; font-size: 20px; width:170px}
.locationCon .location ul li p {width:calc(100% -170px;)}

.locationCon .banner {background: #F4F1E8; border-radius: 30px; padding:40px 60px; display: flex; align-items: center; margin:60px 0 130px 0; }
.locationCon .banner .img {padding-right: 40px;}
.locationCon .banner .txt h6 {font-size: 20px; font-weight: 600;}
.locationCon .banner .txt span {font-size: 18px;}
.locationCon .banner .btn {float:right; right:40px; position: absolute;}
.locationCon .banner .btn a {display: flex; align-items: center; justify-content: space-between; width:220px;  padding:10px 30px; border-radius: 40px; background: var(--primary); color:#fff; font-size:18px;}

@media (max-width:991px){
    .locationCon .banner {padding:30px; display: block; overflow: hidden}
    .locationCon .banner .txt {padding:20px 0;}
    .locationCon .banner .btn {position: relative; float: left; right: 0; left:0; padding:0; height: 60px;}
}

@media (max-width:768px){
    .locationCon .tit h4 {font-size:24px; margin:15px 0 30px 0;}
    .locationCon .location {display: block;}
    .locationCon .location h5 {padding-bottom: 20px; font-size:24px}
    .locationCon .location ul {width: 100%;}
    .locationCon .location ul li {padding:15px 0;}

}

/* 투자원칙 */
.tabs {display: flex; flex-wrap: wrap}  
.tabs li { width: calc(100% / 6);}
.tabs a { display: block; text-align: center; text-decoration: none; text-transform: uppercase; color: #E2DBCA; padding: 15px 0; border-bottom: 3px solid #E2DBCA; font-size:22px; line-height: 35px; transition: all .3s ease;}
.tabs a span {width:35px; height: 35px; background: #E2DBCA; color:#fff; border-radius: 50%; display: inline-block; font-size: 16px; line-height: 35px; margin-left:10px;}
.tabs a:hover, .tabs a.active { border-bottom:3px solid var(--main-navy); color:var(--main-navy); font-weight: bold}
.tabs a:hover span, .tabs a.active span {background: var(--main-navy)}
.tabgroup div {}
.tab-contents {padding:50px 0 0 0;}
.tab-contents h3 {color:var(--main-navy); font-size:40px; font-weight: bold; padding-top:30px; background: url('/theme/daubuem/img/icon-mark.svg') top center no-repeat; text-align: center; padding-bottom:60px;}
.tab-contents h3 p {font-size:20px; color:#666; font-weight: 300}
.clearfix:after { content: ""; display: table; clear: both; }

.invest01 .con {display: flex; justify-content: space-between; align-items: center; padding-bottom: 140px;}
.invest01 .con .left {margin-right:85px;}
.invest01 .con .left img {max-width:616px; width:100%;}
.invest01 .con .right {width:50%;}
.invest01 .con .right .list li {padding-bottom:45px;position: relative;}
.invest01 .con .right .list li span { display: block; background: #FAF7F0; color:var(--marin-dark); padding:15px 10px; width:100%; text-align: center; border-radius: 50px; font-size:1.18em; word-break: keep-all; }
.invest01 .con .right .list li::after {content: ''; width: 100%; height:40px; background: url('/theme/daubuem/img/icon-arrow-down.svg') center no-repeat; margin:0 auto; position: absolute;}
.invest01 .con .right .list li.first {border:10px solid #faf7f0; padding:0; margin-bottom: 45px; border-radius: 50px;}
.invest01 .con .right .list li.first span {border:1px solid #C3AB7C; background: #fff; display: block; padding:10px; border-radius: 50px; font-size:1.18em; font-weight: 500; word-break: keep-all}
.invest01 .con .right .list li:last-child::after {display: none;}

.invest02 .con {width:100%; max-width: 1036px; margin:0 auto; padding-bottom:140px;}
.invest02 .con .sec1 img {max-width:1036px; width:100%;}
.invest02 .con .sec2 h4 {padding:40px 0 20px; text-align: center; font-size: 1.63em;}
.invest02 .con .sec2 ul {padding:30px; background: #f9f9f9; display: flex; border-radius: 100px;}
.invest02 .con .sec2 ul li {border:5px solid #6F6558; border-radius: 50px; padding:20px 15px; width:calc(100% / 3 - 20px); margin:10px; background: #fff; text-align: center;}
.invest02 .con .sec2 ul li h5 {font-size:1.18em; word-break: keep-all;}
.invest02 .con .sec2 ul li p {color:#999; word-break: keep-all;}

.invest03 .con .sec1 {display: flex; align-items: center;}
.invest03 .con .sec1 .left {margin-right:80px;}
.invest03 .con .sec1 .left img {max-width: 650px; width:100%;}
.invest03 .con .sec1 .right li {font-size:1.18em; margin-bottom:20px; padding-left:20px; word-break: keep-all;}
.invest03 .con .sec1 .right li::before {content: ''; position: absolute; width:8px; height:8px; border-radius: 2px; background: var(--primary); transform: rotate(45deg); margin-left:-15px; margin-top:10px;}
.invest03 .con .sec2 {margin-top:100px; background: #F5F6F7; text-align: center;}
.invest03 .con .sec2 img {max-width: 1318px; width:100%; margin:0 auto;}

.invest04 .con {padding-bottom:140px;}
.invest04 .img {text-align: center; position: relative}
.invest04 .img img {width:100%; max-width: 864px; margin:0 auto;}
.invest04 .list ul {display: flex; }
.invest04 .list ul li {width: calc(100% / 3 - 10px); margin:0 5px;  padding:20px; border-radius: 50px; background: #fff; font-size:1.18em; text-align: center;}
.invest04 .list ul li:first-child {border:5px solid #E2DBCA;}
.invest04 .list ul li:nth-child(2) {border:5px solid var(--primary);}
.invest04 .list ul li:last-child {border:5px solid var(--main-navy);}

.invest05 .con {padding-bottom:140px;}
.invest05 .sec1 {display: flex; }
.invest05 .sec1 li {width: calc(100% / 2 - 40px); margin: 0 20px; }
.invest05 .sec1 li:first-child .box {border:3px solid var(--primary); border-radius: 30px;}
.invest05 .sec1 li:nth-child(2) .box {border:3px solid var(--main-navy); border-radius: 30px;}
.invest05 .sec1 li .box {display: flex; align-items: center; width: 100%; padding:40px 60px; height: 175px;}
.invest05 .sec1 li .box .icon {margin-right:50px;}
.invest05 .sec1 li .box .txt h5 {font-size:1.5em;}
.invest05 .sec1 li .box .txt p {color:#444;}
.invest05 .sec1 li .arrow {text-align: center;}
.invest05 .bg {margin:10px 0 50px 0; background: url('/theme/daubuem/img/invest_img05_bg.png') center no-repeat; background-size: cover; padding:60px 20px; color:#fff; font-size:1.5em; text-align: center; border-radius: 20px; font-weight: 500; word-break: keep-all}
.invest05 .sec2 {display: flex; justify-content: center;}
.invest05 .sec2 li {display: flex; align-items: center; font-size:1.18em; margin:5px 40px;}
.invest05 .sec2 li span {padding-left:30px;}

.invest06 .con {display: flex; align-items: center; padding-bottom: 140px;}
.invest06 .con .left, .invest06 .con .right {max-width:400px; width:100%;}
.invest06 .con .box {--border-width: 4px; padding: var(--border-width); background: linear-gradient(45deg, #A48550, #C3AB7C);
  border-radius: 20px; margin-bottom:10px;}
.invest06 .con .box .content { background: white; border-radius: 18px; height:165px; padding: 20px; display: flex; align-items: center; font-size:1.18em; text-align: center; justify-content: center}
.invest06 .con .box .content p span {color:#888; font-size:16px; display: block;}
.invest06 .con .center img {width:100%; max-width: 360px;}
.invest06 .con .line_right img {transform: scaleX(-1);}

.riskCon h3 {color:var(--main-navy); font-size:40px; font-weight: bold;  text-align: center; padding-bottom:60px;}
.responsive-container { margin-bottom:80px;}
.responsive-container img {max-width: 1250px; width: 100%; margin:0 auto;}
.width-scrollBar::-webkit-scrollbar {height: 6px;}
.width-scrollBar::-webkit-scrollbar-thumb {background: var(--primary); border-radius: 10px;}
.width-scrollBar::-webkit-scrollbar-track {background:none;}

.riskCon .sec2 {background: url('/theme/daubuem/img/risk_bg.jpg') center no-repeat; background-size: cover; padding:100px 0;}
.riskCon .sec2 h3 {color:#fff;}

/* 말풍선 스타일 */
.speech-bubble { position: relative;  background: rgba(245,229,212,.8); border-radius: 10px; padding: 15px; max-width: 100%;
display: flex; padding:45px 90px; margin-bottom: 60px;}
.speech-bubble:after { content: ''; position: absolute; bottom: -30px; left: 50%; width: 0; height: 0; border: 15px solid transparent; border-top-color:rgba(245,229,212,.8);}
.speech-bubble ul { width:50%; }
.speech-bubble li { margin-bottom: 5px; word-break: keep-all;}

.riskCon .sec2 .box {background: #fff; margin-bottom:20px; border-radius: 20px; display: flex; align-items: center; padding:35px 20px;}
.riskCon .sec2 .box .step {width:230px; font-size:1.18em; font-weight: bold; display: flex; align-items: center}
.riskCon .sec2 .box .step span {width:35px; height:35px; background: var(--primary); border-radius: 30px; color:#fff; font-size: 'Play'; font-weight: bold; margin-right:10px; font-size:16px; display: block; text-align: center; line-height: 35px;}
.riskCon .sec2 .box .list {width: calc(100% - 300px)}
.riskCon .sec2 .box ul {display: flex; flex-wrap: wrap;}
.riskCon .sec2 .box ul li {width:calc(100% / 3 );}

@media (max-width:1250px){
    .responsive-container {overflow-x: scroll; padding-bottom:30px;}
}

@media (max-width:991px){
        
    .tab-contents {padding:30px 0 0 0;}
    
    .tabs li { width: calc(100% / 3);}
    .tabs a {font-size:18px; line-height: 25px;}
    .tabs a span {width:25px; height: 25px; line-height: 25px;}
    
    .tab-contents h3,.riskCon h3 {font-size:30px; padding-bottom:30px;}
    .tab-contents h3 p {font-size:16px; color:#666}
    
    .invest01 .con, .invest02 .con, .invest03 .con, .invest04 .con, .invest05 .con, .invest06 .con {padding-bottom:50px;}
    
    .invest01 .con {display: block;}
    .invest01 .con .left {margin-right: 0; text-align: center;}
    .invest01 .con .right {width:100%; margin-top:30px;}
    .invest02 .con .sec2 ul {display: block; padding:10px; border-radius: 20px;}
    .invest02 .con .sec2 ul li {display:block; width:100%; padding:5px 10px;}
    
    .invest03 .con .sec1 {display: block;}
    .invest03 .con .sec1 .left {margin-right: 0;}
    .invest03 .con .sec1 .right {padding:40px 0;}    
    .invest03 .con .sec2 {margin-top:50px;}
    
    .invest04 .list ul {display: block;}
    .invest04 .list ul li {width:100%; margin-bottom:10px;}
    
    .invest05 .sec1 li {width: calc(100% / 2 - 10px); margin: 0 5px; }
    .invest05 .sec1 li .box {padding:20px; display: block; height: 200px;}
    .invest05 .sec1 li .box .icon {width:40px; margin-bottom:20px;}
    .invest05 .sec1 li .box .icon img , .invest05 .sec1 li .arrow img {width:100%;}
    .invest05 .sec1 li .box .txt h5 {font-size:1.2em;}
    
    .invest06 .con {display: block;}
    .invest06 .con .left, .invest06 .con .right {max-width:100%; width:100%; display: flex;}
    .invest06 .con .box {width:calc(100% / 2 - 10px); margin:5px;}
    .invest06 .con .line_left {text-align: center; height:76px;}
    .invest06 .con .line_left img { transform: rotate(90deg); margin-top:-60px;}
    .invest06 .con .center {text-align: center;}
    .invest06 .con .line_right {text-align: center; height:76px;}
    .invest06 .con .line_right img { transform: rotate(-90deg); margin-top:-60px;}
    .invest06 .con .right {margin-top:-15px;}
    
    .responsive-container img {width: 900px;}
    
    .speech-bubble {display: block; padding:20px; }
    .speech-bubble ul {padding:0 20px; width:100%;}

    .riskCon .sec2 .box {display: block;}
    .riskCon .sec2 .box ul li {width:calc(100% / 2 )}
    .riskCon .sec2 .box .step {margin-bottom:10px;}
    .riskCon .sec2 .box .list {width: calc(100%)}

}
@media (max-width:768px){
        
    .invest05 .sec2 {display: block;}
    .invest05 .sec2 li {margin:5px 10px;}
    .invest05 .sec2 li img {width:150px}
    
    .invest06 .con .left, .invest06 .con .right {display: block}
    .invest06 .con .box {width:calc(100%); margin:5px;}
    .invest06 .con .box .content {height: auto;}
}


/* 상품안내 */
.prdCon {padding:0 0 140px;}
.prdCon .prd-top.pistis {background: #F5F1D9;}
.prdCon .prd-top.athena {background: #E7EFCF;}
.prdCon .prd-top.plutus {background: #E4E9F5;}
.prdCon .prd-top.tyche {background: #F6E2E2;}
.prdCon .prd-top .container {display: flex; align-items: center; justify-content: space-between; padding:30px 20px;}
.prdCon .prd-top span {font-size: 1.18em; font-family: 'Play'; font-weight: bold; color: var(--primary);}
.prdCon .prd-top.athena span {color:#819644;}
.prdCon .prd-top.plutus span {color:#546692;}
.prdCon .prd-top.tyche span {color:#9F5E5E;}

.prdCon .prd-top h4 {font-size: 2.5em; color:var(--main-black); letter-spacing: -1pt; padding:10px 0;}
.prdCon .prd-top p {font-weight: 300; font-size:1.18em;}

.prdCon .prd-list {padding:60px 0;}
.prdCon .prd-list ul {display: flex; flex-wrap: wrap;}
.prdCon .prd-list ul li {width:calc(100% / 3 - 20px); margin:10px; border:1px solid #ddd; border-radius: 20px; padding:35px}
.prdCon .prd-list ul li h5 {font-size:1.2em; padding:15px 0 10px 0;}
.prdCon .button {width:300px; margin:0 auto; }
.prdCon .button a {display: flex; background: var(--primary); color:#fff; justify-content: space-between; padding:20px; border-radius: 30px; transition:all .3s ease;}
.prdCon .button a:hover {box-shadow: 0 10px 15px rgba(164, 133, 80, 0.3)}

@media (max-width:991px){
    .prdCon {padding:0 0 70px;}
    .prdCon .prd-top .container {display: block}
    .prdCon .prd-top {text-align: center;}
    .prdCon .prd-top img {width: 100%; max-width: 320px;}
    .prdCon .prd-top h4 {font-size: 2em; padding:0;}
    .prdCon .prd-list ul li  {width:calc(100% / 2 - 10px); margin:5px; padding:15px;}
}

@media (max-width:768px){
    .prdCon .prd-list ul li {width:calc(100%); margin:5px 15px;  padding:20px;}
}

/* 고객색터 */
.csCon h3 {color:var(--main-navy); font-size:40px; font-weight: bold; text-align: center; padding-bottom:30px;}
.csCon .con ul {display: flex; justify-content: space-between}
.csCon .con ul li {width:calc(100% / 3 - 20px); margin:10px; background: #F4F1E8; border-radius: 20px; display: flex; align-items: center; padding:50px; font-size:1.18em;}
.csCon .con ul li h6 {color:#6F6558; padding-bottom:0;}
.csCon .con ul li .icon {width:65px; text-align: center; margin-right:30px;}
.csCon .con ul li a:hover {text-decoration: underline}
.csCon .con > p {text-align: center; padding-top:30px; padding-bottom:140px;}

@media (max-width:991px){
    .csCon h3 {font-size:30px; padding-bottom:30px;}
    .csCon .con ul {display: block}
    .csCon .con ul li {width: calc(100%); font-size:1em; justify-content: center; padding:20px;}
    .csCon .con ul li .icon  {width:40px; height:40px;}
    .csCon .con ul li .icon img {width:100%;}
    .csCon .con ul li .txt {width:120px;}
    .csCon .con > p {padding-bottom:70px;}
}