{"id":5218,"date":"2015-07-21T20:40:01","date_gmt":"2015-07-21T11:40:01","guid":{"rendered":"http:\/\/shop-pro.jp\/manual\/?page_id=5218"},"modified":"2018-02-26T14:45:00","modified_gmt":"2018-02-26T05:45:00","slug":"%e5%95%86%e5%93%81%e7%94%bb%e5%83%8f10%e6%9e%9a%e8%a1%a8%e7%a4%ba-%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e7%89%88%e6%9c%89%e6%96%99%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac","status":"publish","type":"post","link":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c","title":{"rendered":"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528"},"content":{"rendered":"<div class=\"text_box\">\r\n<div class=\"title_txt\">\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u306b\u30d7\u30e9\u30f3\u30a2\u30c3\u30d7\u3057\u305f\u969b\u306b\u3001<br \/>\r\n \u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u3067\u6a19\u6e96\u6a5f\u80fd\u3067\u3042\u308b\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u3092\u884c\u3046\u70ba\u306e\u3001\u65e2\u5b58\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4fee\u6b63\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002\r\n\r\n<div style=\"margin-top: 10px; padding: 15px; background: #ffffff;\"><span style=\"color: #f24baa; font-weight: bold;\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u3092\u3054\u5229\u7528\u306e\u30b7\u30e7\u30c3\u30d7\u69d8\u306e\u307f<\/span>\u3068\u306a\u308a\u307e\u3059\u3002\u305d\u308c\u4ee5\u5916\u306e\u30d7\u30e9\u30f3\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3044\u3066\u3044\u308b\u30b7\u30e7\u30c3\u30d7\u69d8\u304c\u3001\u672c\u4fee\u6b63\u3092\u884c\u3044\u307e\u3057\u3066\u3082\u3001<br \/>\r\n \u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u306f\u884c\u3048\u307e\u305b\u3093\u3002\u3054\u4e86\u627f\u304f\u3060\u3055\u3044\u3002<span style=\"color: #f24baa; font-weight: bold;\">2013\u5e745\u670813\u65e5\u4ee5\u964d\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u305f\u30b7\u30e7\u30c3\u30d7\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u306f\u3001\u672c\u4fee\u6b63\u3092\u884c\u3046\u5fc5\u8981\u306f\u3054\u3056\u3044\u307e\u305b\u3093\u3002<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<ul style=\"margin: 15px 0 0;\">\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_pc_f\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">PC\u7248\u7121\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_pc_c\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">PC\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_mb_f\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">\u30e2\u30d0\u30a4\u30eb\u7248\u7121\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_mb_c\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">\u30e2\u30d0\u30a4\u30eb\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_sp_f\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u7121\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n\t<li><a style=\"margin-left: 0px; text-decoration: underline; font-weight: normal;\" href=\"\/manual\/tpl_pic10_update_sp_c\">\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u00a0<span style=\"font-weight: bold;\">\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/span>\u00a0\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u30de\u30cb\u30e5\u30a2\u30eb\u306f\u3053\u3061\u3089<\/a><\/li>\r\n<\/ul>\r\n<p style=\"background: #f24baa; color: #ffffff; padding: 10px; margin: 30px 0 10px; font-size: 13px;\"><strong>\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u7528\u30bf\u30b0\u8ffd\u52a0\u65b9\u6cd5\u00a0\u2026\u00a0\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528<\/strong><\/p>\r\n<div class=\"koumoku_txt\" style=\"padding: 0 15px 15px; margin: 0 0 20px;\">\r\n<p style=\"margin: 0px 0px 10px; font-weight: bold;\">\u5bfe\u5fdc\u65b9\u6cd5\u306f\u4ee5\u4e0b\u306e\uff12\u901a\u308a\u3054\u3056\u3044\u307e\u3059\u3002\u3069\u3061\u3089\u304b\u306e\u5bfe\u5fdc\u3092\u304a\u9858\u3044\u3057\u307e\u3059\u3002<\/p>\r\n<p><span style=\"color: #ee138f; font-size: 13px; font-weight: bold;\">\u25a0\u00a0\u5bfe\u5fdc\u65b9\u6cd5\uff11\uff1a\u518d\u5ea6\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u8ffd\u52a0\u3059\u308b\u3000\u3010\u203b\u63a8\u5968\u3011<\/span><\/p>\r\n<div style=\"margin: 10px 0px 20px; padding: 0 10px 10px;\"><a href=\"\/manual\/design_tmpl_lst#04\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u8ffd\u52a0\u65b9\u6cd5\u306f\u3053\u3061\u3089<\/a><\/div>\r\n<p><span style=\"color: #ee138f; font-size: 13px; font-weight: bold;\">\u25a0\u00a0\u5bfe\u5fdc\u65b9\u6cd5\uff12\uff1a\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u8a72\u5f53\u7b87\u6240\u3092\u4fee\u6b63\u3001\u307e\u305f\u306f\u8ffd\u52a0\u3059\u308b<\/span><\/p>\r\n<div style=\"margin: 10px 0px 20px; padding: 0 10px 10px; line-height: 1.8em;\">\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u7de8\u96c6\u3092\u884c\u3046\u5834\u5408\u306f\u3001\u3010\u5546\u54c1\u8a73\u7d30\u3011HTML\u30fb\u3010\u5171\u901a\u3011CSS \u306e\u8a082\u7b87\u6240\u3092\u7de8\u96c6\u3057\u307e\u3059\u3002<br \/>\r\n \u4f7f\u7528\u3059\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u78ba\u8a8d\u3057\u3001\u7de8\u96c6\u3092\u884c\u3063\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\r\n <a href=\"#01_02\">\u00bb\u00a0\u5404\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u4fee\u6b63\u5185\u5bb9\u3078\u306e\u30ea\u30f3\u30af\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a>\r\n<p style=\"margin: 0px; padding: 0px;\"><span class=\"grn\"><br \/>\r\n \u203b\u4fee\u6b63\u30bf\u30b0\u3092\u5909\u66f4\u3059\u308b\u4f4d\u7f6e\u304c\u4e0d\u660e\u306a\u5834\u5408\u306f\u3001\u3054\u5229\u7528\u4e2d\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u540c\u3058\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u3044\u305f\u3060\u304d\u3001<br \/>\r\n \u4fee\u6b63\u7528\u30bf\u30b0\u304c\u8a18\u8ff0\u3055\u308c\u3066\u3044\u308b\u4f4d\u7f6e\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/span><\/p>\r\n<\/div>\r\n<\/div>\r\n<p style=\"background: #f24baa; color: #ffffff; padding: 10px; margin: 30px 0 10px; font-size: 13px;\"><strong>\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u7528\u30bf\u30b0\u8ffd\u52a0\u624b\u9806<\/strong><\/p>\r\n<div style=\"padding: 0 15px 15px; margin: 0;\">\r\n<h4 class=\"koumoku_title\" style=\"margin-top: 15px;\" align=\"absmiddle\">\u4f7f\u7528\u3057\u3066\u3044\u308b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u78ba\u8a8d<\/h4>\r\n<div class=\"koumoku_txt\">\u3010\u5546\u54c1\u8a73\u7d30\u3011HTML \u306b\u8ffd\u52a0\u3059\u308b\u30bf\u30b0\u306f\u5404\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u6bce\u306b\u7570\u306a\u308a\u307e\u3059\u3002\u5bfe\u8c61\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/div>\r\n<div style=\"margin: 10px 0px 0px 0px;\"><a href=\"#01_02\">\u00bb\u00a0\u5404\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u4fee\u6b63\u5185\u5bb9\u3078\u306e\u30ea\u30f3\u30af\u4e00\u89a7\u306f\u3053\u3061\u3089<\/a><\/div>\r\n<h4 class=\"koumoku_title\" style=\"margin-top: 15px;\" align=\"absmiddle\">\u30bf\u30b0\u306e\u633f\u5165\u7b87\u6240\u3092\u78ba\u8a8d<\/h4>\r\n<div class=\"koumoku_txt\">\u3010\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5225\u633f\u5165\u30bf\u30b0\u4e00\u89a7\u8868\u3011\u306e\u3001\u00a0<span style=\"background-color: #fffc00;\">&lt;!-- \u9ec4\u8272\u3044\u30de\u30fc\u30af\u306e\u6587\u5b57\u5217 --&gt;<\/span>\u00a0\u304c\u633f\u5165\u7b87\u6240\u306e\u76ee\u5b89\u3068\u306a\u308a\u307e\u3059\u306e\u3067\u3001<br \/>\r\n \u6587\u5b57\u5217\u3092\u3010\u5546\u54c1\u8a73\u7d30\u3011HTML \u5185\u306b\u3066\u691c\u7d22\u3057\u307e\u3059\u3002<\/div>\r\n<h4 class=\"koumoku_title\" style=\"margin-top: 15px;\" align=\"absmiddle\">\u6307\u5b9a\u30bf\u30b0\u3092\u30b3\u30d4\u30fc\u3001\u633f\u5165<\/h4>\r\n<div class=\"koumoku_txt\">\u30fb\u691c\u7d22\u5f8c\u3001\u5404\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u8ffd\u52a0\u4f4d\u7f6e\u3092\u3054\u78ba\u8a8d\u3044\u305f\u3060\u304d\u3001<span style=\"background-color: #ffb4d2;\">\u00a0\u30d4\u30f3\u30af\u30a8\u30ea\u30a2\u306e\u8ffd\u52a0\u30bf\u30b0\u00a0<\/span>\u3092\u633f\u5165\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u30fb\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306b\u3088\u3063\u3066\u306f\u3001\u4e00\u90e8\u30bf\u30b0\u3092\u524a\u9664\u3057\u3066\u3044\u305f\u3060\u3044\u305f\u5f8c\u3001\u30bf\u30b0\u3092\u8ffd\u52a0\u3057\u3066\u3044\u305f\u3060\u304f\u5fc5\u8981\u304c\u3054\u3056\u3044\u307e\u3059\u3002<br \/>\r\n \u524a\u9664\u3059\u308b\u5fc5\u8981\u306e\u30bf\u30b0\u304c\u3042\u308b\u5834\u5408\u3001 \u524a\u9664\u8a72\u5f53\u90e8\u5206\u3092<span style=\"background-color: #cccccc;\">\u00a0\u30b0\u30ec\u30fc\u30a8\u30ea\u30a2\u00a0<\/span>\u3067\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u30b0\u30ec\u30fc\u30a8\u30ea\u30a2\u00a0<\/span>\u90e8\u5206\u306e\u30bf\u30b0\u3092\u524a\u9664\u5f8c\u306b\u3001<span style=\"background-color: #ffb4d2;\">\u00a0\u30d4\u30f3\u30af\u30a8\u30ea\u30a2\u306e\u8ffd\u52a0\u30bf\u30b0\u00a0<\/span>\u90e8\u5206\u306e\u30bf\u30b0\u3092\u633f\u5165\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n\r\n<p>\u30fb\u8ffd\u52a0\u3059\u308bHTML\u30bf\u30b0\u306b\u306f\u3001<span style=\"font-weight: bold;\">\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u30bf\u30b0\u3068\u3001\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0\u306e\uff12\u901a\u308a<\/span>\u304c\u3054\u3056\u3044\u307e\u3059\u3002<br \/>\r\n \u3069\u3061\u3089\u306e\u30bf\u30b0\u3092\u3054\u5229\u7528\u3044\u305f\u3060\u3044\u3066\u3082\u3001\u5546\u54c1\u753b\u50cf\u306f\u8868\u793a\u3055\u308c\u307e\u3059\u306e\u3067\u3001<br \/>\r\n \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306a\u3069\u884c\u3063\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u5408\u3063\u305fHTML\u30bf\u30b0\u3092\u3054\u5229\u7528\u304f\u3060\u3055\u3044\u3002<br \/>\r\n \u203bCSS\u306f\u5171\u901a\u3067\u3059\u3002<\/p>\r\n<\/div>\r\n<p><a name=\"01_02\"><\/a><\/p>\r\n<div class=\"koumoku_txt\" style=\"margin: 15px 0 60px;\">\r\n<p><span style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block;\">\u25a0\u00a0\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5225\u633f\u5165\u30bf\u30b0\u4e00\u89a7\u8868\u00a0\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u00a0\u3010\u00a0\u5546\u54c1\u8a73\u7d30\u00a0\u3011HTML<\/span><\/p>\r\n<div class=\"koumoku_txt\" style=\"padding: 15px; line-height: 170%; color: #ff5c86; border: solid 5px #ebebeb; margin: 0 0 15px;\">\r\n<div style=\"line-height: 2em;\">\uff5c<a href=\"#tag01\">Paper and Wood<\/a>\uff5c<a href=\"#tag02\">Unknown(pink)<\/a>\uff5c<a href=\"#tag03\">Unknown(green)<\/a>\uff5c<a href=\"#tag04\">Unknown(red)<\/a>\uff5c<a href=\"#tag05\">Unknown(yellow)<\/a>\uff5c<a href=\"#tag06\">JapanStyle<\/a>\uff5c<a href=\"#tag07\">fluffy<\/a>\uff5c<a href=\"#tag08\">\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(RED)<\/a>\uff5c<a href=\"#tag09\">\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(BLACK)<\/a>\uff5c<a href=\"#tag10\">\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(BLUE)<\/a>\uff5c<a href=\"#tag11\">ComfortableTime<\/a>\uff5c<a href=\"#tag12\">JIGGY<\/a>\uff5c<a href=\"#tag13\">\u30cf\u30ea\u30a6\u30c3\u30c9\u30d2\u30eb\u30ba<\/a>\uff5c<a href=\"#tag14\">\u30b8\u30e5\u30a8\u30ea\u30fc\uff06\u30a6\u30a9\u30c3\u30c1\uff08\u30b0\u30ec\u30fc\uff09<\/a>\uff5c<a href=\"#tag15\">\u30b8\u30e5\u30a8\u30ea\u30fc\uff06\u30a6\u30a9\u30c3\u30c1\uff08\u30d6\u30e9\u30c3\u30af\uff09<\/a>\uff5c<a href=\"#tag16\">\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30d6\u30eb\u30fc\uff09<\/a>\uff5c<a href=\"#tag17\">\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30db\u30ef\u30a4\u30c8\uff09<\/a>\uff5c<a href=\"#tag18\">\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30aa\u30ec\u30f3\u30b8\uff09<\/a>\uff5c<a href=\"#tag19\">\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30d4\u30f3\u30af\uff09<\/a>\uff5c<a href=\"#tag20\">\u30ab\u30b9\u30bf\u30e0\uff08\u30d4\u30f3\u30af\uff09<\/a>\uff5c<a href=\"#tag21\">\u30ab\u30b9\u30bf\u30e0\uff08\u30aa\u30ec\u30f3\u30b8\uff09<\/a>\uff5c<a href=\"#tag22\">\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\u30b5\u30c6\u30e9\u30a4\u30c8\uff08\u30d6\u30eb\u30fc\uff09<\/a>\uff5c<\/div>\r\n<\/div>\r\n<\/div>\r\n<p><a name=\"tag01\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0Paper and Wood<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag02\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0Unknown(pink)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag03\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0Unknown(green)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag04\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0Unknown(red)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag05\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0Unknown(yellow)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag06\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0JapanStyle<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: url(http:\/\/img.shop-pro.jp\/s_tmpl_img\/20\/flick_bg.png);\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag07\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0fluffy<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #F5F0E9;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag08\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(RED)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag09\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(BLACK)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag10\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30aa\u30d5\u30a3\u30b9\u30b9\u30bf\u30f3\u30c0\u30fc\u30c9(BLUE)<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag11\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0ComfortableTime<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: url(http:\/\/img.shop-pro.jp\/s_tmpl_img\/15\/flick_bg.gif);\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag12\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0JIGGY<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #fff;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag13\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30cf\u30ea\u30a6\u30c3\u30c9\u30d2\u30eb\u30ba<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #FED7DB;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #B29C9E;\r\n  box-shadow: inset 0 0 10px 0 #B29C9E;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag14\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30b8\u30e5\u30a8\u30ea\u30fc\uff06\u30a6\u30a9\u30c3\u30c1\uff08\u30b0\u30ec\u30fc\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #333;\r\n  text-align: center;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag15\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30b8\u30e5\u30a8\u30ea\u30fc\uff06\u30a6\u30a9\u30c3\u30c1\uff08\u30d6\u30e9\u30c3\u30af\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #333;\r\n  text-align: center;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag16\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30d6\u30eb\u30fc\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag17\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30db\u30ef\u30a4\u30c8\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag18\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30aa\u30ec\u30f3\u30b8\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag19\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\uff08\u30d4\u30f3\u30af\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag20\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30ab\u30b9\u30bf\u30e0\uff08\u30d4\u30f3\u30af\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #FEF0F7;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #DCD2D7;\r\n  box-shadow: inset 0 0 10px 0 #DCD2D7;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag21\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30ab\u30b9\u30bf\u30e0\uff08\u30aa\u30ec\u30f3\u30b8\uff09<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #FFF3E2;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #D3CDC3;\r\n  box-shadow: inset 0 0 10px 0 #D3CDC3;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<p><a name=\"tag22\"><\/a><\/p>\r\n<h3 style=\"color: #ee138f; font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; padding: 10px; background: #ffd2eb;\">\u25a0\u00a0\u30d5\u30a1\u30c3\u30b7\u30e7\u30f3\u30b5\u30c6\u30e9\u30a4\u30c8<\/h3>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\uff11\u679a\u305a\u3064\u8ffd\u52a0\u3059\u308b\u5834\u5408\u306e\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5546\u54c1\u8a73\u7d30HTML\u00a0-\u00a0\u753b\u50cf\u3092\u307e\u3068\u3081\u3066\u51fa\u529b\u3059\u308b\u30bf\u30b0<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #ffb4d2;\">&lt;script type=\"text\/javascript\"&gt;  \r\n$(function() {\r\n    (function images() {\r\n      var itemWidth = $('#flick_itemimage &gt; li').width();\r\n      var $demo = $('#images');\r\n      var $pointer = $demo.find('.pointer span');\r\n      var flipsnap = Flipsnap('#images ul', {\r\n        distance: 320,\r\n        itemWidth: itemWidth\r\n      });\r\n    flipsnap.element.addEventListener('fsmoveend', function() {\r\n      $pointer.filter('.selected').removeClass('selected');\r\n      $pointer.eq(flipsnap.currentPoint).addClass('selected');\r\n    }, false);\r\n    })();\r\n}); \r\n&lt;\/script&gt;<\/span>\r\n<span style=\"background-color: #fffc00;\">&lt;article id=\"prd_dtl\"&gt;<\/span>\r\n  &lt;div id=\"topicpass\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{if $bid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$bid_link}&gt;\"&gt;&lt;{$bid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n      &lt;{if $sid_name != \"\"}&gt;\r\n      &lt;li&gt;&gt;&lt;a href=\"&lt;{$sid_link}&gt;\"&gt;&lt;{$sid_name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/if}&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;{section name=cnt loop=$group_breadcrumb_list}&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\".\/\"&gt;\u30db\u30fc\u30e0&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}&gt;\r\n      &lt;li&gt;&gt;\u00a0&lt;a href=\"&lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}&gt;\"&gt; &lt;{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;{\/section}&gt; \r\n    &lt;\/ul&gt;\r\n    &lt;{\/section}&gt;\r\n  &lt;\/div&gt;\r\n  &lt;section&gt;\r\n    &lt;{if $product.id != \"\"}&gt;\r\n    &lt;h1&gt;&lt;{$product_name}&gt;&lt;\/h1&gt;\r\n<span style=\"background-color: #cccccc;\">    &lt;{if $product.img_url != \"\" || $product.ot1_url != \"\" || $product.ot2_url != \"\" || $product.ot3_url != \"\"}&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">    &lt;{if $product.img_url != \"\" || $otherimg_num != 0}&gt;<\/span>\r\n    &lt;div id=\"images\"&gt;\r\n<span style=\"background-color: #cccccc;\">      &lt;div class=\"img\"&gt;&lt;\/div&gt;\r\n      &lt;ul class=\"img_th\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n      &lt;\/ul&gt;<\/span>\r\n<span style=\"background-color: #ffb4d2;\">      &lt;div class=\"flick\"&gt;\r\n        &lt;{if $product.img_url != \"\"}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num+1}&gt;&lt;{else}&gt;&lt;{assign var=\"itemimage_cnt\" value=$otherimg_num}&gt;&lt;{\/if}&gt;\r\n        &lt;{assign var=\"Data4\" value=$itemimage_cnt*320}&gt;\r\n        &lt;ul id=\"flick_itemimage\" style=\"width: &lt;{$Data4}&gt;px\"&gt;\r\n          &lt;{if $product.img_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.img_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot1_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot1_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot2_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot2_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot3_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot3_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot4_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot4_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot5_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot5_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot6_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot6_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot7_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot7_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot8_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot8_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n          &lt;{if $product.ot9_url != \"\"}&gt;&lt;li&gt;&lt;img src=\"&lt;{$product.ot9_url}&gt;\"&gt;&lt;\/li&gt;&lt;{\/if}&gt;\r\n        &lt;\/ul&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div class=\"pointer\"&gt;\r\n        &lt;{section name=cnt loop=$itemimage_cnt}&gt;\r\n        &lt;span&lt;{if $smarty.section.cnt.first }&gt; class=\"selected\"&lt;{\/if}&gt;&gt;&lt;\/span&gt;\r\n        &lt;{\/section}&gt;\r\n      &lt;\/div&gt;<\/span>\r\n    &lt;\/div&gt;\r\n    &lt;{\/if}&gt;\r\n<\/pre>\r\n<\/div>\r\n<h4 style=\"font-size: 13px; font-weight: bold; margin-bottom: 10px; display: block; line-height: 1.5em;\">\u5171\u901aCSS<br \/>\r\n <span style=\"background-color: #cccccc;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u524a\u9664\u30bf\u30b0<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"background-color: #ffb4d2;\">\u00a0\u00a0\u00a0<\/span>\u00a0<span style=\"font-weight: normal;\">\u8ffd\u52a0\u30bf\u30b0<\/span><\/h4>\r\n<div>\r\n<pre style=\"line-height: 1.2em; font-size: 13px;\"><span style=\"background-color: #fffc00;\">\/***********************\r\n    prd_dtl\r\n***********************\/<\/span>\r\n#images {\r\n  padding: 10px 0;\r\n  background: #EFEFEF;\r\n  text-align: center;\r\n  -webkit-box-shadow: inset 0 0 10px 0 #999;\r\n  box-shadow: inset 0 0 10px 0 #999;\r\n}\r\n<span style=\"background-color: #cccccc;\">#images .img {\r\n  margin-bottom: 10px;\r\n}\r\n#images .img img {\r\n  max-width: 90%;\r\n}\r\n#images li {\r\n  display: inline;\r\n  margin: 0 1%;\r\n}\r\n#images li img {\r\n  max-width: 20%;\r\n  max-height: 80px;\r\n}<\/span>\r\n<span style=\"background-color: #ffb4d2;\">#images img {\r\n  max-width: 90%;\r\n}\r\n  #images .flick {\r\n    width: 320px;\r\n  }\r\n  #images .flick ul li {\r\n    width: 320px;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li img {\r\n    max-width: 90%;\r\n    margin-bottom: 0;\r\n  }\r\n  #images .flick ul li a {\r\n    display: inline;\r\n    margin: 0;\r\n  }<\/span>\r\n<\/pre>\r\n<\/div>\r\n<\/div>\r\n<p><!--MAIN_margin end--><\/p>","protected":false},"excerpt":{"rendered":"\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u306b\u30d7\u30e9\u30f3\u30a2\u30c3\u30d7\u3057\u305f\u969b\u306b\u3001 \u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u3067\u6a19\u6e96\u6a5f\u80fd\u3067\u3042\u308b\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u3092\u884c\u3046\u70ba\u306e\u3001\u65e2\u5b58\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4fee\u6b63\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002 \u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[227],"tags":[77,32],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528 - \u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb\" \/>\n<meta property=\"og:description\" content=\"\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u306b\u30d7\u30e9\u30f3\u30a2\u30c3\u30d7\u3057\u305f\u969b\u306b\u3001 \u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u3067\u6a19\u6e96\u6a5f\u80fd\u3067\u3042\u308b\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u3092\u884c\u3046\u70ba\u306e\u3001\u65e2\u5b58\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4fee\u6b63\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002 \u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/\" \/>\n<meta property=\"og:site_name\" content=\"\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-21T11:40:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-26T05:45:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/shop-pro.jp\/manual\/#website\",\"url\":\"https:\/\/shop-pro.jp\/manual\/\",\"name\":\"\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb\",\"description\":\"\u6708\u984d\u5236\u30cd\u30c3\u30c8\u30b7\u30e7\u30c3\u30d7\u4f5c\u6210\u30b5\u30fc\u30d3\u30b9\u56fd\u5185\u5e97\u8217\u6570No.1\uff01\u6709\u540d\u30d6\u30e9\u30f3\u30c9\u3084\u30e1\u30fc\u30ab\u30fc\u306a\u3069\u5168\u56fd4\u4e07\u5e97\u4ee5\u4e0a\u304c\u6d3b\u8e8d\u3057\u3066\u3044\u307e\u3059\u3002\u6708\u984d834\u5186\uff5e\u3067\u59cb\u3081\u3089\u308c\u3066\u3001\u3069\u308c\u3060\u3051\u58f2\u308c\u3066\u3082\u624b\u6570\u65990\u5186\uff01\u6708\u554610\u4e07\u5186\u4ee5\u4e0a\u3092\u76ee\u6307\u3059\u306a\u3089\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u304c\u6700\u9069\u3002\u307e\u305a\u306f30\u65e5\u9593\u306e\u7121\u6599\u4f53\u9a13\u304b\u3089\u3002\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/shop-pro.jp\/manual\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#webpage\",\"url\":\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/\",\"name\":\"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528 - \u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb\",\"isPartOf\":{\"@id\":\"https:\/\/shop-pro.jp\/manual\/#website\"},\"datePublished\":\"2015-07-21T11:40:01+00:00\",\"dateModified\":\"2018-02-26T05:45:00+00:00\",\"author\":{\"@id\":\"https:\/\/shop-pro.jp\/manual\/#\/schema\/person\/764316431bd9cb1f6119c5585df0b245\"},\"breadcrumb\":{\"@id\":\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\/\/shop-pro.jp\/manual\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/shop-pro.jp\/manual\/#\/schema\/person\/764316431bd9cb1f6119c5585df0b245\",\"name\":\"cmsp-manual\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/shop-pro.jp\/manual\/#personlogo\",\"inLanguage\":\"ja\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4153cf3233787ee85154f62e07788c9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4153cf3233787ee85154f62e07788c9?s=96&d=mm&r=g\",\"caption\":\"cmsp-manual\"},\"url\":\"https:\/\/shop-pro.jp\/manual\/author\/cmsp-manual\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"robots":{"index":"noindex","follow":"follow"},"og_locale":"ja_JP","og_type":"article","og_title":"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528 - \u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb","og_description":"\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u306b\u30d7\u30e9\u30f3\u30a2\u30c3\u30d7\u3057\u305f\u969b\u306b\u3001 \u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a\u306e\u30d7\u30e9\u30f3\u3067\u6a19\u6e96\u6a5f\u80fd\u3067\u3042\u308b\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u3092\u884c\u3046\u70ba\u306e\u3001\u65e2\u5b58\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4fee\u6b63\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002 \u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a\u306f\u3001\u30ec\u30ae\u30e5\u30e9\u30fc\u3088\u308a\u4e0a [&hellip;]","og_url":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/","og_site_name":"\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb","article_published_time":"2015-07-21T11:40:01+00:00","article_modified_time":"2018-02-26T05:45:00+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/shop-pro.jp\/manual\/#website","url":"https:\/\/shop-pro.jp\/manual\/","name":"\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb","description":"\u6708\u984d\u5236\u30cd\u30c3\u30c8\u30b7\u30e7\u30c3\u30d7\u4f5c\u6210\u30b5\u30fc\u30d3\u30b9\u56fd\u5185\u5e97\u8217\u6570No.1\uff01\u6709\u540d\u30d6\u30e9\u30f3\u30c9\u3084\u30e1\u30fc\u30ab\u30fc\u306a\u3069\u5168\u56fd4\u4e07\u5e97\u4ee5\u4e0a\u304c\u6d3b\u8e8d\u3057\u3066\u3044\u307e\u3059\u3002\u6708\u984d834\u5186\uff5e\u3067\u59cb\u3081\u3089\u308c\u3066\u3001\u3069\u308c\u3060\u3051\u58f2\u308c\u3066\u3082\u624b\u6570\u65990\u5186\uff01\u6708\u554610\u4e07\u5186\u4ee5\u4e0a\u3092\u76ee\u6307\u3059\u306a\u3089\u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u304c\u6700\u9069\u3002\u307e\u305a\u306f30\u65e5\u9593\u306e\u7121\u6599\u4f53\u9a13\u304b\u3089\u3002","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shop-pro.jp\/manual\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#webpage","url":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/","name":"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528 - \u30ab\u30e9\u30fc\u30df\u30fc\u30b7\u30e7\u30c3\u30d7\u3000\u30de\u30cb\u30e5\u30a2\u30eb","isPartOf":{"@id":"https:\/\/shop-pro.jp\/manual\/#website"},"datePublished":"2015-07-21T11:40:01+00:00","dateModified":"2018-02-26T05:45:00+00:00","author":{"@id":"https:\/\/shop-pro.jp\/manual\/#\/schema\/person\/764316431bd9cb1f6119c5585df0b245"},"breadcrumb":{"@id":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shop-pro.jp\/manual\/tpl_pic10_update_sp_c\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/shop-pro.jp\/manual\/"},{"@type":"ListItem","position":2,"name":"\u5546\u54c1\u753b\u50cf10\u679a\u8868\u793a \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7248\u6709\u6599\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u7528"}]},{"@type":"Person","@id":"https:\/\/shop-pro.jp\/manual\/#\/schema\/person\/764316431bd9cb1f6119c5585df0b245","name":"cmsp-manual","image":{"@type":"ImageObject","@id":"https:\/\/shop-pro.jp\/manual\/#personlogo","inLanguage":"ja","url":"https:\/\/secure.gravatar.com\/avatar\/d4153cf3233787ee85154f62e07788c9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4153cf3233787ee85154f62e07788c9?s=96&d=mm&r=g","caption":"cmsp-manual"},"url":"https:\/\/shop-pro.jp\/manual\/author\/cmsp-manual\/"}]}},"_links":{"self":[{"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/posts\/5218"}],"collection":[{"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/comments?post=5218"}],"version-history":[{"count":8,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/posts\/5218\/revisions"}],"predecessor-version":[{"id":13977,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/posts\/5218\/revisions\/13977"}],"wp:attachment":[{"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/media?parent=5218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/categories?post=5218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shop-pro.jp\/manual\/wp-json\/wp\/v2\/tags?post=5218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}