.TwoColorTitle + .twoInPage {
  margin-top: 15px;
}

.bxSlider.twoInPage {
  margin-bottom: 30px;
}
@media (min-width: 0px) {
  .bxSlider.twoInPage {
    width: 100%;
  }
}
@media (min-width: 1100px) {
  .bxSlider.twoInPage {
    width: 100%;
  }
}
.bxSlider.twoInPage .bx-wrapper {
  display: inline-block;
}
@media (min-width: 0px) {
  .bxSlider.twoInPage .bx-wrapper {
    width: 720px;
  }
}
@media (min-width: 1100px) {
  .bxSlider.twoInPage .bx-wrapper {
    width: 810px;
  }
}
.bxSlider.twoInPage .bx-wrapper img {
  display: inline-block;
}

.arrowArea {
  width: 20px;
  display: inline-block;
  vertical-align: top;
}
.arrowArea.noRWD {
  line-height: 120px;
}
@media (min-width: 0px) {
  .arrowArea:not(.noRWD) {
    height: 124px;
    line-height: 124px;
  }
}
@media (min-width: 1100px) {
  .arrowArea:not(.noRWD) {
    height: 160px;
    line-height: 160px;
  }
}
.arrowArea.right, .arrowArea.next, .arrowArea.btnright {
  margin-left: -4px;
}
.arrowArea .arrow {
  width: 20px;
  height: 31px;
  display: inline-block;
  vertical-align: middle;
  background: no-repeat center center;
}
.arrowArea .arrow a {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}
.arrowArea .arrow.left, .arrowArea .arrow.pre, .arrowArea .arrow.btnleft {
  background-image: url(../../../../bank/images/esunbank/public/arrow_left_gray.jpg);
}
.arrowArea .arrow.right, .arrowArea .arrow.next, .arrowArea .arrow.btnright {
  background-image: url(../../../../bank/images/esunbank/public/arrow_right_gray.jpg);
}

.posterArea, contentSlider {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  	/*@include _break("pad") {
  		height: 124px;
  	}
  
  	@include _break("desktop") {
  		height: 160px;
  	}*/
}
.posterArea .page .perPoster, contentSlider .page .perPoster {
  display: inline-block;
  text-align: center;
  margin-left: -4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
@media (min-width: 0px) {
  .posterArea .page .perPoster, contentSlider .page .perPoster {
    padding: 0;
    width: 360px;
    /*height: 124px;*/
  }
}
@media (min-width: 1100px) {
  .posterArea .page .perPoster, contentSlider .page .perPoster {
    padding: 10px 0;
    width: 405px;
    /*height: 160px;*/
  }
}
.posterArea .page .perPoster:first-of-type, contentSlider .page .perPoster:first-of-type {
  margin-left: 0;
}
.posterArea .page .perPoster:last-of-type, contentSlider .page .perPoster:last-of-type {
  border-left: 1px solid #cbdedd;
}

img.circle {
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  behavior: url(/bank/js/esunbank/PIE.htc);
}

.Button {
  display: block;
  line-height: 30px;
  margin: 0 auto;
  border-bottom: 2px solid #999999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  behavior: url(/bank/js/esunbank/PIE.htc);
}
.Button.cerise, .Button.dark_grey {
  color: #e6e6e6;
}
.Button.cerise {
  background: #cc3333;
  border-color: #991515;
}
.Button.dark_grey {
  background: #999999;
  border-color: #626262;
}

.circleArea {
  position: relative;
}
.circleArea .imageArea {
  margin-left: auto;
  margin-right: auto;
}
.circleArea .imageArea.w140 {
  width: 140px;
  height: 140px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.circleArea .imageArea.w100 {
  width: 100px;
  height: 100px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.circleArea.grid {
  width: 100%;
  height: 160px;
}
.circleArea.sample {
  display: inline-block;
  width: 160px;
  height: 160px;
  vertical-align: middle;
}
.circleArea.gridList {
  width: 130px;
  height: 130px;
  display: inline-block;
  vertical-align: middle;
}

.perCircleCol {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-right: 1px solid #dddddd;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
  position: relative;
}
.perCircleCol h3 {
  font-size: 18px;
  line-height: 18px;
  padding-bottom: 10px;
  color: #009e96;
}
.perCircleCol h3.w160 {
  width: 160px;
  margin: 0 auto;
  line-height: 22px;
  min-height: 80px;
}
.perCircleCol h3 a {
  color: inherit;
}
.perCircleCol .content {
  line-height: 18px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.perCircleCol .content.h90 {
  height: 90px;
}
.perCircleCol .content p {
  line-height: inherit;
}
.perCircleCol .content.alignLeft {
  margin: 0;
  text-align: left;
  padding-left: 25px;
}
.perCircleCol .content .splitArea {
  text-align: center;
}
.perCircleCol .content .splitArea > *:not(:first-child) {
  margin-left: -4px;
}
.perCircleCol .content .splitArea .split {
  padding: 0 8px;
}
.perCircleCol .buttonArea {
  display: inline-block;
}
.perCircleCol .buttonArea .btns {
  margin-left: 5px;
}
.perCircleCol .buttonArea .btns.smallBtn {
  width: 80px;
}
.perCircleCol .buttonArea .btns:first-of-type {
  margin-left: 0;
}

.p_grid3, .p_grid4, .P_list {
  padding: 0 20px;
}
.p_grid3 h2, .p_grid4 h2, .P_list h2 {
  font-size: 18px;
  line-height: 18px;
  padding-bottom: 15px;
}
.p_grid3 h2:not(.mt0), .p_grid4 h2:not(.mt0), .P_list h2:not(.mt0) {
  margin-top: 40px;
}

.p_grid3 .circleArea.grid {
  margin-bottom: 20px;
}
.p_grid3 .perCircleCol {
  width: 33.33%;
  padding-bottom: 15px;
}
.p_grid3 .content {
  width: 83.92857%;
}

.p_grid4 .perCircleCol {
  width: 25%;
}
.p_grid4 .perCircleCol:nth-of-type(4n+1) {
  margin-left: 0;
}
.p_grid4 .content {
  margin: 0 20px;
}

.P_list .perCircleCol {
  height: 130px;
  text-align: left;
  border: none;
}
@media (min-width: 0px) {
  .P_list .perCircleCol {
    width: 760px;
  }
}
@media (min-width: 1100px) {
  .P_list .perCircleCol {
    width: 850px;
  }
}
.P_list .circleContent {
  display: inline-block;
  text-align: left;
  height: 65px;
  vertical-align: middle;
}
@media (min-width: 0px) {
  .P_list .content {
    width: 340px;
  }
}
@media (min-width: 1100px) {
  .P_list .content {
    width: 430px;
  }
}
.P_list .buttonArea {
  position: absolute;
  right: 8px;
  line-height: 130px;
}
.P_list .buttonArea .btns {
  line-height: 18px;
  vertical-align: middle;
}
.P_list .buttonArea .btns.midBtn {
  width: 100px;
  padding: 9px 0 8px;
}

.sampleSliderArea h2 {
  font-size: 18px;
  color: black;
  line-height: 18px;
}
.sampleSliderArea .posterArea {
  height: 160px;
}

.perSample {
  display: inline-block;
  margin-left: -4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 120px;
  vertical-align: top;
}
@media (min-width: 0px) {
  .perSample {
    width: 360px;
  }
}
@media (min-width: 1100px) {
  .perSample {
    width: 405px;
  }
}
.perSample:first-of-type {
  margin-left: 0;
}
.perSample a {
  text-decoration: underline;
  color: #019d99;
}
.perSample .imageArea {
  display: inline-block;
}
.perSample .imageArea.w160 {
  width: 160px;
  height: 100%;
}
.perSample .imageArea.w160 a {
  width: 100%;
}
.perSample .imageArea.w160 img {
  width: 140px;
}
.perSample .content {
  color: black;
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  margin-left: -4px;
}
@media (min-width: 0px) {
  .perSample .content {
    width: 185px;
  }
}
@media (min-width: 1100px) {
  .perSample .content {
    width: 230px;
  }
}
.perSample .content h3 {
  font-size: 16px;
  line-height: 16px;
  padding-bottom: 10px;
}
.perSample .content p {
  line-height: 18px;
}
