@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	
	** navigation, button 관련 css 영역

───────────────────────────────────────────────────────────*/



/*───────────────────────────────────────────────────────────
	navigation common
───────────────────────────────────────────────────────────*/
/** PC 일반 **/
.nav_wrap .nav_box { padding: var(--size-80) 0 calc(var(--size-60) - 5px); border: 0; margin: 0; position: relative; z-index: 1; }
.nav_wrap .nav_box h2 { font-size: var(--title-50); line-height: 120%; padding: 0; margin: 0; text-align: center; color: var(--black-color00); font-weight: 600; z-index: 1; letter-spacing: -1px; }
.nav_wrap .nav_box p { font-size: var(--title-26); color: var(--black-color04); font-weight: 400; line-height: 1.77; text-align: center; margin-top: var(--title-30); }
.nav_wrap .nav_box p b { font-weight: 500; color: var(--point-color01); }
/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
/** PC 일반 **/
/* custom button type */
/* button 공통 요소 */
.btn, .btn_lg, .btn_sm, .btn_md { font-weight: 700; border-style: solid; border-width: 1px; padding: 0; margin: 0; text-indent: 0; vertical-align: top !important; text-align: center; display: inline-block; box-sizing: border-box; cursor: pointer; box-shadow: none; outline: 0; }
/* button 크기별 */
.btn_wd { width: 100%; height: 50px; line-height: 48px; font-size: 17px; }
.btn { width: 108px; height: 40px; line-height: 38px; font-size: 15px; }
.btn_lg { width: 92px; height: 72px; line-height: 70px; font-size: 14px; }
.btn_md { width: 60px; line-height: 28px; height: 30px; font-size: 13px; }
.btn_sm { height: 30px; line-height: 28px; width: auto !important; padding: 0 8px; font-size: inherit; border-color: #aaa !important; background-color: #aaa !important; color: #fff !important; }
/* button 색상별 */
.btn_point, .btn_point:hover { border-color: #222 !important; background-color: #222 !important; color: #fff !important; }
.btn_basic, .btn_basic:hover { border-color: #777 !important; background-color: #777 !important; color: #fff !important; }
.btn_default, .btn_default:hover { border-color: #aaa !important; background-color: #aaa !important; color: #fff !important; }
.btn_info, .btn_info:hover { border-color: #d3d3d3 !important; background-color: #fff !important; color: #555 !important; }
.btn_reset, .btn_reset:hover { border-color: #d3d3d3 !important; background: #fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50%; padding: 0 10px 0 30px !important; color: #555 !important; }
/* button wrapper */
.btn_wrap { margin: 0 auto; padding: 0; padding-top: 20px; font-size: 0; vertical-align: top; display: inline-block; }
.btn_wrap.ta_center { width: 100%; }
.btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a { margin-left: 12px; vertical-align: top; }
.btn_wrap button > a, .btn_wrap a > a { margin-left: 0; }
.view_btn .btn_wrap.ta_right { position: absolute; right: 0px; top: 0px; }
@media only screen and (max-width:1200px) {
	/* button wrapper */
	.btn_wrap { padding-top: 3.8%; }
}
@media only screen and (max-width:1024px) {
	/* button wrapper */
	.btn_wrap { padding-top: 4.2%; }
	.view_btn .btn_wrap.ta_left { position: absolute; left: 0px; top: 0px; }
	.nav_wrap .nav_box p { font-size: var(--title-20); line-height: 1.5; margin-top: 10px; margin-bottom: 2vw;}
}
@media only screen and (max-width:860px) {
}
@media only screen and (max-width:767px) {
	/* button wrapper */
	.btn_wrap { padding-top: 5.2%; }
}
@media only screen and (max-width:640px) {
	/* button wrapper */
	.btn_wrap { padding-top: 5.8%; }
	.btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a { margin-left: 8px; }
}
@media only screen and (max-width:479px) {
	/* button 크기별 */
	.btn_wd { font-size: 16px; }
	.btn { width: 70px; font-size: 13px; }
	.btn_lg { width: 72px; font-size: 13px; }
	.btn_md { width: 60px; font-size: 12px; }
	.btn_sm { padding: 0 4px; font-size: 12px; }
	/* button wrapper */
	.btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a { margin-left: 6px; }
	.view_btn .paging { width: 100%; min-height: 87px; }
	.view_btn .paging + .btn_wrap.ta_right { top: 70px; }
}
@media only screen and (max-width:320px) {
	/* button 크기별 */
	.btn { width: 68px; }
	.btn_md { width: 44px; font-size: 12px; }
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    Pr
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* quality_policy */
.sub_quality_policy { position: relative; padding-top: 22px; }
.sub_quality_policy:before { position: absolute; content: ''; top: -12%; left: 50%; transform: translateX(-50%); width: 1176px; height: 682px; background: url('../images/sub/sub_quality_policy_bg.png') no-repeat center / 100% auto; }
.sub_quality_policy .info_list { display: flex; gap: 130px; }
.sub_quality_policy .info_list > li { position: relative; width: calc(100% / 3 - 86.67px); padding-bottom: calc(100% / 3 - 86.67px); box-sizing: border-box; text-align: center; background: var(--point-color06); border-radius: 100%; }
.sub_quality_policy .info_list > li:nth-child(2) { background: var(--point-color07); }
.sub_quality_policy .info_list > li:nth-child(3) { background: var(--point-color08); }
.sub_quality_policy .info_list .line { position: absolute; width: 70px; height: 1px; background: var(--border-color02); top: 50%; right: calc(100% + 30px); }
.sub_quality_policy .info_list .line:before, .sub_quality_policy .info_list .line:after { position: absolute; content: ''; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 100%; background: var(--point-color03); transform: translateY(-50%); }
.sub_quality_policy .info_list .line:after { left: auto; right: 0; background: var(--point-color01); }
.sub_quality_policy .info_list > li:nth-child(3) .line:before { background: var(--point-color01); }
.sub_quality_policy .info_list > li:nth-child(3) .line:after { background: var(--point-color05); }
.sub_quality_policy .info_list .desc { position: absolute; top: 30px; left: 30px; font-size: var(--title-20); color: var(--point-white); background: var(--point-color03); width: calc(100% - 60px); height: calc(100% - 60px); border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 8px 17px 20px rgba(59, 174, 218, 0.4); padding: 20px; box-sizing: border-box; }
.sub_quality_policy .info_list > li:nth-child(2) .desc { background: var(--point-color01); box-shadow: 8px 17px 20px rgba(26, 81, 163, 0.4); }
.sub_quality_policy .info_list > li:nth-child(3) .desc { background: var(--point-color05); box-shadow: 8px 17px 20px rgba(76, 136, 222, 0.4); }
.sub_quality_policy .info_list .desc dt { font-size: 190%; font-weight: 600; line-height: 1.2; }
.sub_quality_policy .info_list .desc dt + dd { margin-top: 21px; }
.sub_quality_policy .info_list .desc dd { font-size: 110%; font-weight: 400; line-height: 1.45; }
.sub_title { position: relative; font-size: var(--title-20); box-sizing: border-box; }
.sub_title.cen { text-align: center; }
.sub_title.btm { margin-top: 79px; }
.sub_title h5 { font-size: 120%; font-weight: 400; color: var(--black-color04); line-height: 1.75; }
.sub_title h5 em { font-weight: 600; color: var(--point-color01); }
@media screen and (max-width:1400px) {
	.sub_quality_policy .info_list { gap: 9vw; }
	.sub_quality_policy .info_list > li { width: calc(100% / 3 - 6vw); padding-bottom: calc(100% / 3 - 6vw); }
	.sub_quality_policy .info_list .desc { width: 83%; height: 83%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	.sub_quality_policy .info_list .line { right: calc(100% + 4.4vw - 2.5vw); width: 5vw; }
	.sub_quality_policy .info_list .desc dt { font-size: clamp(26px, 2.4vw, 38px); }
	.sub_quality_policy .info_list .desc dt + dd { margin-top: clamp(10px, 1.5vw, 20px); }
	.sub_quality_policy .info_list .desc dd { font-size: clamp(15px, 1.4vw, 22px); }
}
@media screen and (max-width:1023px) {
	.sub_quality_policy:before { width: 107.7vw; height: 68.3vw; top: -6vw; }
}
@media screen and (max-width:860px) {
	.sub_quality_policy .info_list { flex-direction: column; align-items: center; gap: 60px; }
	.sub_quality_policy .info_list > li { width: 300px; padding-bottom: 300px; }
	.sub_quality_policy .info_list .desc { width: calc(100% - 40px); height: calc(100% - 40px); }
	.sub_quality_policy .info_list .line { top: auto; left: 50%; bottom: calc(100% + 10px); width: 1px; height: 40px; margin-left: -0.5px; }
	.sub_quality_policy .info_list .line:before, .sub_quality_policy .info_list .line:after { width: 6px; height: 6px; top: 0; left: 50%; right: auto; transform: translateX(-50%); }
	.sub_quality_policy .info_list .line:after { top: auto; bottom: 0; }
	.sub_title.btm { margin-top: clamp(20px, 8vw, 79px); }
}
@media screen and (max-width:640px) {
	.sub_title h5 { font-size: 110%; }
	.sub_quality_policy .info_list .desc { width: calc(100% - 35px); height: calc(100% - 35px); }
}
@media screen and (max-width:479px) {
	.sub_title h5 { font-size: 100%; }
}
@media screen and (max-width:360px) {
	.sub_quality_policy .info_list > li { width: 82vw; padding-bottom: 82vw; }
	.sub_quality_policy .info_list .desc { width: calc(100% - 30px); height: calc(100% - 30px); }
}
/* environ_policy */ .oath_list { position: relative; padding: 60px; background: var(--point-color09); box-sizing: border-box; font-size: var(--title-20); counter-reset: oath; display: flex; flex-direction: column; gap: 30px; }
.oath_list:before { position: absolute; content: ''; width: 338px; height: 185px; background: url('../images/skin/ci.png') no-repeat right bottom / 100% auto; right: 50px; bottom: 60px; opacity: 0.05; }
.oath_list > li { position: relative; font-size: 120%; font-weight: 400; color: var(--black-color04); line-height: 1.5; display: flex; align-items: center; gap: 30px; box-sizing: border-box; }
.oath_list > li:before { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--point-color01); font-size: 108%; font-weight: 600; color: var(--point-white); font-family: var(--font-type02); content: counter(oath, decimal-leading-zero); counter-increment: oath; flex-shrink: 0; }
@media screen and (max-width:1023px) {
	.oath_list { padding: clamp(25px, 5.8vw, 60px); gap: 25px; }
	.oath_list:before { width: 33vw; height: 19vw; min-width: 150px; min-height: 150px; right: clamp(30px, 5vw, 50px); bottom: clamp(30px, 6vw, 60px); }
	.oath_list > li { gap: 25px; }
}
@media screen and (max-width:860px) {
	.oath_list > li { font-size: 110%; }
	.oath_list > li:before { width: 55px; height: 55px; }
}
@media screen and (max-width:640px) {
	.oath_list { gap: 20px; }
	.oath_list > li { font-size: 100%; gap: 20px; }
	.oath_list > li:before { width: 50px; height: 50px; }
}
@media screen and (max-width:479px) {
	.oath_list { gap: 15px; }
	.oath_list > li { font-size: 90%; gap: 15px; }
	.oath_list > li:before { width: 45px; height: 45px; }
}
@media screen and (max-width:431px) {
	.oath_list > li { font-size: 85%; }
	.oath_list > li:before { width: 40px; height: 40px; }
}
/* certified */
.sub_certified .tab_list { margin-top: -0.5vw; }
.tab_list { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; font-size: var(--title-20); margin-bottom: 80px; }
.tab_list > li { display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 70px; min-width: 210px; box-sizing: border-box; font-size: 130%; font-weight: 400; color: var(--point-color01); border: 1px solid var(--point-color01); cursor: pointer; transition: all 0.4s; letter-spacing: -.78px;}
.tab_list > li.on { background: var(--point-color01); color: var(--point-white); font-weight: 600; }
.tab_conts { position: relative; }
.tab_conts > .item { position: relative; opacity: 0; height: 0; overflow: hidden; transition: all 0.4s; }
.tab_conts > .item.on { opacity: 1; height: auto; overflow: visible; }
/* over */
@media screen and (min-width:1024px) {
	.tab_list > li:hover { background: var(--point-color01); color: var(--point-white); }
}
.certified_list { display: flex; flex-wrap: wrap; gap: clamp(40px, 3.1vw, 60px) clamp(30px, 8.65vw, 167px); width: 100%; max-width: 1234px; margin: 0 auto; }
.certified_list > li { position: relative; width: calc(100% / 3 - clamp(15px, 5.77vw, 167px)); box-sizing: border-box; text-align: center; }
.certified_list .desc { font-size: var(--title-20); }
.certified_list .desc dt { position: relative; font-size: 0; padding-bottom: 133%; border: 9px solid var(--border-color03); box-sizing: border-box; overflow: hidden; }
.certified_list .desc dt + dd { margin-top: 30px; }
.certified_list .desc dt img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.certified_list .desc dd { font-size: 120%; font-weight: 400; color: var(--black-color04); line-height: 1.5; }
@media screen and (max-width:1023px) {
	.tab_list { margin-bottom: clamp(20px, 8vw, 80px); }
	.tab_list > li { height: 65px; min-width: 190px; }
	.certified_list .desc dt + dd { margin-top: clamp(15px, 3vw, 30px); }
}
@media screen and (max-width:860px) {
	.tab_list > li { height: 60px; min-width: 170px; }
}
@media screen and (max-width:640px) {
	.tab_list > li { height: 45px; min-width: 150px; font-size: 100%; }
	.certified_list { gap: 40px 15px; }
	.certified_list > li { width: calc(100% / 2 - 7.5px); }
	.certified_list .desc dt { border-width: 5px; }
	.certified_list .desc dd { font-size: 110%; }
}
@media screen and (max-width:479px) {
	.tab_list > li { min-width: 130px; font-size: 90%; }
	.certified_list .desc dd { font-size: 100%; }
}
/* reliability */ #wrap:has(.sub_content .sub_reliability) #contents_wrap { width: 100%; max-width: 100%; padding-bottom: 0; }
.prod_list > li { position: relative; display: flex; align-items: center; padding-bottom: 50px; box-sizing: border-box; }
.prod_list > li + li { padding-top: 50px; border-top: 1px solid var(--border-color01); }
.prod_list .thumb { position: relative; font-size: 0; background: var(--gray-bg01); width: 41.4%; padding-bottom: 400px; overflow: hidden; }
.prod_list .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.prod_list .cont { width: 58.6%; padding-left: clamp(20px, 4.7vw, 90px); box-sizing: border-box; }
.prod_list .tit_desc { font-size: var(--title-20); text-align: left; }
.prod_list .tit_desc + .bullet_list { margin-top: 30px; }
.prod_list .tit_desc dt { font-size: 130%; font-weight: 700; color: var(--point-color10); line-height: 1.3; font-family: var(--font-type02); }
.prod_list .tit_desc dt + dd { margin-top: 19px; }
.prod_list .tit_desc dd { font-size: 200%; font-weight: 700; color: var(--point-color01); line-height: 1.2; font-family: var(--font-type02);}
.bullet_list { font-size: var(--title-20); }
.bullet_list > li { position: relative; font-size: 120%; font-weight: 400; color: var(--black-color06); line-height: 1.5; display: flex; padding-left: 15px; box-sizing: border-box; letter-spacing: -0.05em; }
.bullet_list > li:before { position: absolute; content: '·'; top: 0; left: 0; }
.bullet_list > li + li { margin-top: 10px; }
.bullet_list .desc { display: flex; gap: 4px; }
.bullet_list .desc :where(dt, dd) { font-size: inherit; font-weight: inherit; color: inherit; }
.bullet_list .desc dt { flex-shrink: 0; }
.bullet_list .desc dd { word-break: break-all; }
.sub_reliability .exam { background: var(--gray-bg04); padding: 40px 0 120px; margin-top: 70px; }
.sub_reliability .exam .info_list { display: flex; }
.sub_reliability .exam .info_list > li { width: 100%; padding: 0 30px; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; gap: 33px; }
.sub_reliability .exam .info_list > li + li { border-left: 1px solid var(--border-color01); }
.sub_reliability .exam .info_list .icon { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; margin: 0 auto; border-radius: 100%; background: var(--point-color03); padding: 35px; font-size: 0; box-sizing: border-box; }
.sub_reliability .exam .info_list > li:nth-child(even) .icon { background: var(--point-color01); }
.sub_reliability .exam .info_list .desc { font-size: var(--title-20); }
.sub_reliability .exam .info_list .desc dt { font-size: 150%; font-weight: 500; color: var(--black-color03); line-height: 1.3; }
.sub_reliability .exam .info_list .desc dt + dd { margin-top: 18px; }
.sub_reliability .exam .info_list .desc dd { font-size: 120%; font-weight: 400; color: var(--black-color06); line-height: 1.5; }
@media screen and (max-width:860px) {
	.prod_list > li { display: block; padding-bottom: 40px; }
	.prod_list > li + li { padding-top: 40px; }
	.prod_list .thumb { width: 100%; padding-bottom: 70%; }
	.prod_list .cont { width: 100%; padding: 40px 0 0; }
	.prod_list .tit_desc dt + dd { margin-top: 14px; }
	.prod_list .tit_desc + .bullet_list { margin-top: 25px; }
	.sub_reliability .exam .info_list .icon { width: 25vw; height: 25vw; min-width: 150px; min-height: 150px; }
	.sub_reliability .exam .info_list > li { gap: clamp(20px, 4vw, 33px); }
	.sub_reliability .exam .info_list .desc dt { font-size: 140%; }
	.sub_reliability .exam .info_list .desc dt + dd { margin-top: 13px; }
	.sub_reliability .exam .info_list .desc dd { font-size: 110%; }
}
@media screen and (max-width:640px) {
	.prod_list .cont { padding-top: 30px; }
	.bullet_list > li { font-size: 110%; }
	.sub_reliability .exam { padding-bottom: 100px; }
	.sub_reliability .exam .info_list { flex-wrap: wrap; }
	.sub_reliability .exam .info_list > li { padding: 40px 20px; }
	.sub_reliability .exam .info_list > li + li { border-left: 0; border-top: 1px solid var(--border-color01); }
	.sub_reliability .exam .info_list .desc dt { font-size: 130%; }
	.sub_reliability .exam .info_list .desc dt + dd { margin-top: 10px; }
	.sub_reliability .exam .info_list .desc dd { font-size: 100%; }
}
@media screen and (max-width:479px) {
	.prod_list > li { padding-bottom: 30px; }
	.prod_list > li + li { padding-top: 30px; }
	.prod_list .tit_desc dt { font-size: 120%; }
	.prod_list .tit_desc dd { font-size: 180%; }
	.prod_list .tit_desc + .bullet_list { margin-top: 20px; }
	.bullet_list > li { font-size: 100%; padding-left: 10px; }
	.bullet_list > li + li { margin-top: 7px; }
	.sub_reliability .exam { padding-bottom: 70px; margin-top: 50px; }
	.sub_reliability .exam .info_list > li { padding: 30px 20px; }
	.sub_reliability .exam .info_list .desc dt { font-size: 120%; }
	.sub_reliability .exam .info_list .desc dd { font-size: 90%; }
}
@media screen and (max-width:360px) {
	.bullet_list > li { font-size: 90%; }
}