/*
	�좎럩伊숋옙恝�쇿뜝�뀀쐻占쎌늿�� �좎럩伊숋옙�쎌삕�좎럡�⑼옙醫묒삕(div) �좎럡�당뙴�됱삕�좑옙 �좎럡�당뙴袁ъ삕影�瑜곸굲�잙컾維곻옙類㏃삕�ル쵐�� �좎럩伊숂뙴�묒삕占쎌슜�삣뜝�뚮듌占쏙옙 css �꿔꺂��옙�륁삕�좑옙 �좎럩伊숋옙��삕占쎈벊�뺧옙醫묒삕
	�좎뜫爰곻옙�쏆삕占쎌럩�뺧옙醫롫윪占쎈틶�앾옙�녹삕占쎈슣逾� css �좎럩伊숋옙�대き筌뚭쑴�뺧옙醫묒삕 �좎럩伊숂뙴�묒삕�좑옙
*/

@import url(../webfont/notosanskr/notosanskr.css);
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
/*
:lang(ko) {
  font-family: 'Noto Sans KR', sans-serif;
}
*/
.frame_style_div body, .frame_style_div td, .frame_style_div select, .frame_style_div input, .frame_style_div div, .frame_style_div span, .frame_style_div ul, .frame_style_div ol, .frame_style_div li, .frame_style_div form, .frame_style_div textarea, .frame_style_div a, .frame_style_div center, .frame_style_div option, .frame_style_div pre, .frame_style_div blockquote, .frame_style_div p, #detailInfo div{font-family:"Noto Sans KR", sans-serif; font-size:13px; color:#777; letter-spacing:-0.5px;line-height:100%;font-weight: 300;}
.frame_style_div p{margin:0px;}
/*
#div_template_body.lineh100 div.review_benefit_title{letter-spacing:-1.5px;}
#header_middle .middle-bottom div{display:inline-block;margin-top:10px; font-family:"Noto Sans KR", sans-serif; font-size:13px; margin-right:8px; color:#777; line-height:100%;}
*/
.frame_style_div{font-size:0px;}
#pageStep{
    margin: 21px 0 30px;
}
.view_left{
    width: 530px;
    font-size:  0px;
    display: inline-block;
    vertical-align:  top;
}
.view_left .thumb_big{}
.view_left .thumb_big img{
    width: 530px;
	height: 530px;
	outline: none;
}
.view_left .thumb_list{
    font-size: 0px;
	width:540px;
	margin-left: -5px;
}
.view_left .thumb_list img{
    width: 80px;
	height: 80px;
    margin: 10px 5px 0 5px;
    cursor: pointer;
	outline: none;
}
/*.view_left .thumb_list img:last-child{margin-right:0px;}*/
.view_left .snsicon{font-size: 0px;}
.view_left .snsicon li{
    margin: 30px 15px 0px 0;
    background-color:  #222;
    width:  28px;
    height: 28px;
    border-radius: 14px;
    display: inline-block;
    cursor:pointer;
}
.view_left .snsicon li.fb{background-image: url('../images/frame_style/btn_sns_fb.png');/* background-color: green; *//* background-image: url(https://www.photomon.com/css/images/shadow.gif); */background-position: center;background-repeat: no-repeat;}
.view_left .snsicon li.tw{background-image: url('../images/frame_style/btn_sns_twi.png');/* background-color: green; *//* background-image: url(https://www.photomon.com/css/images/shadow.gif); */background-position: center;background-repeat: no-repeat;}
.view_left .snsicon li.naver{background-image: url('../images/frame_style/btn_sns_url.png');/* background-color: green; *//* background-image: url(https://www.photomon.com/css/images/shadow.gif); */background-position: center;background-repeat: no-repeat;}
.view_right{
    font-size:  0px;
    display: inline-block;
    vertical-align: top;
    padding-left: 40px;
    width: 382px;
}
.view_right .pkgname{
    margin-bottom: 30px;
    font-size:  32px;
    color:  #222;
    font-weight: 400;
}
.view_right .pkgdesc{
    line-height: 22px;
    color: #777;
}
.view_right .pkgtitle{
    display: flex;
    gap : 10px;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 30px;
    /* font-size:  0px; */
} 
.view_right .pkgtitle.has_option_detail{padding-bottom: 10px;
    border-bottom: solid 1px #d4d4d4;
    margin-bottom: 20px;}
.option_detail_btn{right: 90px;
    position: absolute;
	cursor: pointer;}
.view_right .pkgprice{
    margin-bottom: 30px;
    font-size:  0px;
}
.view_right .pkgprice .ori_price{
   color:#aaa;
   text-decoration: line-through;
}
.view_right .pkgprice .sale_percent{
   color:#ff4800;
   font-size:18px;
   margin-left: 10px;
   font-weight: 400;
}

.view_right .pkgprice .sale_price{
   color:#222;
   font-size:18px;
   margin-left: 10px;
   font-weight: 400;
}
.view_right .pkgprice .percent{
   color:#ff4800;
   font-size:15px;
   font-weight: 400;
}

.view_right .frame .color_opt_view{position:  absolute;width: 200px;margin-left: -228px;border: solid 1px #ddd;background-color:  white;text-align: center;padding: 10px;}
.view_right .frame .color_opt_view .color_opt_name{text-align: left;margin-top: 10px;color:  #222;}
.view_right .frame .color_opt_view img{width: 198px;}
.view_right .frame{
    font-size:  0;
}
.view_right .frame li{
    display:  inline-block;
    margin-right: 8px;
    border: solid 1px #dadada;
}
.view_right .frame li.strike{
    /*background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255,255,255,1) 46%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);*/
	background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255, 255, 255, 0) 46%,rgba(255, 255, 255, 0) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255, 255, 255, 0) 51%,rgba(255, 255, 255, 0) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
}
.view_right .frame li:not(.strike):hover{
    border: solid 1px #222;
}
.view_right .frame li.on{
    border: solid 1px #222;
}
.view_right .frame li img{
    width:  52px;
	cursor:pointer;
}
.view_right .frame li:not(.color_opt_view) img{
	z-index: -1;
    position: relative;
}
.view_right .pkgsize{
    font-size: 0px;
    margin-bottom: -8px;
}
.view_right .pkgsize li{
    font-size: 12px;
    color:  #777;
    /*width:  82px;*/
    width:  auto;
	min-width:80px;
    height: 30px;
    border: solid 1px #dadada;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
	cursor:pointer;
	padding:0 px 5px 0px 5px;
}
.view_right .pkgsize li:not(.strike):hover{
	color:  #222;
	border: solid 1px #222;
}
.view_right .pkgsize li.on{
    font-size: 12px;
    color:  #222;
    /*width:  82px;*/
    height: 30px;
    border: solid 1px #222;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
}
.view_right .star{
    font-size: 0px;
    margin-bottom: -8px;
}
.view_right .star li{
    font-size: 12px;
    color:  #777;
    width:  82px;
    height: 30px;
    border: solid 1px #dadada;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
	cursor:pointer;
}
.view_right .star li:not(.strike):hover{
	color:  #222;
	border: solid 1px #222;
}
.view_right .star li.on{
    font-size: 12px;
    color:  #222;
    width:  82px;
    height: 30px;
    border: solid 1px #222;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
}
/*
.view_right .pkgsize li.strike{
    background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 50%,rgba(255,82,22,1) 50.5%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1 );
}
*/
.view_right .pkgsize li.strike{
    background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255,255,255,1) 46%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
	cursor:default;
}
/* 원목액자 */
.view_right .sizeframe .opt_view{position:  absolute;width: 200px;margin-left: -228px;border: solid 1px #ddd;background-color:  white;text-align: center;padding: 10px;}
.view_right .sizeframe .opt_view .opt_name{text-align: left;margin-top: 10px;color:  #222;}
.view_right .sizeframe .opt_view img{width: 198px;}
.view_right .sizeframe{
    font-size: 0px;
    margin-bottom: -8px;
}
.view_right .sizeframe li:not(.opt_view){
    font-size: 12px;
    color:  #777;
    width:  82px;
    height: 30px;
    border: solid 1px #dadada;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
	cursor:pointer;
}
.view_right .sizeframe li.strike{
    /*background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255,255,255,1) 46%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);*/
	background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255, 255, 255, 0) 46%,rgba(255, 255, 255, 0) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255, 255, 255, 0) 51%,rgba(255, 255, 255, 0) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
}
.view_right .sizeframe li:not(.strike):not(.opt_view):hover{
    color:  #222;
	border: solid 1px #222;
}
.view_right .sizeframe li:not(.opt_view).on{
    font-size: 12px;
    color:  #222;
    width:  82px;
    height: 30px;
    border: solid 1px #222;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
}
.view_right .sizeframe li img{
    width:  52px;
	cursor:pointer;
}
.view_right .sizeframe li:not(.opt_view) img{
	display:none;
}

/*갤러리매트 추가사항*/

.view_right .styleframe .opt_view{position:  absolute;width: 200px;margin-left: -228px;border: solid 1px #ddd;background-color:  white;text-align: center;padding: 10px;}
.view_right .styleframe .opt_view .style_opt_name{text-align: left;margin-top: 10px;color:  #222;}
.view_right .styleframe .opt_view img{width: 198px;}
.view_right .styleframe{
    font-size: 0px;
    margin-bottom: -8px;
}
.view_right .styleframe li:not(.opt_view){
    font-size: 12px;
    color:  #777;
    width:  82px;
    height: 30px;
    border: solid 1px #dadada;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
	cursor:pointer;
}
.view_right .styleframe li.strike{
    /*background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255,255,255,1) 46%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255,255,255,1) 51%,rgba(255,255,255,1) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);*/
	background: linear-gradient(to left top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 47%,rgba(255, 255, 255, 0) 46%,rgba(255, 255, 255, 0) 46%,rgba(255,82,22,1) 49.3%,rgba(255,82,22,1) 49.8%,rgba(255, 255, 255, 0) 51%,rgba(255, 255, 255, 0) 52%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
}
.view_right .styleframe li:not(.strike):not(.opt_view):hover{
    color:  #222;
	border: solid 1px #222;
}
.view_right .styleframe li:not(.opt_view).on{
    font-size: 12px;
    color:  #222;
    width:  82px;
    height: 30px;
    border: solid 1px #222;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
}
.view_right .styleframe li img{
    width:  52px;
	cursor:pointer;
}
.view_right .styleframe li:not(.opt_view) img{
	display:none;
}
/*공책 커버 추가 */
.view_right .pkgcover{
    font-size: 0px;
    margin-bottom: -8px;
}
.view_right .pkgcover li{
    font-size: 12px;
    color:  #777;
    /*width:  82px;*/
    width:  auto;
	min-width:80px;
    height: 30px;
    border: solid 1px #dadada;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
	cursor:pointer;
	padding:0 px 5px 0px 5px;
}
.view_right .pkgcover li:not(.strike):hover{
	color:  #222;
	border: solid 1px #222;
}
.view_right .pkgcover li.on{
    font-size: 12px;
    color:  #222;
    /*width:  82px;*/
    height: 30px;
    border: solid 1px #222;
    display: inline-block;
    margin:  0 8px 8px 0;
    text-align:  center;
    line-height: 30px;
}

.view_right .pkgcnt{margin-bottom:40px;font-size:0px;}
.view_right .pkgcnt li{display:inline-block;border:solid 1px #dadada;width:35px;height:35px;text-align:center;line-height:35px;vertical-align: top;cursor: pointer;}
.view_right .pkgcnt .minus img{margin-top:10px;}
.view_right .pkgcnt .plus img{margin-top:10px;}
.view_right .pkgcnt .pkgcnt_num{padding:0 7px;border-left: 0px;border-right: 0px;color:  #222;width: auto;border: none;border-top: solid 1px #dadada;border-bottom: solid 1px #dadada;height: 35px;min-width:  30px;max-width: 34px;text-align: center;outline: none;}
.view_right .order_btn{
    background-color: #222;
    color: white;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    cursor: pointer;
    }
.view_right .pkgdelivery{margin-bottom: 12px;}
.view_right .pkgdelivery:last-child{margin-bottom: 0px;}
.relative_items{margin-top:70px;border-top:solid 1px #d4d4d4;}
.relative_items .title{font-size:20px;color:#222;margin: 40px 0 30px;
    text-align: center;line-height: 20px;
    height: 20px;}
.frame_style_div	.relative_items_ul{font-size:0px;height: 180px;}
.relative_items_ul{font-size:0px;height: 180px;}
.relative_items_ul li{display:inline-block;margin:0 13px 0 0 ;width:180px;height:180px;}
.relative_items_ul li:last-child{margin-right:0px;}
.relative_items_ul li img{width:100%;height:100%;}
.detailtab_wide{border-bottom:solid 1px #777;}
.detailTab{}
ul.detailTab li{
    display:  inline-block;
    width: 317px;
    font-size: 17px;
    color:  #777;
    text-align:  center;
    padding-top: 17px;
    margin-top: 53px;
    margin-bottom: -1px;
}
ul.detailTab li.on{
     border-bottom: solid 1px #222;
}
.detailTab li a{
    font-size: 17px;
    width: 317px;
    display: block;
    padding-bottom: 17px;
	text-decoration: none;
}
ul.detailTab li.on a{
     color:#222;
     width:  317px;
     display:  block;
     padding-bottom: 17px;
     border-bottom: solid 2px #222;
}
.view_right .frame li.color_opt_view{display:none;}
.view_right .styleframe li.opt_view{display:none;}
.view_right .inchcm {
    font-size: 11px;
    color:  #666;
	width:84px;
    height: 22px;
    border: solid 1px #dadada;
    display: inline-block;
    text-align:  center;
    line-height: 22px;
	cursor:pointer;
	margin-left:215px;vertical-align: middle;
}
.view_right .inchcm:hover{
	color:  #222;
	border: solid 1px #222;
}
/*slisk css*/

.changeSizeUnit {
    font-size: 12px;
    color: #777;
    width: 90px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50px;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
}

.changeSizeUnit.on {
    border:1px solid ;
}