/******************************************************************************************************************************** * 쿠폰 ********************************************************************************************************************************/ .body-contents-wp .cupon-wp { clear: both; position: relative; margin: 20px 0 40px 0; } .cupon-img-wp { clear: both; position: relative; height: 200px; margin: -25px 0 50px 0; padding: 35px 440px 0 0; font-size: 110%; color: #444; line-height: 1.6em; background: url(../../images/coupon_backimg.png) no-repeat right bottom; overflow: hidden; } .cupon-img-wp .stit { display: block; margin: 0 0 14px 0; font-size: 230%; color: #333; letter-spacing: -3px; line-height: 1.2em; } .cupon-wp .coupon-int { clear: both; position: relative; height: 116px; margin: 0 0 12px 0; padding: 24px 0 0 0; text-align: center; border: 1px solid #6d9ad0; border-bottom-color: #4980c2; border-radius: 3px; background: #f4f7fa; } .cupon-wp .coupon-int input.int-1 { display: inline-block; width: 202px; height: 66px; margin: 0 0 6px 0; padding: 0px 0 0 0; font-size: 38px !important; text-align: center; border-color: #ccc; border-radius: 0; background: #fff; } .cupon-wp .coupon-int .cp-slash { display: inline-block; width: 34px; line-height: 66px; font-weight: 100; font-size: 20px !important; } .cupon-wp .coupon-int .btn { display: inline-block; width: 134px; height: 66px; margin: 0 0 0 20px; padding: 0 0 2px 0; font-size: 17px; color: #fff; font-weight: bold; border: 1px solid #1f4f8d; border-radius: 3px; background: #235aa0; transition: all 0.3s; cursor: pointer; vertical-align: top; } .cupon-wp .coupon-int .btn:hover { border-color: #1c65b7; background: #1e6dc6; } .cupon-wp .coupon-guide { margin: 0 3px; margin-top: 38px; } .cupon-wp .coupon-guide li { margin: 0 0 2px 0; padding: 0 0 0 9px; font-size: 14px; color: #777; line-height: 150%; background: url(../../images/ic_gray.gif) no-repeat 0 7px; } .cupon-wp .coupon-guide li .clr-red2 { color: #d70000; } .cupon-wp .coupon-guide li strong { font-weight: 700; } .cupon-wp .coupon-flow { margin: 38px 0px 0 0; overflow: hidden; } .cupon-wp .coupon-flow li { display: inline-block; margin-right: 14px; font-size: 12px; color: #333; line-height: 140%; } .cupon-wp .coupon-flow li .box { display: block; position: relative; width: 210px; height: 140px; padding: 75px 40px 10px 40px; border: 1px solid #d7d7d7; border-radius: 5px; background-color: #f3f3f3; background-repeat: no-repeat; background-position-x: 50%; overflow: hidden; } .cupon-wp .coupon-flow li.f1 .box { background-image: url(../../images/modal_coupon_f1.png); background-position-y: 20px; } .cupon-wp .coupon-flow li.f2 .box { background-image: url(../../images/modal_coupon_f2.png); background-position-y: 25px; } .cupon-wp .coupon-flow li.f3 .box { background-image: url(../../images/modal_coupon_f3.png); background-position-y: 25px; } .cupon-wp .coupon-flow li.f4 .box { background-image: url(../../images/modal_coupon_f4.png); background-position-y: 25px; } .cupon-wp .coupon-flow li .box .num { position: absolute; top: 2px; left: 0px; width: 20px; height: 20px; font-size: 13px; color: #fff; font-weight: bold; text-align: center; z-index: 2; } .cupon-wp .coupon-flow li .box .ribbon { content: ""; display: block; position: absolute; top: -0px; left: -25px; width: 60px; height: 25px; padding: 4px 0 0 0; font-size: 11px; color: #fff; line-height: 100%; text-align: center; background: #235aa0; transform: rotate(-45deg); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2); z-index: 1; } .cupon-wp .coupon-flow li .box u { color: #235aa0; font-weight: bold; text-decoration: none; }