.wrap-box-chart + .wrap-box-chart {margin-top: 2em;}
.wrap-chart {width: 100%; margin-top: 30px;}
/*
.wrap-chart.type-scroll-1,
.wrap-chart.type-scroll-2 {overflow-y: hidden; overflow-x: scroll;}
*/
.box-chart {width: 100%; height: 450px;}
.wrap-chart.type-scroll-1 .box-chart {min-width: 1600px;}
.wrap-box-chart .txt-tit {margin-top: 2em; font-size: 1.500em; font-weight: 700; color: #767676;}
.wrap-box-chart .txt-tit-info {margin-top: 16px !important; font-size: 14px; line-height: 1.3em !important; color: #767676;}
.box-chart .graph {width: 100%; height: 100%;}
.box-chart .domain {stroke: #fff; stroke-opacity: 0;}
.wrap-chart .info-tit {fill: #fff; }
.wrap-chart .info-tit-2 {font-size: 13px; fill: #fff; }
.wrap-chart .info-tit-3 {font-size: 20px; fill: #fff;  font-weight: 700;}
.wrap-chart .x_axis_txt {font-weight: 500;  font-size: 14px;}
.wrap-chart .y_axis_txt {font-weight: 500;  font-size: 15px;}
.wrap-chart .line-dot {stroke-width: 2; fill: #fff;}
.wrap-chart .line-none {display: none;}
.wrap-chart text {text-rendering: geometricPrecision;}
.wrap-chart .wrapLine {z-index: 1;}
.wrap-chart .lineChart { z-index: 1; fill: none; stroke-width: 1.5px;}
.wrap-chart .grid line { stroke: lightgrey; stroke-opacity: 0.7; }
.wrap-chart .grid .tick { stroke: lightgrey; }
.wrap-chart .wrap-dot .none { opacity: 0; }
.wrap-chart .line-info-box-1 .none,
.wrap-chart .line-info-box-2 .none { display: none; }
.wrap-chart .text-label text { font-size: 14px; fill: #767676;}
.wrap-chart .tick line { stroke-dasharray: 4,2; }
.wrap-chart .unit-txt { font-size: 15px; fill: #767676;}
.graph-tool-tip {position: absolute; text-align: center; padding: 7px 15px 5px; font-size: 13px;  background-color: #fff;; border: 1px solid #dcdcdc; pointer-events: none; fill: '#121212'; color: '#121212';}
.graph-tool-tip:after,
.graph-tool-tip:before {display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: transparent; border-style: solid; border-top-color: transparent; border-bottom-color: transparent; content: '';}
.graph-tool-tip:after {left: -9px; border-right-width: 6px; border-right-color: #fff; border-top-width: 4px; border-bottom-width: 4px;}
.graph-tool-tip:before {left: -10px; border-right-width: 7px; border-right-color: #cdcdcd; border-top-width: 5px; border-bottom-width: 5px;}
.graph-tool-tip.type-r:after {left: auto; right: -6px; border-right: none; border-left: 6px solid #fff;}
.graph-tool-tip.type-r:before {left: auto; right: -7px; border-right: none; border-left: 7px solid #cdcdcd;}

.graph-tool-tip.type-t {transform: translate(-50%, -25px);}
.graph-tool-tip.type-t:after {top: auto; bottom: -5px; left: 50%; transform: translate(-50%, 0); border-top: 6px solid #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: transparent;}
.graph-tool-tip.type-t:before {top: auto; bottom: -6px; left: 50%; transform: translate(-50%, 0); border-top: 6px solid #cdcdcd; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: transparent }

.graph-tool-tip-1 {position: absolute; padding: 10px 12px 12px; background-color: #fff;; border: 1px solid #dcdcdc; pointer-events: none; fill: '#121212'; color: '#121212';}
.graph-tool-tip-1 p {font-size: 13px; }
.graph-tool-tip-1 p.txt-num {margin-top: 3px; font-size: 15px; font-weight: 700;}
.graph-tool-tip-1:after,
.graph-tool-tip-1:before {display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: transparent; border-style: solid; border-top-color: transparent; border-bottom-color: transparent; content: '';}
.graph-tool-tip-1:after {left: -9px; border-right-width: 6px; border-right-color: #fff; border-top-width: 4px; border-bottom-width: 4px;}
.graph-tool-tip-1:before {left: -10px; border-right-width: 7px; border-right-color: #cdcdcd; border-top-width: 5px; border-bottom-width: 5px;}
.graph-tool-tip-1.type-r:after {left: auto; right: -6px; border-right: none; border-left: 6px solid #fff;}
.graph-tool-tip-1.type-r:before {left: auto; right: -7px; border-right: none; border-left: 7px solid #cdcdcd;}
@media all and (max-width:960px) {
  .wrap-box-chart .txt-tit {margin-left: 20px;}
  .wrap-chart.type-scroll-1 .box-chart {max-width: 1300px; padding-left: 20px; padding-right: 20px;}
  .wrap-chart.type-scroll-2 .box-chart {max-width: 900px; padding-left: 20px; padding-right: 20px;}
  .box-chart {width: 800px;}
}



.img-compare {overflow: hidden; position: relative;}
.img-compare p {margin: 0 !important;}
.img-compare img {display: block;}
.img-compare .img-compare__unit.second-img {overflow: hidden; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: right top;}
.img-compare .img-compare__unit.second-img span {display: none;}
.img-compare .compare-info {opacity: 0; position: absolute; top: 0; left: 0; transition: all .2s linear; width: 100%; height: 100%;}
.img-compare:not(.is-drag) .compare-info:hover {opacity: 1;}
.img-compare .compare-info:before {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); content: '';}
.img-compare .compare-info .compare-info__unit {position: absolute; top: 50%; z-index: 1; width: 115px; height: 42px; margin-top: -21px; font-size: 20px; color: #fff; line-height: 42px; text-align: center;}
.img-compare .compare-info .compare-info__unit:before {display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: rgba(255,255,255,.1); content: '';}
.img-compare .compare-info .compare-info__unit.txt-before {left: 0;}
.img-compare .compare-info .compare-info__unit.txt-after {right: 0;}
.img-compare .compare-info .compare-info__unit.txt-before:before {border-radius:0 21px 21px 0 ;}
.img-compare .compare-info .compare-info__unit.txt-after:before {border-radius: 21px 0 0 21px;}
.img-compare .compare-point {position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin-top: -27px; margin-left: -27px;}
.img-compare .compare-point:before,
.img-compare .compare-point:after {display: block; position: absolute; background-color: #fff; content: '';}
.img-compare .compare-point:before {top: -500px; left: 50%; width: 3px; height: 1000px; margin-left: -1.5px;}
.img-compare .compare-point:after {top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%;}
.img-compare .compare-point button {display: block; overflow: hidden; position: absolute; top: 50%; left: 50%; z-index: 1; width: 54px; height: 0; margin: -27px 0 0 -27px; padding-top: 54px; border: none; background-color: transparent; text-indent: -9999em; font-size: 0;}
.img-compare .compare-point button:before,
.img-compare .compare-point button:after {display: block; position: absolute; top: 50%; transform: rotate(45deg); width: 8px; height: 8px; margin-top: -4px; border-color: #f24c34; border-style: solid; content: '';}
.img-compare .compare-point button:before {left: 12px; border-width: 0 0 2px 2px;}
.img-compare .compare-point button:after {right: 12px; border-width: 2px 2px 0 0;}
@media (max-width: 980px) {
	.img-compare .compare-info {opacity: 1;}
	.img-compare.is-ing .compare-info,
	.img-compare.is-ing .compare-info:hover {opacity: 0;}
	.img-compare .compare-info .compare-info__unit { width: 70px; height: 36px; margin-top: -18px; font-size: 16px; color: #fff; line-height: 36px;}
	.img-compare .compare-point button {width: 42px; height: 0; margin: -21px 0 0 -21px; padding-top: 42px;}
	.img-compare .compare-point:before {width: 2px;}
	.img-compare .compare-point button:before,
	.img-compare .compare-point button:after {width: 6px; height: 6px; margin-top: -3px;}
	.img-compare .compare-point button:before {left: 12px;}
	.img-compare .compare-point button:after {right: 12px;}
	.img-compare .compare-point {width: 42px; height: 42px; margin-top: -21px; margin-left: -21px;}
}