@charset "utf-8";
@import url('font.css');

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:15px;font-family:'Noto Sans KR', 'Malgun Gothic', sans-serif; font-weight:300; letter-spacing:-0.025em;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-weight:bold;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, li, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select, input {font-family:'Noto Sans KR'; font-size:15px; line-height:22px;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
b, strong, th {font-weight:bold;}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* 인트로 */
.mb_view {display:none;}

#intro {width:100%; background:url('/images/intro_bg.jpg') center top no-repeat;}
#intro .intro_wrap {width:1200px; margin:0 auto;}
#intro .MnV {display:flex; justify-content:space-between; margin-top:25px;}
#intro .MnV h4 {font-size:18px; color:#fff; opacity:0.7; letter-spacing:3px;}
#intro .MnV p {font-size:20px; color:#fff; margin-top:10px;}
#intro .MnV li:nth-child(2) {text-align:right;}
#intro h2.hp_name {font-size:30px; font-weight:900; color:#55e8fe; letter-spacing:20px; text-align:center; margin:50px 0 0;}
#intro h2.hp_name span {color:#e2e2e3;}
#intro h2.hp_name br {display:none;}
#intro p.txt03 {font-size:50px; font-weight:bold; line-height:75px; text-align:center; color:#fff; text-shadow:3px 3px 7px rgba(0,0,0,0.2); margin:35px 0 80px;}

#intro .bn_wrap2 {display:flex; justify-content:space-between; -webkit-display:flex; -webkit-justify-content:space-between;}

#intro .bn_wrap2 .hp_banner {width:380px; text-align:center; position:relative;}
#intro .bn_wrap2 .hp_banner img {position:absolute; top:7px; left:7px; width:366px; height:196px; opacity:0; transition:all 0.6s; -webkit-transition:all 0.6s; -moz-transition:all 06s; -o-transition:all 0.6s;}
#intro .bn_wrap2 .hp_banner .txt_box {width:100%; height:210px; border:7px solid #fff; margin-bottom:20px; overflow:hidden;}
#intro .bn_wrap2 .hp_banner .txt_box h3 {font-size:33px; font-weight:bold; color:#fff; margin:30px 0 18px; letter-spacing:-1.5px;}
#intro .bn_wrap2 .hp_banner .txt_box h3.sky {color:#73b7fe;}
#intro .bn_wrap2 .hp_banner .txt_box h3.yellow {color:#f7b902;}
#intro .bn_wrap2 .hp_banner .txt_box h3.green {color:#6aff63;}
#intro .bn_wrap2 .hp_banner .txt_box p {font-size:20px; line-height:30px; font-weight:bold; color:#fff;}
#intro .bn_wrap2 .hp_banner a {display:block;}
#intro .bn_wrap2 .hp_banner a:hover img {opacity:1;}
#intro .bn_wrap2 .hp_banner .cs {font-size:22px; font-weight:bold; color:#fff; display:inline-block; max-width:240px; text-align:left;}

#intro .intro_copy {font-size:15px; color:#e5e5e5; text-align:center; margin:90px 0 40px;}



@media (max-width: 960px){
	.pc_view {display:none;}
	.mb_view {display:block;}
	#intro {width:100%; min-width:320px; padding:20px 20px 30px; background:url('/images/intro_bg.jpg') center top no-repeat;}
	#intro .intro_wrap {width:100%;}
	#intro .MnV {display:flex; justify-content:space-between; margin-top:0;}
	#intro .MnV h4 {font-size:14px; color:#fff; opacity:0.7; letter-spacing:3px;}
	#intro .MnV p {font-size:16px; color:#fff; margin-top:5px;}
	#intro h2.hp_name {font-size:15px; letter-spacing:10px; margin:40px 0 0;}
	#intro p.txt03 {font-size:22px; font-weight:bold; line-height:32px; word-break:keep-all; text-align:center; color:#fff; text-shadow:3px 3px 7px rgba(0,0,0,0.2); margin:20px 0 25px;}
	
	#intro .intro_copy {font-size:13px; color:#e5e5e5; text-align:center; margin:50px 0 0;}
	
	#intro .bn_wrap2 {display:block; /*display:flex; justify-content:space-between; -webkit-display:flex; -webkit-justify-content:space-between;*/}
	#intro .bn_wrap2 li {width:95%; margin:15px auto;  border:2px solid #fff; padding:20px 5px; text-align:center;}
	#intro .bn_wrap2 li h3 {font-size:1.3em; color:#fff; margin-bottom:10px; font-weight:bold; letter-spacing:-0.05em; line-height:1.3em;}
	#intro .bn_wrap2 li a {display:inline-block; font-size:14px; line-height:27px; padding:0 10px; background:#fff; font-weight:bold; border-radius:7px;}
	#intro .bn_wrap2 li a i {color:#aaa;}
}