a{color:inherit;}
button{cursor:pointer;}
.mobile{display:none;}
.black-bg{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index: 99;}

/* layout */

* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html{height:100%;}
body{width:100%; height:100%; font-size:14px;}
.wrapper{padding-bottom:100px; position:relative; min-height:100%;}
.container-1024{width:1024px; margin:0 auto;}
.container-680{width:680px; margin:0 auto;}
.contents-area{position:relative;}
.conBox-area{padding:35px 0;}


@media screen and (max-width: 1024px){
    .container-1024{width:100%; padding:0 15px;}
    .gnb{margin:0 -15px;}
}


/* header */

.header-top{background:#fff; padding:25px 0;}
.header-top:after{display:block;clear:both; content:'';}

h1{display:inline-block;}
.top-menu{float:right;}
.top-menu>a,.top-menu nav{font-weight:700; display:inline-block; font-size: 14px; color: #9a9696;}

.top-menu>a{margin-right:25px;}
.top-menu nav ul li{display:inline-block;}
.top-menu nav ul li:after{content:'\2215'; padding:0 10px;}
.top-menu nav ul li:last-child:after{content:''; padding:0;}
.top-menu a.on, .top-menu a:hover{color:#58a3f8;}


.header-btm{background:#000;}
.gnb ul li{width:13.9%; display:inline-block; text-align: center;}
.gnb ul li a{display:block; width:100%; padding:15px 0; font-size:14px; color:#fff; font-weight:bold;}

.gnb ul li a.on{color:#ffc704; border-bottom:4px solid #ffc704; padding-bottom:11px;}
.gnb ul li a:hover{color:#ffc704; border-bottom:4px solid #ffc704; padding-bottom:11px;}


/* mobile menu */
.mob-menu-button{float:right;}
.mob-menu-button button{width:43px; height:33px; background:0; border:0;}

.mobile-gnb{position:fixed; top:0; bottom:0; right:0; width:0%; z-index:100; background:#fff;}
.mob-gnb-top{padding:50px 35px;  display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position:relative;}
.mob-gnb-top>a{float:left; display:inline-block;}
.mob-gnb-top>button{position:absolute; right:35px; border:0; background:none;}
.mob-gnb-mid ul:after{display:block; clear:both; content:'';}
.mob-gnb-mid ul li{width:50%; float:left; text-align: center;}
.mob-gnb-mid ul li:first-child{border-right:2px solid #fff;}
.mob-gnb-mid ul li a{display:block; width:100%; padding:30px 0; background:#000; color:#fff; font-size:2rem; font-weight:700;}
.mob-gnb-mid ul li a.on{color:#58a3f8;}
.mob-gnb-btm ul li{position:relative;}
.mob-gnb-btm ul li a{display:block; padding:30px 50px; border-bottom:1px solid #ebebeb; font-size:2rem; font-weight:700; }
.mob-gnb-btm ul li a:after{content:''; background:url(../images/mobile-menu-go.png) no-repeat center center; width:15px; height:27px; position: absolute; right:50px;}


/* footer */

footer{background:#000; padding:40px 0; text-align: center; position:absolute; bottom:0; left:0; right:0;}
footer p{color:#fff; font-size:10px;}


/* container */

/* breadcrumb */
.page-nav{text-align:right; padding:15px 0;}
.page-nav ul{display:inline-block;}
.page-nav ul li{display:inline-block; color:#636363; font-size:12px;}
.page-nav ul li:after{content:'\2215'; padding:0 5px;}
.page-nav ul li:last-child:after{content:''; padding:0;}
.page-nav ul li.active{font-weight:bold;}


/* visual area */
.visual-area{background:url(../images/kv_w.jpg) no-repeat center top; background-size: cover; height:360px; position:relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align:center;}
.visual-area p{ font-family: 'Nanum Square', sans-serif; font-weight:700; color:#fff; font-size:32px; font-weight:bold;}


/* common */
.title{border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:15px 0; color:#501515; font-size:14px; font-weight:bold;}
.sub-title{font-weight:bold; color:#000; font-size:18px;}


/* fabric search */
.search-area{padding:50px 0;}
.search-box{margin-bottom:40px;}
.search-box:last-child{margin-bottom:0;}

.search-inputbox{position:relative; margin-top:15px; width:100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.search-inputbox input[type="file"] {position: absolute; width: 100%; height: 100%; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; top:0;}
.search-inputbox input.upload-name{width:85%; padding:10px 0; background:#fff; border:1px solid #ebebeb; margin:0;}
.search-inputbox .fake-button{text-align:center; width:15%; cursor:pointer; border:1px solid #a1a1a1; background:#a1a1a1; color:#fff; padding:10px 0; font-weight:bold; }


/* fabric list */
.fabric-list{padding:80px 0;}
.fabric-list .row{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.fabric-col{width:200px;}
.fabric-col:nth-child(3n-2){margin-bottom:40px;}
.fabric-col:nth-child(3n-1){margin-bottom:40px;}
.fabric-col:nth-child(3n){margin-bottom:40px;}
.fabric-col .col-top{padding-bottom:10px;}
.fabric-col .col-top p{ font-weight:700; font-size:13px; color:#383737; font-weight:bold; }
.fabric-col .col-top .color{display:inline-block; font-size:16px; color:#787878; padding-left:10px;}
.fabric-col .fabric-thumbnail{position:relative; overflow:hidden; border:1px solid #ebebeb; width:100%; height:200px;}
.fabric-col .fabric-thumbnail img{max-height:200px; max-width:100%; width:100%; height:100%;}
.fabric-col .col-btm{padding-top:15px;}
.fabric-col .col-btm .price:before{content:'\20A9'; padding-right:5px;}
.fabric-col .col-btm .price{font-size:16px; color:#000; font-weight:700;}
.fabric-col .col-btm .fabric-type{max-height:40px; height:40px;}
.fabric-col .col-btm .fabric-type li{display:inline-block; color:#aaa; font-size:12px;}
.fabric-col .col-btm .fabric-type li:after{content:'\002B'; padding:0 4px;}
.fabric-col .col-btm .fabric-type li:last-child:after{content:''; padding:0;}



/* inquiry area */
.fabric-pic-area{padding:80px 0;}
.fabric-pic-bg{position: relative; width:400px; height:400px; margin:0 auto; border:1px solid #ebebeb; box-sizing: border-box;}
/*.sof-key{position:absolute; bottom:0; left:0; right:0; background:rgba(255,255,255,0.5); padding:20px 15px;}*/
.sof-key{position:; bottom:0; left:0; right:0; background:rgba(255,255,255,0.5); padding:20px 15px;}

.sof-key p{font-size:16px; font-weight:bold; color:#000;}
.thumb-pager-area{width:400px; margin:15px auto 0 auto;}
.thumb-pager{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.thumb-pager li{width:90px; height:90px; border:1px solid #ebebeb; cursor:pointer;}
.inquiry-button{text-align:center;}
.inquiry-button button{display:inline-block; width:200px; margin:0 auto; padding:15px 0; background-color:#fff; border:1px solid #58a3f8; color:#58a3f8; font-size:16px; font-weight: bold;}
.inquiry-button button:hover{background:#58a3f8; color:#fff;}


/* info-view-area */
.info-view-area{padding:50px 0 80px 0;}


/* default table style */
.default-table{width:100%; border-collapse: collapse;}
.default-table th,.default-table td{padding:10px; border-top:1px solid #dadada; border-bottom:1px solid #dadada;}
.default-table th{font-family: 'NotoSans-Regular', sans-serif; background:#f7f7f7; width:30%; font-weight:400; border-right:1px solid #dadada;}
.default-table td{width:70%;}


/* welcome */
.welcome-area{padding:55px 0;}
.notice-text{font-weight:300; font-size:24px; line-height:1.4em; color:#636363; margin-bottom:50px;}
.welcome-area p span{color:#58a3f8;}

.button-area ul.btn-3-type{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.button-area ul.btn-2-type{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify2; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-evenly; justify-content: space-evenly; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}


.button-area{padding-bottom:100px;}
.button-area ul.btn-3-type li{text-align: center; width:30%;}
.button-area ul.btn-2-type li{text-align: center; width:30%;}
.button-area ul li a{display:block; width:100%; padding:15px 0; color:#58a3f8; border:1px solid #58a3f8;}
.button-area ul li a:hover{background:#58a3f8; color:#fff;}

/* simulation */
.prepare-notice{padding:50px 0;}


/* login & find password */
.login-area{padding-top:200px;}
.login-title{font-size:28px; color:#636363; margin-bottom:40px;}
.login-area-inner{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.login-input-area{width:75%;}
.login-input-area>div{margin-bottom:20px;}
.login-input-area .input-title{padding-bottom:10px; font-size:16px; color:#636363;}
.login-button-area{width:18%; position:relative; bottom:-3px;}
.login-button-area button{background:#fff; border: 1px solid #58a3f8; color:#58a3f8; width:100%; font-size:16px; height:121px; }
.login-button-area button:hover{background:#58a3f8; color:#fff;}
.find-pw-button a{display:inline-block; font-size:14px; color:#636363;}
.find-pw-button a:hover{color:#000;}

.find-pw-area .input-title{padding-bottom:10px; font-size:16px; color:#636363; text-align:left;}
.find-pw-area{width:100%; text-align:center;}
.find-pw-area .input-box{margin-bottom:50px;}

.default-button{display:inline-block; text-align:center; margin:0 auto;}
.default-button>a,.default-button>button{display:block; padding:15px 25px; color:#58a3f8; border:1px solid #58a3f8; font-size:16px;}
.default-button>a:hover,.default-button>button:hover{background:#58a3f8; color:#fff;}

/* my page */
.mypage-table{width:100%; border-collapse: collapse;}
.mypage-table thead,.mypage-table tbody{border-top:1px solid #dadada; border-bottom:1px solid #dadada;}
.mypage-table th,.mypage-table td{padding:10px 5px; border-right:1px solid #dadada;}
.mypage-table th{background:#f7f7f7; font-weight:bold; }
.mypage-table th:last-child,.mypage-table td:last-child{border-right:0;}
.mypage-table td{text-align:center; border-bottom:1px solid #dadada;}


/* default form style */
.form-area{padding:50px 0;}
.form-area>p{padding-bottom:15px;}
.form-area .default-table th, .form-area .default-table td{padding:10px;}
.form-area .default-table td:after{content:''; clear:both; display:block;}
.form-area .input-box,.form-area .select-box,.form-area .date-box{width:73%; float:left;}
.form-area .mail-button{width:25%; float:right; text-align: center;}
.form-area .mail-button a{display:block; background:#dadada; padding:8px 0; font-weight:bold;}
.form-area .radio-box{display:inline-block; margin-right:65px;}
.form-area .check-box{display:inline-block; margin-right:100px;}
.form-area .radio-box:last-child,.form-area .check-box:last-child{margin-right:0;}


/* submit button */
.submit-button{padding:55px 0; width:30%; margin:0 auto;}
.submit-button button{background:#fff; color:#58a3f8; border:1px solid #58a3f8; padding:15px 0; font-size:16px; width:100%;}
.submit-button button:hover{background:#58a3f8; color:#fff;}

/* input(text) */
.input-box input{width:100%; padding:8px 10px; border:1px solid #dadada; font-size:14px; text-align:left;}
.input-box input:disabled{opacity:1; -webkit-text-fill-color: inherit; background:#fff; border-color:transparent; color:#000;}
p.info-view-type{width:100%; padding:8px 10px; font-size:14px; text-align:left;  color:#000}

/* input(datepicker) */
.date-box input{width:100%; padding:8px 10px; border:1px solid #dadada; font-size:14px; text-align:left;}
.ui-datepicker .ui-datepicker-title,.ui-datepicker-month,.ui-datepicker-year{font-family: 'NotoSans-Bold';}
.ui-datepicker th{font-family: 'NotoSans-Regular', sans-serif;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{border:0 !important; background:0 !important;}
.ui-datepicker td span, .ui-datepicker td a{text-align:center !important;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight,.ui-state-active, .ui-widget-content .ui-state-active{border-color:#58a3f8 !important; background:#58a3f8 !important; color:#fff !important;}

/* input(file) */
.input-box.file-upload{position:relative; width:100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.input-box.file-upload input[type="file"] {position: absolute; width: 100%; height: 100%; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; top:0;}
.input-box.file-upload input.upload-name{width:80%; padding:8px 10px; background:#fff; border:1px solid #ebebeb; margin:0;}
.input-box.file-upload .fake-button{text-align:center; width:20%; cursor:pointer; border:1px solid #a1a1a1; background:#a1a1a1; color:#fff; padding:8px 0; font-weight:bold; }

/* selectbox */
.select-box select{width:100%; padding:8px 10px; border:1px solid #dadada; font-size:14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/select-arrow.png) no-repeat 95% 50%; }
.select-box select::-ms-expand { display: none; }

.select-box2 select{width:30%; padding:8px 10px; border:1px solid #dadada; font-size:14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/select-arrow.png) no-repeat 95% 50%; }
.select-box2 select::-ms-expand { display: none; }

.select-box3 select{width:70%; padding:8px 10px; border:1px solid #dadada; font-size:14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/select-arrow.png) no-repeat 95% 50%; }
.select-box3 select::-ms-expand { display: none; }


/* radio */
.radio-box{position:relative;}
.radio-box input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.radio-box input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: 0; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius: 100%; }
.radio-box input[type="radio"] + label:active:before,
.radio-box input[type="radio"]:checked + label:active:before {}
.radio-box input[type="radio"]:checked + label:before { background: #fff;}
.radio-box input[type="radio"]:checked + label:after { content: ''; position: absolute; top:0; left:0; width: 21px; height: 21px; background: #000; border-radius: 100%; border: 1px solid #ccc; }

/* checkbox */
.check-box{position:relative;}
.check-box input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 }
.check-box input[type="checkbox"] + label { display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.check-box input[type="checkbox"] + label:before { content: ' '; display: inline-block; width: 19px; height: 19px;  line-height: 19px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #fff; border: 1px solid #ccc; }
.check-box input[type="checkbox"] + label:active:before,
.check-box input[type="checkbox"]:checked + label:active:before { }
.check-box input[type="checkbox"]:checked + label:before {  content: '\2714'; background: #fff; border-color: #ccc; }

/* textarea */
.text-box{width:100%; }
.text-box textarea{width:100%; resize: none; border:1px solid #ccc; padding:10px; font-size:14px; height:210px; overflow-y: auto;}

.green_window {
	display: inline-block;
	width: 300px; height: 34px;
	border: 3px solid #efefef;
	background: white;
}

.detailsearch_window {
	display: inline-block;
	width: 400px; height: 34px;
	border: 3px solid  #efefef;
	background: white;
}
.input_text {
	width: 348px; height: 21px;
	margin: 6px 0 0 9px;
	border: 0;
	line-height: 21px;
	font-weight: bold;
	font-size: 16px;
	outline: none;
}
.sch_smit {
	width: 54px; height: 34px;
	margin: 0; border: 0;
	vertical-align: top;
	background: #22B600;
	color: white;
	font-weight: bold;
	border-radius: 1px;
	cursor: pointer;
}
.sch_smit:hover {
	background: #56C82C;
}


/* mediaquery */
@media screen and (max-width:1024px) and (min-width: 861px){
    .gnb ul li a{font-size:13px;}
}

@media screen and (max-width: 860px){
    .mobile{display:block !important;}
    .web{display:none;}

    .header-top{padding:50px 0; border-bottom:1px solid #ebebeb;}
}

@media screen and (max-width: 680px){
    .container-680{width:100%; padding:0 15px;}
    .header-top{padding:25px 0;}
    .mob-gnb-top{padding:25px 15px;}
    .mob-menu-button button,.mob-menu-button button img{width:20px; height:auto;}
    .mob-gnb-top>button{right:15px;}
    .mob-gnb-top>button img{width:20px; height:auto;}
    .mob-gnb-mid ul li a{font-size:1rem; padding:15px 0;}
    .mob-gnb-btm ul li a{padding:15px 25px; font-size:1rem;}
    .mob-gnb-btm ul li a:after{right:25px; width:8px; height:14px; background-size:contain !important;}

    .search-inputbox input.upload-name{width:75%;}
    .search-inputbox .fake-button{width:25%;}
    .fabric-col{width:150px;}
    .fabric-col .fabric-thumbnail{height:150px;}
    .fabric-col .fabric-thumbnail img{max-height:150px;}
    .fabric-col .col-top .color{display:block; padding-left:0; padding-top:5px;}

    .fabric-pic-bg{width:300px; height:300px;}
    .thumb-pager-area{width:300px;}
    .thumb-pager li{width:70px; height:70px;}

    .form-area .input-box, .form-area .select-box{width:100%; float:none;}
    .form-area .mail-button{width:100%; float:none; margin-top:10px;}
    .form-area .radio-box{display:block; margin-right:0; margin-top:10px;}
    .form-area .check-box{display:block; margin-right:0; margin-top:10px;}
    .input-box.file-upload input.upload-name{width:60%;}
    .input-box.file-upload .fake-button{width:40%;}

    .submit-button{width:90%;}
    .login-area{padding-top:100px;}

    .mypage-table th,.mypage-table td{font-size:0.725rem;}


    .green_window {
    	width: 200px; height: 34px;

    }
    .input_text {
    	width: 200px; height: 21px;

    }
}