@charset "utf-8";
/**
 * WD Cascading Style Sheets
 * File Name : layout.css
 * Description : layout 스타일시트
 * Email : kukuyani@naver.com
 * Date : 2022.10.21
 * Update : 2022.10.21
 * Copyright(c) WD. All Rights Reserved.
*/

/* ************************************** *
 * common style
 * ************************************** */
::selection { background: rgba(26,115,232,.1);}
.in-wrap { width: 90%; max-width: 1400px; margin: 0 auto;}
/* mobile컨텐츠 숨김 */
.con-m { display: none;}
/* pc에서 br태그 효과 적용 */
.br-pc { display: block;}
.img-max { max-width: 100%;}
.img-ct-max { display: block; max-width: 100%; margin: 0 auto;}
/* 상하좌우 center위치잡기 */
.responsive { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
/* 상하 center위치잡기 */
.responsive-h { position: absolute; top: 50%; left: 5%; width: 90%; transform: translate(0,-50%); -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); text-align: center;}
.bg-body { display: none; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
/* 레이어팝업 */
.bg-body .modal-box { z-index: 1000; position: fixed; position: relative; width: 90%; max-width: 1000px; height: 650px; /*overflow-y: scroll;*/ box-sizing: border-box; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.5); -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.5); -ms-box-shadow: 5px 5px 10px rgba(0,0,0,.5);}
.bg-body .modal-box .modal-con { padding: 40px;}
/* .bg-body .btn-close { position: absolute; top: 20px; right: 20px;}
.bg-body .btn-close button { font-size: 2.4rem;} */
/* 상품상세 - 레이어 */
.product-pop.bg-body { background: rgba(0,0,0,.5) url('image/loading.gif') no-repeat center;}
.product-pop .modal-box { max-width: 800px; height: auto !important;}
.product-pop .modal-box .tit-box { border-bottom: solid 1px #aaa;}
.product-pop .modal-box .con-box .prod-cont { overflow: inherit; overflow-y: scroll; -webkit-line-clamp: inherit; height: 400px;}
.product-pop .modal-box .btn-close { position: absolute; top: -50px; right: 0;}
.product-pop .modal-box .btn-close i { font-size: 3.2rem; color: #fff;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* pc컨텐츠 숨김 */
	.con-pc { display: none !important;}
	/* mobile컨텐츠 보임 */
	.con-m { display: block !important;}
	/* pc에서 br태그 효과 해제 */
	.br-pc { display: inline-block;}
	/* mobile에서 br태그 효과 적용 */
    .br-m { display: block;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* mobile에서 font size 자동 축소 */
	html { font-size: 57% !important;}
	.none-m { display: none !important;}
	/* 레이어팝업 */
	.bg-body .modal-box { height: 500px;}
	.bg-body .modal-box .modal-con { padding: 30px;}
	/* 상품상세 - 레이어 */
	.product-pop.bg-body { background-size: 120px;}
	.product-pop .modal-box .btn-close { top: -40px;}
	.product-pop .modal-box .btn-close i { font-size: 2.3rem;}
}
/* keyframe */
@keyframes slideLeft {
	from { margin-left: 20%; opacity: 0;}
	to { margin-left: 0; opacity: 1;}
}
@-webkit-keyframes slideLeft {
	from { margin-left: 20%; opacity: 0;}
	to { margin-left: 0; opacity: 1;}
}
@keyframes bounce {
	0% { transform: scaleY(1);}
    50% { transform: scaleY(.95);}
    100% { transform: scaleY(1);}
}
@-webkit-keyframes bounce {
	0% { transform: scaleY(1);}
    50% { transform: scaleY(.95);}
    100% { transform: scaleY(1);}
}
@keyframes appear {
	0% { opacity: 0; transform: scale(.5);}
	50% { opacity: 1; transform: scale(1.1);}
    100% { opacity: 1; transform: scale(1);}
}
@-webkit-keyframes appear {
	0% { opacity: 0; transform: scale(.5);}
	50% { opacity: 1; transform: scale(1.1);}
    100% { opacity: 1; transform: scale(1);}
}
@-webkit-keyframes textPoint {
	0% { color: #2060AD;}
	50% { color: #20AD6E;}
	100% { color: #2060AD;}
}
@keyframes textPoint {
	0% { color: #2060AD;}
	50% { color: #20AD6E;}
	100% { color: #2060AD;}
}





/* ************************************** *
 * header layout
 * ************************************** */
/* header */
header { z-index: 100; width: 100%; height: 100px; border-bottom: solid 3px #2060AD;}
header .header-in { position: relative; width: 90%; margin: 0 auto;}
header h1 { float: left; padding: 25px 0; margin-right: 20px;}
/* lnb : 네비게이션 메뉴 */
#lnb { z-index: 200;}
.lnb-pc { float: left; margin-top: 32px;}
.lnb-pc .lnb-navi > li { position: relative; float: left;}
.lnb-pc .lnb-navi > li > a { position: relative; display: inline-block; padding: 0 12px; border-radius: 50px; line-height: 36px; font-size: 1.6rem; letter-spacing: -.4px; color: #222; transition: all .1s ease-in-out;}
.lnb-pc .lnb-navi > li > a:hover,
.lnb-pc .lnb-navi > li.focus > a,
.lnb-pc .lnb-navi > li.on > a { background: #2060AD; color: #fff;}
.lnb-pc .lnb-dep2 { display: none; z-index: 200; position: absolute; top: 50px; left: 50%; margin-left: -60px; width: 120px; padding: 15px 0; background: #f8f8f8; box-shadow: 3px 3px 5px rgba(0,0,0,.2); -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.2); -ms-box-shadow: 3px 3px 5px rgba(0,0,0,.2);}
.lnb-pc .lnb-dep2 > li a { display: block; padding: 7px 0 6px; font-size: 1.5rem; line-height: 1.4em; color: #001f2b; text-align: center;}
.lnb-pc .lnb-dep2 > li a:hover { background: #2060AD/*linear-gradient(to left,#00a388,#398ce7)*/; color: #fff;}
.lnb-m { display: none;}
.lnb-m .btn-menu { z-index: 199; overflow: hidden; position: absolute; top: 15px; left: 0; width: 70px; height: 70px; background: #2060AD/*linear-gradient(to left,#00a388,#398ce7)*/; color: #fff; text-align: center;}
.lnb-m .btn-menu i { font-size: 3.5rem;}
.lnb-m .btn-menu span { display: block; font-size: 1.7rem; line-height: 1.5rem; padding-top: 10px;}
.lnb-m .btn-close { z-index: 201; position: absolute; top: 20px; left: 50%; margin-left: 15px; line-height: 30px; font-size: 4rem; color: #fff;}
.lnb-m .lnb-box { z-index: 200; display: none; overflow: hidden; position: fixed; top: 0; left: 0; width: 50%; height: 100%; background: #f8f8f8; box-shadow: 0 0 10px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); -ms-box-shadow: 0 0 10px rgba(0,0,0,.2);}
.lnb-m .lnb-box .lnb-navi { position: absolute; top: 50%; left: 0; border-top: solid 1px #ddd; box-sizing: border-box; width: 100%; transform: translate(0,-50%); -o-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
.lnb-m .lnb-box .lnb-navi > li { border-bottom: solid 1px #ddd; animation-duration: 700ms; animation-fill-mode: forwards; animation-name: slideLeft; margin-left: -20%; opacity: 0;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(1) { animation-delay: 70ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(2) { animation-delay: 140ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(3) { animation-delay: 210ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(4) { animation-delay: 280ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(5) { animation-delay: 350ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(6) { animation-delay: 420ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(7) { animation-delay: 480ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(8) { animation-delay: 560ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(9) { animation-delay: 630ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(10) { animation-delay: 700ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(11) { animation-delay: 770ms;}
.lnb-m .lnb-box .lnb-navi > li:nth-of-type(12) { animation-delay: 840ms;}
.lnb-m .lnb-box .lnb-navi > li > a { display: block; padding: 15px 30px; box-sizing: border-box; font-size: 2.2rem; color: #111; letter-spacing: -.05em;}
.lnb-m .lnb-box .lnb-navi > li.focus > a,
.lnb-m .lnb-box .lnb-navi > li.on > a { /*background: linear-gradient(to left,#00a388,#398ce7); color: #fff;*/ color: #2060AD; font-weight: bold;}
.lnb-m .lnb-box .lnb-dep2 { display: none; padding: 10px 30px; background: #fff;}
.lnb-m .lnb-box .lnb-dep2 a { display: block; font-size: 1.5rem; line-height: 27px; color: #333;}
/* gnb : 네비게이션 메뉴 */
#gnb { position: absolute; right: 0; top: 15px;}
#gnb .con-pc a { font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 3rem; line-height: 70px; animation: textPoint 2s linear infinite;}
#gnb .con-m a { display: block; z-index: 199; overflow: hidden; width: 70px; height: 70px; background: #2060AD/*linear-gradient(to left,#00a388,#398ce7)*/; color: #fff; text-align: center;}
#gnb .con-m a i { font-size: 2.5rem; line-height: 40px;}
#gnb .con-m a span { display: block; font-size: 1.7rem; line-height: 1.5rem; padding-top: 10px;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
	/* header */
	header h1 { float: none; text-align: center; margin-right: 0;}
	/* lnb : 네비게이션 메뉴 */
	.lnb-pc,
	#gnb .con-pc { display: none !important;}
	.lnb-m,
	#gnb .con-m { display: block !important;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* header */
	header { height: 70px;}
	header h1 { padding: 15px 0;}
	header h1 img { height: 40px;}
	/* lnb : 네비게이션 메뉴 */
	.lnb-m .btn-menu { top: 0; left: -5.5%;}
	.lnb-m .btn-close { font-size: 3rem;}
	.lnb-m .lnb-box .lnb-navi > li > a { font-size: 2rem; padding: 13px 30px;}
	/* gnb : 네비게이션 메뉴 */
	#gnb { top: 0; right: -5.5%;}
	/* #gnb { top: 15px;}
	#gnb img { height: 40px;} */
}





/* ************************************** *
 * sub layout
 * ************************************** */
/* 컨텐츠영역 */
#container { z-index: 1; width: 100%; overflow: hidden;}
#content { max-width: 1400px; margin: 0 auto;}
.content-box { max-width: 1400px; margin: 50px auto 100px; min-height: 600px;}
/* .content-box { float: left; width: 1100px; margin-bottom: 100px; min-height: 600px;} */
/* snb */
/* #snb { float: left; width: 230px; margin-right: 70px;}
#snb h2 { padding: 30px 0 23px; background: linear-gradient(to left,#00a388,#398ce7); font-size: 2.7rem; font-family: 'LeferiPoint-BlackA',sans-serif !important; letter-spacing: -.03em; color: #fff; text-align: center;}
#snb .snb-list li a { display: block; border-bottom: dotted 1px #ccc; box-sizing: border-box; padding: 0 20px; height: 50px; line-height: 50px; font-size: 1.6rem; color: #333; letter-spacing: -.04px;}
#snb .snb-list li a:hover { background: #f8f8f8; font-weight: 700;} */
/* stle */
#stle h2 { padding-bottom: 15px; margin-bottom: 60px; border-bottom: solid 1px #ddd; font-size: 3rem; color: #222; letter-spacing: -.03em;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
	/* 컨텐츠영역 */
	#content,
	.content-box { width: 90%;}
	/* .content-box { float: none; width: 100%;} */
	/* snb */
	/* #snb { float: none; width: 100%; margin-right: 0;}
	#snb h2 { display: none;}
	#snb .snb-list { display: flex; flex-flow: row wrap;}
	#snb .snb-list li { flex: 1; margin: .5%;}
	#snb .snb-list li a { border: dotted 1px #ccc; text-align: center;} */
	/* stle */
	#stle h2 { padding-bottom: 15px; margin: 40px 0 60px; text-align: center;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:990px) {
	/* snb */
	/* #snb .snb-list li { flex: 1 1 30%;} */
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* 컨텐츠영역 */
	.content-box { margin: 30px auto 70px; min-height: 300px;}
	/* snb */
	/* #snb .snb-list li a {  padding: 0 15px; height: 38px; line-height: 38px; font-size: 1.4rem;} */
	/* stle */
	#stle h2 { padding-bottom: 10px; margin: 25px 0 40px; font-size: 2.5rem;}
}





/* ************************************** *
 * main layout
 * ************************************** */
/* section-visual */
.main-visual { overflow: hidden; width: 90%; margin: 0 auto; border-radius: 30px; box-sizing: border-box; padding: 0 50px; background: #eee;}
.main-visual .txt-box { float: left; width: 50%; padding: 70px 5%; box-sizing: border-box;}
.main-visual .txt-box p { font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 3.2rem; color: #222; line-height: 1.6em; letter-spacing: -.03em;}
.main-visual .txt-box p span { color: #00a388;}
.main-visual .img-box { display: flex; float: left; width: 50%; text-align: center; justify-content: center;}
.main-visual .img-box img { align-self: flex-end;}

.main-visual2 { position: relative; overflow: hidden; width: 100%; margin: 0 auto; /*border-radius: 30px;*/ box-sizing: border-box; padding: 80px 5%;; background: #eee;}
.main-visual2 .txt-box { float: left; width: 50%; padding: 0 5%; box-sizing: border-box;}
.main-visual2 .txt-box p { font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 3.2rem; color: #222; line-height: 1.6em; letter-spacing: -.03em;}
.main-visual2 .txt-box p span { color: #2060AD;}
.main-visual2 .board-box { float: left; width: 50%; position: relative; box-sizing: border-box;}
.link { padding: 20px 5% 0 5%; box-sizing: border-box;}
.link a { display: inline-block; margin: 0 3px; padding: 10px 30px; line-height: 1.5em; border-radius: 5px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 2.0rem; color: #fff; text-align: center;}
.link a.btn-visual01 { background: #FF7F27;}
.link a.btn-visual02 { background: #21bc80;}
.link a:hover { color: #fdf551;}
.visual-tab { overflow: hidden; margin: 30px auto 0; border-radius: 10px; box-shadow: 5px 5px 15px rgba(0,0,0,.1); -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,.1); -ms-box-shadow: 5px 5px 15px rgba(0,0,0,.1);}
.visual-tab .tab-navi li { float: left; width: 45%; background: #999;}
.visual-tab .tab-navi button { display: inline-block; width: 100%; padding: 20px 0 15px; box-sizing: border-box; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 1.7rem; color: #fff; line-height: 1em; letter-spacing: -.03em; text-align: center;}
.visual-tab .tab-navi li.on { width: 55%;}
.visual-tab .tab-navi li.on button { background: #2060AD /*linear-gradient(to left,#00a388,#398ce7)*/; color: #fff;}
.visual-tab .tab-navi li.on:nth-of-type(1) button { border-radius: 0 10px 0 0;}
.visual-tab .tab-navi li.on:nth-of-type(2) button { border-radius: 10px 0 0 0;}
.visual-tab .tab-cont { z-index: 1; overflow: hidden; position: relative; background: #f6f6f6; min-height: 130px;}
.visual-tab .tab-cont > li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0;}
.visual-tab .tab-cont > li.on { position: absolute; top: 0; left: 0; width: 100%; opacity: 1;}
.rolling-box01,
.rolling-box02 { overflow: hidden; height: 130px; margin: 20px 0;}
.rolling-box01 div,
.rolling-box02 div { float: left; height: 30px !important; margin: 2px 0; font-size: 1.4rem; color: #333; text-align: center;}
.rolling-box01 .p-date { width: 25%;}
.rolling-box01 .p-prod { width: 35%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.rolling-box02 .p-title { width: 55%; padding-left: 30px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;}
.rolling-box02 .p-title a { color: #333;}
.rolling-box01 .p-name,
.rolling-box02 .p-name { width: 20%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.rolling-box01 .p-state,
.rolling-box02 .p-state { width: 20%;}
.main-visual2 .sms-box { width: 100%; padding: 35px 50px; color: #fff; box-sizing: border-box; margin: 0 auto; background: url('image/bg-sms-left.jpg?ver=230607'), url('image/bg-sms-right.jpg?ver=230607'), linear-gradient(to right,#2060AD,#2A2251); background-repeat: no-repeat; background-position: left center, right center; background-size: auto 100%;}
.main-visual2 .sms-box .tit p { padding-bottom: 5px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 2.0rem; letter-spacing: -.6px; color: #ffffff;}
.main-visual2 .sms-box .tit h3 { padding-bottom: 5px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 2.4rem; letter-spacing: -.6px; color: #fffe1e;}
/* .main-visual2 .sms-box .tit p{ float: left; padding-bottom: 5px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 1.8rem; letter-spacing: -.6px; color: #d30070;} */
.main-visual2 .sms-box .tit > div { float: right; padding-bottom: 10px;}
.main-visual2 .sms-box .privacy-bot { padding-top: 10px;}
/* .main-visual2 .sms-box .privacy-bot li:nth-of-type(1) { float: left;}
.main-visual2 .sms-box .privacy-bot li:nth-of-type(1) > div { display: grid;}
.main-visual2 .sms-box .privacy-bot li:nth-of-type(2) { float: right;} */
.main-visual2 .sms-box .privacy-bot li:nth-of-type(2) { margin-top: 15px;}
/* main-search */
.main-search { width: 90%; margin: 0 auto; text-align: center;}
.main-search img { padding: 50px 0 60px;}
.visual03 i { z-index: -1; display: inline-block; width: 377px; height: 137px; background: url('image/img-together.png') no-repeat; background-size: 100% !important;}
/* .visual01 { position: absolute; z-index: 1; left: 40%; top: 50%; animation: appear 1s; transform: scale(1);}
.visual01 i { display: block; width: 134px; height: 200px; background: url('image/img-woman.png') no-repeat; background-size: 100% !important; animation: bounce 8s linear infinite; transform-origin: 100% 100%;}
.visual02 { position: absolute; z-index: 1; right: 20px; top: 40px; animation: appear 1.2s; animation-delay: .5s; opacity: 0; transform: scale(1); animation-fill-mode: forwards;}
.visual02 i { display: block; width: 109px; height: 200px; background: url('image/img-man.png') no-repeat; background-size: 100% !important; animation: bounce 10s linear infinite; transform-origin: 100% 100%;} */
/* main-process */
.main-process { width: 90%; margin: 30px auto; text-align: center;}
.main-process p { display: inline-block; padding: 15px 20px 10px; border: solid 2px #00a388; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 2rem; color: #00a388;}
.main-process p i { font-size: 1.5rem; color: #aaa;}
/* main-prod-list */
.prod-list-wrap { z-index: 1; width: 100%; padding: 100px 0; box-sizing: border-box; background: #f8f8f8;}
.prod-list > ul { width: 90%; margin: 0 auto;}
.prod-list > ul > li { overflow: hidden; width: 31.33%; margin: 1%; background: #fff; border-radius: 10px; box-shadow: 5px 5px 15px rgba(0,0,0,.1); -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,.1); -ms-box-shadow: 5px 5px 15px rgba(0,0,0,.1);}
.prod-list-box { border: solid 2px transparent; box-sizing: border-box;}
.prod-list-box .tit-box { padding: 20px 30px 12px; letter-spacing: -.4px;}
.prod-list-box .tit-box h3 { float: left; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 1.9rem; line-height: 1.5em; color: #fff;}
.prod-list-box .tit-box h3 img { display: block; padding-bottom: 7px; height: 30px;}
.prod-list-box .tit-box p { float: right; font-size: 1.4rem; color: #222; line-height: 1em; padding-top: 5px;}
.prod-list-box .tit-box p span { font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 2rem;}
.prod-list-box.sk { border: solid 2px #ef8009;}
.prod-list-box.sk .btn-wd.btn-md.btn-blue,
.prod-list-box.sk .tit-box { background: #ef8009 !important;}
/* .prod-list-box.sk h3, */
.prod-list-box.sk .sms-box .tit h3,
.prod-list-box.sk .tit-box p span { color: #ef8009;}
.prod-list-box.kt { border: solid 2px #de1d24;}
.prod-list-box.kt .btn-wd.btn-md.btn-blue,
.prod-list-box.kt .tit-box { background: #de1d24 !important;}
/* .prod-list-box.kt h3, */
.prod-list-box.kt .sms-box .tit h3,
.prod-list-box.kt .tit-box p span { color: #de1d24;}
.prod-list-box.lg { border: solid 2px #d30070;}
.prod-list-box.lg .btn-wd.btn-md.btn-blue,
.prod-list-box.lg .tit-box { background: #d30070 !important;}
/* .prod-list-box.lg h3, */
.prod-list-box.lg .sms-box .tit h3,
.prod-list-box.lg .tit-box p span { color: #d30070;}
.prod-list-box.compare { border: solid 2px #262674;}
.prod-list-box.compare .btn-wd.btn-md.btn-blue,
.prod-list-box.compare .tit-box { background: #262674 !important;}
/* .prod-list-box.compare h3, */
.prod-list-box.compare .sms-box .tit h3,
.prod-list-box.compare .tit-box p span { color: #262674;}
.prod-list-box .con-box { padding: 30px;}
.prod-list-box .con-box .prod-cont { overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 1.4rem; line-height: 25px; word-break: break-all; height: 200px; margin-bottom: 12px;}
.prod-list-box .con-box .prod-cont.view { overflow: visible; -webkit-line-clamp: inherit; height: auto;}
.prod-list-box .sms-box { padding: 25px 30px; background: #f7f7f7/*#ebf4ff*/; border-top: dotted 1px #aaa;}
.prod-list-box .sms-box .tit h3 { float: left; padding-bottom: 5px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 1.9rem; letter-spacing: -.6px;}
.prod-list-box .sms-box .tit > div { float: right; padding-bottom: 10px;}
.prod-list-box .sms-box .privacy-bot { padding-top: 10px;}
.prod-list-box .sms-box .privacy-bot li:nth-of-type(1) { float: left;}
.prod-list-box .sms-box .privacy-bot li:nth-of-type(1) > div { display: grid;}
.prod-list-box .sms-box .privacy-bot li:nth-of-type(2) { float: right;}
.prod-list div[name="btn-product-m"] i { transform: rotate(0deg); transition: all .1s ease-in-out;}
.prod-list div[name="btn-product-m"] i.rotate { transform: rotate(180deg);}
/* main-sajun-list */
.main-sajun-list { width: 100%; margin: 0 auto; text-align: center;}
.p-prod-point { overflow: hidden; display: block; width: 100%; box-sizing: border-box; margin: 70px auto 0; padding: 35px 10% 30px; /*border-radius: 100px;*/ background: linear-gradient(to left,#2060AD,#20AD6E); font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 3rem; color: #fff; line-height: 1.5em; letter-spacing: -.03em;}
.p-prod-point span { color: #ffda48;}
.sajun-list { display: table; margin: 0 auto;}
.sajun-list li { float: left;}
.sajun-list li p { padding: 20px 0 0 60px; font-family: 'LeferiPoint-BlackA',sans-serif !important; font-size: 4.5rem; color: #222; line-height: 1.4em; letter-spacing: -.03em; text-align: left;}
.sajun-list li p span { color: #00a388;}
.sajun-list li.img-sajun i { display: block; width: 364px; height: 225px; background: url('image/img-sajun.png') no-repeat; background-size: 100% !important; animation: bounce 8s linear infinite; transform-origin: 100% 100%;}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
	/* section-visual */
	.main-visual .txt-box { float: none; width: 100%; text-align: center;}
	.main-visual .img-box { float: none; width: 100%;}
	.main-visual2 { padding: 60px 5%;}
	.main-visual2 .txt-box { float: none; width: 100%; text-align: center;}
	.main-visual2 .board-box { float: none; width: 100%; padding-top: 50px; box-sizing: border-box;}
	/* main-prod-list */
	.prod-list > ul > li { width: 48%;}
}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1200px) {
	/* section-visual */
	.main-visual { width: 100%; border-radius: 0;}
	/* .main-visual2 { width: 100%; border-radius: 0;} */
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* section-visual */
	.main-visual { padding: 0 5%;}
	.main-visual2 .sms-box { padding: 30px 5%;}
	.main-visual2 .sms-box .tit h3 { font-size: 1.5rem;}
	.main-visual2 .sms-box .tit > div { padding-bottom: 8px;}
	.main-visual2 .sms-box .privacy-bot { padding-top: 7px;}
	/* main-sajun-list */
	.sajun-list { display: block; width: 100%;}
	.sajun-list li { float: none; text-align: center;}
	.sajun-list li p { padding: 50px 0 0; text-align: center;}
	.sajun-list li.img-sajun i { display: inline-block;}
	/* main-prod-list */
	.prod-list-wrap { padding: 45px 0;}
	.prod-list > ul > li { width: 100%; margin: 7px 0;}
	.prod-list-box .tit-box h3 { font-size: 1.7rem;}
	.prod-list-box .tit-box p { font-size: 1.4rem;}
	.prod-list-box .tit-box p span { font-size: 1.9rem;}
	.prod-list-box .con-box { padding: 15px 20px;}
	.prod-list-box .sms-box { padding: 15px 20px;}
	.prod-list-box .sms-box .tit h3 { font-size: 1.5rem;}
	.prod-list-box .sms-box .tit > div { padding-bottom: 8px;}
	.prod-list-box .sms-box .privacy-bot { padding-top: 7px;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (min-width:641px) and (max-width:990px) {
	/* main-prod-list */
	.prod-list-box .tit-box h3 { float: none;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:720px) {
	/* section-visual */
	.main-visual .txt-box { padding: 50px 5%;}
	.main-visual .txt-box p { font-size: 2.2rem;}
	/* .main-visual2 { padding: 40px 5%;} */
	.main-visual2 .txt-box { padding: 0 5%;}
	.main-visual2 .txt-box p { font-size: 2.2rem;}
	.main-visual2 .board-box { padding-top: 30px;}
	/* .main-visual2 .board-box { padding-top: 170px;} */
	.visual-tab .tab-cont { min-height: 100px;}
	.rolling-box01,
	.rolling-box02 { height: 100px; margin: 15px 0;}
	.rolling-box01 div,
	.rolling-box02 div { height: 20px !important;}
	/* .visual01 { bottom: inherit; top: 20px; margin-left: -110px;}
	.visual01 i { width: 100px; height: 150px;}
	.visual02 { top: 20px; margin-left: 20px;}
	.visual02 i { width: 82px; height: 150px;} */
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* main-search */
	.main-search img { padding: 35px 0 40px;}
	.visual03 i { width: 250px; height: 91px;}
	/* main-process */
	.main-process p { font-size: 1.7rem;}
	/* main-prod-list */
	/* main-sajun-list */
	.p-prod-point { margin: 50px auto 0; padding: 20px 30px 15px; font-size: 2.3rem;}
	.sajun-list li p { padding: 30px 0 0; font-size: 3.2rem;}
	.sajun-list li.img-sajun i { width: 230px; height: 142px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:450px) {
	/* section-visual */
	.main-visual .txt-box p { font-size: 2.2rem;}
	.main-visual2 .txt-box p { font-size: 1.8rem;}
	.visual-tab .tab-navi button { font-size: 1.5rem;}
}





/* ************************************** *
 * footer layout
 * ************************************** */
/* 메인배너 */
.main-banner ul { max-width: 1920px; margin: 0 auto;}
.main-banner li { flex: 1; overflow: hidden;}
.main-banner li img { transform: scale(1); transition: .5s cubic-bezier(.25,.85,.57,1);}
.main-banner li:hover img { transform: scale(1.07);}
/* footer */
footer { position: relative; box-sizing: border-box; padding: 40px 0 60px; background: #2f2f2f; text-align: center;}
footer .footer-in { width: 90%; margin: 0 auto;}
footer address { padding: 30px 0 15px; font-size: 1.4rem; color: #bababa; line-height: 1.7em; opacity: .6;}
footer address span.pr { margin-right: 15px;}
footer .copyright small { font-size: 1.4rem; color: #bababa; opacity: .6;}
footer address .p-mint { font-weight: 700; font-size: 2.4rem; color: #00ffd5; padding-top: 5px; display: block;}
.btn-foo-top { z-index: 50; position: fixed; right: 30px; bottom: 30px;}
.btn-foo-top button { display: block; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; background: rgba(215,215,215,.85); text-align: center; box-shadow: 5px 5px 10px rgba(0,0,0,.15); -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.15); -ms-box-shadow: 5px 5px 10px rgba(0,0,0,.15);}
.btn-foo-top button i { font-size: 2.4rem; color: #333;}
/* ////////////////////////////////////////////////// tablet 이상 */
@media all and (min-width:991px) {
	/* 메인배너 */
	.main-banner li:nth-of-type(4) { display: none;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* 메인배너 */
	.main-banner li { flex: 1 1 50%;}
}
/* ////////////////////////////////////////////////// tablet */
@media all and (min-width:641px) and (max-width:990px) {
	/* footer */
	footer address .br-t { display: block;}
	footer address .br-m { display: inline-block;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
	/* footer */
	footer { padding: 30px 0 50px;}
	footer img { height: 30px;}
	footer address { padding-top: 20px;}
	.btn-foo-top { right: 20px; bottom: 20px;}
	.btn-foo-top button { width: 40px; height: 40px; line-height: 40px;}
	.btn-foo-top button i { font-size: 1.9rem;}
}