@import url('https://fonts.googleapis.com/css?family=Black+And+White+Picture|Black+Han+Sans|Cute+Font|Do+Hyeon|Dokdo|East+Sea+Dokdo|Gaegu|Gamja+Flower|Gothic+A1|Gugi|Hi+Melody|Jua|Kirang+Haerang|Nanum+Brush+Script|Nanum+Gothic|Nanum+Gothic+Coding|Nanum+Myeongjo|Nanum+Pen+Script|Noto+Sans+KR|Noto+Serif+KR|Poor+Story|Single+Day|Song+Myung|Stylish|Sunflower:300|Yeon+Sung&display=swap');

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* col layout (standard Frame) */
.component-box *[class*="col-"]{position:relative;float:left}
.component-box .col-1{width:100%}
.component-box .col-2{width:50%}
.component-box .col-3{width:33.3333333333%}
.component-box *[class*="row-"]{height:0}
.component-box .row-1{padding-top:100% !important}
.component-box .row-2{padding-top:50% !important}
.component-box .row-3{padding-top:33.3333333333% !important}
.component-box .row-4{padding-top:25% !important}

/* col layout (standard editor layout) */
.component-box .col-lg-12{width:100%}
.component-box .col-lg-11{width:91.66666666666666%}
.component-box .col-lg-10{width:83.33333333333334%}
.component-box .col-lg-9{width:75%}
.component-box .col-lg-8{width:66.66666666666666%}
.component-box .col-lg-7{width:58.333333333333336%}
.component-box .col-lg-6{width:50%}
.component-box .col-lg-5{width:41.66666666666667%}
.component-box .col-lg-4{width:33.33333333333333%}
.component-box .col-lg-3{width:25%}
.component-box .col-lg-2{width:16.666666666666664%}
.component-box .col-lg-1{width:8.333333333333332%}

@media (max-width: 992px){
    .component-box .col-md-12{width:100%}
    .component-box .col-md-11{width:91.66666666666666%}
    .component-box .col-md-10{width:83.33333333333334%}
    .component-box .col-md-9{width:75%}
    .component-box .col-md-8{width:66.66666666666666%}
    .component-box .col-md-7{width:58.333333333333336%}
    .component-box .col-md-6{width:50%}
    .component-box .col-md-5{width:41.66666666666667%}
    .component-box .col-md-4{width:33.33333333333333%}
    .component-box .col-md-3{width:25%}
    .component-box .col-md-2{width:16.666666666666664%}
    .component-box .col-md-1{width:8.333333333333332%}
}

@media (max-width: 768px){
    .component-box .row-sm-1{padding-top:100% !important}
    .component-box .row-sm-2{padding-top:50% !important}
    .component-box .row-sm-3{padding-top:33.3333333333% !important}
    .component-box .row-sm-4{padding-top:25% !important}

    .component-box .col-sm-12{width:100%}
    .component-box .col-sm-11{width:91.66666666666666%}
    .component-box .col-sm-10{width:83.33333333333334%}
    .component-box .col-sm-9{width:75%}
    .component-box .col-sm-8{width:66.66666666666666%}
    .component-box .col-sm-7{width:58.333333333333336%}
    .component-box .col-sm-6{width:50%}
    .component-box .col-sm-5{width:41.66666666666667%}
    .component-box .col-sm-4{width:33.33333333333333%}
    .component-box .col-sm-3{width:25%}
    .component-box .col-sm-2{width:16.666666666666664%}
    .component-box .col-sm-1{width:8.333333333333332%}
}

@media (max-width: 480px){
    .component-box .row-xs-1{padding-top:100% !important}
    .component-box .row-xs-2{padding-top:50% !important}
    .component-box .row-xs-3{padding-top:33.3333333333% !important}
    .component-box .row-xs-4{padding-top:25% !important}

    .component-box .col-xs-12{width:100%}
    .component-box .col-xs-11{width:91.66666666666666%}
    .component-box .col-xs-10{width:83.33333333333334%}
    .component-box .col-xs-9{width:75%}
    .component-box .col-xs-8{width:66.66666666666666%}
    .component-box .col-xs-7{width:58.333333333333336%}
    .component-box .col-xs-6{width:50%}
    .component-box .col-xs-5{width:41.66666666666667%}
    .component-box .col-xs-4{width:33.33333333333333%}
    .component-box .col-xs-3{width:25%}
    .component-box .col-xs-2{width:16.666666666666664%}
    .component-box .col-xs-1{width:8.333333333333332%}
}

/* ====================================================================================================================
 * result frame
 * ====================================================================================================================*/
.container{}
.editor-result-frame{}
.component-box{position:relative;width:900px;margin:0 auto 30px auto;font-size:13px}

.component-text{border:0;padding:0;line-height:1.5;font-size:13px;word-wrap:break-word;word-break:break-word}
.txt-large{font-size:21px;}
.txt-medium{font-size:17px;}
.txt-small{font-size:13px}
.txt-black{color:#000}
.txt-gray{color:#b7b7b7}
.txt-white{color:#fff}
.txt-red{color:#f63e29}
.txt-orange{color:#ff9d2f}
.txt-yellow{color:#f6d125}
.txt-yellowgreen{color:#79af2c}
.txt-green{color:#00a770}
.txt-darkcyan{color:#009691}
.txt-skyblue{color:#00b1ee}
.txt-blue{color:#007ac6}
.txt-purple{color:#953f8e}
.txt-pink{color:#f4438d}
.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}

.component-img{min-height:85px;text-align: center;}
/*.component-img img{width:100%}*/

/*collage image*/
.img-collage-box{position:relative}
.img-collage-box + .img-collage-box{margin-top:10px}
.img-collage-box.double .double-left{position:relative;width:50%;display:inline-block;padding-right:5px;}
.img-collage-box.double .double-right{position:relative;width:50%;display:inline-block;padding-left:5px;}
.img-collage-box.double .imgwrap{position:relative;}

/* ----------------------------------------------------------------
	component-frame-imgbox style
---------------------------------------------------------------- */
.component-frame-imgbox{width:910px}
.component-frame-imgbox:after,
.component-frame-imgbox .inner:after{display:table;clear:both;content:""}
.component-frame-imgbox .inner{padding:10px;margin:5px;background:#efefef}

.component-frame-imgbox .imgbox{position:relative;height:0;overflow:hidden}
.component-frame-imgbox .imgbox > *[class*="frame-imgbox-"]{position:absolute;top:0;left:0;right:0;bottom:0;margin:5px;overflow:hidden}
.component-frame-imgbox .imgbox .frame-imgbox-holder{background:#f8f8f8 url(../images/ico_noimg.png)no-repeat center;-webkit-background-size:30%;-moz-background-size:30%;background-size:30%}
.component-frame-imgbox .imgbox img{position:absolute;left:0;top:0}

.component-frame-imgbox .inner .imgbox > *[class*="frame-imgbox-"]{margin:10px}
.component-frame-imgbox .inner .col-1 > *[class*="frame-imgbox-"]{margin:20px 20px 10px}
.component-frame-imgbox .inner .col-1:nth-last-child(-n+1) > *[class*="frame-imgbox-"]{margin-bottom:20px}

@media (max-width: 900px){
    .frame-imgbox-holder{background-size:30% auto}
    .component-frame-imgbox .inner{padding:6px;margin:3px}
    .component-frame-imgbox .inner .imgbox > *[class*="frame-imgbox-"]{margin:6px}
}

/* ----------------------------------------------------------------
	component-quotation style
---------------------------------------------------------------- */
.component-quotation{padding:16px;line-height:1.5;font-size:13px;word-wrap:break-word;word-break:break-word;z-index:0}
.txt-italic{font-style: italic;}
.txt-nomal{font-weight: normal;}
.txt-bold{font-weight: bold;}
.txt-18{font-size: 18px;}
.txt-26{font-size: 26px;}
.txt-28{font-size: 28px;}
.txt-32{font-size: 32px;}
.txt-84{font-size: 84px;}
.quotation-title + div{margin-top:16px}

.quotation-001{padding:35px 0 33px 0;}
.quotation-001:before{background:url(../images/quotation_001_01.png)no-repeat;width:20px;height:15px;content:"";display:inline-block;position:absolute;right:0;left:0;top:16px;margin: 0 auto;}
.quotation-001:after{background:url(../images/quotation_001_02.png)no-repeat;width:20px;height:15px;content:"";display:inline-block;position:absolute;right:0;left:0;bottom:16px;margin:0 auto;}
.quotation-002{padding:9px 20px;}
.quotation-002:after{content:"";border-left:6px solid #707070;position:absolute;left:16px;top:16px;bottom:16px;}
.quotation-003{border:5px solid #e0e0e0;width:100%;max-width:780px;margin:0 auto 42px auto;padding:33px 10px 30px 10px;}
.quotation-003:after{background:url(../images/quotation_003.png)no-repeat;width:37px;height:42px;content:"";display:inline-block;position:absolute;right:15%;left:0;bottom:21px;margin:0 auto;}
.quotation-004{border-bottom:solid 1px #b7b7b7;padding:35px 0 20px 0;}
.quotation-004:after{background:url(../images/quotation_004.png)no-repeat;width:23px;height:15px;content:"";display:inline-block;position:absolute;left:16px;top:15px;}
.quotation-005{border: 4px solid #e0e0e0;width: 100%;max-width:780px;margin:0 auto;padding:44px 36px 35px 36px }
.quotation-005:after{background:url(../images/quotation_005.png)no-repeat;width:40px;height:40px;content:"";display:inline-block;position:absolute;right:60px;bottom:16px;}
.quotation-006{width:100%;max-width:780px;margin:0 auto;padding:32px 36px;}
.quotation-006:before{content:"";width:32px;height:32px;border-top:6px solid #5e5e5e;border-left:6px solid #5e5e5e;position:absolute;top:16px;left:60px;}
.quotation-006:after{content:"";width:32px;height:32px;border-right:6px solid #5e5e5e;border-bottom:6px solid #5e5e5e;position: absolute;bottom:16px;right:60px;}
.quotation-007{border:1px solid #383838;position:relative;background:#ffffff;padding:18px 16px;}
.quotation-007:after{content:'';background:#383838;width:100%;height:100%;bottom:-5px;left:5px; position:absolute;z-index:-1;}
.quotation-008{background:url(../images/frame_memo_bg.png)repeat-y;background-position:center;width:100%;padding:16px;}
.quotation-009{display:table;margin:0 auto;position:relative;}
.quotation-009 div{background:#806161;padding:10px 30px;}
.quotation-009:after{content:'';background:#806161;width:100%; height:2px;position:absolute;bottom:-6px;}
.quotation-010{padding:10px 44px;border-top:2px solid #606060;border-bottom:2px solid #606060; display:table;margin: 0 auto;}
.quotation-010:after{content:'';background:url(../images/frame_speech_line_bottom.png)no-repeat bottom center;width:18px;height:13px;position:absolute;left:49%;bottom:5.2px;}
.quotation-011{height:100%;display:table;margin:0 auto;}
.quotation-011 .left{display:table-cell;padding:5px 8px;vertical-align:middle;height:100%;max-width:200px;min-width:100px;letter-spacing:-1.5px}
.quotation-011 .right{display:table-cell;padding:4px 16px;vertical-align:middle;height:100%;border-left:1px solid #f6d125;}
.quotation-012:before{content:'';background:url(../images/frame_warning.png)no-repeat;display:block;width:24px;height:21px;margin: 0 auto;}
#Products_View_Modal .quotation-005:after{right:16px}/*�ֹ����� �󼼼����޿��� �ش�*/

@media (max-width: 900px){
    .quotation-005:after{background:url(../images/quotation_005.png)no-repeat;width:40px; height:40px;content:"";display:inline-block;position:absolute;right:16px;bottom:16px;}
    .quotation-006:before{content:"";width:32px;height:32px;border-top:6px solid #5e5e5e;border-left:6px solid #5e5e5e;position:absolute;top:16px;left:16px;}
    .quotation-006:after{content:"";width:32px;height:32px;border-right:6px solid #5e5e5e;border-bottom:6px solid #5e5e5e;position:absolute;bottom:16px;right:16px;}
    .quotation-011 .left{max-width: 30%;}
    .quotation-011 .right{max-width: 68%;}
}

@media (max-width: 400px){
    .txt-26{font-size: 22px;}
    .txt-28{font-size: 24px;}
    .txt-32{font-size: 28px;}
}


/*
.img-collage-box.double{height:400px}
.img-collage-box.double .double-left{position:relative;float:left;width:calc(50% - 5px);overflow:hidden}
.img-collage-box.double .double-right{position:relative;float:right;width:calc(50% - 5px);overflow:hidden}
.img-collage-box.double .imgwrap{position:relative;width:445px;height:400px;overflow:hidden}
.img-collage-box.double .imgwrap{position:relative;width:100%;height:400px;overflow:hidden}
.img-collage-box.double .imgwrap .inner{position:absolute;top:0;left:0;width:100%;height:100%}
.img-collage-box.double .imgwrap .inner img{overflow:hidden;width:100%;height:100%;object-fit:cover}
*/
/*
.img-collage-box.single .imgwrap{position:relative;width:900px;height:400px;overflow:hidden}
.img-collage-box.single .imgwrap .inner{position:absolute;top:0;left:0;width:100%;height:100%}
.img-collage-box.single .imgwrap .inner img{overflow:hidden;width:100%;height:100%;object-fit:cover}
*/

.component-link{width:100%;max-width:450px;margin:0 auto;margin-bottom:40px;border:1px solid rgba(0,0,0,.1);-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.08);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.08);box-shadow:0 1px 2px 0 rgba(0,0,0,.08)}
.component-link a{display:block}
.component-link .link-thumb{width:100%;height:270px;overflow:hidden}
.component-link .link-thumb .imgwrap{position:relative;width:100%;height:270px;overflow:hidden}
.component-link .link-thumb .imgwrap .inner{position:absolute;top:0;left:0;width:100%;height:100%}
.component-link .link-thumb img{position:relative;top:50%;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.component-link .link-info{padding:20px 26px 14px;border-top:1px solid #f3f3f3}
.component-link .link-info *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}
.component-link .link-info strong{display:block;font-size:15px;color:#000}
.component-link .link-info .summary{max-height:34px;margin-top:4px;color:#999}
.component-link .link-info .url{margin-top:5px;color:#5790ef}


.component-clothes-view{text-align:center;padding:15px 0}

.component-clothes-table{min-height:85px}
.table-wrap{position:relative;width:auto;height:auto;overflow-x:auto;white-space:nowrap}
.tbl-view{display:table;table-layout:fixed;width:100%;border:solid #d2d2d2;border-width:1px 1px 0 1px;text-align:center}
.tbl-view .row{display:table-row}
.tbl-view .row:before,
.tbl-view .row:after{content:none}
.tbl-view .cell{display:table-cell;position:relative;height:38px;vertical-align:middle;border-bottom:1px solid #ddd;color:#444}
.tbl-view .cell + .cell{border-left:1px solid #d2d2d2}
.tbl-view .hd-group{height:45px;background-color:#f7f7f7;font-weight:bold}
/*.tbl-view .col1{width:12%}*/


.component-gray-chart{padding:30px 0;border:1px solid #fafafa;text-align:center}
.component-gray-chart p{padding:20px 5% 0 5%}










@media (max-width: 1200px){
    header .top{padding:12px 64px 12px 10px}
    header .wrap{position:static;min-width:auto;max-width:none}
    header .toolbar .wrap{width:100%;}
    header .toolbar .color-box a{width:33px;height:33px}
    .container .editor-frame{top:46px;max-width:100%;border:0}
    .container .editor-frame-wrap{padding:190px 0}
}


@media (max-width: 1200px){
    .editor-frame{width:100%;border-width:0;top:46px}
    .editor-frame-wrap{padding:10vh 0}
    .toolbar .wrap{width:100%;height:45px;white-space:nowrap;overflow-x:auto;overflow-y:hidden}
    .toolbar .wrap a{width:45px;height:45px}
    .toolbar .color-box{padding:6px 12px}
    .toolbar .color-box a{width:33px;height:33px}
}
@media (max-width: 900px){
    .component-box{width:90%}
    .component-video iframe{width:100%;height:60vw;max-height:450px}
    /*
    .img-collage-box.double,
    .img-collage-box.single{height:40vw}
    .img-collage-box.double .imgwrap,
    .img-collage-box.single .imgwrap{width:100%;height:40vw}
    */

}
@media (max-width: 768px){
    .component-box{margin:0 auto 20px}
    .component-gray-chart img{width:90%}
}
@media (max-width: 640px){
    .component-box{font-size:11px}
    .component-title{font-size:25px}
    .component-text{font-size:13px}
    /*
    .img-collage-box.double .double-left,
    .img-collage-box.double .double-right{width:calc(50% - 3px)}
    */

    .img-collage-box + .img-collage-box{margin-top:6px}
    .component-link .link-thumb,
    .component-link .link-thumb .imgwrap{height:38vw}
}
@media (max-width: 480px){
    .component-box{width:93%}
    .component-title{padding:10px 0;font-size:21px}
    .component-text{font-size:12px}
    .txt-large{font-size:19px}
    .txt-medium{font-size:15px}
    .txt-small{font-size:12px}
    .component-link .link-info{padding:15px 20px 16px}
    .component-clothes-view img{width:65%}
    .selected-layer .btnwrap{margin:-20px auto 0 auto}
    .selected-layer .btnwrap > div{width:41px;height:41px}
    .selected-layer a{width:40px;height:40px}
    .selected-layer a span{color:transparent;font-size:0}
    .selected-coll .btnwrap{width:82px;margin:-41px auto 0 auto}
    .select-area li{width:calc(100% / 2)}
}

/**-- jk add --**/
.youtubeWrapper, .vimeoWrapper, .instagramWrapper {
    position: relative;
    padding-top: 30px; height: 0; overflow: hidden;
}
/* Set the padding-bottom for 16:9 aspect ratio video from YouTube & Vimeo */
.youtubeWrapper, .vimeoWrapper {
    padding-bottom: 56.25%;
}
/* Set padding-bottom for 5:6 aspect ratio Instagram content */
.instagramWrapper {
    padding-bottom: 120%;
}
/* For each content source, set the IFRAME to be top left and occupy 100% of width and height of the containing DIV wrapper */
.youtubeWrapper iframe,
.youtubeWrapper object,
.youtubeWrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.vimeoWrapper iframe,
.vimeoWrapper object,
.vimeoWrapper embed,
.instagramWrapper iframe,
.instagramWrapper object,
.instagramWrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
}