@charset "utf-8";

/*-------------------------------------
	page
-------------------------------------*/

/* compose */
#compose h2.acd { margin: 0; padding: 0.8rem; border-bottom: 1px solid #333; cursor: pointer; transition: all ease 0.3s;}
#compose h2.acd:after {
	content: "";
	position: absolute;
	top: 0.8rem;
	right: 1rem;
	width: 2.4rem;
	height: 2.4rem;
	background: url("/greenpot/images/arrowD.svg") center no-repeat;
	background-size: contain;
	transition: all ease 0.5s;
}
#compose h2.acd:hover { background: rgba(1, 49, 97, 0.1);}
#compose h2.acd.open:after { transform: scale(1, -1);}
#compose h2.acd.none::after { display: none;}

#composeArea,
#composeItems { padding: 2rem; width: 100%;}

#composeArea header { padding: 0 0 2rem;}
#composeArea header h1 { margin: 0 0 2rem; width: 100%; line-height: 1; text-align: center;}
#composeArea header h1 a { display: block; margin: 0 auto 1rem; width: 20rem;}
#composeArea nav { width: 100%; text-align: center;}
#composeArea nav .btn { margin: 0 1rem;}

#composer { position: relative; text-align: center !important;}
#composer .composingImg { position: absolute;}

.controller .ctrlBtn { width: 3rem !important; height: 3rem !important;}
.controller .plus      { right:-3rem !important;}
.controller .minus     { right:-7rem !important;}
.controller .layerUp   { right:-16rem !important;}
.controller .layerDown { right:-20rem !important;}

#composerBg { text-align: center !important;}
#composerBgImage { max-height: 700px;}

#composerCtrl { padding: 2rem 0;}
#composerCtrl .btn { min-width: 0;}
#composerCtrl p { margin: 2rem 0 0; width: 50%; text-align: center;}
#composerCtrl p span { display: block; margin: 0 0 1.5rem; text-align: center;}
#composerCtrl p:not(.long) .btn { margin: 0 1rem; padding: 1.3rem 0; width: 6rem; line-height: 3.4rem;}
#composerCtrl p:not(.long) .btn img { margin: 0;}
#composerCtrl p.long { margin: 0 -2rem; width: calc(100% + 4rem);}
#composerCtrl p.long .btn { margin: 0 1% 3%; padding: 1.3rem 0; width: calc(48% - 2rem);}

#composeItems { border-top: 1px solid #333;}

#compposeSearch { margin: 2rem 0;}
#compposeSearch input { width: calc(100% - 13rem); vertical-align: middle;}
#compposeSearch .btn { margin: 0 0 0 2rem; min-width: 0; width: 11rem;}

#composeKeyword { margin: 0 0 2rem;}
#composeKeyword ul { margin: 1rem -1rem 0;}
#composeKeyword li {
	margin: 1rem 1rem 0;
	padding: 0.6rem 1.5rem;
	font-size: 1.6rem;
	line-height: 1;
	border: 1px solid #000;
	border-radius: 2rem;
	cursor: pointer;
	transition: ease .3s;
}
#composeKeyword li:hover { opacity: .6;}

.composeCategory .selectWrap { margin: 1rem 0 0;}
.composeCategory .selectWrap:first-of-type { margin: 2rem 0 0;}
.composeCategory .selectWrap select { width: 100%;}

.composeFilter h3 { margin: 2rem 0 1rem;}
.composeFilter .price input { margin: 0 1rem; width: calc(50% - 3rem);}
.composeFilter .price input:first-child { margin-left: 0;}
.composeFilter .colors label { margin: 0 3rem 1rem 0; width: calc(50% - 3rem);}
.composeFilter .center { margin: 1rem 0 0;}

#composeProposed .productSelect { margin: 2rem 0;}
#composeProposed.itemLists { padding: 2rem 0;}
#composeProposed h2 { margin: 0; padding: 0.8rem; border-bottom: 1px solid #333;}
#composeProposed .fitImg { margin: 0 0 1rem;}

.pager { padding: 2rem 0; text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333;}
.pager li { display: inline-block; margin: 0 0.3rem; vertical-align: middle;}
.pager a { display: block; padding: 0 0.5rem; min-width: 3rem; line-height: 3rem; text-align: center ;text-decoration: none; border-radius: 5rem;}
.pager a.current { color: #FFF; background: #333;}
.pager a:hover { color: #013161; background: rgba(1, 49, 97, 0.1);}
.pager a.disabled { pointer-events: none;}

#composeFixed { position: fixed; bottom: 0; left: 0; padding: 2rem 2rem 0; width: 100%; background: rgba(191, 205, 219, 0.8); z-index: 10;}
#composeFixed p,
#composeFixed .right { margin: 0 0 2rem; width: 100%; font-size: 1.6rem;}
#composeFixed strong { font-size: 1.8rem;}
#composeFixed strong strong { font-size: 2rem;}
#composeFixed .right p { margin: 0 -1rem; width: calc(100% + 2rem);}
#composeFixed .btn { margin: 0 1rem; width: calc(33.33% - 2rem); min-width: 0; }

.itemDetail .fitImg { position: relative; margin: 0 0 2rem; padding: 3%;}
.itemDetail .fitImg img { max-width: 80%; }
.itemDetail .itemText { margin: 0; font-size: 1.6rem; line-height: 1.6; text-align: left;}

.upImg { position: relative; padding: 12rem 2rem 7rem; border: 2px dashed rgba(191, 205, 219, 0.8);}
.upImg::after {
	content: "";
	position: absolute;
	top: 4rem;
	left: calc(50% - 4rem);
	width: 8rem;
	height: 8rem;
	background: url("/greenpot/images/icon-image.svg") center no-repeat;
	background-size: contain;
	opacity: .2;
}
.upImg p { margin: 3rem 0; font-size: 1.6rem; text-align: center;}

#templates.itemLists { padding: 0;}
#templates h2 { margin: 0; padding: 0.8rem; border-bottom: 1px solid #333;}
#templates .square .fitImg:after { display: none;}
#templates .square .fitImg img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#templates .square p { margin: 1rem 0 0; font-size: 1.6rem; line-height: 1.2;}

.tagList h3 { margin: 0 0 1.5rem; padding: 0.8rem; border-bottom: 1px solid #333;}
.tagList li { margin: 0 1rem 1rem 0; font-size: 1.6rem;}

.modalBlock.commentForm { max-width: 80rem;}
.commentForm strong { display: block; margin: 0 0 0.5rem;}

/* print */
#compose .printBtn { padding: 2rem 0 0; text-align: center; border-top: 1px solid #333;}

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

/* base */

/* common */

/* page */
}

@media screen and (min-width: 768px){

/* base */

/* common */
.itemLists ul li { width: calc(25% - 2rem);}

footer { padding: 2rem 2rem 9rem;}

.modalBlock { width: 70%;}
.modalBlock.itemDetail { width: min(60rem, 80%);}

.itemDetail .fitImg { margin: 0 2rem 0 0; width: calc(50% - 2rem);}
.itemDetail .fitImg img { max-width: 100%;}
.itemDetail .itemText { padding: 0 2rem 0 0; width: 50%;}

/* page */
#composeArea header h1 { font-size: 3rem;}
#composeArea header h1 a { display: inline-block; margin: 0 2rem 0 0; vertical-align: middle;}

#composerCtrl { align-items: flex-end; justify-content: flex-end;}
#composerCtrl p { margin: 0 0 0 2rem; width: auto;}
#composerCtrl p.long { flex-grow: 1; margin: 0; width: 100%; text-align: left;}
#composerCtrl p.long .btn { margin: 0 2rem 2rem 0; padding: 1.3rem 0; width: auto; min-width: calc(25% - 2rem); line-height: 3.4rem;}
#composerCtrl p.long .btn:last-child { margin-right: 0;}

#composeFixed { align-items: center; padding: 2rem; height: 8.8rem;}
#composeFixed p { flex-grow: 1; margin: 0 2rem 0 0; width: auto; text-align: left;}
#composeFixed strong { font-size: 1.8rem;}
#composeFixed strong strong { font-size: 2rem;}
#composeFixed .right,
#composeFixed .right p { margin: 0; width: auto; font-size: 1.8rem;}
#composeFixed strong { font-size: 2rem;}
#composeFixed strong strong { font-size: 2.2rem;}
#composeFixed .btn { margin: 0 0 0 2rem; width: auto; min-width: 15rem; }
}

@media print, screen and (min-width:1024px){

/*-------------------------------------
	base
-------------------------------------*/


/*-------------------------------------
	common
-------------------------------------*/

.pc { display: block !important; }
.sp { display: none !important; }

.rightBtn { margin: -9.5rem 0 4.5rem;}

footer { padding: 2rem 0 0;}

.modalBlock { padding: 4rem;}
.modalBlock.itemDetail { width: min(80rem, 80%);}

/*-------------------------------------
	page
-------------------------------------*/

/* compose */
#composeArea,
#composeItems { width: 70%; height: calc(100vh - 8.8rem); overflow: auto;}

.upImg { padding: 20rem 4rem 14rem;}
.upImg::after { left: calc(50% - 8rem); width: 16rem; height: 16rem;}
.upImg p { margin: 4rem 0; font-size: 2rem;}

.modalBlock.tagList { max-width: 100rem;}
.tagList h3 { margin: 0 0 2rem; padding: 1rem; font-size: 2.6rem;}
.tagList li { margin: 0 2rem 2rem 0;}

.modalBlock.commentForm { max-width: 80rem;}
.commentForm p { margin: 0 0 3rem;}
.commentForm strong { margin: 0 0 1rem;}

#composeItems { width: 30%; border: none; border-left: 1px solid #333;}
#composeItems .itemLists ul li { margin: 2rem 1rem 0; width: calc(50% - 2rem);}
#composeItems .itemLists ~ .right { margin: 0 0 2rem;}

.pager li { margin: 0 0.8rem;}
.pager a { width: 5rem; line-height: 5rem; font-size: 1.8rem;}
.pager.bottom { padding: 2rem 0 0;}

/* print */
#compose.printPreview { display: block;}
#compose.printPreview #composeArea,
#compose.printPreview #composeItems { width: 100%; height: auto;}
}

@media print, screen and (min-width:1200px){

/* base */
h1, h2, h3, h4, h5, h6 { margin: 0 auto 4rem; font-size: 3rem;}

th,
td { display: table-cell;}

/* form */
.errorMsg { margin: 0 0 4rem; padding: 2rem; font-size: 1.8rem;}

.btn { padding: 2rem 3rem 1.8rem; min-width: 22rem; font-size: 1.9rem;}

.btn .icon { top: -0.2rem; margin: 0 0 0 0.8rem; width: 1.6rem; height:1.6rem;}

.btn.small { padding: 1.4rem 2rem 1.2rem; min-width: 14rem; font-size: 1.6rem;}
.btn.small .icon { width: 1.4rem; height: 1.4rem;}

.btn.large { padding: 3rem 5rem 2.8rem; font-size: 2rem;}

/* common */
.itemLists ul { margin: 0 -1.5rem;}
.itemLists ul li { margin: 3rem 1.5rem 0; width: calc(20% - 3rem);}
.itemLists .ctrlBtn { bottom: 1.5rem; right: 1.5rem;}
.itemLists .ctrlBtn:nth-last-of-type(2) { right: 8rem;}
.itemLists .ctrlBtn:nth-last-of-type(3) { right: 14.5rem;}

footer #copy { font-size: 1.6rem; text-align: left;}

/* page */
#compose h2.acd { padding: 1rem;}
#compose h2.acd::after { top: 1.6rem;}

#composeArea,
#composeItems { padding: 4rem; width: calc(100% - 60rem); height: calc(100vh - 12.4rem);}
#composeItems { width: 60rem;}

#composeArea header { padding: 0 0 4rem; align-items: center;}
#composeArea header h1 { flex-grow: 1; margin: 0 2rem 0 0; width: auto; font-size: 4rem; text-align: left;}
#composeArea nav { width: auto; text-align: right;}
#composeArea nav .btn { margin: 0 0 0 2rem;}

#composerCtrl p.long .btn { padding: 2rem 2rem 1.8rem;}
#composerCtrl p:not(.long) .btn { padding: 2rem 0 1.8rem; width: 7.2rem;}

#compposeSearch { margin: 0 0 4rem;}
#compposeSearch input { width: calc(100% - 16rem);}
#compposeSearch .btn { padding: 1.3rem 2rem 1.1rem; width: 14rem;}

#composeItems h2.acd { font-size: 2.6rem;}
#composeItems h2.acd:after { top: 1.2rem;}

.composeCategory .selectWrap { margin: 2rem 0 0;}
.composeFilter h3  { font-size: 2rem;}
#composeProposed h2 { padding: 1rem; font-size: 2.6rem;}

#composeFixed { padding: 3rem 4rem; height: 12.4rem;}
#composeFixed .right p { font-size: 2rem;}
#composeFixed strong { font-size: 2.2rem;}
#composeFixed strong strong { font-size: 2.6rem;}
#composeFixed .btn { min-width: 22rem;}

#compose.printPreview #composeArea header h1 { text-align: center;}
}

@media screen and (min-width:1650px){

#composerCtrl p.long { width: auto;}
#composerCtrl p.long .btn { margin-bottom: 0; min-width: 0;}

#compose.printPreview .itemLists ul li { width: calc(16.66% - 3rem);}
}

@media print {

#compose.printPreview .itemLists ul li { width: calc(25% - 3rem);}
}