/*guide*/
.objHeading_h2 {
  background: url('./../../images/sub/h1_icon.png') no-repeat left 10px;
  font-family: 'Gmarket-Medium';
  font-size: 30px;
  color: #000;
  padding-left: 50px;
  padding-bottom: 25px;
}

.objHeading_h3 {
  position:relative;
  font-family: 'Gmarket-Medium';
  font-size: 22px;
  color: #222;
  padding-left: 20px;
  padding-bottom: 15px;
}

.objHeading_h3:before{
  content:'';
  width:4px;
  height:20px;
  background:#01499a;
  position:absolute;
  top:5px;
  left:0;
}

.color1{color:#053b82;font-family:'Gmarket-Medium';}
.color2{color:#2d96d3;font-family:'Gmarket-Medium';}
.color3{color:#25b1a2;font-family:'Gmarket-Medium';}
.color4{color:#7d5ee1;font-family:'Gmarket-Medium';}

/**fnct**/
._loginBefore{font-size:17px;max-width:720px;margin: 0 auto;border-radius:25px;}
#_UlgnS_basic._loginBefore ._loginInputWrap{margin:35px;}
#_UlgnS_basic._loginBefore ._loginInputWrap ._loginInput ._inputArea ._input{height:55px;font-size:18px;}
#_UlgnS_basic._loginBefore ._loginInputWrap ._loginSubmit{width: 110px;height: 110px;background:#03499a;color:#fff;font-family:'Gmarket-Medium';cursor:pointer;}
#_UlgnS_basic._loginBefore ._findInfo{margin:0 35px 25px 35px;}
#_UlgnS_basic._loginBefore ._findInfo li ._gotoLoginMember,
#_UlgnS_basic._loginBefore ._findInfo li ._findLoginId,
#_UlgnS_basic._loginBefore ._findInfo li ._findLoginPw{font-size:17px;text-decoration:none;color:#212121;font-family:'Gmarket-Medium';cursor:pointer;}
.sub input[type="text"]{height:38px;line-height:38px;font-size:16px;padding-left:10px;}
.sub ._view ._form ._label,
.sub ._write ._form ._label{font-size:16px;}
._articleTable .artclTable{border-top:2px solid #333;}

/* vision*/
.vision {
  margin-bottom: 55px;
}

.vision .text {
  text-align: center;
  padding-bottom: 110px;
  background: url('./../../images/sub/visiona-shape01.png') no-repeat center bottom;
}

.vision .text p {
  font-size: 36px;
  background: url('./../../images/sub/daa.png') no-repeat center top;
  padding-top: 65px;
}

.vision .text strong {
  font-family: 'Gmarket-Bold';
  color: #053b82;
  display: block;
}

.vision ul {
  display: flex;
  justify-content: space-evenly;
  padding-top: 10px;
}

.vision ul li {
  width: calc(100% / 3);
  padding: 25px 50px 25px 50px;
  border: 1px solid #cbcbcb;
  background: #fff;
  border-radius: 25px;
  position: relative;
  font-size: 17px;
}

.vision ul li:nth-child(2) {
  margin: 0 75px;
}

.vision ul li:after {
  content: '';
  width: 100%;
  height: 50%;
  background: #053b82;
  position: absolute;
  left: 0;
  top: -10px;
  z-index: -1;
  border-radius: 25px;
}

.vision ul li:nth-child(2):after {
  background: #2d96d3;
}

.vision ul li:nth-child(3):after {
  background: #25b1a2;
}

.vision ul li:before {
  content: '';
  width: 4px;
  height: 4px;
  background: #333;
  position: absolute;
  left: 30px;
  top: 35px;
}

@media all and (max-width:1200px) {
  .vision ul li:nth-child(2){margin:0 30px;}
}

@media all and (max-width:1023px) {
  .vision ul{display:block;}
  .vision ul li{width:100%;}
  .vision ul li:nth-child(2){margin:30px 0;}
}

@media all and (max-width:767px) {
  .vision .text{background-size: 80%;padding-bottom: 14%;}  
  .vision .text p{background-size:30px;font-size:28px;padding-top: 45px;}
}

/* strategy*/
.strategy .graph {
  margin-bottom: 70px;
  position: relative;
}

.strategy .graph .title {
  position: absolute;
  width: 490px;
  height: 490px;
  border: 30px solid #f2f2f2;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin-top: -265px;
  margin-left: -245px;
  z-index: -1;
}

.strategy .graph .title .inner {
  border: 1px solid #ccc;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  text-align: center;
  padding: 140px 40px 0;
  background: #fff;
}

.strategy .graph .title .inner strong {
  font-size: 36px;
  font-family: 'Gmarket-bold';
  color: #053b82;
}

.strategy .graph .title .inner p {
  font-size: 17px;
  font-family: 'Gmarket-Medium';
  color: #000;
  margin-top: 10px;
}

.strategy .graph .title .inner p i {
  display: block;
}

.strategy .graph > ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0;
}

.strategy .graph > ul li {
  width: calc(100% / 2);
  padding-right: 75px;
  margin-bottom: 50px;
  font-size: 17px;
  vertical-align: middle;
  display: inline-table;
  position: relative;
  height: 270px;
}

.strategy .graph > ul li .circle {
  width: 270px;
  height: 270px;
  position: absolute;
  top: 0;
  right: 75px;
  font-size: 26px;
  font-family: 'Gmarket-Bold';
  color: #03499a;
  border: 15px solid #03499a;
  border-radius: 50%;
  padding-top: 100px;
  text-align: center;
  background: #fff;
}

.strategy .graph > ul li:nth-child(2) .circle {
  border-color: #2d96d3;
  color: #2d96d3;
}

.strategy .graph > ul li:nth-child(3) .circle {
  border-color: #25b1a2;
  color: #25b1a2;
}

.strategy .graph > ul li:nth-child(4) .circle {
  border-color: #7d5ee1;
  color: #7d5ee1;
}

.strategy .graph > ul li .circle.twoline {
  padding-top: 80px;
}

.strategy .graph > ul li .circle i {
  display: block;
}

.strategy .graph > ul li p {
  display: table-cell;
  vertical-align: middle;
  padding-right: 300px;
  text-align: right;
}

.strategy .graph > ul li p span {
  position: relative;
  padding-top: 30px;
  display: inline-block;
}

.strategy .graph > ul li p span:before {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  background: #03499a;
  top: 0;
  right: 0;
  border-radius: 50%;
}

.strategy .graph > ul li:nth-child(2) p span:before {
  background: #2d96d3;
}

.strategy .graph > ul li:nth-child(3) p span:before {
  background: #25b1a2;
}

.strategy .graph > ul li:nth-child(4) p span:before {
  background: #7d5ee1;
}

.strategy .graph > ul li:nth-child(even) {
  padding-right: 0;
  padding-left: 75px;
}

.strategy .graph > ul li:nth-child(even) .circle {
  left: 75px;
}

.strategy .graph > ul li:nth-child(even) p {
  padding-left: 300px;
  text-align: left;
  padding-right: 0;
}

.strategy .graph > ul li:nth-child(even) p span:before {
  left: 0;
  right: unset;
}

@media all and (max-width:1200px) {
  .strategy .graph .title{position:initial;width:auto;height:auto;border:8px solid #f2f2f2;border-radius:30px;margin-top:0;margin-left:0;margin-bottom:40px;}
  .strategy .graph .title .inner{width:auto;height:auto;padding: 20px;border-radius:20px;}
  .strategy .graph .title .inner strong{font-size:28px;}
  .strategy .graph .title .inner p i{display:inline-block;}
  .strategy .graph > ul li{width:100%;padding-right:0;height:auto;}
  .strategy .graph > ul li:nth-child(even){padding-left:0;}
  .strategy .graph > ul li .circle{width: 250px;font-size:20px;font-family:'Gmarket-Medium';border-width:5px;height:auto;position: initial;border-radius: 20px;padding: 20px;display: inline-block;vertical-align: top;} 
  .strategy .graph > ul li .circle.twoline{padding:20px;}
  .strategy .graph > ul li .circle.twoline i{display:inline-block;}
  .strategy .graph > ul li p{display:inline-block;vertical-align:top;width: calc(100% - 250px);padding-right:0;text-align: left;padding-left: 25px;}
  .strategy .graph > ul li:nth-child(even) p{padding-left:25px;}
  .strategy .graph > ul li p span{padding-top:25px;}
  .strategy .graph > ul li p span:before{top:10px;width:8px;height:8px;left:0;right:unset;}

}

@media all and (max-width:767px) {
  .strategy .graph .title{border:0;}
  .strategy .graph .title .inner{padding-bottom:15px;border-radius:0;border-left:0;border-top:0;border-right:0;text-align:left;padding-left:0;padding-right: 0;}
  .strategy .graph .title .inner p{margin-top:0;}
  .strategy .graph > ul li .circle,
  .strategy .graph > ul li .circle.twoline{display:block;margin: 0 auto 3px 0;padding: 12px 15px 10px;font-size: 17px;width: 200px;}
  .strategy .graph > ul li p{padding-left:0;text-align: left;display:block;width:100%;}
  .strategy .graph > ul li:nth-child(even) p{padding-left:0;text-align: left;}
  .strategy .graph > ul li p span:before,
  .strategy .graph > ul li p:nth-child(even) span:before{left: 96px;margin-left: 0;top: 8px;display: none;}
  .strategy .graph > ul li p span{padding-top:15px;}
}

.strategy .line > ul > li{margin-bottom:35px;font-size:0;}
.strategy .line > ul > li strong{display:inline-block;vertical-align:top;font-size:22px;font-family:'Gmarket-Bold';width:300px;text-align: center;padding:20px 30px;border-radius: 25px 25px 25px 0;color:#fff;background:#053b82;}
.strategy .line > ul > li:nth-child(2) strong{background:#2d96d3;}
.strategy .line > ul > li:nth-child(3) strong{background:#25b1a2;}
.strategy .line > ul > li:nth-child(4) strong{background:#7d5ee1;}
.strategy .line > ul > li > ul{display:inline-block;vertical-align:top;width:calc(100% - 350px);margin-left:50px;border:1px solid #cbcbcb;padding: 30px;border-radius: 25px;position:relative;}
.strategy .line > ul > li > ul:before{content:'';width:25px;height:5px;background:url('./../../images/sub/vision-shape02.png') no-repeat center;position:absolute;left:-37px;top:35px;}
.strategy .line > ul > li > ul > li{font-size:17px;color:#222;position:relative;padding-left:18px;}
.strategy .line > ul > li > ul > li + li{margin-top:25px;}
.strategy .line > ul > li > ul > li:before{content:'';width:4px;height:4px;background:#222;position:absolute;left:0;top:8px;}
.strategy .line > ul > li > ul > li span{font-family:'Gmarket-Medium';color:#053b82;}
.strategy .line > ul > li:nth-child(2) > ul > li span{color:#2d96d3;}
.strategy .line > ul > li:nth-child(3) > ul > li span{color:#25b1a2;}
.strategy .line > ul > li:nth-child(4) > ul > li span{color:#7d5ee1;}

@media all and (max-width:1023px) {
  .strategy .line > ul > li + li{margin-top:80px;}
  .strategy .line > ul > li strong{display:block;width: 300px;padding: 15px 25px 12px;border-radius:25px;margin: 0 auto 75px;font-size: 20px;}
  .strategy .line > ul > li > ul{display:block;width:100%;margin-left:0;}
  .strategy .line > ul > li > ul:before{top:-40px;left:50%;margin-left: -12.5px;transform:rotate(90deg)}
}


/*powerball*/

.powerball > ul > li{margin-bottom: 45px;display:table;width:100%;}
.powerball > ul > li .tit{display:table-cell;width:270px;border:4px solid #03499a;border-radius:30px 30px 30px 0;vertical-align:middle;text-align:center;}
.powerball > ul > li .tit strong{font-size:22px;color:#053b82;font-family:'Gmarket-Bold';display:block;margin-bottom:3px;}
.powerball > ul > li .tit span{color:#053b82;font-family:'Gmarket-Medium';font-size:17px;}
.powerball > ul > li .conts{padding-left: 45px;position: relative;}
.powerball > ul > li .conts:before{content:'';width:25px;height:5px;background:url('./../../images/sub/vision-shape02.png') no-repeat center;position:absolute;left:17px;top:50%;margin-top:-2.5px;}
.powerball > ul > li .conts > ul{display:flex;justify-content:center;flex-wrap:wrap;}
.powerball > ul > li .conts > ul > li{width:calc(100% / 2 - 30px);margin:0 15px;border: 1px solid #ccc;border-radius: 30px;position:relative;}
.powerball > ul > li .conts > ul > li:before{content:'';width: 100%;height:80px;background:#053b82;position:absolute;left:0;top:0;z-index: -1;border-radius: 30px 30px 0 0;}
.powerball > ul > li .conts > ul > li strong{display:block;text-align:center;font-size:20px;font-family:'Gmarket-Medium';padding: 15px 10px 10px 10px;background: #053b82;color: #fff;border-radius: 30px 30px 0 0;}
.powerball > ul > li .conts > ul > li + li + li{margin-top: 30px;}
.powerball > ul > li .conts > ul > li > ul{padding: 25px;border-radius: 30px;border-top: 1px solid #ccc;position: relative;z-index: 2;background:#fff;}
.powerball > ul > li .conts > ul > li > ul > li{position:relative;padding-left:25px;font-size: 17px;color: #222;font-family: 'Gmarket-Light';}
.powerball > ul > li .conts > ul > li > ul > li:before{content:'';width:4px;height:4px;position:absolute;left: 5px;top: 8px;background:#222;}
.powerball > ul > li .conts > ul > li > ul > li + li{margin-top: 15px;}

.powerball > ul > li:nth-child(2) .tit{border-color:#2d96d3;}
.powerball > ul > li:nth-child(2) .tit strong,
.powerball > ul > li:nth-child(2) .tit span{color:#2d96d3;}
.powerball > ul > li:nth-child(2) .conts > ul > li:before,
.powerball > ul > li:nth-child(2) .conts > ul > li strong{background:#2d96d3;}

.powerball > ul > li:nth-child(3) .tit{border-color:#25b1a2;}
.powerball > ul > li:nth-child(3) .tit strong,
.powerball > ul > li:nth-child(3) .tit span{color:#25b1a2;}
.powerball > ul > li:nth-child(3) .conts > ul > li:before,
.powerball > ul > li:nth-child(3) .conts > ul > li strong{background:#25b1a2;}

.powerball > ul > li:nth-child(4) .tit{border-color:#7d5ee1;}
.powerball > ul > li:nth-child(4) .tit strong,
.powerball > ul > li:nth-child(4) .tit span{color:#7d5ee1;}
.powerball > ul > li:nth-child(4) .conts > ul > li:before,
.powerball > ul > li:nth-child(4) .conts > ul > li strong{background:#7d5ee1;}

@media all and (max-width:1023px) {
  .powerball > ul > li + li{margin-top:65px;}  
  .powerball > ul > li .tit{display:block;margin:0 auto 60px;width:400px;border-radius:25px;padding:12px 10px 10px;}
  .powerball > ul > li .conts{padding-left:0;}
  .powerball > ul > li .conts:before{top:-25px;left:50%;transform:rotate(90deg);margin-left:-12.5px;}
}

@media all and (max-width:767px) {
  .powerball > ul > li .conts > ul > li{width:100%;margin:0 0 30px;}
  .powerball > ul > li .conts > ul > li + li + li{margin-top:0;}
}



.greeting{
  display: grid;
  grid-template-columns: 430px 1fr;
  width: 100%;
}
.greeting .thum{}
.greeting .thum img{}

.greeting .txt{width: 100%;padding-left: 70px;overflow: hidden;}
.greeting .txt .t1{font-size:40px;line-height: 1.2;font-family: Gmarket-Medium;}
.greeting .txt .t1:after{content:'';width: 120%;display: block;height: 4px;background: #053b82;margin: 40px 0 50px;position: relative;left: -72px;z-index: -1;}
.greeting .txt .t1 strong{
  color: #053b82;
}
.greeting .txt .t2{
  font-size: 20px;
  color: #333;
  font-family: Gmarket-Light;
}


@media all and (max-width: 1000px) {
  .greeting{grid-template-columns: 300px 1fr;}
}
@media all and (max-width: 767px) {

  .greeting{grid-template-columns: 250px 1fr;}
  .greeting .txt{padding-left:30px}
  .greeting .txt .t1{font-size:30px;}
  .greeting .txt .t2{    font-size: 17px;}
}
@media all and (max-width: 600px) {

  .greeting{display:block;}
  .greeting .txt{padding-left:0; margin-top:70px}
  .greeting .txt .t1{font-size:30px;}
  .greeting .txt .t2{font-size: 17px;}
}

.img-list{display:flex; margin:50px auto; text-align:center;}
.img-list p{padding:0 10px; margin: 0 auto;}
.img-list p img{}

.youtube-frame{  display: flex;}
.youtube-frame iframe{width: 100%;  padding: 20px;  height: 400px;}

@media all and (max-width: 1000px) {
  .youtube-frame{display: block;}
  .youtube-frame iframe{padding:0;	margin-bottom:20px;}
}

.con-table {position:relative;}
.con-table:after {content:''; position: absolute; right:-1px; top:0px; width:2px; height:100%; background:#fff;}
.con-table table {position:relative;}
.con-table table:after {content:'';position:absolute;top:0px;left:0px;width:100%;height:2px;background: #000000;}
.con-table table:before {content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#43505d;}
.con-table thead th {padding:15px 10px; font-weight:normal; background:#f5f7f8; color:#333;font-family:'SC Bold'; border-right:1px solid #d7dee3; border-bottom:1px solid #d7dee3; font-size:16px;}
.con-table tbody th {padding:15px 10px; background:#fcfcfc; color:#333; border-right:1px solid #d7dee3; font-family:'SC Regular';border-bottom:1px solid #d7dee3; font-size:16px;}
.con-table tbody th.color {background:#e4ebf2; font-size: 18px; color: #1b1b1b; font-weight: normal;}
.con-table tbody td {padding: 15px 20px;background:#fff;color:#666;border-right:1px solid #d7dee3;font-family:'SC Regular';border-bottom:1px solid #d7dee3;font-size:16px;}
.con-table tbody td u{vertical-align: middle;}
.con-table .align-l {text-align:left;}
.con-table .align-c {text-align:center;}
.con-table .align-r {text-align:right;}

@media all and (max-width:860px) {
  .con-table {overflow-x: hidden;}
  .con-table table {width:1000px;}
  .con-table:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:rgba(0, 0, 0, .3) url('../../images/common/img_mobile_text.png') no-repeat center 20px;}
  .con-table.on:after {display:none;}
}
