@charset "UTF-8";


/*
    ****************************** 공통 컨텐츠 ******************************
*/

/*주문 스텝*/
.orderStep {display:flex; justify-content: center; align-items: center; margin-bottom:50px;}
.orderStep .step {text-align:center; font-family: 'PretendardR';}
.orderStep .step .stepText {font-size:15px; color:#808080; margin-bottom:5px;}
.orderStep .step .stepTitle {font-size:30px; color:#1a1a1a;}
.orderStep .step.on .stepTitle {color:#ff1a6c; font-family: 'PretendardM';}
.orderStep .arrow {font-size:18px; color:#808080; margin:0 40px;}

/*물음표 툴팁*/
.questionTooltip {display:inline-block; position:relative;}
.questionTooltip .questionMark {display:inline-block; width:15px; vertical-align:-2px;}
.questionTooltip .tooltip {
    display:none;
    position: absolute;
    width: 150px;
    font-size: 12px;
    color: #1a1a1a;
    font-family: 'PretendardL';
    line-height:1.2;
    padding: 7px;
    border:solid 1px #808080;
    box-sizing: border-box;
    background-color: #ffffff;
}
.questionTooltip .tooltip .textBold {font-size:14px; font-family: 'PretendardM';}
.questionTooltip:hover .tooltip {display:block;}
.questionTooltip.right .tooltip {top:50%; transform: translateY(-50%); right:-160px;}
/*.questionTooltip.right .tooltip::after {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:-10px;
    content: '';
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid rgba(0,0,0,0.9);
    border-bottom: 5px solid transparent;
}*/
.questionTooltip.left .tooltip {top:50%; transform: translateY(-50%); left:-160px;}
/*.questionTooltip.left .tooltip::after {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:150px;
    content: '';
    border-top: 5px solid transparent;
    border-left: 5px solid rgba(0,0,0,0.9);
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
}*/
.questionTooltip.top .tooltip {top:-10px; left:50%; transform: translateX(-50%) translateY(-100%);}
/*.questionTooltip.top .tooltip::after {
    position:absolute;
    bottom:-10px;
    transform: translateX(-50%);
    left:50%;
    content: '';
    border-top: 5px solid rgba(0,0,0,0.9);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
}*/
.questionTooltip.bottom .tooltip {bottom:-10px; left:50%; transform: translateX(-50%) translateY(100%);}
/*.questionTooltip.bottom .tooltip::after {
    position:absolute;
    top:-10px;
    transform: translateX(-50%);
    left:50%;
    content: '';
    border-top: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0,0,0,0.9);
}*/


/*장바구니 리스트*/
.cartList {display:flex; flex-direction:column; border-top:solid 2px #000000; border-bottom:solid 2px #000000; margin-bottom:30px;}
.cartList:last-child {margin-bottom:0;}
.cartList .photoArea {display:flex; justify-content:space-between; align-items:center; padding:30px; box-sizing: border-box; border-bottom:solid 1px #cccccc;}
.cartList .photoArea .mainImage {width:280px; border:solid 1px #cccccc; box-sizing:border-box; background-repeat: no-repeat; background-position: center; background-size:contain;}
.cartList .photoArea .mainImage img {width:100%;}
.cartList .photoArea .thumbCell {width:700px;}
.cartList .photoArea .thumbCell .gridWrapper {overflow:hidden;}
.cartList .photoArea .thumbCell .grid {display:flex; flex-wrap:wrap; padding:1px 0 0 1px; margin:-1px}
.cartList .photoArea .thumbCell .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 5);
    border:0 solid transparent;
    border-width:0 1px 1px 0;
}

.cartList .photoArea .thumbCell .photoCell {border:solid 1px #cccccc; box-sizing:border-box; background-repeat: no-repeat; background-position: center; background-size:contain;}
.cartList .photoArea .thumbCell .photoCell img {width:100%;}
.cartList .photoArea .delCell i {font-size:24px; cursor:pointer;}
.cartList .priceArea {display:flex; justify-content:space-between; align-items:center; padding-top:20px; padding-bottom:20px;}
.cartList .priceArea .titleCell {width:500px; font-size:20px; color:#000000; font-family: 'PretendardM'; text-align:center; border-right:solid 1px #808080;}
.cartList .priceArea .titleCell span.groupCode {color:#ffa5aa;}
.cartList .priceArea .useType label{font-size:19px; color:#000000; font-family: 'PretendardL';}
.cartList .priceArea .useType > div:nth-of-type(1) {margin-bottom:5px;}
.cartList .priceArea .priceCell {width:400px; font-size:40px; font-family: 'PretendardB'; text-align:center;}
.cartList .priceArea .priceCell span {font-size:22px; font-family: 'PretendardL';}


/*하단 버튼 wrap*/
.orderButtons {width:600px; margin:0 auto; margin-top:60px;}

.bottomButtonWrap {width:600px; margin:0 auto; margin-top:60px;}


/*테이블 스타일*/
.orderTableStyle {width:100%; font-size:18px; color:#000000; font-family: 'PretendardL'; border-collapse:collapse; border-spacing:0; border-top:solid 2px #000000; border-bottom:solid 2px #000000;}
.orderTableStyle th {width:200px; font-weight:normal; text-align:left; padding:20px 20px; border-bottom:solid 1px #cccccc;}
.orderTableStyle td {padding:20px 20px; border-bottom:solid 1px #cccccc;}
.orderTableStyle label {font-size:18px !important;}
.orderTableStyle .textBold {font-family: 'PretendardM';}
.orderTableStyle .colorText {color:#ffa5aa;}







/*
    ****************************** 서브페이지 ******************************
*/

/* 약관페이지 */
#termsPage .termsText {max-width:800px; margin:0 auto; line-height:25px; font-size:14px;}

/*라이선스 규정*/
#license { max-width: 1660px;}
#license .licenseInfoList {list-style: none; padding-left:0; margin-bottom:30px;}
#license .licenseInfoList li {display:flex; align-items: center; font-size:17px; line-height:1.5; margin-bottom:10px; font-family: 'PretendardL'; }
#license .licenseInfoList li:last-child {margin-bottom:0;}
#license .licenseInfoList li .bullet {width:20px; /*font-size:20px;*/}
#license .licenseInfoList li .content {flex:1;}

#license .noticeText {font-size:15px; color: #ed3737; margin-bottom:20px;}

#license .tableTitle {font-size:25px; font-family: 'PretendardL';; margin-bottom:20px;}
#license .licenseInfoTable {width:100%; border-collapse:collapse; border-spacing: 0;}
#license .licenseInfoTable th {font-size:17px; font-weight:normal; font-family: 'PretendardM'; padding:10px; border:solid 1px #030303; box-sizing: border-box; background-color:#f2f2f2;}
#license .licenseInfoTable th .smallText {font-size:13px;}
#license .licenseInfoTable td {font-size:15px; text-align:left; line-height:1.5; font-family: 'PretendardL'; padding:10px 30px; border:solid 1px #030303; box-sizing: border-box;}
#license .licenseInfoTable td.center { text-align: center;}
#license .licenseInfoTable .mainTh {width:185px;}
#license .licenseInfoTable .subTh {width:140px; text-align: center;}
#license .licenseInfoTable ul { margin-left: 0; padding-left: 0; margin-top: 0;}

#license .infoText{ font-size: 20px; color: #1a1a1a; font-family: 'PretendardM'; margin-bottom: 10px;}


/*가격표*/
#pricePage.table_wrap{width: 100%;position: relative}
#pricePage .studio, #pricePage .selfie{width: 1280px;margin: 0 auto;position: relative;}
#pricePage .studio_txt{ font-family: 'PretendardM';font-size: 25px;margin-bottom:30px }
#pricePage .studio{margin-bottom: 80px}

#pricePage .priceTable {width:100%; border-collapse:collapse; border-spacing: 0;}
#pricePage .priceTable thead{background-color:#ffedee;}

#pricePage .priceTable th {font-size:17px; font-weight:normal; font-family: 'PretendardM'; padding:10px 10px; border:solid 1px #030303; box-sizing: border-box;}
#pricePage .priceTable td {font-size:25px; text-align:center; line-height:1.5; padding:20px 10px; border:solid 1px #030303; box-sizing: border-box;color: #ffa4aa}


#pricePage .priceTable_m {width:100%; border-collapse:collapse; border-spacing: 0;display: none}
#pricePage .priceTable_m th {font-size:17px; font-weight:normal; font-family: 'PretendardM'; padding:20px 10px; border:solid 1px #030303; box-sizing: border-box;background-color:#ffedee;}
#pricePage .priceTable_m td {font-size:25px; text-align:center; line-height:1.5; padding:20px 10px; border:solid 1px #030303; box-sizing: border-box;color: #ffa4aa}
#pricePage .priceTable_m .bg_none{background-color: #fff}


/*장바구니*/
#cart .cartListArea {margin-bottom:30px;}

#cart .paymentInfoArea {display:flex; align-items: center; padding:20px 0; border-top:solid 2px #000000; border-bottom:solid 2px #000000; margin-bottom:30px;}
#cart .paymentInfoArea .title {width:50%; font-size:22px; color:#000000; font-family: 'PretendardL'; text-align:center; line-height:1.2;}
#cart .paymentInfoArea .title span.textBold {font-size:33px; font-family: 'PretendardM';}
#cart .paymentInfoArea .price {width:50%; font-size:22px; color:#000000; font-family: 'PretendardB'; text-align:center;}
#cart .paymentInfoArea .price span {font-size:40px; color:#ffa5aa;}


/*주문폼*/
#orderForm .orderListArea {margin-bottom:60px;}
#orderForm .orderInfoTable {width:100%; margin-bottom:50px; font-size:18px; font-family: 'PretendardL'; border-collapse: collapse; border-spacing:0; border-top:solid 2px #000000; border-bottom:solid 2px #000000;}
#orderForm .orderInfoTable th {width:200px; padding:10px 20px; font-weight:normal; text-align:left; border-bottom:solid 1px #cccccc;}
#orderForm .orderInfoTable td {padding:10px 20px; border-bottom:solid 1px #cccccc;}
#orderForm .paymentWay {border-spacing:0; border-bottom:solid 2px #000000; margin-top:10px; margin-bottom:50px;}
#orderForm .paymentWay > table {width:100%; font-size:18px; font-family: 'PretendardL'; border-collapse: collapse; border-spacing:0; border-top:solid 2px #000000;}
#orderForm .paymentWay > table th {width:200px; padding:20px 20px; font-weight:normal; text-align:left; border-bottom:solid 1px #cccccc;}
#orderForm .paymentWay > table td {padding:20px 20px; border-bottom:solid 1px #cccccc;}
#orderForm .paymentWay > table .paymentWayText {font-size:18px; font-family: 'PretendardM'; color:#000000;}
#orderForm .paymentWay > table .paymentWayText .colorText {color:#ffa5aa;}
#orderForm .paymentWay > table .paymentWayText .payMethodGuide {margin-bottom:10px;}
#orderForm .paymentWay > table .payMethodButtons {display:flex; justify-content: flex-start; align-items: center;}
#orderForm .paymentWay > table .payMethodButtons > div {margin-right:40px;}
#orderForm .paymentWay > table .payMethodButtons > div label {vertical-align:middle; font-size:18px;}
#orderForm .paymentWay > table .payMethodButtons > div input[type=radio] {vertical-align:middle;}
#orderForm .paymentWay > table .taxBillCell {display:flex; justify-content: space-between; align-items: center;}
#orderForm .paymentWay > table .taxBillCell > div label {font-size:18px;}
#orderForm .paymentWay .paymentInfoArea {display:flex; align-items: center; padding:20px 0;}
#orderForm .paymentWay .paymentInfoArea .title {width:50%; color:#000000; font-size:25px; font-family: 'PretendardM'; text-align:center; line-height:1.2;}
#orderForm .paymentWay .paymentInfoArea .price {width:50%; font-size:22px; color:#000000; font-family: 'PretendardL'; text-align:center;}
#orderForm .paymentWay .paymentInfoArea .price span {font-size:40px; color:#ff1a6c; font-family: 'PretendardB';}

#orderForm .taxBillInfo {display:none; margin-bottom:30px;}
#orderForm .taxBillInfo .loadRecentTaxBillButton {float:right;}
#orderForm .taxBillInfo .resetTaxBillButton {float:right;}
#orderForm .taxBillInfo > table {width:100%; font-size:18px; font-family: 'PretendardL'; border-collapse: collapse; border-spacing:0; border-top:solid 2px #000000; border-bottom:solid 2px #000000;}
#orderForm .taxBillInfo > table th {width:200px; padding:10px 20px; font-weight:normal; text-align:left; border-bottom:solid 1px #cccccc;}
#orderForm .taxBillInfo > table td {padding:10px 20px; border-bottom:solid 1px #cccccc;}

#orderForm .cashBillInfo {display:none; margin-bottom:30px;}
#orderForm .cashBillInfo .radioCell label {margin-right:20px;}
#orderForm .cashBillInfo .businessNum {display:none;}

#orderForm .privateInfoAgree {font-size:18px; color:#000000; font-family: 'PretendardM'; text-align:center; padding:15px 0; margin-bottom:30px;}
.termsModal .termsText {height:50vh; overflow-y:auto; font-size:14px; line-height:18px;}

/*주문제작*/
#customMade .pageTitle {margin-bottom: 40px;}
#customMade .pageTitle .title { margin-bottom: 50px;}
#customMade .pageTitle .title .sub { display: block; font-size: 25px; font-family: 'PretendardL'; color: #282828; margin-bottom: 10px;}
#customMade .pageTitle .title .sub span { font-family: 'PretendardB'; color: #ff1a6c;}
#customMade .pageTitle .title .fontT { font-family: 'PretendardT';}
#customMade .pageIntroText {font-size:30px; line-height:1.2; text-align:center; margin-bottom:100px;}
#customMade .pageIntroText .eng {font-family:Neothic;}
#customMade .pageIntroText .textBold {font-family: 'PretendardB';}
#customMade .pageIntroText .colorText {color:#ffa5aa;}

#customMade .customMadeContentTitle {margin-bottom:40px; padding-left: 95px; box-sizing: border-box; color: #282828;}
#customMade .customMadeContentTitle .titleArea {display:inline-block; font-size:40px; font-family: 'NotoSerifKRM'; margin-bottom: 30px;}

#customMade .customMadeContentTitle .titleCont { font-size: 30px; font-family: 'PretendardL'; padding-left: 70px; box-sizing: border-box;line-height: 1.4}
#customMade .customMadeContentTitle .titleCont .fontB {font-family: 'PretendardB'; }
#customMade .customMadeContentTitle .titleCont .cor { color: #ff1a6c;}
#customMade .customMadeContentTitle .titleCont .bold {font-family: 'PretendardB';}
#customMade .customMadeContentTitle .vBar {display:inline-block; width:1px; height:23px; margin:0 20px; background-color:#808080;}

#customMade .photoGridArea .gridWrapper {overflow:hidden;}
#customMade .photoGridArea .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
#customMade .photoGridArea .grid .gridCell {
    box-sizing:border-box;
    width:calc(100% / 2);
    border:0 solid transparent;
    border-width:0 10px 10px 0;
}
#customMade .photoGridArea .grid .gridCell .imgCell img {width:100%;}

#customMade .studioWrap {margin-bottom:40px; }

#customMade .mobileLine   { width: 100%; height: 1px; background-color: #ccc; margin: 0 auto 40px auto;}

#customMade .conceptWrap .imgCell img {width:100%;}
#customMade .modelWrap {padding-left:100px; padding-right:100px; margin-bottom:100px;}

#customMade .orderTableStyle textarea {height:100px;}
#customMade .orderTableStyle .addFileCell {display:flex; align-items: center;}
#customMade .orderTableStyle .addFileCell > input {flex:1;}
#customMade .orderTableStyle .addFileCell > label {width:100px; height:43px; line-height:41px;}


/*
    *** 회사소개
*/
#introduce {font-size:23px; font-family: 'PretendardL';; color:#1a1a1a; padding-bottom:0;}

#introduce .pageTitle {width:100%; max-width:1100px; margin:0 auto; margin-bottom:50px;}
#introduce .pageTitle .title { margin-bottom: 70px;}
#introduce .pageTitle .title .sizeS { font-family: 'PretendardL'; font-size: 30px; color: #cccccc;}
#introduce .pageTitle .title .fontT { font-family: 'PretendardT';}
#introduce .pageTitle .subText { font-family: 'NotoSerifKRL' !important; font-size: 35px; color: #3d3f3f; margin-top: 45px; margin-bottom: 20px;}
#introduce .pageTitle .subText span { font-family: 'NotoSerifKRSB';}
#introduce .nameText {color:#ffa5aa; font-family:neothic;}
#introduce .nameText.black {color:#1a1a1a;}
#introduce .smallThinText {font-size:20px; color:#1a1a1a; font-family: 'PretendardL';}
#introduce .boldText {font-family: 'PretendardM';}

#introduce .smallTitle {display:flex; align-items: center; font-size:23px; margin-bottom:35px;}
#introduce .smallTitle .title .num {font-size:30px; color:#ffa5aa; font-family:Neothic; margin-right:10px;}
#introduce .smallTitle .title .nameText {font-size:27px;}
#introduce .smallTitle .vBar {height:23px; width:1px; margin:0 25px; background-color:#808080;}
#introduce .smallTitle .tailText {font-family: 'PretendardB';}

#introduce .contentImg {font-size:0; text-align:center;}
#introduce .contentImg img.mobileImg {width:100%;}

#introduce .ippneIntro {text-align:center; line-height:1.4; padding-bottom:100px;}
#introduce .ippneIntro .headText {font-size:35px; font-family: 'PretendardM';}
#introduce .ippneIntro .hBar {width:30px; height:3px; margin:20px auto; background-color:#ffa5aa;}
#introduce .ippneIntro .footText {display:inline-block; font-size:30px; margin-top:30px; border-bottom:solid 1px #1a1a1a;}

#introduce .whatIs {padding-top:100px; padding-bottom:100px; background-color:#fafafa;}
#introduce .whatIs .titleArea {display:flex; justify-content: center; align-items: center; margin-bottom:70px;}
#introduce .whatIs .titleArea .titleCell {font-size:35px; font-family: 'PretendardM';}
#introduce .whatIs .titleArea .vBar {height:56px; width:1px; margin:0 30px; background-color:#b6b6b6;}
#introduce .whatIs .titleArea .bodyText {line-height:1.4;}
#introduce .whatIs .contentImg img {max-width:981px; width:100%;}

#introduce .ippneUsage {padding-top:100px; padding-bottom:100px;}
#introduce .ippneUsage .contentHWrap {max-width:980px;}
#introduce .ippneUsage .contentImg img {width:100%; max-width:980px;}
#introduce .ippneUsage .textArea {font-size:20px; text-align:center; line-height:1.4; margin-top:50px;}
#introduce .ippneUsage .textArea .mainText {font-size:23px; font-family: 'PretendardM';}
#introduce .ippneUsage .textArea .colorText1 {color:#ffa5aa;}
#introduce .ippneUsage .textArea .hBar {width:30px; height:3px; margin:30px auto; background-color:#ffa5aa;}

#introduce .ippneUsage .balloonText {margin-top:70px;}
#introduce .ippneUsage .balloonText .balloon {position:relative; display:inline-block; color:#ffffff; padding:8px 15px; border-radius:30px; margin-bottom:20px; background-color:#1a1a1a;}
#introduce .ippneUsage .balloonText .balloon .tip {position:absolute; bottom:-11px; left:80px;}
#introduce .ippneUsage .bracketText {display:flex; justify-content: center; align-items: center; margin-top:65px;}
#introduce .ippneUsage .bracketText > div {margin:0 30px;}

#introduce .ippneUsage.usage2 {background-color:#fafafa;}
#introduce .ippneUsage.usage4 {background-color:#fafafa;}

#introduce .visual { width: 100%;}
#introduce .visual img{ width: 100%;}

#introduce .contentHWrap { padding-bottom: 90px;}
#introduce .line { width: 100%; height: 1px; background-color: #cccccc;}
#introduce .introTitleArea,
#introduce .textArea { padding-left: 95px; box-sizing: border-box; line-height: 1.2}
#introduce .introTitleArea { margin-top: 100px; margin-bottom: 30px;}
#introduce .introTitleArea .introTitle{ font-size: 60px; font-family: 'PretendardB'; color: #282828; margin-bottom: 25px;}
#introduce .introTitleArea .introTitle span{  font-family: 'PretendardL';}
#introduce .introTitleArea .introText { font-size: 30px; color: #3d3f3f; font-family: 'PretendardL';}
#introduce .introTitleArea .introText .bold{ font-family: 'PretendardB';}

#introduce .textArea { padding-top: 60px; padding-bottom: 60px;}
#introduce .textArea:last-child { padding-bottom: 0;}
#introduce .textArea .titleArea { font-size: 40px; font-family: 'NotoSerifKRM'; color: #282828; margin-bottom: 25px;}
#introduce .textArea .titleArea .num { margin-right: 10px;}
#introduce .textArea .titleCont { font-size: 30px; font-family: 'PretendardL'; color: #282828; padding-left: 70px; box-sizing: border-box; line-height: 1.4}
#introduce .textArea .titleCont .bold { font-family: 'PretendardB';}
#introduce .textArea .titleCont .cor { color: #ff1a6c;}
#introduce .imgArea {margin-bottom:50px;}
    /*
        *** 로그인화면
    */
#loginForm .loginBox {margin:0 auto; width:100%; max-width:500px; box-sizing: border-box;}
#loginForm .loginBox .fluidInput {width:100%;}
#loginForm .loginBox .autoLogin {margin-top:15px;}
#loginForm .loginBox .findButtons {margin-top:15px;}
#loginForm .loginBox .findButtons a {display:inline-block; width:100%;}

/*
    *** 회원가입화면
*/
.myPageTab li a {font-size:18px; font-family: 'PretendardR';}
.myPageTab li a.navTitle {font-size:18px; font-family: 'PretendardR'; color:#000000;}
.myPageTab li.uk-active a {color:#1F83E9;}
#joinForm .joinBox {margin:0 auto; width:100%; max-width:600px; box-sizing: border-box;}
#joinForm .joinBox .devideLine {border-top:1px solid #e2e2e2;}
#joinForm .joinBox label.formLabel {font-size:16px; font-family: 'PretendardB'; color:#333333;}
#joinForm .joinBox .fluidInput {width:100%;}
#joinForm .joinBox .findButtons {margin-top:15px;}
#joinForm .joinBox .findButtons a {display:inline-block; width:100%;}
#joinForm .joinBox .terms {margin-top:50px;}
#joinForm .joinBox .terms .textContainer {margin-bottom:15px; line-height:1.5; font-size:14px;}
#joinForm .joinBox .terms .textContainer:last-child {margin-bottom:0;}
#joinForm .joinBox .terms #allCheck {font-size:15px;}
#joinForm .joinBox .terms .title {font-size:14px; font-family: 'PretendardM'; color:#000000;}
#joinForm .joinBox .terms .textList {list-style:disc; padding-left:0; margin-left:30px;}
#joinForm .joinBox .terms .textList.noBullet {list-style:none; margin-left:5px;}
#joinForm .joinBox .terms .textList li {font-size:14px; color:#666666; margin-bottom:5px;}
#joinForm .joinBox .terms .viewTerms {font-family: 'PretendardR';}
#joinForm .joinBox .terms .confirmButton {margin-top:30px;}
#joinForm .joinBox .terms .confirmButton button {width:100%;}

/*
 * 회원주문조회
 */
#orderList .orderListWrapper {width:100%; max-width:1000px; margin:0 auto;}
#orderList .orderListWrapper .uk-alert-primary li {margin-bottom:5px;}
#orderList .orderListCard {margin-bottom:50px;}
#orderList .orderListCard .productPrimaryImage {width:100px;}
#orderList .orderListCard .unitPhotoImage {height:30px; margin-right:5px;}
#orderList .orderListCard .uk-card-title {font-family: 'PretendardB';}
#orderList .orderListCard .uk-comment-body {border-top:1px solid #e2e2e2; padding-top:10px;}
#orderList .orderListCard .uk-comment-body p {display:inline-block; margin:0 !important;}
#orderList .orderListCard .uk-comment-body p.labels {float:left;}
#orderList .orderListCard .uk-comment-body p.downloadButton {float:right;}
#orderList .orderListCard span.cancelOrderButton {display:inline-block; float:right;}
#orderList .orderListCard .uk-card-footer {font-size:18px; font-family: 'PretendardB';}
#orderList .orderListCard .unitOrders {margin-top:15px; margin-bottom:15px;}

#orderComplete .completeOrderMessage {margin-top:30px;}
#orderComplete .completeOrderMessage ul {margin-left:15px;}
#orderComplete .completeOrderMessage li {line-height:1.5; font-size:16px;}

/*
    *** 마케팅 활용 예시
*/
#example {font-size:23px; font-family: 'PretendardL';;color:#1a1a1a; padding-bottom:0;}

#example .pageTitle {width:100%; max-width:1100px; margin:0 auto; margin-bottom:50px;}
#example .pageTitle .title { margin-bottom: 70px;}
#example .pageTitle .title .sizeS { font-family: 'PretendardL'; font-size: 30px; color: #cccccc;}
#example .pageTitle .title .fontT { font-family: 'PretendardT';}
#example .pageTitle .subText { font-family: 'NotoSerifKRL' !important; font-size: 35px; color: #3d3f3f; word-break: keep-all; margin-top: 45px; margin-bottom: 60px;}
#example .pageTitle .subText span { font-family: 'NotoSerifKRSB'; display: inline-block; margin-bottom: 30px;}

#example .visual { width: 100%;}
#example .visual img{ width: 100%;}

#example .contentHWrap { padding-bottom: 90px;}
#example .line { width: 100%; height: 1px; background-color: #cccccc;}
#example .introTitleArea {padding-left: 95px; box-sizing: border-box;}
#example .introTitleArea { margin-top: 100px; margin-bottom: 30px;}
#example .introTitleArea .introTitle{ font-size: 60px; font-family: 'PretendardSB'; color: #282828; margin-bottom: 25px;}
#example .introTitleArea .introTitle span{  font-family: 'PretendardL';}
#example .introTitleArea .introText { font-size: 30px; line-height: 1.2; color: #3d3f3f; font-family: 'PretendardL';}
#example .introTitleArea .introText .bold{ font-family: 'PretendardB';}

#example .textArea { padding-top: 60px; padding-bottom: 60px;box-sizing: border-box; line-height: 1.2}
#example .textArea:last-child { padding-bottom: 0;}
#example .textArea .titleArea { font-size: 40px; font-family: 'NotoSerifKRM'; color: #ff1a6c; padding-left: 95px; box-sizing: border-box; margin-bottom: 60px;}
#example .textArea .titleArea .num { margin-right: 10px;}
#example .textArea .titleCont { font-size: 30px; font-family: 'PretendardL'; color: #282828; padding-left: 165px; box-sizing: border-box; line-height: 1.4; margin-bottom: 60px;}
#example .textArea .titleCont .bold { font-family: 'PretendardSB';}
#example .textArea .titleCont .cor { color: #ff1a6c;}
#example .textArea .imgArea:not(:last-of-type) {margin-bottom:50px;}


/*
	****************************** 미디어 쿼리 ******************************
*/
@media(max-width:1280px) {
    /*
        ****************************** 공통 컨텐츠 ******************************
    */

    /*장바구니 리스트*/
    .cartList .photoArea .mainImage {width:230px; margin-left:10px;}
    .cartList .photoArea .thumbCell {width:550px; margin-left:10px;}
    .cartList .photoArea .delCell {margin-left:10px; cursor:pointer;}
    .cartList .priceArea {display:flex; justify-content:space-between; align-items:center; padding-top:20px; padding-bottom:20px;}
    .cartList .priceArea .titleCell {width:300px; font-size:22px; color:#000000; font-family: 'PretendardM'; text-align:center; border-right:solid 1px #808080;}
    .cartList .priceArea .useType label{font-size:19px; color:#000000; font-family: 'PretendardL';}
    .cartList .priceArea .useType > div:nth-of-type(1) {margin-bottom:5px;}
    .cartList .priceArea .priceCell {width:250px; font-size:40px; font-family: 'PretendardB'; text-align:center;}

    /*
     * 마이페이지
     */
    .myPageTab li a {font-size:16px;}
    .myPageTab li a.navTitle {display:none;}

    /*가격표*/
    #pricePage{padding-left:10px; padding-right:10px; box-sizing: border-box}
    #pricePage .studio, #pricePage .selfie{width: 100%;position: relative}

    /*
     * 회원주문조회
     */
    #orderList .orderListCard .uk-card-title {font-size:14px;}


    #customMade .customMadeContentTitle { padding-left: 30px;}
    #customMade .customMadeContentTitle .titleArea { font-size: 30px;}
    #customMade .customMadeContentTitle .titleCont { font-size: 25px; padding-left: 40px;}
}










@media(max-width:768px){
    #customMade .pageTitle { margin-bottom: 20px;}
    #customMade .pageTitle .title { font-size: 22px; margin-bottom: 20px;}
    #customMade .pageTitle .title .sub { font-size: 16px; margin-bottom: 10px;}





        /*
            ****************************** 공통 컨텐츠 ******************************
        */

    /*주문 스텝*/
    .orderStep {display:flex; justify-content: center; align-items: center; margin-bottom:30px;}
    .orderStep .step .stepText {font-size:12px; margin-bottom:5px;}
    .orderStep .step .stepTitle {font-size:16px; letter-spacing: -1px;}
    .orderStep .arrow {font-size:16px; margin:0 5px;}


    /*장바구니 리스트*/
    .cartList {display:flex; flex-direction:row; align-items: center; justify-content: space-between; margin-bottom:20px; padding:0 10px;}
    .cartList .photoArea {display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:0;}
    .cartList .photoArea .mainImage {width:100px; margin-left:5px;}
    .cartList .photoArea .thumbCell {display:none;}
    .cartList .photoArea .delCell {display:none;}
    .cartList .priceArea {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-left:10px; padding-top:10px; padding-bottom:10px;}
    .cartList .priceArea .titleCell {width:100%; font-size:14px; border-right:0; border-bottom:solid 1px #cccccc; padding-bottom:10px; margin-bottom:10px;}
    .cartList .priceArea .titleCell span.groupCode {color:#ffa5aa;}
    .cartList .priceArea .useType label{font-size:14px;}
    .cartList .priceArea .useType > div:nth-of-type(1) {margin-bottom:5px;}
    .cartList .priceArea .priceCell {width:auto; font-size:20px; margin-left:0px; margin-top:10px; text-align:center;}
    .cartList .priceArea .priceCell span {font-size:14px;}
    .cartList .delCell {font-size:20px; margin-left:10px;}


    /*하단 버튼 wrap*/
    .orderButtons {width:100%; margin:0 auto; margin-top:40px;}

    .bottomButtonWrap {width:100%; margin:0 auto; margin-top:40px;}


    /*테이블 스타일*/
    .orderTableStyle {font-size:14px;}
    .orderTableStyle th {width:85px !important; padding:15px 10px;}
    .orderTableStyle td {padding:15px 10px;}
    .orderTableStyle label {font-size:14px !important;}





    /*
        ****************************** 서브페이지 ******************************
    */

    /* 약관페이지 */
    #termsPage .termsText {width:100%; line-height:20px; font-size:14px;}

    /*라이선스 규정*/
    #license .licenseInfoList {margin-bottom:15px;}
    #license .licenseInfoList li {display:flex; font-size:14px; line-height:1.5; margin-bottom:10px;}
    #license .licenseInfoList li .bullet {width:15px; font-size:18px;}

    #license .noticeText {font-size:13px; margin-bottom:35px;}

    #license .tableTitle {font-size:16px; margin-bottom:15px;}
    #license .licenseInfoTable th {font-size:15px; padding:10px 5px;}
    #license .licenseInfoTable th .smallText {font-size:11px;}
    #license .licenseInfoTable td {font-size:14px; padding:10px 5px;}
    #license .licenseInfoTable .mainTh {width:90px;}
    #license .licenseInfoTable .subTh {width:70px; letter-spacing: -1px;}


    /*가격표*/
    #pricePage .priceTable{display: none}
    #pricePage .priceTable_m{display: block}
    #pricePage .studio_txt{font-size: 18px}

    #pricePage .priceTable_m th {font-size:14px; line-height:1.4; padding:15px 5px;}
    #pricePage .priceTable_m td {font-size:18px; line-height:1.5; padding:15px 5px;}


    /*장바구니*/
    #cart .cartListArea {margin-bottom:20px;}

    #cart .paymentInfoArea {display:flex; align-items: center; padding:15px 0; margin-bottom:20px;}
    #cart .paymentInfoArea .title {width:50%; font-size:14px; line-height:1.2;}
    #cart .paymentInfoArea .title span.textBold {font-size:17px;}
    #cart .paymentInfoArea .price {width:50%; font-size:14px;}
    #cart .paymentInfoArea .price span {font-size:22px;}


    /*주문폼*/
    #orderForm .orderListArea {margin-bottom:20px;}
    #orderForm .orderInfoTable {font-size:14px;}
    #orderForm .orderInfoTable th {width:85px; padding:10px;}
    #orderForm .orderInfoTable td {padding:10px 0;}

    #orderForm .paymentWay {margin-bottom:40px;}
    #orderForm .paymentWay > table {font-size:14px;}
    #orderForm .paymentWay > table th {width:100px; padding:10px;}
    #orderForm .paymentWay > table td {padding:10px;}
    #orderForm .paymentWay > table .paymentWayText {font-size:14px;}
    #orderForm .paymentWay > table .payMethodButtons label {font-size:14px !important;}
    #orderForm .paymentWay > table .taxBillCell {display:flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
    #orderForm .paymentWay > table .taxBillCell > div {margin-bottom:10px;}
    #orderForm .paymentWay > table .taxBillCell > div:last-child {margin-bottom:0;}
    #orderForm .paymentWay > table .taxBillCell > div label {font-size:14px;}
    #orderForm .paymentWay .paymentInfoArea {display:flex; align-items: center; padding:15px 0;}
    #orderForm .paymentWay .paymentInfoArea .title {font-size:16px;}
    #orderForm .paymentWay .paymentInfoArea .price {font-size:14px;}
    #orderForm .paymentWay .paymentInfoArea .price span {font-size:24px;}

    #orderForm .taxBillInfo > table {font-size:14px;}
    #orderForm .taxBillInfo > table th {width:100px; padding:10px;}
    #orderForm .taxBillInfo > table td {padding:10px;}

    #orderForm .privateInfoAgree {font-size:14px; padding:15px 0; margin-bottom:30px;}
    .termsModal .termsText {height:50vh; overflow-y:auto; font-size:12px; line-height:15px;}


    /*주문제작*/
    #customMade .pageIntroText {font-size:16px; line-height:1.2; margin-bottom:50px;}

    #customMade .customMadeContentTitle {margin-bottom:20px;}
    /*#customMade .customMadeContentTitle .titleCont {display:block; font-size:16px; margin-top:7px; line-height:1.2;}*/
    #customMade .customMadeContentTitle .num {font-size:18px; margin-right:0px;}
    #customMade .customMadeContentTitle .title {font-size:18px;}
    #customMade .customMadeContentTitle .vBar {display:none;}

    #customMade .customMadeContentTitle { padding-left: 27px;}
    #customMade .customMadeContentTitle .titleArea { font-size: 20px; margin-bottom: 10px;}
    #customMade .customMadeContentTitle .titleCont { font-size: 14px; padding-left: 32px;}


    #customMade .photoGridArea {padding-left:20px; padding-right:20px;}
    #customMade .photoGridArea .gridWrapper {overflow:hidden;}
    #customMade .photoGridArea .grid {display:flex; flex-wrap:wrap; padding:10px 0 0 10px; margin:-10px}
    #customMade .photoGridArea .grid .gridCell {
        box-sizing:border-box;
        width:calc(100% / 1);
        border:0 solid transparent;
        border-width:0 10px 10px 0;
    }

    #customMade .studioWrap {padding-left:0; padding-right:0; margin-bottom:40px;}
    #customMade .conceptWrap {padding-left:0; padding-right:0; margin-bottom:40px;}
    #customMade .modelWrap {padding-left:0; padding-right:0; margin-bottom:60px;}

    #customMade .orderTableStyle textarea {height:100px;}
    #customMade .orderTableStyle .addFileCell {display:flex; align-items: center;}
    #customMade .orderTableStyle .addFileCell > input {flex:1; width:auto; }
    #customMade .orderTableStyle .addFileCell > label {width:70px; height:38px; line-height:36px;}
    #customMade .mobileLine   { width: 90%; height: 1px; background-color: #ccc; margin: 0 auto 40px auto;}

    /*
        *** 회사소개
    */
    #introduce {font-size:14px; padding-bottom:0; letter-spacing: -1px;}

    #introduce .pageTitle {margin-bottom:35px;}
    #introduce .pageTitle .title { margin-bottom: 15px; font-size: 24px}
    #introduce .pageTitle .title .sizeS {  font-size: 15px; }

    #introduce .pageTitle .subText { font-size: 18px; color: #3d3f3f; margin-top: 15px; margin-bottom: 10px;}
    #introduce .pageTitle .introIcon img { width: 160px;}



    #introduce .smallTitle {display:flex; flex-direction: column; align-items: center; font-size:18px; margin-bottom:20px;}
    #introduce .smallTitle .title .num {font-size:22px; margin-right:10px;}
    #introduce .smallTitle .title .nameText {font-size:20px;}
    #introduce .smallTitle .vBar {height:2px; width:20px; margin:15px auto; background-color:#ffa5aa;}
    #introduce .smallTitle .tailText {font-family: 'PretendardB';}

    #introduce .smallThinText {font-size:14px;}

    #introduce .ippneIntro {text-align:center; line-height:1.4;}
    #introduce .ippneIntro .headText {font-size:18px;}
    #introduce .ippneIntro .hBar {width:25px; height:2px; margin:15px auto;}
    #introduce .ippneIntro .footText {font-size:16px; margin-top:20px;}

    #introduce .whatIs {padding-top:50px; padding-bottom:50px;}
    #introduce .whatIs .titleArea {display:flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom:30px;}
    #introduce .whatIs .titleArea .titleCell {font-size:18px; margin-bottom:10px;}
    #introduce .whatIs .titleArea .vBar {height:20px; width:1px; margin-bottom:10px;}
    #introduce .whatIs .titleArea .bodyText {text-align:center;}

    #introduce .ippneUsage {padding-top:50px; padding-bottom:50px;}
    #introduce .ippneUsage .textArea {font-size:14px; margin-top:20px;}
    #introduce .ippneUsage .textArea .mainText {font-size:18px; font-family: 'PretendardM';}
    #introduce .ippneUsage .textArea .hBar {width:25px; height:2px; margin:20px auto;}

    #introduce .ippneUsage .balloonText {margin-top:30px;}
    #introduce .ippneUsage .balloonText .balloon {padding:5px 10px; border-radius:30px; margin-bottom:20px;}
    #introduce .ippneUsage .balloonText .balloon .tip {position:absolute; bottom:-8px; left:60px; height:8px;}
    #introduce .ippneUsage .bracketText {display:flex; justify-content: center; align-items: center; margin-top:30px;}
    #introduce .ippneUsage .bracketText > div {margin:0 10px;}
    #introduce .ippneUsage .bracketText > img {height:50px;}

    #introduce.contentVWrap { padding-top: 0;}
    #introduce .contentHWrap { padding-bottom: 40px;}
    #introduce .visual { margin-bottom: 20px;}
    #introduce .introTitleArea,
    #introduce .textArea { padding-left: 15px; }
    #introduce .introTitleArea { margin-top: 20px; margin-bottom: 20px;}
    #introduce .introTitleArea .introTitle{ font-size: 20px;  margin-bottom: 10px;}

    #introduce .introTitleArea .introText { font-size: 14px; }

    #introduce .textArea { padding-top: 20px; padding-bottom: 20px;}
    #introduce .textArea:last-child { padding-bottom: 0;}
    #introduce .textArea .titleArea { font-size: 15px; margin-bottom: 10px;}
    #introduce .textArea .titleArea .num { margin-right: 5px;}
    #introduce .textArea .titleCont { font-size: 14px;  padding-left: 23px; }
    #introduce .imgArea {margin-bottom:20px;}



    /*
        *** 로그인화면
    */
    #loginForm .loginBox {padding-left:20px; padding-right:20px;}

    /*
	   *** 회원가입화면
    */
    #joinForm .joinBox {padding-left:20px; padding-right:20px;}
    #joinForm .joinBox label {font-size:14px;}
    #joinForm .joinBox .devideLine {display:none;}

    /*
     * 마이페이지
     */
    .myPageTab li a {font-size:16px;}
    .myPageTab li a.navTitle {display:none;}

    /*
     * 회원주문조회
     */
    #orderList .orderListCard .uk-card-title {font-size:14px;}
    #orderList .orderListCard .uk-card-body {padding:10px;}
    #orderList .orderListCard .uk-card-body .uk-comment {padding:10px;}

    #orderComplete .completeOrderMessage {margin-top:20px;}
    #orderComplete .completeOrderMessage ul {margin-left:0px;}
    #orderComplete .completeOrderMessage li {line-height:1.5; font-size:14px;}

    /*
        *** 마케팅 활용 예시
    */
    #example {font-size:14px; padding-bottom:0; letter-spacing: -1px;}

    #example .pageTitle {margin-bottom:35px;}
    #example .pageTitle .title { margin-bottom: 15px; font-size: 24px}
    #example .pageTitle .title .sizeS {  font-size: 15px; }

    #example .pageTitle .subText { font-size: 18px; color: #3d3f3f; margin-top: 15px; margin-bottom: 10px;}
    #example .pageTitle .subText span {margin-bottom: 10px;}
    #example .pageTitle .introIcon img { width: 160px;}



    #example .smallTitle {display:flex; flex-direction: column; align-items: center; font-size:18px; margin-bottom:20px;}
    #example .smallTitle .title .num {font-size:22px; margin-right:10px;}
    #example .smallTitle .title .nameText {font-size:20px;}
    #example .smallTitle .vBar {height:2px; width:20px; margin:15px auto; background-color:#ffa5aa;}
    #example .smallTitle .tailText {font-family: 'PretendardB';}

    #example .smallThinText {font-size:14px;}

    #example .ippneIntro {text-align:center; line-height:1.4;}
    #example .ippneIntro .headText {font-size:18px;}
    #example .ippneIntro .hBar {width:25px; height:2px; margin:15px auto;}
    #example .ippneIntro .footText {font-size:16px; margin-top:20px;}

    #example .whatIs {padding-top:50px; padding-bottom:50px;}
    #example .whatIs .titleArea {display:flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom:30px;}
    #example .whatIs .titleArea .titleCell {font-size:18px; margin-bottom:10px;}
    #example .whatIs .titleArea .vBar {height:20px; width:1px; margin-bottom:10px;}
    #example .whatIs .titleArea .bodyText {text-align:center;}

    #example .ippneUsage {padding-top:50px; padding-bottom:50px;}
    #example .ippneUsage .textArea {font-size:14px; margin-top:20px;}
    #example .ippneUsage .textArea .mainText {font-size:18px; font-family: 'PretendardM';}
    #example .ippneUsage .textArea .hBar {width:25px; height:2px; margin:20px auto;}

    #example .ippneUsage .balloonText {margin-top:30px;}
    #example .ippneUsage .balloonText .balloon {padding:5px 10px; border-radius:30px; margin-bottom:20px;}
    #example .ippneUsage .balloonText .balloon .tip {position:absolute; bottom:-8px; left:60px; height:8px;}
    #example .ippneUsage .bracketText {display:flex; justify-content: center; align-items: center; margin-top:30px;}
    #example .ippneUsage .bracketText > div {margin:0 10px;}
    #example .ippneUsage .bracketText > img {height:50px;}

    #example.contentVWrap { padding-top: 0;}
    #example .contentHWrap { padding-bottom: 40px;}
    #example .visual { margin-bottom: 20px;}
    #example .introTitleArea { padding-left: 10px;}
    #example .textArea { padding-left: 0; }
    #example .introTitleArea { margin-top: 20px; margin-bottom: 20px;}
    #example .introTitleArea .introTitle{ font-size: 20px;  margin-bottom: 10px;}

    #example .introTitleArea .introText { font-size: 14px; }

    #example .textArea { padding-top: 20px; padding-bottom: 20px;}
    #example .textArea:last-child { padding-bottom: 0;}
    #example .textArea .titleArea { font-size: 15px; margin-bottom: 15px; padding-left: 10px;}
    #example .textArea .titleArea .num { margin-right: 5px;}
    #example .textArea .titleCont { font-size: 14px;  padding-left: 35px; margin-bottom: 15px;}
    #example .imgArea {margin-bottom:20px;}

}