@charset "utf-8";

/* 
 * content CSS Document
 *
 */



/* sub visual */
.area-subVisual{position:relative; display: flex; justify-content: center; align-items: center; height:400rem; margin:0 40rem; box-sizing:border-box; border-radius:20rem; overflow:hidden;}
.area-subVisual .scroll_ani{display:none;}
.sub-visual__text{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 h2{margin-top:20rem; font-weight:700; font-size:58rem; text-transform:capitalize; line-height:1em; word-break:keep-all;}

.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{background-image:url(../img/content/img_company_bg.jpg); background-position: 50% 100%;}
.area-subVisual[data-sublayout="service"] .sub-visual__bg i{background-image:url(../img/content/img_service_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_customer_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%; height:80rem; border-bottom:1px solid #eee; box-sizing:border-box; }
.area_lnb nav{width:100%; height:100%;}
.area_lnb nav .wrap{width:100%; height:100%;}
.area_lnb nav ul{display:flex; justify-content: center; align-items: center; gap:60rem; width:100%; height:100%;}
.area_lnb nav ul > li{}
.area_lnb nav ul > li:last-child{margin: 0;}
.area_lnb nav ul > li > a{position:relative; display:block; line-height:1.4em; word-break:keep-all; font-family:var(--font-kr); }
.area_lnb nav ul > li > a > span{font-size:18rem; font-weight:500; color:#bab9b9; /*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 > span{color:var(--color-point); 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:keep-all; 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; box-sizing:border-box; }
#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;}
.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:1200px){
	.area_lnb nav ul{gap:30rem;}
	.area_lnb nav ul > li > a > span{text-align:center;}
}
@media (max-width:1024px){
	.area-subVisual{height:300rem; margin:0 14rem; border-radius:10rem;}
	.area-subVisual h2,
	.area-subVisual h3{font-size:55rem;}
	.sub_title{margin-bottom:40rem;}
	.sub_title > h2{font-size:40rem;}
	.area_lnb{height:70rem;}
	.area_lnb nav ul > li > a > span{font-size:17rem; line-height:1em;}
	#content{padding:70rem 0;}
}
@media (max-width:860px){
	.sub_title > h2{font-size:45rem;}
}
@media (max-width:768px){
	.area-subVisual{height:230rem;}
	.area-subVisual h2,
	.area-subVisual h3{font-size:38rem;}
	.sub_title > h2{font-size:40rem;}
	.area_navigation ul{gap:30rem;}
	.area_navigation ul li{font-size:17rem;}
	.area_navigation ul li:after{top:3rem; right:-19rem;}
	.area_navigation ul li img{top:1px; }
	
	.btn_m_lnb{display:none;}
	.area_lnb{height:60rem;}
	.area_lnb nav ul{gap:20rem;}
	.area_lnb nav ul > li > a > span{font-size:16rem;}

	/*
	.area_lnb{background:#fff; height:auto; border-bottom:none; margin-bottom:60rem; z-index:50;}
	.area_lnb .lnb{box-sizing:border-box;}
	.area_lnb .lnb ul{display:none; position:absolute; height:auto;padding:0; text-align:left; border-bottom:1px solid #eee; background:#fff; z-index:100; box-shadow:none; box-sizing:border-box;}
	.area_lnb .lnb ul li{float:none; width:100%;}
	.area_lnb .lnb ul li a{padding:12rem 15rem; color:#222; border-top:1px solid #eee; transition:all 0.1s ease 0s; text-align:left;}
	.area_lnb nav ul > li > a > span{font-size:16rem; }
	.area_lnb li > a.active, .area_lnb li > a:hover{transform:none;}
	.area_lnb li > a.active:after, .area_lnb li > a:hover:after{display:none;}
	.area_lnb li > a.active:before{width:0;}
	.area_lnb li > a.active:hover:before{width:100%;}
	*/

	#content{padding:30rem 0; min-height:300rem;}
	.sub_title{margin-bottom:20rem;}
	.sub_title > h2{font-size:30rem;}
}
@media (max-width:620px){
	.area-subVisual h2, .area-subVisual h3{font-size:30rem;}
/*
	#content .scrollTable{overflow:auto;}
	#content .scrollTable .table{width:650px;}
	#content .mob_info{display:block; margin:10px 0 0; font-size:13rem;}
	#content .mob_info span.en{display:none;}
*/

	.area_lnb{height:50rem;}
	.area_lnb nav ul{gap:12rem;}
	.area_lnb nav ul > li > a > span{font-size:15rem;}
}
@media (max-width:480px){
	
	.area-subVisual{height:130rem; /*margin:0 8rem;*/ border-radius:7rem;}
	.area-subVisual h2,
	.area-subVisual h3{margin:0; font-size:19rem;}
	.sub_title > h2{font-size:17rem;}
	.area_navigation{margin:15rem 0 0;}
	.area_navigation ul{gap:20rem;}
	.area_navigation ul li{font-size:12rem;}
	.area_navigation ul li:after{top:1rem; right:-14rem; width:5rem; height:11rem;}
	.area_navigation ul li img{top:0; width:15rem; height:11rem;}
	.btn_m_lnb{font-size:13rem; padding:12rem 30rem 12rem 12rem;}

	.lnb-wrap{margin:0 14rem;}
	.area_lnb{height:40rem;}
	.lnb .wrap{height:auto; }
	.area_lnb nav ul{display:flex; justify-content: flex-start; width:100%; text-align:center; gap:0rem;}
	.area_lnb nav ul > li{display:table-cell; white-space:nowrap; max-width:initial;}
	.area_lnb nav ul > li:nth-child(1){margin-left:5rem;}
	.lnb > div{width:100%; height:100%; overflow-x:scroll; overflow-y:hidden;}
	.lnb .wrap::-webkit-scrollbar{width:3rem; height:5rem;}
	.area_lnb .lnb ul li a{line-height:1em; padding:0 5rem;}
	.area_lnb nav ul > li > a > span{font-size:11rem; letter-spacing:-0.6px;}
	.btn_m_lnb:after{width:10rem; height:6rem; right:10rem; margin-top:-3rem;}
	#content{padding:20rem 0;}
	.sub_title{margin-bottom:10rem;}
	.scroll_ani span{font-size:11rem; padding-bottom:45rem;}
	.scroll_ani i{height:40rem;}

	#content table.table thead th{font-size:11rem; padding:10rem 6rem;}
	#content table.table th{font-size:11rem; padding:10rem 6rem;}
	#content table.table tbody td{font-size:11rem; padding:6rem;}
}

.sub-tit{display:block; text-align:center; margin-bottom:40rem;}
.sub-tit > em{display:inline-block; margin-bottom:20rem; font-size:19rem; font-weight:600; color:var(--color-point); line-height:1em; word-break:keep-all;}
.sub-tit > h3{display:block; font-size:45rem; font-weight:800; line-height:1.3em; word-break:keep-all; color:#222;}
.sub-tit > h3 > i{color:var(--color-point);}


/* 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:#042d66;}
#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){
	.area-member{margin-top:80rem;}
}
@media (max-width:620px){
	#login-box{width:100%;}
}
@media (max-width:480px){
	.area-member{margin-top:50rem;}
	#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;}
	
}