@charset "utf-8";

.wrap-contents .container {max-width:1440px; padding: 0 20px;}


/* 서브 상단 스타일 추가 :: 템플릿 적용 */
.sub-top-bx {position: relative; padding: 40px 20px; overflow: hidden;}
.sub-top-bx::before {content: ""; position: absolute; width: 100%; height: 3px; background: url("../../images/sub/line_bg_1.jpg"); left: 0; top: 0;}
.sub-top-bx::after {content: ""; position: absolute; width: 100%; height: 3px; background: url("../../images/sub/line_bg_2.jpg"); left: 0; bottom: 0;}

.sub-top-bx .top-img-bx {float: left; width: 15%; min-width: 145px;}
.sub-top-bx .top-img-bx .sub-top-img {display: table; width: 105px; height: 105px; background: #1C408A; border-radius: 50%; margin: 0 auto;}
.sub-top-bx .top-img-bx .sub-top-img .sub-top-img-inner {display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center;}
.sub-top-bx .sub-top-info {float: right; width: 85%; max-width: calc(100% - 145px);}
.sub-top-bx .sub-top-info .title {font-size: 22px; line-height: 30px; letter-spacing: -0.5px; color: #111111; font-family: "Noto Medium";}
.sub-top-bx .sub-top-info .info {font-size: 18px; line-height: 28px; letter-spacing: -0.5px; color: #333333; margin: 15px 0;}
.sub-top-bx .sub-top-info .sub-top-option {overflow: hidden;}
.sub-top-bx .sub-top-info .sub-top-option dl {float: left; display: table; margin-right: 10px;}
.sub-top-bx .sub-top-info .sub-top-option dt {display: table-cell; vertical-align: middle;}
.sub-top-bx .sub-top-info .sub-top-option dd {display: table-cell; vertical-align: middle; padding-left: 10px; font-size: 17px; line-height: 30px; letter-spacing: -0.5px; color: #666666;}

.icon-bx {padding: 20px; background: #1C408A;}
.icon-bx li {float: left; width: 14.28%; text-align: center; padding: 10px 0; color: #fff;}

@media all and (max-width: 768px){
  .sub-top-bx .top-img-bx {float: none; width: 100%; margin-bottom: 30px; min-width: auto;}
  .sub-top-bx .sub-top-info {float: none; width: 100%; max-width: 100%;}
}

/* 스타일가이드 */
.wrap-contents .objHeading_h2 {font-family:'Noto Medium'; display:block; line-height:1.5; font-size:26px; letter-spacing: -0.5px; color:#151515; margin-top: 50px;}

.wrap-contents .objHeading_h3 {position: relative; font-family:'Noto Medium'; display:block; line-height:1.5; font-size:20px; letter-spacing: -0.5px; color:#0090ff; padding: 25px 0 0; margin-top: 50px;}
.wrap-contents .objHeading_h3::before {content: ""; position: absolute; width: 25px; height: 15px; background: url("../../images/sub/ic_tit_dep1.png") no-repeat; left: 0; top: 0;}

.wrap-contents .objHeading_h4 {position: relative; font-family:'Noto Light'; display:block; line-height:1.5; font-size:18px; letter-spacing: -0.5px; color:#183d93; padding: 0 0 0 20px; margin-top: 50px;}
.wrap-contents .objHeading_h4::before {content: ""; position: absolute; width: 11px; height: 10px; background: url("../../images/sub/ic_tit_dep2.png") no-repeat; left: 0; top: 8px;}

.wrap-contents .objHeading_h5 {position: relative; font-family:'Noto Medium'; display:block; line-height:1.5; font-size:18px; letter-spacing: -0.5px; color:#333333; padding: 0 0 0 20px; margin-top: 50px;}
.wrap-contents .objHeading_h5::before {content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid #878787; border-radius: 50%; left: 0; top: 7px;}

/* 제목 요소가 연속으로 올때 */
._objHeading + ._objHeading h2, ._objHeading + ._objHeading h3 , ._objHeading + ._objHeading h4 {margin-top: 30px;}

.wrap-contents .con-desc {font-size:18px; color:#333333; line-height:1.6; letter-spacing: -0.5px;}
.wrap-contents .con-list li {padding: 0 0 0 20px; color:#666; background:url('../../images/common/bul_list.png') no-repeat left 9px;}
.wrap-contents .con-list strong {font-family:'Noto DemiLight'; font-weight:normal; color:#222;}
.wrap-contents .con-list2 li {position:relative; padding: 0 0 0 20px; color:#666;}
.wrap-contents .con-list2 li:after {content:''; position:absolute; left:0px; top:11px; width:4px; height:4px; background:#018cff;}

.wrap-contents .align-r {text-align:right;}
.wrap-contents .align-c {text-align:center;}
.wrap-contents .align-l {text-align:left;}

.wrap-contents .txt-bold {font-family: "Noto Medium";}

.wrap-contents .txt-color1 {color:#d63f11;}
.wrap-contents .txt-color2 {color:#00c6ff;}
.wrap-contents .txt-color3 {color:#faa635;}
.wrap-contents .txt-color4 {color:#00b622;}

.wrap-contents .con-table {position:relative;}
.wrap-contents .con-table:after {content:''; position: absolute; right:-2px; top:0px; width:3px; height:100%; background:#fff;}
.wrap-contents .con-table table {font-family:'Noto DemiLight'; position:relative;}
.wrap-contents .con-table table:after {content:''; position:absolute; top:0px; left:0px; width:100%; height:2px; background:#43505d;}
.wrap-contents .con-table table:before {content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#43505d;}
.wrap-contents .con-table thead th {padding:15px 10px; font-weight:normal; background:#F7F8F9; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:18px; font-family: "Noto Regular";}
.wrap-contents .con-table tbody tr:first-child th, .wrap-contents .con-table tbody tr:first-child td {border-top: 1px solid #B1B2B3;}
.wrap-contents .con-table tbody th {padding:15px 10px; background:#FBFBFB; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:16px;}
.wrap-contents .con-table tbody th.color {background:#FBFBFB; font-size: 18px; color: #1b1b1b; font-weight: normal;}
.wrap-contents .con-table tbody td {padding:15px 10px; background:#fff; color:#666; border-right:1px solid #ccd0d7; border-bottom:1px solid #ccd0d7; font-size:16px; text-align: left; letter-spacing: -0.5px;}

.wrap-contents .con-table tbody td ul li {position: relative; padding-left: 20px;}
.wrap-contents .con-table tbody td ul li::before {content: ""; position: absolute; width: 8px; height: 8px; background: #B4C1DD; border-radius: 50%; left: 0; top: 10px;}

.wrap-contents .con-table .align-l {text-align:left;}
.wrap-contents .con-table .align-c {text-align:center;}
.wrap-contents .con-table .align-r {text-align:right;}

@media all and (max-width:860px) {
    .wrap-contents .con-table {overflow-x: hidden;}
    .wrap-contents .con-table table {width:1000px;}
    .wrap-contents .con-table:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:url('../../images/common/img_mobile_text.png') no-repeat center center;}
    .wrap-contents .con-table.on:after {display:none;}
}

.wrap-contents .con-ready {padding:80px 0 ; text-align:center; background: url('../../images/common/bg_ready.jpg') no-repeat center top; border:1px solid #cccccc;}
.wrap-contents .con-ready .text {font-size:38px; padding:32px 0 0 0;}
.wrap-contents .con-ready .text span {font-family:'Noto Bold';position:relative; color:#018cff; display:inline-block; padding:0 6px;}
.wrap-contents .con-ready .text span:last-child:after {display:none;}
.wrap-contents .con-ready .text span:after {content: '/'; position:absolute; right:-7px; top:15px; font-size:15px; font-family: Noto Black;}

@media all and (max-width:420px) {
    .wrap-contents .con-ready .text {font-size: 26px;}
    .wrap-contents .con-ready .text span:after {top:8px;}
}

/* guide 추가 작업 */
.sub-indent {padding-left: 20px;}

@media all and (min-width: 769px){
  .sub-content .ul_4 {overflow: hidden; border: 1px solid #E0E0E0; margin-top: 35px;}
  .sub-content .ul_4 > li {position: relative; float: left; width: 20%; border-top: 1px solid #E0E0E0;}
  .sub-content .ul_4 > li:nth-child(1), .sub-content .ul_4 > li:nth-child(2), .sub-content .ul_4 > li:nth-child(3), .sub-content .ul_4 > li:nth-child(4), .sub-content .ul_4 > li:nth-child(5) {border-top: 0;}
  .sub-content .ul_4 > li > a {position: relative; display: block; padding: 15px 10%; z-index: 2; font-size: 18px; font-family: "Noto Light"; transition: color 0.5s; letter-spacing: -0.5px; color: #333333;}
  .sub-content .ul_4 > li > a::before {content: ""; position: absolute; width: 1px; height: 17px; left: 0; top: 50%; margin-top: -8.5px; background: #E0E0E0;}
  .sub-content .ul_4 > li:first-child > a::before {display: none;}
  .sub-content .ul_4 > li > a > span {position: relative; display: block;}
  .sub-content .ul_4 > li > a > span::before, .sub-content .ul_4 > li > a > span::after {content: ""; position: absolute; width: 15px; height: 3px; background: #A7A9AD; right: 0; top: 50%; margin-top: -1.5px; transform: rotate(0); transition: all 0.3s;}

  .sub-content .ul_4 > li > a[target="_blank"] > span::before {display: none;}
  .sub-content .ul_4 > li > a[target="_blank"] > span::after {content: ""; width: 16px; height: 14px; background: url("../../images/sub/ic_link.png") no-repeat; margin-top: -7px; transform: rotate(0);}

  .sub-content .ul_4 > li:hover > a[target="_blank"] > span::after, .sub-content .ul_4 > li._active > a[target="_blank"] > span::after {content: ""; width: 16px; height: 14px; background: url("../../images/sub/ic_link_wh_on.png") no-repeat; margin-top: -7px; transform: rotate(0);}

  .sub-content .ul_4 > li._active > a::before, .sub-content .ul_4 > li:hover > a::before {display: none;}
  .sub-content .ul_4 > li._active > a, .sub-content .ul_4 > li:hover > a {background: url("../../images/sub/dep4_bg.jpg") no-repeat center; background-size: cover; }
  .sub-content .ul_4 > li._active > a > span::before, .sub-content .ul_4 > li:hover > a > span::before {background: #fff; right: 9px; transform: rotate(45deg); margin-top: -1px;}
  .sub-content .ul_4 > li._active > a > span::after, .sub-content .ul_4 > li:hover > a > span::after {background: rgba(255, 255, 255, 0.5); right: 0; transform: rotate(-45deg); margin-top: -1px;}

  .sub-content .ul_4 > li._active > a, .sub-content .ul_4 > li:hover > a {color: #fff;}


  .sub-content .ul_5 {position: relative; overflow: hidden;}
  .sub-content .ul_5::after {content: ""; position: absolute; width: 100%; height: 3px; background: url("../../images/sub/line_bg_2.jpg"); left: 0; bottom: 0;}
  .sub-content .ul_5 > li {position: relative; display: inline-block; padding: 15px 0; margin-right: 15px;}
  .sub-content .ul_5 > li::before {content: ""; position: absolute; width: 1px; height: 17px; background: #B5B5B5; left: 0; top: 21px; transition: opacity 0.3s;}
  .sub-content .ul_5 > li:first-child::before {display: none;}
  .sub-content .ul_5 > li > a {position: relative; display: block; padding: 0 45px 0 15px; font-size: 18px; font-family: "Noto Light"; letter-spacing: -0.5px; color: #333333; z-index: 3;}
  .sub-content .ul_5 > li > a::after {content: ""; position: absolute; width: 25px; height: 25px; right: 0; top: 2px; background: url("../../images/sub/ic_dep5.png") no-repeat center; transition: all 0.3s;}

  .sub-content .ul_5 > li > a[target="_blank"]::after {width: 16px; height: 14px; background: url("../../images/sub/ic_link.png") no-repeat; top: 7px;}

  .sub-content .ul_5 > li:hover > a, .sub-content .ul_5 > li._active > a {color: #183d93;}
  .sub-content .ul_5 > li:hover > a::after, .sub-content .ul_5 > li._active > a::after {background: url("../../images/sub/ic_dep5_on.png") no-repeat center;}
  .sub-content .ul_5 > li:hover > a[target="_blank"]::after, .sub-content .ul_5 > li._active > a[target="_blank"]::after {background: url("../../images/sub/ic_link_on.png") no-repeat center;}
}

.sub-content .tab_div > button {display: none;}

@media all and (max-width: 1023px){
  .sub-content .ul_4 > li {width: 33.33%;}
}

@media all and (max-width: 768px){
  .sub-content .ul_4 > li {width: 100%;}
  .sub-content .tab_div {position: relative;}
  .sub-content .tab_div > ul {position: absolute; width: 100%; left: 0;  height: 0;  max-height: 0; overflow: hidden; transition: max-height 0.5s; background: #fff;}
  .sub-content .tab_div > ul.on {max-height: 400px; z-index: 3; height: auto;}
  .sub-content .tab_div.div_4 {margin-top: 30px;}
  .sub-content .tab_div.div_4 > button {position: relative; display: block; width: 100%; padding: 0 4%; height: 50px; line-height: 50px; font-size: 15px; letter-spacing: -0.5px; font-family: "Noto DemiLight"; background: #0090FF; text-align: left; color: #fff;}
  .sub-content .tab_div.div_4 > button::after {content: ""; position: absolute; width: 25px; height: 25px; background: url("../../images/sub/dep4_arrow.png") no-repeat; right: 4%; top: 50%; margin-top: -12.5px;}

  .sub-content .tab_div.div_4 ul {border: 2px solid #0090FF; z-index: 4;}
  .sub-content .tab_div.div_4 ul li a {position: relative; display: block; width: 100%; padding: 10px 4%; font-size: 15px; letter-spacing: -0.5px; color: #464646; font-family: "Noto DemiLight"; transition: all 0.3s;}
  .sub-content .tab_div.div_4 ul li:hover a {background: #D9E4ED; color: #0090ff;}
  .sub-content .tab_div.div_4 ul li a[target="_blank"]::after {content: ""; position: absolute; right: 4%; width: 16px; height: 14px; background: url("../../images/sub/ic_link.png") no-repeat; top: 14px;}

  .sub-content .tab_div.div_5 {margin-top: 10px;}
  .sub-content .tab_div.div_5 > button {position: relative; display: block; width: 100%; padding: 0 4%; height: 50px; line-height: 50px; font-size: 14px; letter-spacing: -0.5px; text-align: left; color: #183d93; border: 1px solid #183d93;}
  .sub-content .tab_div.div_5 > button::after {content: ""; position: absolute; width: 15px; height: 9px; background: url("../../images/sub/dep5_arrow.png") no-repeat; right: 4%; top: 50%; margin-top: -4.5px;}

  .sub-content .tab_div.div_5 ul {border: 1px solid #183d93; border-top: 0;}
  .sub-content .tab_div.div_5 ul li a {position: relative; display: block; width: 100%; padding: 10px 4%; font-size: 14px; letter-spacing: -0.5px; color: #464646; transition: all 0.3s;}
  .sub-content .tab_div.div_5 ul li:hover a {background: #D8DEED; color: #183d93;}
  .sub-content .tab_div.div_5 ul li a[target="_blank"]::after {content: ""; position: absolute; right: 4%; width: 16px; height: 14px; background: url("../../images/sub/ic_link.png") no-repeat; top: 14px;}
}


.con-list1 ul li {position: relative; font-size: 18px; line-height: 25px; letter-spacing: -0.5px; color: #333333; margin: 5px 0; padding-left: 20px;}
.con-list1 ul li::before {content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid #878787; border-radius: 50%; left: 0; top: 7px;}

.con-arrow-list ul li {position: relative; padding-left: 15px; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #333333;}
.con-arrow-list ul li::before {content: ""; position: absolute; width: 10px; height: 4px; background: url("../../images/common/ic_list3_arrow.png") no-repeat; left: 0; top: 12px;}

.circle-num-title {position: relative; font-size: 18px; line-height: 20px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Medium"; padding-left: 25px;}
.circle-num-title .num {position: absolute; left: 0; top: 2px; display: inline-block; vertical-align: middle; font-family: "Montserrat"; font-size: 10px; letter-spacing: -0.5px; color: #fff; width: 16px; height: 16px; border-radius: 50%; background: #878787; text-align: center; margin-right: 5px;}

.circle-num-list li {position: relative; font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #333333; padding-left: 25px; margin: 5px 0;}
.circle-num-list li .num {position: absolute; left: 0; top: 5px; display: inline-block; vertical-align: middle; font-family: "Montserrat"; font-size: 10px; letter-spacing: -0.5px; color: #fff; width: 16px; height: 16px; border-radius: 50%; background: #878787; text-align: center; margin-right: 5px; line-height: 18px;}

.point-txt {font-size: 16px; line-height: 30px; letter-spacing: -0.5px; font-family: "Noto Regular"; padding-left: 40px;}
.point-txt.point-txt1 {color: #e77800; background: url("../../images/sub/ic_point_1.png") no-repeat left 5px;}
.point-txt.point-txt2 {color: #d63f11; background: url("../../images/sub/ic_point_2.png") no-repeat left 5px;}
.point-txt.point-txt3 {color: #0090ff; background: url("../../images/sub/ic_point_3.png") no-repeat left 5px;}
.point-txt.point-txt4 {color: #183d93; background: url("../../images/sub/ic_point_4.png") no-repeat left 5px;}
.point-txt.point-txt5 {color: #43505d; background: url("../../images/sub/ic_point_5.png") no-repeat left 5px;}

.sub-explain-bx{position: relative; overflow: hidden;}
.sub-explain {padding: 25px 30px; background: #F5F5F5;}
.sub-explain::before {content: ""; position: absolute; width: 85px; height: 29px; background: url("../../images/common/explain_bg_2.png") no-repeat; right: -100px; top: 40px; transition: right 0.75s;}
.sub-explain::after {content: ""; position: absolute; width: 161px; height: 142px; background: url("../../images/common/explain_bg_3.png") no-repeat; right: -100px; bottom: 0px; transition: right 0.75s;}
.sub-explain.on::before, .sub-explain.on::after {right: 0; }

.sub-expalin-inner {position: relative; display: table; width: 100%; z-index: 1;}
.sub-expalin-inner .sub-explain-img {display: table-cell; width: 230px; vertical-align: middle; height: 230px;background: url("../../images/common/explain_bg_1.png") no-repeat center;}
.sub-expalin-inner .explain-img-inner {width: 100%; height: 100%;}
.sub-expalin-inner .sub-explain-img .icon1 {background: url("../../images/common/explain_icon_1.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon2 {background: url("../../images/common/explain_icon_2.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon3 {background: url("../../images/common/explain_icon_3.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon4 {background: url("../../images/common/explain_icon_4.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon5 {background: url("../../images/common/explain_icon_5.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon6 {background: url("../../images/common/explain_icon_6.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon7 {background: url("../../images/common/explain_icon_7.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon8 {background: url("../../images/common/explain_icon_8.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon9 {background: url("../../images/common/explain_icon_9.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon10 {background: url("../../images/common/explain_icon_10.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon11 {background: url("../../images/common/explain_icon_11.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon12 {background: url("../../images/common/explain_icon_12.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon13 {background: url("../../images/common/explain_icon_13.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon14 {background: url("../../images/common/explain_icon_14.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon15 {background: url("../../images/common/explain_icon_15.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon16 {background: url("../../images/common/explain_icon_16.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon17 {background: url("../../images/common/explain_icon_17.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon18 {background: url("../../images/common/explain_icon_18.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon19 {background: url("../../images/common/explain_icon_19.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon20 {background: url("../../images/common/explain_icon_20.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon21 {background: url("../../images/common/explain_icon_21.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon22 {background: url("../../images/common/explain_icon_22.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon23 {background: url("../../images/common/explain_icon_23.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon24 {background: url("../../images/common/explain_icon_24.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon25 {background: url("../../images/common/explain_icon_25.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon26 {background: url("../../images/common/explain_icon_26.png") no-repeat center;}
.sub-expalin-inner .sub-explain-img .icon27 {background: url("../../images/common/explain_icon_27.png") no-repeat center;}
.sub-expalin-inner .sub-explain-info {display: table-cell; vertical-align: top; padding-left: 35px; padding-top: 30px;}
.sub-explain-title {font-size: 26px; line-height: 30px; letter-spacing: -0.5px; color: #23499e; font-family: "Noto Medium";}
.sub-explain-txt {font-size: 19px; line-height: 30px; letter-spacing: -0.5px; color: #333333;}

@media all and (max-width: 1023px){
  .sub-expalin-inner {display: block;}
  .sub-expalin-inner .sub-explain-img {display: block; margin: 0 auto;}
  .sub-expalin-inner .sub-explain-info {display: block; width: 100%; padding-left: 0; padding: 30px 15px 0;}
}

.sub-link-bx {padding: 10px; background: url("../../images/common/repeat_bg.png");}
.sub-link-inner {background: #fff; padding: 15px 40px; overflow: hidden; display: table; width: 100%;}
.sub-link-icon {display: table-cell; vertical-align: middle; width: 70px;}
.sub-link-info {display: table-cell; vertical-align: middle; width: auto; font-size: 18px; line-height: 24px; letter-spacing: -0.5px; color: #2e3a84;}
.sub-link-btn {display: table-cell; vertical-align: middle; width: 160px;}

@media all and (max-width: 1023px){
  .sub-link-inner {display: block; }
  .sub-link-icon {display: block;}
  .sub-link-info {display: block; margin: 10px 0 25px;}
  .sub-link-btn {display: block;}
}

.ebook-list {margin: 0 -0.5%;}
.ebook-list-inner {float: left; display: table; width: 49%; padding: 30px 25px; margin: 10px 0.5%; border: 1px solid #CFCFCF;}
.ebook-title {display: table-cell; vertical-align: middle;}
.ebook-title p {position: relative; font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Bold"; padding-left: 20px;}
.ebook-title p::before {content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid #005AAB; border-radius: 50%; left: 0; top: 10px;}
.ebook-btn {display: table-cell; vertical-align: middle; width: 180px;}

@media all and (max-width: 1023px){
  .ebook-list {margin: 0;}
  .ebook-list-inner {float: none; width: 100%; margin: 10px 0;}
  .ebook-title {}
}

.sub-download-bx {border: 1px solid #C1C1C1;}
.sub-download {padding: 10px 45px; margin: 0 -1.5%;}
.sub-download-inner {float: left; width: 30%; overflow: hidden; padding: 10px 0; margin: 0 1.5%;}
.sub-download-inner > p {float: left; padding-left: 20px; background: url("../../images/common/ic_list3_arrow.png") no-repeat left 9px; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #222222;}
.sub-download-inner .sub-download-btn {float: right;}
.sub-download-inner .sub-download-btn .sub-btn-group .download-btn {margin-left: 0;}

@media all and (max-width: 1260px){
  .sub-download-inner {width: 47%; margin: 0;}
}

@media all and (max-width: 1023px){
  .sub-download {padding: 10px 25px;}
  .sub-download-inner {width: 100%;}
  .sub-download-inner > p {width: calc(100% - 200px); line-height: 23px;}
}

@media all and (max-width: 500px){
  .sub-download-inner > p {float: none; width: 100%;}
  .sub-download-inner .sub-download-btn {margin-top: 10px;}
}

.privacy-bx {padding: 25px 45px; background: #F5F6FA;}
.privacy-title {float: left; font-size: 19px; line-height: 30px; letter-spacing: -0.5px; color: #10489f; font-family: "Noto Regular";}
.privacy-bx-btn {float: right;}

@media all and (max-width: 500px){
  .privacy-bx {text-align: center; padding: 15px;}
  .privacy-title {float: none; margin-bottom: 10px;}
  .privacy-bx-btn {float: none;}
}


/* 버튼 스타일 */
.sub-btn-group .link-btn {position: relative; display: block; font-size: 14px; line-height: 24px; letter-spacing: -0.5px; color: #fff; border: 1px solid #006CC7; color: #4b4b4b; transition: all 0.3s; overflow: hidden;}
.sub-btn-group .link-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #006CC7; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .link-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/more_arrow_3.png") no-repeat 90% center; padding: 10px 40px 10px 15px; transition: all 0.3s;}

.sub-btn-group .link-btn:hover {color: #fff;}
.sub-btn-group .link-btn:hover span {background: url("../../images/common/more_arrow_2.png") no-repeat 90% center; }
.sub-btn-group .link-btn:hover::before {width: 140%;}

.sub-btn-group .link-btn2 {position: relative; display: block; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #fff; border: 1px solid #0058B9; color: #666666; transition: all 0.3s; overflow: hidden;}
.sub-btn-group .link-btn2::before {content: ""; position: absolute; width: 0; height: 100%; background: #425769; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .link-btn2 span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon1_on.png") no-repeat 90% center; padding: 7px 40px 7px 15px; transition: all 0.3s;}

.sub-btn-group .link-btn2:hover {color: #fff; border-color: #425769;}
.sub-btn-group .link-btn2:hover span {background: url("../../images/common/btn_icon1.png") no-repeat 90% center; }
.sub-btn-group .link-btn2:hover::before {width: 140%;}

.sub-btn-group .download-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;}
.sub-btn-group .download-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .download-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon2.png") no-repeat 15px center;  padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;}

.sub-btn-group .download-btn:hover {border-color: #10489F;}
.sub-btn-group .download-btn:hover span {color: #fff; background: url("../../images/common/btn_icon2_on.png") no-repeat 15px center; }
.sub-btn-group .download-btn:hover::before {width: 140%;}

.sub-btn-group .card-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;}
.sub-btn-group .card-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .card-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon3.png") no-repeat 15px center;  padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;}

.sub-btn-group .card-btn:hover {border-color: #10489F;}
.sub-btn-group .card-btn:hover span {color: #fff; background: url("../../images/common/btn_icon3_on.png") no-repeat 15px center; }
.sub-btn-group .card-btn:hover::before {width: 140%;}

.sub-btn-group .home-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;}
.sub-btn-group .home-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .home-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon4.png") no-repeat 15px center;  padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;}

.sub-btn-group .home-btn:hover {border-color: #10489F;}
.sub-btn-group .home-btn:hover span {color: #fff; background: url("../../images/common/btn_icon4_on.png") no-repeat 15px center; }
.sub-btn-group .home-btn:hover::before {width: 140%;}

.sub-btn-group .flag-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;}
.sub-btn-group .flag-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .flag-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon5.png") no-repeat 15px center;  padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;}

.sub-btn-group .flag-btn:hover {border-color: #10489F;}
.sub-btn-group .flag-btn:hover span {color: #fff; background: url("../../images/common/btn_icon5_on.png") no-repeat 15px center; }
.sub-btn-group .flag-btn:hover::before {width: 140%;}

.sub-btn-group .call-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;}
.sub-btn-group .call-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);}
.sub-btn-group .call-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon6.png") no-repeat 15px center;  padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;}

.sub-btn-group .call-btn:hover {border-color: #10489F;}
.sub-btn-group .call-btn:hover span {color: #fff; background: url("../../images/common/btn_icon6_on.png") no-repeat 15px center; }
.sub-btn-group .call-btn:hover::before {width: 140%;;}

.sub-btn-group .privacy-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; transition: all 0.3s; margin-left: 10px; background: #fff; vertical-align: top;}
.sub-btn-group .privacy-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_arrow.png") no-repeat 8px center;  padding: 4px 15px 4px 20px; transition: all 0.3s; font-size: 13px; color: #666666;}

.sub-btn-group .privacy-btn:hover {border-color: #10489F;}
.sub-btn-group .privacy-btn span {color: #666666;}

@media all and (max-width: 1023px){

}

/* 로그인 */
.login-content {max-width: 1000px; margin: 0 auto; background: url("../../images/login/logo_bg.png") no-repeat right bottom;}
.login-bx {overflow: hidden;}
.login-form {float: left; width: 50%; padding-right: 5%; margin-right: 5%; box-sizing: border-box;}
.login-form .login-title {padding-right: 75px; background: url("../../images/login/ic_lock.png") no-repeat right center; margin-bottom: 25px;}
.login-form .login-title h3 {font-size: 35px; line-height: 40px; letter-spacing: -0.5px; color: #000000; font-family: "Noto Regular"; margin-bottom: 10px;}
.login-form .login-title p {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #000000;}
.login-form .login-title p span {color: #1e5ba8;}

.login-input {padding: 35px 0; border-bottom: 1px solid #D4D4D4; border-top: 1px solid #D4D4D4; }
.login-input input {width: 100%; height: 50px; padding: 0 15px; font-size: 16px; letter-spacing: -0.5px; border-radius: 5px; background: #F5F5F5; border: 0;}
.login-input input:first-child {margin-bottom: 10px;}

.login-bottom {padding: 30px 0; border-bottom: 1px solid #D4D4D4;}
.login-bottom .check-custom {float: left;}
.login-bottom .check-custom input {display: none;}
.login-bottom .check-custom label {position: relative; padding-left: 35px; }
.login-bottom .check-custom label::before {content: ""; position: absolute; width: 25px; height: 25px; background: url("../../images/login/check_off.png") no-repeat; left: 0; top: 0px;}
.login-bottom input:checked + label::before {background: url("../../images/login/check_on.png") no-repeat;}

.login-bottom ul {float: right;}
.login-bottom ul li {float: left;}
.login-bottom ul li:first-child::after {content: ""; display: inline-block; vertical-align: middle; margin: 0 10px; width: 1px; height: 15px; background: #9F9F9F;}
.login-bottom ul li a {display: inline-block; font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5e605f; border-bottom: 1px solid #fff; transition: all 0.3s;}
.login-bottom ul li a:hover {color: #006cc7; border-bottom: 1px solid #3D83CE;}

.login-info {position: relative; float: right; width: 45%;}
.login-info::before {content: ""; position: absolute; width: 100%; height: 6px; background: url("../../images/login/info_bg.png"); left: 0; top: 0;}
.login-info::after {content: ""; position: absolute; width: 100%; height: 6px; background: url("../../images/login/info_bg.png"); left: 0; bottom: 0;}
.login-info-bx {padding: 30px 4% 60px; background: rgba(255, 255, 255, 0.7); margin: 6px;}
.login-info-bx::before {content: ""; position: absolute; width: 6px; background: url("../../images/login/info_bg.png"); left: 0; top: 6px; bottom: 6px; box-sizing: border-box;}
.login-info-bx::after {content: ""; position: absolute; width: 6px; background: url("../../images/login/info_bg.png"); right: 0; top: 6px; bottom: 6px; box-sizing: border-box;}
.login-info-bx .login-info-inner:first-child {margin-bottom: 30px;}

.login-info-bx .login-info-inner .title {font-size: 18px; line-height: 25px; letter-spacing: -0.5px; color: #006cc7; font-family: "Noto Medium"; margin-bottom: 7px;}
.login-info-bx .login-info-inner .info {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5f5f5f;}
.login-info-bx .login-info-inner ul li {position: relative; font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5f5f5f; padding-left: 15px;}
.login-info-bx .login-info-inner ul li::before {content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 0; top: 9px; background: #9A9A9A;}

.login-btn {padding-top: 80px; text-align: center;}
.login-btn .login-btn-bx {position: relative; display: inline-block; width: 190px; height: 70px; border-radius: 40px; background: #006CC7;}
.login-btn .login-btn-bx::before {content: ""; position: absolute; width: 0%; height: 100%; left: -40px; top: 0; transform: skewX(-45deg); transition: all 0.5s; z-index: 1; background: #fff;}
.login-btn a {position: relative; display: inline-block; line-height: 67px; font-size: 18px; letter-spacing: -0.5px; color: #fff; font-family: "Noto Medium"; border: 2px solid transparent; transition: all 0.5s; z-index: 4; width: 190px; height: 70px; border-radius: 40px;}

.login-btn .login-btn-bx:hover::before {width: 140%;}
.login-btn a:hover {border: 2px solid #006CC7; color: #006CC7;}

@media all and (max-width: 767px){
  .login-form {float: none; width: 100%; padding-right: 0; margin-right: 0; margin-bottom: 20px;}
  .login-info {float: none; width: 100%;}
}


.wrap-location .desc {position: relative; display: inline-block; width: 100%; margin: -31px 0 0 0; padding: 21px 0 21px 30px; background: #EDF1F4; }
.wrap-location .desc .address,
.wrap-location .desc .tel {position: relative; float: left; padding:10px 0 10px 80px;}
.wrap-location .desc .tel::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../../images/common/ic_call.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;}
.wrap-location .desc .address {margin-right: 45px;}
.wrap-location .desc .address::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../../images/common/ic_location.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;}
.wrap-location .desc strong {display:block; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; color: #333333}
.wrap-location .desc p {font-family: 'Noto Light'; font-size: 16px; color: #333;}
.wrap-location .desc .btn-location {float: right; position: relative; padding: 15px 0 15px 20px; background: #003956 url('../../images/button/btn_repeat_bg.png'); font-family: 'Noto Regular'; font-size: 18px; color: #fff; width: 190px; margin-right: 30px; }
.wrap-location .desc .btn-location::after {content: ""; position: absolute; width: 30px; height: 30px; background: url("../../images/common/ic_location_arrow.png") no-repeat center; right: 20px; top: 14px; transition: right 0.5s;}
.wrap-location .desc .btn-location:hover::after {right: 15px;}

@media all and (max-width: 950px) {
  .wrap-location .desc .address,
  .wrap-location .desc .tel {float: none; width: 100%}
}

@media all and (max-width: 750px) {
  .wrap-location .desc .btn-location {isplay: inline-block; margin-top: 10px;}
}