@charset "utf-8";


/* body{background: #0E305D;} */
#dBody {padding: 0;}



.sec1 {width: 100%; height: 100vh; display: flex; align-items: center; padding-top: 30px; position: relative;}

.sec1 .con-area {padding: 80px;}
.sec1 .con-area .info-area {color: #fff; background: #E37500; width: 692px !important;	height: 700px; box-shadow: 0px 40px 90px rgba(0, 0, 0, 0.1); border-radius: 20px; padding: 94px 60px 60px 60px; box-sizing: border-box; position: relative;}

.sec1 .con-area .info-area .srch-tit {font-size: 40px; line-height: 50px; font-weight: 700; }

.sec1 .con-area .info-area .input-area .form-input-item {width: 400px; background: #fff; border-radius: 50px; border-bottom: 0; margin-top: 24px;}
.sec1 .con-area .info-area .input-area .form-input-item input {width: 330px; height: 60px; background: #fff; border-radius: 50px; padding: 0 0 0 24px; font-size: 15px;}
.sec1 .con-area .info-area .input-area .form-input-item.valid:after {display: none;}
.sec1 .con-area .info-area .input-area .form-input-item input::placeholder {font-size: 15px; color: #757575;}
.sec1 .con-area .info-area .input-area .form-input-item .icon-search-orange-36 {background-image: url("../images/main/srch-ico.svg"); width: 32px; height: 32px;}
/* .sec1 .con-area .input-area .form-input-item.on {background: #E37500;}
.sec1 .con-area .input-area .form-input-item.on input {background: #E37500; color: #fff;}
.sec1 .con-area .input-area .form-input-item.on input::placeholder {color: #fff !important;}
.sec1 .con-area .input-area .form-input-item.on .icon-search-orange-36 {background-image: url("../images/main/srch-ico-on.png"); width: 32px; height: 32px;} */
.sec1 .con-area .swiper-container {overflow: unset; padding-right: 20px;}
.sec1 .con-area .swiper-slide {transform: translateY(100px); opacity: 0;}

/* 테마별etf */
.sec1 .con-area .info-area .keywords-area {position: absolute; bottom: 60px;}
.sec1 .con-area .info-area .keywords-area > p {font-size: 16px; line-height: 24px; margin-bottom: 10px;}
.sec1 .con-area .info-area .keywords-area div {display: flex; }
.sec1 .con-area .info-area .keywords-area div a {display: inline-flex; align-items: center; background: #fff; color: #000; padding: 6px 18px; border-radius: 50px; font-weight: 500;font-size: 15px; line-height: 24px; margin-right: 6px; margin-bottom: 10px; transition: all 0.4s ease;}
.sec1 .con-area .info-area .keywords-area div a:hover {background: #ebebeb;}
/* 주목해야할etf */
.sec1 .con-area .info-area .keywords-area.etf{position:initial;margin-top:170px;}
.sec1 .con-area .info-area .keywords-area.etf > p {font-size:24px;font-weight:500;margin-bottom:20px;}
.sec1 .con-area .info-area .keywords-area.etf div{gap:10px;}
.sec1 .con-area .info-area .keywords-area.etf div a{padding:23px 0 15px;font-size:14px;border-radius:20px;margin:0;width:90px;height:144px;box-sizing: border-box;display:flex;flex-direction:column;justify-content:space-between;}
.sec1 .con-area .info-area .keywords-area.etf div a:nth-of-type(3), .sec1 .con-area .info-area .keywords-area.etf div a:nth-of-type(4), .sec1 .con-area .info-area .keywords-area.etf div a:nth-of-type(5){padding-top:15px;}
.sec1 .con-area .info-area .keywords-area.etf div a span{text-align:center;line-height:18px;}
.sec1 .con-area .info-area .keywords-area.etf div a .ico{width:52px;height:52px;}
.sec1 .con-area .info-area .keywords-area.etf div a .ico img{width:100%;}

.sec1 .con-area .card-area {display: block; position: relative; width: 464px !important; min-height: 700px; box-sizing: border-box; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid #E37500; animation: ShadowReverse .4s forwards;}
.sec1 .con-area .card-area:hover {animation: Shadow .4s forwards;}

@keyframes Shadow {	
	0% {filter: drop-shadow(0px 20px 50px rgba(227, 117, 0, 0)); margin-top: 0;}
	100% {filter: drop-shadow(0px 20px 50px rgba(227, 117, 0, 0.16)); margin-top: -30px;}
}
@keyframes ShadowReverse {	
	0% {filter: drop-shadow(0px 20px 50px rgba(227, 117, 0, 0.16)); margin-top: -30px;}
	100% {filter: drop-shadow(0px 20px 50px rgba(227, 117, 0, 0)); margin-top: 0;}
}

.sec1 .con-area .card-area a {display: block; width: 100%; height: 100%; padding: 60px 40px 60px 60px; box-sizing: border-box;}
.sec1 .con-area .card-area a + a {margin-left: 40px;}
.sec1 .con-area .card-area a .bg {position: absolute; bottom: 60px; left: 60px; overflow: hidden;}
.sec1 .con-area .card-area a .bg img {width: 100%;}
.sec1 .con-area .card-area a .top p.tit {font-weight: 700; font-size: 40px; line-height: 52px; color: #E37500; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.sec1 .con-area .card-area a .top p.sub-tit {font-size: 18px; line-height: 29px; margin-top: 20px; color: #E0E0E0; color: #5E5E5E;}
.sec1 .con-area .card-area a .top span.label {color: #E37500; font-weight: 400; font-size: 12px; line-height: 24px; border: 1px solid #E37500; border-radius: 3px; padding: 0 5px; display: inline-block; margin-bottom: 10px;}
.sec1 .con-area .card-area a .go-link {color: #fff; font-weight: 400; font-size: 13px; line-height: 20px; background: #E37500; padding: 5px 15px; border-radius: 50px; display: inline-block; margin-top: 20px; transition: all 0.4s ease; position: absolute; top: 360px;}
.sec1 .con-area .card-area a .percent + .go-link {top: 333px;}
.sec1 .con-area .card-area a .go-link:hover {background: #d16c00;}
.sec1 .con-area .card-area a .percent {position: absolute; width: 344px; margin-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 12px; top: 240px;}
.sec1 .con-area .card-area a .percent div {display: flex;}
.sec1 .con-area .card-area a .percent div dl:first-of-type {border-right: 1px solid rgba(0, 0, 0, 0.12); padding-right: 27px;}
.sec1 .con-area .card-area a .percent div dt {font-size: 13px; line-height: 22px; color: #5E5E5E;}
.sec1 .con-area .card-area a .percent div dd {font-weight: 500; font-size: 28px; line-height: 30px; color: #2E2E2E; margin-top: 2px;}
.sec1 .con-area .card-area a .percent div dl + dl {margin-left: 16px;}
.sec1 .con-area .card-area a .percent div dd span {font-size: 18px;	line-height: 30px; vertical-align: bottom; display: inline-block; padding-left: 5px;}
.sec1 .con-area .card-area a .percent p {position: absolute; right: 0; top: 12px; text-align: right; font-weight: 400; font-size: 13px; line-height: 17px; color: #5E5E5E;}

/* .sec1 .cards a .bot {position: absolute; left: 40px; bottom: 40px; display: flex; justify-content: space-between; width: calc(100% - 80px); align-items: end; z-index: 1;}
.sec1 .cards a .bot div {display: flex;}
.sec1 .cards a .bot div dl {color: #E0E0E0; position: relative;}
.sec1 .cards a .bot div dl + dl {margin-left: 40px;}
.sec1 .cards a .bot div dl:last-of-type::before {content: ""; background: rgba(255, 255, 255, 0.4); display: block; width: 2px; height: 52px; position: absolute; left: -20px;}
.sec1 .cards a .bot div dl dt {font-size: 14px;	line-height: 22px;}
.sec1 .cards a .bot div dl dd {font-size: 32px;	line-height: 30px; display: flex; align-items: baseline;}
.sec1 .cards a .bot div dl dd span {font-size: 18px; padding-left: 3px;}
.sec1 .cards a .bot p {color: rgba(255, 255, 255, 0.8); font-weight: 400; font-size: 13px;} */

.sec1 > .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; overflow: hidden; position: fixed; z-index: -5;}
.sec1 > .bg video {width: 100%;}



.sec2 {padding: 150px 0 122px; width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; text-align: center; justify-content: center;}



.sec2 .tit {position: relative; margin: 30px 0 50px; height: 90px;}
/* .sec2 .tit div */
.sec2 .tit div {clip-path: polygon(0 0, 100% 0%, 45% 40%, 0 71%); position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
.sec2 .tit div p {text-align: center; font-weight: 700; font-size: 32px; line-height: 45px; transform: translateY(40px);}
/* .sec2 .tit div.on {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);} */

/* .sec2 .cards {margin-top: 230px;} */
.sec2 .cards {position: relative; width: 100vw; display: flex; justify-content: center; height: 565px;}
.sec2 .cards ul {display: flex; position: absolute; opacity: 0;}
/* .sec2 .cards ul {display: flex; position: absolute; transform: translateY(0); opacity: 1;} */
.sec2 .cards ul.news li {background: rgba(255, 255, 255, .7); width: 336px; height: 565px; border-radius: 20px; transform: translateY(200px); opacity: 0;}
.sec2 .cards ul.news li + li {margin-left: 20px;}
.sec2 .cards ul.news li .top {height: 181px;}
.sec2 .cards ul.news li .top p {font-weight: 700; font-size: 24px; line-height: 34px; padding: 44px 0 8px;}
.sec2 .cards ul.news li .top a {font-weight: 500; font-size: 13px; line-height: 20px; display: inline-block; background: #E37500; padding: 5px 18px; border-radius: 50px; color: #fff; transition: all 0.4s ease;}
.sec2 .cards ul.news li .top a:hover {background: #d16c00}
.sec2 .cards ul.news li .context {background: #fff; border-radius: 0 0 20px 20px; text-align: left; padding: 40px; height: 384px; box-sizing: border-box; position: relative;}
.sec2 .cards ul.news li .context .list {border-bottom: 1px solid #EEEEEE; padding-bottom: 20px;}
.sec2 .cards ul.news li .context .list:last-of-type {border-bottom: 0; padding-bottom: 0;}
.sec2 .cards ul.news li .context .list + div {margin-top: 20px;}
.sec2 .cards ul.news li .context .list a {font-weight: 400; font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.sec2 .cards ul.news li .context .list a:hover {text-decoration: underline;}
.sec2 .cards ul.news li .context .list p {font-weight: 400; font-size: 13px; line-height: 20px; margin-top: 6px; color: #757575;}

.sec2 .cards ul.news li .context .swiper {height: 100%;}
.sec2 .cards ul.news li .context .swiper .swiper-slide .img {width: 256px; overflow: hidden; border-radius: 8px; }
.sec2 .cards ul.news li .context .swiper .swiper-slide .img img {width: 100%; transform: scale(1); transition: transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.sec2 .cards ul.news li .context .swiper .swiper-slide:hover .img img {transform: scale(1.1);}
.sec2 .cards ul.news li .context .swiper .swiper-slide dl {margin-top: 20px;}
.sec2 .cards ul.news li .context .swiper .swiper-slide dt {font-weight: 400; font-size: 16px; line-height: 24px;}
.sec2 .cards ul.news li .context .swiper .swiper-slide dd {font-weight: 400; font-size: 13px; line-height: 20px; color: #757575; margin-top: 6px;}
.sec2 .cards ul.news li .context .swiper .swiper-pagination {bottom: 0 !important;}
.sec2 .cards ul.news li .context .swiper .swiper-pagination .swiper-pagination-bullet {margin: 0 2px !important;}
.sec2 .cards ul.pre li {width: 330px; height: 440px; border-radius: 20px; background: rgba(255, 255, 255, .9); box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0); transform: translateY(200px); opacity: 0;}
.sec2 .cards ul.pre li::after {content: ""; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid #F58220; position: absolute; top: -1px; left: -1px; border-radius: 20px; opacity: 0; box-sizing: border-box; transition: all .6s; z-index: -1;}
.sec2 .cards ul.pre li:hover::after {opacity: 1;}
.sec2 .cards ul.pre li + li {margin-left: 20px;}
.sec2 .cards ul.pre li div {width: 120px; height: 120px; margin: 100px auto 40px;}
.sec2 .cards ul.pre li p {font-weight: 700; font-size: 24px; line-height: 34px;}
.sec2 .cards ul.pre li a {font-weight: 500; font-size: 13px; line-height: 20px; display: inline-block; background: #E37500; padding: 5px 18px; border-radius: 50px; color: #fff; margin-top: 13px;}

.sec2 .bg {position: absolute; width: 100vw; height: 100%; overflow: hidden; z-index: -2; top: 0; left: 0; transition: all 1s;}
.sec2 .bg div {width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; transition: all 1.3s; transform: translateX(-20px); width: calc(100% + 20px);} 
.sec2 .bg div.on {opacity: 1; transform: translateX(0);}
.sec2.on .bg {position: fixed; height: 100%}

.sec2 .main-tab {border: 0;}



.sec3 {width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; text-align: center; justify-content: center; padding: 180px 0 100px; background: #fff;}

.sec3 .tit {width: 1770px; font-weight: 700; font-size: 32px; line-height: 45px; margin: 30px 0 50px; height: 45px; position: relative;}
.sec3 .tit li {min-height: 47px; position: relative; width: 1760px; margin: 0 auto; opacity: 0; transform: translateY(70px); position: absolute; left: 0; top: 0; width: 100%; z-index: 5; display: none;}
.sec3 .tit li.on {display: block !important;z-index:4;}
.sec3 .tit li .cust-select {display: inline-block; background: #FFEDE4; border-radius: 10px; font-size: 24px; line-height: 34px; width: 131px; height: 47px; color: #001B3C; cursor: pointer; margin: 0 5px; position: relative; z-index: 1; transform: translateY(-2px);}
.sec3 .tit li .cust-select p {line-height: 47px; position: relative; padding-right: 15px;}
.sec3 .tit li .cust-select p span {display: block; width: 10px; height: 8px; background: url("../images/main/cust-select-poli.png") no-repeat; position: absolute; top: 20px; right: 10px;}
.sec3 .tit li .cust-select div {position: absolute; top: 35px; background: #FFEDE4; border-radius: 0 0 10px 10px; text-align: left;  overflow: hidden; height: 0; transition: all .4s;}
.sec3 .tit li .cust-select div.on {height: 235px;}
.sec3 .tit li .cust-select div a {font-weight: 400; display: inline-block; width: 100%; padding: 0 15px;}
.sec3 .tit li .cust-select div a:first-of-type {padding-top: 15px;}
.sec3 .tit li .cust-select div a:last-of-type {padding-bottom: 10px;}
.sec3 .tit li .cust-select div a + a {margin-top: 10px;}
.sec3 .tit li .cust-select + span + p {position: absolute; bottom: 10px; right: 0; font-weight: 500; font-size: 15px; line-height: 24px; background: url("../images/main/clock-ico.png") no-repeat 0 center; padding-left: 27px; color: #949494; background-size: 19px;}


.sec3 .con {position: relative; height: 637px;}

.sec3 .con > div {top: 0; z-index: 1; padding-bottom: 86px; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; display: none;}
/* .sec3 .con > div.on {opacity: 1; z-index: 2; transform: translateY(0) translateX(-50%);} */

.sec3 .con div.card .option-con {display: none;}
.sec3 .con div.card .option-con.on {display: flex !important;}


.sec3 .con div.card {display: none; justify-content: center;}
.sec3 .con div.card.on {display: flex !important;}
.sec3 .con div.card .items {position: relative; transform: translateY(200px); opacity: 0; margin-right: 20px;}
.sec3 .con div.card .items:last-of-type {margin-right: 0;}
.sec3 .con div.card a {width: 336px; min-height: 476px; border-radius: 20px; background: #fff; display: block; padding: 40px; box-sizing: border-box; text-align: left; position: relative; background: #FFFBF7;}

.sec3 .con div.card a::after {content: ""; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border: 1px solid #FFDCC6; position: absolute; top: -1px; left: -1px; border-radius: 20px; opacity: 1; box-sizing: border-box; transition: all .6s; z-index: -1;}

.sec3 .con div.card a:hover::after {border: 1px solid #F58220;}
.sec3 .con div.card a + a {margin-left: 20px;}
.sec3 .con div.card a .top {display: flex; justify-content: space-between;}
.sec3 .con div.card a .top span:first-of-type {font-weight: 700; font-size: 20px; line-height: 28px;}
.sec3 .con div .heart {display: block; width: 24px; height: 24px; background: url("../images/main/heart-de.png") no-repeat; transition: all .2s; background-size: contain; position: absolute; top: 40px; right: 40px;}
.sec3 .con div .heart.on {background: url("../images/main/heart-on.png") no-repeat; background-size: contain;}
.sec3 .con div.card a .desc {margin: 22px 0 32px; min-height: 135px;}
.sec3 .con div.card a .desc p:first-of-type {font-weight: 700; font-size: 24px; line-height: 34px; color: #E37500;}
.sec3 .con div.card a .desc p:last-of-type {font-weight: 400;	font-size: 12px; line-height: 24px; color: #E37500; background: 0; border-radius: 4px; padding: 0 4px; display: inline-block; margin-top: 6px; border: 1px solid #F58220;}
.sec3 .con div.card a .graph img {width: 100%;}
.sec3 .con div.card a .per {margin: 30px 0 15px;}
.sec3 .con div.card a .per dt {font-weight: 400; font-size: 13px; line-height: 20px;}
.sec3 .con div.card a .per dd {font-weight: 500; font-size: 38px; color: #D93B3B; display: flex; align-items: baseline;}
.sec3 .con div.card a .per dd span {font-weight: 700;	font-size: 24px; padding-left: 5px;}
.sec3 .con div.card a .per2 dd {font-weight: 500; font-size: 15px; color: #D93B3B; display: flex; align-items: baseline;}
.sec3 .con div.card a .per2 dd span {font-weight: 700; font-size: 22px; padding-right: 2px; padding-left: 0;}

.sec3 .con div.card a .price {display: flex;}
.sec3 .con div.card a .price dl + dl {margin-left: 70px;}
.sec3 .con div.card a .price dl dt {font-weight: 400; font-size: 13px; line-height: 20px; color: #757575;}
.sec3 .con div.card a .price dl dd {font-weight: 500; font-size: 14px; line-height: 22px; color: #1A1A1A;}



.sec3 .con div.news {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; width: 1760px; margin: 0 auto;}
.sec3 .con div.news.on {display: grid !important;}
.sec3 .con div.news a {display: block; background: #FFFBF7; border-radius: 20px; width: 573px;	min-height: 228px; padding: 40px 40px 70px 40px; box-sizing: border-box; text-align: left; position: relative; }
.sec3 .con div.news a::after {content: ""; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border: 1px solid #FFDCC6; position: absolute; top: -1px; left: -1px; border-radius: 20px; opacity: 1; box-sizing: border-box; transition: all .6s; z-index: -1;}
.sec3 .con div.news a:hover::after {border: 1px solid #F58220;}
.sec3 .con div.news a:first-of-type {grid-row: 1 / span 2;}
.sec3 .con div.news a .top {display: flex; justify-content: space-between; margin-bottom: 24px;}
.sec3 .con div.news a .top p span {font-weight: 400; font-size: 12px; line-height: 24px; color: #1A1A1A; background: #FFEDE4; border-radius: 4px; padding: 0 4px; display: inline-block;}
.sec3 .con div.news a .top p span + span {margin-left: 1px;}
.sec3 .con div.news a dl dt {font-weight: 700; font-size: 24px; line-height: 34px; color: #1A1A1A;}
.sec3 .con div.news a:first-of-type dl dt {font-size: 30px; line-height: 40px;}
.sec3 .con div.news a dl dd {font-weight: 400; font-size: 16px; line-height: 26px; color: #2E2E2E; margin-top: 24px;}

.sec3 .con div.news a .date {font-weight: 400; font-size: 13px; line-height: 20px; color: #949494; position: absolute; bottom: 40px; left: 40px; width: calc(100% - 80px);}



.sec3 .con div .link{width: 100%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;}
.sec3 .con div .link a {width: fit-content; height: unset; font-size: 16px; line-height: 26px; background: url("../images/main/link-ico.png") no-repeat 100% center; padding: 0; padding-right: 27px; text-align: center; min-height: auto; border: 0; color: #5E5E5E; font-weight: 500; margin: 0 auto; background-size: 24px;}
.sec3 .con div .link a::after {display: none;}

/* .sec3 .con div.card {display: none;}
.sec3 .con div.news {display: none;}
.sec3 .con div.card.on {display: flex;}
.sec3 .con div.news.on {display: grid;} */



@media screen and (max-width: 1800px) {
	.sec3 .con div.card .option-con.on{transform:scale(0.75);}
}
/* 수익률높았던 ETF 1~5위  */
@media screen and (max-width: 1200px){
	.sec3 .con div.card .option-con.on{transform:scale(0.65);}
}
@media screen and (max-width: 1024px){
	.sec3 .con div.card .option-con.on{transform:scale(0.55);}
}


 


















/* 공통 탭 --------------------------------------------------------------------------------------------------------- */
.main-tab {height: 75px; border-radius: 50px; background: #fff; position: relative; text-align: center; display: inline-flex; margin: 0 auto; align-items: center; border: 1px solid #E0E0E0; box-sizing: border-box; padding: 6px;}
.main-tab a {font-size: 18px; line-height: 29px; color: #757575 !important; padding: 16px 32px; text-align: center; transition: all .3s; z-index: 1; border-radius: 50px; font-weight: 500;}
.main-tab a.on {color: #fff !important;}
.main-tab span {width: 206px; background: #E37500; border-radius: 50px; height: 60px; position: absolute; left: 6px;}