@charrset 'utf-8';


.section-1{width: 100%; height: 17vh; }
.section-1 .swiper-container{width: 100%; height: 100%;}
.section-1 .swiper-container .swiper-wrapper .swiper-slide{ background-size: cover; background-position: center center;}
.section-1 .swiper-container .navigation-wrap {width: 105px; height: 25px; position: absolute; right: 90px; bottom: 35px; z-index: 50;}
.section-1 .swiper-container .navigation-wrap .prev{width: 20px; height: 25px; float: left; cursor: pointer;}
.section-1 .swiper-container .navigation-wrap .prev img{position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.section-1 .swiper-container .navigation-wrap .next{width: 20px; height: 25px; float: right; cursor: pointer;}
.section-1 .swiper-container .navigation-wrap .next img{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.section-1 .swiper-container .navigation-wrap .navigation{width: 65px; height: 25px; float: left;}
.section-1 .swiper-container .navigation-wrap .navigation .navigation-text{width: 100%; height: 25px; display: block; text-align: center; line-height: 28px; font-family: 'RobotoR', sans-serif; font-size: 18px; color: rgba(255, 255, 255, 0.6);}
.section-1 .swiper-container .navigation-wrap .navigation .navigation-text .white{color: #ffffff;}
.section-1 .main-bottom-bar{z-index: 20; position: absolute; bottom: 0; left: 0; width: 100%; height: 12px;}
.section-1 .main-bottom-bar .main-bottom-left{width: 50%; float: left; background-color: #ffffff; height: 12px;}
.section-1 .main-bottom-bar .main-bottom-right{width: 50%; float: right; background-color: rgba(255, 255, 255, 0.2); height: 12px;}
.section-1 .section-1-menu-top{width: 100%; position: absolute; height: 100px; top: 0; left: 0; z-index: 20;}
.section-1 .section-1-menu-top .logo{display: block; width: 260px; height: 60px; position: absolute; top: 50%; transform: translateY(-50%); left: 50px;}
.section-1 .section-1-menu-top .logo img{display: block; width: 100%;}
.section-1 .section-1-menu-top .menu-wrap{width: 60%; height: 100px; float: right; padding-top: 35px; padding-right: 50px;}
.section-1 .section-1-menu-top .menu-wrap .menu-btn{width: 32px; height: 30px; float: right; display: block;}
.section-1 .section-1-menu-top .menu-wrap .menu-btn img{display: block; width: 100%;}
.section-1 .section-1-menu-top .menu-wrap .search{width: 28px; height: 30px; float: right; margin-right: 30px;}
.section-1 .section-1-menu-top .menu-wrap .search img{width: 100%; display: block;}
.section-1 .section-1-menu-top .menu-wrap .search-input{border: none; width: 150px; height: 30px; border-bottom: 2px solid #fff; font-size: 18px; font-family: 'NotoR', sans-serif; color: #fff; float: right; margin-right: 5px; margin-left: 20px;}
.section-1 .section-1-menu-top .menu-wrap .menu-ul{/*width: 50%;*/ width: 100%; text-align: right; height: 30px; float: right;}
.section-1 .section-1-menu-top .menu-wrap .menu-ul li{display: inline-block; height: 30px;}
.section-1 .section-1-menu-top .menu-wrap .menu-ul li a{display: block; padding-left: 20px; padding-right: 20px; line-height: 30px; color: #fff; font-family: 'NotoR', sans-serif; color: #fff;}

.section-2{padding-top: 30px; /*padding-bottom: 114px;*/ background-color: #fff;}
.section-2 .section-2-wrap{width: 1518px; margin: 0 auto;}
.section-2 .section-2-wrap .section-2-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-2 .section-2-wrap .section-2-title2{display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-2 .section-2-wrap .swiper-tab{width: 100%; text-align: center; margin-top: 20px;}
.section-2 .section-2-wrap .swiper-tab li{width: 187px; height: 40px; display: inline-block; margin-right: 15px;}
.section-2 .section-2-wrap .swiper-tab li:last-child{margin-right: 0px;}
.section-2 .section-2-wrap .swiper-tab li a{display: block; width: 187px; height: 40px; border: 1px solid #707070; border-radius: 27px; line-height: 40px; color: #716c6c; font-size: 20px; font-family: 'NanumSquareEB', sans-serif; text-align: center; transition: 0.5s;}
.section-2 .section-2-wrap .swiper-tab li a.active{background-color: #e6e6e6; border: 1px solid #e6e6e6; transition: 0.5s;}
.section-2 .section-2-wrap .swiper-container{width: 100%; height: 400px; margin-top: 30px;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide{backgroud-size: cover; background-position: center center; width: 544px; background-color: #ffffff; border-radius: 25px; padding: 20px; border: 1px solid #716c6c;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div{width: 100%; height: 100%;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title{width: 100%; height: 30px; direction: ltr;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div{width: 50%; height: 30px; }
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title{width: 100%; display: block; line-height: 30px; text-align: left; font-size: 16px; color: #707070; font-family: 'NanumSquareR', sans-serif;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title .left-icon{width: 23px; height: 23px; float: left; margin-top: 3px; margin-right: 3px;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title .unit{font-size: 14px;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .right-title{width: 100%; display: block; line-height: 30px; text-align: center; font-size: 16px; color: #707070; font-family: 'NanumSquareR', sans-serif;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .right-title .unit{font-size: 14px;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price{width: 100%; height: 40px; border-bottom: 1px solid #E2E2E2;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price{ height: 40px; direction: ltr;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.left{float: left; width: 45%;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.left:after{content: ''; width: 1px; height: 25px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: #E2E2E2;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.right{padding-left: 38px; float: right; width: 55%;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price .price{font-size: 26px; line-height: 40px; color: #2f2f2f; font-family: 'RobotoB', sans-serif; display: block; text-align: left;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price .price .diff{font-size: 17px; font-family: 'RobotoM', sans-serif;}
.section-2 .section-2-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .chart{width: 100%; height: 177px; margin-top: 20px;}

.section-2 .section-2-wrap .section-2-btn-wrap{width: 305px; height: 60px; margin: 20px auto;}
.section-2 .section-2-wrap .section-2-btn-wrap .btn-div{width: 100%; display: block; height: 60px;}
.section-2 .section-2-wrap .section-2-btn-wrap .btn-div .btn{width: 40px; height: 40px; display: block; margin-top: 10px;}
.section-2 .section-2-wrap .section-2-btn-wrap .btn-div .btn img{width: 100%;}
.section-2 .section-2-wrap .section-2-btn-wrap .btn-div .line{width: 200px; height: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #2f2f2f;}
.section-2 .section-2-wrap .section-2-btn-wrap .btn-div .line .number{width: 100%; text-align: center; display: block; position: absolute; left: 50%; transform: translateX(-50%);  bottom: -30px; line-height: 21px; font-size: 18px; color: #2f2f2f;}


/* .section-2{width: 100%;} */
/* .section-2 .section-2-top{width: 100%; height: 80px; background-color: #2F2F2F;} */
/* .section-2 .section-2-top .section-2-ul{width: 100%; height: 80px; text-align: center; } */
/* .section-2 .section-2-top .section-2-ul .section-2-li{display: inline-block; margin-right: 70px;} */
/* .section-2 .section-2-top .section-2-ul .section-2-li:after{content: ''; width: 0.5px; height: 18px; background-color: #707070; position: absolute; top: 50%; transform: translateY(-50%); right: -35px;} */
/* .section-2 .section-2-top .section-2-ul .section-2-li:last-child{margin-right: 0px;} */
/* .section-2 .section-2-top .section-2-ul .section-2-li:last-child:after{display: none;} */
/* .section-2 .section-2-top .section-2-ul .section-2-li .section-2-a{display: block; line-height: 80px; height: 80px; padding-left: 20px; padding-right: 20px; color: #ffffff; font-family: 'NanumSquareB', sans-serif; font-size: 19px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom{width: 100%; height: 50px; margin-top: 35px; padding-right: 100px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div{width: 300px; height: 50px; float: right;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div .line{width: 200px; height: 1px; background-color: #2f2f2f; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div .btn{width: 40px; height: 40px; display: block; margin-top: 5px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div .btn img{display: block; width: 100%;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div .number{display: block; width: 200px; position: absolute; left: 50%; transform: translateX(-50%); font-size: 16px; line-height: 21px; color: #2f2f2f; text-align: center; font-family: 'RobotoR', sans-serif; bottom: 0;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-btn-div .number .bold{font-family: 'RobotoB', sans-serif;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-text{float: right; line-height: 50px; font-size: 14px; color: #707070; font-family: 'NanumSquareR', sans-serif; text-align: right; padding-right: 50px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-bottom .bottom-text .bold{font-family: 'NanumSquareB', sans-serif;} */
/* .section-2 .section-2-chart-wrap{width: 100%; height: 770px; margin-top: 160px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap{width: 1493px; height: 770px; position: absolute; left: 0; padding-right: 145px; background-color: #F6F7FA;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .btn-div{width: 100%; height: 130px; padding-top: 45px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .btn-div .btn-ul{width: 100%; height: 40px; text-align: right;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .btn-div .btn-ul .btn-li{width: 160px; height: 40px; display: inline-block; margin-right: 5px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .btn-div .btn-ul .btn-li .btn-a{width: 160px; height: 40px; border-radius: 20px; display: block; text-align: center; color: #716c6c; font-family: 'NanumSquareEB', sans-serif; font-size: 20px; background-color: #e6e6e6; transition: 0.5s; line-height: 40px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .btn-div .btn-ul .btn-li .btn-a.active{color: #ffffff; background-color: #716c6c; transition: 0.5s;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container{width: 100%; height: 520px; } */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide{backgroud-size: cover; background-position: center center; width: 544px; background-color: #ffffff; border-radius: 25px; padding: 35px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div{width: 100%; height: 100%;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title{width: 100%; height: 30px; direction: ltr;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div{width: 50%; height: 30px; } */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title{width: 100%; display: block; line-height: 30px; text-align: left; font-size: 16px; color: #707070; font-family: 'NanumSquareR', sans-serif;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title .left-icon{width: 23px; height: 23px; float: left; margin-top: 3px; margin-right: 3px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .left-title .unit{font-size: 14px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .right-title{width: 100%; display: block; line-height: 30px; text-align: center; font-size: 16px; color: #707070; font-family: 'NanumSquareR', sans-serif;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-title .swiper-title-div .right-title .unit{font-size: 14px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price{width: 100%; height: 60px; border-bottom: 1px solid #E2E2E2;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price{ height: 60px; direction: ltr;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.left{float: left; width: 45%;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.left:after{content: ''; width: 1px; height: 25px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: #E2E2E2;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price.right{padding-left: 38px; float: right; width: 55%;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price .price{font-size: 32px; line-height: 60px; color: #2f2f2f; font-family: 'RobotoB', sans-serif; display: block; text-align: left;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .swiper-price .swiper-price .price .diff{font-size: 17px; font-family: 'RobotoM', sans-serif;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .swiper-container .swiper-wrapper .swiper-slide .swiper-div .chart{width: 100%; height: 250px; margin-top: 20px;} */

/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-title{position: absolute; top: 119px; right: -179px; color: #2f2f2f; font-family: 'RobotoB', sans-serif; line-height: 70px; font-size: 64px; display: block; z-index: 20;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-title2{position: absolute; top: 257px; right: -244px; color: #2f2f2f; font-family: 'NanumSquareB', sans-serif; font-size: 36px; display: block; z-index: 20; line-height: 41px;} */
/* .section-2 .section-2-chart-wrap .chart-wrap .section-2-title2.ragular{font-family: 'NanumSquareR', sans-serif;} */



/* .section-2 .section-2-chart-wrap .chart-wrap .bottom-div{width: 100%; height: 120px; position: absolute; left: 0; bottom: -120px; } */



.section-3{width: 100%; padding-top: 30px; padding-bottom: 30px;}
.section-3 .section-3-wrap{width: 1518px; margin: 0 auto;}
.section-3 .section-3-wrap .section-3-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-3 .section-3-wrap .section-3-title2 {display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-3 .section-3-wrap .rate-wrap{width: 100%; margin-top: 50px;}
.section-3 .section-3-wrap .rate-wrap .rate-div{width: 742px;}
.section-3 .section-3-wrap .rate-wrap .rate-div .table{width: 100%; table-layout: fixed;}
.section-3 .section-3-wrap .rate-wrap .rate-div .table tr{height: 50px;}
.section-3 .section-3-wrap .rate-wrap .rate-div .table tr th{background-color: #F0F0F0; text-align: center; vertical-align: middle; font-size: 20px; color: #2f2f2f; font-family: 'NanumSquareEB', sans-serif; text-align: center;}
.section-3 .section-3-wrap .rate-wrap .rate-div .table tr td{vertical-align: middle; width: 25%; text-align: center; border-bottom: 1px solid #E2E2E2; font-size: 20px; font-family: 'RobotoR', sans-serif; color: #2f2f2f;}
.section-3 .section-3-wrap .rate-wrap .rate-div .table tr td img{width: 16px; height: 16px; margin-right: 5px; }

.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap{width: 100%; margin-top: 40px;}
.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap .title{height: 70px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; line-height: 70px; padding-left: 50px; font-size: 22px; font-family: 'NanumSquareB', sans-serif; color: #2f2f2f; display: block; cursor: pointer;}
.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap .title .sub{position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #716c6c; font-size: 18px; font-family: 'NanumSquareB', sans-serif;}
.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap .chart{width: 100%; height: 0px; transition: 0.5s; overflow: hidden; border-bottom: 1px solid #e2e2e2;}
.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap .chart.active{height: 400px; transition: 0.5s;}
.section-3 .section-3-wrap .rate-wrap .rate-div .rate-chart-wrap .chart .canvas{width: 100%; height: 400px; position: absolute; left: 0; bottom: 0; padding: 30px;}

.section-4{width: 100%; padding-top: 30px; padding-bottom: 30px; background-color: #F6F7FA;}
.section-4 .section-4-wrap{width: 1518px; margin: 0 auto;}
.section-4 .section-4-wrap .section-4-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-4 .section-4-wrap .section-4-title2{display: block; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-4 .section-4-wrap .section-4-sub-title{width: 100%; text-align: right; font-family: 'NanumSquareR', sans-serif; font-size: 16px; color: #2f2f2f; display: block;}
.section-4 .section-4-wrap .section-4-rate-title{width: 100%; height: 134px; background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%); border: 1px solid #ece7dc; border-radius: 24px; margin-top: 10px; box-shadow: 0 12px 30px rgba(58, 42, 17, 0.06); overflow: hidden; display: flex; align-items: stretch;}
.section-4 .section-4-wrap .section-4-rate-title:after{display: none;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap{width: auto; height: 134px; padding: 0 14px; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; column-gap: 32px;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap:after{content: ''; width: 1px; height: 70px; background-color: #e9e2d5; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap:last-of-type:after{display: none;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .title{width: auto; float: none; height: auto; text-align: center; display: inline-block; line-height: 1; font-size: 19px; font-family: 'NanumSquareEB', sans-serif; color: #5d5343; letter-spacing: -0.05em; white-space: nowrap; vertical-align: middle;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .title .img{width: 22px; height: 22px; margin-right: 6px; vertical-align: -3px;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price{width: auto; float: none; height: auto; margin-top: 0; margin-left: 0; line-height: 1; font-family: 'RobotoB', sans-serif; text-align: center; color: #2f2f2f; font-size: 48px; letter-spacing: -0.05em; white-space: nowrap; vertical-align: middle;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price .diff{display: inline-block; margin-left: 4px; font-size: 19px; font-family: 'RobotoM', sans-serif; vertical-align: 8px; color: inherit;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price .red{color: #d64545;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price .blue{color: #5d72d8;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price .diff.minus{color: #5d72d8;}
.section-4 .section-4-wrap .section-4-rate-title .span-wrap .price .diff.plus{color: #d64545;}
.section-4 .section-4-wrap .section-4-cal-wrap{width: 750px; border-radius: 20px; background-color: #fff; padding-top: 35px; padding-bottom: 25px; padding-left: 35px; padding-right: 35px; margin-top: 17px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-title{width: 100%; height: 56px; border-bottom: 2px solid #2f2f2f; line-height: 56px; display: block;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-title .title{width: 33.3%; text-align: left; color: #2f2f2f; font-size: 32px; font-family: 'RobotoB', sans-serif; display: block; float: left; padding-left: 5px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-title .sub{width: 33.3%; text-align: center; color: #2f2f2f; font-size: 18px; font-family: 'NanumSquareEB', sans-serif; display: block; float: left; line-height: 20px; margin-top: 25px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-sub-title{width: 100%; height: 60px; border-bottom: 1px solid #E2E2E2; line-height: 60px; display: block;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-sub-title .title{width: 33.3%; text-align: left; padding-left: 48px; color: #2f2f2f; font-family: 'NanumSquareR', sans-serif; display: block; float: left; font-size: 16px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-sub-title .title .bold{font-family: 'RobotoM', sans-serif; font-size: 16px; margin-left: 5px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-sub-title .sub{width: 33.3%; text-align: right; padding-right: 40px; color: #2f2f2f; font-size: 22px; font-family: 'RobotoM', sans-serif; display: block; float: left;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-sub-title .sub .diff{font-size: 17px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-input{width: 100%; margin-top: 30px; height: 30px; text-align: center; display: block;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-input .title{font-family: 'NanumSquareR', sans-serif; color: #2f2f2f; font-size: 22px; margin-right: 20px; line-height: 30px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-input input{font-size: 20px; border: none; border-bottom: 1px solid #E2E2E2; width: 120px; height: 25px; color: #2f2f2f; text-align: center; font-family: 'RobotoM', sans-serif;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-input .sub{margin-left: 5px; font-size: 20px; color: #2f2f2f; font-family: 'RobotoM', sans-serif;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result{width: 100%; margin-top: 30px; display: block;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .price{float: left; width: 33.3%; display: block;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .price .title{line-height: 20px; padding-left: 30px; color: #707070; font-size: 18px; font-family: 'NanumSquareR', sans-serif; display: block; text-align: left;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .price .price{line-height: 56px; padding-left: 30px; color: #e79433; font-size: 52px; font-family: 'NanumSquareL', sans-serif; display: block; text-align: left;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .price .title.sub{padding-left: 0;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .price .price.sub{padding-left: 0;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div{width: 100%; }
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul{width: 100%;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li{width: 100%; height: 60px; border-bottom: 1px solid #e2e2e2;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li:first-child{border-top: 1px solid #e2e2e2;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .span{width: 33.3%; float: left; height: 60px; display: block; text-align: left;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .span .btn{width: 22px; height: 22px; margin-right: 25px; display: inline-block; vertical-align: middle;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .span .percent{line-height: 60px; font-size: 16px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .span .percent .num{margin-left: 10px; font-family: 'RobotoM', sans-serif; color: #2f2f2f;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .price{width: 33.3%; text-align: right; padding-right: 40px; color: #2f2f2f; font-size: 22px; font-family: 'NanumSquareEB', sans-serif; display: block; float: left; line-height: 60px;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-array-div ul li .price .unit{font-size: 16px;}
.section-4 .section-4-wrap .section-4-cal-wrap .bottom-text{width: 100%; margin-top: 30px; text-align: right; display: block; line-height: 18px; font-size: 14px; color: #2f2f2f; font-family: 'NanumSquareB', sans-serif;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .btn{float: left; width: 33.3%; display: block; padding-top: 20px; text-align: center; padding-left: 10%;}
.section-4 .section-4-wrap .section-4-cal-wrap .cal-result .btn .btn-a{width: 56px; height: 56px; display: block; background: #716c6c; text-align: center; font-family: 'NanumSquareEB', sans-serif; color: #fff; font-size: 17px; border-radius: 50%; line-height: 20px; padding-top: 9px;}
.section-4 .section-4-wrap .manual-title{width: 100%; margin-top: 60px; display: block; text-align: center; line-height: 40px; font-size: 36px; color: #2f2f2f; font-family: 'NanumSquareR', sans-serif;}
.section-4 .section-4-wrap .manual-sub{width: 100%; margin-top: -8px; line-height: 18px; color: #e2e2e2; font-family: 'NanumSquareB', sans-serif; display: block; text-align: right;}
.section-4 .section-4-wrap .manual-div{width: 100%; height: 164px; border-radius: 20px; background-color: #fff; margin-top: 20px; padding: 25px 18px 25px 100px;}
.section-4 .section-4-wrap .manual-div .img{width: 48px; height: 64px; position: absolute; left: 58px; top: 50%; transform: translateY(-50%); }
.section-4 .section-4-wrap .manual-div .input-div{width: 194px;height: 100%; float: left; margin-left: 26px; }
.section-4 .section-4-wrap .manual-div .input-div .input-title{width: 100%; height: 28px; position: absolute; top: 8px; line-height: 28px; text-align: left; display: block; color: #2f2f2f; font-size: 23px; font-family: 'NanumSquareR', sans-serif; padding-left: 8px;}
.section-4 .section-4-wrap .manual-div .input-div .input-wrap{width: 100%; height: 30px; position: absolute; bottom: 0; line-height: 30px; text-align: left; display: block; color: #2f2f2f; font-size: 23px; font-family: 'NanumSquareR', sans-serif;}
.section-4 .section-4-wrap .manual-div .input-div .input-wrap .inputs{border:none; border-bottom: 1px solid #e2e2e2; background-color: transparent; color: #2f2f2f; font-size: 19px; text-align: center; height: 30px; width: 124px;}
.section-4 .section-4-wrap .manual-div .manual-inline-wrap{display: flex; align-items: center; gap: 6px;}
.section-4 .section-4-wrap .manual-div .manual-inline-wrap #manual_percent{width: 82px;}
.section-4 .section-4-wrap .manual-div .manual-inline-wrap #manual_percent_type{width: 42px;}
.section-4 .section-4-wrap .manual-div .manual-btn{float: left; margin-left: 20px; width: 68px; height: 78px; border-radius: 12px; background-color: #716c6c; color: #fff; font-size: 23px; font-family: 'NanumSquareEB', sans-serif; line-height: 24px; text-align: center; display: block; margin-top: 13px; padding-top: 14px;}
.section-4 .section-4-wrap .manual-div .manual-375{width: 200px; height: 100%; float: left; margin-left: 20px; padding-top: 10px;}
.section-4 .section-4-wrap .manual-div .manual-result .title{width: 100%; height: 20px; text-align: center; color: #707070; font-size: 19px; font-family: 'NanumSquareR', sans-serif; text-align: center; display: block;}
.section-4 .section-4-wrap .manual-div .manual-result .result{width: 100%; height: 64px; text-align: center; color: #e79433; font-family: 'NanumSquareL', sans-serif; font-size: 40px; display: block; border-bottom: 1px solid #e2e2e2; line-height: 64px; margin-top: 12px;}
.section-4 .section-4-wrap .manual-div .manual-stan{width: 176px; height: 100%; float: left; margin-left: 20px; padding-top: 10px;}
.section-5{padding-top: 30px; /*padding-bottom: 114px;*/ background-color: #fff;}
.section-5 .section-5-wrap{width: 1520px; margin: 0 auto;}
.section-5 .section-5-wrap .section-5-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-5 .section-5-wrap .section-5-title2{display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-5 .section-5-wrap .swiper-tab{width: 100%; text-align: center; margin-top: 40px;}
.section-5 .section-5-wrap .swiper-tab li{width: 187px; height: 40px; display: inline-block; margin-right: 15px;}
.section-5 .section-5-wrap .swiper-tab li:last-child{margin-right: 0px;}
.section-5 .section-5-wrap .swiper-tab li a{display: block; width: 187px; height: 40px; border: 1px solid #707070; border-radius: 27px; line-height: 40px; color: #716c6c; font-size: 20px; font-family: 'NanumSquareEB', sans-serif; text-align: center; transition: 0.5s;}
.section-5 .section-5-wrap .swiper-tab li a.active{background-color: #e6e6e6; border: 1px solid #e6e6e6; transition: 0.5s;}
.section-5 .section-5-wrap .swiper-container{width: 100%; height: 580px; margin-top: 60px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide{width: 488px; height: 580px; border-radius: 20px; border: 1px solid #C6C5C5; padding-left: 35px; padding-right: 35px; padding-top: 10px; padding-bottom: 35px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .title{width: 100%; display: block; height: 50px; border-bottom: 1px solid #e2e2e2; font-size: 23px; font-family: 'NanumSquareB', sans-serif; color: #2f2f2f; line-height: 50px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .title .sub{font-size: 20px; font-family: 'NanumSquareR', sans-serif;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap{display: block; width: 100%; padding-top: 20px; padding-bottom: 12px; border-bottom: 1px solid #e2e2e2; padding-left: 5px; padding-right: 5px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .title{display: block; width: 100%; text-align: left; color: #2f2f2f; font-size: 14px; line-height: 16px; font-family: 'NanumSquareR', sans-serif; height: 16px; border-bottom: none;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price{display: block; width: 100%; line-height: 40px; color: #2f2f2f; font-size: 33px; font-family: 'RobotoB', sans-serif; text-align: left; height: 40px; margin-top: 5px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price .unit{margin-left: 5px; font-size: 18px; font-family: 'NanumSquareR', sans-serif;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price .sub{position: absolute; right: 0px; bottom: 0px; line-height: 21px; font-size: 18px; font-family: 'RobotoM', sans-serif;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price .sub .sub1{margin-right: 20px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price .sub .sub1:after{position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background-color: #adadad; width: 1px; height: 15px; content: '';}
.section-5 .section-5-wrap .swiper-container .swiper-slide .price-wrap .price .sub .sub2{margin-left: 20px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .chart-wrap{width: 100%; margin-top: 20px; height: 250px; border-bottom: 1px solid #e2e2e2;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .chart-wrap .canvas{width: 100%; height: 250px;}
.section-5 .section-5-wrap .swiper-container .swiper-slide .date{margin-top: 20px; display: block; width: 100%; height: 20px; text-align: right; color: #adadad; font-family: 'NanumSquareR', sans-serif; font-size: 17px;}
.section-5 .section-5-wrap .section-5-btn-wrap{width: 305px; height: 60px; margin: 40px auto;}
.section-5 .section-5-wrap .section-5-btn-wrap .btn-div{width: 100%; display: block; height: 60px;}
.section-5 .section-5-wrap .section-5-btn-wrap .btn-div .btn{width: 40px; height: 40px; display: block; margin-top: 10px;}
.section-5 .section-5-wrap .section-5-btn-wrap .btn-div .btn img{width: 100%;}
.section-5 .section-5-wrap .section-5-btn-wrap .btn-div .line{width: 200px; height: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #2f2f2f;}
.section-5 .section-5-wrap .section-5-btn-wrap .btn-div .line .number{width: 100%; text-align: center; display: block; position: absolute; left: 50%; transform: translateX(-50%);  bottom: -30px; line-height: 21px; font-size: 18px; color: #2f2f2f;}

.section-6{width: 100%; padding-top: 75px; background-color: #F6F7FA;}
.section-6 .section-6-wrap{width: 100%;}

.section-6 .section-6-wrap .section-6-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-6 .section-6-wrap .section-6-title2{display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-6 .section-6-wrap .tab{width: 100%; margin-top: 50px; height: 40px; text-align: center;}
.section-6 .section-6-wrap .tab li{width: 160px; height: 40px; margin-right: 10px; display: inline-block;}
.section-6 .section-6-wrap .tab li:last-child{margin-right: 0px;}
.section-6 .section-6-wrap .tab li a{width: 160px; height: 40px; display: block; line-height: 40px; text-align: center; border-radius: 27px; background-color: rgba(230, 230, 230, 0.5); font-family: 'NanumSquareEB', sans-serif; color: #716c6c; transition: 0.5s;}
.section-6 .section-6-wrap .tab li a.active{color: #191919; background-color: #e6e6e6; transition: 0.5s;}
.section-6 .section-6-wrap .tab li a:hover{color: #191919; background-color: #e6e6e6; transition: 0.5s;}
.section-6 .section-6-wrap .product{width: 1680px; height: 420px; margin: 100px auto;}
.section-6 .section-6-wrap .product li{width: 420px; height: 420px; float: left; border-right: 1px solid #C6C5C5; cursor: pointer;}
.section-6 .section-6-wrap .product li:last-child{border-right: none;}
.section-6 .section-6-wrap .product li .product-wrap{width: 100%; height: 100%; padding: 20px;}
.section-6 .section-6-wrap .product li .product-wrap .thumbnail-wrap{width: 300px; height: 320px; margin: 0 auto;}
.section-6 .section-6-wrap .product li .product-wrap .thumbnail-wrap img{width: 100%; height: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.section-6 .section-6-wrap .product li .product-wrap .recommand{position: absolute; width: 42px; height: 42px; border-radius: 50%; background-color: #716c6c; text-align: center; line-height: 42px; color: #fff; font-family: 'NanumSquareEB', sans-serif; font-size: 15px; right: 20px; bottom: 90px;}
.section-6 .section-6-wrap .product li .product-wrap .bottom-wrap{width: 100%; height: 80px;}
.section-6 .section-6-wrap .product li .product-wrap .bottom-wrap:after{content: ''; width: 100%; height: 1px; background-color: #C6C5C5; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.section-6 .section-6-wrap .product li .product-wrap .bottom-wrap .bottom-text{width: 100%; height: 40px; text-align: center; display: block; color: #2f2f2f; font-size: 'NanumSquareB', sans-serif; font-size: 16px; line-height: 40px;}
.section-6 .section-6-wrap .product li .product-wrap .bottom-wrap .bottom-text .price{color: #ff0000; font-size: 14px; font-family: 'RobotoB', sans-serif;}
.section-6 .section-6-wrap .product li .product-wrap .bottom-wrap .bottom-text .delivery{color: #adadad; font-size: 14px; margin-left: 5px;}


.section-7{width: 100%; height: 920px; background-color: #F6F7FA; z-index: 10;}
.section-7 .section-7-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-7 .section-7-title2{display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-7 .tab{width: 100%; text-align: center; margin-top: 40px; }
.section-7 .tab li{display: inline-block; width: 170px; height: 40px; margin-right: 20px;}
.section-7 .tab li:last-child{margin-right: 0;}
.section-7 .tab li a{width: 170px; height: 40px; line-height: 40px; display: block; border-radius: 27px; background-color: #e6e6e6; text-align: center; line-height: 40px; font-size: 18px; font-family: 'NanumSquareEB', sans-serif; color: #716c6c;}
.section-7 .section-7-chart-wrap{width: 1000px; height: 764px;  margin: 0 auto;}
.section-7 .section-7-chart-wrap .swiper-container{width: 100%; height: 556px; margin-top: 60px;}
.section-7 .section-7-chart-wrap .swiper-container canvas{width: 100%; height: 556px;}
.section-7 .section-7-chart-wrap .section-7-title{text-align: right; position: absolute; top: 50px; left: -388px; color: #2f2f2f; font-size: 64px; line-height: 70px;}
.section-7 .section-7-chart-wrap .section-7-title .sub{font-size: 36px; line-height: 41px; display: block; margin-top: 10px;}
.section-7 .section-7-chart-wrap .section-7-btn-wrap{width: 305px; height: 60px; margin:0 auto; margin-top: 10px;}
.section-7 .section-7-chart-wrap .section-7-btn-wrap .btn-div{width: 100%; display: block; height: 60px; }
.section-7 .section-7-chart-wrap .section-7-btn-wrap .btn-div .btn{width: 40px; height: 40px; display: block; margin-top: 10px;}
.section-7 .section-7-chart-wrap .section-7-btn-wrap .btn-div .btn img{width: 100%;}
.section-7 .section-7-chart-wrap .section-7-btn-wrap .btn-div .line{width: 200px; height: 1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #2f2f2f;}
.section-7 .section-7-chart-wrap .section-7-btn-wrap .btn-div .line .number{width: 100%; text-align: center; display: block; position: absolute; left: 50%; transform: translateX(-50%);  bottom: -30px; line-height: 21px; font-size: 18px; color: #2f2f2f;}
.section-7 .rate-btn-wrap{width: 180px; height: 40px; position: absolute; right: 7px; bottom: 45px;}
.section-7 .rate-btn-wrap a{width: 80px; height: 40px; float: right; display: block; text-align: center; line-height: 40px; background-color: #e6e6e6; border-radius: 10px; font-size: 14px; font-family: 'NanumSquareB', sans-serif; color: #2f2f2f; transition: 0.5s;}
.section-7 .rate-btn-wrap a:hover{background-color: #2f2f2f; color: #fff; transition: 0.5s;}
.section-7 .rate-btn-wrap a.active{background-color: #2f2f2f; color: #fff;}

.section-8{width: 100%; z-index: 9;}
.section-8 a{display: block; width: 100%; height: 35vh; overflow: hidden;}
.section-8 a img{display: block; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.section-9{width: 100%; padding-top: 80px; padding-bottom: 50px;}
.section-9 .section-9-wrap{width: 1250px; margin: 0 auto;}
.section-9 .section-9-wrap .content-div{width: 600px;}
.section-9 .section-9-wrap .content-div .title{padding-top: 15px; padding-bottom: 15px; display: block; width: 100%; line-height: 25px; color: #2f2f2f; font-size: 22px; font-family: 'NanumSquareEB', sans-serif;}
.section-9 .section-9-wrap .content-div .title .more{float: right; cursor: pointer; font-size: 16px; line-height: 18px; color: #9F9F9F; margin-top: 10px;}
.section-9 .section-9-wrap .content-div ul{width: 100%; height: 260px; border-top: 1px solid #ADADAD; border-bottom: 1px solid #ADADAD;}
.section-9 .section-9-wrap .content-div ul:after{content:''; width: 58px; height: 3px; position: absolute; left: 0; top: -2px; background-color: #716c6c;}
.section-9 .section-9-wrap .content-div ul li{width: 100%; height: 52px;}
.section-9 .section-9-wrap .content-div ul li a{width: 100%; height: 52px; display: block;}
.section-9 .section-9-wrap .content-div ul li a .content-title{display: block; line-height: 52px; width: 90%; float: left; font-size: 18px; color: #2f2f2f; text-align: left; overflow: hidden; padding-left: 5px;}
.section-9 .section-9-wrap .content-div ul li a .content-date{display: block; width: 10%; line-height: 52px; float: right; font-size: 14px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f; text-align: right; padding-right: 5px;}

.section-10{padding-top: 50px; padding-bottom: 92px; background-color: #fff;}
.section-10 .section-10-wrap{width: 1420px; margin: 0 auto;}
.section-10 .section-10-wrap .section-10-title{display: block; text-align: center; width: 100%; line-height: 24px; font-size: 20px; font-family: 'RobotoL', sans-serif; color: #2f2f2f;}
.section-10 .section-10-wrap .section-10-title img{vertical-align: middle; width: 26px; height: 26px; margin-right: 5px;}
.section-10 .section-10-wrap .section-10-title2{display: block; margin-top: 15px; text-align: center; width: 100%; line-height: 36px; font-size: 34px; font-family: 'NanumSquareR', sans-serif; color: #2f2f2f;}
.section-10 .section-10-wrap .seciont-10-content {width: 100%; margin-top: 50px;}
.section-10 .section-10-wrap .seciont-10-content .swiper-container{width: 100%; height: 220px;}
.section-10 .section-10-wrap .seciont-10-content .swiper-container .swiper-wrapper .swiper-slide{width: 220px; height: 220px; overflow: hidden;}
.section-10 .section-10-wrap .seciont-10-content .swiper-container .swiper-wrapper .swiper-slide a{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}
.section-10 .section-10-wrap .seciont-10-content .swiper-container .swiper-wrapper .swiper-slide a img{display: block; width: 100%;}
.section-10 .section-10-wrap .seciont-10-content a.prev{width: 40px; height: 40px; display: block; position: absolute; left: -80px; top: 50%; transform: translateY(-50%);}
.section-10 .section-10-wrap .seciont-10-content a.prev img{display: block; width: 100%;}
.section-10 .section-10-wrap .seciont-10-content a.next{width: 40px; height: 40px; display: block; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);}
.section-10 .section-10-wrap .seciont-10-content a.next img{display: block; width: 100%;}


tr.highlight{
	animation: highlight 1s;
}

tr.highlight-red{
	animation: highlight2 1s;
}

tr.highlight-blue{
	animation: highlight3 1s;
}

@keyframes highlight{
	from {background-color : #f0f0f0;}
	to {background-color : #fff;}
}

@keyframes highlight2{
	from {background-color : #ff0000;}
	to {background-color : #fff;}
}

@keyframes highlight3{
	from {background-color : #7b80ff;}
	to {background-color : #fff;}
}

/* 결과 타이틀 한 줄 표시 */
.section-4 .section-4-wrap .manual-div .manual-result .title { white-space: nowrap; height: auto; }

/* ===== 계산기 1 - 상품별 프리미엄 계산기 ===== */
/* 외부 래퍼: manual-div와 동일한 외관 */
.section-4 .section-4-wrap .cal1-wrap { width: 100%; border-radius: 20px; background-color: #fff; margin-top: 20px; overflow: hidden; }

/* 상단: 골드/실버 100% 시세 표시 행 */
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar { width: 100%; display: flex; border-bottom: 1px solid #ece7dc; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col { flex: 1; display: flex; align-items: center; gap: 24px; padding: 16px 30px; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col + .cal1-col { border-left: 1px solid #ece7dc; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-left { min-width: 110px; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-title { display: block; font-family: 'NanumSquareEB', sans-serif; font-size: 22px; color: #2f2f2f; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-pct { display: block; font-family: 'NanumSquareR', sans-serif; font-size: 14px; color: #aaa; margin-top: 4px; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-right { }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-label { display: block; font-family: 'NanumSquareR', sans-serif; font-size: 14px; color: #707070; margin-bottom: 4px; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-price { display: block; line-height: 1; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-col-price .cal1-price-num { font-family: 'RobotoB', sans-serif; font-size: 32px; color: #2f2f2f; letter-spacing: -0.05em; }
.section-4 .section-4-wrap .cal1-wrap .cal1-rate-bar .cal1-diff { font-family: 'RobotoM', sans-serif; font-size: 19px; margin-left: 4px; vertical-align: 8px; }
/* 상승/하락 색상 — 독립 클래스 */
.cal1-up { color: #d64545 !important; }
.cal1-dn { color: #5d72d8 !important; }

/* 하단: 입력 행 — manual-div 재사용 (margin/radius만 override) */
.section-4 .section-4-wrap .cal1-wrap .manual-div.cal1-bar { margin-top: 0; border-radius: 0; }

/* cal1 입력 필드 너비 override */
.section-4 .section-4-wrap .cal1-wrap #cal1_product_type { width: 110px; }
.section-4 .section-4-wrap .cal1-wrap #cal1_premium_type { width: 50px; }
.section-4 .section-4-wrap .cal1-wrap #cal1_premium { width: 80px; }
.section-4 .section-4-wrap .cal1-wrap #cal1_weight { width: 70px; }