@charset "utf-8";
/* 서브페이지 레이아웃 */

/* 헤더 변환 */
#header { height: 112px; border-top: none; border-bottom: 1px solid #5773a9; background: #093687; }
#header .top-area { height: 111px; }
#header .top-area .logo-area,
#header .top-area .gnb-area,
#header .top-area .gnb-area ul,
#header .top-area .gnb-area ul li { height: 100%; }
#header .top-area .logo-area { padding-top: 23px; }
#header .top-area .gnb-area ul li a { color: #a5afca; height: 100%; padding-top: 45px; font-weight: 800; }
#header .top-area .gnb-area ul li a:hover,
#header .top-area .gnb-area ul li.select a { color: #fff; }
#header .top-area .gnb-area ul li:first-child:before { display: none; }
#header .top-area .gnb-area ul li:first-child a{ position: relative; }
#header .top-area .gnb-area ul li:first-child a:before { content: ""; position: absolute; background: url(../../../images/header/all_gnb_menu_ico_w.png) no-repeat; width: 10px; height: 10px; top: 51px; left: 7px; z-index: 1px; }
#header .top-area .gnb-area ul li:first-child a:hover:before { content: ""; position: absolute; background: url(../../../images/header/all_gnb_menu_hover_ico_w.png) no-repeat; width: 10px; height: 10px; top: 51px; left: 7px; z-index: 1px; }
#header .top-area .login-area,
#header .top-area .login-area ul,
#header .top-area .login-area ul li,
#header .top-area .login-area ul li a { height: 100%; }
#header .top-area .login-area ul li a { color: #a5afca; padding-top: 7px; }
#header .top-area .login-area ul li a:hover { color: #fff; }
#header .top-area .login-area ul li:after { position: absolute; content: ""; width: 1px; height: 10px; background: #1E54B7; top: 49px; right: -10px; }

#page_description_area { background: #093687; height: 350px; cursor: default; }
#page_description_area .description-container { height: 285px; position: relative; }
#page_description_area .description-container:after { width: 100%; height: 1px; content: ''; position: absolute; z-index: 1; background-image: -webkit-linear-gradient(0deg, #5773a9 0%, #093687 100%); background-image: -moz-linear-gradient(0deg, #5773a9 0%, #093687 100%); background-image: -o-linear-gradient(0deg, #5773a9 0%, #093687 100%); background-image: linear-gradient(90deg, #5773a9 0%, #093687 100%); }
#page_description_area .description-container .description { height: 285px; width: 1000px; margin: 0 auto; padding: 95px 0; box-sizing: border-box; position: relative; }
#page_description_area .description-container .description:after { position: absolute; z-index: 2; content: ''; right: 0; }
#page_description_area .description-container .description h2 { font-size: 40px; font-weight: 800; color: #fefefe; margin-bottom: 30px; letter-spacing: -1px; display: inline-block; line-height: 40px; }
#page_description_area .description-container .description p { color: #7781b5; font-size: 18px; line-height: 25px; letter-spacing: -1px; display: block; }

#page_description_area .sub-gnb-title-container { height: 65px; }
#page_description_area .sub-gnb-title-container .sub-gnb-title { width: 1000px; margin: 0 auto; height: 100%; }
#page_description_area .sub-gnb-title-container .sub-gnb-title span { display: block; width: 190px; background: #5283e0; height: 100%; text-align: center; line-height: 66px; font-size: 16px; color: #fff; font-weight: 800; }

#container { padding-bottom: 0; }
#container .content { position: relative; }
#container .content:after { clear: both; height: 0; display: block; content: ''; }
#container .content .left-menu { width: 190px; border-right: 1px solid #dee3eb; padding-top: 5px; position: absolute; height: 100%;  z-index: 1; top: 0; left: 0; }
#container .content .left-menu ul li { height: 60px; }
#container .content .left-menu ul li a { display: block; height: 100%; line-height: 60px; font-size: 16px; text-align: center; color: #555; transition: opacity .2s ease-out; }
#container .content .left-menu ul li a:hover { opacity: 0.8; }
#container .content .left-menu ul .select a { font-weight: 800; color: #5283e0; }

#container .content .content-area { width: 810px; float: right; padding: 40px 35px 150px 35px; }
#container .content .content-area .navi { margin-bottom: 70px; }
#container .content .content-area .navi ul li { display: inline-block; line-height: 15px; margin-right: 20px; }
#container .content .content-area .navi ul li a { display: block; position: relative; height: 100%; font-size: 13px; letter-spacing: -0.5px; }
#container .content .content-area .navi ul li a:after { width: 4px; height: 7px; background: url(../../../images/sub/common/navi_arrow_ico.png); content: ''; position: absolute; z-index: 1; bottom: 5px; right: -14px; }
#container .content .content-area .navi ul li:last-child a:after { display: none; }

#container .content .content-area .content-content .title { font-size: 35px; color: #2d2d2d; font-weight: 800; text-align: center; line-height: 35px; display: block; padding-bottom: 35px; border-bottom: 1px solid #dcdcdc; }
#container .content .content-area .content-content .view { padding-top: 35px; }
#container .content .content-area .content-content .view .s-title { font-size: 17px; font-weight: bold; color: #2d2d2d; text-align: center; margin-bottom: 35px; }
#container .content .content-area .content-content .view .s-title .col { color: #5283e0; }
#container .content .content-area .content-content .view .b-title { font-size: 14px; color: #fff; background: #5283e0; text-align: center; padding: 15px; line-height: 17px; border-radius: 100px; }

#container .remind-wrap { background: #fff; border-top: 1px solid #dee3eb; padding: 65px 0; }
#container .remind-wrap .remind { width: 1100px; margin: 0 auto; text-align: center; }
#container .remind-wrap .remind p { font-size: 20px; font-weight: bold; color: #2d2d2d; }
#container .remind-wrap .remind .imp { font-size: 17px; font-weight: bold; text-decoration: underline; color: #5283e0; margin: 10px 0 5px; }
#container .remind-wrap .remind span { font-size: 17px; font-weight: bold; }
#container .remind-wrap .remind .btn-area { margin-top: 30px; }
#container .remind-wrap .remind .btn-area a { display: inline-block; height: 60px; width: 280px; border-width: 2px; border-style: solid; border-radius: 5px; font-size: 18px; line-height: 56px; font-weight: bold; margin: 0 15px; }
#container .remind-wrap .remind .btn-area a.kakao-btn { border-color: #f6bf00; color: #f6bf00; }
#container .remind-wrap .remind .btn-area a.application-btn { border-color: #5283e0; color: #5283e0; }

/* 커스텀 체크 */
.custom-check { display: none; }
.custom-check-label { padding-left: 28px; position: relative; font-size: 15px; cursor: pointer; line-height: 20px; }
.custom-check-label:before { width: 20px; height: 20px; position: absolute; content: ''; background: url(../../../images/sub/common/check.png); background-size: 20px 40px; background-repeat: no-repeat; background-position: 0 0; left: 0; top: 50%; margin-top: -10px; }
.custom-check:checked + .custom-check-label { font-weight: bold; color: #5283e0; }
.custom-check:checked + .custom-check-label:before { background: url(../../../images/sub/common/check.png); background-size: 20px 40px; background-repeat: no-repeat; background-position: 0 -20px; }

/* 아직까지 탑티어를 모르셨나요 배너 */
.remind-banner { position: fixed; left: 50%; top: 200px; margin-left: 520px; z-index: 10; }
.remind-banner .btn-top-area { height: 30px; margin-bottom: 5px; }
.remind-banner .btn-top-area button { border: none; background: none; outline: 0; cursor: pointer; opacity: 0.7; }
.remind-banner .btn-top-area button:hover { opacity: 1; }
.remind-banner .content-area { border-radius: 10px; box-shadow: 0 10px 5px -5px rgba(0,0,0,0.1); height: 230px; margin-bottom: 10px; position: relative; }
.remind-banner .content-area a { display: inline-block; height: 28px; width: 123px; position: absolute; left: 19px; }
.remind-banner .content-area a.application-btn { bottom: 21px; }
.remind-banner .content-area a.kakao-btn { bottom: 54px; }