/* BASIC css start */
#main { position: relative; }

.submenu-bar { width:100%; margin: 0 auto; height: 42px; display: flex; align-items: center; justify-content: flex-end; }
.submenu-list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0 24px 0 0; padding: 0; }
.submenu-item { display: flex; align-items: center; }
.submenu-item a { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: #333; white-space: nowrap; text-decoration: none; }
.submenu-item a:hover { color: #105fde; }
.submenu-dot { width: 4px; height: 4px; border-radius: 50%; background: #105fde; flex-shrink: 0; }
.submenu-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 20px; background: #3C97FF; 
               color: #fff; font-size: 13px; font-weight: 600; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.submenu-btn:hover { background: #0c4bb3; }

.topic-tools-wrap { width: 100%; padding: 20px 0 0 20px; box-sizing: border-box; }
.topic-tools { display: flex; align-items: stretch; width: 788px; border: 1px solid #e9e9e9; border-radius: 6px; }

/* ÁÂÃø ŸÀÌƲ ¹Ú½º */
.topic-tools-title { flex-shrink: 1; width: 160px; padding: 18px 20px; box-sizing: border-box; }
.topic-tools-tit { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #222; }
.topic-tools-desc { margin: 0 0 10px; font-size: 12px; line-height: 1.2; color: #999; }
.topic-tools-more { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 10px; background: #105fde; color: #fff; font-size: 12px; font-weight: 600; border-radius: 20px; text-decoration: none; }
.topic-tools-more-arr { margin-top: 1px; }

/* ¾ÆÀÌÄÜ ¸®½ºÆ® */
.topic-tools-list { flex: 1; display: flex; align-items: center; justify-content: space-around; list-style: none; margin: 0; padding: 0 10px; }
.topic-tools-item a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.topic-tools-icon { display: block; width: 60px; height: 58px; }
.topic-tools-icon img { display: block; width: 60px; height: 58px; }
.topic-tools-label { font-size: 12px; font-weight: 500; color: #444; white-space: nowrap; }
.topic-tools-item a:hover .topic-tools-label { color: #105fde; }

.recommend_wrap { width: 100%; margin-top: 30px; padding-left: 20px; box-sizing: border-box; }
.recommend_wrap .rc_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.recommend_wrap .rc_title { display: flex; align-items: center; gap: 8px; }
.recommend_wrap .rc_title h2 { font-size: 16px; font-weight: 700; margin: 0; color: #222; }
.recommend_wrap .rc_badge_best { display: inline-block; }
.recommend_wrap .rc_badge_best img { display: block; height: 100%; width: auto; }
.recommend_wrap .rc_more_btn { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; }
.recommend_wrap .rc_more_btn img { display: block; width: auto; }

/* »óÇ° ±×¸®µå: PC 5¿­ */
.recommend_wrap .rc_list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 15px; list-style: none; margin: 0; padding: 0; }
.recommend_wrap .rc_item a { display: block; text-decoration: none; color: inherit; }
.recommend_wrap .rc_img_box { position: relative; width: 146px; padding-top: 100%; /* Á¤¹æÇü ºñÀ² */ overflow: hidden; background: #F3F6FA; }

.recommend_wrap .rc_img_box img { position: absolute; top: 0; left: 0; width: 146px; height: 146px; object-fit: cover;}
.recommend_wrap .rc_name { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recommend_wrap .rc_price_row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.recommend_wrap .rc_price { font-size: 13px; font-weight: 700; color: #111; }
/* <!--/recmd_product@icons/--> ű״ °ü¸®ÀÚ¿¡¼­ µî·ÏÇÑ ¾ÆÀÌÄÜ À̹ÌÁö(¿¹: NEW, BEST)¸¦
   img ÅÂ±× ÇüÅ·ΠÀÚµ¿ Ãâ·ÂÇÕ´Ï´Ù. ÇÊ¿ä½Ã ¾Æ·¡Ã³·³ Å©±â/¿©¹é¸¸ ÁöÁ¤ÇØÁÖ¼¼¿ä. */
.recommend_wrap .rc_price_row img { height: 14px; vertical-align: middle; }
/* ¹ÝÀÀÇü: ÅÂºí¸´ 3¿­ */
@media screen and (max-width: 1024px) { .recommend_wrap .rc_list { grid-template-columns: repeat(3, 1fr); } }

/* ¹ÝÀÀÇü: ¸ð¹ÙÀÏ 2¿­ */
@media screen and (max-width: 640px) { .recommend_wrap { margin-left: 0; padding-left: 12px; padding-right: 12px; }
  .recommend_wrap .rc_list { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; } }
 
.special_wrap { width: 100%; margin-top: 20px; padding-left: 20px; }
  .special_01 { width: 786px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid #6F72F9;  }
  /* ÁÂÃø º¸¶ó»ö ¹è³Ê (ÅëÀ̹ÌÁö + ¸µÅ©) : º¸´õ Æ÷ÇÔ 195x195 °íÁ¤ */
  .special_wrap .sp_banner { flex: 0 0 192px; width: 192px; height: 192px; box-sizing: border-box; overflow: hidden; }
  .special_wrap .sp_banner a { display: block; width: 100%; height: 100%; }
  .special_wrap .sp_banner img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* ¿ìÃø »óÇ° 4°³ ¸®½ºÆ® */
  .special_wrap .sp_list { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
  .special_wrap .sp_item a { display: block; text-decoration: none; color: inherit; }
  .special_wrap .sp_img_box { position: relative; width: 100%;  padding-top: 100%;  /* Á¤¹æÇü ºñÀ² */ overflow: hidden;  }
  .special_wrap .sp_img_box img { position: absolute; top: 0; left: 0; width: 130px; height: 130px; object-fit: cover; }

  /* ¹°/È­/»ý/Áö ½ºÆ¼Ä¿ - ÀÚ¸®(¼ø¼­)º° °íÁ¤ À̹ÌÁö */
  .special_wrap .sp_badge { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; background-size: contain; background-repeat: no-repeat; background-position: center; }
  .special_wrap .sp_item:nth-child(1) .sp_badge { background-image: url('/design/science/images/d4/story_01.png'); }
  .special_wrap .sp_item:nth-child(2) .sp_badge { background-image: url('/design/science/images/d4/story_02.png'); }
  .special_wrap .sp_item:nth-child(3) .sp_badge { background-image: url('/design/science/images/d4/story_03.png'); }
  .special_wrap .sp_item:nth-child(4) .sp_badge { background-image: url('/design/science/images/d4/story_04.png'); }

  .special_wrap .sp_name { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* ¹ÝÀÀÇü: ÅÂºí¸´ - ¹è³Ê À§, »óÇ° 4¿­ À¯Áö */
  @media screen and (max-width: 1024px) { .special_wrap { flex-direction: column; } }

  /* ¹ÝÀÀÇü: ¸ð¹ÙÀÏ - »óÇ° 2¿­ */
  @media screen and (max-width: 640px) { .special_wrap { margin-left: 0; padding-left: 12px; padding-right: 12px; }
    .special_wrap .sp_list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

.cate_list_wrap { width: 100%; margin-top: 30px; padding-left: 20px; box-sizing: border-box; }
.cate_list_wrap + .cate_list_wrap { margin-top: 32px; /* ¼½¼Ç °£ °£°Ý */ }
.cate_list_wrap .cl_header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #CCC; }
.cate_list_wrap .cl_header h2 { font-size: 16px; font-weight: 700; margin: 0; color: #000; }
.cate_list_wrap .cl_more_btn { border: none; background: none; padding: 0; cursor: pointer; line-height: 0; }
.cate_list_wrap .cl_more_btn img { display: block; height: 22px; width: auto; }
/* »óÇ° ±×¸®µå: PC 5¿­ °íÁ¤(ÇÑ ÁÙ) */
.cate_list_wrap .cl_list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 16px; list-style: none; margin-top: 10px; padding: 0; }
.cate_list_wrap .cl_item a { display: block; text-decoration: none; color: inherit; }
.cate_list_wrap .cl_img_box { position: relative; width: 100%; padding-top: 100%; /* Á¤¹æÇü ºñÀ² */ overflow: hidden; border-radius: 6px; background: #f5f5f5; }
.cate_list_wrap .cl_img_box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.cate_list_wrap .cl_name { margin-top: 10px; font-size: 13px; line-height: 1.4; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cate_list_wrap .cl_price_row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cate_list_wrap .cl_price { font-size: 14px; font-weight: 700; color: #111; }

/* @icons ű״ °ü¸®ÀÚ¿¡¼­ µî·ÏÇÑ ¾ÆÀÌÄÜ À̹ÌÁö(NEW µî)¸¦ img·Î ÀÚµ¿ Ãâ·Â */
.cate_list_wrap .cl_price_row img { height: 14px; vertical-align: middle; }
/* ¹ÝÀÀÇü: ÅÂºí¸´ 3¿­ */ @media screen and (max-width: 1024px) { .cate_list_wrap .cl_list { grid-template-columns: repeat(3, 1fr); } }
/* ¹ÝÀÀÇü: ¸ð¹ÙÀÏ 2¿­ */
@media screen and (max-width: 640px) { .cate_list_wrap { margin-left: 0; padding-left: 12px; padding-right: 12px; }
.cate_list_wrap .cl_list { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; } }


/* best-evt */
#main .best-evt { zoom: 1; overflow: hidden; margin-top: 20px; }
/* slideBestEvt */
#main #slideBestEvt { float: left; width: auto; border-left: 0; }
/* hashBestEvt */
#main #hashBestEvt { position: relative; float: right; }
/* headlineBanner */
#main #headlineBanner { position: relative; margin-top: 20px; }
/* mdItem */
#main #mdItem { position: relative; margin-top: 20px; }
#main .item-hd { margin-top: 0; padding-top: 30px; }
.special-wrap .item-list { height: 290px; padding: 20px 0 0 220px; background: url(/images/d3/nature_green/common/bg_main_prd.gif) no-repeat 0 0; }
.special-wrap .item-list ul { zoom: 1; overflow: hidden; width: 575px; }
.special-wrap .item-list ul .thumb { float: left; width: 105px; height: 105px; margin: 5px 5px 0 0; border: 0; }
.special-wrap .item-list ul .thumb img { width: 100%; height: 100%; }
.prd-wrap { zoom: 1; overflow: hidden; padding: 30px 30px 30px 0; border: 1px solid #c5c5c5; border-top: 0; }
.prd-wrap:after { content: ""; clear: both; display: block; }
.prd-wrap .more-item, 
.prd-wrap .more-list { float: left; }
.prd-wrap .more-item { width: 288px; }
.prd-wrap .more-list { width: 480px; overflow: hidden; background: url(/images/d3/modern_simple/common/line_w1_h12.gif) repeat-y 0 0; }
.prd-wrap .more-item .item-list { padding-bottom: 0; }
.prd-wrap .more-item .item-list .item { width: 288px; margin-top: 0; }
.prd-wrap .more-item .item-list .item .thumb { width: 228px; height: 228px; margin-bottom: 40px; }
.prd-wrap .more-item .item-list .item .price { padding-top: 10px; }
.prd-wrap .more-list .item-list { margin-left: 30px; padding-bottom: 0; }
.prd-wrap .more-list .item-list .item { width: 150px; margin-top: 0; }
.prd-wrap .more-list .item-list .item .thumb { width: 118px; height: 118px; border: 0; }
.prd-wrap .more-list .item-list .item .title { width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 15px; }
.prd-hd { zoom: 1; overflow: hidden; width: 100%; height: 31px; line-height: 30px; margin-top: 40px; background-color: #f5f5f5; }
.prd-hd .now-hd, 
.prd-hd ul { float: left; }
.prd-hd .now-hd { width: 260px; padding-left: 40px; border-bottom: 1px solid #c5c5c5; background: url('/images/d3/nature_green/common/ico_leaf_h18.gif') no-repeat 25px 40%; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
.prd-hd ul { zoom: 1; overflow: hidden; width: 500px; }
.prd-hd ul li { float: left; width: 250px; text-align: center; border-bottom: 1px solid #c5c5c5; }
.prd-hd ul li a { width: 250px; display: inline-block; line-height: 30px; color: #888; font-weight: bold; }
.prd-hd ul li.now { width: 248px; border: 1px solid #c5c5c5; border-bottom: 0; background-color: #fff; }
.prd-hd ul li.now a { width: 248px; }
/* BASIC css end */