@charset "utf-8";
/* wrap */
.wrap {overflow:hidden; position:relative; min-width:1220px}

/* inner */
.inner {position:relative; width:1220px; margin:0 auto; padding:0 10px}
.clear::after,
.inner::after {content:""; display:table; clear:both}

/* header */
.header {position:fixed; top:0; right:0; left:0; z-index:50; background-color:#fff}
.header .top {border-bottom:1px solid #e1e1e1; background-color:#f5f6fa}
.header .top .menu {float:left}
.header .top .menu li {float:left}
.header .top .menu a,
.header .top .etc a {display:block; height:34px; color:#888; font-size:13px; line-height:34px}
.header .top .menu a {margin-right:-1px; padding:0 15px; border:1px solid #e1e1e1; border-width:0 1px}
.header .top .etc {float:right}
.header .top .etc li {float:left; position:relative}
.header .top .etc li:first-child::before {display:none}
.header .top .etc li::before {content:""; position:absolute; top:12px; left:0; width:1px; height:12px; background-color:#e1e1e1}
.header .top .etc li:last-child a {padding-right:0}
.header .top .etc a {display:block; padding:0 13px}
.header .middle {border-bottom:1px solid #eee}
.header .middle .inner {height:80px; padding-top:20px; padding-bottom:20px}
.header .middle .logo {display:inline-block}
.header .middle .logo a {display:block; width:251px; height:37px; background:url(../images/common/img-logo.png) no-repeat 0 0}
.header .middle .right {position:absolute; top:50%; right:10px; padding-right:130px; transform:translateY(-50%)}
.header .middle .right p {font-weight:300; text-align:right}
.header .middle .right .userName {color:#000}
.header .middle .right .btn {position:absolute; top:50%; right:0; margin:0; border-radius:5px; transform:translateY(-50%)}
.header .bottom {border-bottom:1px solid #eee}
.header .bottom .gnb,
.header .bottom .gnb > ul,
.header .bottom .gnb > ul > li {float:left}
.header .bottom .gnb > ul > li {margin:0 10px}
.header .bottom .gnb > ul > li:first-child {margin-left:0}
.header .bottom .gnb > ul > li:first-child > a {padding-left:0}
.header .bottom .gnb > ul > li:last-child {margin-right:0}
.header .bottom .gnb > ul > li:last-child > a {padding-right:0}
.header .bottom .gnb > ul > li > a {display:block; height:55px; padding:0 10px; color:#000; font-size:19px; font-weight:500; line-height:55px}
.header .bottom .right {float:right;}
.header .bottom .form{display: flex;align-items: center;margin: 5px;}
.header .bottom .form .totalSearch{border: 1px solid #ccc;border-radius: 5px;background-color: #f5f5f5;padding: 9px;margin-right: 10px;}
.header .bottom .form .totalSearch button{position:inherit;height: auto;width: auto;line-height: 10px;background: none;}
.header .bottom .form .totalSearch button span{background: url(../images/common/Main-search-ico.png)no-repeat;text-indent: -9999px;display: inline-block;width: 15px;height: 15px;}
.header .bottom .form .totalSearch input{position:relative;height: auto;width: 180px;}
.header .bottom .form .totalSearch input::placeholder{color:#aaa !important;}
.header .bottom .form .totalSearch input::-webkit-input-placeholder {color: #aaa !important}
.header .bottom .form .totalSearch input:-ms-input-placeholder {color: #aaa !important}
.header .bottom .form .totalSearch input::-moz-placeholder {color: #aaa !important}
.header .bottom .form .totalSearch input::placeholder {color: #aaa !important}
.header .bottom .form .totalSearch select{position:relative;border: none;background: none;height: auto;width: 120px;border-right: 1px solid #ccc;background: url(../images/common/Main-search-Sellect.png)no-repeat right 10px top 10px;padding-right: 10px;}
.header .bottom .form > .btn {position:relative;width: 100px;line-height: 40px;border: 1px solid #ccc;border-radius: 5px;font-weight: 500;min-width:0;height: auto;margin:0;padding: 0 35px 0 10px;background: url(../images/colorType/Main-Details-Search.png) no-repeat;}
.header .bottom .totalMenu {display:none}
.header .bottom .totalMenuList {display:none}

/* filter Point-Color */
.colorTypeA .header .bottom .form > .btn{background-position: 70px 13px;}
.colorTypeB .header .bottom .form > .btn{background-position: 70px -19px;}
.colorTypeC .header .bottom .form > .btn{background-position: 70px -51px;}
.colorTypeD .header .bottom .form > .btn{background-position: 70px -85px;}
.colorTypeE .header .bottom .form > .btn{background-position: 70px -116px;}

/* container */
.container {position:relative; margin-top:172px}

/* visual */
.visual .inner {height:160px; padding-top:50px}
.visual .title {color:#fff; font-size:36px; font-weight:500}

/* contentsWrap */
.contentsWrap::after {content:""; display:table; clear:both}
.contentsWrap {width:1200px; margin:0 auto; padding:41px 0 150px}
/* lnb */
.contentsWrap .lnb {float:left; width:240px}
.lnb .menu {padding:13px 20px 10px; border:1px solid #ccc; border-radius:5px}
.lnb .menu .head {margin-bottom:5px; padding-bottom:17px; border-bottom:1px solid #ccc}
.lnb .menu .head .title {color:#000; font-size:19px}
.lnb .menuList li:first-child {margin-top:0}
.lnb .menuList li {margin-top:13px}
.lnb .menuList li a {display:block}
.lnb .menuList > li {margin-top:2px}
.lnb .menuList > li > a {position:relative; padding:7px 0; color:#000; font-size:17px; font-weight:500}
.lnb .menuList > li > a.toggle::after {content:""; position:absolute; top:17px; right:0; width:11px; height:5px; background:url(../images/common/spr-lnb-arrow.png) no-repeat 0 -9px}
.lnb .menuList > li > a.toggle.active::after {background-position:0 0}
.lnb .menuList ul {display:none; padding:10px 0 13px 22px}
.lnb .formMenu {margin-top:47px}
.lnb .formMenu > .btnWrap {display:flex; margin-top:33px}
.lnb .formMenu > .btnWrap .btn {flex:1; margin:0}
.lnb .formMenuList > li:first-child {margin-top:0}
.lnb .formMenuList > li {margin-top:36px}
.lnb .formMenuList > li > a {display:block; position:relative; padding:0 50px 16px 20px; border-bottom:1px solid #ccc; color:#000; font-size:17px; font-weight:500}
.lnb .formMenuList > li > a::after,
.lnb .formMenuList > li > a::before {content:""; position:absolute}
.lnb .formMenuList > li > a::before {top:2px; left:0; width:15px; height:22px; background:url(../images/common/spr-common.png) no-repeat -68px -34px}
.lnb .formMenuList > li > a::after {top:10px; right:20px; width:11px; height:5px; background:url(../images/common/spr-lnb-arrow.png) no-repeat 0 -9px}
.lnb .formMenuList > li > a.active::after {background-position:0 0}
.lnb .formMenuList ul {display:none; margin-top:12px}
.lnb .formMenuList ul li:first-child {margin-top:0}
.lnb .formMenuList ul li {margin-top:5px}

/* 3depths */
.lnb .formMenuList .formMenuDepths{}
.lnb .formMenuList .formMenuDepths > li{position: relative;padding-left: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.lnb .formMenuList .formMenuDepths > li:before{position: absolute;content:'';width: 2px;height: 10px;left: 0;top: 7px;}
.colorTypeA .lnb .formMenuList .formMenuDepths > li:before{background: #f27800}
.colorTypeB .lnb .formMenuList .formMenuDepths > li:before{background: #003b95}
.colorTypeC .lnb .formMenuList .formMenuDepths > li:before{background: #26a647}
.colorTypeD .lnb .formMenuList .formMenuDepths > li:before{background: #4f5193}
.colorTypeE .lnb .formMenuList .formMenuDepths > li:before{background: #538a8d}
.lnb .formMenuList .formMenuDepths > li > a{}
.lnb .formMenuList .formMenuDepths > li > ul {background:#eee; padding:5px}

/* contents */
.contentsWrap .contents {float:right; width:880px; /* padding-top:9px; */}
.contents {position:relative; min-height:600px}
.contents::after {content:""; display:table; clear:both}

/* aside */
.main .aside {top: 340px;}
.aside.fixed {position:fixed; top:190px}
/*.aside {position:absolute; top:200px; left:50%; -webkit-transform:translateX(650px) -moz-transform:translateX(650px) -ms-transform:translateX(650px) -o-transform:translateX(650px) transform:translateX(650px);}*/
.aside {position:absolute; top:200px; left:50%; transform:translateX(650px)}
.aside .guide {display:block; position:relative; width:135px; height:80px; background:url(../images/common/img-userGuide.png) no-repeat 0 0}
.aside .guide i {position:absolute; top:33px; right:-7px; margin:0}
.aside .btnTop {display:block; height:40px; color:#fff; text-align:center; line-height:40px; background-color:#aaa}

/* todayList */
.todayList {width:136px; margin-top:10px; border:1px solid #ccc}
.todayList > button {width:100%; height:38px; padding:0 40px 0 12px; border:0; border-bottom:1px solid #ccc; text-align:left; background:url(../images/common/img-select.png) no-repeat right 9px center; background-color:#fff; cursor:pointer}
.todayList ul {padding:8px 12px; background-color:#f5f5f5}
.todayList li:first-child {margin-top:0}
.todayList li {margin-top:10px; border:1px solid #ccc}

/* footer */
.footer {background-color:#f0f0f0}
.footer .inner {padding:35px 275px}
.footer .logo {position:absolute; top:35px; left:10px}
.footer .familyMenuWrap {position:absolute; top:40px; right:10px; width:264px}
.footer .footerLink::after {content:""; display:table; clear:both}
.footer .footerLink li {float:left}
.footer .footerLink li a {color:#414141; font-size:14px}
.footer address {margin:10px 0 5px; color:#888; font-size:14px}
.footer address span {margin-left:15px}
.footer .copy {color:#888; font-size:12px}

/* detail-search */
.contentsWrap .contents.Dt-search{    
    float: none;   
    margin: 0 auto;
}