@charset "utf-8";


/* 메인 */

.main_pop {display:none;overflow:hidden;}
.main_pop.on.pop-show {display:block}
.main_pop.on.pop-show + header .lang {top:202px;}
.main_pop p {padding:20px 0;1rem;text-align:center;color:#fff}
.main_pop a {margin-left:10px;font-size:0.875rem;color:#dfdfdf}
.main_pop img {width:70px;margin-top:-55px;}
.main_pop .right {float:right;margin-top:-25px;text-align:center}
.main_pop .close_area {margin-top:-20px;}
.main_pop .close_area #closeBtn {color:#d0c3e6}
.main_pop .close_area {margin-right:20px;color:#fff}

.main .bnr-area {text-align:center;background-color:#000;}
.main .bnr-area div {overflow:hidden;position:relative;max-height:640px;}
.main .bnr-area div video {opacity:0.7;}
.main .bnr-area div p {position:absolute;top:46%;left:50%;width:80%;transform: translate(-50%, -50%);color:#fff;font-size:2.5rem;line-height:1.5;}
.main .bnr-area div p span {display:block}
.main .bnr-area div button {margin-top:40px;width:120px;height:120px;}

.main .bg-gray {margin-top:-40px;}

.sub-bnr-area {height:300px;}
.sub-bnr-area p {font-size:3rem;color:#fff}

.top-menu {overflow:hidden;background-color:#ff5950;text-align:center;line-height:0}
.top-menu ul {display:inline-block;}
.top-menu ul li {float:left;}
.top-menu ul li a {display:block;color:#fff;padding:20px 60px;}
.top-menu ul li a:hover {text-decoration:underline;}

.main .modal.in .modal-dialog {width:80%;max-width:1000px;}
.main .modal-content {background:transparent;overflow:auto !important;height:auto;border:none}
.main .modal-body {padding:0}
.main .modal-header {border:none}
.main .close {color:#fff;text-shadow:none;opacity:1;font-weight:normal;font-size:3rem}

.link-area a {display:block;color:#fff;padding:10px 0;}

/* main, works */
.case-study ul {overflow:hidden;}
.case-study ul li {overflow:hidden;background-size:cover !important;background-position:center center !important;z-index:1 !important}
.case-study ul li a {display:block;height:480px;padding:25px;margin-bottom:20px;text-align:left;box-sizing:border-box;color:#fff;transition:all 0.2s ease}
.case-study ul li a:hover {background-color:rgba(0,0,0,0.75);color:#fff;}
.case-study ul li a .arrow {width:80px;height:80px;background:url(../../static/images/common/arrow-b-on.png);background-size:cover !important;}
.case-study ul li a:hover .arrow {background:url(../../static/images/common/arrow-b-on.png)}
.case-study ul li .tit {margin-top:-120%;transition:all 0.3s ease}
.case-study ul li a:hover .tit {margin-top:0;}
.case-study ul li a span {position:absolute;bottom:45px;}
.case-study .more {margin-top:50px;text-align:center;}

.main .feature {text-align:left;background:url(../../static/images/main/feature-bg.jpg) center bottom;background-size:cover;}
.main .feature .tit-area {margin-top:0;padding-right:20px;}
.main .feature .right div.box {position:relative;overflow:hidden;height:320px;width:100%;background-color:#fbfbfb;background-size:cover !important;background-position:center center !important;}
.main .feature .right div .tit {position:absolute;bottom:-100%;width:100%;padding:20px;background-color:#ff5950;transition:all 0.3s ease}
.main .feature .more.w {display:block;border:none}
.main .feature .more.w + p {margin:0;}
.main .feature .ab-r {width:30px;bottom: 0;top: 0;margin: auto;right: 20px;transition: all 0.3s ease;}
.main .feature .right div:hover .tit {bottom:0}
.main .feature .right div .tit p {color:#fff;}
.main .feature .tit-area p.sub-tit {width:80%}

.main .fonts {position:relative;overflow:hidden;height:730px;background-color:#e1e6ec;background-position:center center !important;background-size:cover !important;transition:all 0.3s ease;}
.main .fonts .tit-area {position:absolute;width:100%;bottom:-100%;padding:80px 0;background-color:rgba(234,80,76,0.93);transition:all 0.3s ease;}
.main .fonts:hover .tit-area {bottom:0}
.main .fonts .tit-area h3 {color:#fff;}
.main .fonts .tit-area p {color:#fff;}
.main .fonts .tit-area a {margin-top:80px;}

.main .more-sandoll .inner {padding-top:60px;}
.main .more-sandoll .ico {width:70px;margin-bottom:-20px;}

.main .last-txt {padding:250px 0}
.main .last-txt p {display:inline;font-size:2.9rem;border-bottom:4px solid #3d3935;}
 
/* fonts */
.fonts.sub-main-full:after {background:url(../../static/images/sub/fonts-bg.jpg);}

.fonts .service-area {margin-bottom:-20px;}
.fonts .service-area li {margin-bottom:20px;padding:10px;text-align:center;}
/* .fonts .service-area li:nth-child(2n) {margin-top:-20px;} */
.fonts .service-area .tit-area h4 {margin:10px 0 40px;}
.fonts .service-area .inner {padding:40px 20px 0;background-color:#fff;box-sizing:border-box;}
.fonts .service-area .inner table {margin-bottom:20px;}
.fonts .service-area .inner table td {padding:8px 0;}
.fonts .service-area .inner a {display:block;padding:25px 0;margin:0 -20px;border:4px solid #ff5950;transition:all 0.3s ease}
.fonts .service-area .inner a:hover {background-color:#ff5950;color:#fff !important}
.fonts .service-area li:nth-child(2n) .inner a {border:4px solid #3d3935;color:#3d3935 !important;}
.fonts .service-area li:nth-child(2n) .inner a:hover {background-color:#3d3935;color:#fff !important;}
.fonts .service-area .price {margin-bottom:30px;margin-top:-15px;font-size:2rem;line-height:2.4rem}
.fonts .service-area .price em {font-size:1rem}


/* 폰트정보 하단 & 제품상세 미리보기 */
.font_list_area {position:relative !important;z-index:15}
.font_list_write {padding:5px 0;width:100%;background-color:#f1f1f1;margin-top:-1px}
.font_list_write fieldset {padding:15px 0}

.font_list_write .fid1 select {width:15%;margin-right:10px; vertical-align:top;}
.font_list_write .fid1 #font_search {width:35%;display:inline;}
.font_list_write .fid1 .range_area {display:inline-block;position:relative;width:calc(29% - 82px);padding:0 50px 0 40px;box-sizing:border-box}
.font_list_write .fid1 .range_area .font_text {position:absolute;left:7px;top:-12px;width:30px}
.font_list_write .fid1 .range_area .font_text span.bold {font-size:17px}
.font_list_write .fid1 .range_area .output {display:inline-block;position:absolute;top:1px;right:0}

.font_list_write .fid1 .thumb_btn {display:inline-block;float:right;margin-top:13px}
.font_list_write .fid1 .thumb_btn input {display:none}
.font_list_write .fid1 .thumb_btn label {display:inline-block;width:28px;height:28px;background-size:100% !important;cursor:pointer;text-indent:-9999px}
.font_list_write .fid1 .thumb_btn input:checked + label {background-position:0 -100%;background-size:100%}
.font_list_write .fid1 .thumb_btn .grid_ico {background:url(../../static/images/sub/btn-grid.png)}
.font_list_write .fid1 .thumb_btn .list_ico {background:url(../../static/images/sub/btn-list.png)}
.font_list_write .fid1 .thumb_btn .compare_ico {background:url(../../static/images/sub/btn-compare.png)}

#font-select-modal li>label {background:#fff;border:none;display:block;width:100%;}
#font-select-modal li>label input {display:none;}
#font-select-modal li>label svg:hover {background:#ff5950}

#font-select-modal li>label:hover path {fill: #fff;}
.font_list_write .fid2 {padding-top:0px}
.font_list_write .fid2 ul li {float:left;color:#979797}
.font_list_write .fid2 ul li:first-child {margin-top:12px;}
.font_list_write .fid2 ul li:last-child {width: calc(100% - 145px);float: right;}
.font_list_write .fid2 ul li .select-box {width:100%; color:#333;}
.font_list_write .fid2 input {display:none}
.font_list_write .fid2 input:checked + label {color:#000}
.font_list_write .fid2 label {color:#979797}
.font_list_write .fid2 label.on {color:#000}
.font_list_write .fid2 label:hover {color:#000}


.font_list_write .fid2 :disabled+label { opacity: .8; }
.font_list_write .fid2 :disabled+label:hover { color:#979797; }
.font_list_write .fid2 .active :disabled+label:hover { color:#000; }

.font_list_write .fid2 .space {padding:0 8px}
 
  
@media (max-width:767px) {
.font_list_write {padding:5px 0;background-color:#f1f1f1;margin-top:-1px}
.font_list_write fieldset {padding:15px 0}

.font_list_write .fid1 select {float:left;width:48%;margin:10px 0;vertical-align:top;}
.font_list_write .fid1 select#cate_selectbox {margin-right:4%}
.font_list_write .fid1 #font_search {width:100%;display:none;}
.font_list_write .fid1 .range_area {display:inline-block;position:relative;width:calc(100% - 82px);padding:0 45px 0 35px;box-sizing:border-box;margin-top:30px;}
.font_list_write .fid1 .range_area .font_text {position:absolute;left:7px;top:-9px;width:30px}
.font_list_write .fid1 .range_area .font_text span.bold {font-size:17px}
.font_list_write .fid1 .range_area .output {display:inline-block;position:absolute;top:1px;right:0}

.font_list_write .fid1 .thumb_btn {display:inline-block;float:right;margin-top:20px}
.font_list_write .fid1 .thumb_btn input {display:none}
.font_list_write .fid1 .thumb_btn label {display:inline-block;width:28px;height:28px;background-size:100% !important;cursor:pointer;text-indent:-9999px}
.font_list_write .fid1 .thumb_btn input:checked + label {background-position:0 -100%;background-size:100%}
.font_list_write .fid1 .thumb_btn .grid_ico {background:url(../../static/images/sub/btn-grid.png)}
.font_list_write .fid1 .thumb_btn .list_ico {background:url(../../static/images/sub/btn-list.png)}
.font_list_write .fid1 .thumb_btn .compare_ico {background:url(../../static/images/sub/btn-compare.png)}

#font-select-modal li>label {background:#fff;border:none;display:block;width:100%;}

#font-select-modal li>label input {display:none;}
#font-select-modal li>label:hover path {fill: #fff;}
.font_list_write .fid2 {padding-top:0px;text-align:center}
.font_list_write .fid2 ul li {float:none}
.font_list_write .fid2 ul li:first-child {margin:20px 0;}
.font_list_write .fid2 ul li:last-child {width:100%}

.font_list_write .fid2 input {display:none}
.font_list_write .fid2 input:checked + label {color:#000}
.font_list_write .fid2 label {color:#979797}
.font_list_write .fid2 label.on {color:#000}
.font_list_write .fid2 label:hover {color:#000}


.font_list_write .fid2 :disabled+label { opacity: .8; }
.font_list_write .fid2 :disabled+label:hover { color:#979797; }
.font_list_write .fid2 .active :disabled+label:hover { color:#000; }

 
#font_list_type.list ul li {padding:auto 10px !important;}

#font_list_type.list ul {padding:0 10px;}

.font_list_write .fid1 .thumb_btn span:last-child {display:none}
}


#font_list_type.grid .compare_area {display:none}
#font_list_type.grid ul li { float:left; }
#font_list_type.grid ul li.item.new:before {position:absolute;top:0px;left:10px;content:"New";color:#fff;background-color:#ff5950;padding:1px 12px;font-size:0.875rem;font-weight:bold;z-index:11}
#font_list_type.grid ul li.handle-scroll{ width:100%; padding: 30px; }
#font_list_type.grid ul li.item {margin-top:30px;}
#font_list_type.grid ul li.item a {display:block;overflow:hidden;position:relative;height:230px;border:2px solid #f5f5f5;text-align:center;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
}
#font_list_type.grid ul li.item a:hover {border:2px solid #ff5950}

#font_list_type.grid ul li.item .txt {position:absolute;top:42%;padding:20px;font-size:45px;
	-ms-transform:translateY(-50%);
	transform:translateY(-50%)}
#font_list_type.grid ul li.item dl {position:absolute;bottom:0;left:0;right:0;padding:20px 0;line-height:1.5;transition:all 0.1s ease}
#font_list_type.grid ul li.item dl dt {margin-bottom:5px;transition:all 0.1s ease}
#font_list_type.grid ul li.item:hover dl dt {color:#fff !important}
#font_list_type.grid ul li.item:hover dl {background-color:#ff5950;color:#fff}
#font_list_type.grid ul li.item dl dd.more_btn {display:none}

#font_list_type.grid .loading_ico {width:40px;margin:0 auto;margin-top:80px;}
#font_list_type.grid .loading_ico img {width:100%}

#font_list_type.list .compare_area {display:none}
#font_list_type.list .loading_ico {display:none}
#font_list_type.list ul li {overflow:hidden;position:relative;padding-top:20px;padding-bottom:20px;border-bottom:1px solid #dedede;background-color:#fff;clear:both;cursor:pointer;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	transition:all 0.2s ease;width:100%;}
	#font_list_type.list ul li:last-child { border-bottom:0px; }
#font_list_type.list ul li a {display:block}

#font_list_type.list ul li .txt {padding:20px 0;font-size:50px;white-space:nowrap}
#font_list_type.list ul li:hover .txt {color:#ff5950}

#font_list_type.list ul li dl {line-height:0}
#font_list_type.list ul li dl dt {display:inline-block;margin-right:15px;padding:20px 0;color:#ff5950}
#font_list_type.list ul li.item.new a dl dt:after {margin-left:20px;padding:4px 10px 4px;content:"New";color:#fff;font-size:0.875rem;background-color:#ff5950;}
#font_list_type.list ul li dl dd {display:inline-block;margin-right:15px;}

#font_list_type.list ul li dl dd.more_btn {
	opacity:0;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	transition:all 0.2s ease}	
#font_list_type.list ul li:hover dl dd.more_btn {opacity:1}	
#font_list_type.list ul li dl dd.company {font-size:13px}

#font_list_type.compare .list_grid_area {display:none}
#font_list_type.compare .loading_ico {display:none}
#font_list_type.compare .compare_area {margin-top:30px;overflow:hidden}
#font_list_type.compare ul li {box-sizing:border-box}
#font_list_type.compare ul li:last-child {margin:0}
#font_list_type.compare ul li dl {position:relative;border:2px solid #f5f5f5;}
#font_list_type.compare ul li dl:hover {border:2px solid #ff5950}
#font_list_type.compare ul li dl dt {overflow:hidden;padding:15px 20px;cursor:pointer;
	-webkit-transition:all 0.1s ease;
	-moz-transition:all 0.1s ease;
	-o-transition:all 0.1s ease;
	transition:all 0.1s ease}
#font_list_type.compare ul li dl dt button {margin-top:5px;margin-left:5px;background:url(../../static/images/sub/select_btn.png);width:14px;height:14px;background-size:100%; border:none;     display: inline-block;
    margin-left: 5px;
    vertical-align: middle;}
#font_list_type.compare ul li:hover dl dt button {background-position:0 -14px}
#font_list_type.compare ul li:hover dl dt {background-color:#ff5950;color:#fff}
#font_list_type.compare ul li dl dt p {float:left;font-size:20px; font-weight:normal;	}
#font_list_type.compare ul li:hover dl dt p {color:#fff}
#font_list_type.compare ul li dl dd select {position:absolute;right:10px;top:9px;width:150px;padding:10px;border:none}
#font_list_type.compare ul li:hover dl dd select {color:#fff;background:url(../../static/images/common/select-arrow-w.png)}
#font_list_type.compare ul li:hover dl dd select option{ color:#333; }
#font_list_type.compare ul li dl dd.text_area {padding:30px 20px 40px}
.font-select-modal .modal-header { display:none; }




/* works */
.works.sub-main-full:after {background:url(../../static/images/sub/works-bg.jpg)}
.ico-area {text-align:center;}
.ico-area .container {padding-bottom:50px;}
.ico-area .col-sm-4 {padding-top:10px;padding-bottom:10px;}
.ico-area .tit-area.sub-tit {padding:50px 70px !important;background-color:#fff}
.ico-area .tit-area.sub-tit h4 {margin-top:50px;text-align:left}
.ico-area .tit-area.sub-tit p {text-align:left}
.ico-area img {max-width:140px;text-align:center;display:inline-block;}
.works .partners ul li {display:none;padding:30px 0;text-align:center;transition:all 0.2s ease;}
.works .partners ul li:nth-child(-n+16) {display:block}
.works .partners ul:hover li {opacity:0.2}
.works .partners ul li:hover {opacity:1;box-shadow: 0 0 0 5px #ff5950 inset;}
.works .partners ul li:hover span {opacity:1}
.works .partners ul li img {max-width:230px}
.works .partners ul li span {opacity:0;bottom:20px;transition:all 0.2s ease}
.works .partners button span {display:none}
.works .partners button span:first-child {display:block;}

.customCase .img-box {position:relative;}
.customCase .img-box:before {content:"";display:block;padding-top:80%}

.case-tit .tit-area {margin-top:-80px;padding-left:20px;padding-right:20px;padding-top:40px !important;margin-bottom:40px;border-bottom:solid 7px #ff5950;background-color:#fff;}
.case-tit .pull-right {padding:20px;margin-bottom:40px;}
.case-tit table td {padding:4px 0;vertical-align:top}
.case-tit table td:last-child {text-align:right;padding-left:70px;}

.works .bnr-area {text-align:center;margin-top:50px;width:100%;background-color:#f1f1f1;}
.works .bxslider div:first-child {margin-top:40px}
.works .bxslider div:last-child {margin-bottom:40px}
.works .bxslider div {margin:20px 0;}
.works .bnr-area img {margin:20px 0;width:100%;max-width:800px;}
.bx-wrapper .bx-prev {background:url(../../static/images/common/arrow-w.svg);transform:rotate(180deg);-ms-transform:rotate(180deg);}
.bx-wrapper .bx-next {background:url(../../static/images/common/arrow-w.svg);background-size:cover !important;background-position:center center !important}
.bx-wrapper .bx-controls-direction a {width:40px;height:40px;margin-top:-20px;}

.contactUs .container {position:relative;padding:0 0 200px 0;}
.contactUs .col-md-8 {overflow:hidden;padding:60px 20px 80px}
.contactUs .col-md-4 {position:absolute;top:0;right:0;bottom:0;margin:auto;}
.contactUs .col-md-4 .bg-primary {position:relative;padding:60px 20px;}
.contactUs table tr td {width:50%;padding-bottom:20px;vertical-align:top}
.contactUs table tr:last-child td {padding:0;}

/* about */
.about.sub-main-full {background:rgba(0,0,0,0.2);}
.about.sub-main-full:after {background:url(../../static/images/sub/about-bg.jpg);}
.about .culture ul li {color:#fff;font-size:2.2rem;line-height:1.6}
.about #timeline #dates .circle {display:inline-block;width:22px;height:22px;background-color:#ff5950;border:5px solid #ff5950;border-radius:50px}
.about #timeline #dates .text-primary {display:inline-block;margin-top:20px;margin-left:-10px;font-size:1.5rem;transform:rotate(-55deg) !important;-ms-transform:rotate(-55deg) !important;}
.about #timeline #dates .selected .circle {background-color:#fff}
.about #timeline #dates li a {padding:10px;border:none;opacity:0.4}
.about #timeline #dates li a.selected {opacity:1;}
.about #timeline #dates li:hover a {opacity:1;}
.about #timeline #dates li a:hover {background-color:transparent;}

.about .col-sm-6 {overflow:hidden;padding:10px;cursor:auto}
.about .col-sm-6 .tit {padding:20px;text-align:left;background-color:#fff} 
.about .col-sm-6 .tit span {display:block;margin-top:20px;}
.about .col-sm-6 .tit h3 {margin:40px 0 20px;}

.about .culture > .more {margin-top:50px;}

/* sandoll story */
.sandollStory .pin a {display:block;overflow:hidden;background-color:#fff}
.sandollStory .user {margin-top:30px;}
.sandollStory .user span {display:inline-block;margin-top:2px;margin-left:10px;font-size:0.875rem}
.sandollStory .user img {width:55px;height:55px;border-radius:50%}

/* careers */
.careers.sub-main-full:after {background:url(../../static/images/sub/careers-bg.jpg);}
.careers .benefits > .more {margin-top:50px;}
.careers .hover-b li {display:none}
.careers .hover-b li:nth-child(-n+6) {display:block;}

.open-position .list li {margin-bottom:50px;line-height:2;}
.open-position .list li:last-child {margin-bottom:0}
.open-position .list a {font-size:1.313rem}
.open-position .list a span {font-size:1.8rem}
.open-position .list a em {line-height:2.3}
.open-position .list a:hover {color:#ff5950;border-bottom:2px solid #ff5950;}
.open-position .more {margin-top:50px;}

.open-position.end a:hover {text-decoration:none;border-bottom:2px solid #a9a9a9;}

/* sitemap */
.sitemap.sub-main-full {background:rgba(0,0,0,0.2);}
.sitemap.sub-main-full:after {background:url(../../static/images/sub/sitemap-bg.jpg)}
.sitemap h4 a {display:inline-block;padding:10px 0;font-size:1.313rem}
.sitemap .list-p {margin-top:60px;}
.sitemap .list-p ul {margin-top:10px;}
.sitemap .list-p ul li a {display:inline-block;margin-top:10px;}

/* ie8 */
.ie8 .ie-area a {display:block;margin-top:100px;width:220px;}
.ie8 .type_box li {text-align:center}
.ie8 .type_box li a {display:block;padding:20px;}
.ie8 .type_box li span {display:inline-block;margin-top:20px;}
.ie8 .type_box img {width:100px;}

/* error */
.error.sub-main-full:after {background:url(../../static/images/sub/about-bg.jpg)}


/* notice */
.notice {text-align:center;}
.notice .top {font-size:0.875rem;}
.notice .top .pull-right {opacity:0.6;}
.notice .top a {font-size:0.875rem}
.notice .top a:hover {text-decoration:underline;}
.notice h3 {margin-bottom:30px;}
.notice h4 {margin-bottom:70px;}
.notice p.inner {text-align:left;margin-top:30px;font-size:1rem;word-break: keep-all;text-indent:-15px}
.notice .info {font-size:1.12rem}
.notice .info.fir {margin:100px 0;}
.notice .sign {
    display: inline-block;
    margin-bottom: -19px;
    margin-left: 15px;
    width: 50px;
    height: 50px;
    background: url(/static/images/sub/sandoll-sign.png);
    background-size: cover;
}