@charset "utf-8"; /* 
 * content CSS Document
 *
 */
/* sub visual */
.area-subVisual {position: relative; display: flex; justify-content: center; align-items: center; height: 650rem; box-sizing: border-box; overflow: hidden; } 
.area-subVisual .scroll_ani { display: none; } 
.sub-visual__text {margin-top:50rem; text-align: center; } 
/*.sub-visual__text { position:relative; top:57%; width:auto; margin:0 auto; transform: translateY(-50%); text-align:center; } */
.sub-visual__text>* {color: #fff; } 
.area-subVisual em {display: inline-block; margin-bottom: 20rem; font-weight: 600; font-size: 20rem; line-height: 1em; word-break: keep-all; } 
.area-subVisual h2 {font-weight: 700; font-size: 70rem; text-transform: capitalize; line-height: 1em; word-break: keep-all; } 
.area-subVisual[data-sublayout="customer"] {display: none; } 
.area-subVisual .sub-visual__bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; } 
.area-subVisual .sub-visual__bg i {position: absolute; opacity: 1 !important; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; box-sizing: border-box; background-size: cover; background-position: 50% 50%; } 
.area-subVisual[data-sublayout="company"] .sub-visual__bg i,
.area-subVisual[data-sublayout="cs"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); background-position: 50% 100%; } 
.area-subVisual[data-sublayout="brand"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); } 
.area-subVisual[data-sublayout="qna"] .sub-visual__bg i {background-image: url(../img/content/img_qna_bg.jpg); } 
.area-subVisual[data-sublayout="customer"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); } 
.area-subVisual[data-sublayout="review"] .sub-visual__bg i {background-image: url(../img/content/img_review_bg.jpg); } 

/* page navigation */
.area_navigation {margin: 25rem 0 0; } 
.area_navigation ul {display: flex; justify-content: center; align-items: center; gap: 40rem; } 
.area_navigation ul li {position: relative; line-height: 1; font-size: 18rem; color: #fff; opacity: 0.8; font-family: var(--font-kr); } 
.area_navigation ul li br {display: none; } 
.area_navigation ul li:first-child {padding-left: 0; } 
.area_navigation ul li img {display: inline-block; position: relative; top: 4rem; width: 20rem; height: 15rem; vertical-align: top; opacity: 0.8; } 
.area_navigation ul li i {display: none; } 
.area_navigation ul li:after {content: ""; position: absolute; top: 5.5rem; right: -23rem; width: 6rem; height: 12rem; background: url(../img/content/ic-navi-arr.svg)no-repeat center; background-size: contain; opacity: 0.6; } 
.area_navigation ul li:last-child:after {display: none; } 
.area_subVisual.nobbs-tab .area_navigation {bottom: 50rem; } 
.area-subVisual.on {padding: 90rem 0 0; } 
.area-subVisual.on .area_navigation {position: absolute; opacity: 0; z-index: -1; } 

/* lnb */
.area_lnb { width: 100%; box-sizing: border-box; margin-top: 60rem; } 
.area_lnb nav { width: 100%; height: 100%; } 
.area_lnb nav .wrap { width: 100%; height: 100%; } 
.area_lnb nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12rem; width: 100%; height: 100%; } 
.area_lnb nav ul>li { width: 100%; height: 60rem; } 
.area_lnb nav ul>li:last-child { margin: 0; } 
.area_lnb nav ul>li>a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1.4em; word-break: keep-all; font-family: var(--font-kr); border: 1px solid #e9e9e9; box-sizing: border-box; border-radius: 5rem; text-align: center; } 
.area_lnb nav ul>li>a>span { font-size: 18rem; font-weight: 500; color: #999; /*transition:all 0.3s ease; */ } 
.area_lnb nav ul>li>a>span i { display: none; } 
.area_lnb nav ul>li>a>span br { display: none; } 
.area_lnb nav ul>li.active>a { background: var(--color-point03); border-color: var(--color-point03); } 
.area_lnb nav ul>li.active>a>span { color: #fff; font-weight: 700; } 
.btn_m_lnb { display: none; position: relative; padding: 15rem 35rem 15rem 15rem; border-bottom: 1px solid #eee; border-left: none; border-right: none; box-sizing: border-box; font-size: 17rem; font-weight: 600; color: #333; transition: all 0.3s ease 0s; } 
.btn_m_lnb:after { content: ''; display: block; position: absolute; right: 20rem; top: 50%; width: 12rem; height: 8rem; margin-top: -4rem; background: url(../img/content/ic-arr-bk.svg) no-repeat 0 0; background-size: 100%; transition: all 0.3s ease 0s; } 
.btn_m_lnb.active { background: var(--color-point); border-color: var(--color-point); color: #fff; } 
.btn_m_lnb.active:after { background-image: url(../img/content/ic-arr-wt.svg); transform: rotate(180deg); } 

/* 테이블 */
#content .mob_info { display: none; } 
#content table.table { border-top: 2px solid #222; width: 100%; } 
#content table.table thead th { background: #f9f9f9; border-right: 1rem solid #eee; font-size: 16rem; font-weight: bold; color: #222; word-break: keep-all; } 
#content table.table thead tr:last-child th { border-bottom: 1rem solid #eee; } 
#content table.table thead tr th:last-child { border-right: 0; } 
#content table.table tbody td { border: 1px solid #eee; font-size: 16rem; color: #555; font-weight: 400; text-align: center; word-break: break-word; line-height: 1.5em; } 
#content table.table tbody td.left { text-align: left; } 
#content table.table tbody td strong { font-weight: 500; } 
#content table.table tbody td p { font-size: 15rem; color: #555; font-weight: 500; } 
#content table.table tbody td span { display: block; color: var(--color-point); font-weight: 600; line-height: 1.5em; } 
/*#content table.table tbody td span:nth-of-type(1) { padding:5rem 0 0; } */
#content table.table th { padding: 15rem; border-bottom: 1px solid #eee; color: #222; word-break: break-word; } 
#content table.table td { padding: 15rem 10rem; } 
#content table.table tbody tr td:first-child,
#content table.table tbody tr th:first-child { border-left-width: 0px; } 
#content table.table tbody tr td:last-child { border-right-width: 0px; } 
/*table.table tr:hover td, table.table tr:focus td { background-color:#f7faff; } */
#content { position: relative; min-height: 500rem; padding: 100rem 0 100rem; ; box-sizing: border-box; } 
#content.area_cs { padding:170rem 0 100rem; } 
#content.area_service { padding: 75rem 0 0rem; } 
.sub-title { text-align: center; margin-bottom: 55rem; } 
.sub-title>h2 { font-size: 50rem; font-weight: 700; color: #222; line-height: 1em; word-break: keep-all; font-family: var(--font-kr); } 
.sub-title>h2 br { display: none; } 

/* 메인 탭과 서브 탭 내비게이션 바 */
.tab_nav { display: flex; align-items: center; position: relative; margin-bottom: 30rem; border-bottom: 2px solid #B4B4B4; box-sizing: border-box; } 
.tab_nav>li { position: relative; width: calc(100% / 2); width: -webkit-calc(100% / 2); text-align: center; cursor: pointer; } 
.tab_nav>li a { display: block; padding: 12rem; box-sizing: border-box; } 
.tab_nav>li:before { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 0; background: #aaa; } 
.tab_nav>li span { font-size: 16px; font-weight: 600; color: #c9c9cb; } 
.tab_nav>li.active span { color: var(--color-point); } 
.tab_nav>li.active:before { height: 2px; background: var(--color-point); } 
.tab_nav>li:last-child:after { display: none; } 
.sub_tab_nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rem; } 
.sub_tab_nav>li { display: block; } 
.sub_tab_nav>li>a { display: block; padding: 5rem; font-weight: bold; color: #979797; background: #fff; border: 1px solid #979797; box-sizing: border-box; border-radius: 6rem; text-align: center; font-size: 12rem; } 
.sub_tab_nav>li.active a { border-color: var(--color-point); color: var(--color-point); } 
.tab_nav li.active a,
.sub_tab_nav li.active a { z-index: 2; } 
.tab,
.sub_tab { display: none; } 
.tab.active,
.sub_tab.active { display: block; } 

@media (max-width:1024px) { 
 .area-subVisual { height: 450rem; } 
.area-subVisual h2,
.area-subVisual h3 { font-size: 55rem; } 
.sub-title { margin-bottom: 60rem; } 
.sub-title>h2 { font-size: 50rem; } 
#content { padding: 80rem 0; } 
#content.area_cs { padding: 120rem 0 80rem; } 
 } 

@media (max-width:860px) { 
 .sub-title > h2 { font-size: 45rem; } 
 } 
@media (max-width:768px) { 
 .area-subVisual { height: 300rem; } 
.area-subVisual h2,
.area-subVisual h3 { font-size: 38rem; } 
.sub-title>h2 { font-size: 40rem; } 
.area_lnb { margin-top: 50rem; } 
.area_lnb nav ul { gap: 12rem; grid-template-columns: 1fr 1fr; } 
.area_lnb nav ul>li { height: 54rem; } 
.area_lnb nav ul>li>a>span { font-size: 17rem; } 
#content { padding: 60rem 0; min-height: 300rem; } 
#content.area_cs { padding: 120rem 0 60rem; } 
.sub-title { margin-bottom: 40rem; } 
 } 
@media (max-width:620px) { 
 .area-subVisual h2,
.area-subVisual h3 { font-size: 30rem; } 
 } 
@media (max-width:480px) { 
 .area-subVisual { height: 180rem; } 
.area-subVisual em { font-size: 12rem; margin-bottom: 8rem; } 
.area-subVisual h2,
.area-subVisual h3 { margin: 0; font-size: 27rem; } 
.area_lnb { margin-top: 30rem; } 
.area_lnb nav ul { gap: 6rem; grid-template-columns: 1fr; } 
.area_lnb nav ul>li { height: 36rem; } 
.area_lnb nav ul>li>a>span { font-size: 13rem; } 
#content { padding: 30rem 0 0; } 
#content.area_cs { padding: 60rem 0 30rem; } 
#content table.table thead th { font-size: 12rem; padding: 10rem 6rem; } 
#content table.table th { font-size: 12rem; padding: 10rem 6rem; } 
#content table.table tbody td { font-size: 12rem; padding: 10rem 6rem; } 
 } 

.sub-title { display: block; text-align: center; margin-bottom: 70rem; } 
.sub-title > em { display: inline-block; margin-bottom: 15rem; font-size: 18rem; font-weight: 600; color: var(--color-point03); line-height: 1em; word-break: keep-all; } 
.sub-title > h3 { display: block; font-size: 45rem; font-weight: 800; line-height: 1.3em; word-break: keep-all; color: #222; } 

@media (max-width:1024px){
	.sub-title > h3 {font-size: 38rem;}
}
@media (max-width:768px){
	.sub-title{margin-bottom:40rem;}
	.sub-title > h2{font-size:40rem;}
	.sub-title > h3 {font-size: 27rem;}
}
@media (max-width:480px){
	.sub-title{margin-bottom:20rem;}
	.sub-title > em {font-size:11rem; margin-bottom:7rem;}
	.sub-title > h2{font-size:17rem;}
	.sub-title > h3 {font-size:17rem;}
}



/* login */

#login-box { position: relative; width: 500rem; margin: 0 auto; } 
#login-box #login_area { background-color: #fff; } 
#login-box #login_area h2.member { font-size: 30rem; font-family: Gotham, notokr; } 
#login-box #login_area h2 { line-height: 50rem; text-align: center; font-size: 48rem; } 
#login-box #login_area h3 { text-align: center; color: #666 } 
#login-box #login_area h3 p { font-size: 15rem; font-weight: normal; } 
#login-box #login_area #login_fs { margin-top: 0rem; padding: 0; } 
#login-box #login_area #login_fs .login_input { width: 100%; height: 55rem; line-height: 55rem; padding: 0 25rem; margin-bottom: 10rem; border: none; background-color: #f9f9f9; border: 1rem solid #e4e4e4; box-sizing: border-box; font-weight: bold; font-size: 16rem; color: #111; } 
#login-box #login_area #login_fs .login_input:focus { border: 1rem solid #1974d9 !important; box-shadow: none; } 
#login-box #login_area #login_fs .login_input::placeholder { color: #666; } 
#login_fs label { position: relative; top: -2rem; font-size: 14rem; font-weight: 500; color: #555; } 
#login-box #login_area #login_fs .btn_submit { display: block; width: 100%; height: 63rem; margin-top: 20rem; background: var(--color-point); text-align: center; color: #fff; font-size: 18rem; font-weight: 500; border-radius: 0; transition: all 0.3s ease; } 
#login-box #login_area #login_fs .btn_submit:hover { background:#000; } 
#login-box #login_info { position: relative; padding: 0rem 0; margin-top: -1rem; border: 0rem solid #dfdce1; background-color: #fff; text-align: center; } 
#login-box #login_info p { font-size: 13rem; } 
#login-box #login_info div { margin-top: 0rem; } 
#login-box #login_info div a { display: inline-block; width: 155rem; height: 34rem; line-height: 34rem; border: 1rem solid #d5d5d5; color: #333; font-size: 13rem; font-weight: bold } 
#login-box #login_info div a:last-child { margin-left: -1rem } 
#login-box .button_etc { position: relative; width: 100%; text-align: center; } 
#login-box .button_etc a { display: inline-block; margin: 25rem 10rem 0rem; font-size: 14rem; font-weight: 600; color: #555; border: none; } 
#login-box .button_etc a:hover { color: var(--color-point); } 
@media (max-width:768px) { } 
@media (max-width:620px) { 
	#login-box { width: 100%; } 
} 
@media (max-width:480px) { 
 #login-box #login_area #login_fs .login_input { height: 45rem; line-height: 45rem; padding: 10rem; font-size: 12rem; margin-bottom: 7rem; } 
 #login_fs label { font-size: 12rem; top: 0; } 
 #login-box #login_area #login_fs .btn_submit { margin-top: 10rem; height: 45rem; font-size: 15rem; } 
 #login-box .button_etc a { margin: 15rem 0; font-size: 12rem; } 
 } 
 .area_policy { padding-top: 0; } 
 .area_policy h2 { padding: 30rem 0; font-size: 40rem; color: #222; text-align: center; font-weight: 700; } 
 .area_policy h3 { margin-bottom: 20rem; font-weight: 700; font-size: 22rem; color: #222; } 
 .area_policy ul li,
 .area_policy p { line-height: 1.6; font-weight: 400; font-size: 15rem; color: #666; text-align: justify; } 
 .area_policy ul li { margin-bottom: 8rem; } 
 .area_policy ul li:last-child { margin: 0; } 
 .area_policy ul li ul { margin-top: 5rem; margin-bottom: 20rem; } 
 .area_policy ul li ul li { margin-bottom: 2rem; font-size: 15rem; } 
 .area_policy .inr_policy { padding: 40rem 0; border-bottom: 1rem solid #ddd; } 
 .area_policy .inr_policy.first { padding-top: 0; } 
 .area_policy .inr_policy:last-child { border: none; } 

@media (max-width:480px) { 
 .area_policy h3 { font-size: 15rem; margin-bottom: 7rem; } 
 .area_policy .inr_policy { padding: 20rem 0; } 
 .area_policy ul li,
 .area_policy p { font-size: 12rem; line-height: 1.4em; margin-bottom: 4rem; text-align: left; } 
 .area_policy ul li ul { margin-top: 2rem; margin-bottom: 7rem; } 
 .area_policy ul li ul li { font-size: 12rem; margin-bottom: 4rem; } 
 }