@charset "utf-8"; /* 에스코어 폰트 */ @import url("SDdream.css"); .sd-600 { font-family: 'SCdream'; font-weight: 600; } .sd-400 { font-family: 'SCdream'; font-weight: 400; } .sd-200 { font-family: 'SCdream'; font-weight: 200; } /* 코이타 템플릿*/ /* ::selection {background:#ef4122; color:#FFF; text-shadow:none;} ::-moz-selection {background:#ef4122; color:#FFF; text-shadow:none;} ::-webkit-selection {background:#ef4122; color:#FFF; text-shadow:none;} */ .koita #header_container { background: transparent; transition: background .5s ease; } #info_container .main-banner-area-wrap { background-color: #fda313; background-image: url("../../img/koita/bg.png"); background-size: cover; background-position: center; } /* 헤더 */ #header_container { height:auto; padding:25px; } #header_container.scroll { height: auto; padding-top: 20px; background: #fff;} #header_container .header { padding-top: 0; } #header_container .header .m-search-btn { width: 27px; height: 32px; border: none; background: transparent; outline: 0; margin-top: 10px; margin-right: 5px; display: none; float: right; } #header_container .header .m-search-btn img { width: 100%; height: 100%; } @media (max-width: 1199px) { .ipoffice-container.koita #header_container .gnb-area .gnb-r ul { position: relative; right: 0; top: 0; width: auto; } } .ipoffice-container.koita #header_container .logo-area h1 a { background: none; width: 400px; height: auto; vertical-align: top; } .ipoffice-container.koita #header_container .logo-area h1 a img { width: 100%; height: auto; } @media (max-width: 899px) { .ipoffice-container.koita #header_container .logo-area { margin-top: 8px; } .ipoffice-container.koita #header_container { padding-top: 15px; height: 85px; } #header_container .header .m-search-btn { display: block; } #header_container .header .search-box { display: none; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .txt-wrap h2, #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .txt-wrap p { text-shadow: 0 2px 10px rgba(0,0,0,0.1); } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .visual-img { display: none; } } #header_container .search-box { float: right; width: 300px; height: 38px; border-radius: 4px; background: rgba(0,0,0,0.10); position: relative; cursor: pointer; transition: box-shadow .25s ease; /*margin-top: 10px;*/ } #header_container .search-box:hover, #header_container .search-box:active, #header_container .search-box:focus { box-shadow: 0 0 8px 3px rgba(255,255,255,0.1); } #header_container .search-box .search-btn { width: 18px; height: 18px; position: absolute; top: 50%; right: 8px; border: none; background: none; outline: 0; margin-top: -9px; } #header_container .search-box input[type=text] { background: transparent; border: none; width: 100%; height: 100%; color: #fff; font-size: 1.2rem; letter-spacing: 0; padding: 0 45px 0 15px; cursor: pointer; } #header_container .search-box input[type=text]::-ms-input-placeholder { color: rgba(255,255,255,0.50); } #header_container .search-box input[type=text]::-webkit-input-placeholder { color: rgba(255,255,255,0.50); } #header_container .search-box input[type=text]::-moz-placeholder { color: rgba(255,255,255,0.50); } #header_container .main-selectbox { width:130px; height: 31px; line-height: 32px; margin-left: 0; float: left; background:transparent; border:1px solid #9f9f9f; margin-right: 20px; } #header_container .main-selectbox .div-select {position: relative; line-height: 34px; font-family: 'Arial'; color: #fff; height: 36px; vertical-align: top; font-size: 1.2rem; position: absolute; top:0; left: 0; width:100%;} #header_container .main-selectbox .div-select .select-tit {position: relative; text-align: center; padding: 0 10px; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; width: 100%;} #header_container .main-selectbox .div-select .select-tit:after {content: ''; position: absolute; top:7px; left:88px; width:4px; height:4px; background:#fff; border-radius: 50%; animation-name: one; animation-duration: .6s; animation-direction: alternate; animation-iteration-count: infinite;} #header_container .main-selectbox:before { content: ''; position: absolute; top:50%; margin-top:-8px; right:8px; background:url("../../img/svg/down_b_ico.svg")no-repeat; width:15px; height:15px; opacity: 1;} @keyframes one { from { opacity: 1 } to { opacity: 0;} } #header_container .main-selectbox .div-select .option { display: none; position: absolute; top:100%; width: 100%; background: transparent; border:1px solid #fff; border-radius: 3px;} #header_container .main-selectbox .div-select.on .option { display: block;border:1px solid #eee;} #header_container .main-selectbox .div-select .option ul li { padding:0 10px; float: none; width:100%;background:#fff; } #header_container .main-selectbox .div-select .option ul li:hover {background:#f4f4ff} #header_container .main-selectbox .div-select .option ul li:after {display: none;} #header_container .main-selectbox .div-select .option ul li a {color: #fda313; font-weight: 600;} #header_container .selectbox select { height:30px;} #header_container .selectbox label { color:#535353; font-weight: bold; line-height:30px;} #header_container .header::after {content: ''; display: block; clear: both; } /* 홈 */ .koita #header_container .gnb-area { top:0; } .koita #header_container .gnb-area .gnb-r ul li a { font-weight: 600; font-size: 1.3rem; color: #535353;} .koita #header_container .gnb-area .gnb-r ul li.lang a .label { margin-right:0; background:#422c4f; color: #fff; font-family: inherit; height:auto; line-height: normal; padding:0 9px 2px; letter-spacing: 0; position: relative; top: -2px; } .koita #header_container .gnb-area .gnb-r ul li.lang a .txt { font-family: inherit; font-size: 1.3rem; font-weight: 500;} .koita #header_container .gnb-area .gnb-r .search-box { width:185px; background:#eaeaea;} .koita #header_container .gnb-area .gnb-r .search-box input[type=text] { color: #888; } .koita #header_container .gnb-area .gnb-r .search-box input[type=text]::-ms-input-placeholder { color: #888; } .koita #header_container .gnb-area .gnb-r .search-box input[type=text]::-webkit-input-placeholder { color: #888; } .koita #header_container .gnb-area .gnb-r .search-box input[type=text]::-moz-placeholder { color: #888; } .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .banner-btn { color: #fff; } .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-navi { bottom: 0; } .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .visual-img { top: 50px; } /* 코이타 리뉴얼 css */ .ipoffice-container.koita #info_container { padding-top: 88px; } .ipoffice-container.koita #info_container .today-keyword-area-wrap { padding: 120px 0 80px;} .ipoffice-container.koita #info_container .category-browsing-area-wrap { background:#fff;} /* button style */ .btn-style-wrap .button { border:0; background: none; border-radius: 3px; margin-left: 3px; margin-top:0; opacity: 1; transition: opacity .2s; } .btn-style-wrap .button:first-child { margin-left: 0; } .btn-style-wrap .button.btn-gradient { color:#fff; background: #ff7d00; background: -moz-linear-gradient(left, #ff7d00 -1%, #ff7d00 0%, #ffa912 100%); background: -webkit-linear-gradient(left, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); background: linear-gradient(to right, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ffa912',GradientType=1 ); } .btn-style-wrap .button.btn-border-b { border: 1px solid #422c4f; color: #422c4f; background:#fff; } .btn-style-wrap .button.btn-border-or { border: 1px solid #fda313; color: #fda313; background:none; } .btn-style-wrap .button.btn-blue { background: #647CE3; color: #fff; } .btn-style-wrap .button:hover { opacity: .9; } /* banner */ .koita-banner-area-wrap {background-image: url('.././../img/koita/koita_banner.png'); background-repeat: no-repeat; background-size: cover; width:100%; height:407px; background-position:center; } .koita-banner-area-wrap .banner-txt {position:relative; width:1200px; margin:0 auto; padding:50px 0 85px; height:100%; } .koita-banner-area-wrap .banner-txt .tit { font-size: 5rem; line-height: 1.5; color:#fff; z-index: 1; position: relative;} .koita-banner-area-wrap .banner-item { position: absolute; top:0; right:0; height: 100%;} .koita-banner-area-wrap .banner-item img { height:100%; } @media (max-width: 1200px) { .koita-banner-area-wrap { height: auto; } .koita-banner-area-wrap .banner-txt { width: 100%; padding:50px 20px 100px;} .koita-banner-area-wrap .banner-item { right: 20px;} } @media (max-width: 650px) { .koita-banner-area-wrap .banner-txt .tit { font-size: 3rem; } } @media (max-width: 420px) { .koita-banner-area-wrap .banner-txt .tit { position: relative; z-index: 2; text-align: center} .koita-banner-area-wrap .banner-item { z-index: 1; opacity: .3; right: 20px;} } /* 롤링박스 */ .koita #info_container .main-banner-area-wrap .patent-keyword-combination-box { margin-top: 60px; background: #fda313; } .koita #info_container .main-banner-area-wrap .patent-keyword-combination-box #slider .title a .keyword:after { background: #ef4122 } /* 체크박스커스텀 */ .checkbox { display: none; } .checkbox-label { min-width: 15px; height: 15px; display: inline-block; background: url(../../img/common/checkbox_03.png)no-repeat; background-size: 15px 30px; background-position: 0 0; padding-left: 15px; line-height: 15px; color: #9DAACC; font-size: 1.2rem; letter-spacing: 0;} .checkbox:checked + .checkbox-label { background-position: 0 -15px; } /* 오늘의 키워드 */ .koita #info_container .area-title h2 .keyword { color: #fda313; } .koita #info_container .today-keyword-area-wrap .keyword-content-wrap ul li>a:hover .txt-area .content-title { color: #fda313; } .koita #info_container .today-keyword-area-wrap .keyword-content-wrap .navi { background: #422c4f; } /* 샘플 다운로드, 리포트 신청내역 버튼 */ #info_container .btn {margin-top:40px;} #info_container .btn button { border:none; background:none; margin-right: 10px; height:40px; letter-spacing: 0; font-size: 1.4rem; font-weight: 500; padding:0 17px; border-radius: 3px; outline: 0; transition: background .3s; margin-bottom: 15px;} #info_container .btn button.btn-01 { background:rgba(255,255,255,1); color:#fda313; font-weight: 600} #info_container .btn button.btn-02 { border:1px solid #fff; color:#fff;background:rgba(255,255,255,0.1); display: block} #info_container .btn .premium-button-wrap {display: inline-block; position: relative;} #info_container .btn .premium-button-wrap .point {position: absolute; left: 235px; top: 33%; transform: translateY(-50%);margin-left: -40px; width: 315px; height: 30px; line-height: 29px; text-align: center; color: #00259c; font-size: 1.3rem;font-weight: 600;background: #fff; border-radius: 3px; animation: point 0.4s alternate infinite ease; box-shadow: 4px 5px 7px #141a8a;} @keyframes point { 0% {left: 235px; } 100% {left: 238px;} } .point:after { display: block;content:"";position:absolute; top:50%; transform: translateY(-50%);left: -5px; width: 0px;height: 0px;border-right: 5px solid #fff;border-top: 5px solid transparent; border-bottom: 5px solid transparent; } @media (max-width: 899px) { #info_container .btn button.btn-02 {margin:0 auto;} #info_container .btn {margin-top: 60px;} #info_container .btn .premium-button-wrap .point {margin-left: -286px; font-size:1.2rem; width: 270px} .point:after {top: auto; bottom: -10px; border-top: 5px solid #fff;border-left: 5px solid transparent; border-right: 5px solid transparent; left: 50%; transform: translateX(-50%);} @keyframes point { 0% { top:-27px } 100% {top: -30px} } } @media(max-width: 372px) { #info_container .btn .premium-button-wrap .point {top: -85px} .point:after {left: 52%} @keyframes point { 0% { top: -85px } 100% {top: -87px} } } #info_container .btn button.btn-01:hover {background:rgba(255,255,255,0.8);} #info_container .btn button.btn-02:hover {background:rgba(255,255,255,0.2);} #info_container .btn button.btn-premium { color: #fff; background: #f28e26; /* Old browsers */ background: -moz-linear-gradient(left, #f28e26 0%, #fd644f 100%, #fd644f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #f28e26 0%,#fd644f 100%,#fd644f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #f28e26 0%,#fd644f 100%,#fd644f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28e26', endColorstr='#fd644f',GradientType=1 ); /* IE6-9 */ } /* 패스트롤링 위 메인시안02 */ .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-navi02 {position: relative; bottom:100px; margin-bottom: 20px;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list { height: 560px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 {padding:30px; background: rgba(0,0,0,0.15); height: auto;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 li {padding:0; height: auto;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 li .txt-wrap {padding: 0; position: static;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 li .txt-wrap h2 {font-size:2.5rem;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 li .txt-wrap p {font-size: 1.4rem; margin-top: 5px;} /* 카테고리 브라우징 */ .koita #info_container .category-browsing-area-wrap { background: #f8f8f8; padding: 80px 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area { width: 1200px; margin: 0 auto; padding-bottom: 80px;} .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area { position: relative; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header { background: #fff; border: 1px solid #dee3eb; height: 50px; padding: 0 15px; transition: height .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select { display: inline-block; float: left; height: 100%; overflow: hidden; width: 100%; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box { display: inline-block; float: left; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul { overflow-y: auto; white-space: nowrap; height: calc(100% + 30px); } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li { display: inline-block; height: 100%; font-size: 1.4rem; color: #999; line-height: 48px; padding: 0 10px; position: relative; cursor: pointer; height: 48px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li.select { font-weight: bold; color: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li.select:after { position: absolute; content: ''; left: 0; bottom: 0; left: 0; width: 100%; height: 2px; background: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li .label-wrap { display: inline-block; margin-left: 7px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li .label-wrap .label { font-family: 'Arial','Malgun Gothic','Dotum'; font-size: 1.1rem; background: #F2F2F7; padding: 0 8px; height: 16px; line-height: 16px; display: inline-block; border-radius: 12px; color: #222; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li .view-btn { display: inline-block; margin-right: 3px; opacity: 0.4; transition: opacity .25s ease; height: 15px; line-height: 16px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li .view-btn:hover { opacity: 1; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select ul li .view-btn img { width: 14px; height: 14px; margin-top: 2px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box { height: 35px; background: #f8f8f8; position: relative; border-radius: 3px; width: 250px; margin-top: 7px; margin-left: 20px; cursor: pointer; transition: box-shadow .25s ease; transition: width .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box input[type=text] { width: 100%; height: 100%; border: none; background: transparent; outline: 0; padding-left: 10px; letter-spacing: 0; cursor: pointer; border-radius: 3px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box input[type=text]:hover, .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box input[type=text]:active, .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box input[type=text]:focus { box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.1) inset; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box .search-btn { position: absolute; top: 50%; margin-top: -10px; right: 10px; width: 20px; height: 20px; border: none; background: none; outline: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap { float: right; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a { font-size: 1.2rem; height: 100%; display: inline-block; line-height: 48px; opacity: .4; font-weight: 500; margin-right: 10px; transition: opacity .25s ease; padding-right: 18px; background: url(../../img/svg/up_down_normal_ico.svg) no-repeat; background-position: right center; background-size: 15px 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a.up { background: url(../../img/svg/up_down_up_ico.svg) no-repeat; background-position: right center; background-size: 15px 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a.down { background: url(../../img/svg/up_down_down_ico.svg) no-repeat; background-position: right center; background-size: 15px 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a.reset { background: url(../../img/svg/reset_ico.svg) no-repeat; background-position: right center; background-size: 15px 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a:hover { opacity: 0.9; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a:last-child { margin-right: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a.select { opacity: 1; color: #2b3245; font-weight: bold; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body { background: #fff; border-left: 1px solid #dee3eb; border-bottom: 1px solid #dee3eb; border-right: 1px solid #dee3eb; max-height: 268px; overflow: hidden; transition: max-height .5s ease-out; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list { padding: 15px 20px; padding-bottom: 8px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li:last-child { margin-left: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li { display: inline-block; margin-right: 15px; margin-bottom: 12px; cursor: default; letter-spacing: 0; font-size: 1.25rem; color: #555; position: relative; line-height: 15px; font-weight: 500; transition: color .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li a:hover { color: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #999; margin-right: 5px; margin-bottom: 3px; transition: background .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li:hover .dot { background: #555; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .label-wrap { display: inline-block; margin-left: 3px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .label-wrap .label { font-family: 'Arial','Malgun Gothic','Dotum'; font-size: 1.1rem; background: #F2F2F7; padding: 0 8px; height: 16px; line-height: 16px; display: inline-block; border-radius: 12px; color: #222; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .view-btn { display: inline-block; margin-right: 3px; opacity: 0.4; transition: opacity .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .view-btn:hover { opacity: 1; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li .view-btn img { width: 14px; height: 14px; margin-top: 2px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li.disable { cursor: not-allowed; opacity: 0.3; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li.disable a { cursor: not-allowed; font-weight: 300; letter-spacing: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li.disable a:hover { color: #2b3245; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li.disable:hover .dot { background: #999; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body ul.category-list li.disable .label-wrap { display: none; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .breadcrumb { width: 100%; min-height: 30px; background: #f8f8f8; border-bottom: 1px solid #eee; padding: 10px 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .breadcrumb ul li { display: inline-block; font-family: 'Arial'; font-size: 1.2rem; letter-spacing: 0; color: #555; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .breadcrumb ul li a { font-size: 1.2rem; letter-spacing: 0; color: #555; transition: color .25s ease; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .breadcrumb ul li a:hover { color: #222; text-decoration: underline; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .breadcrumb ul li.arrow { margin: 0 5px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .on-off-btn { position: absolute; z-index: 2; width: 50px; height: 15px; background: #fff; text-align: center; border-left: 1px solid #dee3eb; bottom: -15px; border-right: 1px solid #dee3eb; border-bottom: 1px solid #dee3eb; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; left: 50%; margin-left: -25px; overflow: hidden; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .on-off-btn img { width: 30%; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area #body_on_off_toggle:checked ~ .body { max-height: none; } @media all and (max-width: 1259px) { .koita #info_container .category-browsing-area-wrap .category-browsing-area { width: 100%; padding: 0 30px; } } @media all and (max-width: 899px) { .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header { overflow: hidden; padding: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .type-select { width: 100%; padding: 0 15px; border-bottom: 1px solid #eee; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box { margin-left: 15px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap { padding: 0 15px; } .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list01 {height:auto; min-height: 300px;} .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list02 {height:auto; } .koita #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-navi02 {bottom:40px;} } @media all and (max-width: 650px) { .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .search-box { width: calc(100% - 30px); float: left; } } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result { border-top: 1px solid #dee3eb; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .s-title { display: block; padding: 20px; padding-bottom: 0; font-size: 1.4rem; font-weight: bold; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .s-title span.label { display: inline-block; height: 20px; padding: 0 15px; background: #F2F2F7; line-height: 20px; font-size: 13px; border-radius: 10px; margin-left: 10px; } @media all and (max-width: 500px) { .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap { padding: 0 20px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .header .array-btn-wrap a { line-height: 30px; } } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap { padding-bottom: 10px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li { display: block; padding-bottom: 15px; border-bottom: 1px dotted #dee3eb; margin-bottom: 20px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li:last-child { padding-bottom: 0; border-bottom: none; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .big-category { margin-bottom: 5px; display: inline-block; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .big-category h6 { font-size: 1.5rem; font-weight: bold; display: inline-block; line-height: 18px; color: #000; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .big-category:hover h6 { color: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .big-category img { width: 19px; height: 19px; margin-right: 3px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .category { display: inline-block; margin-bottom: 5px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .open-depth .category { display: block; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .category:last-of-type a { color: #fda313; font-weight: bold; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .category .label { font-family: 'Arial','Malgun Gothic','Dotum'; font-size: 1.1rem; background: #F2F2F7; padding: 0 8px; height: 16px; line-height: 16px; display: inline-block; border-radius: 12px; color: #222; margin-left: 3px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot-wrap { display: inline-block; cursor: pointer; padding: 0 6px; transition: background .25s ease; border-radius: 3px; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot-wrap:hover { background: #EFEFEF; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot { cursor: pointer; margin-right: 3px; margin-bottom: 3px; background: #DDDDDD; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot:last-child { margin-right: 0; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot.on { background: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .open-depth .dot.on { background: #4AE280; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .open-depth .category:last-of-type .dot.on { background: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot-wrap:hover .dot { background: #C9C9C9; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .open-depth .dot-wrap:hover .dot.on { background: #30D46B; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .open-depth .category:last-of-type .dot-wrap:hover .dot.on { background: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .dot-wrap:hover .dot.on { background: #fda313; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .arrow { width: 17px; height: 17px; display: inline-block; margin: 0 3px; opacity: 0.3; } .koita #info_container .category-browsing-area-wrap .category-browsing-area .browsing-area .body .search-result .result-wrap .category-list li .arrow img { width: 100%; } /* 링크 */ .koita #info_container .link-area-wrap { padding: 50px 0; } .koita #info_container .link-area-wrap .link-area { width: 1200px; margin: 0 auto; } .koita #info_container .link-area-wrap .link-area ul { overflow: hidden; } .koita #info_container .link-area-wrap .link-area ul li { float: left; margin-right: 45px; } .koita #info_container .link-area-wrap .link-area ul li:last-child { margin-right: 0; } @media all and (max-width: 1259px) { .koita #info_container .link-area-wrap .link-area { width: 100%; padding: 0 30px; } .koita #info_container .link-area-wrap .link-area ul { text-align: center; } .koita #info_container .link-area-wrap .link-area ul li { display: inline-block; float: none; margin: 5px; } } /* 리포트 */ .report-container.koita #header_container .header { background: #fff; } .report-container.koita #header_container .logo-area h2 .set { background: #fda313; } .report-container.koita #header_container .gnb-area { background: #fda313; } .report-container.koita #header_container .report-gnb-wrap .report-gnb ul li.select a { color: #fda313; } .report-container.koita #header_container .report-gnb-wrap .report-gnb ul li.select a:after { background: #fda313; } .report-container.koita #header_container .powered a { color: #fda313; } .report-container.koita #info_container .report-content-area .report-content .report .content-box .list-table .paging-wrap .paging ul li.select a { background: #fda313; border-color: #fda313; } /* 체크박스커스텀 */ .report-container.koita .checkbox { display: none; } .report-container.koita .checkbox-label { min-width: 15px; height: 15px; display: inline-block; background: url(../../img/common/checkbox_02.png)no-repeat; background-size: 15px 30px; background-position: 0 0; padding-left: 15px; line-height: 15px; color: #9DAACC; font-size: 1.2rem; letter-spacing: 0;} .report-container.koita .checkbox:checked + .checkbox-label { background-position: 0 -15px; } /* 푸터 */ #footer-wrap { border:0; background:#422c4f; } #footer-wrap .footer .business-info { overflow: hidden; padding: 30px 0; } #footer-wrap .footer .business-info .logo-area { width: 220px; float: left; } #footer-wrap .footer .business-info .logo-area img { width: 100%; height: auto; } #footer-wrap .footer .business-info .txt-area { float: left; width:calc(100% - 250px); font-size: 1.2rem; letter-spacing: 0; padding: 10px 0 10px 60px; color: #fff; } #footer-wrap .footer .business-info .txt-area .top { padding-bottom: 10px; font-weight:500; color:#c8c0cd;} #footer-wrap .footer .business-info .txt-area .bottom p { display: inline-block; margin-right: 20px; line-height: 25px; font-weight:300; width:25%; color:#c8c0cd; vertical-align:top;} #footer-wrap .footer .business-info .txt-area .bottom p b { font-weight: 500; padding-right:10px;} #footer-wrap .footer .copyright { border:0; padding: 20px 0 0; font-weight:300; color:#87798f; } @media all and (max-width: 1200px) { #footer-wrap .footer .business-info .txt-area .bottom p { width:30% } } @media all and (max-width: 899px) { #footer-wrap .footer .business-info .logo-area { float: none; width: 180px; margin:0 auto; padding-bottom:20px;} #footer-wrap .footer .business-info .txt-area { float: none; width:100%; padding-left: 0; text-align:center;} #footer-wrap .footer .business-info .txt-area .bottom p { width:100%;} } /* 기업 */ #info_container .corp-area-wrap .corp-area .corp-list .list-category { padding-bottom: 20px; margin-bottom: 20px; white-space: nowrap; height: 50px; overflow: hidden; } #info_container .corp-area-wrap .corp-area .corp-list .list-category .category-wrap { white-space: nowrap; overflow-x: scroll; height: 80px; -ms-overflow-style: none; } #info_container .corp-area-wrap .corp-area .corp-list .list-category .category-wrap::-webkit-scrollbar { display:none; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a { font-size: 1.8rem; margin: 0 20px; color: #999; font-weight: 500; position: relative; display: inline-block; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a:first-child { margin-left: 0; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a:last-child { margin-right: 0; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a:hover:after { position: absolute; content: ''; height: 2px; width: 100%; background: #999; left: 0; bottom: -10px; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a.select { color: #fda313; font-weight: 700; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a.select:after, #info_container .corp-area-wrap .corp-area .corp-list .list-category a.select:hover:after { position: absolute; content: ''; height: 2px; width: 100%; background: #fda313; left: 0; bottom: -10px; } @media all and ( max-width:1259px ) { #info_container .corp-area-wrap .corp-area { width: 100%; padding: 0 30px; } } @media all and ( max-width:899px ) { #info_container .corp-area-wrap .corp-area .corp-list .list-category a { margin: 0 15px; } #info_container .corp-area-wrap .corp-area .corp-list ul li { width: 25%; } } @media all and ( max-width:699px ) { #info_container .corp-area-wrap .corp-area .corp-list .list-category a { margin: 0 10px; } #info_container .corp-area-wrap .corp-area .corp-list ul li { width: 33.3333%; } #info_container .corp-area-wrap .corp-area .corp-list ul li a img { width: 60px; } } @media all and ( max-width:500px ) { #info_container .corp-area-wrap .corp-area .corp-list .list-category { padding-bottom: 0; margin-bottom: 0; } #info_container .corp-area-wrap .corp-area .corp-list .list-category a { font-size: 1.5rem; margin: 0 7px; } #info_container .corp-area-wrap .corp-area .corp-list .list-category .category-wrap { height: 50px; } } #info_container .corp-area-wrap { padding-top: 50px; padding-bottom: 150px; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table { overflow: hidden; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box { float: left; width: 49%; margin-right: 2%; margin-bottom: 15px; transition: width .25s ease; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box:nth-child(2n) { margin-right: 0 } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box a { display: block; position: relative; width: 100%; height: 100%; border: 1px solid #eee; cursor: pointer; padding: 15px 50px 25px; text-align: left; overflow: hidden; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box a:hover { border-color: #fda313; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box a .rank { background: #fda313; display: inline-block; position: absolute; left: 0; top: 0; color: #fff; font-size: 1.2rem; height: 35px; line-height: 35px; padding: 0 15px; font-weight: bold; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .logo-area { width: 50px; height: 50px; float: left; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .logo-area img { width: 100%; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area { float: left; padding-left: 10px; width: calc(100% - 50px); padding-top: 5px; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .corp-name { font-size: 1.8rem; letter-spacing: 0; font-weight: 900; padding: 5px 0; line-height: 20px; display: inline-block; margin-right: 7px; width: 310px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .grade-area { display: inline-block; line-height: 30px; vertical-align: middle; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .grade-area .grade { font-size: 1.3rem; font-weight: 800; display: inline-block; background: #fda313; width: 20px; height: 20px; color: #fff; border-radius: 50%; text-align: center; padding-right: 1px; line-height: 20px; margin-right: 5px; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .grade-area .point { font-size: 1.5rem; font-weight: 500; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .count li { width: auto; padding: 0; margin-right: 20px; letter-spacing: 0; font-size: 1.3rem; margin-bottom: 0; font-weight: 500; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .count li .unit { color: #6a6f84; font-weight: 300; margin-right: 10px; display: inline-block; position: relative; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .count li .unit:after { position: absolute; content: ''; width: 1px; height: 10px; background: #ddd; right: -5px; top: 5px; } @media all and (max-width: 999px) { #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box { width: 100%; margin-right: 0; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .corp-name { width: auto; max-width: 100%; overflow: unset; text-overflow: unset; white-space: normal; word-break: break-all; } } @media all and (max-width: 699px) { #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .logo-area { width: 30px; height: 30px; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area { padding-top: 0; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box .txt-area .corp-name { font-size: 1.6rem; } #info_container .corp-area-wrap .corp-area .corp-list .rank-table .corp-info-box a { padding: 15px 20px 25px 40px; } } /* 페이징 */ #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap {overflow:hidden;} #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging { float:none;margin-top: 15px; display: inline-block; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul { overflow: hidden; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li { display: inline-block; float: left; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li img { width: 17px; opacity: 0.5; margin-top: 6px; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li .page-move-btn.disabled img { opacity: 0.2; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li a { display: inline-block; min-width: 28px; height: 30px; text-align: center; font-weight: 500; font-size: 1.2rem; color: #999; line-height: 28px; letter-spacing: 0; padding: 0 5px; border: 1px solid #dee3eb; border-right: none; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li a.disabled { background-color: #eee; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li:last-child a { border-right: 1px solid #dee3eb; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li a:hover { color: #222; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li a.disabled:hover { color: #999; cursor: default; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li.select a { background: #422c4f; border-color: #422c4f; color: #fff; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li .page-move-btn { padding: 0; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li .page-move-btn:hover img { opacity: 1; } #info_container .search-result-area-wrap.koita-report-wrap .search-result-area .paging-wrap .paging ul li .page-move-btn.disabled:hover img { opacity: 0.2; cursor: default; } /* board-table */ .board-table table {width: 100%; border:1px solid #ddd; font-size: 1.3rem;} .board-table table tr {border-bottom:1px solid #ddd;} .board-table table tr:last-child {border-bottom:0;} .board-table table tr th{ background: #eee; font-weight: 600; border-right: 1px solid #ddd; height: 18px; } .board-table table tr th:last-child {border-right: 0;} .board-table table tr th, .board-table table tr td {padding:5px 2px; position: relative; text-align: center; word-break: keep-all;} .board-table table tr td { border-right: 1px solid #ddd;} .board-table table tr td:last-child { border-right: 0} .board-table table tr td a {color: #6c6cd4;} .board-table table tr:hover a {text-decoration: underline;} .board-table table tr a.key-label { position: relative;} .board-table table tr a.key-label:after {content: ''; position: absolute; top:0; right:-10px; width:4px; height:4px; background:#ff2222; border-radius: 50%; animation-name: key-one; animation-duration: .6s; animation-direction: alternate; animation-iteration-count: infinite;} @keyframes key-one { from { opacity: 1 } to { opacity: 0;} } /* inquiry-table */ .board-table.inquiry-table table {border-right: 0; border-left: 0;} .board-table.inquiry-table table tr td, .board-table.inquiry-table table tr th {border-right: 0;} .board-table.inquiry-table table .st01 {color:#fda313;} .board-table.inquiry-table table .st02 {color:#888;} /* down button */ .down-btn { background: #422c4f; border: none; color: #fff; letter-spacing: 0; font-size: 1.2rem; font-weight: 300; padding: 4px 15px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px;} .down-btn:hover{ background:#4a2e5b;} .down-btn img { width: 20px; height: 20px; margin-right: 5px; margin-top: 0; } /* 분석결과 확인 버튼 */ .app-btn { background: #fda313; border: none; color: #fff; letter-spacing: 0; font-size: 1.2rem; font-weight: 300; padding: 4px 15px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px;} .app-btn:hover{ background:#e4910d;} .app-btn i { font-size: 14px; margin-right: 5px;} .app-btn02 { background: #00ad9c; border: none; color: #fff; letter-spacing: 0; font-size: 1.2rem; font-weight: 300; padding: 4px 15px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px;} .app-btn02:hover{ background:#039a8b;} .app-btn02 i { font-size: 13px; margin-right: 4px; position: relative; top:1px;} .cancel-btn { background: #b92121; border: none; color: #fff; letter-spacing: 0; font-size: 1.2rem; font-weight: 300; padding: 4px 15px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px;} .cancel-btn:hover{ background:#A71717;} .border-btn { background: #fff; color: #4a2e5b; border:1px solid #4a2e5b; letter-spacing: 0; font-size: 1.2rem; font-weight: 500; padding: 2px 10px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px;} /* 리포트 신청 버튼 */ #info_container .result-type-select {position: relative;} #info_container .btn-green { position: absolute; top:8px; right: 0; } #info_container .btn-green button.btn { border:none; font-size: 1.2rem; display: inline-block; border-radius: 3px; color:#fff; padding: 0 10px; background:#149b24; margin:0; padding:4px 20px;} #info_container .btn-green button.btn i {font-size: 12px; margin-right: 5px;} #info_container .btn-orange { position: absolute; top:8px; right: 0; } #info_container .btn-orange button.btn { border:none; font-size: 1.2rem; display: inline-block; border-radius: 3px; padding: 0 10px; margin:0; padding:4px 20px; background: #fda313; color:#fff;} #info_container .btn-orange button.btn i {font-size: 12px; margin-right: 5px;} #info_container .premium-btn { position: absolute; top:8px; right: 0; z-index: 5;} #info_container .premium-btn button.btn { border:none; font-size: 1.2rem; display: inline-block; border-radius: 3px; color:#fff; padding: 0 10px;margin:0; padding:5px 20px 4px; background: #ff7d00; background: -moz-linear-gradient(left, #ff7d00 -1%, #ff7d00 0%, #ffa912 100%); background: -webkit-linear-gradient(left, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); background: linear-gradient(to right, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ffa912',GradientType=1 ); } #info_container .premium-btn button.btn i {font-size: 13px; margin-right: 5px;} @media (max-width: 500px) { #info_container .premium-btn { top: 47px; } } /* 모달 */ .modal-wrap { position: fixed; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .modal-wrap .modal { position: fixed; z-index: 100; width: 600px; height: auto; background: #fff; left: 50%; margin-left: -300px; top: 100px; border-radius: 8px; box-shadow: 0 15px 20px 5px rgba(0,0,0,0.1); } .modal-wrap .modal .modal-title-area { padding: 15px 20px; font-size: 1.65rem; font-weight: 600; height: 55px; border-bottom: 1px solid #dee3eb; position: relative; } .modal-wrap .modal .modal-title-area .close-btn { width: 50px; height: 50px; border-radius: 50%; border-style: none; background: rgba(0,0,0,0.3); position: absolute; right: -70px; top: 0; transition: background .25s ease; outline: 0; } .modal-wrap .modal .modal-title-area .close-btn:hover { background: rgba(0,0,0,0.5); } .modal-wrap .modal .modal-title-area .close-btn img { width: 100%; } .modal-wrap .modal .modal-content-area { padding: 30px 15px; background: #fff; max-height: 500px; overflow-y: auto; text-align: center;} .modal-wrap .modal .modal-content-area h3 { padding-bottom:7px; font-size: 2rem;} .modal-wrap .modal .modal-content-area h3 span {color: #a983da;} .modal-wrap .modal .modal-btn-area { padding: 15px 20px; background: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top: 1px solid #dee3eb; overflow: hidden; } .modal-wrap .modal .modal-btn-area button { float: right; } .modal-wrap .modal .modal-btn-area button.confirm-btn, .modal-wrap .modal .modal-btn-area button.retry-btn { background: #1652f0; color: #fff; } .modal-wrap .modal .modal-btn-area button.confirm-btn:hover, .modal-wrap .modal .modal-btn-area button.retry-btn:hover { background: #0744E4; } .modal-wrap .modal .modal-btn-area button.cancel-btn, .modal-wrap .modal .modal-btn-area button.pre-btn, .modal-wrap .modal .modal-btn-area button.close-btn { background: transparent; color: #999; } .modal-wrap .modal .modal-btn-area button.cancel-btn:hover, .modal-wrap .modal .modal-btn-area button.pre-btn:hover, .modal-wrap .modal .modal-btn-area button.close-btn:hover { background: #E8E8E8; color: #666; } .modal-wrap .modal .modal-btn-area .porfolio-edit-btn { float: left; height: 35px; border-radius: 3px; line-height: 35px; font-size: 1.3rem; padding: 0 20px; color: #fff; background: #f3f0f5; } .modal-wrap .modal .modal-btn-area .porfolio-edit-btn img { width: 18px; height: 18px; margin-top: 8px; opacity: .5;} .modal-wrap .modal .payment { position: relative; width: 100%; text-align: right; padding: 20px; border-top: 3px solid #c5b6cf; border-bottom: 2px solid #c5b6cf; background: #f3f0f5;} .modal-wrap .modal .payment h2 { font-size: 2.4rem; color: #422c4f;} .modal-wrap .modal .payment h2 span { font-size: 1.4rem; font-weight: 500; display: inline-block; padding-right: 10px; color: #a091a5;} /*문의*/ .info-box-wrap .inquiry-box .top {position: relative; padding-left: 35px; border-bottom: 1px solid #eee; padding-bottom:30px;} .info-box-wrap .inquiry-box .top:after {content: 'Q'; position: absolute; top:0; left:0; font-size:2rem; font-weight: 900;color: #fda313;} .info-box-wrap .inquiry-box .title h3 {font-size: 2rem; padding-bottom:15px;} .info-box-wrap .inquiry-box .text p {font-size: 1.4rem; padding-bottom:15px;} .info-box-wrap .inquiry-box .text span {font-size: 1.3rem; color:#888;} .info-box-wrap .inquiry-box .bottom {position: relative; background: #f8f8f8; padding:30px;padding-left: 55px; } .info-box-wrap .inquiry-box .bottom:after {content: 'A'; position: absolute; top:30px; left:20px; font-size:2.2rem; font-weight: 900;color: #fda313;} /* 문의 글쓰기 버튼 */ #info_container .btn-list { float:right; margin-top: 30px;} #info_container .btn-list button.btn { border:none; font-size: 1.2rem; display: inline-block; border-radius: 3px; color:#fff; padding: 0 10px; background:#464646; margin:0; padding:7px 30px 6px; transition:background .3s;} #info_container .btn-list button.btn-cancel {background: #fff; border:1px solid #aaa; color:#888;} #info_container .btn-list button.btn-cancel:hover {background:#eee;} #info_container .btn-list button.btn-write {background: #fda313; margin-right:10px;} #info_container .btn-list button.btn-write:hover {background:#161a6d;} /* 문의 글쓰기 */ .info-box-wrap .inquiry-write .write-table table { width:100%; border-top:1px solid #eee;} .info-box-wrap .inquiry-write .write-table table tr th {background:#eee; border-bottom:1px solid #fff; padding:10px; font-size: 1.4rem; font-weight: 500; text-align: center;} .info-box-wrap .inquiry-write .write-table table tr td {background:#fff; border-bottom:1px solid #eee; padding:10px; font-size: 1.4rem; font-weight: 400; } .info-box-wrap .inquiry-write .write-table table tr td input {border:0; border:1px solid #dadada; padding: 0 10px; line-height: 35px; width: 100%;} .info-box-wrap .inquiry-write .write-table table tr td input:hover, .info-box-wrap .inquiry-write .write-table table tr td textarea:hover {border: 1px solid #b9b9b9;} .info-box-wrap .inquiry-write .write-table table tr td textarea {border:0; border:1px solid #dadada; resize: none; padding:10px; height: 400px; width:100%;} .info-box-wrap .inquiry-write .inquiry-alert { position: relative; padding: 15px 40px 15px 15px; margin-bottom: 20px; border:1px solid #f1e4e0; color: #a25538; background: #fff1eb; font-weight: 500;} .info-box-wrap .inquiry-write .inquiry-alert i {position: absolute; top:50%; right: 15px; margin-top:-7px; cursor: pointer;} .info-box-wrap .inquiry-write .inquiry-alert i:hover {color:#733f2b;} /* faq */ .info-box-wrap .inquiry-list { width: 100%; position: relative;} .info-box-wrap .inquiry-list>ul>.header { border-bottom: 2px solid #dcdcdc; height: 35px; } .info-box-wrap .inquiry-list>ul>.header>ul>li { font-size: 12px; font-weight: 400; color: #acacac; padding-bottom: 5px; display: inline-block; float: left; } .info-box-wrap .inquiry-list>ul>.header>ul>.numb { width: 5%; text-align: center; } .info-box-wrap .inquiry-list>ul>.header>ul>.title { width: 60%; padding-left: 20px; } .info-box-wrap .inquiry-list>ul>.header>ul>.date, .info-box-wrap .inquiry-list>ul>.header>ul>.answer { width: 120px; text-align: center; margin-left: 6%; } .info-box-wrap .inquiry-list>ul>.list-row>a { display: block; height: 50px; border-bottom: 1px solid #dcdcdc; transition: background .2s ease; position: relative; } .info-box-wrap .inquiry-list>ul {border-top:1px solid #422c4f;} .info-box-wrap .inquiry-list>ul>.select>a { background: #f8f8f8; } .info-box-wrap .inquiry-list>ul>.list-row>a:hover { background: #f8f8f8; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul { overflow: hidden; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>li { font-size: 15px; font-weight: 300; display: inline-block; line-height: 50px; float: left; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.numb { width: 5%; text-align: center; color: #797979; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.title { width: 60%; padding-left: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.date { letter-spacing: 0; color: #797979; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.answer { font-weight: 500; color: #727272; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.complete { color: #fda313; } .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.date, .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.answer { width: 120px; text-align: center; margin-left: 6%; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area { display: none; border-bottom: 1px solid #dcdcdc; } .info-box-wrap .inquiry-list>ul>.select>.detail-area { display: block; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question { padding: 30px; position: relative; padding-left: 60px; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question:before { content: 'Q'; position: absolute; top:30px; left:20px; font-size:2rem; font-weight: 900;color: #fda313;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question .title { font-size: 15px; font-weight: 500; margin-bottom: 6px; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question .content { font-size: 14px; font-weight: 400; white-space: pre-wrap; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer { padding: 30px; position: relative; padding-left: 60px; background:#f8f8f8; margin:0 30px 30px; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer:before { content: 'A'; position: absolute; top:30px; left:20px; font-size:2.2rem; font-weight: 900;color: #fda313;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer .title { font-size: 15px; font-weight: 500; margin-bottom: 6px; } .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer .content { font-size: 14px; font-weight: 400; white-space: pre-wrap; } @media all and (max-width: 1140px) { .info-box-wrap .inquiry-list>ul>.list-row>a {height: auto; padding-bottom: 20px;} .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.title {width: 90%; display: inline-block;} .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.date, .info-box-wrap .inquiry-list>ul>.list-row>a>ul>.answer {float: none; margin-left: 10px; line-height: 20px; width: auto;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer {margin:0 15px 15px; padding:15px 30px;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question {padding:15px 30px;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-answer:before {top:10px; left:7px;} .info-box-wrap .inquiry-list>ul>.list-row>.detail-area .d-question:before {top:10px; left:7px;} } /* FAQ tab */ .info-box-wrap .tab-menu { margin-bottom:20px;} .info-box-wrap .tab-menu ul:after {clear: both; display: block; content: '';} .info-box-wrap .tab-menu ul li {float: left; width: 20%; text-align: center; font-size: 1.3rem; border: 1px solid #eee; border-right: 0; transition: background .3s; padding:12px 0;} .info-box-wrap .tab-menu ul li:hover {background:#f1f1f1;} .info-box-wrap .tab-menu ul li:last-child {border-right: 1px solid #eee;} .info-box-wrap .tab-menu ul li a {display: block; width: 100%; height: 100%; color:#444;} .info-box-wrap .tab-menu ul li.select {background:#fda313; border-color:#fda313; } .info-box-wrap .tab-menu ul li.select a { color: #fff;} .ipoffice-container.koita #header_container .logo-area h1 a.logo02 {margin-left: 15px;} .ipoffice-container.koita #header_container .logo-area h1 a.logo02 img {vertical-align: middle;} #header_container .logo-area h1.mo-logo {display: none;} #header_container .gnb-area {position: relative; top: 10px; width: auto; float: right; display: inline-block;} #header_container .header .m-gnb #m_gnb_toggle:checked ~ .m-menu-list-wrap {top: 80px;} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul {height: auto;} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul>li.login .user-name {text-align: center;color: #fff; padding:25px 0; border-bottom: 1px solid rgba(0,0,0,0.10)} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul.nav {margin:15px; display: flex;} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul.nav li { text-align: center; color:#fff; padding:30px 0; border:1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.1); border-right:0; word-break: keep-all;} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul.nav li:last-child {border-right:1px solid rgba(255,255,255,0.1);} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list a.login { display: block; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.4); margin: 15px; font-size: 1.5rem; padding: 10px 0;} @media all and (max-width: 1130px) { #header_container .logo-area { position: static} .ipoffice-container.koita #header_container .logo-area h1.mo-logo a {width: 70px;} #header_container .gnb-area {left: 90px;} #header_container .logo-area h1.pc-logo {display: none;} #header_container .logo-area h1.mo-logo {display: inline-block;} #header_container .main-selectbox, #header_container .gnb-area .gnb-r > * {display: none;} #header_container .gnb-area {float: none; position: absolute;} #header_container .header .m-gnb {display: block;} #header_container .header .m-gnb .m-menu-list-wrap {background: #422c4f;} } @media all and (max-width: 898px) { #header_container .logo-area h1.mo-logo {top: -5px;} #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul>li>a { padding:0;} } @media all and (max-width: 450px) { #header_container .header .m-gnb .m-menu-list-wrap .m-menu-list>ul.nav li {width:50%;} } /* 매뉴얼 다운로드 버튼 */ #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn { margin-top: 15px; border-top: 3px solid #9c9fde; padding: 20px; width: 430px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn {margin-top: 0; float: right;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn button {margin: 0; padding: 0 14px;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn button i {margin-right: 5px;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn button.btn-02 {border-radius: 3px 0 0 3px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn button.btn-01 {border-radius: 0 3px 3px 0; position: relative; right: 3px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .txt-wrap h2 { display: inline-block; float: left; line-height: 40px; font-size: 1.5rem;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .txt-wrap h2 i {margin-right: 5px;} @media all and (max-width: 1259px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .txt-wrap {width: 100%;} } @media all and (max-width: 900px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn {margin: 30px auto 0;} } @media all and (max-width: 550px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list { height: 610px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn { width: 100%; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .txt-wrap h2 { float: none; line-height: 20px;} #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list.manual-btn li .btn { float: none; margin-top: 20px;} } @media all and (max-width: 480px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li { padding-top: 0; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list li .txt-wrap { top: 10px; } #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list { height: 590px; } } @media all and (max-width: 410px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list { height: 620px; } } @media all and (max-width: 355px) { #info_container .main-banner-area-wrap .main-slide-banner-wrap ul.banner-list { height: 670px; } } /* 데이터 바우처 링크 */ .banner-link { margin-top: 30px; } .banner-link a i { margin-right: 5px; } .banner-link a { color: #fff; display: inline-block; font-size: 1.5rem; font-weight: 600; padding: 10px 20px; box-shadow: 8px 13px 20px rgba(0,0,0,0.2); border-radius: 5px; background: #0f9885; background: -moz-linear-gradient(45deg, #0f9885 0%, #035fab 100%); background: -webkit-linear-gradient(45deg, #0f9885 0%,#035fab 100%); background: linear-gradient(45deg, #0f9885 0%,#035fab 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f9885', endColorstr='#035fab',GradientType=1 ); } /* 유료리포트 신청내역 테이블 */ .premiun-list-table .table-scroll { width: 100%; overflow-x: auto; } .premiun-list-table .table-scroll table { width: 1200px; border-top: 1px solid #aaa; } .premiun-list-table .table-scroll table tr td { font-size: 1.25rem; } .premiun-list-table .table-scroll table tr td:last-child { border-right: 1px solid #ddd; } .premiun-list-table .table-scroll table tr td span.bold { font-weight: 900; } .premiun-list-table .table-scroll table .cancel-btn, .premiun-list-table .table-scroll table .down-btn { padding: 2px 7px; line-height: inherit; } .total-wrap { padding: 0 0 10px; font-size: 14px; font-weight: 600; display: inline-block;} .total-wrap p .total { font-weight: bold; color: #ad50e4; } .scroll-arrow { display: none; float: right; position: relative; left: -10px; font-size: 1.4rem; font-weight: 600; color: #afb1c3; animation-name: scroll; animation-duration: .6s; animation-iteration-count: infinite; animation-direction: alternate;} @keyframes scroll { from { left: -10px; } to { left: 0; } } @media (max-width: 1200px) { .scroll-arrow { display: block; } } /* 상세 테이블 */ .detail-table { border-top: 1px solid #aaa; } .detail-table table { width: 100%; font-size: 1.3rem; } .detail-table table tr { border-bottom: 1px solid #ddd; } .detail-table table tr th { vertical-align: middle; font-weight: 600; padding: 5px 10px 5px 10px; width: 150px; background: #eee; } .detail-table table tr td { padding: 5px 10px; vertical-align: middle; background: #fff; } .detail-table table span.unit { font-size: 1.6rem; font-weight: 900; color: #D00000; } textarea.text-area, input[type=text].text-input { background: #fff; border: 1px solid #ddd; width: 50%; height: 30px; color: #333; font-size: 1.25rem; letter-spacing: 0; padding: 0 10px; border-radius: 3px; } textarea.text-area { resize: none; height: 100px;} textarea.text-area:hover, input[type=text].text-input:hover { border-color: #aaa; } .btn-wrap .btn-center { text-align: center; } .btn-wrap .btn-right { float: right; } .btn-wrap .btn-left { float: left; } .btn-wrap button { border: 0; color: #fff; font-size: 1.2rem; padding: 4px 15px; border-radius: 3px; outline: 0; transition: background .25s ease; line-height: 22px; } .btn-wrap button.blue-bg { background: #2a5696; } .btn-wrap button.blue-bg:hover { background: #234D89; } .btn-wrap button.red-bg { background: #b92121; } .btn-wrap button.red-bg:hover { background: #A51B1B; } .btn-wrap button.orange-bg { background: #fda313; } .btn-wrap button.orange-bg:hover { background: #e4910d; } .btn-wrap button.white-bg { background: #E7E7E7; color: #999; } .btn-wrap button.white-bg:hover { background: #D2D2D2; } .btn-wrap button.border-bg { background: #fff; color: #4a2e5b; border:1px solid #4a2e5b; } @media (max-width: 768px) { .detail-table table tr th { width: 100px; } .detail-table table textarea, .detail-table table input[type=text] { width: 100%; } } /* koita modal */ .modal-wrap.modal-report-apply .modal .modal-content-area table { text-align: left; } .modal-wrap.modal-report-apply .modal .modal-content-area textarea.text-area, .modal-wrap.modal-report-apply .modal .modal-content-area input[type=text].text-input { width: 100%; } .modal-wrap.modal-report-apply .checkbox { display: none; } .modal-wrap.modal-report-apply .checkbox-label { min-width: 15px; height: 15px; display: inline-block; background: url(../../img/koita/checkbox.png)no-repeat; background-size: 15px 30px; background-position: 0 0; padding-left: 20px; line-height: 15px; color: #666; font-size: 1.2rem; letter-spacing: 0; margin-top: 15px;} .modal-wrap.modal-report-apply .checkbox:checked + .checkbox-label { background-position: 0 -15px; } .modal-wrap.modal-report-apply .terms a.link { display: inline-block; font-size: 1.2rem; position: relative; top: 7px; color: #6496F5; text-decoration: underline; } .modal-wrap.modal-report-apply .terms-wrap p { padding: 15px; border-radius: 10px; background: #f4f4f4; white-space: pre-wrap; text-align: left;} @media (max-width: 768px) { .modal-wrap .modal { width: 90vw; margin-left: 0; transform: translateX(-50%); } .modal-wrap .modal .modal-title-area .close-btn { display: none; } } /* 결제 실패/완료 */ .pament-wrap { text-align: center; } .pament-wrap .pay-title { font-size: 2.5rem; word-break: keep-all;} .pament-wrap .pay-title .bold { font-weight: 600; color: #fda313; } .pament-wrap .pay-title.fail .bold { color: #C50A0A; } .pament-wrap .pay-info { padding: 15px 50px 15px; border-radius: 10px; background: #f3f0f5; display: inline-block; margin: 20px 0 0; font-size: 1.4rem; color: #777; word-break: keep-all;} .pament-wrap .detail-table { margin-top: 30px; } .pament-wrap .btn-list { float: none !important; } .pament-wrap .btn-list .btn-center { text-align: center; } .pament-wrap .detail-table table tr td { text-align: left; } @media (max-width: 768px) { .pament-wrap .pay-title { font-size: 2.2rem; } .pament-wrap .pay-info { font-size: 1.4rem; padding: 15px;} } /* 서버 점검 공지 레이어팝업 */ .layer-pop-wrap { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;} .layer-pop-wrap.on { display: block; } .layer-pop-wrap .layer-pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 485px; text-align: center; border-radius: 5px; overflow: hidden;} .layer-pop-wrap .layer-pop.double-img { width: 1100px; background: #fff; } /* 팝업 2개일경우 */ .layer-pop-wrap .layer-pop .head { padding: 15px 0; color: #fff; background: #ff7d00; background: -moz-linear-gradient(left, #ff7d00 -1%, #ff7d00 0%, #ffa912 100%); background: -webkit-linear-gradient(left, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); background: linear-gradient(to right, #ff7d00 -1%,#ff7d00 0%,#ffa912 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ffa912',GradientType=1 ); } .layer-pop-wrap .layer-pop .head h1 { font-size: 2.1rem; } .layer-pop-wrap .layer-pop .cont { background: #fff; padding: 20px 15px; } .layer-pop-wrap .layer-pop .cont img { width:100%; } .layer-pop-wrap .layer-pop .cont.double-img .float { width:50%; float: left; } /* 팝업 2개일경우 */ .layer-pop-wrap .layer-pop .cont p { font-size: 1.4rem; word-break: keep-all; text-align: left; } .layer-pop-wrap .layer-pop .cont p.t { font-size: 1.9rem; font-weight: 600; margin-bottom: 15px; text-align: center; } .layer-pop-wrap .layer-pop .cont .tip-bn { margin:8px 0; border-radius: 5px; } .layer-pop-wrap .layer-pop .cont .tip-bn a { display: block; font-family: 'yg-jalnan'; background:#dadfff;position:relative; padding:14px 20px 14px 0;} .layer-pop-wrap .layer-pop .cont .tip-bn a .left { position:absolute; top:0; left:0; width: 165px; height:100%; } .layer-pop-wrap .layer-pop .cont .tip-bn a .left .box { position:relative; width:100%; height:100%;overflow: hidden;} .layer-pop-wrap .layer-pop .cont .tip-bn a .left .box:after { content: ''; position:absolute; top:-25%; left:-25px; width:100%; height:150%; background:#687df9; z-index: 1; transform: skewX(-30deg);} .layer-pop-wrap .layer-pop .cont .tip-bn a .left .box img { width: 60px; height: 35px; position: relative; z-index: 2; top: 23px; left:-15px;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right { width:100%; padding-left:165px; text-align: right;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit { color: #687df9; font-size: 2.1rem; word-break: keep-all;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit span { color: #3e4b9c; } .layer-pop-wrap .layer-pop .cont .tip-bn a .right .down-tip { font-size: 1.2rem; color: #dadfff; padding:7px 25px; border-radius: 20px; background:#687df9; display: inline-block; letter-spacing: 0; margin-top: 10px;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right .down-tip img { width:13px; height:13px; margin-right:3px} .layer-pop-wrap .layer-pop .foot { width: 100%; background: #fff; border-top: 1px solid #dcdcdc; padding: 15px 0; } .layer-pop-wrap .layer-pop .foot.double-img { margin-top: 600px; } /* 팝업 2개일경우 */ .layer-pop-wrap .layer-pop .foot button.close { display: inline-block; border: 0; outline: none; background: #fff; border: 1px solid #fda313; color: #fda313; border-radius: 30px; height: 31px; width: 100px; font-weight: 600; margin-left: 10px; } .layer-pop-wrap .layer-pop .foot button.no-popup { display: inline-block; border: 0; outline: none; background: #fda313; color: #fff; border-radius: 30px; height: 31px; width: 120px; font-weight: 600; } .layer-pop-wrap .layer-pop .foot .checkbox { display: none; } .layer-pop-wrap .layer-pop .foot .checkbox-label { min-width: 15px; height: 15px; display: inline-block; background: url(../../img/koita/checkbox.png)no-repeat; background-size: 15px 30px; background-position: 0 0; padding-left: 20px; line-height: 15px; color: #666; font-size: 1.2rem; letter-spacing: 0; } .layer-pop-wrap .layer-pop .foot .checkbox:checked + .checkbox-label { background-position: 0 -15px; } @media (max-width: 1130px) { .layer-pop-wrap .layer-pop { width: 90% !important; } .layer-pop-wrap .layer-pop .cont .tip-bn a { padding-top:10px; padding-bottom:10px;} .layer-pop-wrap .layer-pop .cont .tip-bn a .left { width:120px;} .layer-pop-wrap .layer-pop .cont .tip-bn a .left .box:after { height:100%; top:0; left:0; transform: skew(0);} .layer-pop-wrap .layer-pop .cont .tip-bn a .left .box img { left:0;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right { padding-left:120px;} } @media (max-width: 768px) { .layer-pop-wrap .layer-pop .cont .tip-bn a { padding:10px 0;} .layer-pop-wrap .layer-pop .cont .tip-bn a .left { display: none;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right { padding-left: 0; text-align: center;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit { line-height: 27px; } .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit span { display: block; } } @media (max-width: 425px) { .layer-pop-wrap .layer-pop .cont.double-img .float { width:100% !important; float:none; } /* 팝업 2개일경우 */ .layer-pop-wrap .layer-pop .foot.double-img { margin-top: 0; } /* 팝업 2개일경우 */ .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit {font-size: 1.7rem;} .layer-pop-wrap .layer-pop .cont .tip-bn a .right .tit span { display: inline-block; } .layer-pop-wrap .layer-pop .cont .tip-bn a .right .down-tip { margin-top: 5px; font-size: 1rem; padding:5px 20px;} } /* 여기어때 웹폰트 */ @font-face { font-family: 'yg-jalnan'; src: url('../../css/common/font/JalnanOTF.otf') format('opentype'), url('../../css/common/font/Jalnan.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* 헤더 윙커 라벨 커스텀 */ .pl-10 { padding-left: 10px; } /* 자동완성 -> 검색 결과 Empty List */ .empty-list { padding: 10px !important; text-align: center !important; } /* 부가세 노티스 */ .vat-notice { color:#ff0000; } /* 알림원 */ .dot-notice { display: inline-block; height: 4px; width: 4px; border-radius: 50%; margin: 0 0 8px 5px; background: #f05050; transition: background 0.2s ease;} /* 사업자등록증 인풋 일립시스 */ .position-abs { position: absolute; } .business-reg { max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .business-reg-detail { max-width: 800px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 기술찾기 브레드크럼 안내문구 */ .cate-notice { font-size: 1.2rem; padding: 0 10px; border-bottom: 1px solid #F2F2F2; background: #F8F8F8; color: #A3A3A3; } /* 헤더의 신규 1:1문의 및 FAQ버튼 */ .menu-btn-area { float: left; margin-right:20px;} .menu-btn-area button { border:none; border-radius: 3px; height: 27px; font-size: 1.3rem; float: left; background: #fff; position:relative; top:3px; color:#422c4f; font-weight:600; padding:0 15px;} .menu-btn-area button:hover { text-decoration:underline; } .menu-btn-area button.inquiry.winker:after {content: ''; position: absolute; top:4px; right:8px; width:4px; height:4px; background:#ff0000; border-radius: 50%; animation-name: one; animation-duration: .6s; animation-direction: alternate; animation-iteration-count: infinite;} .menu-btn-area button:not(:last-child):before { content:''; display:block; position:absolute; width:1px; height:10px; background:#aeaeae; top:9px; right:0; } /* 서치 레이어팝업 */ .ipoffice-container .search-layer-wrap .search-layer .search-box-area input[type=text] { background:#84599e;} .ipoffice-container .search-layer-wrap .search-layer .search-box-area input[type=text]:hover, .ipoffice-container .search-layer-wrap .search-layer .search-box-area input[type=text]:active, .ipoffice-container .search-layer-wrap .search-layer .search-box-area input[type=text]:focus{ background:#8f63aa;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area { background: #422c4f;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category input[type=text] { background:#4c3758; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category input[type=text]::-ms-input-placeholder { color: #b5a5c7; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category input[type=text]::-webkit-input-placeholder { color: #b5a5c7; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category input[type=text]::-moz-placeholder { color: #b5a5c7; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category input[type=text]:hover { background:#554061; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .selectbox { background:#4c3758; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .selectbox:hover { background:#554061; } .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .properties-wrap .properties .category-select .navi a.top-btn { background:#7e48a0;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .properties-wrap .properties .category-select .navi a { color:#b5a5c7;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .properties-wrap .properties .category-select .list ul li a { color:#b5a5c7;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .search-btn { background:#fff; color:#422c4f; font-weight:600;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .search-btn:hover { background:#fff;} .ipoffice-container .search-layer-wrap .search-layer .advanved-search-area .option-category .properties-wrap .properties .unit {color:#b5a5c7;} .ipoffice-container .search-layer-wrap .search-layer .advanced-search-btn .switch { background:#78737a; } .ipoffice-container .search-layer-wrap .search-layer .advanced-search-btn .switch:after { background:#b5a7c5; } .ipoffice-container .search-layer-wrap .search-layer #advanced_search_toggle:checked ~ .advanced-search-btn .switch:after { background: #fda313; } /* 검색결과 */ #info_container .search-result-area-wrap { padding:50px 0 !important; border-top:1px solid #dee3eb;} /* 언어 선택 레이어팝업 */ .ipoffice-container .lang-layer-wrap .lang-layer { background:#422c4f; } .ipoffice-container .lang-layer-wrap .lang-layer .header-area { background:#4b345a; border-bottom-color: #3a2747;} .ipoffice-container .lang-layer-wrap .lang-layer .header-area .pop-close-btn { background: rgba(124,86,151,.5);} .ipoffice-container .lang-layer-wrap .lang-layer .header-area .pop-close-btn:hover { background: rgba(124,86,151,.8); } .ipoffice-container .lang-layer-wrap .lang-layer .content-area ul li label {color:#b5a5c7} .ipoffice-container .lang-layer-wrap .lang-layer .content-area .title { color:#b5a5c7;} .ipoffice-container .lang-layer-wrap .lang-layer .content-area .lang-select-wrap { margin-bottom:5px;} .ipoffice-container .lang-layer-wrap .lang-layer .content-area .locale-select-wrap { border-bottom-color: #3a2747; margin-top:0; } .ipoffice-container .lang-layer-wrap .lang-layer .content-area ul li label:after { background-image: url(../../img/common/checkbox_03.png); } .ipoffice-container .lang-layer-wrap .lang-layer .btn-area { background:#422c4f; } .ipoffice-container .lang-layer-wrap .lang-layer .btn-area .btn-wrap .confirm-btn { background: #fda313; } .ipoffice-container .lang-layer-wrap .lang-layer .btn-area .btn-wrap .cancel-btn { color:#b5a5c7;} .ipoffice-container .lang-layer-wrap .lang-layer .btn-area .select-option>div { color:#b5a5c7;} .ipoffice-container .lang-layer-wrap .lang-layer .btn-area .select-option .unit {color:rgba(181,165,199,0.5);}