/* BASIC css start */
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }


#wrap{min-width:1200px}





/* »ó´Ü */
#header { position:relative; width:100%; height:121px; min-width:1200px }
#header .headerWrap { position:relative; width:100%; height:121px; background:#fff; transition: all 0.2s; }
#header .headerWrap.active { position: fixed; top: 0; z-index: 10005; transition: all 0.2s; }
#header .headerWrap.nav-down{ position:fixed; top:0px; z-index: 10005; }
#header .headerWrap.nav-up{position: fixed; top: -170px; z-index: 10005; transition: all 0.2s;}



/* »ó´Ü¶ì¹è³Ê¿ë CSS*/
/*
#header { position:relative; width:100%; min-width:1200px; height:120px;  }
#header .headerWrap { position:relative; width:100%; background:#fff; transition: all 0.2s; }
#header .headerWrap.active { position: fixed; top: 0; z-index: 10005; transition: all 0.2s; }
#header .headerWrap.nav-down{ position:fixed; top:0px; z-index: 10005;}
#header .headerWrap.nav-up{position: fixed; top: -230px; z-index: 10005; transition: all 0.2s;}
*/






#header .headerLine01 { height: 40px; line-height: 37px; background: #000; border-bottom: 1px solid #4c4c4c; }  
#header .headerLine01 ul { text-align: right; }
#header .headerLine01 ul li { display: inline-block; margin-left: 27px; }
#header .headerLine01 ul li a { color: #fff  }
#header .headerLine01 ul li a img{ vertical-align:middle;  }

#header .headerLine02 { height: 80px; background: #000; }
#header .headerLine02 .left { width: calc(50% - 65px); float: left;}
#header .headerLine02 .center { width: 130px; float: left; }
#header .headerLine02 .right { width: calc(50% - 65px); float:right !important }
#header .headerLine02 .left ul {  }
#header .headerLine02 .left ul li { margin-right: 42px; display: inline-block; line-height: 80px; }
#header .headerLine02 .left ul li:nth-last-child(1) { margin-right: 0 }
#header .headerLine02 .left ul li a { font-size: 16px; font-weight: 700; font-family: 'Roboto'; color: #fff }

#header .headerLine02 ul li:hover a::after { display: block; }
#header .headerLine02 ul li a { position: relative; }
#header .headerLine02 ul li a::after { content: ''; display: block; width: 100%; height: 2px; background: #000; position: absolute; bottom: -7px; display: none; }

#header .headerLine02 .center h1 { line-height: 80px; text-align: center; }
#header .headerLine02 .center h1 a { display: inline-block;  }
#header .headerLine02 .right .icoBox { position: relative; margin-left: 20px; vertical-align: middle; }
#header .headerLine02 .right .icoBox .bkCount { position: absolute; top: 0; right:-10px; font-size: 10px; display: inline-block; padding:2px 8px; color: #fff; border-radius: 20px; background: #000;  }
#header .headerLine02 .right .ico { display: block; width: 30px; height: 30px; background: url(/design/cosrx/phps/common/header_menu_sp_wh.png) no-repeat center; background-size: cover; font-size: 0 }
#header .headerLine02 .right .ico.ico01 { background-position: 0 0; }
#header .headerLine02 .right .ico.ico02 { background-position: 0 -30px; }
#header .headerLine02 .right ul { text-align: right; }
#header .headerLine02 .right ul li { display: inline-block; margin-left: 50px;line-height: 80px; }
#header .headerLine02 .right ul li:nth-child(1) { margin-left: 0 }
#header .headerLine02 .right ul li a { font-size: 16px; font-weight: 700; font-family: 'Roboto';  color: #fff }

#header .headerLine02 .headerLine03 { position: relative; top: 1px; z-index: 10005; opacity: 0; height: 0; visibility: hidden; transition: all 0.2s }
#header .headerLine02 .headerLine03 .container { padding: 45px 0 30px 20px; font-size: 14px; box-sizing: border-box;}
#header .headerLine02 .headerLine03 .container a { font-size: 16px; vertical-align: top;  }
#header .headerLine02 .headerLine03 dl { display: inline-block; width: 170px; vertical-align: top }
#header .headerLine02 .headerLine03 dl img { margin-bottom: 10px; width: 310px }
#header .headerLine02 .headerLine03 dl dt { margin-bottom: 20px; font-size: 16px; font-weight: 600; border-bottom:1px solid #e5e5e5; padding-bottom:20px;}
#header .headerLine02 .headerLine03 dl dd { margin-bottom: 17px; }
#header .headerLine02 .headerLine03 dl dd a { color: #666 }

#header .headerLine02 .headerLine03.active { opacity: 1; height: auto; background: #fff; visibility: visible; }

#header .Border_Round img { z-index:10010;}



/*»ó´Ü ¶ì¹è³Ê*/
.tickerWrap{ background: #333; height:37px; overflow:hidden; width:100%; position:relative; }
.tickerWrap ul,
.tickerWrap li {margin:0; padding:0; list-style:none; background-color:#000;}
.tickerWrap li a {display:block; height:50px; line-height:37px; color:#fff; text-decoration:none; text-align: center; font-size:14px; font-weight:600; }
a.tickerClose{display: block; color:#fff; position: absolute; top:0; right: 0; width: 50px; height: 50px;  line-height:50px; text-align:center; font-size:20px;} 



/* Àαâ°Ë»ö¾î */
.searchWrap { position: fixed; z-index:10001; width: 100%; background: #fff; display: none; }
.searchWrap .container { width: 800px; padding-bottom: 50px }
.searchWrap .wrapTitle { margin: 50px 0 30px 0; line-height: 30px; font-size: 40px; text-align: left; }
.searchWrap .search { position: relative; margin-top: 50px }
.searchWrap .search input { width: 100%; height: 60px; line-height: 60px; border:0 none; border-bottom: 1px solid #000; font-size: 25px; }
.searchWrap .search a { position: absolute; right: 0; top: 0; display: block; width: 60px; height: 60px; background: url('/design/cosrx/phps/common/header_serarch_ico.png') no-repeat center; background-size: cover; font-size: 0 }
.searchWrap .searchWord li { display: inline-block; margin-right: 5px }
.searchWrap .searchWord li a { display: block; padding: 0 20px; font-size: 16px; font-weight: 600; line-height: 30px; border: 1px solid #000; border-radius: 30px; }
/* BASIC css end */