/* Common */
.area {max-width: 1760px; margin: 0 auto; padding: 0 0 60px 0;}

@media all and (max-width: 1760px) {
    .area {padding: 0 30px 60px 30px;}
}

/* Subject */
.subject {text-align: center;}
.subject h2 {position: relative; display: inline-block; margin: 105px 0 55px 0; font-weight: 500; font-size: 40px; line-height:1.2; color: #111;}
.subject h2:after {content: ''; position: absolute; left: 50%; top: -25px; width: 27px; height: 10px; margin-left: -13px; background: url('../../images/guide/ic_subject.png') no-repeat center center;}

@media all and (max-width: 900px) {
  .subject h2 {margin: 70px 0 50px 0; font-size: 35px;}
}

@media all and (max-width: 500px) {
  .subject h2 {margin: 55px 0 41px 0; font-size: 35px;}
}

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

.tab_div .ul_3 {overflow: hidden; position: relative; border-top: 1px solid #dbdbdb; margin-bottom: 40px;}
.tab_div .ul_3::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #d1d1d1;}
.tab_div .ul_3 > li {position: relative; float: left; width: 25%; border-bottom: 1px solid #dbdbdb;}
.tab_div .ul_3 > li:first-child:before,
.tab_div .ul_3 > li:nth-child(5n):before {opacity: 0;}
.tab_div .ul_3 > li::before {content: ''; position: absolute; left: 0; top: 18px; width: 1px; height: 20px; background: #ccc; transition: opacity 0.3s;}
.tab_div .ul_3 > li > a {position: relative; z-index: 3; display: block; padding: 16px 20px; font-weight: 400; font-size: 17px; text-align: center; color: #666;}
.tab_div .ul_3 > li > a::before {content: ''; display: inline-block; width: 18px; height: 18px; margin: -3px 5px 0 0; background: url('../../images/guide/ic_tab_on.png') no-repeat center center; vertical-align: middle; opacity: 0;}
.tab_div .ul_3 > li > a[target=_blank]::after {content: ''; position: relative; top: 3px; display: inline-block; width: 16px; height: 16px; margin: 0 0 0 10px; background:  url('../../images/guide/ic_tab_blank.png') no-repeat 93% center; }

.tab_div .ul_3 > li._active > a,
.tab_div .ul_3 > li:hover > a {background: #009ffa; color: #fff;}
.tab_div .ul_3 > li:hover::before {opacity: 0;}
.tab_div .ul_3 > li:hover + li::before {opacity: 0;}
.tab_div .ul_3 > li._active > a::before,
.tab_div .ul_3 > li:hover > a::before {opacity: 1;}
.tab_div .ul_3 > li._active > a[target=_blank]::after ,
.tab_div .ul_3 > li:hover > a[target=_blank]::after {background: url('../../images/guide/ic_tab_blank_on.png');}

@media all and (max-width:860px) {
    .tab_div {position: relative; margin-bottom: 20px;}
    .tab_div .ul_3,
    .tab_div .ul_4
    .tab_div .ul_5 {position: relative;}
    .tab_div .ul_3,
    .tab_div .ul_4,
    .tab_div .ul_5 {overflow: hidden; position: absolute; top: 55px; z-index: -1; width: 100%; max-height: 0; margin-bottom: 30px; border: 1px solid #fff; transition: all 0.5s ease;}
    .tab_div ul.on {z-index: 10; max-height: 600px; border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-top: 1px solid #d1d1d1;}
    .tab_div ul li {display: block; width: 100% !important; padding: 0; border: 0}
    .tab_div ul li a {display: block; height: auto; padding: 13px 40px; background: #fff; border-bottom: 1px solid #d1d1d1; font-size: 16px; text-align: left; line-height: normal;}
    .tab_div ul li a:hover {border-bottom: 1px solid #009ffa;}
    .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 {display: block; padding: 0 20px;}
    .tab_div ul li a span:before {bottom: -11px;}
    .tab_div ul li:after {display: none;}
    .tab_div .mobile-tab {position: relative; display: block; width: 100%; padding: 16px 20px; background: #009ffa url('../../images/guide/ic_tab_sel_rever.png') no-repeat 97% center; text-align: left; font-weight: 400; font-size: 16px; color: #fff;}

    .tab_div .ul_3 > li {border: 0;}
    .tab_div .ul_3 > li > a {font-size: 15px; text-align: left;}
    .tab_div .ul_3 > li > a::before {display: none;}
    .tab_div .ul_4 > li {margin: 0;}
    .tab_div .ul_4 > li > a::before {height: 0;}
    .tab_div .ul_5 > li {border: 0;}
    .tab_div .ul_5 > li:first-child > a::before {left: 23px;}
    .tab_div .ul_5 > li:first-child > a {padding-left: 40px;}
}

/* Category */
.category {padding: 6px; background: url('../../images/guide/ic_cate_bg.png');}
.category ul {padding: 16px 0; background: #fff;}
.category li {float: left; width: 16.666%; padding: 10px 0;}
.category li a {margin-left: 25px; font-weight: 400; font-size: 16px; color: #666;}
.category li.on a,
.category li:hover a {font-weight: 500; color: #0068b8;}
.category li a::before {content: ''; position: relative; top: -2px; display: inline-block; margin: 0 10px 0 0; width: 22px; height: 20px; background: url('../../images/guide/ic_cate_arrow.png') no-repeat center bottom; vertical-align: middle; transition: .4s;}
.category li.on a::before,
.category li:hover a::before {background-position: center top;}
.category li a span {position: relative;}
.category li a span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #0068b8; transition: 0s;}
.category li.on a span::after,
.category li:hover a span::after {width: 100%; transition: .4s;}

@media all and (max-width: 1200px) {
    .category li {width: 25%;}
}

@media all and (max-width: 900px) {
    .category li {width: 33.333%;}
}

@media all and (max-width: 700px) {
    .category li {width: 50%;}
}

@media all and (max-width: 500px) {
    .category li {width: 100%;}
}

/* Heading */
.objHeading_h2 {position: relative; display: block; margin-top: 65px; padding-left: 30px; font-weight: 500; font-size: 23px; letter-spacing: -0.5px; line-height :1.5; color: #222; }
.objHeading_h2::before {content: ''; position: absolute; left: 0; top: 6px; width: 21px; height: 23px; background: url('../../images/guide/ic_h2.png') no-repeat center center; }
.objHeading_h3 {position: relative; display: block; margin-top: 40px; padding-left: 30px; font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; color: #008dfa;}
.objHeading_h3::before {content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 21px; background: url('../../images/guide/ic_h3.png') no-repeat center center; }
.objHeading_h4 {position: relative; display: block; margin-top: 20px; padding-left: 15px; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: #01579a;}
.objHeading_h4::before {content: ''; position: absolute; left: 0; top: 5px; width: 3px; height: 13px; background: #0b3f7f;}
.objHeading_h5 {position: relative; display: block; margin-top: 30px; padding-left: 19px; font-weight: 400; font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; color: #333;}
.objHeading_h5::before {content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border: 2px solid #139cb4; border-radius: 100%; }

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

._objHtml.no-margin {margin-top: 0px !important;}
._objHtml.no-margin > div {margin-top: 0px !important;}

@media all and (max-width: 768px){
  .objHeading_h2 {margin-top: 35px;}
}

/* Description */
.con-desc {font-size: 16px; line-height: 1.8; letter-spacing: -0.5px; color: #666;}
.con-desc strong {font-weight: 500;}
.con-desc.small {font-size: 15px;}

.text-color1 {color: #0087d5;}
.text-color2 {color: #a90056;}
.text-color3 {color: #ff8400;}

/* List Type */
.con-list1 > ul > li {position: relative; margin: 9px 0 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; letter-spacing: -0.5px;}
.con-list1 > ul > li::before {content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 7px; background: url('../../images/guide/ic_list1.png') no-repeat center center}
.con-list1 > ul > li strong {font-weight: 500; color: #003263;}

.con-list2 > ul > li {position: relative; margin: 5px 0 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; letter-spacing: -0.5px;}
.con-list2 > ul > li::before {content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: #018cff}
.con-list2 > ul > li strong {font-weight: 500; color: #003263;}

/* Notify Text */
.point-txt {padding-left: 26px; font-size: 13px; line-height: 2; letter-spacing: -0.5px;}
.point-txt.point-txt1 {background: url('../../images/guide/ic_noti1.png') no-repeat left 3px; color: #43505d;}
.point-txt.point-txt2 {background: url('../../images/guide/ic_noti2.png') no-repeat left 3px; color: #d90000;}
.point-txt.point-txt3 {background: url('../../images/guide/ic_noti3.png') no-repeat left 3px; color: #ff8400;}

/* 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: 0px; top: 0px; width: 100%; height: 2px; background: #104650}
.con-table table:before {content: ''; position: absolute; right: 0px; top: 0px; width: 1px; height: 100%; background: #FFF;}
.con-table thead th {padding: 14px 10px; background: #f7f8f9; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-weight: 400; font-size: 16px; font-weight: normal; color: #111;}
.con-table tbody {display: table-header-group;}
.con-table tbody th {padding: 13px 20px; background:#fbfbfb; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-weight: 400; font-weight: normal; color: #000;}
.con-table tbody td {padding: 13px 20px; background:#fff; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-weight: 400; text-align: left; color: #666;}
.con-table tbody td .link {position: relative;}
.con-table tbody td .link::after {content: ''; position: relative; top: -2px; display: inline-block; width: 15px; height: 15px; background: url('../../images/guide/ic_tbl_link.png') no-repeat center center; margin-left: 10px; vertical-align: middle;}
.con-table .list > li {position: relative; padding-left: 20px;}
.con-table .list > li:after {content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: #b4c1dd; border-radius: 100%;}
.con-table .align-l {text-align: left;}
.con-table .align-c {text-align: center;}
.con-table .align-r {text-align: right;}
.con-table strong {font-weight: 400; color: #000;}

@media all and (max-width:960px) {
  .con-table {overflow-x: hidden;}
  .con-table table {width: 1300px; margin-bottom: 40px;}
  .con-table:after {content: ''; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background: url('../../images/guide/mobile-tbl.png') no-repeat center 40px;}
  .con-table.on:after {display: none;}
}

/* Button Style */
.btn-style.round-ico {display: inline-block; padding: 14px 28px; border-radius: 30px; font-weight: 400; font-size: 15px; color: #fff; margin: 2px 0;}
.btn-style.round-ico.type1 {background: #00baff;}
.btn-style.round-ico.type1:hover {background: #0084FF;}
.btn-style.round-ico.type1:after {content: ''; display: inline-block; width: 18px; height: 18px; margin: -8px 0 0 10px;  background: url('../../images/guide/ic_btn1.png') no-repeat center top; vertical-align: middle;}
.btn-style.round-ico.type2 {background: #ff8400;}
.btn-style.round-ico.type2:hover {background: #FF7200;}
.btn-style.round-ico.type2:after {content: ''; display: inline-block; width: 18px; height: 18px; margin: -5px 0 0 10px;  background: url('../../images/guide/ic_btn2.png') no-repeat center top; vertical-align: middle;}

.btn-style.round {display: inline-block; padding: 14px 42px; background: #fff; border-radius: 30px; font-weight: 400; font-size: 15px;  margin: 2px 0;}
.btn-style.round.type1 {border: 1px solid #0067c3; color: #0067c3;}
.btn-style.round.type1:hover {background: #0067C3; color: #fff;}
.btn-style.round.type2 {border: 1px solid #ce2856; color: #ce2856;}
.btn-style.round.type2:hover {background: #ce2856; color: #fff;}
.btn-style.round.type3 {border: 1px solid #ff8400; color: #ff8400;}
.btn-style.round.type3:hover {background: #ff8400; color: #fff;}
.btn-style.round.type4 {background: #8c8c8c; border: 1px solid #8c8c8c; color: #fff;}
.btn-style.round.type4:hover {background: #4E4E4E; border-color: #4E4E4E;}

.btn-style.round.type5 {background: #25AAE2; border: 1px solid #25AAE2; color: #fff;}
.btn-style.round.type5:hover {background: #00648E; border-color: #00648E;}
.btn-style.round.type6 {background: #CE2856; border: 1px solid #CE2856; color: #fff;}
.btn-style.round.type6:hover {background: #8C0027; border-color: #8C0027;}

.btn-style.round-ico-small {display: inline-block; padding: 9px 20px; border: 1px solid #b2b2b2; border-radius: 30px; font-weight: 400; font-size: 14px; color: #505050;  margin: 2px 0;}
.btn-style.round-ico-small.type1:hover {border-color: #d0006a; background: #D0006A; color: #fff;}
.btn-style.round-ico-small.type1:after {content: ''; display: inline-block; width: 16px; height: 16px; margin: -6px 0 0 15px;  background: url('../../images/guide/ic_btn3.png') no-repeat center top; vertical-align: middle;}
.btn-style.round-ico-small.type1:hover::after {background: url('../../images/guide/ic_btn3_wh.png') no-repeat center top;}
.btn-style.round-ico-small.type2:hover {border-color: #0067d4; background: #0067d4; color: #fff;}
.btn-style.round-ico-small.type2:after {content: ''; display: inline-block; width: 16px; height: 16px; margin: -6px 0 0 15px;  background: url('../../images/guide/ic_btn4.png') no-repeat center top; vertical-align: middle;}
.btn-style.round-ico-small.type2:hover::after {background: url('../../images/guide/ic_btn4_wh.png') no-repeat center top; }

.btn-style.rect {display: inline-block; padding: 6px 22px; font-weight: 400; font-size: 13px;  margin: 2px 0;}
.btn-style.rect.type1 {background: #00baff; border: 1px solid #00baff; color: #fff;}
.btn-style.rect.type1:hover {background: #0079AC;}
.btn-style.rect.type2 {background: #fff; border: 1px solid #ce2856; color: #ce2856;}
.btn-style.rect.type2:hover {background: #ce2856; color: #fff;}

/* PDF Viewer */
.pdf-viewer .info {padding: 5px; background: url('../../images/guide/ic_cate_bg.png');}
.pdf-viewer .box {padding: 25px 0 25px 300px; background: #fff url('../../images/guide/ic_pdf.png') no-repeat 60px center;}
.pdf-viewer .text li {display: table; table-layout: fixed; margin-bottom: 10px; font-weight: 400; font-size: 14px; color: #666;}
.pdf-viewer .text li .num {display: table-cell; vertical-align: top;}
.pdf-viewer .text li .num i {display: inline-block; width: 26px; height: 26px; background: #55555b; border-radius: 100%; font-family: 'Titil SemiBold'; text-align: center; line-height: 26px; color: #fff;}
.pdf-viewer .text li .text {display: table-cell; padding-left: 10px; vertical-align: middle;}
.pdf-viewer .buttons a {position: relative; display: inline-block; margin-top: 10px; margin-right: 15px; padding: 15px 80px 15px 20px; background: #0086f8; border-radius: 5px; font-size: 14px; color: #fff;}
.pdf-viewer .buttons a:hover {background: #046dc6;}
.pdf-viewer .buttons a::after {content: ''; position: absolute; right: 0; top: 0; width: 55px; height: 100%; border-radius: 0 5px 5px 0;}
.pdf-viewer .buttons a.btn1::after {background: #2698f9 url('../../images/guide/ic_pdf_btn1.png') no-repeat center center;}
.pdf-viewer .buttons a.btn2::after,
.pdf-viewer .buttons a.btn3::after {background: #2698f9 url('../../images/guide/ic_pdf_btn2.png') no-repeat center center;}
.pdf-viewer .viewer {margin-top: 50px; padding: 60px; background: #ececec; border: 1px solid #daddde; text-align: center;}
.pdf-viewer .viewer .drop-shadow {display: inline-block; box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.79);}
.pdf-viewer .viewer .drop-shadow img {width: 100%;}

@media all and (max-width: 850px) {
    .pdf-viewer .box {padding: 220px 25px 25px 25px; background-position: center 40px;}
}

@media all and (max-width: 660px) {
    .pdf-viewer .buttons a {width: 100%;}
}

/* Ready */
.wrap-ready {padding: 5px; background: url('../../images/guide/ic_cate_bg.png'); text-align: center;}
.wrap-ready .box {padding: 55px 20px 60px 20px; background: #fff url('../../images/guide/bg-ready.jpg') no-repeat center top; background-size: cover;}
.wrap-ready strong {position: relative; display: inline-block; padding: 300px 0 0 0; background: url('../../images/guide/ic_ready.png') no-repeat center top; font-weight: 500; font-size: 35px; color: #222;}
.wrap-ready strong::before {content: ''; position: absolute; left: -35px; bottom: 45px; width: 26px; height: 22px; background: url('../../images/guide/ico-deco-ready1.png') no-repeat center center;}
.wrap-ready strong::after {content: ''; position: absolute; right: -35px; bottom: 45px; width: 26px; height: 22px; background: url('../../images/guide/ico-deco-ready2.png') no-repeat center center;}
.wrap-ready em {color: #23499e;}
.wrap-ready p {font-weight: 500; font-size: 18px; color: #555;}

@media all and (max-width: 768px) {
	.wrap-ready .box {padding: 40px 20px;}
	.wrap-ready strong::before {content: ''; position: absolute; left: -35px; bottom: 15px; width: 16px; height: 22px; background: url('../../images/guide/ico-deco-ready1.png') no-repeat center center; background-size: 16px auto;}
	.wrap-ready strong::after {content: ''; position: absolute; right: -35px; bottom: 15px; width: 16px; height: 22px; background: url('../../images/guide/ico-deco-ready2.png') no-repeat center center; background-size: 16px auto;}

    .wrap-ready strong {background-size: 100% auto; font-size: 22px; padding: 240px 0 0 0;}
    .wrap-ready p {font-size: 16px;}
}

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


.sub-txt-bx {position: relative; text-align: center; padding: 25px 4%;}
.sub-txt-bx::before {content: ""; position: absolute; width: 100%; height: 6px; background: #009ffa; left: 0; top: 0;}
.sub-txt-bx::after {content: ""; position: absolute; width: 100%; height: 6px; background: #e1e1e1; left: 0; bottom: 0;}
.sub-txt-inner::before {content: ""; position: absolute; width: 6px; height: 50%; left: 0; top: 0; background: #009ffa;}
.sub-txt-inner::after {content: ""; position: absolute; width: 6px; height: 50%; right: 0; top: 0; background: #009ffa;}
.sub-txt-inner p::before {content: ""; position: absolute; width: 6px; height: 50%; left: 0; bottom: 0; background: #e1e1e1;}
.sub-txt-inner p::after {content: ""; position: absolute; width: 6px; height: 50%; right: 0; bottom: 0; background: #e1e1e1;}
.sub-txt-inner p {font-size: 16px; color: #666666;}

@media all and (max-width: 768px){
  .sub-txt-inner p {font-size: 14px;}
}

.ie-check {display: none;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .ie-check {display: block;}
}