@charset "utf-8";

/* 공통 */

body {overflow: auto; overflow-x: hidden;}

#wrap {max-width: 420px;}
.idx {background: url(../images/donut/donuts2.jpg) no-repeat center/200%;}

header {height: 70px; background: rgba(251, 138, 255, 0.1);}
header ul li {float: left; padding: 0 5px 0 5px;}
header ul li:first-child img {width: 50px; height: 50px; padding: 5px;}
header ul li:nth-child(2), header ul li:last-child {float: right; position: relative;}
header ul li:nth-child(2) img, header ul li:last-child img {width: 45px; height: 45px; padding: 5px 2px 5px 0;}
header ul li span {position: absolute; top: 50px; right: 13%;}


/* index.html */
#content1 {clear: both; height: 500px; background: rgba(255,255,255,0.5); text-align: center; position: relative;}
#content1 .cont1_content {font-size: 50px; font-weight: 700; color: rgba(0,0,0,0.5); position: absolute; top: 170px; left: 75px;}

/*
#content2 {height: 150px; position: relative;}
#content2 .coupon {display: inline-block; width: 80%; height: 80%; background: rgba(255,255,240,0.5); border-radius: 20px; box-shadow: 0 1px 5px 0 rgba(219,167,216,0.5);
    position: absolute; top: 10%; left: 10%; text-align: center;}
#content2 .coupon img {display: inline-block; width: 50px; height: 50px; margin-top: 5px;}
*/

#content3 {background: ivory; height: 150px; text-align: center;}
#content3 .cont3_header {font-size: 15px; font-weight: 600; color: rgb(255, 0, 242, 0.5); letter-spacing: 15px; padding: 10px 0;}
#content3 div[class*="circle"] {display: inline-block; width: 20%; height: 56%; border-radius: 50%; margin: 5px;} 
#content3 div[class*="circle"]:nth-child(2) {background: url(../images/donut/donut2.png) no-repeat center center; background-size: cover;}
#content3 div[class*="circle"]:nth-child(3) {background: url(../images/donut/donut3.png) no-repeat center center; background-size: cover;}
#content3 div[class*="circle"]:nth-child(4) {background: url(../images/donut/donut4.png) no-repeat center center; background-size: cover;}
#content3 div[class*="circle"]:nth-child(5) {background: url(../images/donut/donut5.png) no-repeat center center; background-size: cover;}
#content3 div[class*="circle"] span {display: inline-block; padding-top: 40%;}


/* menu.html */
#menu {clear: both;}
#menu .menu-title {height: 70px; border-bottom: 1px solid #ccc;}
#menu .menu-title span {font-size: 40px; font-weight: 600; padding: 0 0 20px 20px;}

#menu .menu-list {padding: 20px; position: relative;}
#menu .menu-list ul li {width: 170px; height: 170px; border-radius: 50%; margin: 10px; background: url(../images/donut/donuts2.jpg) no-repeat center/450%;}
#menu .menu-list ul li:first-child {background-position: -105px -280px;}
#menu .menu-list ul li:nth-child(2) {background-position: -300px -275px;}
#menu .menu-list ul li:nth-child(3) {background-position: -490px -275px;}
#menu .menu-list ul li:nth-child(4) {background-position: -105px -490px;}
#menu .menu-list ul li:nth-child(5) {background-position: -300px -495px;}
#menu .menu-list ul li:nth-child(6) {background-position: -495px -495px;}
#menu .menu-list ul li:nth-child(7) {background-position: -300px -700px;}
#menu .menu-list ul li:nth-child(8) {background-position: -500px -705px;}
#menu .menu-list ul li {font-size: 20px;}
#menu .menu-list ul li:first-child a {position: absolute; top: 100px; left: 55%;}
#menu .menu-list ul li:nth-child(2) a {position: absolute; top: 280px; left: 55%;}
#menu .menu-list ul li:nth-child(3) a {position: absolute; top: 460px; left: 55%;}
#menu .menu-list ul li:nth-child(4) a {position: absolute; top: 640px; left: 55%;}
#menu .menu-list ul li:nth-child(5) a {position: absolute; top: 820px; left: 55%;}
#menu .menu-list ul li:nth-child(6) a {position: absolute; top: 1000px; left: 55%;}
#menu .menu-list ul li:nth-child(7) a {position: absolute; top: 1180px; left: 55%;}
#menu .menu-list ul li:nth-child(8) a {position: absolute; top: 1360px; left: 55%;}


/* sample.html */
#sample {clear: both;}
#sample div:not(.sample-header) {padding: 20px;}

#sample .sample-header {height: 350px; background: url(../images/donut/donuts2.jpg) -210px -615px/400%;}
#sample .sample-header img {width: 25px; height: 25px; opacity: 30%; margin: 10px; cursor: pointer;}

#sample .sample-content li {padding: 7px 0 7px 0;}
#sample .sample-content li:first-child {font-size: 20px; font-weight: 700;}
#sample .sample-content li:first-child span {color: #f00; font-size: 13px; font-weight: normal;}
#sample .sample-content li:first-child p {color: #ccc; font-size: 13px; font-weight: normal;}
#sample .sample-content li:nth-child(3) {font-size: 20px; font-weight: 700;}
#sample .sample-content li.inform {padding: 10px 0 0 0; font-size: 18px; font-weight: 600; border-top: 1px solid #ccc;}
#sample .sample-content li.inform p {font-size: 13px; font-weight: normal;}

#sample .sample-order {text-align: center;}
#sample .sample-order button {font-size: 15px; font-weight: 500; width: 330px; height: 40px; border-radius: 25px; cursor: pointer;}


/* cart.html */
#cart {clear: both;}
#cart .cart-title {height: 70px; border-bottom: 1px solid #ccc;}
#cart .cart-title span {font-size: 40px; font-weight: 600; padding: 0 0 20px 20px;}

#cart .cart-content .cart-cont1 {border-bottom: 1px solid #ccc;}
#cart .cart-content .cart-cont1 span {font-size: 20px; font-weight: 700; padding: 0 0 20px 20px;}

#cart .cart-content .cart-cont2 {font-size: 18px; font-weight: 500; padding: 20px; position: relative; height:400px;}
#cart .cart-content .cart-cont2 ul li {width: 170px; height: 170px; border-radius: 50%; margin: 10px; background: url(../images/donut/donuts2.jpg) no-repeat center/450%; 
	background-position: -105px -280px;}
#cart .cart-content .cart-cont2 ul li span.name {position: absolute; top: 80px; left: 55%;}
#cart .cart-content .cart-cont2 ul li span:not(.name) {font-size: 15px;}
#cart .cart-content .cart-cont2 ul li span.price {position: absolute; top: 120px; left: 55%;}
#cart .cart-content .cart-cont2 ul li span.quantity {position: absolute; top: 140px; left: 55%;}
#cart .cart-content .cart-cont2 ul li span input {width: 20px; border: none; border-bottom: 1px dashed #999;}
#cart .cart-content .cart-cont2 ul li span input:focus {outline: none; box-shadow: none;}

#cart .cart-content .cart-cont3 {position: relative; height: 100px;}
#cart .cart-content .cart-cont3 ul li {padding: 0 0 20px 20px;}
#cart .cart-content .cart-cont3 ul li span:first-child {font-size: 15px; position: absolute; top: 5px; left: 10%;}
#cart .cart-content .cart-cont3 ul li span:nth-child(2) {font-size: 20px; font-weight: 600; position: absolute; right: 10%;}
#cart .cart-content .cart-cont3 ul li button {font-size: 17px; font-weight: 500; position: absolute; top: 45px; left: 10%; width: 330px; height: 40px; border-radius: 25px; cursor: pointer;}


/* order.html */
#order {clear: both;}
#order .order-title {height: 70px; border-bottom: 1px solid #ccc;}
#order .order-title span {font-size: 40px; font-weight: 600; padding: 0 0 20px 20px;}

#order .order-content .order-cont1 {font-size: 18px; font-weight: 600; padding: 20px; height: 400px;}
/* #order .order-content .order-cont1 ul li {float: left;} */
#order .order-content .order-cont1 ul li img {width: 40px; height: 40px; margin: 5px 5px 5px 30px;}
#order .order-content .order-cont1 ul li ul.pay {position: relative;}
/* #order .order-content .order-cont1 ul li ul.pay li {position: relative;} */
#order .order-content .order-cont1 ul li ul.pay li span {font-size: 15px; color: #aaa; font-weight: 500;}
#order .order-content .order-cont1 ul li ul.pay li span.card {position: absolute; top: 15px; left: 25%;}
#order .order-content .order-cont1 ul li ul.pay li span.cash {position: absolute; top: 70px; left: 25%;}
#order .order-content .order-cont1 ul li ul.pay li span.paypay {position: absolute; top: 125px; left: 25%;}
#order .order-content .order-cont1 ul li ul li:last-child {border-bottom:1px solid rgba(100, 100, 111, 0.2); margin-bottom: 10px;}

#order .order-content .order-cont2 {font-size: 18px; font-weight: 600; position: relative; background-color: #eee; padding: 20px;}
#order .order-content .order-cont2 ul li {width: 70px; height: 70px; padding: 20px; border-radius: 50%; margin: 10px; background: url(../images/donut/donuts2.jpg) no-repeat center/450%;}
#order .order-content .order-cont2 ul li {background-position: -70px -180px;}
#order .order-content .order-cont2 ul li span:first-child {position: absolute; top: 100px; left: 38%; font-size: 13px;}
#order .order-content .order-cont2 ul li span:nth-child(2) {position: absolute; top: 100px; left: 70%; font-size: 15px;}

#order .order-content .order-cont3 {position: relative; height: 100px; margin-top: 10px;}
#order .order-content .order-cont3 ul li {font-size: 15px; font-weight: 600;}
#order .order-content .order-cont3 ul li span:first-child {position: absolute; top: 5px; left: 5%;}
#order .order-content .order-cont3 ul li span:nth-child(2) {position: absolute; top: 5px; right: 5%;}
#order .order-content .order-cont3 ul li:last-child {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
#order .order-content .order-cont3 ul li button {font-size: 15px; font-weight: 500; position: absolute; top: 45px; left: 10%; width: 330px; height: 40px; border-radius: 25px; cursor: pointer;}



footer {background-color: gray; height: 50px;}