/* productBox */
#productBox { padding: 0 11px; }
#productBox h4.topTitle { margin: 35px 0 10px; }
#productBox h4.topTitle:before { margin-right: 10px; width: 10px; height: 10px; background: #13448f; display: inline-block; content: ""; vertical-align: middle; }
#productBox h4.topTitle font { display: inline-block; font-weight: normal; font-size: 20px; vertical-align: middle; }

/* productBox ul */
#productBox ul { overflow: hidden; }
#productBox ul li { position: relative; overflow: hidden; margin: 10px 10px 10px 0; padding: 15px; float: left; width: calc(50% - 42px); border: 1px #000 solid; }
#productBox ul li:nth-child(2n) { margin: 10px 0 10px 10px; }
#productBox ul li a.app_link , #productDetail .box a.app_link { position: absolute; padding: .3rem .5rem .3rem .3rem; background: #ffc000; box-shadow: 0 2px 0 #bd9312; border-radius: 0 0 1rem; display: block; font-weight: bold; line-height: 1; font-size: 1rem; color: #13448f; top: 0; left: 0; }
#productBox ul li a.app_link i , #productDetail .box a.app_link i { font-size: .5rem; }
#productBox ul li >div , #productDetail #PhotoDetail >div { float: left; width: 180px; }
#productBox ul li >div:nth-child(2) , #productDetail #PhotoDetail >div:nth-child(2) { margin-left: 20px; width: calc(100% - 200px); }
#productBox ul li >div a.photo ,
#productDetail #PhotoDetail >div a.photo ,
#product2Box ul li >div a.photo { margin-bottom: 10px; background-size: contain; }
#productBox ul li >div a.photo img ,
#productDetail #PhotoDetail >div a.photo img ,
#product2Box ul li >div a.photo { width: 100%; object-fit: contain; }
#productBox ul li >div a.more ,
#productDetail #PhotoDetail >div a.more ,
#product2Box ul li >div a.more { padding: 2px 0; background: #13448f; border-radius: 5px; display: block; text-align: center; color: #fff; }
#productBox ul li >div h5 { padding-bottom: 5px; border-bottom: 1px #e0e0e0 solid; }
#productBox ul li >div h5 a { height: 25px; font-size: 16px; color: #000; }
#productBox ul li >div p { margin: 5px 0; height: 21px; color: #020202; }
#productBox ul li >div p label , #productBox ul li >div p font { vertical-align: middle; }
#productBox ul li .bottomBox { position: absolute; width: calc(100% - 230px); display: flex; justify-content: space-between; bottom: 15px; right: 15px; }
#productBox ul li .bottomBox p.stars { margin: 0; display: flex; vertical-align: middle; align-items: baseline; }
#productBox ul li .bottomBox p.stars font { margin-right: 5px; display: flex; align-items: baseline; font-size: 14px; line-height: 1; }
#productBox ul li .bottomBox p.stars font b { line-height: 1; font-size: 25px; vertical-align: sub; color: #e61e12; }
#productBox ul li .bottomBox a.more { float: right; padding: 2px 15px; display: inline-block; vertical-align: middle; }

/* productDetail */
#productDetail { margin: 40px auto 30px; min-height: 632px; }
#productDetail .box { position: relative; overflow: hidden; margin: 10px 10px 10px; padding: 20px; box-shadow: 0 0 10px #e6e6e6; }
#productDetail .box h6.title { overflow: hidden; }
#productDetail .box h6.title:before { margin-right: 10px; width: 5px; height: 18px; background: #13448f; display: inline-block; vertical-align: middle; content: ""; }
#productDetail .box h6.title font { display: inline-block; font-size: 20px; vertical-align: middle; }
#productDetail .box h6.title a { padding: 1px 10px; float: right; background: #12448f; display: inline-block; color: #fff; }
#productDetail .box .nolist { margin: 10px 0 0 15px; font-size: 16px; color: #808080; }

/* PhotoDetail */
#productDetail #PhotoDetail { overflow: visible; display: flex; flex-wrap: wrap; }
#PhotoDetail >div:nth-child(2) h1 { margin-right: 10px; font-size: 20px; display: inline-block;}
#PhotoDetail >div:nth-child(2) p.stars , p.noCom { display: inline-block; }
#PhotoDetail >div:nth-child(2) p.stars font.gbox * { font-weight: normal; font-size: 16px; vertical-align: sub; }
#PhotoDetail >div:nth-child(2) p.stars font.gbox.count { margin-right: 10px; }
#PhotoDetail >div:nth-child(2) p.noCom , #InfoCommentBox #score ul li p font.noCom { color: #9a9a9a; }
#PhotoDetail >div:nth-child(2) article { margin: 10px 0; font-size: 16px; color: #525252; }
#PhotoDetail >div:nth-child(2) .otherList { margin: 2px 0; }
#PhotoDetail >div:nth-child(2) .otherList label , #PhotoDetail >div:nth-child(2) .otherList font { display: inline-block; color: #525252; vertical-align: bottom; }
#PhotoDetail >div:nth-child(2) .otherList label { margin-right: 10px; color: #000; }
#PhotoDetail .bad .otherList { padding-right: 150px; }
#PhotoDetail .iconbad { position: absolute; right: 0; bottom: -40px; }

/* InfoCommentBox */
#InfoCommentBox , #InfoCommentBox >div ul , #InfoCommentBox #score ul li { overflow: hidden; }
#productDetail #InfoCommentBox .box { margin: 10px; float: left; width: 300px; }
#productDetail #InfoCommentBox #info { width: calc(100% - 421px); }
#InfoCommentBox >div ul , #comment ul , #gameImg ul { margin: 15px 0 15px 15px; }
#InfoCommentBox >div ul:nth-child(3) { margin-bottom: 0; }
#InfoCommentBox #info ul li { position: relative; margin-bottom: 1px; float: left; width: 50%; border-bottom: 1px #e9eaea dashed; }
#InfoCommentBox #info ul li.lag { width: 100%; }
#InfoCommentBox #info ul li label , #InfoCommentBox #info ul li font { position: relative; padding: 2px 10px; width: 100px; display: inline-block; vertical-align: text-top; z-index: 2; }
#InfoCommentBox #info ul li font { width: calc(100% - 140px); }
#InfoCommentBox #info ul li:after { position: absolute; width: 120px; height: 100%; background: #f3f3f3; display: block; top: 0; left: 0; z-index: 1; content: ""; }
#InfoCommentBox #info ul li font a { color: #000; }
#InfoCommentBox #score ul { margin-bottom: 3px; }
#InfoCommentBox #score ul li p { float: left; width: 50%; }
#InfoCommentBox #score ul li p label , #InfoCommentBox #score ul li p font { overflow: hidden; padding: 5px 0; display: block; }
#InfoCommentBox #score ul li p label { border-bottom: 1px #dedede solid; display: none; }
#InfoCommentBox #score ul li:first-child p label { margin-bottom: 14px; display: block; }
#InfoCommentBox #score ul li p font b { margin-right: 5px; float: left; width: 23px; height: 23px; background: #13448f; display: block; border-radius: 50%; text-align: center; line-height: 23px; color: #fff; }
#InfoCommentBox #score ul li p font a { float: left; width: calc(100% - 35px); height: 23px; color: #000; }
#InfoCommentBox #score .stars i { color: #f15f69; }

/* backupurl */
#backupurl { margin: 10px; }
#backupurl a { margin: 10px; padding: 5px 10px; background: #41659c; display: inline-block; color: #fff; }

/* gameImg */
#gameImg ul.slick-slider { margin-bottom: 0; }
#gameImg .slick-slider .slick-track ,
#gameImg .slick-slider .slick-list ,
#searchBtnBox .slick-slider .slick-track ,
#searchBtnBox .slick-slider .slick-list { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#gameImg ul li a.photo { margin: 0 5px; border: 1px #000 solid; }
#gameImg ul li a img { width: 100%; height: 115px; object-fit: contain; }
#gameImg .slick-prev { top: -30px; left: auto; right: 35px; }
#gameImg .slick-next { top: -30px; right: 10px; }
#gameImg .slick-prev:before , #gameImg .slick-next:before { color: #000; }

/* comment */
#comment ul li { padding: .5em 1em; border-bottom: 1px #e7e4e4 solid; }
#comment ul li p.cName { position: relative; padding-left: 55px; margin-bottom: .5em; display: flex; flex-direction: column; }
#comment ul li p.cName:before { position: absolute; width: 45px; height: 45px; background: #1F9BCF; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 21px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: attr(data-name); }
#comment ul li p.cName.show1:before { background: #3B82EC; }
#comment ul li p.cName.show2:before { background: #4BBF73; }
#comment ul li p.cName.show3:before { background: #f0ad4e; }
#comment ul li p.cName.show4:before { background: #f0ad4e; }
#comment ul li p.cName.show5:before { background: #6610f2; }
#comment ul li p.cName.show6:before { background: #e83e8c; }
#comment ul li p.cName.show7:before { background: #fd7e14; }
#comment ul li p.cName.show8:before { background: #20c997; }
#comment ul li p.cName.show9:before { background: #354052; }
#comment ul li p.cName .text-clamp { height: 1.5em; font-size: 17px; }
#comment ul li p.cName font [itemprop="author"] { font-size: 1em; }
#comment ul li p.cName font[itemprop="datePublished"] { font-size: .9em; color: #918a8a; }
#comment ul li font.stars { margin-top: .8em; display: flex; justify-content: flex-end; align-items: center; }
#comment ul li font.stars *:not(i) { font-size: .9em; line-height: 1; color: #575757; }
#comment ul li font.stars b { font-weight: normal; vertical-align: middle; }
#comment ul li font.stars span[itemprop="bestRating"] { margin-right: 5px; }
#comment ul li font.stars i { font-size: .9em; }
#comment ul li a.photo { width: 150px; height: 150px; }

/* searchBtnBox */
#searchBtnBox { margin-top: 5px; float: left; width: 280px; }
#searchBtnBox h4 { position: relative; padding: 5px 0; background: #181818; text-align: center; font-size: 20px; color: #fff; }
#searchBtnBox h4:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 12px 12px 0 12px; border-color: #181818 transparent transparent transparent; content: ""; bottom: -12px; left: calc(50% - 12px); z-index: 2; }
#searchBtnBox .list p { position: relative; padding: 10px; background: #dcdbdb; border-bottom: 1px #141414 solid; font-size: 16px; color: #141414; z-index: 1; }
#searchBtnBox .list p a { position: absolute; color: #000; top: calc(50% - 14px); right: 10px; }
#searchBtnBox .list >div { overflow: hidden; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#searchBtnBox .list .current { display: none; }
#searchBtnBox .list >div a { padding: 10px 0; float: left; width: calc((100% - 1px) / 2); border-right: 1px #edecec solid; border-bottom: 1px #edecec solid; display: block; text-align: center; font-size: 16px; color: #141414; }
#searchBtnBox .list >div a:nth-child(2n) { border-right: 0; }
#searchBtnBox .list >div a.action , #searchBtnBox .list >div a:hover { background: #13448f; color: #fff; }

/* product2Box */
#product2Box { margin-top: 5px; float: right; width: calc(100% - 320px); }
#product2Box form { overflow: hidden; background: #181818; }
#product2Box form .list { margin: 10px; }
#product2Box form .list label { display: inline-block; font-size: 16px; color: #fff; vertical-align: middle; }
#product2Box form .list font { padding: 0 10px; background: #fff; display: inline-block; }
#product2Box form .list font input { width: 250px; }
#product2Box form .list font a { color: #000; }
#product2Box form .mb { display: none; }
#product2Box form .list select { position: relative; width: 100%; padding: 2px 28px 2px 10px; background: url(/images/01/icon-arrow.svg) no-repeat scroll right center transparent; background-position: calc(100% - 7px) 50%; background-size: 7px; background-color: #fff; border: 0; border-radius: 0; font-size: 16px; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
#product2Box ul { margin: 20px 0; }
#product2Box ul li { overflow: hidden; padding: 10px 15px; border-bottom: 1px #edecec solid; }

#product2Box ul li a.app_link { position: absolute; padding: .3rem .5rem; background: #ffc000; box-shadow: 0 2px 0 #bd9312; display: block; font-weight: bold; line-height: 1; font-size: .8rem; color: #13448f; }
#product2Box ul li a.app_link i { font-size: .1rem; }

#product2Box ul li >div { float: left; width: 190px; }
#product2Box ul li >div a.photo { margin-bottom: 0; }
#product2Box ul li >div a.photo img { height: 150px; }
#product2Box ul li .infoBox { padding: 0 30px; width: calc(100% - 380px); }
#product2Box ul li .infoBox h5 a { font-size: 18px; color: #000; }
#product2Box ul li .infoBox p { color: #4a4a4a; }
#product2Box ul li .infoBox p.stars { margin-bottom: 15px; }
#product2Box ul li .scoreBox { width: 120px; }
#product2Box ul li .scoreBox >div { margin-bottom: 10px; padding: 10px 0; border: 1px #000 solid; }
#product2Box ul li .scoreBox .noCom { padding: 10px 30px; background: #d8d8d8; border-color: #9a9494; text-align: center; font-size: 26px; color: #908b8b; }
#product2Box ul li .scoreBox >div p { text-align: center; }
#product2Box ul li .scoreBox >div p.score { margin-bottom: 20px; font-size: 20px; }
#product2Box ul li .scoreBox >div p b { color: #EF070B; }
#product2Box ul li .scoreBox >div p.score b { font-size: 35px; }

@media screen and (max-width: 1200px){
	#productBox ul li .bottomBox { position: relative; width: 100%; right: auto; bottom: auto; }
	#productBox ul li .bottomBox p.stars { display: block; }
	#productBox ul li .bottomBox a.more { margin-top: 5px; }
	#productDetail .box { padding: 15px; }
	#productDetail #InfoCommentBox .box { width: 270px; }
	#productDetail #InfoCommentBox #info { width: calc(100% - 371px); }
}
@media screen and (max-width: 910px){
	#productBox ul li , #productBox ul li:nth-child(2n) { margin: 10px; width: calc(100% - 42px); }
	#productDetail #InfoCommentBox .box , #productDetail #InfoCommentBox #info { width: calc(100% - 50px); }
	#InfoCommentBox #info ul li , #product2Box { width: 100%; }
	#searchBtnBox { display: none; }
	#product2Box form .mb , #product2Box form .list font { display: block; }
	#product2Box form .list font input { width: calc(100% - 19px); }
}
@media screen and (max-width: 700px){
	#productDetail #PhotoDetail >div , #productDetail #PhotoDetail >div:nth-child(2) { margin-left: 0; width: 100%; }
	#productDetail #PhotoDetail >div a.photo img { width: auto; }
	#productDetail #PhotoDetail >div a.more { display: none; }
	#PhotoDetail .bad .otherList { padding-right: 0; }
	#PhotoDetail .iconbad { top: 20px; right: -10px; bottom: auto; }
}
@media screen and (max-width: 680px){
	#product2Box ul li >div a.photo img { height: auto; }
	#product2Box ul li .infoBox { width: calc(100% - 260px); }
	#product2Box ul li .scoreBox { width: 100%; text-align: right; }
	#product2Box ul li .scoreBox >div { overflow: hidden; margin-bottom: 0; padding: 0; border: 0; display: inline-block; }
	#product2Box ul li .scoreBox .noCom { margin-right: 10px; padding: 0; background: none; font-size: 14px; }
	#product2Box ul li .scoreBox >div p { margin-top: 5px; margin-right: 10px; float: left; }
	#product2Box ul li .scoreBox >div p.score { margin-top: 0; margin-bottom: 0; font-size: 14px; }
	#product2Box ul li .scoreBox >div p.score b { font-size: 25px; }
	#product2Box ul li .scoreBox a.more { padding: 2px 15px; display: inline-block; }
}
@media screen and (max-width: 550px){
	#comment ul li { padding: .5em 0; }
	#comment ul li p.cName { padding-left: 45px; }
	#comment ul li p.cName:before { width: 35px; height: 35px; }
}
@media screen and (min-width: 481px){
	#productBox ul li >div a.photo img , #productDetail #PhotoDetail >div a.photo img , #product2Box ul li >div a.photo { height: 153px; }
}
@media screen and (max-width: 480px){
	#productBox ul li >div , #productBox ul li >div:nth-child(2) { margin-left: 0; width: 100%; }
	#productBox ul li >div:nth-child(1) { margin-bottom: 10px; }
	#productBox ul li >div:nth-child(1) a.more , #InfoCommentBox #info ul li:after { display: none; }
	#productBox ul li >div a.photo img { height: 115px; }
	#InfoCommentBox >div ul , #comment ul { margin: 15px 0; }
	#InfoCommentBox #info ul li label , #InfoCommentBox #info ul li font { width: calc(100% - 20px); display: block; }
	#InfoCommentBox #info ul li label { background: #f3f3f3; }
	#product2Box ul li >div:nth-child(1) , #product2Box ul li .infoBox { float: none; padding: 0; width: 100%; }
	#product2Box ul li .infoBox { margin: 10px 0; }
}