@charset "utf-8";

/* Copy Code */
.copyBtn {position: absolute; right: 100%; top: 0; z-index: 100; padding-right: 1rem;}
.copyBtn span {display: inline-block; background: #fff; padding: .7rem 1.5rem; border: 1px solid #d1d1d1; border-radius: 1rem; font-family: pb; white-space: nowrap; opacity: 0; transition: opacity .45s;}
.copyBtn.on span {opacity: 1;}
.copyBtn:hover span {background: #00aae5; border: 1px solid #00aae5; color: #fff;}

@media screen and (max-width: 1100px) {
  .copyCode .copyBtn {display: none;}
}

/* Heading */
.hansung .objHeading_h2 {position: relative; display: block; margin-top: 6rem; padding-left: 2rem; font-family: peb; font-size: 3.4rem; line-height: 1.2; color: #212121;}
.hansung .objHeading_h2::before {content: ''; position: absolute; left: 0; top: .8rem; width: .5rem; height: 2.6rem; background: #0064ef; border-radius: .3rem;}
.hansung.en .objHeading_h2 {font-size: 3rem;}
.hansung.en .objHeading_h2::before {top: .5rem;}
.hansung .objHeading_h3 {position: relative; display: block; margin-top: 4rem; padding-left: 2.5rem; font-family: pb; font-size: 2.8rem; line-height: 1.2;  color: #333333;}
.hansung .objHeading_h3.bridge {margin-top: 3rem;}
.hansung .objHeading_h3::before {content: ''; position: absolute; left: 0; top: .9rem; width: 1.6rem; height: 1.6rem; background: url('../../images/guide/ic-sbj2.png') no-repeat center / 1.6rem auto;}
.hansung .objHeading_h4 {position: relative; display: block; margin-top: 3.2rem; padding-left: 2rem; font-family: psb; font-size: 2.4rem; line-height: 1.2; color: #0599d9;}
.hansung .objHeading_h4.bridge {margin-top: 2.3rem;}
.hansung .objHeading_h4::before {content: ''; position: absolute; left: 0; top: .9rem; width: .9rem; height: .9rem; background: #00aae5; border-radius: 100%;}
.hansung .objHeading_h5 {position: relative; display: block; margin-top: 3rem; padding-left: 2rem; font-family: pm; font-size: 2.2rem; line-height: 1.2; color: #3f8edd;}
.hansung .objHeading_h5::before {content: ''; position: absolute; left: 0; top: 1.1rem; width: .5rem; height: .5rem; background: #3f8edd;}

.hansung .objHeading_h2.no-margin,
.hansung .objHeading_h3.no-margin,
.hansung .objHeading_h4.no-margin,
.hansung .objHeading_h5.no-margin {margin-top: 0;}

.hansung .no-margin .objHeading_h2,
.hansung .no-margin .objHeading_h3,
.hansung .no-margin .objHeading_h4,
.hansung .no-margin .objHeading_h5 {margin-top: 0;}

@media screen and (max-width: 700px) {
  .hansung .objHeading_h2 {margin-top: 4rem; font-size: 2.6rem;}
  .hansung .objHeading_h2::before {top: .4rem;}
  .hansung .en .objHeading_h2 {font-size: 2.2rem;}
  .hansung .en .objHeading_h2::before {top: .1rem; height: 2.2rem;}
  .hansung .objHeading_h3 {margin-top: 3rem; font-size: 2.4rem;}
  .hansung .objHeading_h3::before {top: .6rem;}
  .hansung .objHeading_h3.bridge {margin-top: 2.5rem;}
  .hansung .objHeading_h4 {margin-top: 2.4rem; font-size: 2.2rem;}
  .hansung .objHeading_h4::before {top: .8rem;}
  .hansung .objHeading_h4.bridge {margin-top: 1.8rem;}
  .hansung .objHeading_h5 {font-size: 2rem;}
  .hansung .objHeading_h5::before {top: .9rem;}

  .hansung .objHeading_h2.no-margin,
  .hansung .objHeading_h3.no-margin,
  .hansung .objHeading_h4.no-margin,
  .hansung .objHeading_h5.no-margin {margin-top: 0;}

  .hansung .no-margin .objHeading_h2,
  .hansung .no-margin .objHeading_h3,
  .hansung .no-margin .objHeading_h4,
  .hansung .no-margin .objHeading_h5 {margin-top: 0;}
}

/* Description */
.con-desc {font-family: pm; font-size: 1.8rem; line-height: 1.65; color: #444444;}
.con-desc strong {font-family: psb;}
._objHtml.no-margin {margin-top: 0px !important;}
._objHtml.no-margin > div {margin-top: 0px !important;}

@media screen and (max-width: 700px) {
  .con-desc {font-size: 1.6rem;}
}

.cus-title {display: flex; justify-content: space-between; align-items: center; margin-top: 6rem;}
.cus-title .button {margin-left: 3rem;}
.cus-title .objHeading_h2 {margin-top: 0;}
.cus-title .btn-style2 {position: relative; top: -.3rem;}

@media screen and (max-width: 1100px) {
  .cus-title {justify-content: space-between;}
}

@media screen and (max-width: 768px) {
  .cus-title {flex-direction: column; align-items: flex-start;}
  .cus-title .button {margin-left: 0; margin-top: 2rem;}
}

.table-title {display: flex; align-items: center; justify-content: space-between; margin-top: 5rem;}
.table-title .objHeading_h2 {margin-top: 0;}

/* Align */
.align-r {text-align: right !important;}
.align-c {text-align: center !important;}
.align-l {text-align: left !important;}

/* Point Color */
.c1 {color:#0a4da1 !important;}
.c2 {color:#148c8a !important;}
.c3 {color:#ff921c !important;}
.c4 {color:#cb2026 !important;}
.c5 {color:#0782c1 !important;}
.b1 {font-family: pb !important;}
.b2 {font-family: psb !important;}
.l1 {position: relative; color:#000000 !important;}
.l1::after {content: ''; position: absolute; left: 0; bottom: -.1rem; width: 100%; height: .1rem; background: #000000;}

/* Link Line */
.link-line {position: relative; color: #666;}
.link-line:hover {color: #004a8f;}
.link-line::after {content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: .5rem; margin-right: .5rem; margin-top: -.3rem; background: url('../../images/guide/ico-table-link.png') no-repeat center center; vertical-align: middle;}

/* Table */
.con-table {position: relative; line-height: 1.6;}
.con-table:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #fff;}
.con-table table {position: relative;}
.con-table table::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #000000;}
.con-table table.align-c td {text-align: center;}
.con-table thead {position: relative;}
.con-table thead::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000000;}
.con-table thead th {padding: 1.35rem 1rem; background: #f1f1f1; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-weight: normal; font-family: pb; font-size: 1.8rem; color: #000000;}
.con-table tbody {display: table-header-group;}
.con-table tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8a8a8a;}
.con-table tbody th {padding: 1rem 2rem; background:#f8f8f8; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-family: pm; font-weight: 400; font-size: 1.8rem; color: #000000;}
.con-table tbody td {padding: 1rem 2rem; background:#fff; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-family: pr; font-size: 1.8rem; text-align: left; color: #555; line-height: 1.6;}
.con-table.center tbody td {text-align: center;}
.con-table tbody td .small {display: inline-block; line-height: 1.4; font-size: 1.5rem;}
.con-table tbody td a {color: #333;}
.con-table.mini thead th,
.con-table.mini tbody th,
.con-table.mini tbody td {padding: .7rem; font-size: 1.5rem;}
.con-table .align-l {text-align: left !important;}
.con-table .align-c {text-align: center !important;}
.con-table .align-r {text-align: right !important;}
.con-table .align-t {vertical-align: top !important;}

@media screen and (max-width: 768px){
  .con-table {overflow-x: hidden; min-height: 13rem;}
  .con-table.on {min-height: auto;}
  .con-table.no-scroll {min-height: auto;}
  .con-table table {width: 130rem;}
  .con-table.no-scroll table {width: 100%;}
  .con-table:after {content: ''; position: absolute; right: 0px; top: 0px; z-index: 1; width: 100%; height: 100%; background: rgba(31,59,101,0.1) url('../../images/guide/img_mobile_text.png') no-repeat center 2rem;}
  .en .con-table:after {background: rgba(31,59,101,0.1) url('../../images/guide/img_mobile_text_en.png') no-repeat center 2rem;}
  .con-table.on:after,
  .con-table.no-scroll:after {display: none;}
  .con-table thead th,
  .con-table tbody th,
  .con-table tbody td {font-size: 1.7rem;}
  /* 모바일 테이블 가로 짧게할경우 */
  .con-table.m-short table {width: 77rem;}
}

@media screen and (max-width:500px) {
  .con-table.m-short table {width: 50rem;} 
}

.con-table2 {position: relative; line-height: 1.6;}
.con-table2:after {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #0c0c0c;}
.con-table2 table {position: relative;}
.con-table2 table:after {content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: .2rem; background: #1473e6}
.con-table2 thead th {padding: 1.6rem 1rem; background: #ecf3fd; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; font-family: pm; font-size: 1.7rem; font-weight: 400; color: #000;}
.con-table2 tbody {display: table-header-group;}
.con-table2 tbody::after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #8a8a8a;}
.con-table2 tbody th {padding: 1.6rem 1.9rem; background:#ecf3fd; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; font-family: pm; font-size: 1.7rem; font-weight: 400; color: #000;}
.con-table2 tbody td {padding: 1.6rem 1.9rem; background:#fff; border-right: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5; font-family: pr; font-size: 1.7rem; text-align: left; color: #333333;}
.con-table2 tbody td.foot {background: #fafafa;}
.con-table2.center tbody td {text-align: center;}
.con-table2.mini thead th,
.con-table2.mini tbody th,
.con-table2.mini tbody td {padding: .7rem; font-size: 1.5rem;}
.con-table2.links tbody td {vertical-align: middle;}
.con-table2.links tbody td > div {display: flex; align-items: center;}
.con-table2.links tbody td p {flex: 1; float: left;}
.con-table2.links tbody td p span {font-size: 1.4rem;}
.con-table2.links tbody td a {float: right;}
.con-table2 tbody td a {color: #333;}
.con-table2 .list > li {position: relative; padding-left: 1.5rem;}
.con-table2 .list > li:after {content: ''; position: absolute; left: 0; top: 1.1rem; width: .3rem; height: .3rem; background: #111; border-radius: 100%;}
.con-table2 .list2 > li {position: relative; padding-left: 1.5rem;}
.con-table2 .list2 > li:after {content: ''; position: absolute; left: 0; top: 1rem; width: .7rem; height: .2rem; background: #777;}
.con-table2 .align-l {text-align: left !important;}
.con-table2 .align-c {text-align: center !important;}
.con-table2 .align-r {text-align: right !important;}
.con-table2 .align-t {vertical-align: top !important;}
.con-table2 strong {font-family: pm; color: #000;}

.con-table2 .link {position: relative; color: #333;}
.con-table2 .link:hover {color: #00abb3;}
.con-table2 .link::after {content: ''; display: inline-block; width: 1rem; height: 1rem; margin-left: .5rem; margin-right: .5rem; margin-top: -.3rem; background: url('../../images/guide/ico-table-link.png') no-repeat center center; vertical-align: middle;}

.con-table2 .home {position: relative; color: #333;}
.con-table2 .home:hover {color: #00abb3;}
.con-table2 .home span {position: relative; background: linear-gradient(to bottom, transparent 96%, #00abb3 0) left center no-repeat; background-size: 0; transition: .4s;}
.con-table2 .home:hover span {background-size: 100% auto;}
.con-table2 .home::after {content: ''; display: inline-block; width: 2.5rem; height: 2.5rem; margin-left: .5rem; margin-right: .5rem; margin-top: -.3rem; background: url('../../images/guide/ic-link-home.png') no-repeat center center; vertical-align: middle;}
.con-table2 .home:hover::after {background: url('../../images/guide/ic-link-home-hover.png') no-repeat center center;}

.con-table2 .down {position: relative; color: #333;}
.con-table2 .down:hover {color: #00abb3;}
.con-table2 .down span {position: relative; background: linear-gradient(to bottom, transparent 96%, #004a8f 0) left center no-repeat; background-size: 0; transition: .4s;}
.con-table2 .down:hover span {background-size: 100% auto;}
.con-table2 .down::after {content: ''; display: inline-block; width: 2.5rem; height: 2.5rem; margin-left: .5rem; margin-right: .5rem; margin-top: -.3rem; background: url('../../images/guide/ic-link-down.png') no-repeat center center; vertical-align: middle;}
.con-table2 .down:hover::after {background: url('../../images/guide/ic-link-down-hover.png') no-repeat center center;}

@media screen and (max-width: 768px){
  .con-table2 thead th,
  .con-table2 tbody th,
  .con-table2 tbody td {font-size: 1.7rem;}
  .con-table2 {overflow-x: hidden; min-height: 13rem;}
  .con-table2.on {min-height: auto;}
  .con-table2.no-scroll {min-height: auto;}
  .con-table2 table {width: 130rem;}
  .con-table2.no-scroll table {width: 100%;}
  .con-table2:after {content: ''; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background: rgba(31,59,101,0.1) url('../../images/guide/img_mobile_text.png') no-repeat center 2rem;}
  .en .con-table2:after {background: rgba(31,59,101,0.1) url('../../images/guide/img_mobile_text_en.png') no-repeat center 2rem;}
  .con-table2.on:after,
  .con-table2.no-scroll:after {display: none;}
}

/* Tab */
.tab_div .mobile-tab {display: none;}

@media screen and (max-width: 768px) {
  .tab_div {position: relative;}
  .tab_div .mobile-tab {position: relative; display: block; width: 100%; height: 4.5rem; padding: 0 2rem; text-align: left;}
  .tab_div.div_5 .mobile-tab {margin-bottom: 0;}
  .tab_div ul.on {z-index: 10; max-height: 60rem; padding: 1rem 0;}
  .tab_div ul li a {display: block; height: auto; padding: 1.3rem 4rem; border-bottom: 1px solid #d1d1d1; font-size: 1.6rem; text-align: left; line-height: normal;}
  .tab_div ul li a:hover {border-bottom: 0}
  .tab_div ul li a:after {display: none;}
  .tab_div ul li a[target=_blank]  {background-position: 97% center !important;}
  .tab_div ul li a span {position: relative; display: block;}
  .tab_div ul li a span:before {bottom: -1.1rem;}
  .tab_div ul li:after {display: none;}
}

/* 4Depth Tab */
.wrap-tab {position: relative; z-index: 11;}
.tab_div.div_4 {overflow: hidden; position: relative; z-index: 1; font-size: 0;}
.tab_div .ul_4 {position: relative; display: flex; flex-wrap: wrap; align-items: center; background: #f5f5f5; border-radius: 1rem 1rem 0 0;}
.tab_div .ul_4::before {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #f5f5f5;z-index: 1;}
.tab_div .ul_4::after {content: ''; position: absolute; left: 0; bottom: 0; width: .1rem; height: calc(100% - 1rem); background: #f5f5f5;}
.tab_div .ul_4 > li {position: relative; width: 25%; height: 100%;border-bottom: 1px solid #dadada;}
.tab_div .ul_4 > li::after {content: ''; position: absolute; top: 50%; width: 1px; height: 2.5rem; background: #dadada; transform: translate(0, -50%);}
.tab_div .ul_4 > li._active::after {display: none;}
.tab_div .ul_4 > li > a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1.6rem 1.7rem; font-family: pm; font-size: 2.2rem; color: #8a8a8a; text-align: center; transition: .25s;}
.tab_div .ul_4 > li > a:hover::after,
.tab_div .ul_4 > li > a._active::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: .5rem; background: #0a4da1;}
.tab_div .ul_4 > li > a:hover,
.tab_div .ul_4 > li > a._active {font-family: pb; color: #0a4da1;}
.tab_div .ul_4 > li > a[target="_blank"] span::after {content: ''; position: relative; top: -.2rem; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 1.5rem; background: url('../../images/guide/new-win2.png') no-repeat center bottom / 1.2rem auto;}
.tab_div .ul_4 > li > a[target="_blank"]._active span::after,
.tab_div .ul_4 > li > a[target="_blank"]:hover span::after {background-position: center top;}

@media screen and (max-width: 1000px) {
  .tab_div .ul_4 > li {width: 50%;}
  .tab_div .ul_4 > li > a {padding: 1.2rem 1.7rem;}
}

@media screen and (max-width: 768px) {
  .tab_div.div_4 {overflow: visible; margin-top: 3.5rem; border: 0 solid #000;}
  .tab_div.div_4 .mobile-tab {background: #0a4da1 url('../../images/guide/arrow-sel.png') no-repeat calc(100% - 2rem) center; border-radius: .5rem; font-family: pb; font-size: 1.6rem; color: #fff;}
  .tab_div.div_4 .mobile-tab.on {background: #0a4da1 url('../../images/guide/arrow-sel-on.png') no-repeat calc(100% - 2rem) center;}
  .tab_div .ul_4 {overflow: hidden; position: absolute; top: calc(100% - .5rem); z-index: -1 !important; width: 100%; max-height: 0; background: #cee1fa; border-radius: 0 0 .5rem .5rem; transition: all 0.5s ease;}
  .tab_div .ul_4::after {display: none;}
  .tab_div .ul_4::before {display: none;}
  .tab_div .ul_4 > li {display: block; width: 100% !important; padding: 0; margin: 0; padding: 1rem 0; background: url('../../images/guide/arrow-sel-child.png') no-repeat calc(100% - 2rem) center; border: 0;}
  .tab_div .ul_4 > li._active,
  .tab_div .ul_4 > li:hover {background: url('../../images/guide/arrow-sel-child-on.png') no-repeat calc(100% - 2rem) center;}
  .tab_div .ul_4 > li::before {display: none;}
  .tab_div .ul_4 > li > a {justify-content: flex-start; padding: 0 2rem; border: 0; font-size: 1.6rem; text-align: left; color: rgba(10,77,161,.8);}
  .tab_div .ul_4 > li > a._active,
  .tab_div .ul_4 > li > a:hover {font-family: pm; background: transparent; color: rgba(10,77,161,1);}
  .tab_div .ul_4 > li > a[target="_blank"] span::after {position: absolute; left: 100%; top: .2rem; background: url('../../images/guide/new-win.png') no-repeat center;}
  .tab_div .ul_4 > li > a span::before {content: ''; position: absolute; left: 0; bottom: -.2rem; width: 0; height: .1rem; background: #4671b3; transition: width .35s;}
  .tab_div .ul_4 > li > a._active span::before,
  .tab_div .ul_4 > li > a:hover span::before {width: 100%;}
}

/* 5Depth Tab */
.tab_div.div_5 {margin-top: 3rem;}
.tab_div .ul_5 {display: flex; flex-wrap: wrap;}
.tab_div .ul_5 > li {margin: 1rem 1.7rem 1rem 0;}
.tab_div .ul_5 > li > a {display: flex; justify-content: center; align-items: center; position: relative; padding: 1.2rem 3rem; border: 1px solid #dadada; font-family: pm; font-size: 1.8rem; color: #8a8a8a; transition: .3s;}
.tab_div .ul_5 > li > a._active {background: #eff6ff;border: 1px solid #3988ed; color: #3988ed;font-family: pb;}
.tab_div .ul_5 > li > a:hover {background: #eff6ff;border: 1px solid #3988ed; color: #3988ed;}
.tab_div .ul_5 > li > a[target="_blank"] span::after {content: ''; position: relative; top: 0rem; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 1.5rem; background: url('../../images/guide/new-win2.png') no-repeat center bottom / 1.2rem auto;}
.tab_div .ul_5 > li > a[target="_blank"]._active span::after,
.tab_div .ul_5 > li > a[target="_blank"]:hover span::after {background-position: center top;background-image: url('../../images/guide/new-win3-on.png')}

@media screen and (max-width: 768px) {
  .tab_div.div_5 {overflow: visible; border: 0 solid #000; margin-top: 1.5rem;}
  .tab_div.div_5 .mobile-tab {height: 4rem; background: #d8e7fb url('../../images/guide/arrow-sel2.png') no-repeat calc(100% - 2rem) center; border-radius: 0; font-family: pb; font-size: 1.6rem; color: #3988ed;}
  .tab_div.div_5 .mobile-tab.on {background: #d8e7fb url('../../images/guide/arrow-sel2-on.png') no-repeat calc(100% - 2rem) center;}
  .tab_div .ul_5 {overflow: hidden; position: absolute; top: calc(100% - .5rem); z-index: -1 !important; width: 100%; max-height: 0; background: #d8e7fb; border-radius: .5rem; transition: all 0.5s ease;}
  .tab_div .ul_5 > li {display: block; width: 100% !important; padding: 0; margin: 0; padding: 1rem 0; background: url('../../images/guide/arrow-sel-child2.png') no-repeat calc(100% - 2.2rem) center; border: 0;}
  .tab_div .ul_5 > li._active,
  .tab_div .ul_5 > li:hover {background: url('../../images/guide/arrow-sel-child2-on.png') no-repeat calc(100% - 2.2rem) center;}
  .tab_div .ul_5 > li::before {display: none;}
  .tab_div .ul_5 > li > a {justify-content: flex-start; padding: 0 2rem; border: 0 !important; font-size: 1.6rem; text-align: left; color: #8a8a8a;}
  .tab_div .ul_5 > li > a._active,
  .tab_div .ul_5 > li > a:hover {font-family: pb; background: transparent; color: #3988ed;}
  .tab_div .ul_5 > li > a[target="_blank"] span::after {position: absolute; left: 100%; top: .2rem; background: url('../../images/guide/new-win.png') no-repeat center;}
  .tab_div .ul_5 > li > a span::before {content: ''; position: absolute; left: 0; bottom: -.2rem; width: 0; height: .1rem; background: #3988ed; transition: width .35s;}
  .tab_div .ul_5 > li > a._active span::before,
  .tab_div .ul_5 > li > a:hover span::before {width: 100%;}
}

/* 대학소개 탭 */
.tab_div .con-mobile-tab {display: none;}

@media screen and (max-width: 768px) {
  .tab_div .con-mobile-tab  {position: relative; display: block; width: 100%; height: 4.5rem; margin-bottom: 1.5rem; padding: 0 2rem; text-align: left;}
}

.tab_div.div_con {overflow: hidden; position: relative; z-index: 10; margin-top: 4rem; font-size: 0;}
.tab_div.div_con.hide {display: none;}
.tab_div .ul_con {position: relative; display: flex; flex-wrap: wrap; align-items: center; background: #f5f5f5;}
.tab_div .ul_con::after {content: ''; position: absolute; left: 0; bottom: 0; width: .1rem; height: calc(100%); background: #f5f5f5;}
.tab_div .ul_con::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: .1rem; background: #f5f5f5;z-index: 1;}
.tab_div .ul_con > li {position: relative; width: 25%; height: 100%; border-bottom: 1px solid #dadada;}
.en .tab_div .ul_con > li {width: 33.333%;}
.tab_div .ul_con > li::after {content: ''; position: absolute; top: 50%; width: 1px; height: 2.5rem; background: #dadada; transform: translate(0, -50%);}
.tab_div .ul_con > li._active::after {display: none;}
.tab_div .ul_con > li > a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 1.7rem 1.7rem; font-family: psb; font-size: 2rem; color: #8a8a8a; text-align: center; transition: .25s;}
.en .tab_div .ul_con > li > a {font-size: 1.4rem;}
.tab_div .ul_con > li > a._active,
.tab_div .ul_con > li > a:hover {background: #032e6e; color: #fff;}
.tab_div .ul_con > li > a[target="_blank"] span::after {content: ''; position: relative; top: -.2rem; display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 1rem; background: url('../../images/guide/new-win2.png') no-repeat center bottom / 1.2rem auto;}
.tab_div .ul_con > li > a[target="_blank"]._active span::after,
.tab_div .ul_con > li > a[target="_blank"]:hover span::after {background-position: center top;}

@media screen and (max-width: 1300px) {
  .en .tab_div .ul_con > li {width: 50%;}
}

@media screen and (max-width: 1000px) {
  .tab_div .ul_con > li {width: 50%;}
  .tab_div .ul_con > li > a {padding: 1.2rem 1.7rem;}
}

@media screen and (max-width: 768px) {
  .tab_div.div_con {overflow: visible; margin-top: 3.5rem; border: 0 solid #000;}
  .tab_div.div_con .con-mobile-tab {background: #f5f5f5 url('../../images/guide/arrow-sel.png') no-repeat calc(100% - 2rem) center; border-radius: .5rem; font-family: pb; font-size: 1.6rem; color: #0a4da1;}
  .tab_div.div_con .con-mobile-tab.on {background: #f5f5f5 url('../../images/guide/arrow-sel-on.png') no-repeat calc(100% - 2rem) center;}
  .tab_div .ul_con {overflow: hidden; position: absolute; top: calc(100% + 1rem); z-index: -1; width: 100%; max-height: 0; background: #0a4da1; border-radius: .5rem; transition: all 0.5s ease;}
  .tab_div .ul_con::after {display: none;}
  .tab_div .ul_con > li {display: block; width: 100% !important; padding: 0; margin: 0; padding: 1rem 0; background: url('../../images/guide/arrow-sel-child.png') no-repeat calc(100% - 2rem) center; border: 0;}
  .tab_div .ul_con > li::before {display: none;}
  .tab_div .ul_con > li > a {justify-content: flex-start; padding: 0 2rem; border: 0; font-size: 1.6rem; text-align: left; color: #fff;}
  .tab_div .ul_con > li > a._active,
  .tab_div .ul_con > li > a:hover {font-family: psb; background: transparent; color: #fff;}
  .tab_div .ul_con > li > a[target="_blank"] span::after {position: absolute; left: 100%; top: .2rem; background: url('../../images/guide/new-win.png') no-repeat center;}
  .tab_div .ul_con > li > a span::before {content: ''; position: absolute; left: 0; bottom: -.2rem; width: 0; height: .1rem; background: #fff; transition: width .35s;}
  .tab_div .ul_con > li > a._active span::before,
  .tab_div .ul_con > li > a:hover span::before {width: 100%;}
}

/* List Type */
.con-list1 > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 2rem; font-family: pr; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.con-list1 > ul > li:first-child {margin-top: 0;}
.con-list1 > ul > li::before {content: ''; position: absolute; left: 0; top: 1.3rem; width: .8rem; height: 0; box-shadow: 0 0 0 .1rem #424242;}
.con-list1 > ul > li strong {font-family: psb; color: #333333;}

@media screen and (max-width: 700px) {
  .con-list1 > ul > li {font-size: 1.6rem;}
}

.con-list2 > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 1.5rem; font-family: pr; font-size: 1.6rem; line-height: 1.6; color: #666666;}
.con-list2 > ul > li:first-child {margin-top: 0;}
.con-list2 > ul > li::before {content: ''; position: absolute; left: 0; top: .9rem; width: .4rem; height: .4rem; background: #bbbbbb; border-radius: 100%;}
.con-list2 > ul > li strong {font-family: psb; color: #333333;}

.con-list3 > ul > li {position: relative; margin: .3rem 0 0 0; padding-left: 2rem; font-family: pm; font-size: 1.7rem; line-height: 1.6; color: #555555;}
.con-list3 > ul > li:first-child {margin-top: 0;}
.con-list3 > ul > li::before {content: ''; position: absolute; left: 0; top: 1rem; width: .6rem; height: .6rem; background: #c8c8c8; border-radius: 100%;}
.con-list3 > ul > li strong {font-family: psb; color: #333333;}

.con-list4 > ul > li {position: relative; margin: .5rem 0 0 0; font-family: pr; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.con-list4 > ul > li:first-child {margin-top: 0;}
.con-list4 > ul > li::before {display: none; content: ''; position: absolute; left: 0; top: 1rem; width: .5rem; height: .5rem; background: #424242; border-radius: 100%;}
.con-list4 > ul > li strong {font-family: psb; color: #333333;}

@media screen and (max-width: 700px) {
  .con-list4 > ul > li {font-size: 1.6rem;}
}

.circle-num-title {position: relative; padding-left: 2.5rem; font-family: pm; font-size: 1.8rem; line-height: 2rem; color: #222;}
.circle-num-title .num {position: absolute; left: 0; top: .2rem; display: inline-block; width: 1.6rem; height: 1.6rem; margin-right: .5rem; background: #fcaf17; border-radius: 50%; font-family: pm; font-size: 1rem; vertical-align: middle; text-align: center; line-height: 1.7rem; color: #111;}

.circle-num-list > ul > li {position: relative; margin: .8rem 0 0 0; padding-left: 3rem; font-family: pm; font-size: 1.8rem; line-height: 1.6; color: #555;}
.circle-num-list > ul > li > .num {position: absolute; left: 0; top: .4rem; display: flex; justify-content: center; width: 2rem; height: 2rem; background: #555555; font-family: pb; font-size: 1.2rem; text-align: center; line-height: 2rem; color: #fff;}
.circle-num-list > ul > li strong {font-family: psb; color: #111111;}
.circle-num-list.reverse  > ul > li > .num {background: #fff; border: 1px solid #555555; color: #171717;}
.circle-num-list.circle > ul > li {font-size: 1.6rem; color: #555555;}
.circle-num-list.circle > ul > li > .num {width: 1.8rem; height: 1.8rem; background: #979797; border-radius: 100%; font-size: 1rem; line-height: 1.8rem;}

@media screen and (max-width: 700px) {
  .circle-num-list > ul > li {font-size: 1.6rem;}
}

.circle-text-list > ul > li {position: relative; margin: 1rem 0 0 0; padding-left: 3.5rem; font-family: pm; font-size: 1.6rem; line-height: 1.6; color: #555555;}
.circle-text-list > ul > li > .num {position: absolute; left: 0; top: .2rem; display: flex; justify-content: center; width: 2rem; height: 2rem; background: #979797; border-radius: 100%; font-family: pm; font-size: 1.2rem; text-align: center; line-height: 2rem; color: #fff;}
.circle-text-list > ul > li strong {font-family: psb; color: #111111;}
.circle-text-list.rect > ul > li {font-size: 1.8rem;}
.circle-text-list.rect > ul > li > .num {top: .5rem; background: #555555; border-radius: .5rem;}

@media screen and (max-width: 700px) {
  .circle-text-list.rect > ul > li {font-size: 1.6rem;}
}

/* Notify Text */
.noti-txt {position: relative; display: block; padding: 0 0 0 2.5rem; font-family: pm; font-size: 1.6rem; color: #888;}
.noti-txt::after {content: ''; position: absolute; left: 0; top: .35rem; width: 1.6rem; height: 1.6rem;}
.noti-txt.color1.font-color {color: #3f8edd;}
.noti-txt.color1::after {background: url('../../images/guide/ic-noti1.png') no-repeat center / 1.6rem auto;}
.noti-txt.color2.font-color {color: #ad0000;}
.noti-txt.color2::after {background: url('../../images/guide/ic-noti2.png') no-repeat center / 1.6rem auto;}
.noti-txt.color3.font-color {color: #333333;}
.noti-txt.color3::after {background: url('../../images/guide/ic-noti3.png') no-repeat center / 1.6rem auto;}
.noti-txt.color4.font-color {color: #0a4da1;}
.noti-txt.color4::after {background: url('../../images/guide/ic-noti4.png') no-repeat center / 1.6rem auto;}

/* Btn Style */
.down-style {display: inline-flex; align-items: center; min-width: 18rem;}
.down-style .ico {display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; margin-right: 1.5rem;}
.down-style .ico.color1 {background: #049edb}
.down-style .ico.color2 {background: #0a4da1}
.down-style:hover .ico {background: #222222;}
.down-style span {position: relative; font-family: pm; font-size: 1.8rem; color: #666666;}
.down-style:hover span {color: #222222;}
.down-style span::before {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: .1rem; background: #222222; transition: width .35s;}
.down-style:hover span::before {width: 100%;}

@media screen and (max-width: 700px) {
  .down-style .ico {width: 4rem; height: 4rem;}
  .down-style span {font-size: 1.6rem;}
}

/* 큰버튼 */
.btn-style {position: relative; display: inline-flex; align-items: center; height: 4.5rem; padding: 0 2.5rem; font-family: pm; font-size: 1.4rem; color: #fff !important; cursor: pointer;}
.btn-style.type1 {padding:0 5rem 0 2.5rem; position: relative; font-size: 1.8rem;}
.btn-style.type1.small {height: 3.5rem; padding: 0 3.5rem 0 1.5rem; font-size: 1.4rem;}
.btn-style.type1.small::after {right: 1.5rem !important}
.btn-style.type1.color1 {color:#049edb !important; border:.1rem solid #049edb; background: linear-gradient(135deg, #049edb 50%, #fff 50%); background-position:100%; background-size:400%; transition:.5s; transition-property:background, color;}
.btn-style.type1.color1::after {content:''; width:.8rem; height:.8rem; background:url('../../images/guide/ic-btn-color1.png') no-repeat center; position:absolute; right:2.5rem; top:50%; transition:background .3s; transform: translate(0, -50%);}
.btn-style.type1.color2 {color:#666465 !important; border:.1rem solid #666465; background: linear-gradient(135deg, #666465 50%, #fff 50%); background-position:99%; background-size:400%; transition:.5s; transition-property:background, color;}
.btn-style.type1.color2::after {content:''; width:.8rem; height:.8rem; background:url('../../images/guide/ic-btn-color2.png') no-repeat center; position:absolute; right:2.5rem; top:50%; transition:background .3s; transform: translate(0, -50%);}
.btn-style.type1.color3 {color:#000000 !important; border:.1rem solid #000000; background: linear-gradient(135deg, #000000 50%, #fff 50%); background-position:100%; background-size:400%; transition:.5s; transition-property:background, color;}
.btn-style.type1.color3::after {content:''; width:.8rem; height:.8rem; background:url('../../images/guide/ic-btn-color3.png') no-repeat center; position:absolute; right:2.5rem; top:50%; transition:background .3s; transform: translate(0, -50%);}
.btn-style.type1.color4 {padding-right: 4rem; color:#666666 !important; border:.1rem solid #c4c4c4; background: linear-gradient(135deg, #0b4da2 50%, #fff 50%); background-position:100%; background-size:400%; transition:.5s; transition-property:background, color;}
.btn-style.type1.color4::after {content:''; width:.6rem; height:.9rem; background:url('../../images/guide/ic-btn-color4.png') no-repeat center; position:absolute; right:2.5rem; top:50%; transition:background .3s; transform: translate(0, -50%);}
.btn-style.type1.color5 {padding-right: 5rem; color:#666666 !important; border:.1rem solid #c4c4c4; background: linear-gradient(135deg, #0b4da2 50%, #fff 50%); background-position:100%; background-size:400%; transition:.5s; transition-property:background, color;}
.btn-style.type1.color5::after {content:''; width:1.5rem; height:1.3rem; background:url('../../images/guide/ic-btn-color5.png') no-repeat center; position:absolute; right:2.5rem; top:50%; transition:background .3s; transform: translate(0, -50%);}

/* hover */
.btn-style.type1:hover,
.btn-style.type1.hover {color:#fff !important;}
.btn-style.type1.color1:hover,
.btn-style.type1.color1.hover {background-position:0%;}
.btn-style.type1.color1:hover::after,
.btn-style.type1.color1.hover::after {background:url('../../images/guide/ic-btn-color1-on.png') no-repeat center;}
.btn-style.type1.color2:hover,
.btn-style.type1.color2.hover {background-position:0%;}
.btn-style.type1.color2:hover::after,
.btn-style.type1.color2.hover::after {background:url('../../images/guide/ic-btn-color2-on.png') no-repeat center;}
.btn-style.type1.color3:hover,
.btn-style.type1.color3.hover {background-position:0%;}
.btn-style.type1.color3:hover::after,
.btn-style.type1.color3.hover::after {background:url('../../images/guide/ic-btn-color3-on.png') no-repeat center;}
.btn-style.type1.color4:hover,
.btn-style.type1.color4.hover {background-position:0%; border:.1rem solid #0b4da2;}
.btn-style.type1.color4:hover::after,
.btn-style.type1.color4.hover::after {background:url('../../images/guide/ic-btn-color4-on.png') no-repeat center;}
.btn-style.type1.color5:hover,
.btn-style.type1.color5.hover {background-position:0%; border:.1rem solid #0b4da2;}
.btn-style.type1.color5:hover::after,
.btn-style.type1.color5.hover::after {background:url('../../images/guide/ic-btn-color5-on.png') no-repeat center;}

@media screen and (max-width: 700px) {
  .btn-style {height: 3.5rem; font-size: 1.6rem;}
  .btn-style.type1 {padding: 0 4rem 0 2rem; font-size: 1.6rem ;}
  .btn-style.type1.color1::after {right: 1.7rem;}
  .btn-style.type1.color2::after {right: 1.7rem;}
  .btn-style.type1.color3::after {right: 1.7rem;}
}

.view-btn{border: .1rem solid #cdcdcd; border-radius: .5rem; background-color: white; font-size: 1.4rem; color: #888888 !important; display: inline-flex; align-items: center; padding: .6rem 1.4rem;}
.view-btn img{position: relative; top: .1rem; filter: invert(64%) sepia(0%) saturate(231%) hue-rotate(201deg) brightness(83%) contrast(92%); display: inline-block; margin-right: .4rem;}
.view-btn.hover,
.view-btn:hover{background-color: #eef7fd; border: .1rem solid #049edb; color: #049edb !important;}
.view-btn.hover img,
.view-btn:hover img{filter: invert(53%) sepia(60%) saturate(834%) hue-rotate(156deg) brightness(89%) contrast(93%);}

.down-btn{border: .1rem solid #cdcdcd; border-radius: .5rem; background-color: white; font-size: 1.4rem; color: #888888 !important; display: inline-flex; align-items: center; padding: .6rem 1.4rem;}
.down-btn img{filter: invert(64%) sepia(0%) saturate(231%) hue-rotate(201deg) brightness(83%) contrast(92%); margin-right: .4rem;}
.down-btn.hover,
.down-btn:hover{background-color: #eef7fd; border: .1rem solid #049edb; color: #049edb !important;}
.down-btn.hover img,
.down-btn:hover img{filter: invert(53%) sepia(60%) saturate(834%) hue-rotate(156deg) brightness(89%) contrast(93%);}
.down-btn#songPlay img{position: relative; top: .2rem;}

.file-link1{display: inline-block; border: .1rem solid #ec2109; font-size: 1.4rem; color: #666666 !important; padding: 1.2rem 4.1rem 1.2rem 6.6rem; background-image: url(../../images/guide/pdf_down.png); background-repeat: no-repeat; background-position: right 2rem center; transition: all .5s ease; position: relative; overflow: hidden; vertical-align: top; min-width: 19.5rem; background-color: white;}
.file-link1 span{text-indent: -9999rem; position: absolute; left: 0; top: 0; width: 4.5rem; height: 100%; transition: .35s;}
.file-link1.word{border: .1rem solid #2a579a;}
.file-link1.excel{border: .1rem solid #217245;}
.file-link1.power{border: .1rem solid #d04826;}
.file-link1.han{border: .1rem solid #1590d1;}
.file-link1.ai{border: .1rem solid #ff8713;}
.file-link1.pdf{border: .1rem solid #ec2109;}
.file-link1.pc{border: .1rem solid #0066b5;}
.file-link1 .word-logo{background: #2a579a url(../../images/guide/word_logo.png) no-repeat center center;}
.file-link1 .excel-logo{background: #217245 url(../../images/guide/excel_logo.png) no-repeat center center;}
.file-link1 .power-logo{background: #d04826 url(../../images/guide/power_logo.png) no-repeat center center;}
.file-link1 .hangul-logo{background: #1590d1 url(../../images/guide/han_logo.png) no-repeat center center;}
.file-link1 .ai-logo{background: #ff8713 url(../../images/guide/ai_logo.png) no-repeat center center;}
.file-link1 .pdf-logo{background: #ec2109 url(../../images/guide/pdf_logo.png) no-repeat center center;}
.file-link1 .pc-logo{background: #0066b5 url(../../images/guide/pc_logo.png) no-repeat center center;}
.file-link1:hover{border: .1rem solid #222222 !important; background-color: #f0f2f6;}
.file-link1.hover span,
.file-link1:hover span{background-color: #222222 !important;}

@media screen and (max-width: 700px) {
  .file-link1 {min-width: 15.5rem; padding: .7rem 4.1rem .7rem 6.1rem; background-position: right 1.5rem center;}
}

.go-btn {display: inline-flex; align-items: center; height: 6rem; padding: 0 1.5rem; background: #f0f2f6;}
.go-btn .icon {display: flex; margin-right: 1rem;}
.go-btn .text {font-family: pr; font-size: 1.6rem; color: #0d0d0d;}
.go-btn::after {content: ''; display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; margin-left: 5rem; background: #fff url('../../images/guide/btn-go-arrow.png') no-repeat center; border-radius: 100%;}
.go-btn:hover::after {background: #0b4da2 url('../../images/guide/btn-go-arrow-on.png') no-repeat center;}

@media screen and (max-width: 700px) {
  .go-btn {height: 4.5rem;}
  .go-btn::after {width: 3rem; height: 3rem; margin-left: 1rem;}
}

.line-box {position: relative; border:.2rem solid #d3d2d2; padding:3rem; border-radius:.5rem; overflow:hidden;}

.ic-list {display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; background: #eaeaea; padding: 3rem;}
.ic-list.bg1 {background: #049edb;}
.ic-list.bg2 {background: #000;}

@media screen and (max-width: 1400px) {
  .ic-list {display: none;}
}

/* Con Link */
.con-link::after {content: ''; position: relative; top: 0; display: inline-block; width: 1.2rem; height: 1.2rem; margin: 0 .5rem; background: url('../../images/guide/ic-con-link.png') no-repeat center top / 1.2rem auto;}
.con-link:hover::after {background: url('../../images/guide/ic-con-link.png') no-repeat center bottom / cover;}
.con-link span {position: relative; font-size: 1.8rem; color: #0782c1;}
.con-link:hover span {color: #0064ef;}
.con-link span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: .1rem; background: #0064ef; transition: width .35s;}
.con-link:hover span::after {width: 100%;}
.con-list2 .con-link span {font-size: 1.6rem;}

@media screen and (max-width: 1400px) {
  .con-link span {font-size: 1.6rem;}
}

/* Title Banner */
.wrap-title-banner {overflow: hidden;}
.wrap-title-banner .img  {overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.wrap-title-banner .thumb {position: relative; overflow: hidden;}
.wrap-title-banner .thumb img {width: 100%; height: 100%; object-fit: cover;}
.wrap-title-banner .desc {position: relative; right: 0; top: 0; z-index: 1; display: flex; justify-content: center; align-items: center; float: right; width: 50%; height: 100%; padding: 6rem 4rem; background: rgba(0,0,0,.6); text-align: center; font-family: pr; font-size: 2.8rem; line-height: 1.4; color: #ffffff;}

@media screen and (max-width: 1300px) {
  .wrap-title-banner .desc {width: 100%; font-size: 2.2rem;}
  .wrap-title-banner .desc br {display: none;}
}

@media screen and (max-width: 700px) {
  .wrap-title-banner .desc {padding: 5.5rem 4rem; font-size: 2.6rem;}
}

/* Link Banner */
.wrap-link-banner {padding: 3rem 4rem; border: 1px solid #dbdbdb;}
.wrap-link-banner ul {display: flex; flex-wrap: wrap;}
.wrap-link-banner li {width: calc(100% / 5); padding: 1rem 0;}
.wrap-link-banner a {position: relative; display: block; padding-left: 1.5rem; font-family: pm; font-size: 1.8rem; color: #333333;}
.wrap-link-banner a::before {content: ''; position: absolute; left: 0; top: 1rem; width: .4rem; height: .4rem; background: #bbbbbb; border-radius: 100%;}
.wrap-link-banner span {display: flex; justify-content: space-between; align-items: center;}
.wrap-link-banner span::after {content: ''; display: block; width: 2.5rem; height: 2.5rem; margin-left: 1.5rem; margin-right: 3rem ; background: url('../../images/guide/ic-link-banner.png') no-repeat top center / 2.5rem auto;}
.wrap-link-banner a:hover span::after {background-position: center bottom !important;}

@media screen and (max-width: 1470px) {
  .wrap-link-banner li {width: calc(100% / 3);}
}

@media screen and (max-width: 1020px) {
  .wrap-link-banner li {width: calc(100% / 2);}
}

@media screen and (max-width: 700px) {
  .wrap-link-banner {padding: 2rem 3rem;}
  .wrap-link-banner li {width: calc(100% / 1); padding: .5rem 0;}
  .wrap-link-banner a {font-size: 1.7rem;}
  .wrap-link-banner span {display: flex; justify-content: space-between; align-items: center;}
  .wrap-link-banner span::after {margin-right: 0;}
}

/* Track Banner */
.wrap-track-banner ul {display: flex; width: calc(100% + 4rem); flex-wrap: wrap;}
.wrap-track-banner li {padding-right: 4rem;}
.wrap-track-banner.col1 li {width: calc(100%);}
.wrap-track-banner.col2 li {width: calc(100% / 2);}
.wrap-track-banner.col3 li {width: calc(100% / 3);}
.wrap-track-banner.col4 li {width: calc(100% / 4);}
.wrap-track-banner.col5 li {width: calc(100% / 5);}
.wrap-track-banner .box {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; padding: 2rem 4rem 5rem 4rem; border: 1px solid #dbdbdb;}
.wrap-track-banner .box .title {display: flex; justify-content: center; align-items: center; width: 100%; height: 6rem; background: #0a4da1; border-radius: .5rem; font-family: pb; font-size: 2rem; color: #ffffff;}
.wrap-track-banner .box .desc {padding-top: 4rem; font-family: pm; font-size: 1.8rem; text-align: center; color: #444444;}
.wrap-track-banner .box .desc em {font-family: pb;}

@media screen and (max-width: 1320px) {
  .wrap-track-banner ul {width: calc(100% + 2rem);}
  .wrap-track-banner li {padding-right: 2rem;}
  .wrap-track-banner .box {padding: 2rem 2rem 3rem 2rem;}
  .wrap-track-banner .box .title {font-size: 1.9rem;}
  .wrap-track-banner .box .desc {padding-top: 3rem; font-size: 1.7rem;}
}

@media screen and (max-width: 1055px) {
  .wrap-track-banner li {padding-bottom: 2rem;}
  .wrap-track-banner.col1 li {width: calc(100%);}
  .wrap-track-banner.col2 li {width: calc(100% / 2);}
  .wrap-track-banner.col3 li {width: calc(100% / 2);}
  .wrap-track-banner.col4 li {width: calc(100% / 2);}
  .wrap-track-banner.col5 li {width: calc(100% / 2);}
}

@media screen and (max-width: 700px) {
  .wrap-track-banner li {width: calc(100%) !important;}
  .wrap-track-banner .box {padding: 2rem 4rem 2.5rem 4rem;}
  .wrap-track-banner .box .title {font-size: 2rem; border-radius: .5rem;}
  .wrap-track-banner .box .desc {padding-top: 2.5rem;}
}

/* List Banner */
.wrap-list-banner > ul {display: flex; flex-wrap: wrap; width: calc(100% + 4rem);}
.wrap-list-banner > ul > li {display: flex; width: 100%; padding-right: 4rem; padding-bottom: 4rem;}
.wrap-list-banner.space > ul > li {padding-bottom: 4rem;}
.wrap-list-banner.row > ul > li {padding-bottom: 0;}
.wrap-list-banner > ul > li .box {width: 100%; padding: 3.5rem 4rem; border: 1px solid #dbdbdb;}
.wrap-list-banner.col1 > ul > li {width: calc(100%);}
.wrap-list-banner.col2 > ul > li {width: calc(100% / 2);}
.wrap-list-banner.col3 > ul > li {width: calc(100% / 3);}
.wrap-list-banner.col4 > ul > li {width: calc(100% / 4);}
.wrap-list-banner.col5 > ul > li {width: calc(100% / 5);}
.wrap-list-banner .title strong {position: relative; padding-left: 4rem; font-family: pb; font-size: 2rem; color: #000000;}
.wrap-list-banner .title strong::after {content: ''; position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; background: url('../../images/guide/ic-list-banner.png') no-repeat center / 2.3rem auto;}
.wrap-list-banner .text {margin-top: 2rem; padding-left: 4rem; font-family: pm; font-size: 1.8rem; color: #444444;}
.wrap-list-banner .list {margin-top: 2rem; padding-left: 4rem;}
.wrap-list-banner.col2 .list {margin-top: 1rem;}
.wrap-list-banner.col2 > ul > li:nth-last-child(-n+2) {padding-bottom: 0;}
.wrap-list-banner .list > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 2rem; font-family: pr; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.wrap-list-banner .list > ul > li:first-child {margin-top: 0;}
.wrap-list-banner .list > ul > li::before {content: ''; position: absolute; left: 0; top: 1.3rem; width: .8rem; height: 0; box-shadow: 0 0 0 .1rem #424242;}
.wrap-list-banner .list > ul > li strong {font-family: psb; color: #333333;}
.wrap-list-banner .list2 {margin-top: .5rem;}
.wrap-list-banner .list2 > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 1.5rem; font-family: pr; font-size: 1.6rem; line-height: 1.6; color: #666666;}
.wrap-list-banner .list2 > ul > li:first-child {margin-top: 0;}
.wrap-list-banner .list2 > ul > li::before {content: ''; position: absolute; left: 0; top: 1rem; width: .4rem; height: .4rem; background: #bbbbbb; border-radius: 100%;}
.wrap-list-banner .list2 > ul > li strong {font-family: psb; color: #333333;}


@media screen and (max-width: 1220px) {
  .wrap-list-banner > ul > li {padding-bottom: 2rem;}
  .wrap-list-banner.col3 > ul > li {width: 50%;}
}

@media screen and (max-width: 850px) {
  .wrap-list-banner > ul > li .box {padding: 2rem 2.5rem;}
  .wrap-list-banner.col2 > ul > li {width: 100%;}
  .wrap-list-banner.col3 > ul > li {width: 100%;}
  .wrap-list-banner.col2 > ul > li:nth-last-child(2) {padding-bottom: 2rem;}
  .wrap-list-banner.space > ul > li {padding-bottom: 2rem;}
  .wrap-list-banner .text {margin-top: .5rem; font-size: 1.6rem;}
  .wrap-list-banner > ul {width: 100%;}
  .wrap-list-banner > ul > li {padding-right: 0;}
}

@media screen and (max-width: 700px) {
  .wrap-list-banner .list {margin-top: 1.1rem;}
  .wrap-list-banner .list > ul > li {font-size: 1.6rem;}
  .wrap-list-banner .list > ul > li::before {top: 1.1rem;}
  .wrap-list-banner .list2 > ul > li {font-size: 1.5rem;}
  .wrap-list-banner .list2 > ul > li::before {top: .9rem;}
}

.wrap-list-banner2 > ul {display: flex; flex-wrap: wrap;}
.wrap-list-banner2 > ul > li {width: 50%; padding-right: 4rem;}
.wrap-list-banner2 > ul > li.bg {background: #f7f7f7; padding: 4rem;}
.wrap-list-banner2 > ul > li .box {width: 100%; padding: 3.5rem 4rem; border: 1px solid #dbdbdb;}
.wrap-list-banner2 .title strong {position: relative; padding-left: 4rem; font-family: pb; font-size: 2rem; color: #000000;}
.wrap-list-banner2 .title strong::after {content: ''; position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; background: url('../../images/guide/ic-list-banner.png') no-repeat center / 2.3rem auto;}
.wrap-list-banner2 .list {margin-top: 2rem; padding-left: 4rem;}
.wrap-list-banner2 .list > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 2rem; font-family: pr; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.wrap-list-banner2 .list > ul > li:first-child {margin-top: 0;}
.wrap-list-banner2 .list > ul > li::before {content: ''; position: absolute; left: 0; top: 1.3rem; width: .8rem; height: 0; box-shadow: 0 0 0 .1rem #424242;}
.wrap-list-banner2 .list > ul > li strong {font-family: psb; color: #333333;}
.wrap-list-banner2 .location ul {display: flex; justify-content: space-between;}
.wrap-list-banner2 .location li {width: calc(50% - 2rem);}
.wrap-list-banner2 .location .subject {padding-bottom: 2rem; border-bottom: .2rem solid #000000;}
.wrap-list-banner2 .location .subject strong {display: flex; align-items: center; font-family: pb; font-size: 2.2rem; color: #000000;}
.wrap-list-banner2 .location .subject strong::before {content: ''; display: block; width: 7.5rem; height: 7.5rem; margin-right: 2.5rem; border-radius: 100%;}
.wrap-list-banner2 .location .ico1 strong::before {background: #fff url('../../images/guide/ic-location.png') no-repeat center / 3.9rem auto;}
.wrap-list-banner2 .location .ico2 strong::before {background: #fff url('../../images/guide/ic-tel.png') no-repeat center / 3.9rem auto;}
.wrap-list-banner2 .location .desc {margin-top: 2rem; font-family: pm; font-size: 1.8rem; color: #666666;}

@media screen and (max-width: 1195px) {
  .wrap-list-banner2 > ul > li.bg {padding: 3rem;}
  .wrap-list-banner2 .location ul {flex-direction: column;}
  .wrap-list-banner2 .location li {width: 100%; padding-bottom: 2rem;}
  .wrap-list-banner2 .location li:last-child {padding-bottom: 0;}
  .wrap-list-banner2 .location .subject strong {font-size: 2rem;}
  .wrap-list-banner2 .location .subject strong::before {width: 5.5rem; height: 5.5rem;}
  .wrap-list-banner2 .location .ico1 strong::before {background-size: 3rem auto;}
  .wrap-list-banner2 .location .ico2 strong::before {background-size: 3rem auto;}
}

@media screen and (max-width: 960px) {
  .wrap-list-banner2 > ul > li {width: 100%; padding-right: 0;}
  .wrap-list-banner2 > ul > li.bg {margin-top: 3rem;}
}

@media screen and (max-width: 700px) {
  .wrap-list-banner2 > ul {width: 100%;}
  .wrap-list-banner2 > ul > li .box {padding: 2rem 2.5rem;}
  .wrap-list-banner2 .list {margin-top: 1.1rem;}
  .wrap-list-banner2 .list > ul > li {font-size: 1.6rem;}
  .wrap-list-banner2 .list > ul > li::before {top: 1.1rem;}
  .wrap-list-banner2 .location li {display: flex; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: .2rem solid #000000;}
  .wrap-list-banner2 .location li:last-child {border: 0; margin-bottom: 0;}
  .wrap-list-banner2 .location .subject {flex-shrink: 0; width: 20rem; padding-bottom: 0; border: 0;}
  .wrap-list-banner2 .location .subject strong {font-size: 1.8rem;}
  .wrap-list-banner2 .location .desc {flex-grow: 1; margin-top: 0; font-size: 1.6rem;}
}

/* Goto Banner */
.wrap-goto-banner ul {display: flex; flex-wrap: wrap; width: calc(100% + 4rem);}
.wrap-goto-banner li {width: 50%; padding-right: 4rem;}
.wrap-goto-banner .box {display: flex; justify-content: space-between; align-items: center; height: 12rem; padding: 0 4rem; border: 1px solid #dddddd;}

@media screen and (max-width: 1190px) {
  .wrap-goto-banner ul {width: 100%;}
  .wrap-goto-banner li {width: 100%; padding-right: 0; padding-bottom: 3rem;}
}

@media screen and (max-width: 700px) {
  .wrap-goto-banner .box {height: 10rem; padding: 0 2rem;}
  .wrap-goto-banner .box .img {width: 35%;}
  .wrap-goto-banner .box img {width: 100%;}
}

/* Down Banner */
.wrap-down-banner ul {display: flex; flex-wrap: wrap; background: #f7f7f7; padding: 2rem 0;}
.wrap-down-banner li {position: relative; width: 50%;}
.wrap-down-banner li::after {content: ''; position: absolute; right: 0; top: 50%; width: .1rem; height: 2.6rem; background: #c6c6c6; transform: translate(0, -50%);}
.wrap-down-banner li:nth-child(even)::after {display: none;}
.wrap-down-banner .box {display: flex; justify-content: space-between; align-items: center; padding: .9rem 4rem;}
.wrap-down-banner .title {font-family: pm; font-size: 1.8rem; color: #333333;}
.wrap-down-banner .button {display: flex; align-items: center;}
.wrap-down-banner .button a {display: flex; align-items: center; height: 3.2rem; padding: 0 1.4rem; margin-left: .5rem; background: #fff; border: 1px solid #cdcdcd; border-radius: .5rem; font-family: pm; font-size: 1.4rem; color: #888888;}
.wrap-down-banner .button a:hover {background: #eef7fd; border-color: #14a4dd; color: #049edb;}
.wrap-down-banner .button a.ico1::before {content: ''; display: block; width: 1.8rem; height: 1.8rem; margin-right: 1rem; background: url('../../images/guide/ic-down1.png') no-repeat center top / 1.8rem auto;}
.wrap-down-banner .button a:hover.ico1::before {background-position: center bottom !important;}
.wrap-down-banner .button a.ico2::before {content: ''; display: block; width: 1.9rem; height: 1.9rem; margin-right: 1rem; background: url('../../images/guide/ic-down2.png') no-repeat center top / 1.9rem auto;}
.wrap-down-banner .button a:hover.ico2::before {background-position: center bottom !important;}

@media screen and (max-width: 1200px) {
  .wrap-down-banner li {width: 100%;}
  .wrap-down-banner li::after {display: none;}
}

@media screen and (max-width: 700px) {
  .wrap-down-banner ul {padding: 1rem 0;}
  .wrap-down-banner .box {display: flex; flex-direction: column; align-items: flex-start; padding: .9rem 2rem;}
  .wrap-down-banner .button {margin-top: .5rem;}
  .wrap-down-banner .button a {margin-left: 0; margin-right: .5rem;}
  .wrap-down-banner .title {font-size: 1.6rem;}
}

.wrap-down-banner2 ul {display: flex; flex-wrap: wrap; padding: 2rem 0; border: .5rem solid #eeeeee;}
.wrap-down-banner2 li {position: relative; width: 50%;}
.wrap-down-banner2.col4 li {width: 25%;}
.wrap-down-banner2 li::after {content: ''; position: absolute; right: 0; top: 50%; width: .1rem; height: 2.6rem; background: #c6c6c6; transform: translate(0, -50%);}
.wrap-down-banner2 li:nth-child(even)::after {display: none;}
.wrap-down-banner2.col4 li:nth-child(even)::after {display: block;}
.wrap-down-banner2.col4 li:nth-child(4n)::after {display: none;}
.wrap-down-banner2 .box {display: flex; justify-content: space-between; align-items: center; padding: .9rem 4rem;}
.wrap-down-banner2 .title {font-family: pm; font-size: 1.8rem; color: #222222;}
.wrap-down-banner2 .button {display: flex; align-items: center;}

@media screen and (max-width: 1400px) {
  .wrap-down-banner2 li {width: 100%;}
  .wrap-down-banner2.col4 li {width: 50%;}
  .wrap-down-banner2.col4 li::after {display: block;}
  .wrap-down-banner2.col4 li:nth-child(4n)::after {display: block;}
  .wrap-down-banner2.col4 li:nth-child(2n)::after {display: none;}
  .wrap-down-banner2 li::after {display: none;}
}

@media screen and (max-width: 790px) {
  .wrap-down-banner2 ul {padding: 1rem 0;}
  .wrap-down-banner2.col4 li {width: 100%;}
  .wrap-down-banner2.col4 li::after {display: none !important;}
  .wrap-down-banner2 .box {flex-direction: column; align-items: flex-start; padding: .9rem 2rem;}
  .wrap-down-banner2 .title {font-size: 1.6rem;}
  .wrap-down-banner2 .button {margin-top: 1rem;}
}

/* Track State */
.wrap-track-state .search {display: flex; justify-content: space-between; background: #eff6ff; padding: 3rem 4rem;}
.wrap-track-state .search .select {display: flex; align-items: center; padding-left: 9rem; background: url('../../images/guide/ic-track-state.png') no-repeat left center;}
.wrap-track-state .search .select select {display: flex; min-width: 25rem; height: 6rem; padding-left: 1.5rem; padding-right: 6.5rem; background: #fff url('../../images/guide/ic-track-sel.png') no-repeat calc(100% - 1.5rem) center; border: 1px solid #444444; font-family: pm; font-size: 1.8rem; color: #777777; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none;appearance: none;}
.wrap-track-state .button ul {display: flex; align-items: center;}
.wrap-track-state .button li {margin-left: 5.5rem;}
.wrap-track-state .button a {display: flex; align-items: center; font-family: pm; font-size: 1.8rem; color: #666666;}
.wrap-track-state .button a::before {content: ''; display: block; width: 6rem; height: 6rem; margin-right: 1.5rem;}
.wrap-track-state .button .ico1 a::before {background: #049edb url('../../images/guide/ic-track-zoom.png') no-repeat center;}
.wrap-track-state .button .ico2 a::before {background: #0a4da1 url('../../images/guide/ic-track-down.png') no-repeat center;}
.wrap-track-state .button .ico1 a:hover {color: #049edb;}
.wrap-track-state .button .ico2 a:hover {color: #0a4da1;}
.wrap-track-state .button a span {position: relative;}
.wrap-track-state .button a span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: .1rem; transition: width .35s;}
.wrap-track-state .button a:hover span::after {width: 100%;}
.wrap-track-state .button .ico1 a:hover span::after {width: 100%; background: #049edb;}
.wrap-track-state .button .ico2 a:hover span::after {width: 100%; background: #0a4da1;}
.wrap-track-state .list {border-top: .2rem solid #000; border-bottom: .2rem solid #000;}
.wrap-track-state .list .row {display: flex; flex-wrap: wrap; padding: 5rem 0; border-bottom: 1px solid #dddee0;}
.wrap-track-state .list .row:last-child {border: 0;}
.wrap-track-state .list .title {flex-shrink: 0; width: 44rem; padding-right: 3rem;}
.wrap-track-state .list .title strong {font-family: pb; font-size: 2.4rem; line-height: 1.1; color: #049edb;}
.wrap-track-state .list .title p {margin-top: .5rem; font-family: pm; font-size: 1.6rem; color: #666666;}
.wrap-track-state .list .detail {width: calc(100% - 44rem);}
.wrap-track-state .list .detail > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 2rem; font-family: pr; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.wrap-track-state .list .detail > ul > li:first-child {margin-top: 0;}
.wrap-track-state .list .detail > ul > li::before {content: ''; position: absolute; left: 0; top: 1.3rem; width: .8rem; height: 0; box-shadow: 0 0 0 .1rem #424242;}
.wrap-track-state .list .detail > ul > li strong {font-family: psb; color: #333333;}

@media screen and (max-width: 1265px) {
  .wrap-track-state .list .title strong {font-size: 2rem;}
}

@media screen and (max-width: 1060px) {
  .wrap-track-state .button ul {flex-direction: column;}
  .wrap-track-state .button li {margin: .5rem 0;}
  .wrap-track-state .button a::before {width: 5rem; height: 5rem;}
  .wrap-track-state .list .row {padding: 4rem 0;}
  .wrap-track-state .list .title {width: 100%;}
  .wrap-track-state .list .detail {width: 100%; margin-top: 2rem;}
}

@media screen and (max-width: 720px) {
  .wrap-track-state .search {flex-direction: column; padding: 3rem;}
  .wrap-track-state .search .select {background-size: 5rem auto;}
  .wrap-track-state .search .select select {width: 100%; height: 4rem; font-size: 1.6rem;}
  .wrap-track-state .button {margin-top: 2rem;}
  .wrap-track-state .button ul {flex-direction: row; justify-content: center;}
  .wrap-track-state .button li {margin: 0 3rem 0 0;}
  .wrap-track-state .button a {font-size: 1.6rem;}
  .wrap-track-state .button a::before {width: 4rem; height: 4rem;}
  .wrap-track-state .list .row {padding: 3rem 0;}
  .wrap-track-state .list .detail > ul > li {font-size: 1.6rem;}
  .wrap-track-state .list .detail > ul > li::before {top: 1.1rem;}
}

/* Step Banner */
.wrap-step-banner > ul {display: flex;}
.wrap-step-banner > ul > li {position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 22rem; padding: 4rem; border: 1px solid #dddee0;}
.wrap-step-banner > ul > li .icon {flex-shrink: 0; margin-bottom: 3rem;}
.wrap-step-banner.col1 > ul > li {width: 100%;}
.wrap-step-banner.col2 > ul > li {width: 50%;}
.wrap-step-banner.col3 > ul > li {width: 33.333%;}
.wrap-step-banner.col4 > ul > li {width: 25%;}
.wrap-step-banner.col5 > ul > li {width: 20%;}
.wrap-step-banner.col6 > ul > li {width: 16.666%;}
.wrap-step-banner.col4 > ul > li,
.wrap-step-banner.col5 > ul > li,
.wrap-step-banner.col6 > ul > li {min-height: 15rem; padding: 2.5rem 2.5rem;}
.wrap-step-banner > ul > li.arr {flex-grow: 0; flex-shrink: 0; width: 6rem; padding: 0; background: url('../../images/guide/step-box-arrow.png') no-repeat center; border: 0;}
.wrap-step-banner.col4 > ul > li.arr,
.wrap-step-banner.col5 > ul > li.arr,
.wrap-step-banner.col6 > ul > li.arr {width: 4rem;}
.wrap-step-banner > ul > li .box {display: flex; flex-direction: column; width: 100%;}
.wrap-step-banner .box .list > ul > li {position: relative; margin: .5rem 0 0 0; padding-left: 2rem; font-family: pm; font-size: 1.8rem; line-height: 1.6; color: #555555;}
.wrap-step-banner .box .list > ul > li:first-child {margin-top: 0;}
.wrap-step-banner .box .list > ul > li::before {content: ''; position: absolute; left: 0; top: 1.3rem; width: .8rem; height: 0; box-shadow: 0 0 0 .1rem #424242;}
.wrap-step-banner .box .list > ul > li strong {font-family: psb; color: #333333;}
.wrap-step-banner .box em {display: inline-block; margin-bottom: 2rem; font-family: pb; font-size: 1.8rem; color: #000000;}
.wrap-step-banner .box em span {position: relative; padding-bottom: 1rem;}
.wrap-step-banner .box em span::after {content: ''; position: absolute; left: 0; bottom: 0; display: inline-block; width: 100%; height: .3rem; background: #000;}
.wrap-step-banner .box i {margin-bottom: .5rem; font-family: pb; font-size: 2.2rem; color: #049edb;}
.wrap-step-banner .box strong {font-family: pm; font-size: 1.8rem; line-height: 1.4; color: #000000;}
.wrap-step-banner .box p {font-family: pr; font-size: 1.8rem; color: #555555;}
.wrap-step-banner .box .text {font-family: pm; font-size: 1.8rem; color: #444444;}
.wrap-step-banner.no-icon li {padding: 0 2.5rem;}
.wrap-step-banner.no-icon li .box {margin-left: 0;}
.wrap-step-banner.no-icon li::before {display: none;}

@media screen and (max-width: 1400px) {
  .wrap-step-banner > ul {flex-wrap: wrap; justify-content: flex-start;}
  .wrap-step-banner > ul > li {width: 43% !important; margin: 1rem 0; border-radius: 0;}
  .wrap-step-banner > ul > li.arr {width: 7% !important; min-height: auto; }
  .wrap-step-banner > ul > li .icon {margin-bottom: 1rem;}
}

@media screen and (max-width: 830px) {
  .wrap-step-banner > ul {justify-content: center;}
  .wrap-step-banner > ul > li {align-items: center; width: 100% !important; min-height: auto !important; margin: .3rem 0; padding: 2rem !important;}
  .wrap-step-banner > ul > li.arr {transform: rotate(90deg);}
  .wrap-step-banner > ul > li .box {align-items: center;}
  .wrap-step-banner .box strong {text-align: center; font-size: 1.6rem;}
  .wrap-step-banner .box p {font-size: 1.6rem;}
  .wrap-step-banner .box .text {text-align: center; font-size: 1.6rem;}
  .wrap-step-banner .box .list > ul > li {font-size: 1.6rem;}
  .wrap-step-banner .box .list > ul > li::before {top: 1rem;}
}

/* Phone Banner */
.wrap-phone-banner {padding: 4rem; background: #f7f7f7;}
.wrap-phone-banner > ul {display: flex; flex-wrap: wrap; width: calc(100% + 4rem);}
.wrap-phone-banner > ul > li {padding-right: 4rem;}
.wrap-phone-banner.col1 > ul > li {width: 100%;}
.wrap-phone-banner.col2 > ul > li {width: 50%;}
.wrap-phone-banner.col3 > ul > li {width: 33.333%;}
.wrap-phone-banner.col4 > ul > li {width: 25%;}
.wrap-phone-banner.col5 > ul > li {width: 20%;}
.wrap-phone-banner .title {display: flex; align-items: center; padding-bottom: 2.5rem; border-bottom: .2rem solid #000;}
.wrap-phone-banner .title .icon {display: flex; justify-content: center; align-items: center; width: 7.5rem; height: 7.5rem; margin-right: 3rem; background: #fff; border-radius: 100%;}
.wrap-phone-banner .title .subject strong {font-family: pb; font-size: 2.2rem; color: #000000;}
.wrap-phone-banner .detail {padding-top: 2.5rem; font-family: pm; font-size: 1.8rem; color: #666666;}

@media screen and (max-width: 1150px) {
  .wrap-phone-banner.col4 > ul > li {width: 50%; padding-top: 1rem; padding-bottom: 1rem;}
  .wrap-phone-banner .title .subject strong {font-size: 2rem;}
  .wrap-phone-banner .title .icon {width: 5.5rem; height: 5.5rem;}
  .wrap-phone-banner .title .icon img {width: 3rem;}
}

@media screen and (max-width: 920px) {
  .wrap-phone-banner.col3 > ul > li {width: 100%; padding-top: 1rem; padding-bottom: 1rem;}
}

@media screen and (max-width: 790px) {
  .wrap-phone-banner.col4 > ul > li {width: 100%;}
}

@media screen and (max-width: 700px) {
  .wrap-phone-banner {padding: 2.5rem;}
  .wrap-phone-banner .title {padding-bottom: 2rem;}
  .wrap-phone-banner .title .icon {margin-right: 2rem;}
  .wrap-phone-banner .title .subject strong {font-size: 1.8rem;}
  .wrap-phone-banner .detail {font-size: 1.6rem;}
}

/* Noti Banner */
.wrap-util-banner .box {display: flex; padding: 3rem 3.5rem; border: .5rem solid #eeeeee;}
.wrap-util-banner .box .link {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.wrap-util-banner .box .link strong {font-family: pm; font-size: 1.8rem; color: #222222;}

@media screen and (max-width: 850px) {
  .wrap-util-banner .box {padding: 2rem 2.5rem;}
  .wrap-util-banner .box .link {flex-direction: column; align-items: flex-start;}
  .wrap-util-banner .box .link a {margin-top: 1rem;}
  .wrap-util-banner .box .link strong {font-size: 1.6rem;}
}

/* Util Banner */
.wrap-noti-banner .box {display: flex; padding: 3rem 0; border: 1px solid #dbdbdb;}
.wrap-noti-banner .box .icon {flex-shrink: 0; display: flex; justify-content: center; align-items: flex-start; width: 13rem; border-right: 1px solid #cccccc;}
.wrap-noti-banner .box .icon strong {display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; background: #049edb; border-radius: 100%;}
.wrap-noti-banner .box .desc {display: flex; align-items: center; flex-grow: 1; padding-left: 2rem; padding-right: 4rem; font-family: pm; font-size: 1.8rem; color: #666;}
.wrap-noti-banner .box .desc span {padding-right: 4rem;}
.wrap-noti-banner .box .desc .link {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.wrap-noti-banner .box .desc .link a {white-space: nowrap;}
.wrap-noti-banner .box .desc .con-link span {padding-right: 0;}

@media screen and (max-width: 880px) {
  .wrap-noti-banner .box .desc .link {flex-direction: column; align-items: flex-start;}
  .wrap-noti-banner .box .desc .link a {margin-top: 1rem;}
}

@media screen and (max-width: 700px) {
  .wrap-noti-banner .box {padding: 2rem 2rem;}
  .wrap-noti-banner .box .icon {justify-content: flex-start; width: 7rem;}
  .wrap-noti-banner .box .desc {padding-right: 0; font-size: 1.6rem;}
}

/* Blue Banner */
.wrap-blue-banner {display: flex; padding: 6rem 0; background: #eff6ff url('../../images/guide/bg-blue-banner.png') no-repeat right bottom;}
.wrap-blue-banner.profile {padding: 4rem 0; margin-top: 6rem;}
.wrap-blue-banner .icon {flex-shrink: 0; display: flex; justify-content: center; width: 20rem;}
.wrap-blue-banner .icon strong {display: flex; justify-content: center; align-items: center; width: 12rem; height: 12rem; background: #fff; border-radius: 100%;}
.wrap-blue-banner .desc {flex-grow: 1; padding-right: 4rem;}
.wrap-blue-banner .desc .title {font-family: pb; font-size: 2.2rem; color: #212121;}
.wrap-blue-banner.profile .desc .title {font-family: peb; font-size: 3.4rem; color: #212121;}
.wrap-blue-banner .desc p {font-family: pm; font-size: 1.8rem; color: #444444;}

@media screen and (max-width: 1400px) {
  .wrap-blue-banner.profile .desc .title {font-size: 3rem;}
}

@media screen and (max-width: 700px) {
  .wrap-blue-banner {flex-direction: column; padding: 3rem 0 2.5rem 0;}
  .wrap-blue-banner.profile {margin-top: 4rem;}
  .wrap-blue-banner .icon {width: 100%; padding-bottom: 1.3rem;}
  .wrap-blue-banner .desc {padding: 0 3rem;}
  .wrap-blue-banner .desc p {font-size: 1.6rem;}
  .wrap-blue-banner.profile .desc .title {font-size: 2.6rem;}
}

/* Line Banner */
.line-banner {padding: 2.5rem 4rem; background: #f7f7f7;}
.line-banner ul {display: flex; flex-wrap: wrap;}
.line-banner li {display: flex; justify-content: space-between; align-items: center; width: 50%; padding: .5rem 0;}
.line-banner li:nth-child(odd) {position: relative; padding-right: 4rem;}
.line-banner li:nth-child(odd)::after {content: ''; position: absolute; right: 0; top: .9rem; width: 1px; height: 2.6rem; background: #c6c6c6;}
.line-banner li:nth-child(even) {padding-left: 4rem;}
.line-banner .text {font-family: pr; font-size: 1.7rem; color: #333333;}

@media screen and (max-width: 1100px) {
  .line-banner li {width: 100%; margin: .5rem 0; padding: 0 !important;}
  .line-banner li::after {display: none;}
}

@media screen and (max-width: 650px) {
  .line-banner li {flex-direction: column; align-items: flex-start; padding-bottom: 1.5rem !important; border-bottom: 1px solid #d1d1d1;}
  .line-banner li:last-child {border: 0;}
  .line-banner .btn {margin-top: .5rem;}
}

/* Contact */
.wrap-contact {position: relative; display: flex; align-items: center; justify-content: space-between; height: 10rem; margin-top: 5rem; padding: 0 6rem; background: #f5f5f5;border-radius: 1rem;}
.wrap-contact .title {position: relative; flex-shrink: 0; width: 24rem;}
.wrap-contact .title::after {content: ''; position: absolute; right: 0; top: 50%; width: 10rem; height: 1px; background: #dedede;}
.wrap-contact .title strong {font-family: psb; font-size: 1.8rem; color: #666666;}
.wrap-contact .info {flex-grow: 1; padding-left: 5rem;}
.wrap-contact .info .row {display: flex; align-items: center; width: 100%;}
.wrap-contact .info .row li {display: flex; align-items: center; padding-right: 9rem; font-family: pr; font-size: 1.7rem; color: #000000;}
.wrap-contact .info .row li:last-child {padding-right: 0;}
.wrap-contact .info .row .icon {display: flex; justify-content: center; align-items: center; flex-shrink: 0;width: 5rem; height: 5rem; background: #fff; border-radius: 100%;}
.wrap-contact .info .row .text {margin-left: 2rem; font-size: 1.6rem; color: #333333;}
.wrap-contact .date {font-family: pr; font-size: 1.4rem; color: #888888;}

@media screen and (max-width: 1100px) {
  .wrap-contact {padding: 0 4rem;}
  .wrap-contact .title {width: 20rem;}
  .wrap-contact .title::after {width: 7rem;}
  .wrap-contact .info .row li {padding-right: 3rem;}
}

@media screen and (max-width: 1000px) {
  .wrap-contact {flex-direction: column; align-items: flex-start; height: auto; padding: 2rem 3rem;}
  .wrap-contact .title {width: calc(100% - 17rem);}
  .wrap-contact .title::after {width: calc(100% - 13rem);}
  .wrap-contact .info {padding: 1.5rem 0 0 0;}
  .wrap-contact .date {position: absolute; right: 2.5rem; top: 2.5rem;}
}

@media screen and (max-width: 750px) {
  .wrap-contact {margin-top: 4rem;padding: 1.8em 2.4rem 1.3rem;}
  .wrap-contact .title strong {font-size: 1.6rem;}
  .wrap-contact .info {width: 100%;padding: .3rem 0 0 0;}
  .wrap-contact .info .row {flex-wrap: wrap;}
  .wrap-contact .info .row li {padding: .7rem 5rem .7rem 0;}
  .wrap-contact .info .row .icon {width: 4rem;height: 4rem;}
  .wrap-contact .info .row .ico1 img {width: 1.5rem;}
  .wrap-contact .info .row .ico2 img {width: 2rem;}
  .wrap-contact .info .row .text {margin-left: 1.5rem;}
  .wrap-contact .date {top: 2rem;}
}

/* 준비중 */
.wrap-ready {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 8rem 0;  border: 6px solid #e5e5e5; border-radius: 1rem; text-align: center;}
.wrap-ready .icon {width: 100%; padding: 0 24%;}
.wrap-ready .txt {width: 100%;}
.wrap-ready .big-txt {margin-top: 4rem; font-family: pb; font-size: 4rem; color: #000000;}
.wrap-ready .big-txt strong {position: relative;}
.wrap-ready .big-txt em {color: #1174ff;}
.wrap-ready .small-txt {font-family: pm; font-size: 2.2rem; line-height: 1.8; color: #666666;}

@media screen and (max-width: 1100px) {
  .wrap-ready .big-txt {font-size: 3rem;}
  .wrap-ready .small-txt {font-size: 1.8rem;}
}

@media screen and (max-width: 768px) {
  .wrap-ready {padding: 3rem 0;}
  .wrap-ready .icon img {max-width: 70%}
  .wrap-ready .big-txt {font-size: 2.5rem;}
  .wrap-ready .small-txt {font-size: 1.5rem;}
}

.img-zoom {text-align: center;}

/* 임시 언어변환 */
.head-convert {position: absolute !important; right: 1rem; top: 1rem; z-index: 1; display: none !important;}
.head-convert > button {display: flex; justify-content: center; align-items: center; position: relative; padding: .8rem 2rem; background: #eff6ff; border: 1px solid #3988ed; font-family: pb; font-size: 1.4rem; color: #3988ed; text-transform: uppercase; transition: .3s;}
.head-convert .list-convert {position: absolute; left: 0; top: 4rem; width: 100%;}
.head-convert .list-convert ul {border: 1px solid #dadada;}
.head-convert .list-convert a {display: flex; justify-content: center; align-items: center; position: relative; padding: .5rem 1rem; background: #fff; border-bottom: 1px solid #dadada;  font-family: pm; font-size: 1.2rem; color: #8a8a8a; transition: .3s;}
.head-convert .list-convert a:hover {background: #eff6ff; color: #3988ed;}
.head-convert .list-convert li:last-child a {border: 0;}

/* 이미지 가이드 */
.img-guide ul {display: flex; flex-wrap: wrap; width: calc(100% + 3rem); margin-bottom: -3rem;}
.img-guide ul li {width: 33.333%; padding-right: 3rem; padding-bottom: 3rem;}
.img-guide.small ul li {width: 25%;}
.img-guide .thumb {position: relative; border: 1px solid #e8e8e8;}
.img-guide .thumb::after {content: ''; position: absolute; left: 1rem; top: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); border: 1px solid rgba(255,255,255,.5);}
.img-guide .thumb img {width: 100%;}

@media screen and (max-width: 740px) {
  .img-guide.small ul li,
  .img-guide ul li {width: 50%;}
}