/*common*/
.sound_only {
    width: 0px;
    padding: 0px;
    height: 0px;
    line-height: 0px;
    overflow: hidden;
    display: block;
}
.st_bg {
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 5px;
    background: #e2e1e0;
    vertical-align: -1px;
} 
.frm_input {
    border: 1px solid #d0d3db;
    background: #fff;
    width: 100%;
}
textarea.form-control {
    border: 1px solid #d0d3db;
    background: #fff;
    width: 100%;
    border-radius: 0px;
    box-shadow: 0 0 0;
    font-weight: 300;
	resize:none;
}
/* online_mypouch */

#online_mypouch h4 span {
    font-size:14px;
}
#online_mypouch .step1_wrp li a {
    text-decoration: none;
    display: block;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 60px 15px;
    background-color: #fcfcfc;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#online_mypouch .step1_wrp li a._opened,
#online_mypouch .step1_wrp li a:hover {
    border-color: #e82828;
    background-color: #fff;
}
#online_mypouch .step1_wrp li a .ibox {
    margin-bottom: 20px;
}
#online_mypouch .step1_wrp li a h5,
#online_mypouch .step1_wrp li a .ibox img {
	opacity: 0.7;

	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#online_mypouch .step1_wrp li a:hover h5,
#online_mypouch .step1_wrp li a:hover .ibox img {
	opacity: 1;
}


/* pouch_top */
.pouch_top ul{font-size:0;}
.pouch_top ul li{display:inline-block; width:calc(25% - 60px); margin-right:80px; position:relative; vertical-align:middle;}
.pouch_top ul li:last-of-type{margin-right:0;}
.pouch_top ul li:not(:last-child)::before{content:""; display:block; width:15px; height:100%; background: url(../img/prc_arr.png) center center no-repeat; position:absolute; top:0px; right:-47.5px;}
.pouch_top ul li a{display:block; padding:7px; border-radius:49px; background:#fff; border:1px solid #ddd;}
.pouch_top ul li a > *{display:inline-block; vertical-align:top;}
.pouch_top ul li a .icon{width:81px;}
.pouch_top ul li a .icon img{width:100%;}
.pouch_top ul li a .txt{width:calc(100% - 81px); padding-left:20px;}
.pouch_top ul li a .txt *{color:#999; line-height:1.2;}
.pouch_top ul li a .txt h5{margin:7px 0 8px; font-size:18px; font-weight:700;}
.pouch_top ul li a .txt p{margin-bottom:0; font-size:15px;}
.pouch_top ul li a.act{background:#333; border-color:#333;}
.pouch_top ul li a.act .txt *{color:#fff;}
.pouch_top ul.step3 li{width:calc(33.33% - 53.33px);}
.pouch_top ul.step3 li a > *{vertical-align:middle;}
.pouch_top ul.step3 li a .txt h5{margin-top:0;}
.pouch_top ul.step3 li a .txt p br{display:none;}
#online_mypouch .tipbox p{font-size:16px; color:#333; line-height:1.4;}
#online_mypouch .tipbox p:first-child{font-size:18px; line-height:1;}
#online_mypouch .tipbox p img{vertical-align:-2px;}

/* save_btn */
.save_btn {
    font-size: 14px;
    color: #666;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    line-height: 14px;
    height: auto;
    font-weight: 400;
}
/* pouch_form */
.pou_top {
    margin-bottom: 20px;
}
.pou_top.bder_top {
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}
.pouch_form {
    padding: 10px;
    background-color: #f7f7f7;
    border: 1px solid #eee;
}
.pouch_form > ul {
    padding: 40px;
    border: 1px solid #eee;
    background-color: #fff;
}
.pouch_form > ul > li:not(:first-child) {
    margin-top: 40px;
    border-top: 1px solid #ddd;
    padding-top: 40px;
}
.pouch_form > ul > li .f_item .form_info {
    margin-bottom: 10px;
}
.pouch_form > ul > li .f_item .form_info span {
    display: inline-block;
    font-size: 14px;
    color: #f5834d;
    font-weight: 400;
    margin-right: 1px;
    padding: 8px 15px;
    line-height: 1em;
    background-color: #fff6ef;
    border-radius: 4px;
}
.pouch_form > ul > li .f_item .form_info span.none {
    color: #078d9b;
    background-color: #effff8;
}
.pouch_form > ul > li .f_item .depts_select {
    padding: 10px 15px;
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-top: 10px;
}
.pouch_form .pouch_form_item .radio-custom,
.pouch_form .pouch_form_item .checkbox-custom {
    display: inline-block;
    margin: 7px 20px 7px 0;
}
.pouch_form .pouch_form_item .radio-custom.full_size,
.pouch_form .pouch_form_item .checkbox-custom.full_size {
    display: block;
    width: 100%;
}
.pouch_form .pouch_form_item .radio-custom label,
.pouch_form .pouch_form_item .checkbox-custom label {
    font-size: 15px;
    line-height: 1em;
    color: #333;
    font-weight: 400;
}
.pouch_form .f_item{font-size:0;}
.pouch_form .pouch_form_item {
	display:inline-block;
	width:calc(100% - 250px);
	padding-left: 50px;
	vertical-align:top;
}
.pouch_form .pouch_form_tit {
	display:inline-block;
	width: 250px;
	font-size: 17px;
	margin: 0;
	line-height:1.4;
	vertical-align:top;
}

/* btn_set */
.btn_set{margin:0; font-size:0; text-align:center;}
.btn_set > div{float:none; display:inline-block; width:calc(50% - 10px); margin-right:20px; padding:0; vertical-align:top;}
.btn_set > div:last-of-type{margin-right:0;}
.btn_set > div input,
.btn_set > div button,
.btn_set > div a {
    width: 100%;
    border-radius: 0px;
    font-size: 17px;
    height: 60px;
    line-height: 60px;
    font-weight: 400;
    padding: 0px;
    display: block;
    text-decoration: none;
    border: 1px solid #ddd;
}
.btn_set .prev {
    color: #666;
    border-color: #666;
}
.btn_set .next {
    border-color: #d42222;
    background-color: #d42222;
    color: #fff;
	cursor:pointer
}
.btn_set .sit_btn_buy:hover {
    border-color: #cb1818;
    background-color: #cb1818;
    color: #fff;
}


/* pouch_cosmetic */
.pouch_cosmetic{margin-top:20px;}
.pouch_cosmetic > ul{display:flex; flex-wrap:wrap; justify-content:space-between;}
.pouch_cosmetic > ul > li{width:calc(50% - 7.5px); margin-top:15px; background:#fff; border:1px solid #ddd; border-radius:5px; box-sizing:border-box; overflow:hidden; display: table;} /*숨겨진 요소 표출 컬러 타입 체형타입 etc*/
.pouch_cosmetic > ul > li:nth-of-type(2n){margin-right:0;}
.pouch_cosmetic > ul > li:last-of-type{margin-right:0;}
.pouch_cosmetic .cosmetic_item {
    display: flex;
	height:100%;
	min-height: 220px;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 15px;
}
.pouch_cosmetic .cosmetic_item > div {
    align-self: center;
}
.pouch_cosmetic .cosmetic_item.none {
	margin:0 -15px;
    background-color: #f8f8f8;
    cursor: pointer;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.pouch_cosmetic .cosmetic_item.none:hover {
    border-color: #d42222;
}
.pouch_cosmetic .cosmetic_item.none > div {
    width: 100%;
    text-align: center;
}
.pouch_cosmetic .cosmetic_item.none h5 {
	margin-top:20px;
    color: #888;
}
.pouch_cosmetic .cosmetic_item.added [class^="prd_img"]{border-radius: 5px; overflow:hidden;}
.pouch_cosmetic .cosmetic_item.added [class^="prd_img"] img{width:100%; height:173px;}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li {
    position: relative;
    font-size: 15px;
    line-height: 1.4em;
    margin-bottom:12px;
    color: #333;
	text-align:left;
}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li:last-child{margin-bottom:0;}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li > span {
    display: block;
    position: relative;
}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li .tooltip {
    left: 70px !important
}
.pouch_cosmetic .cosmetic_item.added .btnbox {
    margin:15px 0 0;
	font-size:0;
}
.pouch_cosmetic .cosmetic_item.added .btnbox > div{float:none; display:inline-block; width:calc(50% - 5px); margin-right:10px; padding:0; vertical-align:top;}
.pouch_cosmetic .cosmetic_item.added .btnbox > div:last-of-type{margin-right:0;}
.pouch_cosmetic .cosmetic_item.added .btnbox .btn_in {
    display: block;
    text-align: center;
	font-size:14px;
    color: #666;
    line-height: 1em;
    padding: 10px;
    border: 1px solid #ddd;
    text-decoration: none;
}
.pouch_cosmetic .cosmetic_item [class^="prd_img"] {
	width: 33.33%;
}
.pouch_cosmetic .cosmetic_item .prd_info {
	width: 66.64%;
	padding-left: 25px;
}
.pouch_cosmetic .cosmetic_item .prd_info ul li {
	padding-left: 70px;
}
.pouch_cosmetic .cosmetic_item .prd_info.prd_info2 ul li {
	padding-left: 10px;
}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li strong {
	position: absolute;
	left: 0;
	font-weight: 600;
    display: contents; /*리포트 요소 겹치는 이슈*/
}
.pouch_cosmetic .cosmetic_item.added .prd_info.prd_info2 ul li strong {
  position: unset;
	left: 0;
	font-weight: 600;
}
.pouch_cosmetic .cosmetic_item.added .prd_info ul li > span {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* add_item_modal */
.add_item_modal table {
    width: 100%;
}
.add_item_modal .file_up {
    margin-top: 0px !important;
}
.add_item_modal .order_tabel tbody tr td {
    line-height: initial !important;
}
.add_item_modal .order_tabel tbody tr td .tit_label {
    margin-bottom: 5px;
}
.add_item_modal .order_tabel tbody tr td .radio-custom {
    line-height: 20px;
    margin-bottom: 5px;
}
.add_item_modal .order_tabel tbody tr td .radio-custom {
    display: inline-block;
}
.add_item_modal .order_tabel tbody tr td .radio-custom label {
    position: initial;
    margin-right: 10px;
}
.add_item_modal .order_tabel tbody tr td .radio-custom label::before {
    margin-top: -7px;
}
.add_item_modal .order_tabel tbody tr td .radio-custom input[type="radio"]:checked + label:after {
    margin-top: -3px;
}

/* last_confirm */
.last_confirm_wrp {
	margin-top:40px;
    padding: 100px;
    border: 1px solid #ddd;
    border-top: 2px solid #333;
	background:#fff;
}
.last_confirm {
    margin-top: 50px;
}

/* up_img */
.up_img {margin-top: 20px; font-size:0;}
.up_img li{float:none; display:inline-block; width:calc(50% - 5px); margin-right:10px; vertical-align:top;}
.up_img li:nth-of-type(2n){margin-right:0;}
.up_img li:last-of-type{margin-right:0;}
.up_img .item {
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 40px 15px;
    text-align: center;
}
.up_img .item p {
    background: url(../img/img_up_chk.png) top left no-repeat;
    padding-left: 30px;
    display: inline-block;
}
/* file_up */
.file_up {
    border: 1px solid #eee;
    background-color: #fcfcfc;
    margin-top: 30px;
    text-align: center;
    padding: 15px 0;
}
.file_up input[type=file] {
   display: inline-block;
   width:75%;
   height:auto;
   font-size:16px;
}
.file_up .fileupload{
    display: inline-block;
}
/* ac_pay_info */
#ac_pay_info {
    padding: 15px;
    margin-top: 15px;
    border: 1px solid #ddd;
}
#ac_pay_info.result {
    border-top: 2px solid #333;
}
#ac_pay_info table {
    width: 100%;
}
/* width */
.width300 {
    width: 100% !important;
    max-width: 300px;
}

/* selectDate */
.selectDateF {
    text-decoration: none;
    display: block;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 60px 15px;
    background-color: #fcfcfc;
}

.modal_style {
    z-index: 2;
} /*모달 상위*/

@media all and (max-width:1200px){
	#online_mypouch .container{width:95%!important; max-width:100% !important; margin:0 2.5%;}
	.pouch_top ul li{width:calc(25% - 30px); margin-right:40px;}
	.pouch_top ul li:not(:last-child)::before{right:-27.5px;}
	.pouch_top ul li a{border-radius:45.5px;}
	.pouch_top ul li a .icon{width:75px;}
	.pouch_top ul li a .txt{width:calc(100% - 75px);}
	.pouch_top ul li a .txt h5{font-size:17px;}
	.pouch_top ul li a .txt p{font-size:14px;}
	.pouch_top ul.step3 li{width:calc(33.33% - 26.66px);}

	.pouch_form .pouch_form_item{padding-left:30px;}
	.btn_set > div{width:calc(50% - 10px);}
}

@media all and (max-width:992px){
	#online_mypouch .conbox.conbox_mini{display:block; margin-top:20px;}
	.pouch_top ul li{text-align:center;}
	.pouch_top ul li a{display:inline-block; width:100px; padding:7px 7px 15px; border-radius:47.5px; box-sizing:border-box;}
	.pouch_top ul li a .icon{width:81px;}
	.pouch_top ul li a .txt{display:block; width:100%; padding:15px 0 0 0;}
	.pouch_top ul li a .txt h5{margin:0 0 8px; font-size:17px;}
	.pouch_top ul li a .txt p{height:35px; font-size:14px;}
	.pouch_top ul.step3 li a .txt p br{display:block;}

	.up_img .item p {
		background-size:auto 13px;
		padding-left: 25px;
	}
}

@media all and (max-width:824px){
	#online_mypouch .container{width:90%!important; max-width:100% !important; margin:0 5%;}
	#online_mypouch .step1_wrp li a {padding: 40px 15px;}
    #online_mypouch .step1_wrp li a .ibox {margin-bottom: 10px;}
    #online_mypouch .step1_wrp li a .ibox img {width: 50px;}

    .pouch_cosmetic .cosmetic_item {flex-wrap: wrap;}
    .pouch_cosmetic .cosmetic_item {text-align: center;}
    .pouch_cosmetic .cosmetic_item > div {width:100%;}
    .pouch_cosmetic .cosmetic_item [class^="prd_img"] {width:100%; border-radius: 4px;}
    .pouch_cosmetic .cosmetic_item [class^="prd_img"] img{max-height:170px; height:auto;}
	.pouch_cosmetic .cosmetic_item.added .prd_info{width:100%; padding:15px 0 0;}
    .pouch_cosmetic .cosmetic_item.added .prd_info ul li {font-size: 13px;}
    .pouch_cosmetic .cosmetic_item.added .prd_info ul li strong {display: contents; margin-bottom: 5px; } /*모바일 리포트, 요소들 배열*/
    .pouch_cosmetic .cosmetic_item.none img {width: 40px;}
	.pouch_cosmetic .cosmetic_item.added .btnbox .btn_in{padding:7px; font-size:13px;}

	.pouch_top ul li:not(:last-child)::before{width:9px; right:-24.5px; background-size:100% auto;}
	.pouch_top ul li a{width:100%; padding:10px 0 15px; border-radius:10px;}
	.pouch_top ul li a .icon{width:55px;}
	.pouch_top ul li a .txt{display:block; width:100%; padding:15px 0 0 0;}
	.pouch_top ul li a .txt h5{margin:0 0 5px; font-size:16px;}
	.pouch_top ul li a .txt p{height:32px; font-size:13px;}

	#online_mypouch .tipbox p{font-size:14px;}
	#online_mypouch .tipbox p:first-child{font-size:16px; line-height:1;}
	#online_mypouch .tipbox p img{width:16px;}
	
	.pouch_form > ul {padding:25px;}
	.pouch_form > ul > li:not(:first-child) {margin-top:25px; padding-top:25px;}
	.pouch_form .pouch_form_item{width:100%; padding-left:0;}
	.pouch_form > ul > li:not(:first-child){margin-top:25px; padding-top:25px;}

    .save_btn {
        font-size: 12px;
        padding: 5px 8px;
        line-height: 12px;
    }
    .pouch_form .pouch_form_tit {
		width:100%;
        margin-bottom: 5px;
		padding-right:30px;
		font-size:16px;
        font-weight: 700;
        position: relative;
    }
    .pouch_form .pouch_form_tit .slt_toggle {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 20px;
        cursor: pointer;
        background: url(../img/all_input_arrow.png) no-repeat center center;
        background-size: 13px;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
	.pouch_form ._opened .pouch_form_tit .slt_toggle{transform:rotate(180deg);}
    .pouch_form .pouch_form_tit .slt_toggle._checked{transform: rotate(360deg);}
	.pouch_form ._opened .pouch_form_tit .slt_toggle._checked{transform: rotate(180deg);}
	.pouch_form > ul > li .f_item .form_info span{font-size:13px; padding:5px 12px;}

    .pouch_form .pouch_form_item .checkbox-custom {
        margin: 5px 10px 3px 0;
    }
    .pouch_form .pouch_form_item .checkbox-custom label {
        font-size: 12px;
    }
    .pouch_form .pouch_form_item .radio-custom label,
    .pouch_form .pouch_form_item .checkbox-custom label {
        font-size: 12px;
    }
	
	.btn_set > div{width:calc(50% - 7.5px); margin-right:15px;}
    .btn_set > div input,
    .btn_set > div button,
    .btn_set > div a { 
        font-size: 15px;
        height: 45px;
        line-height: 43px;
    }

	.up_img li{display:block; width:100%; margin:0 0 10px 0;}
	.up_img li:last-of-type{margin-bottom:0;}
	.up_img .item p{display:block; padding-left:0; background:transparent; line-height:1.3;}
	.up_img .item p::before{content:""; display:inline-block; width:18px; height:12px; margin-right:7px; background:url(../img/img_up_chk.png) top left no-repeat; background-size:auto 100%; vertical-align:-1px;}

    .up_img .owl-dots {
        margin-top: 0 !important;
    }
    .up_img .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
        margin: 3px;
    }
    .up_img .owl-dots .owl-dot.active span, 
    .up_img .owl-dots .owl-dot:hover span {
        background-color: #d42222;
    }

	.file_up{margin-top:20px;}

    .last_confirm_wrp {
        padding: 60px 30px;
    }
	.last_confirm_wrp h4{padding:0 10px; font-size:20px;}
    .last_confirm {
        margin-top: 40px;
    }

    .selectDateF {
        padding: 40px 15px;
    }
    .modal_style .list_items {
      border: 1px dotted;
          width: 95%;
      }
}


@media all and (max-width:500px){
    #online_mypouch .step1_wrp li a h5 {font-size: 15px;}
	#online_mypouch h4 span {font-size:11px;}
	
	.pouch_top ul li{width:calc(25% - 18.75px); margin-right:25px;}
	.pouch_top ul.step3 li{width:calc(33.33% - 16.66px);}
	.pouch_top ul li:not(:last-child)::before{width:7px; right:-16px;}
	.pouch_top ul li a{width:100%; max-width:65px; padding:10px 0; border-radius:10px;}
	.pouch_top ul li a .icon{display:none;}
	.pouch_top ul li a .txt{display:block; width:100%; padding:0;}
	.pouch_top ul li a .txt h5{padding:0 5px; font-size:15px;}
	.pouch_top ul li a .txt p{height:30px; font-size:12px;}
	.pouch_top ul.step3 li a{max-width:90px;}
	.btn_set > div{width:calc(50% - 5px); margin-right:10px;}
    .btn_set > div input,
    .btn_set > div button,
    .btn_set > div a {font-size:14px;}

	.pouch_form .pouch_form_tit {font-size:15px;}
	.pouch_form > ul > li .f_item .form_info span{font-size:12px; padding:5px 10px;}

	.pouch_cosmetic > ul > li{width:100%;}
}