@charset "utf-8";

/********************
* common
********************/


:root {
  --default_color:#4a60e5;
  --pink:#f6294b;
  --black:#1b1d26;
  --default_font:'Pretendard';
  --blue:#1383cf;
  --light_yellow:#f2f0e6;
  --noto_font:'Noto Sans KR';
  --jalnan_font:'jalnan';
  --bg_gray:#f3f5f7;
  --border_color:#ccc;
  --bor_radius:10px;
  --scdream_font:"scdream";
  --gray:#646360;
  --sky:#eef5ff;
  --yellow:#f3d324;
}


html,
body { min-width: 360px; width:100%;font-family: "Pretendard"; font-size: 15px;  font-weight: 400;   color: #0d1723; background-color: #f2f4f7; overflow-x: hidden;}
img[usemap] {  border: none;  height: auto;  width: auto;  max-width: 100%;}
img {  max-width: 100%;}
map area {  cursor: pointer;}
html[hc="a0"] {  -webkit-filter:none !important}
.wrap { min-width: 360px; position: relative; }

.uppercase {text-transform: uppercase;}

.pointer {cursor: pointer;}
button {position: relative;}



.block {display:block !important}


@media only screen and (max-width:1100px){
  html, body {font-size: 14px; }
}


.t_c00{color: var(--default_color)  !important; }
.t_c01{color: #bf2323 !important; }
.t_c02{color:#2d7130 !important;}
.t_c03{color: #2f417a !important; }
.t_c04{color: #e38600 !important;}
.t_c05{color: #378ed8 !important; }
.t_c06{color:#27969b !important;}
.t_gray{color:#969cb0 !important;}
.t_lightgray{color:#e4e4e4 !important; }
.t_white{color:#fff !important;}
.t_black{color: #060b19 !important; }


/* 버튼 컬러 */
.btnPack{ background-color:var(--default_color);  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.15);border-radius: 5px; font-size: 105%;}



.btnPack.c01{background-color: #cc2e5f; }
.btnPack.c02{background-color:#2d7130;}
.btnPack.c03{background-color: #2e49a1; }
.btnPack.c04{background-color: #e38600; }
.btnPack.c05{background-color: #2998e7; }
.btnPack.c06{background-color:#27969b;}

.btnPack.c01_2{color: #cc2e5f;background-color: #fff0f1;}
.btnPack.c02_2{color:#2d7130;background-color: #e2f1e2;}
.btnPack.c03_2{color: #2e49a1;background-color: #e8ecfd;}
.btnPack.c04_2{color: #e98400; background-color:#fff2e6;}
.btnPack.c05_2{color: #1083d4;background-color: #dfefff;}
.btnPack.c06_2{color:#0b9fa7;background-color: #d7feff;}

.btnPack.gray{background-color:#9699a5;}
.btnPack.lightgray{background-color:#ececf1; color:#616268 !important;}
.btnPack.white{background-color:#fff; color: #616268 !important;}
.btnPack.black{background-color: #333436; }
.btnPack.deepgray { background-color: #50535c; }
.btnPack.moving{background-color:rgba(201, 203, 212, 0.4); color:#616268 !important; cursor: move; mix-blend-mode: darken;}

.btnPack.border {border:1px solid #bfc7fb !important; ; background-color: #fff; color: var(--default_color) !important; }
.btnPack.border_2 {border:1px solid var(--default_color) !important ; background-color: #fff; color: var(--default_color) !important; }

.btnPack.border_c01 {border:1px solid ; background-color: #fff; border-color: #dab3b7 !important; color:#cc2e5f !important;}
.btnPack.border_c02 {border:1px solid ; background-color: #fff; border-color: #93c494 !important; color:#2d7130 !important;}
.btnPack.border_c03{border:1px solid ; background-color: #fff; border-color: #8398dd !important; color:#14339b !important;}
.btnPack.border_c04 {border:1px solid ; background-color: #fff; border-color: #d4ad9e !important; color:#e38600 !important;}
.btnPack.border_c05 {border:1px solid ; background-color: #fff; border-color: #86bcec !important; color:#2998e7 !important;}
.btnPack.border_c06 {border:1px solid ; background-color: #fff; border-color: #a1d9db !important; color:#27969b !important;}

.btnPack.border_c01_2 {border:1px solid ; background-color: #fff; border-color: #cc2e5f !important; color:#cc2e5f !important;}
.btnPack.border_c02_2 {border:1px solid ; background-color: #fff; border-color: #2d7130 !important; color:#2d7130 !important;}
.btnPack.border_c03_2{border:1px solid ; background-color: #fff; border-color: #14339b !important; color:#14339b !important;}
.btnPack.border_c04_2 {border:1px solid ; background-color: #fff; border-color: #e38600 !important; color:#e38600 !important;}
.btnPack.border_c05_2 {border:1px solid ; background-color: #fff; border-color: #2998e7 !important; color:#2998e7 !important;}
.btnPack.border_c06_2 {border:1px solid ; background-color: #fff; border-color: #27969b !important; color:#27969b !important;}


.btnPack.border_black {border:1px solid ; background-color: #fff; border-color: #a3a5ad !important; color:#191f2e !important;}
.btnPack.border_gray {border:1px solid #b6babe !important;  background-color: #f4f4f5; color: #414141 !important; }
.btnPack.border_lightgray {border:1px solid #cfd3d7 !important;  background-color: #fff; color: #6b6b6b !important; }

/* 슬라이드  */
.slickwrap{position:relative;}
.slick-track {}
.slick-slide {}
.slick-slide img {display: inline-block !important;}
.slickwrap .slider {}
.slickwrap .slider .item{vertical-align:top;}
.slick_nav {position:absolute;  z-index: 2; left:0; right:0; top:0; right: 0;  }
.slick_nav button {  overflow:hidden; border:0; color:transparent !important; white-space:nowrap; vertical-align:top; z-index: 2; width:25px; height:25px; line-height:25px;  transition: all 0.6s; }
.slick_count {font-size: 90%; font-weight: 300; text-align: center; }
.slick_count em{ font-weight: 700; }
.slick_nav button span{position: absolute; left:-9999999999px}
.slick_nav button.active {display: block;}
.slick_nav > * {margin-right:0px}
.slick_prev {left:1px; position: absolute; }
.slick_next {right:1px; position: absolute; }
.slick_prev:before, .slick_next:before, .slick_play:before, .slick_pause:before {  font-size:12px; color:rgba(0,0,0,0.6);font-family: 'FontAwesomeS';text-align:center; line-height:25px; display: block; transition: all 0.6s; background-color: #d8dce6; border-radius: 50%;}
.slick_prev:before {content:'\f053';}
.slick_next:before  {content:'\f054';}
.slick_play:before {content:'\f0da'; font-size: 18px; padding-left: 2px; }
.slick_pause:before  {content:'\f52c'; transform: rotate(90deg);font-size:15px; }
.slick_nav button:hover,
.slick_nav button:focus{}
.slick_nav button:hover::before,
.slick_nav button:focus::before{color: #000;}
.ctrl_area > .active {} 
.ctrl_area > .active::before {}  


/*컨테이너 사이즈 */
.wrap_container{  margin: 0 auto; width: 1400px; position: relative; }
#container {position: relative; padding-top: 97px; min-height: 500px;}



/* 상단 영역 */
.top_area {color:#fff; background-color: var(--default_color);}
.top_area .wrap_container { display: flex; justify-content: space-between;  align-items: center; height: 37px; }
/* 로고 */
.logo { position: relative;  display: inline-flex; justify-content: center; font-size: 100%;}
.logo > h1, .logo > div {display: inline-flex; align-items: center; }
.logo > h1 > img, .logo > div > img {width: 28px; margin-right: 8px;}
.logo > div > img {filter: grayscale(100%) contrast(90%) opacity(80%);}
.logo strong {font-weight: 600; white-space: nowrap;}
.logo strong i { padding-bottom: 0px; color: #fff; padding-right: 7px;}
.logo.foot_logo strong span{ color: #4c4e61;}
.logo.foot_logo strong i { color: #4c4e61; }
.logo.mobile_logo {font-size: 16px;}
.logo.mobile_logo strong span{ color: #292a36; font-weight: 700;}
.logo.mobile_logo strong i { color: #292a36; font-weight: 700;}


.top_area .top_right ul{display: flex; font-size: 14px;}
.top_area .top_right ul li + li{ padding-left: 5px; }
.top_area .top_right ul li{ position: relative;}
.top_area .top_right ul li + li::before{content: ''; position: absolute; left:0; top:13px; bottom: 13px; border-left: 1px solid rgba(255,255,255,0.3); }
.top_area .top_right ul li a{ display: block; padding: 0 20px; height: 35px; line-height: 35px;}


@media only screen and (max-width:991px){

}


#opNav {display: none;}
#opNav {position: absolute; top:1px; right:10px !important}
#opNav > em {background:rgba(255,255,255,0.7);}
#clNav > em {background:rgba(0,0,0,0.7);}
#clNav {top:20px}



#header {position: absolute; left:0; right:0; top:0; z-index: 90;}


.stickmenu{position:relative;transition:ALL 0.5s ease-out; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.05);}
.stickmenu .wrap_container{  display: flex;  justify-content:space-between; }
.sticky{position:fixed !important; left:0;width:100%;  backdrop-filter:saturate(180%) blur(13px);  -webkit-backdrop-filter: saturate(180%) blur(13px);}
.stickmenu.sticky{position:fixed !important;left:0; top:0px; width:100%; background-color: rgba(255,255,255,0.65); z-index: 105;  box-shadow: 0px 10px 10px rgba(0,0,0,0.05); padding-top: 0;}
.stickmenu.sticky .localNavi > ul > li > a {line-height: 80px;  height: 80px;}



/* Menu2 하위메뉴 */
.localNavi {width:100%; }
#Menu2.localNavi > ul > li > a{ color:#333;  text-decoration:none; letter-spacing:0px; display:block; padding:0 10px; line-height: 60px; height: 60px;  font-weight:700; font-size: 19px; position: relative; white-space:nowrap;}
#Menu2.localNavi > ul > li:hover > a{color:#000;}
#Menu2.localNavi > ul > li > a:before {content: ''; transition: all 0.2s ease-in-out; position: absolute; bottom:-3px; height:4px; left:50%; right:50%; z-index: 102; border-radius: 20px; }
#Menu2.localNavi > ul > li:hover > a:before { right:0; left:0}
#Menu2.localNavi > ul > li > ul {background:#fff}
#Menu2.localNavi > ul > li > ul {width:100%; top:100%;;padding:10px 0; position:absolute;z-index: 101; border-radius: 0 0 20px 20px; box-shadow: 0px 0px 5px rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.3); min-height: auto;}
#Menu2.localNavi > ul > li > ul > li { position: relative; font-weight:normal; white-space:nowrap;text-align:left; }
#Menu2.localNavi > ul > li > ul > li::before{content: ''; position: absolute; left:38px; top:16px; width:4px; height: 4px; border-radius: 50%; background-color: rgba(0,0,0,.3); transition: all 0.5s;}
#Menu2.localNavi > ul > li > ul > li > a {display:block; font-size:17px; color:#3c4255; line-height: 25px; padding:5px 0px 5px 50px; letter-spacing: -0.05em; transition: all 0.3s;}
#Menu2.localNavi > ul > li > ul > li > a > span{display: inline-block;}
#Menu2.localNavi > ul > li > ul > li:hover > a {color:#000;}
#Menu2.localNavi > ul > li > ul > li:hover::before {background-color: rgba(0,0,0,.6);}
#Menu2.localNavi > ul > li > ul > li > ul {display: block;}
#Menu2.localNavi > ul > li > ul > li > ul > li {position: relative;}
#Menu2.localNavi > ul > li > ul > li > ul > li::before{content: ''; position: absolute; left:50px; top:13px; width:4px; height: 1px; background-color: rgba(0,0,0,.3); transition: all 0.5s;}
#Menu2.localNavi > ul > li > ul > li > ul > li > a {display:block; font-size:15px; color:#777; line-height: 20px; padding:2px 0px 2px 60px; letter-spacing: -0.05em; transition: all 0.3s;}
#Menu2.localNavi > ul > li > ul > li > ul > li > a > span{display: inline-block;}
#Menu2.localNavi > ul > li > ul > li > ul > li:hover > a {color:#3e72fc}
#Menu2.localNavi > ul > li > ul > li > ul > li::before{content: ''; position: absolute; left:50px; top:13px; width:4px; height: 1px; background-color: rgba(0,0,0,.3); transition: all 0.5s;}
#Menu2.localNavi > ul > li > ul > li > ul > li:hover::before {background-color: rgba(0,0,0,.6); }



.mobile_menu .mobile_logo{padding:20px; background-color: #e9ecf3; display: block;}
.mobile_menu .top_right {margin:20px}
.mobile_menu .top_right ul{display: flex;}
.mobile_menu .top_right ul li{flex:0 1 50%;}
.mobile_menu .top_right ul li a{display: block;line-height: 40px; text-align: center; margin: 2px; background-color: #f0f2f5; font-weight: 600; border: 1px solid #dfe4eb; font-size: 90%; color: #314769 ;}


.sub_content { position: relative; transition: all 0.3s; height: 100%;  }
.s_content {width: 100%; height: 100%; position: relative; background-color: #fff; border-radius: 30px 0 0 30px; padding:20px 60px 50px 60px;  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08); margin: 10px 0; }


.new_container {padding:30px 35px;}
#content {position: relative; padding:50px 0;}



@media only screen and (max-width:1400px){
  .sub_content { margin:5px 0px;  }
  .wrap_container{ width: 100%; padding: 0 15px;}

}

@media only screen and (max-width:1200px){
  #opNav {display:block; }
  #container {padding-top: 37px;}
  .top_area .top_right {display: none;}
  .localNavi {  /*  display: none; */ visibility: hidden; position: absolute; opacity: 0;overflow: hidden; height: 300px;}
  html, body {font-size:14px; overflow-x: hidden;}
  .mob-hidden {   display: none !important;}
  .block {display:inline-block !important}
}


@media only screen and (max-width:991px){
  .s_content { padding:20px 15px 30px 15px}
}

@media only screen and (max-width:550px){

}






/* 4뎁스 메뉴 */
.childMenu { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.childMenu ul { }
.childMenu ul li {}
.childMenu ul li,
.childMenu ul li a { line-height: 60px; font-size: 100%; padding:0 15px; color: rgba(0, 0, 0, 0.4); font-weight: 600;}
.childMenu ul li a { background-color:transparent}
.childMenu ul li a span { }
.childMenu ul li.active a { color:#111;  background-color:transparent}
.childMenu ul li.active::after{ content: ''; background-color: var(--default_color); position: absolute; left:0; right:0; bottom:-1px; height: 2px;;}

@media only screen and (max-width:991px){
  .childMenu ul li { }
	.childMenu ul li,
	.childMenu ul li a {line-height: 40px;padding:0 5px;  }
  .childMenu ul li a {font-size: 13px; }
	
}
@media only screen and (max-width:550px){
  .childMenu { border-bottom:none; padding-left: 1px; padding-top: 1px;}
  .childMenu ul li {padding: 1px;}
	.childMenu ul li,
	.childMenu ul li a {line-height: 35px; border-radius: 5px;}  
  .childMenu ul li a {border: 1px solid rgba(0, 0, 0, 0.1); margin:0px;  }
  .childMenu ul li.active a {box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2); }
  .childMenu ul li.active::after{display: none;}
}


footer {display: block; padding:50px 0; border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 50px;}
footer .wrap_container{display: flex;  flex-direction: row-reverse;}

footer .family_site .site_select{position: relative;margin-left: 10px;width: 440px;}
footer .family_site .site_select dt > a{position: relative; display: block; height: 37px;  line-height: 36px; color: #84869e; padding:0 40px 0 20px; border: 1px solid rgba(0,0,0,0.2); font-weight: 500; border-radius: 5px; background-color: #fff;}
footer .family_site .site_select dt > a::after{content:'\f067';font-size:10px;  position: absolute;  right: 15px; top: 0px; color:#84869e; font-family: 'FontAwesomeS'; }
footer .family_site .site_select dd { display:none; position:absolute;bottom:100%;left:0;width:100%;padding: 10px;px 10px;background:#84869e; z-index:999 ; height: 250px; overflow-y:auto; border-radius: 5px;}
footer .family_site .site_select dd ul {position: relative;  width: 100%;  height: 100%;}
footer .family_site .site_select dd ul a {position: relative; color:rgba(255,255,255,0.8); display: block; line-height: 35px; padding:0 20px 0 10px; border-bottom:1px solid rgba(255,255,255,0.08);  font-size: 90%; font-weight: 500; border-radius: 10px; transition: all 0.3s;}
footer .family_site .site_select dd ul a:hover {background-color: rgba(0, 0, 0, 0.1);}
footer .family_site .site_select dd ul li:last-child a {border:none}
footer .family_site .site_select dd ul a:after {content:'\f35d';font-size:10px;  position: absolute;  right: 10px; top: 0px; color:rgba(255,255,255,0.7); font-family: 'FontAwesomeS'; }

footer .copyright{flex: 0 1 50%; text-align: left;}
footer .copyright .foot_address{line-height: 20px;  color: #84869e; font-size: 90%; padding: 10px 0;}
footer .copyright .foot_address em + em{padding-left: 30px;}
footer .copyright .foot_address > span {margin-top: 20px; display: block;}
footer .family_site{flex: 0 1 50%; display: flex; flex-wrap: wrap; justify-content: flex-end;}
footer .foot_row{display: flex;  justify-content: flex-end; align-items: center; margin: 5px 0;}
footer .foot_row > .btnPack{margin:0; border: 1px solid rgba(0,0,0,0.2) !important; color: #84869e !important}
footer .foot_row > .btnPack:hover {border: 1px solid rgba(0,0,0,0.4) !important;}

footer .foot_search_wrap{display: flex; }
footer .foot_search_wrap + .foot_search_wrap {margin-left: 10px;}
footer .foot_search_wrap input[type="text"]{ border-radius: 5px 0 0 5px; width: 150px;}
footer .foot_search_wrap > button{ line-height: 40px; background-color: #aaaec4; color: #fff; display: inline-block; white-space: nowrap; height: 40px; padding: 0 10px; margin: 0; border-radius: 0 5px 5px 0;}



.icon_right {position: fixed; right:50px; bottom:50px; width: 45px; z-index: 70; height: 100px;}
.icon_right button{display: inline-block; height: 40px; width: 40px; line-height: 40px; background-color: #fff; border-radius: 15px; box-shadow: 0px 0px 7px rgba(107, 114, 152, 0.2); margin: 10px 0;  color: #84869e; transition: all 0.6s;  position: relative; font-size: 120%;}
.icon_right button:hover {box-shadow: 0px 0px 15px rgba(107, 114, 152, 0.4);}

.icon_right .cart_num{position: absolute; top:-8px; right: -8px; width:22px; height: 22px;  line-height: 23px; border-radius: 50%; background-color: var(--default_color); display: flex; justify-content: center; align-items: center;}
.icon_right .cart_num span{color: #fff; font-size: 11px; text-align: center; line-height: inherit;}
.icon_right .cart_num.plus_motion {animation: plus_motion 0.6s cubic-bezier(0.36,0.07,0.19,0.97) both; }


@-webkit-keyframes plus_motion {
  0% { transform:scale(1); }
  50% { transform: scale(1.3); background-color: #007bff; }
  100% {transform: scale(1);}
}




@media only screen and (max-width:900px){
  footer {padding:30px 0; margin-top: 30px;}
  footer .wrap_container {flex-wrap: wrap;}
  footer .copyright{flex: 0 1 100%; text-align: center; margin-top: 15px;}
  footer .family_site{flex: 0 1 100%;}
  footer .foot_row {width: 70%; margin: 5px auto;  justify-content: center;}
  footer .foot_search_wrap {width: 50%;}
  footer .foot_search_wrap input[type="text"] {width: 100%;}
  footer .family_site .site_select dt > a, footer .viewer_down{height: 35px !important; line-height: 35px !important;}

	.icon_right { right:10px; bottom: 25px;}

}

@media only screen and (max-width:540px){
  footer .foot_row {width: 100%; margin: 5px auto; flex-wrap: wrap;}
  footer .foot_search_wrap + .foot_search_wrap {margin: 7px 0;}
  footer .foot_search_wrap {width: 100%; }
  footer .foot_search_wrap input[type="text"] {width: 100%;}
  footer .viewer_down {display: block; width: 100%;}
  footer .family_site .site_select {width: 100%; margin:8px 0;}
	.icon_right { right:10px; bottom: 25px;}

}





.assem_cartbox {position: fixed; right:0; width: 400px; top:0; bottom:0; background-color: #fff; z-index: 1056; box-shadow: 0px 0px 20px rgba(107, 114, 152, 0.2); transition: all 0.6s; transform: translateX(420px); opacity: 0; display: none;}
.assem_cartbox.show {transform: translateX(0); opacity: 1; }
.assem_cartbox .cartbox_tit {position: relative; display: flex; padding: 15px 25px; align-items: center; background-color: #f7f8fa; justify-content: space-between; z-index: 1; height: 60px;}
.assem_cartbox .cartbox_tit > h3 {font-weight: 700;}
.assem_cartbox .cartbox_tit > h3 > span{color:#ee379e; padding: 0 10px; display: inline-flex; align-items:flex-start; }
.assem_cartbox .cartbox_tit > h3 > span > em{padding: 0 3px; font-size: 90%;}
.assem_cartbox .cartbox_con {display: block;  position: relative; background-color: #fff; height: calc(100dvh - 60px); overflow-y: auto;}
.assem_cartbox .cartbox_con > p {padding:15px 20px}
.assem_cartbox .cartbox_con > .cart_nodata {padding:50px 50px; text-align: center; font-size: 200%; font-weight: 700; color: #d8d8e2; word-break: keep-all;}

.assem_cartbox .cartbox_con ul li + li {border-top: 1px dashed #ddd;}
.assem_cartbox .cartbox_con ul li .cart_cell{display: flex;  align-items: center; padding-right:20px; transition: all 0.3s; position: relative; z-index: 2;  justify-content: space-between;}
.assem_cartbox .cartbox_con ul li .cart_cell a{ flex: 1 0 calc(100% - 20px) ; display: flex;   white-space: nowrap; overflow: hidden;   font-weight: 500;color: #6b7596; font-size: 100%; transition: all 0.3s; padding:20px 0px 20px 20px}
.assem_cartbox .cartbox_con ul li .cart_cell a strong{ flex: 0 1 calc(100% - 70px) ; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;   font-weight: 500; transition: all 0.3s;}
.assem_cartbox .cartbox_con ul li .cart_cell a .m_assem_date{ flex: 0 1 70px;  font-size: 90%; text-align: right;}
.assem_cartbox .cartbox_con ul li .cart_cell .cart_del{flex: 0 1 20px; text-align: right;}
.assem_cartbox .cartbox_con ul li:hover .cart_cell a {color: #2e3342;}
.assem_cartbox .cartbox_con ul li:hover .cart_cell{background-color: #f0f2fd;}

@media only screen and (max-width:500px){
  .assem_cartbox {width: 300px; }

	
}


.vod_assem_btn {display: inline-block; padding: 0 15px; font-size: 130%; color: #6b7596; transition: all 0.3s;}
.vod_assem_btn:hover {color: #2d3347; }
.assem_cart_btn {display: inline-block; padding: 0 10px; font-size: 140%; color: #6b7596; transition: all 0.3s;}
.assem_cart_btn:hover {color: #2d3347; }
.assem_cart_btn.active {color: #ee379e;}