@charset "utf-8";
body{
 font-size: 100%;
 line-height: 1.333%;
}
html {
      /* Prevent font scaling in landscape */
     -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
     -moz-text-size-adjust: none; /*Firefox*/
     -ms-text-size-adjust: none;  /*Ie*/
     -o-text-size-adjust: none; /*old versions of Opera*/
		 overflow-x:hidden
}
.wrapper{margin:auto;  width:92%; max-width:1400px}
header{position:relative; box-shadow:0px 0px 3px rgba(0,0,0,.3); z-index:900}
header h1{text-align:center; margin:auto; max-width:177px}
header p.login{float:right; margin-top:33px; margin-right:40px; padding:3px 15px 3px 42px; bordeR:1px solid #ccc; border-radius:3px; overflow:hidden; background:url(/open_content/CCS/img/inc/ic_charge.png) no-repeat 12px -5px/20px;}
header p.login a{font-size:.9em; }
header p.login a+a:before{display:inline; content:'/ '; font-size:.8em}
header nav>ul>li{display:inline-block; margin-right:5%; padding:31px 0px 31px}
header nav>ul>li>a{color:#1b1b1b; font-size:1.55rem; font-weight:500}
header nav>ul>li.select>a{color:#691bdf}
header nav>ul>li .submenu{display:none; position:absolute; left:0px; top:100%; width:100%; height:127px; background:#7a22f5 url(/open_content/CCS/img/sub/sub_bg.gif) repeat-y right top; overflow:hidden}
header nav>ul>li .submenu:before{display:block; content:''; position:absolute; left:-85%; width:100%; height:100%; background:#691bdf}
header nav>ul>li .submenu .wrapper{margin-top:46px; }
header nav>ul>li .submenu .wrapper:After{display:block; content:''; clear:both}
header nav>ul>li .submenu h2{position:relative; float:left; font-weight:600}
header nav>ul>li .submenu h2:before{display:block; content:''; position:absolute; right:-70px; top:-174px; width:340px; height:340px; border-radius:0px 800px 800px 0px; background:#691bdf} 
header nav>ul>li .submenu h2 span{position:relative;  padding-lefT:30px; z-index:1; font-size:1.43em; color:#d7baff; background:url(/open_content/CCS/img/sub/ic_light.png) no-repeat left -3px/21px}
header nav>ul>li .submenu ul{float:left; margin-left:110px}
header nav>ul>li .submenu ul li{display:inline-block; font-size:1.43em}
header nav>ul>li .submenu ul li+li:before{display:inline-block; content:'/'; padding:0px 25px 0px 20px; color:#fff; font-weight:100}
header nav>ul>li .submenu ul li a{position:relative; color:#fff}
header nav>ul>li .submenu ul li a:hover{text-decoration:none}
header nav>ul>li .submenu ul li a:after{display:block; content:''; opacity:0; position:absolute; left:0%; bottom:1px; width:100%; height:0px; background:#c32eef; border-radius:2px; transition:all ease .2s}
header nav>ul>li .submenu ul li a:hover:After,
header nav>ul>li .submenu ul li.select a:After{opacity:1; height:8px}
header nav>ul>li .submenu ul li a:hover:After{bottom:50%; margin-bottom:-4px}
header nav>ul>li .submenu ul li a span{position:relative; z-index:1}
header nav>ul>li.mypage>a{display:none} 
header nav>ul>li.select .submenu{display:block}

footer{margin-top:100px; border-top:2px solid #1b1b1b}
footer:after{display:block; content:''; clear:both}
footer .wrapper{position:relative}
footer p.btn_goTop{position:absolute; top:-18px; right:-18px; padding:0px 18px; width:150px; background:#fff}
footer p.btn_goTop:after,
footer p.btn_goTop:before{display:block; content:''; position:absolute; top:14px; width:6px; height:6px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border-top:2px solid #333; border-right:2px solid #333; }
footer p.btn_goTop:after{left:-7px}
footer p.btn_goTop:before{-webkit-transform:rotate(-135deg); transform:rotate(-135deg); right:-7px}
footer p.btn_goTop a{display:block; position:relative; padding:3px 45px 3px 25px; border:2px solid #333; border-radius:100px; font-size:.95em; font-weight:500}
footer p.btn_goTop a:After{display:block; content:''; position:absolute; right:20px; top:12px; width:10px; height:10px; border:2px solid #333; border-width:2px 2px 0px 0px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); transition:all ease .2s}
footer p.btn_goTop a:hover:After{-webkit-transform:rotate(315deg); transform:rotate(315deg);}
footer p.btm_logo,
footer div.btm_con,
footer div.btm_info{float:left; margin:60px 0px 55px; word-break:keep-all}
footer p.btm_logo{margin-top:95px; width:29%}
footer p.btm_logo img{max-width:188px}
footer div.btm_con{width:47%}
footer div.btm_con .menu>li{overflow:hidden; margin-bottom:7px}
footer div.btm_con .menu>li>a{float:left; font-weight:600; min-width:180px}
footer div.btm_con .menu>li .submenu{float:left}
footer div.btm_con .menu>li .submenu .wrapper{display:inline}
footer div.btm_con .menu>li .submenu h2{display:none}
footer div.btm_con .menu>li .submenu ul{}
footer div.btm_con .menu>li .submenu ul li{float:left}
footer div.btm_con .menu>li .submenu ul li:After{content:'/'; padding:0px 12px; color:#ddd; font-weight:100; font-size:.95em}
footer div.btm_con .menu>li .submenu ul li:last-child:After{display:none;}
footer div.btm_con .menu>li.mypage{display:none}
footer div.btm_con .copy{margin-top:30px}
footer div.btm_info{width:24%}
footer div.btm_info>p{margin-bottom:3px}
footer div.btm_info .btm_link{margin-top:30px; }
footer div.btm_info .btm_link>p{display:inline-block; padding:2px 15px 2px 42px; border:1px solid #333; border-radius:3px; overflow:hidden}
footer div.btm_info .btm_link>p a{font-size:.9em; }
footer div.btm_info .btm_link>p:first-child{background:#333 url(/open_content/CCS/img/inc/ic_charge.png) no-repeat 12px -47px/20px; color:#fff}
footer div.btm_info .btm_link>p:last-child{background:url(/open_content/CCS/img/inc/ic_seogu.png) no-repeat 10px center/20.5px}
footer div.btm_info .btm_link>p:first-child a{color:#fff}
footer div.btm_info .btm_link>p:first-child a+a:before{display:inline; content:'/ '; font-size:.8em}


/*******************************************************************************************************************/

@media screen and (min-width:1921px){ 
	.wrapper{max-width:1700px} 
	header nav>ul>li{margin-right:6%}
}

@media screen and (min-width:1024px){
	header h1{float:right; margin:20px 0px; width:15%}
}

@media screen and (max-width:1023px){
	header h1{padding:7% 0px 3%; max-width:30%; min-width:160px}
	header p.login{display:none}
	header nav>ul{text-align:center; white-space:nowrap; overflow-x:auto}
	header nav>ul>li{margin:0px 4%}
	footer p.btm_logo{display:none}
	footer div.btm_con{width:60%}
	footer div.btm_info{width:40%}
	footer p.btn_goTop{left:0px; right:0px; margin:auto}
}

@media screen and (min-width:801px){	
	.dp_mb{display:none}
	.pc_block{display:block}
}

@media screen and (max-width:800px){
	.dp_pc{display:none}
	.mb_block{display:block}

	.wrapper{width:84%}
	body{letter-spacing:-.5px}
	header{box-shadow:none}
	header>.wrapper{width:95%}
	header h1{padding:35px 0px 10px}
	header nav>ul>li{margin:0px 2.5%; padding:0px}
 	header nav>ul>li>a{display:block; position:relative; padding:17px 0px 17px; font-size:1.3em; letter-spacing:-1px}
	header nav>ul>li.select>a:after{display: block; content: ''; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); height: 0px; width: 0px; border: 20px solid transparent; border-bottom-color: #7a22f5;  border-width: 6px 7px} 
	header nav>ul>li.select>a{font-weight:600}
	header nav>ul>li .submenu{height:100px; background-size:50%}
	header nav>ul>li .submenu .wrapper{margin-top:35px}
	header nav>ul>li .submenu h2{display:none}
	header nav>ul>li .submenu:before{display:none}
	header nav>ul>li .submenu ul{margin:0px; text-align:center; width:100%}
	#main footer{margin-top:20px}
	footer .wrapper{padding:60px 0px 80px}
	footer p.btm_logo, footer div.btm_con, footer div.btm_info{float:none; margin:0px}
	footer div.btm_con{position:absolute; bottom:30px; width:100%}
	footer div.btm_con .menu{display:none}
	footer div.btm_info{width:100%; }
	footer div.btm_info ul{margin-top:10px}
	*{max-height:500000px}
}