/***************************** 스킨 커스텀 *******************************/

:root {
	--max-width:1480px;
	--prm-clr:#3555b5;
	--pt-clr:#55a9e6;
	--cont-clr:#292e2d;

	--sub_max-width:1480px;
}

body * {
	font-family: 'pretendard';
}
#sub_view #container * {font-family: 'pretendard';}


/***************************** header *******************************/
/* gnb 숨김 */
.gnb_p {display: none;}

/* 햄버거 메뉴 숨김 */
#lnb_p_all_wrap {display: none;}

#header.nav-up {
 top: -90px; // 헤더 높이와 같게
 transition: .3s;
}


/* header */
#header {transition: .3s}
#header > .inner {max-width: 1810px;}
#header .logo h1 span a img.logo_c {display: none;}
#header .h_cs {float: right; height: 90px; display: flex; align-items: center; margin-left: clamp(1rem, 2vw, 2rem);}
#header .h_cs .wrap {color:#fff; font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 700; background-color: var(--prm-clr); padding: clamp(0.3rem, 0.6vw, 0.6rem) clamp(0.6rem, 1.3vw, 1.3rem); border-radius: 100px; background: linear-gradient(45deg, #51aeefba, transparent);}
#header .h_cs .wrap i {font-size: .8em;}

#header .nav_blog {float: right; height: 90px; display: flex; align-items: center; margin-left: clamp(1rem, 1vw, 1rem);}
#header .nav_blog img {filter: drop-shadow( 10px 10px 20px rgba(0,0,0,0.1)); }



/* header.on */
#header.on {background:#fff; transition: .3s}
#header.on .logo h1 span a img.logo_c {display: inline-block;}
#header.on .logo h1 span a img.logo_w {display: none;}
#header.on .h_cs .wrap {background: linear-gradient(45deg, #1d6fcd, #419fbb);}
#header.on .lnb_p .dep1 > li > a {color:var(--cont_clr);}
#header.on .lnb_p .dep1 > li.on > a {color:var(--prm-clr); }
#header.on .lnb_p .dep1 > li.on > a span {font-weight: 700}
#header.on .lnb_p .dep1 > li:hover > a {color:#fff;}

#header.on .logo #toggle_left span:before, #header .logo #toggle_left span:after, #header .logo #toggle_left:before, #header .logo #toggle_left:after, #header .logo #toggle_left span:before, #header .logo #toggle_left span:after {background:var(--prm-clr)}
#viewport.on #header {background:#fff;}


.lnb_p .dep1 > li > a > span {font-weight: 500; font-size: clamp(.95rem, 1.12vw, 1.12rem);}
.lnb_p .dep1 > li:before, .lnb_p .dep1 > li > div:before   {background: var(--pt-clr);}
.lnb_p .dep1 > li.on > a {color:var(--prm-clr)}



@media (min-width:1024px) and (max-width:1700px) {
	#header > .inner {padding: 0 15px;}
}

@media (min-width:1024px) {
	#header .logo h1 span a img {	max-height: 69px;}
	.lnb_p {max-width: 750px;}
	#header > .inner {position: relative;}
}

@media (max-width:1440px) {
#header .h_cs .wrap .num {display: none;}
#header .nav_blog {position: absolute; bottom: -40px; right: 5px; height: unset;  margin:0;filter: drop-shadow( 5px 5px 10px rgba(0,0,0,0.2)); transition: .5s;}
#header.nav-up .nav_blog {opacity: 0; bottom: -20px; transition: .5s;}
}

@media (max-width:1023px) {
	#header .logo #toggle_right {display: none;}
	#header > .inner {position: revert; }
	#header .h_cs {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
	#header .h_cs .wrap { display: flex; justify-content: center; align-items: center; width: clamp(2.3rem, 4.9vw, 12rem); aspect-ratio: 1 / 1; border-radius: 50%; font-style: italic; padding: 0;}
	#header .h_cs .wrap i {font-size: 1em}
	#header .logo h1 img {max-height: 40px;}


	.toggle_left #header .logo h1 span a img.logo_c {display: inline-block;}
	.toggle_left #header .logo h1 span a img.logo_w {display: none;}
}





/***************************** footer *******************************/
#footer {
	background: #06163b;
	border-top: none;
}

#footer .copyright, #footer .finfo p, #footer .fnb ul li a, #footer .f_call * {font-family: 'pretendard'; color:#fff;  line-height: 1.6rem;}
#footer .copyright, #footer .finfo p, #footer .fnb ul li a {font-size: clamp(.9rem, 1vw, 1rem);}

#footer > .inner {padding: clamp(3rem, 5.5vw, 5.5rem) 0;}
#footer .fnb ul {padding-top: clamp(.8rem, 1vw, 1rem);}

#footer .f_call {text-align: left; width: fit-content;}
#footer .f_call p.call .icon:before {display: none;}
#footer .f_call .txt {color:#fff; font-weight: 700; opacity: .8}
#footer .f_call p {    margin: clamp(1rem, 1.3vw, 1.3rem) 0 0 0;
    padding: 0;
    float: unset;
    text-align: left;
    font-size: clamp(1.8rem, 2.3vw, 2.3rem);
    color: #fff;
    line-height: 1.3em;}

#footer .f_call p span {font-size: clamp(1rem, 1.1vw, 1.1rem); display: inline-block; padding-right: clamp(1rem, 1.3vw, 1.3rem); color: #758ed7; width: 80px}

#footer .f_call p .icon {display: none;}
#footer .f_call p.email {display: none;}

#footer .f_call p a {display: block; text-align: center; line-height: 1.2em;}

#footer #btn_site_top {background:var(--prm-clr)}

#footer .copyright {width: unset;}

@media (min-width:1024px) {
	#footer .fnb {float:unset;	width: unset; margin-bottom: 2em;}
}

@media (max-width:1480px) {
	#footer {padding:0 15px;}
}

@media (max-width:1023px) {

	#footer .f_call {width: 100%; text-align: center; margin-bottom: clamp(2rem, 3.2vw, 3.2rem);}
	#footer .copyright a {display: block;}

#footer .f_logo {text-align: center;}
#footer .f_logo img {width: 33%; padding-bottom: 10px;}

#footer .f_call p span {
	width: fit-content;
}
}





/***************************** container *******************************/

#sub_view #container .contents_wrap .contents {
	padding: clamp(4rem, 9vw, 9rem) 0 clamp(4rem, 11vw, 11rem);
}

#sub_view .contents_wrap .sub_top_title {font-size: clamp(1.3rem, 1.8vw, 1.8rem); color:var(--prm-clr)}

.contents_wrap .sub_location {
	padding: clamp(2rem, 4vw, 4rem) 0 0 0;
}
#sub_view #container .contents_wrap .snb .dep1 li.on a, #sub_view #container .contents_wrap .snb .dep1 li:hover a {color:var(--prm-clr)}


@media (min-width:1024px) {
	#sub_view #container .contents_wrap .snb {
		max-width: var(--max-width);
	}
}

@media (max-width:1023px) {
	#container .contents_wrap {padding-top: 0}

	.side_menu .dep1 > li > a {font-size: 15px; height: 60px; line-height: 60px;}
	.shgroup .sub_top_bg img {max-height: 200px;}
}




/***************************** 전체 공통 *******************************/

#viewport {background:#fff;}
.main_sec * {font-family:'Pretendard', 'Noto Sans KR', sans-serif; word-break:keep-all; line-height:1.6em; box-sizing:border-box;}
	.main_sec p, .main_sec h1, .main_sec dl, .main_sec dd {margin: 0}
	.main_sec ul {list-style: none; margin: 0; padding: 0;}
	.main_sec {padding-top: clamp(4rem, 10.5vw, 10.5rem);}

	.main_sec h1 {color:#000; font-size: clamp(1.6rem, 3.2vw, 3.2rem); line-height: 1.25em;}
	.main_sec .tit_exp {font-size: clamp(1rem, 1.2vw, 1.2rem); color: var(--pt-clr); font-weight: 700; margin-bottom: clamp(1.7rem, 2.7vw, 2.7rem);}
	.main_sec .tit_cont {color: var(--cont_clr); margin-top: clamp(2rem, 3vw, 3rem); font-size: clamp(.95rem, 1.1vw, 1.1rem); font-weight: 500}





@media (max-width:1840px) {
	.main_sec .inner {padding-left: 15px; padding-right: 15px;}
	.sub_page .inner {padding-left: 15px; padding-right: 15px;}
}


@media (min-width:1024px) {
	/* PC 화면 넓이값을 가진 센터유지 */
	.row > .white-space {max-width:var(--max-width) !important}
	#footer > .inner, .sub_location, .shgroup .sub_top_text .top_text_inner, .contents_wrap .sub_location, .contents_wrap .sub_top_title {margin:0 auto;max-width:var(--max-width)}
	.main_sec .inner {max-width:var(--max-width); margin:0 auto;}
}


@media (max-width:1023px) {
	.sub_page .inner {padding:0 15px;}
}




/***************************** 서브 상품부분 *******************************/
.sub_prod h1 {color:#000; font-size: clamp(1.4rem, 2.3vw, 2.3rem); margin-bottom: clamp(1.5rem, 4vw, 4rem);}
.sub_prod h2 {color: #000; font-size: clamp(1.3rem, 2vw, 2rem); margin-bottom: clamp(.7rem, 1.5vw, 1.5rem);}
.sub_prod h3 {color: #000; font-size: clamp(1.1rem, 1.65vw, 1.65rem);}



/* 서브페이지 마지막 섹션 마진값 공통으로 없앨거 */
#sub_view .sub_page .sec:last-child {margin-bottom: 0}