/***************************************************************************************  
      Main page style css
*/
section h2 {
  font-size: var(--bis-font-size-32); font-weight: 700; color: var(--bis-color-black); text-align: left;
}

section.section01 {
  position: relative;
  width: 100%; height: 100vh;
  margin: 0px auto 0;
}
section.section02 {
  width: 1400px;
  margin: 0px auto 0;
}
section.section02 h2 {
  margin: 50px 0;
  text-align: center;
}
/*********************************************************************************************
                        Tab Style css
*****************************/
section.section02 .tab {
  width: 478px; height: 52px; margin: 0 auto;
}
section.section02 .tab > ul > li {
  float: left;
  width: 158px;
  font-size: var(--bis-font-size-15); font-weight: 400; text-align: center; color: var(--bis-color-black); line-height: 50px;
  cursor: pointer;
}
section.section02 .tab > ul li.tablinks {
  border: 1px solid var(--bis-color-black); border-left: 0px;
}
section.section02 .tab > ul li.tablinks:first-child {
  border-left: 1px solid var(--bis-color-black);
}
section.section02 .tab > ul li.tablinks:hover {
  background-color: var(--bis-color-light-silver);
}
section.section02 .tab > ul li.tablinks.active {
  background-color: var(--bis-color-blue);
  border-color: var(--bis-color-blue);
  color: var(--bis-color-white);
  width: 159px; margin-left: -1px;
}
section.section02 .tabcontent {
  display: block;
  width: 100%;
}


/****************** Travel Box List */
.travel-list {
  margin-top: 50px;
}
.travel-list li {
  float: left;
  width: var(--bis-boxList-width-fourth);
  margin-left:2%;
  cursor: pointer;
}
.travel-list li:first-child {
  margin-left:0%;
}
.travel-list li .travel-box {
  position: relative;
}
.travel-list li .travel-box figure {
  position: relative;
  height: 220px;
  border-radius: 5px; 
  overflow: hidden;
}
.travel-list li .travel-box figure img {
  vertical-align: middle;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.travel-list li .travel-box figure .view-more {
  height: 0px; font-size: 0;
}
.travel-list li .travel-box figure .view-more > span {
  position: absolute; top: 11px; left: 50px;
}
.travel-list li .travel-box figure .view-more > span:nth-child(2) {
  transform: rotate( 90deg )
}
.travel-list li .text-cont h3 {
  font-size: var(--bis-font-size-22); font-weight: 700; color: #000; text-align: left;
  margin-top: 20px;
}
.travel-list li .text-cont p {
  font-size: var(--bis-font-size-15); font-weight: 400; color: #000; text-align: left; line-height: 140%;
  margin-top: 10px;
}
.travel-list li .tag-wrap {
  margin-top: 20px;
  font-size: 0;
}
.travel-list li .tag-wrap button.keyword {
  margin-left: 2%;
}
.travel-list li .tag-wrap button.keyword:first-child {
  margin-left: 0%;
}


.travel-list li:hover .travel-box figure:after {
  content: "";
  display: block;
  position: absolute; top: 0px; left: 0px;
  width: 100%; height: 230px;
  background-color: rgba(0, 0, 0, .5); border-radius: 5px;
}
.travel-list li:hover .travel-box figure .view-more {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-70%, -50%);
  height: 21px; line-height: 21px; 
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-white);
}
.travel-list li:hover .travel-box figure .view-more:after {
  content: "";
  position: absolute; top: 0; left: 42px;
  width: 21px; height: 21px; border-radius: 100%;
  border: 1px solid var(--bis-color-white);
}
.travel-list li:hover .travel-box figure .view-more > span {
  width: 7px; height: 1px;
  background-color: var(--bis-color-white);
}
.travel-list li:hover h3 {
  color: var(--bis-color-blue);
}
.travel-list li .tag a.tag-travel-link:hover {
  border-color: var(--bis-color-blue);
  color: var(--bis-color-blue);
}

/****************** Card Box List */
.card-list {
  margin-top: 50px;
}
.card-list li {
  float: left;
  width: var(--bis-boxList-width-fifth);
  margin-left: 2%;
  cursor: pointer;
}
.card-list li:first-child {
  margin-left:0%;
}
.card-list li .card-box {
  position: relative;
}
.card-list li .card-box figure {
  position: relative;
  border-radius: 10px 10px 0px 0px;
}
.card-list li:nth-child(1) .card-box figure {
  background-color: #D5D9FF;
}
.card-list li:nth-child(2) .card-box figure {
  background-color: #FFC5CA;
}
.card-list li:nth-child(3) .card-box figure {
  background-color: #E5E5E5;
}
.card-list li:nth-child(4) .card-box figure {
  background-color: #B7D7F7;
}
.card-list li:nth-child(5) .card-box figure {
  background-color: #FFEAD5;
}
.card-list li .card-box .card-box-cont {
  display: block;
  height: 127px;
  border:1px solid var(--bis-color-light-gray); border-top: 0px;
  border-radius: 0px 0px 10px 10px;
}
.card-list li .card-box .card-box-cont h3 {
  font-size: var(--bis-font-size-18); font-weight: 700; color: var(--bis-color-black); text-align: left;
  padding-top: 20px; padding-left: 30px;
}
.card-list li .card-box .card-box-cont p {
  font-size: var(--bis-font-size-12); font-weight: 400; color: var(--bis-color-black); 
  text-align: left; line-height: 140%;
  padding: 15px 20px 0 30px;
}

.card-list li:hover .card-box figure:before {
  content: "";
  position: absolute; top: 0px; left: 0px;
  width: 100%; height: 248px;
  background-color: rgba(0, 0, 0, .15);
  border-radius: 10px 10px 0px 0px;
}
.card-list li:hover .card-box .card-box-cont {
  background-color: var(--bis-color-light-silver);
}
.card-list li:hover .card-box .card-box-cont h3 {
  color: var(--bis-color-blue);
}

/****************** Insurance Box List */
.insurance-list {
  margin-top: 50px;
}
.insurance-list li {
  float: left;
  width: var(--bis-boxList-width-fourth);
  margin-left:2%;
  cursor: pointer;
}
.insurance-list li:first-child {
  margin-left:0%;
}
.insurance-list li .insur-box {
  position: relative;
}
.insurance-list li .insur-box figure {
  position: relative;
  height: 230px;
  border-radius: 5px; 
  overflow: hidden;
}
.insurance-list li .insur-box figure  img {
  vertical-align: middle;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.insurance-list li .insur-box figure .view-more {
  height: 0px; font-size: 0;
}
.insurance-list li .insur-box figure .view-more > span {
  position: absolute; top: 11px; left: 50px;
}
.insurance-list li .insur-box figure .view-more > span:nth-child(2) {
  transform: rotate( 90deg )
}
.insurance-list li .insur-box .insur-box-cont {
  margin-top: 20px;
}
.insurance-list li .insur-box .insur-box-cont h3 {
  font-size: var(--bis-font-size-18); font-weight: 700; color: var(--bis-color-black); text-align: left;
  padding-top: 10px;
}
.insurance-list li .insur-box .insur-box-cont p {
  font-size: var(--bis-font-size-12); font-weight: 400; color: var(--bis-color-black); 
  text-align: left; line-height: 140%;
  padding-top: 10px;
}
.insurance-list li .insur-box .insur-box-cont span.insurance {
  line-height: 33px; padding: 10px 20px;
  font-size: var(--bis-font-size-12); font-weight: 400;
  border: 1px solid var(--bis-color-light-gray);
}

.insurance-list li:hover .insur-box figure:after {
  content: "";
  display: block;
  position: absolute; top: 0px; left: 0px;
  width: 100%; height: 230px;
  background-color: rgba(0, 0, 0, .5); border-radius: 5px;
}
.insurance-list li:hover .insur-box figure .view-more {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-90%, -50%);
  height: 21px; line-height: 21px;
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-white);
}
.insurance-list li:hover .insur-box figure .view-more:after {
  content: "";
  position: absolute; top: 0; left: 42px;
  width: 21px; height: 21px; border-radius: 100%;
  border: 1px solid var(--bis-color-white);
}
.insurance-list li:hover .insur-box figure .view-more > span {
  width: 7px; height: 1px;
  background-color: var(--bis-color-white);
}
.insurance-list li:hover .insur-box .insur-box-cont h3 {
  color: var(--bis-color-blue);
}
.insurance-list li:hover .insur-box .insur-box-cont span.insurance {
  border: 1px solid var(--bis-color-blue);
  color: var(--bis-color-blue);
}



/*********************************************************************************************
                        section03 Style css
*****************************/
section.section03 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
.pick-list {
  margin-top: 20px;
}
.pick-list li {
  width: var(--bis-boxList-width-fourth);
  margin-left: 2%;
  cursor: pointer;
}
.pick-list li:first-child {
  margin-left: 0%;
}
.pick-list li .pick-box {
  position: relative;
}
.pick-list li .pick-box figure {
  height: 500px;
  overflow: hidden;
  border-radius: 10px;
}
.pick-list li .pick-box figure img {
  border-radius: 0px;
}
.pick-list li .pick-box figure:after {
  content: "";
  position: absolute; top: 0px; left: 0px;
  background-color: rgba(1, 111, 255, .38);
  width: 100%; height: 100%;
  border-radius: 10px;
}
.pick-list li .pick-box .pick-box-cont {
  position: absolute; top: 220px; left: 0px;
  padding: 0 50px; text-align: left;
}
.pick-list li .pick-box .pick-box-cont span.area-box {
  display: inline-flex;
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-white);
  padding: 8px 25px;
  border:1px solid var(--bis-color-white);
  border-radius: 5px;
}
.pick-list li .pick-box .pick-box-cont h3 {
  font-size: var(--bis-font-size-28); font-weight: 700; color: var(--bis-color-white); line-height: 120%;
  padding-top: 25px;
}
.pick-list li .pick-box .pick-box-cont .tag {
  margin-top: 50px;
}
.pick-list li .pick-box .pick-box-cont .tag a.tag-box-link {
  display: inline-block;
  font-size: var(--bis-font-size-12); font-weight: 400; color: var(--bis-color-white); line-height: 140%;
  margin-right: 10px;
}
.pick-list li .pick-box .pick-box-cont .tag a.tag-box-link:hover {
  color: var(--bis-color-yellow);
}

.pick-list li:hover .pick-box figure:after {
  background-color: rgba(0, 0, 0, .57);
}
.pick-list li:hover .pick-box .pick-box-cont span.area-box {
  border-color: var(--bis-color-yellow);
  color: var(--bis-color-yellow);
}
.pick-list li:hover .pick-box .pick-box-cont h3 {
  color: var(--bis-color-yellow);
}


/*********************************************************************************************
                        section04 Style css
*****************************/
section.section04 {
  display: block;
  width: 1410px;
  margin: 50px auto 0;
}
section.section04 h2 {
  padding-left: 5px;
}
.course-list {
  padding: 20px 5px 0;
}
ul.course-list > li {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .15);
  border-radius: 10px;
  width: var(--bis-boxList-width-fourth);
  margin-left: 2%;
  cursor: pointer;
}
.course-list li:first-child {
  margin-left: 0%;
}
.course-list li .course-box {
  position: relative;
  padding: 20px;
}
.course-list li .course-box figure {
  position: relative;
  height: 190px;
  overflow: hidden;
}
.course-list li .course-box figure:after {
  content: "";
  position: absolute; top: 0px; left: 0px;
  height: 100%; width: 100%;
  background-color: rgba(0, 0, 0, .0);
}
.course-list li .course-box figure img {
  vertical-align: middle;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.course-list li .course-box figure .view-more {
  height: 0px; font-size: 0;
}
.course-list li .course-box figure .view-more > span {
  position: absolute; top: 11px; left: 50px;
}
.course-list li .course-box figure .view-more > span:nth-child(2) {
  transform: rotate( 90deg )
}
.course-list li .course-box .course-box-list h3 {
  font-size: var(--bis-font-size-18); font-weight: 700; color: var(--bis-color-black);
  line-height: 120%;
  margin-top: 30px;
}
.course-list li .course-box .course-box-list p {
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-black);
  line-height: 140%;
  padding-top: 10px;
}
.course-list li .course-box .tag-box-list {
  margin:30px 0 0; padding: 15px 0 0;
  border-top: 1px solid var(--bis-color-light-gray);
}
.course-list li .course-box .tag-box-list a.tag-box-link {
  display: inline-block;
  font-size: var(--bis-font-size-12); font-weight: 400; color: #6E9FB2; line-height: 110%;
  margin-right: 10px; margin-top: 5px;
}
.course-list li .course-box .user-box-list {
  margin:20px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--bis-color-light-gray);
}
.course-list li .course-box .user-box-list > ul > li {
  float: left;
  font-size: 0;
}
.course-list li .course-box .user-box-list > ul > li span {
  display: inline-block;
  vertical-align: top;
}
.course-list li .course-box .user-box-list > ul > li span.user-profile {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
}
  .course-list li .course-box .user-box-list > ul > li span.user-profile+span.user-id {
    width: calc(100% - 46px);
  }
.course-list li .course-box .user-box-list > ul > li span.user-id {
  font-size: var(--bis-font-size-12); font-weight: 800; color: var(--bis-color-black);
  line-height: 22px; padding-top: 7px; padding-left: 10px;
}
.course-list li .course-box .user-box-list > ul > li.icon-like {
  float: right;
  position: relative;
  padding-left: 30px;
}
.course-list li .course-box .user-box-list > ul > li.icon-like:after {
  content: "";
  position: absolute; top: 0px; left: 0px;
  width: 1px; height: 22px;
  background-color: var(--bis-color-light-gray);
}
.course-list li .course-box .user-box-list > ul > li.icon-like span i.icon-heart {
  display: inline-block;
  background: url('../images/common/icon-heart.svg') no-repeat;
  width: 20px; height: 18px;
  margin-top: 2px;
}
.course-list li .course-box .user-box-list > ul > li.icon-like span i.icon-heart:active, 
.course-list li .course-box .user-box-list > ul > li.icon-like span i.icon-heart.active {
  background: url('../images/common/icon-heart-active.svg') no-repeat;
}
.course-list li .course-box .user-box-list > ul > li.icon-like span.like-number {
  font-size: var(--bis-font-size-12); font-weight: 400; color: var(--bis-color-black);
  line-height: 22px; padding-left: 10px;
}

.course-list > li:hover {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .55);
}
.course-list li:hover .course-box figure:after {
  background-color: rgba(0, 0, 0, .57);
}
.course-list li:hover .course-box figure .view-more {
  position: absolute; top: 43%; left: calc(50% - 26px); z-index: 2;
  height: 21px; line-height: 21px;
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-white);
}
.course-list li:hover .course-box figure .view-more:after {
  content: "";
  position: absolute; top: 0; left: 42px;
  width: 21px; height: 21px; border-radius: 100%;
  border: 1px solid var(--bis-color-white);
}
.course-list li:hover .course-box figure .view-more > span {
  width: 7px; height: 1px;
  background-color: var(--bis-color-white);
}
.course-list li:hover .course-box .course-box-list h3 {
  color: var(--bis-color-sky);
}
.course-list li .course-box .tag-box-list a.tag-box-link:hover {
  color: var(--bis-color-blue);
}


/*********************************************************************************************
                        section05 Style css
*****************************/
section.section05 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
section.section05 .banner-travel {
  width: 100%; height: 280px;
}
section.section05 .banner-travel .PcVer {
  border-radius: 5px;
  overflow: hidden;
}
section.section05 .banner-travel .MobileVer {
  display: none;
}


/*********************************************************************************************
                        section06 Style css
*****************************/
section.section06 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
.card-md-list {
  padding-top: 30px;
}
.card-md-list li {
  padding-top: 20px;
  width: var(--bis-boxList-width-eighth);
  margin-left: 2%;
  transition: .5s;
  cursor: pointer;
}
.card-md-list li:first-child {
  margin-left: 0%;
}
.card-md-list li figure {
  height: 232px;
}
.card-md-list li figure img {
  height: 100%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
  border-radius: 10px;
}
.card-md-list li .card-md-box .md-cont {
  position: relative;
  height: 70px; vertical-align: top;
  margin-top: 30px;
}
.card-md-list li .card-md-box .md-cont span {
  float: right;
  display: block;
  font-size: var(--bis-font-size-12); font-weight: 800; color: var(--bis-color-black);
}
.card-md-list li .card-md-box .md-cont h3 {
  font-size: var(--bis-font-size-18); font-weight: 800; color: var(--bis-color-black);
  line-height: 120%;
  padding-top: 25px;
}
.card-md-list li .card-md-box .md-cont h3:after {
  content: "";
  position: absolute; top: 5px; left: 0px; z-index: -1;
  width: 54px; height: 54px;
  border-radius: 100%;
  background-color: var(--bis-color-light-silver);
  transition: .5s;
}

.card-md-list li:hover {
  padding-top: 0px;
  transition: .5s;
}
.card-md-list li:hover .card-md-box .md-cont h3:after {
  background-color: rgba(0, 160, 223, .25);
  transition: .5s;
}


/*********************************************************************************************
                        section07 Style css
*****************************/
section.section07 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
section.section07 > ul.PcVer {
  display: block;
}
section.section07 > ul.MobileVer {
  display: none;
}
section.section07 > ul > li {
  float: left;
  width: 49%;
  margin-left: 2%;
  font-size: 0;
}
section.section07 > ul > li:first-child {
  margin-left: 0px;
}
section.section07 > ul > li img {
  border-radius: 5px;
}


/*********************************************************************************************
                        section08 Style css
*****************************/
section.section08 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
section.section08 ul.content-list {
  margin: 0px;
}
.content-list li {
  width: var(--bis-boxList-width-fourth);
  margin-left: 2%;
  cursor: pointer;
}
.content-list li:first-child {
  margin-left: 0%;
}
.content-list li .content-box figure {
  position: relative;
  height: 220px;
  border-radius: 5px;
  overflow: hidden;
}
.content-list li .content-box figure img {
  vertical-align: middle;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.content-list li .content-box figure .view-more {
  height: 0px; font-size: 0;
}
.content-list li .content-box figure .view-more > span {
  position: absolute; top: 11px; left: 50px;
}
.content-list li .content-box figure .view-more > span:nth-child(2) {
  transform: rotate( 90deg )
}
.content-list li .content-box .content-box-cont {
  margin-top: 20px;
}
.content-list li .content-box .content-box-cont span.category {
  font-size: var(--bis-font-size-12); font-weight: 800; color: var(--bis-color-blue);
}
.content-list li .content-box .content-box-cont h3 {
  font-size: var(--bis-font-size-18); font-weight: 700; color: var(--bis-color-black);
  line-height: 120%;
  margin-top: 20px;
}
.content-list li .content-box .content-box-cont p {
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-black);
  line-height: 140%;
  margin-top: 10px;
}


.content-list li:hover .content-box figure:after {
  content: "";
  display: block;
  position: absolute; top: 0px; left: 0px;
  width: 100%; height: 220px;
  background-color: rgba(0, 0, 0, .5); border-radius: 5px;
}
.content-list li:hover .content-box figure .view-more {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-70%, -50%);
  height: 21px; line-height: 21px;
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-white);
}
.content-list li:hover .content-box figure .view-more:after {
  content: "";
  position: absolute; top: 0; left: 42px;
  width: 21px; height: 21px; border-radius: 100%;
  border: 1px solid var(--bis-color-white);
}
.content-list li:hover .content-box figure .view-more > span {
  width: 7px; height: 1px;
  background-color: var(--bis-color-white);
}
.content-list li:hover .content-box figure .view-more > span:nth-child(2) {
    transform: rotate( 90deg );
}
.content-list li:hover .content-box .content-box-cont h3 {
  color: var(--bis-color-sky);
}


/*********************************************************************************************
                        section09 Style css
*****************************/
section.section09 {
  display: block;
  width: 1400px;
  margin: 50px auto 0;
}
section.section09 .insurance-box-body {
  width: auto;
  border: 1px solid var(--bis-color-light-gray);
  border-radius: 10px ;
  padding: 30px; padding-left: 50px;
}
#open-nav-label, #close-nav-label {
  display: none;
}
/**************************** Tab Button style css */
section.section09 .insurance-box-body .tab-menu-area {
  float: left;
  width: 300px;
  font-size: var(--bis-font-size-15);
}
section.section09 .insurance-box-body input[name=tab-control] {
  display: none;
}
section.section09 .insurance-box-body .tab-menu-area ul li label {
  display: block;
  position: relative;
  font-size: var(--bis-font-size-22); font-weight: 700; line-height: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--bis-color-light-gray);
  cursor: pointer;
}
section.section09 .insurance-box-body .tab-menu-area ul li label:after {
  content: "";
  position: absolute; top: 28px; right: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--bis-color-light-gray);
  border-radius: 100%;
  background: url('../images/common/icon-arrow-blue.png') center no-repeat;
  background-size: 14px 14px;
}
section.section09 .insurance-box-body .tab-menu-area ul li label span {
  font-size: 0; height: 0px; width: 0px;
}

section.section09 .insurance-box-body .tab-menu-area ul li:hover {
  color: var(--bis-color-blue);
}
/********************************************************** input checked */
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(1):checked ~ .tab-menu-area ul li:nth-child(1) > label,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(2):checked ~ .tab-menu-area ul li:nth-child(2) > label,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(3):checked ~ .tab-menu-area ul li:nth-child(3) > label {
  color: var(--bis-color-blue);
  font-size: var(--bis-font-size-32); font-weight: 700; line-height: 100%;
  padding-top: 57px;
}
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(1):checked ~ .tab-menu-area ul li:nth-child(1) > label:after,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(2):checked ~ .tab-menu-area ul li:nth-child(2) > label:after,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(3):checked ~ .tab-menu-area ul li:nth-child(3) > label:after {
  display: none;
}
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(1):checked ~ .tab-menu-area ul li:nth-child(1) > label span:before,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(2):checked ~ .tab-menu-area ul li:nth-child(2) > label span:before,
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(3):checked ~ .tab-menu-area ul li:nth-child(3) > label span:before {
  display: block;
  position: absolute; top: 20px; left: 0px; z-index: 1;
  color: var(--bis-color-blue);
  padding: 7px 20px;
  border-radius: 5px; border: 1px solid var(--bis-color-blue);
  font-size: var(--bis-font-size-12); font-weight: 500; line-height: 100%;
}

section.section09 .insurance-box-body .tab-menu-area ul li label span.traveler:before {
  content: "여행자 보험";
}
section.section09 .insurance-box-body .tab-menu-area ul li label span.enterprise:before {
  content: "기업 보험";
}
section.section09 .insurance-box-body .tab-menu-area ul li label span.fire:before {
  content: "화재 보험";
}
section.section09 .insurance-box-body .tab-menu-area ul li label span.liability:before {
  content: "배상책임 보험";
}
section.section09 .insurance-box-body .tab-menu-area ul li label span.pet:before {
  content: "펫 보험";
}
section.section09 .insurance-box-body .tab-menu-area ul li label span.detriment:before {
  content: "상해 보험";
}



/**************************** Tab Contents style css */
section.section09 .insurance-box-body .tab-body-area {
  float: left;
  width: 968px; height: 420px;
  margin-left: 50px;
  border-radius: 5px;
}
section.section09 .insurance-box-body .tab-body-area .tab-cont.banner01 {
  background:#E2E5FF url('../images/main/insurance-tab-image-01.png') no-repeat;
  background-size: cover;
  width: 90%; height: 100%;
  padding-left: 10%;
}
section.section09 .insurance-box-body .tab-body-area .tab-cont.banner02 {
  background:#E2FFFF url('../images/main/insurance-tab-img-01.png') no-repeat;
  background-size: cover;
  width: 90%; height: 100%;
  padding-left: 10%;
}
section.section09 .insurance-box-body .tab-body-area .tab-cont.banner03 {
  background:#FCFCEE url('../images/main/insurance-tab-img-01.png') no-repeat;
  background-size: cover;
  width: 90%; height: 100%;
  padding-left: 10%;
}
section.section09 .insurance-box-body .tab-body-area .tab-cont h2 {
  padding-top: 60px;
  width: 35%;
  font-size: var(--bis-font-size-48); font-weight: 700; color: var(--bis-color-black);
}
section.section09 .insurance-box-body .tab-body-area .tab-cont p {
  padding-top: 30px;
  width: 35%;
  font-size: var(--bis-font-size-22); font-weight: 400; color: var(--bis-color-black);
}
section.section09 .insurance-box-body .tab-body-area .tab-cont {
  display: none;
  line-height: 1.4;
}
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(1):checked ~ .tab-body-area .tab-cont:nth-child(1) {
  display: block;
}
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(2):checked ~ .tab-body-area > .tab-cont:nth-child(2) {
  display: block;
}
section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(3):checked ~ .tab-body-area > .tab-cont:nth-child(3) {
  display: block;
}


/*********************************************************************************************
                        section10 Style css
*****************************/
section.section10 {
  display: block;
  width: 1400px;
  margin: 50px auto 100px;
}
section.section10 h2 {
  margin-bottom: 15px;
}
section.section10 .new-service-area .new-box-list {
  display: inline-block;
  width: 53%;
}
section.section10 .new-service-area .new-box-list > ul {
  border-bottom: 1px solid var(--bis-color-light-gray);
}
section.section10 .new-service-area .new-box-list > ul > li {
  float: left;
  font-size: var(--bis-font-size-15); font-weight: 400; color: var(--bis-color-black);
  padding: 15px 10px;
}
section.section10 .new-service-area .new-box-list > ul > li:last-child {
  float: right;
}
section.section10 .new-service-area .new-box-list > ul > li a:hover {
  color: var(--bis-color-blue);
}

section.section10 .new-service-area .service-box-list {
  display: inline-block;
  width: 44%;
  margin-left: 3%;
}
section.section10 .new-service-area .service-box-list > ul > li {
  float: left;
  width: var(--bis-boxList-width-fourth);
  margin:0 0 0 2%;
  cursor: pointer;
}
section.section10 .new-service-area .service-box-list > ul > li:first-child {
  margin-left: 0%;
}
section.section10 .new-service-area .service-box-list > ul > li .circle {
  width: 146px; height: 116px;
  background-color: var(--bis-color-light-silver);
  border-radius: 100%;
  padding: 30px 0 0 0;
  transition: .5s;
}
section.section10 .new-service-area .service-box-list > ul > li .circle i {
  display: block;
  background-size: 100%;
  width: 42px; height: 42px;
  margin: 0px auto 11px;
}
section.section10 .new-service-area .service-box-list > ul > li .circle.kakao i {
  background: url('../images/common/icon-kakao.png') no-repeat;
}
section.section10 .new-service-area .service-box-list > ul > li .circle.tel i {
  background: url('../images/common/icon-call.png') no-repeat;
}
section.section10 .new-service-area .service-box-list > ul > li .circle.inquiry i {
  background: url('../images/common/icon-inquiry.png') no-repeat;
}
section.section10 .new-service-area .service-box-list > ul > li .circle.email i {
  background: url('../images/common/icon-email.png') no-repeat;
}
section.section10 .new-service-area .service-box-list > ul > li .circle > span {
  display: block;
  font-size: var(--bis-font-size-15); font-weight: 800; color: var(--bis-color-black);
  text-align: center;
}
section.section10 .new-service-area .service-box-list > ul > li:hover .circle.kakao {
  background-color: var(--bis-color-yellow);
  transition: .5s;
}
section.section10 .new-service-area .service-box-list > ul > li:hover .circle.tel {
  background-color: var(--bis-color-light-sky);
  transition: .5s;
}
section.section10 .new-service-area .service-box-list > ul > li:hover .circle.inquiry {
  background-color: var(--bis-color-light-orange);
  transition: .5s;
}
section.section10 .new-service-area .service-box-list > ul > li:hover .circle.email {
  background-color: var(--bis-color-light-red);
  transition: .5s;
}





/********************************************************************** 1500 미만 해상도 */
@media only screen and (max-width:1500px) and (min-width:1300px){
  section.section02, section.section03, section.section04, section.section05, section.section06,  
  section.section07, section.section08, section.section09, section.section10 {
    width: 1280px;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle {
    width: 132px;
    height: 106px;
    background-color: var(--bis-color-light-silver);
    border-radius: 100%;
    padding: 30px 0 0 0;
  }
  .travel-list li .travel-box figure {
    height: 210px;
  }
  .travel-list li:hover .travel-box figure:after {
    height: 210px;
  }
  .card-list li:hover .card-box figure:before {
    height: 227px;
  }
  .insurance-list li .insur-box figure {
    height: 210px;
  }
  .insurance-list li:hover .insur-box figure:after {
    height: 210px;
  }
  .pick-list li .pick-box figure {
    height: 457px;
  }
  .pick-list li .pick-box .pick-box-cont {
    top: 150px;
  }
  .content-list li .content-box figure {
    height: 201px;
  }
  .content-list li:hover .content-box figure:after {
    height: 201px;
  }

  section.section09 .insurance-box-body .tab-body-area {
    float: left;
    width: 848px;
  }
  section.section10 .new-service-area .new-box-list {
    width: 50%;
  }
  section.section10 .new-service-area .new-box-list > ul > li a {
    display: block;
    height: 17px;
    overflow: hidden;
  }
  section.section10 .new-service-area .service-box-list {
    width: 45%;
    margin-left: 5%;
  }
}
/********************************************************************** 1300 미만 해상도 */
@media only screen and (max-width:1299px) and (min-width:1200px){
  section.section01 {
    height: 750px;
  }
  section.section02, section.section03, section.section04, section.section05, section.section06, 
  section.section07, section.section08, section.section09, section.section10 {
    width: 1150px;
  }
  .travel-list li .travel-box figure {
    height: 180px;
  }
  .travel-list li:hover .travel-box figure:after {
    height: 100%;
  }
  .card-list li .card-box figure {
    height: 203px;
  }
  .card-list li:hover .card-box figure:before {
    height: 100%;
  }
  .insurance-list li .insur-box figure {
    height: 189px;
  }
  .insurance-list li:hover .insur-box figure:after {
    height: 100%;
  }
  .card-list li .card-box .card-box-cont h3 {
    padding-left: 20px;
  }
  .card-list li .card-box .card-box-cont p {
    padding-left: 20px;
  }
  .pick-list li .pick-box figure {
    height: 411px;
  }
  .pick-list li .pick-box .pick-box-cont {
    top: 120px;
  }
  .pick-list li .pick-box .pick-box-cont .tag {
    margin-top: 30px;
  }
  .course-list li .course-box figure {
    height: 170px;
  }
  .content-list li .content-box figure {
    height: 181px;
  }
  .content-list li:hover .content-box figure:after {
    height: 100%;
  }

  section.section09 .insurance-box-body .tab-body-area {
    float: left;
    width: 718px;
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont.banner01, 
  section.section09 .insurance-box-body .tab-body-area .tab-cont.banner02, section.section09 .insurance-box-body .tab-body-area .tab-cont.banner03 {
	background-position: center right;
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont h2 {
    font-size: var(--bis-font-size-32);
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont p {
    font-size: var(--bis-font-size-18);
  }
  section.section10 .new-service-area .new-box-list {
    width: 50%;
  }
  section.section10 .new-service-area .new-box-list > ul > li:first-child {
    width: 75%;
    overflow: hidden;
  }
  section.section10 .new-service-area .new-box-list > ul > li a {
    display: block;
    height: 17px;
    overflow: hidden;
  }
  section.section10 .new-service-area .service-box-list {
    width: 45%;
    margin-left: 5%;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle {
    width: 122px;
    height: 92px;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle > span {
    font-size: var(--bis-font-size-12);
    font-weight: 500;
  }
}
/********************************************************************** 1024 미만 해상도 */
@media only screen and (max-width:1199px) and (min-width:900px){
  section.section01 {
    height: 750px;
  }
  section.section02, section.section03, section.section04, section.section05, section.section06, 
  section.section07, section.section08, section.section09, section.section10 {
    width: 850px;
  }
  .travel-list li .travel-box figure {
    height: 140px;
  }
  .travel-list li:hover .travel-box figure:after {
    height: 100%;
  }
  .travel-list li .text-cont h3 {
    font-size: var(--bis-font-size-18);
    margin-top: 10px;
  }
  .travel-list li .tag-wrap {
    margin-top: 10px;
  }
  .travel-list li .tag-wrap button.keyword {
    margin:0 1% 3px 0;
  }
  .card-list li .card-box figure {
    height:150px;
  }
  .card-list li:hover .card-box figure:before {
    height: 100%;
  }
  .card-list li .card-box .card-box-cont h3 {
    padding-left: 10%;
  }
  .card-list li .card-box .card-box-cont p {
    padding: 15px 20px 0 10%;
  }
  .insurance-list li .insur-box figure {
    height: 140px;
  }
  .insurance-list li:hover .insur-box figure:after {
    height: 100%;
  }
  .pick-list li .pick-box figure {
    height: 304px;
  }
  .pick-list li .pick-box .pick-box-cont {
    top: 100px;
    padding: 0 5%;
	text-align: center;
  }
  .pick-list li .pick-box .pick-box-cont span.area-box {
    font-size: var(--bis-font-size-12);
    padding: 5px 15px;
  }
  .pick-list li .pick-box .pick-box-cont h3 {
    font-size: var(--bis-font-size-22);
    padding-top: 15px;
	text-align: center;
  }
  .pick-list li .pick-box .pick-box-cont .tag {
    margin-top: 20px;
  }
  .course-list li .course-box {
    padding: 15px;
  }
  .course-list li .course-box figure {
    height: 118px;
  }
  .course-list li .course-box .course-box-list {
    margin-top: 10px;
  }
  .course-list li .course-box .course-box-list h3 {
    font-size: var(--bis-font-size-18);
    margin-top: 0px;
  }
  .course-list li .course-box .tag-box-list {
    margin: 10px 0 0; padding: 5px 0 0;
  }
  .course-list li .course-box .user-box-list {
    margin: 10px 0 0; padding: 10px 0 0;
  }
  .course-list li .course-box .user-box-list > ul > li {
    width: 30%;
  }
  .course-list li .course-box .user-box-list > ul > li:first-child {
    position: relative;
    width: 65%;
  }
  .course-list li .course-box .user-box-list > ul > li span.user-profile {
    width: 30px; height: 30px;
  }
  .course-list li .course-box .user-box-list > ul > li span.user-profile+span.user-id {
    width: calc(100% - 43px);
  }
  .course-list li .course-box .user-box-list > ul > li span {
    position: relative;
  }
  .course-list li .course-box .user-box-list > ul > li span.user-id {
	position: absolute; top: 50%; left: 34%;
	transform: translate(0%, -50%);
    line-height: 13px;
    padding-top: 0px; padding-left: 0px;
  }
  .course-list li .course-box .user-box-list > ul > li.icon-like {
    padding-left: 5%;
  }
  .course-list li .course-box .user-box-list > ul > li.icon-like:after {
    width: 0px; height: 0px;
    background-color: transparent;
  }
  section.section05 .banner-travel {
    height: 170px;
  }
  .card-md-list li figure {
    height: 144px;
  }
  .card-md-list li .card-md-box .md-cont {
    margin-top: 20px;
  }
  .content-list li .content-box figure {
    position: relative;
    height: 134px;
  }
  .content-list li:hover .content-box figure:after {
    height: 100%;
  }
  .content-list li .content-box .content-box-cont h3 {
    margin-top: 10px;
  }
  section.section09 .insurance-box-body {
    padding-left: 30px;
  }
  section.section09 .insurance-box-body .tab-menu-area {
    width: 250px;
  }
  section.section09 .insurance-box-body .tab-body-area {
    width: 508px;
    margin-left: 30px;
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont h2 {
    padding-top: 60px;
    width: 45%;
    font-size: var(--bis-font-size-32);
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont p {
    padding-top: 20px;
    width: 45%;
    font-size: var(--bis-font-size-18);
  }
  section.section09 .insurance-box-body .tab-body-area .tab-cont.banner01, 
  section.section09 .insurance-box-body .tab-body-area .tab-cont.banner02, section.section09 .insurance-box-body .tab-body-area .tab-cont.banner03 {
	background-position: bottom right;
	background-size: 100%;
  }
  section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(1):checked ~ .tab-menu-area ul li:nth-child(1) > label, section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(2):checked ~ .tab-menu-area ul li:nth-child(2) > label, section.section09 .insurance-box-body input[name=tab-control]:nth-of-type(3):checked ~ .tab-menu-area ul li:nth-child(3) > label {
    font-size: var(--bis-font-size-25);
  }
  section.section09 .insurance-box-body .tab-menu-area ul li label {
    font-size: var(--bis-font-size-18);
    padding: 22px 0;
  }
  section.section09 .insurance-box-body .tab-menu-area ul li label:after {
    top: 20px;
    width: 22px; height: 22px;
    background-size: 10px 10px;
  }
  section.section10 .new-service-area .new-box-list {
    width: 50%;
  }
  section.section10 .new-service-area .new-box-list > ul > li:first-child {
    width: 65%;
    overflow: hidden;
  }
  section.section10 .new-service-area .new-box-list > ul > li a {
    display: block;
    height: 14px;
    overflow: hidden;
  }
  section.section10 .new-service-area .service-box-list {
    width: 45%;
    margin-left: 5%;
  }
  section.section10 .new-service-area .service-box-list > ul {
    margin-top: 40px;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle {
    width: 89px; height: 74px;
    padding: 15px 0 0 0;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle.kakao i, section.section10 .new-service-area .service-box-list > ul > li .circle.tel i,
  section.section10 .new-service-area .service-box-list > ul > li .circle.inquiry i, section.section10 .new-service-area .service-box-list > ul > li .circle.email i {
    background-size: 100%;
    width: 30px; height: 30px;
	margin: 0px auto 7px;
  }
  section.section10 .new-service-area .service-box-list > ul > li .circle > span {
    font-size: var(--bis-font-size-12);
    font-weight: 500;
  }
}