@charset "utf-8";

/* CSS Reset */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');
/* font-family: "Noto Sans KR", sans-serif; */
/* font-family: "Roboto", sans-serif; */
:root{
  --font-size-h2:5rem;
  --font-size-h3:3rem;
  --font-size-h4:2.5rem;
  --font-size-h5:1.5rem;
  --font-size-h6:1.2rem;
  --font-size-IndexParagraph:1.5rem;
  --font-size-MoreButton:1.3rem;

  --font-color-main: #EB6317;
  --font-color-point1:#E81E1A;
  --font-color-point2:#062D88;
  --font-color-sub:#F8F8F8;
  --font-color1:#333333;
  --font-color2:#666666;
  --font-color3:#999999;
}

html, body, div , span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0; padding: 0; border: 0; font-size: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
html{font-size: 16px;}
body{font-family: "Noto Sans KR", sans-serif; color: #333}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
address{font-style: normal}
a{color: #333; text-decoration: none; display: block;}
img{border: 0; vertical-align: top}

.hidden{display: block; position: absolute;
 left: -1000%; width: 1px; height: 1px;
  overflow: hidden; color: #fff}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

#wrap{width: 100%; overflow: hidden;}

/* skip nav (바로가기 메뉴) */
#skipNav{position: relative; width: 100%; overflow: hidden; z-index: 110; }
#skipNav a{height: 1px; margin-bottom: -1px; overflow: hidden; text-align: center; color: #fff; font-size: 1.2rem;
            font-weight: 600;}
#skipNav a:focus{height: auto; padding: 15px 0; background: var(--font-color-main);}

/* 헤더 공통 영역 */
#headerArea{width: 100%; height: 100px; position: fixed; left: 0; top: 0; z-index: 100; transition: background .5s ease-out;
            background: rgba(255,255,255,.9);}
#headerArea .header_inner{width: 1400px; height: 100%; margin: 0 auto; display: flex;
                          justify-content: space-between; padding-top: 24px;}
#headerArea .logo{width: 192px;}
#headerArea .logo a{width: 192px; height: 48px; background: url(../images/logo_top.png); text-indent: -999px; overflow: hidden;}

/* 글로벌 내비게이션 영역 */
#gnb{clear:both; width:900px;} 
	
#gnb ul.dropdownmenu{float:left; width: 100%;}
#gnb ul.dropdownmenu li.menu{position:relative; float:left; width:16.66%; height: 50px; }
	
#gnb ul.dropdownmenu li a.depth1{display:block; padding: 9px 0; color: var(--font-color1); text-align: center; transition: all .5s;
 font-weight: 500; font-size: 1.25rem;}

#gnb .dropdownmenu .menu ul li a {display: block; padding-top: 5px; background-repeat: no-repeat; background-position: center 100%; background-size: 0 3px;
  background-image: linear-gradient(#EB6317, #EB6317); transition: all 0.3s ease;}

#gnb .dropdownmenu .menu ul li a:hover {transform: translateY(-5px); background-size: 70% 2px; font-weight: 800;}

/* 2depth */
#gnb ul.dropdownmenu li ul{width:100%; height:200px; position:absolute; top:45px;left:0;
		  padding:15px 0; line-height:2.7em; display: none; }

#gnb ul.dropdownmenu li ul li{ text-align:center; font-weight:bold;}
#gnb ul.dropdownmenu li ul li a{display:block; color: var(--font-color2); font-weight: 400; transition: all .5s; border-radius: 15px;}

#headerArea .header_inner .top_menu{display: flex; gap: 30px; padding-top: 12px;}
#headerArea .header_inner .top_menu li a{font-family: "Noto Sans KR", sans-serif; font-weight:400; font-size: 16px;}


/* 푸터공통 영역 */
#footerArea{background: #1E1E1E; color: #fff; font-family: "Noto Sans KR", sans-serif; padding: 50px 0;}

#footerArea .top_move{width: 80px; height: 80px; background: var(--font-color-main); color: #fff; font-size: 1.3rem; border-radius: 50%; font-weight: 600;
                      box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3); position: fixed; left: 50%; bottom: 150px; z-index: 90;
                      margin-left: 760px; display: none; transition: color, background .5s ease-out;}
#footerArea .top_move:hover{color: var(--font-color-main); background: #fff;}
#footerArea .top_move>span{display: block; text-align: center; margin-top: 25px;}

#footerArea a{color: #fff;}
#footerArea .footer_inner{width: 1400px; margin: 0 auto;}
#footerArea .footer_inner .footer_top{display: flex; justify-content: space-between; align-items: center;
                                      flex-wrap: wrap; border-bottom: 1px solid #666; padding-bottom: 30px;}
#footerArea .footer_inner .footer_top img{width: 200px; height: 43px;}
#footerArea .footer_inner .footer_top ul{display: flex; gap: 30px; margin-top: 15px; font-size: 1.13rem; font-weight: 400;}

#footerArea .footer_inner .footer_bottom{display: flex; justify-content: space-between;}
#footerArea .footer_inner .footer_bottom address{font-size: 1rem; font-weight: 300;}
#footerArea .footer_inner .footer_bottom address span{display: block; font-size: 1.25rem; margin: 30px 0 10px 0;}
#footerArea .footer_inner .footer_bottom div{text-align: right;}

#footerArea .footer_inner .footer_bottom .family{display: inline-block; color: #333; background: #fff;
                                                  padding: 0px 15px; border-radius: 10px; margin-top: 30px;}
#footerArea .family{width:120px;  background:#fff; border:1px solid #ccc; position:relative;}
#footerArea .family .arrow{display:block; font-size:1em; padding: 5px 0; text-align: center; transition: all 1s; color: #1E1E1E;}
#footerArea .family .arrow i{font-size:.8em ; color: #1E1E1E; transition: all .3s ease-out;}
#footerArea .family .arrow:hover i{color:var(--font-color-main);}
#footerArea .family .aList{position:absolute; top:-374px; left:-1px; width:150px; border:1px solid #ccc; background: #fff; display: none; border-radius: 10px;}
#footerArea .family .aList li{line-height:1.5em; border-bottom:1px solid #ccc;}
#footerArea .family .aList li a{display:block;text-align: center; padding: 6px 0; transition: all .3s; color: #1E1E1E;}
#footerArea .family .aList li:last-child{border-bottom: none;}
#footerArea .family .aList li a:hover{color:var(--font-color-main);}

#footerArea .footer_inner .footer_bottom .sns{display: flex; justify-content: right; font-size: 30px;}
#footerArea .footer_inner .footer_bottom .sns a{margin: 10px 0 10px 13px;}
#footerArea .footer_inner .footer_bottom .copy{margin-top: 35px; font-weight: 300;}

/* 검색창 영역 */

.product_pop{width: 700px; height: 180px; background-color: #fff; position: fixed; left: 50%; top:35%; transform: translate(-50%, -50%); z-index: 50; box-shadow: 0 0 15px 0 rgba(0,0,0,.3); border-radius: 20px; display: none;}
.product_pop .total_serch_box{position: absolute; width: 100%;}
.product_pop .total_serch_box p{text-align: center; font-size: 2em; font-weight: 600; padding: 25px 0 20px; color: var(--font-color-main);}
.product_pop .total_serch_box label{font-size: 1.33em; color: var(--font-color1); font-weight: 500;}
.product_pop .total_serch_box input{width: 400px; height: 46px; border-radius: 15px; border: 1px solid #999; margin: 10px 10px; color: var(--font-color1); font-size: 1em; font-weight: 400; outline: 0; padding-left: 20px; margin-left: 80px;}
.product_pop .total_serch_box #total_btn{width: 100px; height: 50px; border: 2px solid var(--font-color-main); border-radius: 15px; background-color: var(--font-color-main); font-size: 1em; color: #fff; cursor: pointer; transition: all .3s ease-out;}
.product_pop .total_serch_box #total_btn:hover{background: #fff; color: var(--font-color-main);}