@charset "utf-8"; .wrap-contents .container {max-width:1280px;} .subject {text-align: center; padding-top: 25px;} .subject {padding-bottom: 50px;} /* .subject::after {content: ""; display: block; width: 40px; height: 1px; background: #000000; margin: 25px auto 40px; } */ .subject h2 {position: relative; display: inline-block; padding: 5px 10px; font-size: 40px; line-height: 46px; letter-spacing: -0.5px; color: #010101; font-family: "Noto Medium";} @media all and (max-width: 768px){ .subject {padding-bottom: 35px;} } .wrap-contents .objHeading_h2 {font-family:'Noto Medium'; display:block; line-height:1.5; font-size:26px; letter-spacing: -0.5px; color:#111; margin-top: 30px;} .wrap-contents .objHeading_h3 {position: relative; font-family:'Noto Medium'; display:block; line-height:1.5; font-size:22px; letter-spacing: -0.5px; color:#222222; margin-top: 30px; padding-top: 10px;} .wrap-contents .objHeading_h3::before {content: ""; position: absolute; width: 22px; height: 2px; background: #004E96; left: 0; top: 0;} .wrap-contents .objHeading_h4 {position: relative; font-family:'Noto Medium'; display:block; line-height:1.5; font-size:20px; letter-spacing: -0.5px; color:#333333; margin-top: 30px; padding-left: 15px;} .wrap-contents .objHeading_h4::before {content: ""; position: absolute; width: 11px; height: 9px; background: url("../../images/common/h4_arrow.png") no-repeat center; left: 0; top: 10px;} .wrap-contents .objHeading_h5 {position: relative; font-family:'Noto Medium'; display:block; line-height:1.5; font-size:18px; letter-spacing: -0.5px; color:#333333; margin-top: 30px;} /* .wrap-contents .objHeading_h5::before {content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid #426DCA; border-radius: 50%; left: 0; top: 7px;} */ .wrap-contents .con-desc {font-size:16px; color:#333333; line-height:26px; letter-spacing: -0.5px; font-family: 'Noto DemiLight';} .wrap-contents .sBig {font-size:18px; color:#333333; line-height:26px; letter-spacing: -0.5px; font-family: 'Noto DemiLight';} .wrap-contents .con-list li {padding: 0 0 0 20px; color:#666; background:url('../../images/common/bul_list.png') no-repeat left 9px; font-family: 'Noto DemiLight'; font-size: 16px; line-height: 16px;} .wrap-contents .con-list strong {font-family:'Noto Medium'; font-weight:normal; color:#222;} .wrap-contents .con-list2 li {position:relative; padding: 0 0 0 20px; color:#666;} .wrap-contents .con-list2 li:after {content:''; position:absolute; left:0px; top:11px; width:4px; height:4px; background:#018cff;} .wrap-contents .align-r {text-align:right;} .wrap-contents .align-c {text-align:center;} .wrap-contents .align-l {text-align:left;} .wrap-contents .p-color1 {color:#183d93;} .wrap-contents .p-color2 {color:#018cff;} .wrap-contents .p-color3 {color:#eb8105;} .wrap-contents .txt-color1 {color: #d63f11;} .wrap-contents .txt-color2 {color: #00c6ff;} .wrap-contents .txt-color3 {color: #faa635;} .wrap-contents .txt-color4 {color: #00b622;} .wrap-contents .txt-color5 {color: #101a94;} .wrap-contents .txt-color6 {color: #faa635;} .wrap-contents .txt-color7 {color: #dd1969;} .wrap-contents .txt-color8 {color: #004e96;} .wrap-contents .con-table {position:relative;} .wrap-contents .con-table:after {content:''; position: absolute; right:0px; top:0px; width:3px; height:100%; background:#fff;} .wrap-contents .con-table table {font-family:'Noto DemiLight'; position:relative;} .wrap-contents .con-table table:after {content:''; position:absolute; top:0px; left:0px; width:100%; height:2px; background:#43505d;} .wrap-contents .con-table table:before {content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#43505d;} .wrap-contents .con-table tbody {display: table-header-group;} .wrap-contents .con-table thead th {padding:9px 10px; font-weight:normal; background:#F7F8F9; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:16px; font-family: "Noto Regular";} .wrap-contents .con-table tbody tr:first-child th, .wrap-contents .con-table tbody tr:first-child td {border-top: 1px solid #B1B2B3;} .wrap-contents .con-table tbody th {padding:9px 10px; background:#FBFBFB; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:16px;} .wrap-contents .con-table tbody th.color {background:#FBFBFB; font-size: 18px; color: #1b1b1b; font-weight: normal;} .wrap-contents .con-table tbody td {padding:9px 10px; background:#fff; color:#666; border-right:1px solid #ccd0d7; border-bottom:1px solid #ccd0d7; font-size:16px; letter-spacing: -0.5px; text-align: center; word-break: keep-all; word-wrap: break-word;} .wrap-contents .con-table tbody td a{color: #666;} .wrap-contents .con-table tbody td > ul > li {position: relative; padding-left: 20px;} .wrap-contents .con-table tbody td > ul > li::before {content: ""; position: absolute; width: 8px; height: 8px; background: #B4C1DD; border-radius: 50%; left: 0; top: 10px;} .wrap-contents .con-table .align-l {text-align:left;} .wrap-contents .con-table .align-c {text-align:center;} .wrap-contents .con-table .align-r {text-align:right;} .wrap-contents .con-table.black tbody td{color: #000;} @media all and (max-width:860px) { .wrap-contents .con-table {overflow-x: hidden;} .wrap-contents .con-table table {width:1000px;} .wrap-contents .con-table.long-table table {width: 800px;} .wrap-contents .con-table.short-table table {width: 600px;} .wrap-contents .con-table:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:url('../../images/common/img_mobile_text.png') no-repeat center 50px;} .wrap-contents .con-table.on:after {display:none;} } .wrap-contents .table_bbs {position:relative;} .wrap-contents .table_bbs:after {content:''; position: absolute; right:0px; top:0px; width:0px; height:100%; background:#fff;} .wrap-contents .table_bbs table {font-family:'Noto DemiLight'; position:relative;} .wrap-contents .table_bbs table:after {content:''; position:absolute; top:0px; left:0px; width:100%; height:2px; background:#43505d;} .wrap-contents .table_bbs table:before {content:''; position:absolute; bottom:0px; left:0px; width:100%; height:1px; background:#43505d;} .wrap-contents .table_bbs tbody {display: table-header-group;} .wrap-contents .table_bbs thead th {padding:9px 10px; font-weight:normal; background:#F7F8F9; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:16px; font-family: "Noto Regular";} .wrap-contents .table_bbs tbody tr:first-child th, .wrap-contents .con-table tbody tr:first-child td {border-top: 1px solid #B1B2B3;} .wrap-contents .table_bbs tbody th {padding:9px 10px; background:#FBFBFB; color:#000000; border-right:1px solid #DDDEE0; border-bottom:1px solid #DDDEE0; font-size:16px;} .wrap-contents .table_bbs tbody th.color {background:#FBFBFB; font-size: 18px; color: #1b1b1b; font-weight: normal;} .wrap-contents .table_bbs tbody td {padding:9px 10px; background:#fff; color:#666; border-right:1px solid #ccd0d7; border-bottom:1px solid #ccd0d7; font-size:16px; letter-spacing: -0.5px; text-align: center;} .wrap-contents .table_bbs tbody td a{color: #666;} .wrap-contents .table_bbs tbody td > ul > li {position: relative; padding-left: 20px;} .wrap-contents .table_bbs tbody td > ul > li::before {content: ""; position: absolute; width: 8px; height: 8px; background: #B4C1DD; border-radius: 50%; left: 0; top: 10px;} .wrap-contents .table_bbs .align-l {text-align:left;} .wrap-contents .table_bbs .align-c {text-align:center;} .wrap-contents .table_bbs .align-r {text-align:right;} @media all and (max-width:860px) { .wrap-contents .table_bbs {overflow-x: hidden;} .wrap-contents .table_bbs table {width:1000px;} .wrap-contents .table_bbs.long-table table {width: 800px;} .wrap-contents .table_bbs.short-table table {width: 600px;} .wrap-contents .table_bbs:after {content:''; position:absolute; right:0px; top:0px; width:100%; height:100%; background:url('../../images/common/img_mobile_text.png') no-repeat center 50px;} .wrap-contents .table_bbs.on:after {display:none;} } .wrap-contents .con-ready {padding:80px 0 ; text-align:center; background: url('../../images/common/bg_ready.jpg') no-repeat center top; border:1px solid #cccccc;} .wrap-contents .con-ready .text {font-size:38px; padding:32px 0 0 0;} .wrap-contents .con-ready .text span {font-family:'Noto Bold';position:relative; color:#018cff; display:inline-block; padding:0 6px;} .wrap-contents .con-ready .text span:last-child:after {display:none;} .wrap-contents .con-ready .text span:after {content: '/'; position:absolute; right:-7px; top:15px; font-size:15px; font-family: Noto Black;} @media all and (max-width:420px) { .wrap-contents .con-ready .text {font-size: 26px;} .wrap-contents .con-ready .text span:after {top:8px;} } /* guide 추가 작업 */ .sub-indent {padding-left: 20px;} .con-list1 {margin-left: 16px;} .con-list1 > ul > li {position: relative; font-size: 16px; line-height: 26px; letter-spacing: -0.5px; color: #333333; margin: 5px 0; padding-left: 15px; font-family: 'Noto DemiLight';} .con-list1 > ul > li > p {line-height: 26px;} .con-list1 > ul > li > p.point-txt {line-height: 30px;} .con-list1 > ul > li::before {content: ""; position: absolute; width: 6px; height: 6px; background: #666666; border-radius: 50%; left: 0; top: 11px;} .con-list1 > ul > li strong {font-family: "Noto Medium";} .con-list1 .con-arrow-list {margin-left: 0;} .circle-num-list .con-arrow-list {margin-left: 0;} .con-arrow-list {margin-left: 16px;} .con-arrow-list > ul > li {position: relative; padding-left: 15px; font-size: 16px; line-height: 26px; letter-spacing: -0.5px; color: #333333; font-family: 'Noto DemiLight';} .con-arrow-list > ul > li > p {line-height: 26px;} .con-arrow-list > ul > li::before {content: ""; position: absolute; width: 8px; height: 1px; background: #333; left: 0; top: 12px;} .circle-num-title {position: relative; font-size: 18px; line-height: 26px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Medium"; padding-left: 18px;} .circle-num-title .num {position: absolute; left: 0; top: 0px; display: inline-block; vertical-align: middle; font-family: "Roboto"; font-size: 18px; letter-spacing: -0.5px; color: #333333; text-align: center; margin-right: 5px; line-height: 26px; font-weight: 500;} .circle-num-list > ul > li {position: relative; font-size: 16px; line-height: 26px; letter-spacing: -0.5px; color: #333333; padding-left: 18px; margin: 5px 0; font-family: 'Noto DemiLight';} .circle-num-list > ul > li .num {position: absolute; left: 0; top: 2px; display: inline-block; vertical-align: middle; font-family: "Roboto"; font-size: 18px; letter-spacing: -0.5px; color: #333333; text-align: center; margin-right: 5px; line-height: 26px; font-weight: 500;} .circle-num-list > ul > li .num2 {position: absolute; left: 0; top: 5px; display: inline-block; vertical-align: middle; font-family: "Roboto"; font-size: 14px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #333; letter-spacing: -0.5px; color: #333333; text-align: center; margin-right: 5px; line-height: 16px; font-weight: 500;} .point-txt {font-size: 16px; line-height: 30px; letter-spacing: -0.5px; font-family: "Noto Medium"; padding-left: 40px;} .point-txt.point-txt1 {color: #e77800; background: url("../../images/common/ic_point_1.png") no-repeat left 3px;} .point-txt.point-txt2 {color: #d63f11; background: url("../../images/common/ic_point_2.png") no-repeat left 3px;} .point-txt.point-txt3 {color: #0090ff; background: url("../../images/common/ic_point_3.png") no-repeat left 3px;} .point-txt.point-txt4 {color: #183d93; background: url("../../images/common/ic_point_4.png") no-repeat left 3px;} .point-txt.point-txt5 {color: #43505d; background: url("../../images/common/ic_point_5.png") no-repeat left 3px;} .sub-explain-bx{position: relative; overflow: hidden;} .sub-explain {padding: 25px 30px; background: #F5F5F5;} .sub-explain::before {content: ""; position: absolute; width: 85px; height: 29px; background: url("../../images/common/explain_bg_2.png") no-repeat; right: -100px; top: 40px; transition: right 0.75s;} .sub-explain::after {content: ""; position: absolute; width: 161px; height: 142px; background: url("../../images/common/explain_bg_3.png") no-repeat; right: -100px; bottom: 0px; transition: right 0.75s;} .sub-explain.on::before, .sub-explain.on::after {right: 0; } .sub-expalin-inner {position: relative; display: table; width: 100%; z-index: 1;} .sub-expalin-inner .sub-explain-img {display: table-cell; width: 230px; vertical-align: middle; height: 230px;} .sub-expalin-inner .explain-img-inner {width: 100%; height: 100%;} .sub-expalin-inner .sub-explain-img .icon1 {background: url("../../images/common/explain_icon_1.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon2 {background: url("../../images/common/explain_icon_2.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon3 {background: url("../../images/common/explain_icon_3.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon4 {background: url("../../images/common/explain_icon_4.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon5 {background: url("../../images/common/explain_icon_5.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon6 {background: url("../../images/common/explain_icon_6.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon7 {background: url("../../images/common/explain_icon_7.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon8 {background: url("../../images/common/explain_icon_8.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon9 {background: url("../../images/common/explain_icon_9.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon10 {background: url("../../images/common/explain_icon_10.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon11 {background: url("../../images/common/explain_icon_11.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon12 {background: url("../../images/common/explain_icon_12.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon13 {background: url("../../images/common/explain_icon_13.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon14 {background: url("../../images/common/explain_icon_14.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon15 {background: url("../../images/common/explain_icon_15.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon16 {background: url("../../images/common/explain_icon_16.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon17 {background: url("../../images/common/explain_icon_17.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon18 {background: url("../../images/common/explain_icon_18.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon19 {background: url("../../images/common/explain_icon_19.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon20 {background: url("../../images/common/explain_icon_20.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon21 {background: url("../../images/common/explain_icon_21.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon22 {background: url("../../images/common/explain_icon_22.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon23 {background: url("../../images/common/explain_icon_23.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon24 {background: url("../../images/common/explain_icon_24.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon25 {background: url("../../images/common/explain_icon_25.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon26 {background: url("../../images/common/explain_icon_26.png") no-repeat center;} .sub-expalin-inner .sub-explain-img .icon27 {background: url("../../images/common/explain_icon_27.png") no-repeat center;} .sub-expalin-inner .sub-explain-info {display: table-cell; vertical-align: top; padding-left: 35px; padding-top: 30px;} .sub-explain-title {font-size: 26px; line-height: 30px; letter-spacing: -0.5px; color: #23499e; font-family: "Noto Medium";} .sub-explain-txt {font-size: 19px; line-height: 30px; letter-spacing: -0.5px; color: #333333;} .sub-explain-txt strong {font-family: "Noto Medium";} .sub-expalin-inner .sub-explain-info .sub-explain-sign {text-align: right;} .sub-expalin-inner .sub-explain-info .sub-explain-sign strong {font-size: 20px; color: #333; font-family: "Noto Medium";} .background-gray{background-color: #f5f5f5; padding: 20px 30px;} .background-gray .con-list1 {margin-left: 0;} @media all and (max-width: 1023px){ .sub-expalin-inner {display: block;} .sub-expalin-inner .sub-explain-img {display: block; margin: 0 auto;} .sub-expalin-inner .sub-explain-info {display: block; width: 100%; padding-left: 0; padding: 30px 15px 0;} .background-gray{padding: 15px;} } .sub-link-bx {padding: 10px; background: url("../../images/common/repeat_bg.png");} .sub-link-inner {background: #fff; padding: 15px 40px; overflow: hidden; display: table; width: 100%;} .sub-link-icon {display: table-cell; vertical-align: middle; width: 70px;} .sub-link-info {display: table-cell; vertical-align: middle; width: auto; font-size: 18px; line-height: 24px; letter-spacing: -0.5px; color: #2e3a84;} .sub-link-btn {display: table-cell; vertical-align: middle; width: 160px;} @media all and (max-width: 1023px){ .sub-link-inner {display: block; padding: 15px 30px;} .sub-link-icon {display: block;} .sub-link-info {display: block; margin: 10px 0 25px;} .sub-link-btn {display: block;} } @media all and (max-width: 768px){ .sub-link-inner {padding: 15px;} } .ebook-list {margin: 0 -0.5%;} .ebook-list-inner {float: left; display: table; width: 49%; padding: 30px 25px; margin: 10px 0.5%; border: 1px solid #CFCFCF;} .ebook-title {display: table-cell; vertical-align: middle;} .ebook-title p {position: relative; font-size: 18px; line-height: 30px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Bold"; padding-left: 20px;} .ebook-title p::before {content: ""; position: absolute; width: 12px; height: 12px; border: 3px solid #005AAB; border-radius: 50%; left: 0; top: 10px;} .ebook-btn {display: table-cell; vertical-align: middle; width: 180px;} @media all and (max-width: 1023px){ .ebook-list {margin: 0;} .ebook-list-inner {float: none; width: 100%; margin: 10px 0;} .ebook-title {} } .sub-download-bx {border: 1px solid #C1C1C1;} .sub-download {padding: 10px 45px; margin: 0 -1.5%;} .sub-download-inner {float: left; width: 30%; overflow: hidden; padding: 10px 0; margin: 0 1.5%;} .sub-download-inner > p {float: left; padding-left: 20px; background: url("../../images/common/ic_list3_arrow.png") no-repeat left 12px; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #222222; margin-top: 3px;} .sub-download-inner .sub-download-btn {float: right;} .sub-download-inner .sub-download-btn .sub-btn-group .download-btn {margin-left: 0;} @media all and (max-width: 1260px){ .sub-download-inner {width: 47%; margin: 0;} } @media all and (max-width: 1023px){ .sub-download {padding: 10px 25px;} .sub-download-inner {width: 100%;} .sub-download-inner > p {width: calc(100% - 200px); line-height: 23px;} } @media all and (max-width: 500px){ .sub-download-inner > p {float: none; width: 100%;} .sub-download-inner .sub-download-btn {margin-top: 10px;} } .privacy-bx {padding: 25px 45px; background: #F5F6FA;} .privacy-title {float: left; font-size: 19px; line-height: 30px; letter-spacing: -0.5px; color: #10489f; font-family: "Noto Regular";} .privacy-bx-btn {float: right;} @media all and (max-width: 500px){ .privacy-bx {text-align: center; padding: 15px;} .privacy-title {float: none; margin-bottom: 10px;} .privacy-bx-btn {float: none;} } /* 버튼 스타일 */ .sub-btn-group a:last-child {margin-right: 0;} .sub-btn-group .link-btn {position: relative; display: block; font-size: 14px; line-height: 24px; letter-spacing: -0.5px; color: #fff; border: 1px solid #006CC7; color: #4b4b4b; transition: all 0.3s; overflow: hidden;} .sub-btn-group .link-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #006CC7; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .link-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/more_arrow_3.png") no-repeat 90% center; padding: 10px 40px 10px 15px; transition: all 0.3s;} .sub-btn-group .link-btn:hover {color: #fff;} .sub-btn-group .link-btn:hover span {background: url("../../images/common/more_arrow_2.png") no-repeat 90% center; } .sub-btn-group .link-btn:hover::before {width: 140%;} .sub-btn-group .link-btn2 {position: relative; display: block; font-size: 16px; line-height: 30px; letter-spacing: -0.5px; color: #fff; border: 1px solid #0058B9; color: #666666; transition: all 0.3s; overflow: hidden;} .sub-btn-group .link-btn2::before {content: ""; position: absolute; width: 0; height: 100%; background: #425769; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .link-btn2 span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon1_on.png") no-repeat 90% center; padding: 5px 40px 5px 15px; transition: all 0.3s;} .sub-btn-group .link-btn2:hover {color: #fff; border-color: #425769;} .sub-btn-group .link-btn2:hover span {background: url("../../images/common/btn_icon1.png") no-repeat 90% center; } .sub-btn-group .link-btn2:hover::before {width: 140%;} .sub-btn-group .download-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin: 2px 0; margin-right: 10px; background: #fff; overflow: hidden;} .sub-btn-group .download-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .download-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon2.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .download-btn:hover {border-color: #10489F;} .sub-btn-group .download-btn:hover span {color: #fff; background: url("../../images/common/btn_icon2_on.png") no-repeat 15px center; } .sub-btn-group .download-btn:hover::before {width: 140%;} .sub-btn-group .card-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-right: 10px; background: #fff; overflow: hidden;} .sub-btn-group .card-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .card-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon3.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .card-btn:hover {border-color: #10489F;} .sub-btn-group .card-btn:hover span {color: #fff; background: url("../../images/common/btn_icon3_on.png") no-repeat 15px center; } .sub-btn-group .card-btn:hover::before {width: 140%;} .sub-btn-group .home-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-right: 10px; background: #fff; overflow: hidden;} .sub-btn-group .home-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .home-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon4.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .home-btn:hover {border-color: #10489F;} .sub-btn-group .home-btn:hover span {color: #fff; background: url("../../images/common/btn_icon4_on.png") no-repeat 15px center; } .sub-btn-group .home-btn:hover::before {width: 140%;} .sub-btn-group .flag-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-right: 10px; background: #fff; overflow: hidden;} .sub-btn-group .flag-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .flag-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon5.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .flag-btn:hover {border-color: #10489F;} .sub-btn-group .flag-btn:hover span {color: #fff; background: url("../../images/common/btn_icon5_on.png") no-repeat 15px center; } .sub-btn-group .flag-btn:hover::before {width: 140%;} .sub-btn-group .call-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-right: 10px; background: #fff; overflow: hidden;} .sub-btn-group .call-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .call-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon6.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .call-btn:hover {border-color: #10489F;} .sub-btn-group .call-btn:hover span {color: #fff; background: url("../../images/common/btn_icon6_on.png") no-repeat 15px center; } .sub-btn-group .call-btn:hover::before {width: 140%;} .sub-btn-group .talk-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; margin-left: 10px; background: #fff; overflow: hidden;} .sub-btn-group .talk-btn::before {content: ""; position: absolute; width: 0; height: 100%; background: #10489F; left: -30px; top: 0; transition: all 0.5s; z-index: 1; transform: skewX(-45deg);} .sub-btn-group .talk-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_icon7.png") no-repeat 15px center; padding: 4px 15px 4px 40px;transition: all 0.3s; font-size: 16px; letter-spacing: -0.5px; color: #4b4b4b;} .sub-btn-group .talk-btn:hover {border-color: #10489F;} .sub-btn-group .talk-btn:hover span {color: #fff; background: url("../../images/common/btn_icon7_on.png") no-repeat 15px center; } .sub-btn-group .talk-btn:hover::before {width: 140%;} .sub-btn-group .privacy-btn {position: relative; display: inline-block; border: 1px solid #B9C1D7; border-radius: 5px; transition: all 0.3s; margin-right: 10px; background: #fff; vertical-align: top;} .sub-btn-group .privacy-btn span {position: relative; display: block; z-index: 3; background: url("../../images/common/btn_arrow.png") no-repeat 8px center; padding: 4px 15px 4px 20px; transition: all 0.3s; font-size: 13px; color: #666666;} .sub-btn-group .privacy-btn:hover {border-color: #10489F;} .sub-btn-group .privacy-btn span {color: #666666;} @media all and (max-width: 1023px){ } /* 로그인 */ .login-content {max-width: 1000px; margin: 0 auto; background: url("../../images/login/logo_bg.png") no-repeat right bottom;} .login-bx {overflow: hidden;} .login-form {float: left; width: 50%; padding-right: 5%; margin-right: 5%; box-sizing: border-box;} .login-form .login-title {padding-right: 75px; background: url("../../images/login/ic_lock.png") no-repeat right center; margin-bottom: 25px;} .login-form .login-title h3 {font-size: 35px; line-height: 40px; letter-spacing: -0.5px; color: #000000; font-family: "Noto Regular"; margin-bottom: 10px;} .login-form .login-title p {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #000000;} .login-form .login-title p span {color: #1e5ba8;} .login-input {padding: 35px 0; border-bottom: 1px solid #D4D4D4; border-top: 1px solid #D4D4D4; } .login-input input {width: 100%; height: 50px; padding: 0 15px; font-size: 16px; letter-spacing: -0.5px; border-radius: 5px; background: #F5F5F5; border: 0;} .login-input input:first-child {margin-bottom: 10px;} .login-bottom {padding: 30px 0; border-bottom: 1px solid #D4D4D4;} .login-bottom .check-custom {float: left;} .login-bottom .check-custom input {display: none;} .login-bottom .check-custom label {position: relative; padding-left: 35px; } .login-bottom .check-custom label::before {content: ""; position: absolute; width: 25px; height: 25px; background: url("../../images/login/check_off.png") no-repeat; left: 0; top: 0px;} .login-bottom input:checked + label::before {background: url("../../images/login/check_on.png") no-repeat;} .login-bottom ul {float: right;} .login-bottom ul li {float: left;} .login-bottom ul li:first-child::after {content: ""; display: inline-block; vertical-align: middle; margin: 0 10px; width: 1px; height: 15px; background: #9F9F9F;} .login-bottom ul li a {display: inline-block; font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5e605f; border-bottom: 1px solid #fff; transition: all 0.3s;} .login-bottom ul li a:hover {color: #006cc7; border-bottom: 1px solid #3D83CE;} .login-info {position: relative; float: right; width: 45%;} .login-info::before {content: ""; position: absolute; width: 100%; height: 6px; background: url("../../images/login/info_bg.png"); left: 0; top: 0;} .login-info::after {content: ""; position: absolute; width: 100%; height: 6px; background: url("../../images/login/info_bg.png"); left: 0; bottom: 0;} .login-info-bx {padding: 30px 4% 60px; background: rgba(255, 255, 255, 0.7); margin: 6px;} .login-info-bx::before {content: ""; position: absolute; width: 6px; background: url("../../images/login/info_bg.png"); left: 0; top: 6px; bottom: 6px; box-sizing: border-box;} .login-info-bx::after {content: ""; position: absolute; width: 6px; background: url("../../images/login/info_bg.png"); right: 0; top: 6px; bottom: 6px; box-sizing: border-box;} .login-info-bx .login-info-inner:first-child {margin-bottom: 30px;} .login-info-bx .login-info-inner .title {font-size: 18px; line-height: 25px; letter-spacing: -0.5px; color: #006cc7; font-family: "Noto Medium"; margin-bottom: 7px;} .login-info-bx .login-info-inner .info {font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5f5f5f;} .login-info-bx .login-info-inner ul li {position: relative; font-size: 16px; line-height: 25px; letter-spacing: -0.5px; color: #5f5f5f; padding-left: 15px;} .login-info-bx .login-info-inner ul li::before {content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 0; top: 9px; background: #9A9A9A;} .login-btn {padding-top: 80px; text-align: center;} .login-btn .login-btn-bx {position: relative; display: inline-block; width: 190px; height: 70px; border-radius: 40px; background: #006CC7;} .login-btn .login-btn-bx::before {content: ""; position: absolute; width: 0%; height: 100%; left: -40px; top: 0; transform: skewX(-45deg); transition: all 0.5s; z-index: 1; background: #fff;} .login-btn a {position: relative; display: inline-block; line-height: 67px; font-size: 18px; letter-spacing: -0.5px; color: #fff; font-family: "Noto Medium"; border: 2px solid transparent; transition: all 0.5s; z-index: 4; width: 190px; height: 70px; border-radius: 40px;} .login-btn .login-btn-bx:hover::before {width: 140%;} .login-btn a:hover {border: 2px solid #006CC7; color: #006CC7;} @media all and (max-width: 767px){ .login-form {float: none; width: 100%; padding-right: 0; margin-right: 0; margin-bottom: 20px;} .login-info {float: none; width: 100%;} } /* .wrap-location .desc {position: relative; display: inline-block; width: 100%; margin: -31px 0 0 0; padding: 21px 0 21px 30px; background: #EDF1F4; } .wrap-location .desc .address, .wrap-location .desc .tel {position: relative; float: left; padding:10px 0 10px 80px;} .wrap-location .desc .tel::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../../images/common/ic_call.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;} .wrap-location .desc .address {margin-right: 45px;} .wrap-location .desc .address::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../../images/common/ic_location.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;} .wrap-location .desc strong {display:block; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; color: #333333} .wrap-location .desc p {font-family: 'Noto Light'; font-size: 16px; color: #333;} .wrap-location .desc .btn-location {float: right; position: relative; padding: 15px 0 15px 20px; background: #003956 url('../../images/button/btn_repeat_bg.png'); font-family: 'Noto Regular'; font-size: 18px; color: #fff; width: 190px; margin-right: 30px; } .wrap-location .desc .btn-location::after {content: ""; position: absolute; width: 30px; height: 30px; background: url("../../images/common/ic_location_arrow.png") no-repeat center; right: 20px; top: 14px; transition: right 0.5s;} .wrap-location .desc .btn-location:hover::after {right: 15px;} @media all and (max-width: 950px) { .wrap-location .desc .address, .wrap-location .desc .tel {float: none; width: 100%} } @media all and (max-width: 750px) { .wrap-location .desc .btn-location {display: inline-block; margin-top: 10px;} } */ @media all and (min-width: 769px){ /* .ul_3 {overflow: hidden; margin: 0 -10px;} */ .wrap-contents .ul_4 {overflow: hidden; margin-bottom: 30px; border-left: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf;} .wrap-contents .ul_4 > li {position: relative; float: left;} /* .wrap-contents .ul_4 > li::before {content: ""; position: absolute; width: 3px; height: 10px; background: #C8C8C8; left: 0; bottom: 0;} .wrap-contents .ul_4 > li::after {content: ""; position: absolute; width: 3px; height: 10px; background: #C8C8C8; right: 0; bottom: 0;} */ .wrap-contents .ul_4 > li > a {position: relative; display: block; padding: 15px 13px; z-index: 2; font-size: 15px; font-family: "Noto Medium"; text-align: center; border: 1px solid #dfdfdf; border-left: 0; border-top: 0;} .wrap-contents .ul_4 > li > a[target=_blank]{padding-right: 40px;} .wrap-contents .ul_4 > li > a[target=_blank]::before{content:""; display: block; position: absolute; width:12px; height: 12px; background: url(../../images/common/new_win_gray.png); right: 15px; top: 20px;} .wrap-contents .ul_4 > li:hover > a[target=_blank]::before{background: url(../../images/common/new_win_white.png);} /* .wrap-contents .ul_4 > li > a::after {content: ""; position: absolute; z-index: -1; width: 100%; height: 0px; left: 0; bottom: 0; transition: height 0.5s;} */ .wrap-contents .long .ul_4 > li {width: 20% !important;} .wrap-contents .long .ul_4 > li > a{padding: 15px 10px; font-size: 15px;} .wrap-contents .long .ul_4 > li > a[target="_blank"] {padding-right: 40px;} .wrap-contents .ul_4 > li:hover > a, .wrap-contents .ul_4 > li._active > a , .wrap-contents .ul_4 > li.on > a {background: #23499E;} .wrap-contents .ul_4 > li:hover > a, .wrap-contents .ul_4 > li._active > a, .wrap-contents .ul_4 > li.on > a {color: #fff;} .wrap-contents .ul_5 {position: relative; overflow: hidden; margin-bottom: 30px;} .wrap-contents .ul_5::before {content: ""; position: absolute; width: 1px; height: 100%; background: #fff; left: 0; top: 0; z-index: 1;} .wrap-contents .ul_5 > li {position: relative; float: left; width: 25%; border-bottom: 1px solid #CBCBCB;} .wrap-contents .ul_5 > li::before {content: ""; position: absolute; width: 1px; height: 20px; background: #CBCBCB; left: 0; top: 18px; transition: opacity 0.3s;} .wrap-contents .ul_5 > li::after {content: ""; position: absolute; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid #23499E; left: 0; top: 0; opacity: 0; transition: opacity 0.5s;} .wrap-contents .ul_5 > li:nth-child(4n-3)::before {display: none;} .wrap-contents .ul_5 > li > a {position: relative; display: block; padding: 15px 50px 15px 20px; font-size: 16px; font-family: "Noto Light"; letter-spacing: -0.5px; color: #555555; z-index: 3;} .wrap-contents .ul_5 > li > a::before {content: ""; position: absolute; width: 19px; height: 4px; background: #DDDDDD; top: 25px; border-radius: 0; right: 23px; transition: all 0.3s;} .wrap-contents .ul_5 > li > a::after {content: ""; position: absolute; width: 19px; height: 4px; background: #DDDDDD; top: 25px; border-radius: 0; right: 23px; transition: all 0.3s;} .wrap-contents .ul_5 > li:hover::before, .wrap-contents .ul_5 > li._active::before {opacity: 0;} .wrap-contents .ul_5 > li:hover + li::before, .wrap-contents .ul_5 > li._active + li::before {opacity: 0;} .wrap-contents .ul_5 > li:hover::after, .wrap-contents .ul_5 > li._active::after {opacity: 1;} .wrap-contents .ul_5 > li:hover > a::before, .wrap-contents .ul_5 > li._active > a::before {transform: rotate(45deg); width: 11px; background: #91A4CE; right: 29px;} .wrap-contents .ul_5 > li:hover > a::after, .wrap-contents .ul_5 > li._active > a::after {transform: rotate(-45deg); width: 11px; background: #91A4CE; right: 23px;} } @media all and (max-width: 930px) and (min-width: 769px){ .wrap-contents .ul_4 > li > a {font-size: 14px;} } @media all and (max-width: 1055px){ .wrap-contents .ul_4 > li {width: 25% !important;} .wrap-contents .long .ul_4 > li {width: 25% !important;} } @media all and (max-width: 1030px) { } .wrap-contents .tab_div > button {display: none;} @media all and (max-width: 835px){ .wrap-contents .long .ul_4 > li {width: 33.33% !important;} } @media all and (max-width: 768px){ .wrap-contents .long .ul_4 > li {width: 100% !important;} .wrap-contents .ul_4 > li {width: 100% !important;} .wrap-contents .tab_div {position: relative;} .wrap-contents .tab_div > ul {position: absolute; width: 100%; left: 0; height: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s; background: #fff;} .wrap-contents .tab_div > ul.on {max-height: 400px; z-index: 3; height: auto; overflow-y: auto;} .wrap-contents .tab_div.div_4 {/* margin-top: 30px; */ margin-bottom: 30px;} .wrap-contents .tab_div.div_4 > button {position: relative; display: block; width: 100%; padding: 0 4%; height: 50px; line-height: 50px; font-size: 15px; letter-spacing: -0.5px; font-family: "Noto DemiLight"; background: #fff; text-align: left; color: #23499E; border: 2px solid #23499E;} .wrap-contents .tab_div.div_4 > button::after {content: ""; position: absolute; width: 25px; height: 25px; background: url("../../images/sub/dep4_arrow.png") no-repeat; right: 4%; top: 50%; margin-top: -12.5px;} .wrap-contents .tab_div.div_4 ul {border: 2px solid #fff; border-top: 0; z-index: 4;} .wrap-contents .tab_div.div_4 ul.on {border: 2px solid #23499E; border-top: 0;} .wrap-contents .tab_div.div_4 ul li a {position: relative; display: block; width: 100%; padding: 10px 4%; font-size: 15px; letter-spacing: -0.5px; color: #464646; font-family: "Noto DemiLight"; transition: all 0.3s;} .wrap-contents .tab_div.div_4 ul li:hover a {background: rgba(35, 73, 158, 0.2); color: #23499e;} .wrap-contents .tab_div.div_4 ul li a[target="_blank"]::after {content: ""; position: absolute; right: 4%; width: 12px; height: 12px; background: url("../../images/common/new_win_gray.png") no-repeat; top: 14px;} .wrap-contents .tab_div.div_5 {margin-top: -15px;} .wrap-contents .tab_div.div_5 > button {position: relative; display: block; width: 100%; padding: 0 4%; height: 50px; line-height: 50px; font-size: 14px; letter-spacing: -0.5px; text-align: left; color: #2f2f2f; border: 1px solid #858585;} .wrap-contents .tab_div.div_5 > button::after {content: ""; position: absolute; width: 25px; height: 25px; background: url("../../images/sub/dep5_arrow.png") no-repeat; right: 4%; top: 50%; margin-top: -12.5px;} .wrap-contents .tab_div.div_5 ul {border: 1px solid #fff; border-top: 0;} .wrap-contents .tab_div.div_5 ul.on {border: 1px solid #858585; border-top: 0;} .wrap-contents .tab_div.div_5 ul li {width: 100% !important; } .wrap-contents .tab_div.div_5 ul li a {position: relative; display: block; width: 100%; padding: 10px 4%; font-size: 14px; letter-spacing: -0.5px; color: #959595; transition: all 0.3s;} .wrap-contents .tab_div.div_5 ul li:hover a {background: #E7E7E7; color: #2f2f2f;} .wrap-contents .tab_div.div_5 ul li a[target="_blank"]::after {content: ""; position: absolute; right: 4%; width: 16px; height: 14px; background: url("../../images/sub/ic_link.png") no-repeat; top: 14px;} } @media all and (max-width: 1055px) { .subject h2 {font-size: 36px;} } @media all and (max-width: 768px) { .subject h2 {font-size: 32px;} } /* 개인정보처리방침 */ .line-txt-bg {border: 1px solid #ddd; border-top: 2px solid #333; padding: 30px;} /* highlight */ .highlight-txt span{position: relative;font-weight: 600;display: inline-block;} .highlight-txt span::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; z-index: -1; } .highlight-txt1 span::before{background: rgba(203,32,38,0.2);} .highlight-txt2 span::before{background: rgba(250,166,53,0.2);} .highlight-txt3 span::before{background: rgba(214,63,17,0.2);} .highlight-txt4 span::before{background: rgba(0,198,255,0.2);} .highlight-txt5 span::before{background: rgba(24,61,147,0.2);} .highlight-txt6 span::before{background: rgba(67,80,93,0.2);} .highlight-txt7 span::before{background: rgba(0,157,87,0.2);}