-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d649135
commit 2d52763
Showing
6 changed files
with
781 additions
and
362 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,342 @@ | ||
| /* COMMON */ | ||
| body{ | ||
| color:#333; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 1.4; | ||
| font-family: "Nanum Gothic", sans-serif; /*폰트는 상속이 되는 속성(유료폰트 사용하지 않도록 주의)*/ | ||
| } | ||
| img{ | ||
| /* 이미지요소를 글자처럼 취급하지 않고 레이아웃으로 취급하기 위함 */ | ||
| display: block; | ||
| } | ||
| a{ | ||
| text-decoration: none; | ||
| } | ||
| .inner{ | ||
| width: 1100px; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| } | ||
| .btn{ | ||
| width: 130px; | ||
| padding: 10px; | ||
| border: 2px solid #333; | ||
| border-radius: 4px; | ||
| color: #333; | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| text-align: center; | ||
| cursor: pointer; | ||
| box-sizing: border-box; | ||
| display: block; | ||
| transition: .4s; | ||
| } | ||
| .btn:hover{ | ||
| background-color: #333; | ||
| color: #fff; | ||
| } | ||
| .btn.btn--reverse{ | ||
| background-color: #333; | ||
| color: #fff; | ||
| } | ||
| .btn.btn--reverse:hover{ | ||
| background-color: transparent; | ||
| color: #333; | ||
| } | ||
| .btn.btn--brown{ | ||
| color:#592b18; | ||
| border-color: #592b18; | ||
| } | ||
| .btn.btn--brown:hover{ | ||
| color: #fff; | ||
| background-color: #592b18; | ||
| } | ||
| .btn.btn--gold{ | ||
| color: #d9aa8a; | ||
| border-color: #d9aa8a; | ||
| } | ||
| .btn.btn--gold:hover{ | ||
| color: #fff; | ||
| background-color: #d9aa8a; | ||
| } | ||
| .btn.btn--white{ | ||
| color: #fff; | ||
| border-color: #fff; | ||
| } | ||
| .btn.btn--white:hover{ | ||
| color: #333; | ||
| background-color: #fff; | ||
| } | ||
| .back-to-position{ | ||
| opacity: 0; | ||
| transition: 1s; | ||
| } | ||
| .back-to-position.to-right{ | ||
| transform: translateX(-150px); | ||
| } | ||
| .back-to-position.to-left{ | ||
| transform: translateX(150px); | ||
| } | ||
| .show .back-to-position{ | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| .show .back-to-position.delay-0{ | ||
| transition-delay: 0s; | ||
| } | ||
| .show .back-to-position.delay-1{ | ||
| transition-delay: .3s; | ||
| } | ||
| .show .back-to-position.delay-2{ | ||
| transition-delay: .6s; | ||
| } | ||
| .show .back-to-position.delay-3{ | ||
| transition-delay: .9s; | ||
| } | ||
|
|
||
| /* HEADER */ | ||
| header{ | ||
| background-color: #f6f5f0; | ||
| border-bottom: 1px solid #c8c8c8; | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 9; | ||
| } | ||
|
|
||
| header > .inner{ /*header의 자식요소만 선택*/ | ||
| height: 120px; | ||
| } | ||
|
|
||
| header .logo{ | ||
| height: 75px; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left:0; | ||
| margin: auto; | ||
| } | ||
|
|
||
| header .sub-menu{ | ||
| display: flex; | ||
| position: absolute; | ||
| top:10px; | ||
| right:0; | ||
| } | ||
| header .sub-menu ul.menu{ | ||
| display: flex; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
| header .sub-menu ul.menu li{ | ||
| position: relative; | ||
| } | ||
| header .sub-menu ul.menu li::before{ | ||
| content: ""; | ||
| width: 1px; | ||
| height:12px; | ||
| background-color: #e5e5e5; | ||
| position: absolute; /*block요소로 변환*/ | ||
| top: 0; | ||
| bottom: 0; | ||
| margin: auto 0; | ||
|
|
||
| } | ||
| header .sub-menu ul.menu li:first-child::before{ | ||
| display: none; | ||
| } | ||
| header .sub-menu ul.menu li a{ | ||
| display: block; | ||
| color:#656565; | ||
| font-size: 12px; | ||
| padding: 11px 16px; | ||
| } | ||
| header .sub-menu ul.menu li a:hover{ | ||
| color:#000; | ||
| } | ||
| header .sub-menu .search{ | ||
| position: relative; | ||
| height: 34px; | ||
| } | ||
| header .sub-menu .search input{ | ||
| width: 36px; | ||
| height: 34px; | ||
| padding: 4px 10px; | ||
| border: 1px solid #ccc; | ||
| box-sizing: border-box; | ||
| border-radius: 5px; | ||
| outline: none; | ||
| background-color: #fff; | ||
| color: #777; | ||
| font-size: 12px; | ||
| transition: width .4s; | ||
| } | ||
| header .sub-menu .search input:focus{ | ||
| width: 190px; | ||
| border-color: #669900; | ||
| } | ||
| header .sub-menu .search .material-icons{ | ||
| position: absolute; | ||
| height: 24px; /*Google Icon에서 제공하는 폰트 사이즈*/ | ||
| top: 0; | ||
| bottom: 0; | ||
| right:5px; | ||
| margin: auto; | ||
| transition: .4s; | ||
| } | ||
| header .sub-menu .search.focused .material-icons{ | ||
| opacity: 0; | ||
| } | ||
|
|
||
| header .main-menu{ | ||
| position: absolute; | ||
| display: flex; | ||
| right:0; | ||
| bottom:0; | ||
| z-index: 1; | ||
| } | ||
| header .main-menu .item{ | ||
|
|
||
| } | ||
| header .main-menu .item .item__name{ | ||
| padding: 10px 20px 34px 20px; | ||
| font-family: Arial, sans-serif; | ||
| font-size: 13px; | ||
| } | ||
| header .main-menu .item:hover .item__name{ | ||
| background-color: #2c2a29; | ||
| color: #669900; | ||
| border-radius: 6px 6px 0 0; | ||
| } | ||
| header .main-menu .item .item__contents{ | ||
| width:100%; | ||
| position: fixed; | ||
| left:0; | ||
| display: none; | ||
| } | ||
| header .main-menu .item:hover .item__contents{ | ||
| display: block; | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu{ | ||
| background-color: #2c2a29; | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu > ul{ | ||
| display: flex; | ||
| padding: 20px 0; | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu > ul > li{ | ||
| width: 220px; | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu > ul > li h4{ | ||
| padding: 3px 0 12px 0; | ||
| font-size: 14px; | ||
| color: #fff; | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu > ul > li ul li{ | ||
| padding: 5px 0; | ||
| font-size: 12px; | ||
| color: #999; | ||
| cursor: pointer;/*마우스를 올리면 커서가 화살표에서 손가락 모양으로 변화*/ | ||
| } | ||
| header .main-menu .item .item__contents .contents__menu > ul > li ul li:hover{ | ||
| color: #669900; | ||
| } | ||
| header .main-menu .item .item__contents .contents__texture{ | ||
| font-size: 12px; | ||
| padding: 26px 0; | ||
| background-image: url("../images/main_menu_pattern.jpg"); | ||
| } | ||
| header .main-menu .item .item__contents .contents__texture h4{ | ||
| color: #999; | ||
| font-weight: 700; | ||
| } | ||
| header .main-menu .item .item__contents .contents__texture p{ | ||
| color: #669900; | ||
| margin: 4px 0 14px; | ||
| } | ||
| header .badges{ | ||
| position: absolute; | ||
| top: 132px; | ||
| right: 12px; | ||
| } | ||
| header .badges .badge{ | ||
| border-radius: 10px; | ||
| overflow: hidden; | ||
| margin-bottom: 12px; | ||
| box-shadow: 4px 4px 10px rgba(0, 0, 0, .15); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* footer */ | ||
|
|
||
| footer{ | ||
| background-color: #272727; | ||
| border-top: 1px solid #333; | ||
| } | ||
| footer .inner{ | ||
| padding: 40px 0 60px 0; | ||
| } | ||
| footer .menu{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| footer .menu li{ | ||
| position: relative; | ||
| } | ||
| footer .menu li::before{ | ||
| content: ""; | ||
| width: 3px; | ||
| height: 3px; | ||
| background-color: #555; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| right: -1px; | ||
| margin: auto; | ||
| } | ||
| footer .menu li:last-child:before{ | ||
| display: none; | ||
| } | ||
| footer .menu li a{ | ||
| display: block; | ||
| color: #ccc; | ||
| font-size: 12px; | ||
| font-weight: 700; | ||
| padding: 15px; | ||
| } | ||
| footer .menu li a.green{ | ||
| color: #669900; | ||
| } | ||
| footer .btn-group{ | ||
| margin-top: 20px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| footer .btn-group .btn{ | ||
| font-size: 12px; | ||
| margin-right: 10px; | ||
| } | ||
| footer .btn-group .btn:last-child{ | ||
| margin-right: 0; | ||
| } | ||
| footer .info{ | ||
| margin-top: 30px; | ||
| text-align: center; | ||
| } | ||
| footer .info span{ | ||
| margin-right: 20px; | ||
| color: #999; | ||
| font-size: 12px; | ||
| } | ||
| footer .info span:last-child{ | ||
| margin-right: 0; | ||
| } | ||
| footer .copyright{ | ||
| color: #999; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| margin-top: 12px; | ||
| } | ||
| footer .logo{ | ||
| margin: 30px auto 0; | ||
| } |
Oops, something went wrong.