@charset "utf-8";

@font-face {
	font-family:'NanumSquareRoundB';
	src: url('/common/font/NanumSquareRoundB.eot') format('woff'), url('/common/font/NanumSquareRoundB.woff') format('opentype');
}
@font-face {
	font-family:'NanumSquareRoundEB';
	src: url('/common/font/NanumSquareRoundEB.eot') format('woff'), url('/common/font/NanumSquareRoundEB.woff') format('opentype');
}


* {margin:0; padding:0; box-sizing: border-box;}
*:after,
*:before {box-sizing:border-box;}

a {text-decoration: none; color:inherit;}
ul, li, ol {list-style: none;}
select {background:url(/resource/img/maskstore/ico_arrow_down.png) no-repeat center right 10px; border:1px solid #ddd; height:40px; padding: 0 35px 0 10px; -webkit-appearance:none; -ms-appearance:none; -moz-appearance: none; font-size: inherit;}
select::-ms-expand {display:none;}
input {border:0; background:none; font-size: inherit;}
button {font-size: inherit; border:0; background:none; height:40px; padding: 0 10px; background:#6a7a90; color:#fff; cursor:pointer; vertical-align:middle;}
 
 /* 공통 */
 html{height:100%;overflow:hidden;overflow-y:auto}
 body{
    background: url(/cwportal/_res/cwportal/img/intro/intro_bg2026_2.jpg) no-repeat 50% 50% / cover;
    color:#333;
    font-weight:500;
    font-size:1.5em;
    font-family: "NanumSquareRoundEB", sans-serif;
    line-height:1.75;
    letter-spacing:-.05em;
    height:100%;
    overflow-x:hidden;
}


#intro {height:100vh; position:relative; text-align: center;}
#intro .wrap {max-width:1200px; height:auto; overflow:hidden; margin:0 auto;}
#intro .wrap > a > p {margin-bottom:40px;}
#intro .wrap > a > p > img {max-width:100%;}
#intro .wrap .logo {display:block;padding:120px 0 75px; text-align: center;}
#intro .wrap .title {margin-bottom:70px; font-size:1.2em; line-height:1.4; word-break: keep-all;}
#intro .wrap .intro_list {height:600px;}
#intro .wrap .intro_list.type2 {padding:0 16.65%;}
#intro .wrap .intro_list:after {content:""; display:block; clear:both;}
#intro .wrap .intro_list > li  {float:left;/*width: 50%; */width:calc(50% - 30px);height:100%;max-height: 500px;margin: 0 15px 30px;;padding-right:0;}
#intro .wrap .intro_list > li:last-child {padding-right:0;}
#intro .wrap .intro_list > li > div {display:block; height:100%; border-radius:30px; background: #fff;}

#intro .wrap .intro_list .txt {width:100%;height:100%;background:#fff;}
#intro .wrap .intro_list .txt.bg1{border-radius:30px;background: url(/cwportal/_res/cwportal/img/intro/bg_8_4.png) no-repeat center top / cover;}
#intro .wrap .intro_list .txt.bg2{border-radius:30px;background: url(/cwportal/_res/cwportal/img/intro/bg_02.jpg) no-repeat center top / cover;;}
#intro .wrap .intro_list .txt.bg3{border-radius:30px; background:linear-gradient(#f0af2e, #ee8925);}
#intro .wrap .intro_list .txt > div {vertical-align: top;}
#intro .wrap .intro_list .txt .titleimg1{/* margin-top: -131px; */margin-top: -40px;max-width:100%;/* overflow:hidden; */}
#intro .wrap .intro_list .txt .titleimg2{margin-top:94px;}
#intro .wrap .intro_list .txt .titleimg3{margin-top:-48px;}
#intro .wrap .intro_list .txt .tt1{color:#fff; font-size:32px; font-weight:600;overflow:hidden;}
#intro .wrap .intro_list .txt .tt1.type2{font-size:23px;}
#intro .wrap .intro_list .txt .tt1 .small{display:block;font-size:20px;font-weight:normal;margin-bottom: -10px;margin-top:20px;}
#intro .wrap .intro_list .txt .tt1 .small .str{font-size:22px; font-weight:bold;}
#intro .wrap .intro_list .txt .tt1 .small2{display:block;font-size: 18px;width: 230px;font-weight:500;margin: 5px auto 0 auto;padding-top: 6px;border-top:1px solid #fff;}
#intro .wrap .intro_list .txt .tt1 .small2.type2{font-size:17px;width:240px;line-height:1.4;}

#intro .wrap .intro_list .txt.bg2 .tt1{margin-top:20px;margin-bottom: 5px;}
#intro .wrap .intro_list .txt.bg3 .tt1{margin-top:39px; margin-bottom:8px;}
#intro .wrap .intro_list .txt a{display:block;}
#intro .wrap .intro_list .txt .more {display:inline-block;color:#fff;margin-top: 15px;padding: 17px;font-size:18px;border: solid 1px #fff;border-radius:50px;line-height:1;white-space:nowrap;width: 55%;}
#intro .wrap .intro_list .txt .more:hover{background:#fff; color:#000; transition:0.5s;}
#intro .wrap .intro_list .txt .more.ss {margin-top:5px; padding:17px 58px;}
#intro .wrap .intro_list > li li {display:table; width:100%; border-bottom:1px solid #ddd; padding:7px 0;}
#intro .wrap .intro_list > li li:last-child {border-bottom:0;}
#intro .wrap .intro_list > li li span {display:table-cell; width:50%; vertical-align: middle;}
#intro .wrap .intro_list > li li span:nth-child(1) {color:#666; text-align:left;}
#intro .wrap .intro_list > li li span:nth-child(2) {text-align:right;}
#intro .wrap .copy {color:#666; padding:20px; border-top:1px solid #aaa; font-size: 0.9em;}

@media all and (max-width:1187px){
	#intro .wrap .tt {display:none;}
}

@media all and (max-width:1179px){
	#intro .wrap .logo {padding:100px 0 90px;}
	#intro .wrap .intro_list.type2 {padding:0 10.65%;}
	#intro .wrap .intro_list .txt em {font-size: 1.4em;}
	#intro .wrap .intro_list .txt .tt {font-size:0.9em;}
}
@media all and (max-width:1024px){
	body {font-size:1.4em;}
	#intro {position: relative;}
	#intro:before {height:30%;}
	#intro .wrap > a > p {margin:30px 0;}
	#intro .wrap .title {display:none;}
	#intro .wrap .intro_list.type2 {padding:0 6.65%;}
	#intro .wrap .intro_list > li { height:100%; padding: 0; max-height:440px;}
	#intro .wrap .intro_list > li:last-child{padding-right:0;}
	#intro .wrap .intro_list .img img {top:45%; left:55%;}
	#intro .wrap .intro_list > li > div {height:100%;}
	#intro .wrap .intro_list > li > div:after {content:""; display:block; clear:both;}
	#intro .wrap .intro_list .txt {height:100%;background-size: 90px;background-position-x: 20px;}
	
	#intro .wrap .intro_list .txt .titleimg1{max-width:90%;margin-top: -1em;}
	#intro .wrap .intro_list .txt .titleimg2{max-width:70%;margin-top:94px;}
	#intro .wrap .intro_list .txt .titleimg3{max-width:80%;}
		
	#intro .wrap .intro_list .txt .tt1 .small{font-size:16px;margin-bottom: -5px;margin-top: 27px;}
	#intro .wrap .intro_list .txt .tt1 .small2{font-size: 15px;width: 190px;}
	#intro .wrap .intro_list .txt .tt1{font-size:30px;margin-top:-10px}	
	
	#intro .wrap .intro_list .txt.bg2 .tt1{margin-top:20px; margin-bottom:8px;}
	#intro .wrap .intro_list .txt.bg3 .tt1{margin-top:25px; margin-bottom:8px;}

	#intro .wrap .intro_list .txt a {text-align:center;}
	#intro .wrap .intro_list .txt .more {margin-top: 5px;padding: 17px;}

}
@media all and (min-width:768px){	
	.visible {display:block;}
	.hidden_768 {display:none;}
	.hidden_486 {display:none;}
}

@media all and (max-width:767px){
	#intro{/* height:123vh; */}
	#intro .wrap .intro_list.type2 {padding:0 14.65%;}
	#intro .wrap .intro_list > li {/*width: 100%; */width:calc(100% - 30px);max-height:460px;}
	#intro .wrap .logo {padding:70px 0 100px;}
	#intro .wrap .intro_list .txt .tt1{margin-top: -15px;}
	.visible {display:none;}
	.hidden_768 {display:block;}
	.hidden_486 {display:none;}
}


@media all and (max-width:500px){
	#intro{height:auto;}
	#intro .wrap .intro_list.type2 {padding:0 5.65%;}
	#intro .wrap .intro_list > li {}
	#intro .wrap .intro_list .txt.bg2{}
	#intro .wrap .intro_list .txt .titleimg1{max-width:100%;margin-top: -4em;}
	#intro .wrap .intro_list .txt .titleimg2{max-width:70%;margin-top:68px;}
	#intro .wrap .intro_list .txt .titleimg3{max-width:70%;}
}

@media all and (max-width:486px){
#intro {}
#intro .wrap .intro_list.type2 {padding:0 2.0%;}
.visible {display:none;}
.hidden_768 {display:none;}
.hidden_486 {display:block;}
#intro .wrap .intro_list > li {max-height:400px;} 
#intro .wrap .intro_list .txt em { font-size: 1.3em; }
	#intro .wrap .intro_list .txt .tt1{margin-top: -24px;}
}

@media all and (max-width:358px){
	#intro .wrap .intro_list .txt {width:100%; background-image: none;}
	/*#intro .wrap .intro_list .txt.bg2{background-image: none;}*/
	#intro .wrap .intro_list .txt.bg3{background-image: none;}
	#intro .wrap .intro_list .txt.bg4{background-image: none;}

	#intro .wrap .intro_list .txt em { font-size: 1.3em;margin-left: 0; }
	#intro .wrap .intro_list .txt .more {margin-left: 0;}
	#intro .wrap .intro_list .txt .more2 {margin-left: 0;}
	#intro .wrap .intro_list .txt .tt1{margin-top: 0;}
}