@charset "UTF-8";

/*!
 * ㅇㅇㅇㅇㅇ
 *
 * Copyright on 2013 - 2020 Hwang mi-ran, All right reserved.
 * 
 * miran@wdcals.co.kr
 * 개인메일변경중
 *
 * Last Update. 2020-07-10
 */

/* HTML default STYLE set --------------------------------------------------------------------------------------- */
	/* HTML & BODY */
	html,body{width: 100%; height: 100%; overflow: hidden; font-size: 12px;}
	body{font-family: "나눔고딕", Nanum Gothic, Nanum Gothic Web, sans-serif, "Font Awesome 5 Free"; height: 100%; line-height: 1.65; letter-spacing: -0.03rem; overflow-y: scroll; -webkit-text-size-adjust: none; -webkit-text-size-adjust: none; -webkit-overflow-scrolling: touch;}
	.fa, [class^="fa-"], [class*=" fa-"]{font-family: "나눔고딕", Nanum Gothic, Nanum Gothic Web, sans-serif, "Font Awesome 5 Free";}
	.fa, .fas{font-weight: inherit;}
	.fa:before, .fas:before{font-weight: 900;}

/* Link Animation Effect set ------------------------------------------------------------------------------------ */
	/* Link Effect default */
	#wrap a, #wrap a:link, #wrap a:visited{color: inherit; text-decoration: none;}

	/* header navigation container default  */
	#headerwrap a:hover{
		color: #9BF1FF;
		text-decoration: none;
		opacity: .5;
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	nav#menu ul.link li>a:hover, 
	nav#menu ul.link li:last-child>a:hover{
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	nav#menu ul.close li>a:hover, 
	nav#menu ul.close li>a:active{
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}

	/* main & sub container default */
	.bannerPanel .goProfile:hover{
		border: 1px solid #9BF1FF;
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	#wrap .close:hover{color: inherit; opacity: 1;}
	#wrap .close:active{color: #6CC0E5; opacity: 1;}
	#wrap .tabArea .tabsPnl li>a, #wrap .tabArea .tabsPnl li>a:link{color: #FFF;}
	#wrap .tabArea .tabsPnl li:hover>a{color: inherit; opacity: .8;}
	.tabArea .tabsPnl li:active>a{color: #FFF;}
	.boxListPnl .tile>a:hover, .boxListPnl .tile>a:active{
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	.boxListPnl .tile>a:hover{opacity: 0;}
	.boxListPnl .tile>a:active{background: #000; opacity: .2;}
	.boxListPnl .tile:hover .noLnkWrap, .boxListPnl .tile:active .noLnkWrap{
		background: #000;
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	.boxListPnl .tile:hover .noLnkWrap{opacity: .7;}
	.boxListPnl .tile:active .noLnkWrap{opacity: 1;}

/* HEADER // nav Design set ------------------------------------------------------------------------------------- */
	/* All device support */
	.overlayBG{background: rgba(36, 41, 67, 0.8); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 997; display: none;}
	.blur{filter: url(#blur); filter: blur(.5rem); -ms-filter: blur(.5rem); -moz-filter: blur(.5rem); -webkit-filter: blur(.5rem);}
	.layerPop{height: 100%; display: table; margin: 0 auto;}
	header .inner{max-width: 100%; max-height: 100vh; text-align: center; vertical-align: middle; overflow: hidden; display: table-cell;}
	nav#menuBTN{position: relative; z-index: 1;}
	/* 떠다닐거
	nav#menuBTN{width: 50px; height: 50px; background: rgba(255,255,255,.3); text-align: center; line-height: 50px; border: 1px solid rgba(255,255,255,.1); border-radius: 100%; box-shadow: 0 0 7px rgba(255,255,255,.3); padding-left: 2px; position: fixed; right: 45px;}
	*/
	nav#menuBTN.closePage{width: 100%; position: fixed; top: 0;}
	nav#menuBTN .fa-bars, nav#menuBTN span:first-child{font-size: 1.3rem; letter-spacing: 3px;}
	nav#menuBTN .fa-bars:before{font-size: 24px; vertical-align: -3px;}
	nav#menu{height: inherit; display: none; z-index: 998; position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
	nav#menu ul li>a{font-size: 1rem; font-weight: 600; text-align: center; line-height: 5rem; display: block;}
	nav#menu ul li>a .fa-home:before{font-size: 2.8rem; font-weight: 600;}
	nav#menu ul.link li>a:hover, nav#menu ul.link li:last-child>a{border-bottom: 1px solid rgba(155,241,255,0.3);}
	nav#menu ul.link li:last-child>a:hover{border-bottom: 1px solid #9BF1FF;}
	nav#menu ul.close #closeBTN{font-size: .7rem; color: #FFF; font-weight: 600; border: 1px solid #FFF;}
	nav#menu ul.close #closeBTN:hover{color: #9BF1FF; border: 1px solid #9BF1FF; border-radius: 30px;}
	nav#menu ul.close #closeBTN:active{background: rgba(255,255,255,.3); color: #FFF; border: 1px solid rgba(255,255,255,.4); border-radius: 30px;}
	nav#menu ul.close #closeBTN span:first-child{padding-right: 5rem;}

/* login Popup set ---------------------------------------------------------------------------------------------- */
	/* login warpper Design // All device support */
	.loginPnl{background: rgba(36,41,67,.5); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999;}
	.loginPnl .layerPop{padding: 20rem 0;}
	.loginPnl .outer{
		width: 75vw; height: 100%; max-width: 550px;
		background: rgba(48,52,80,.3);
		text-align: center;
		vertical-align: middle;
		border: 1px solid rgba(255,255,255,.3);
		overflow: hidden;
		display: table-cell;
		padding: 1rem;
	}
	.loginPnl .inner{width: 100%; height: 100%; background: rgba(48,52,80,.3); border: 1px solid rgba(255,255,255,.1); display: table;}
	.loginPnl .closeArea{height: 70px; display: table-row;}
	.loginPnl .closeArea .close{width: 50px; height: 50px; font-size: 30px;}
	.loginPnl .closeArea .close:before{content: "\2715";}
	.loginPnl .insrtGrp{width: 100%; vertical-align: middle; display: table-cell; padding: 0 30px 110px;}
	.loginPnl .insrtGrp .loginTit{text-align: left; padding: 0 0 30px;}
	.loginPnl .insrtGrp .loginTit:after{content: ' '; background: rgba(255,255,255,.3); width: 100%; height: 1px; display: block; margin-top: 5px;}
	.loginPnl .insrtGrp .loginTit .fa-unlock-alt:before{vertical-align: -7px;}
	.loginPnl .insrtGrp .textBox{height: 38px;}
	.loginPnl .insrtGrp .textBox label, .loginPnl .insrtGrp .textBox input[type="text"], .loginPnl .insrtGrp .textBox input[type="password"]{padding: 1em 1.6em;}
	.loginPnl .insrtGrp .copyright{font-weight: 100; padding-top: 30px;}
	.loginPnl .insrtGrp .copyright:before{content: ' '; background: rgba(255,255,255,.3); width: 100%; height: 1px; display: block; margin-bottom: 10px;}
	.button{font-weight: bold; text-align: center; text-decoration: none; vertical-align: baseline; outline: none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; cursor: pointer; zoom: 1;}
	.white:link, .white:hover{background: transparent; border: 1px solid #FFF;}
	.white:link{color: #FFF;}
	.white:hover{color: #9BF1FF; border-color: #9BF1FF;}
	.white:active{background: rgba(255,255,255,.3); color: #FFF; border: 1px solid rgba(255,255,255.4);}
	.button.login{width: 100%; height: 82px; font-size: 20px; line-height: 80px;}

/* FOOTER // contact Me set ------------------------------------------------------------------------------------- */
	#contact{color: #FFF;}
	#contact{text-align: center; padding: 65px 0 0;}
	#contact h1{font-family: "NanumSquare", sans-serif; font-size: 22px; font-weight: 600; padding-bottom: 25px;}
	#contact .myInfo{font-size: 14px; margin: 0 auto; opacity: .7; padding: 0 0 45px;}
	#contact .myInfo dt{color: transparent; font-size: 0;}
	#contact .myInfo dd{width: 100%; line-height: 3; display: block;}
	#contact .myInfo dd:before{color: #FFF; margin-right: 5px;}
	#contact .myInfo dt.mail+dd:before{content: "\F2B6";}
	#contact .myInfo dt.mail+dd{}
	#contact .myInfo dt.maker+dd:before{content: "\F5A1"}
	#contact .myInfo dt.maker+dd{}
	#contact .copyright{background: #161A31; font-size: 1rem; line-height: 45px;}

/* common Design set -------------------------------------------------------------------------------------------- */
	/* accessibility Ui*/
	.skipNav .skipAnchor{
		width: 100%; height: 34px; background: #F7F7F7; color: #3A3D40; font-size: 14px; font-weight: 500; text-align: center; line-height: 34px;
		position: absolute; top: -100px; left: 0; display: block; z-index: 9999;
	}
	.skipNav .skipAnchor:focus{top: 0;}

	/* common // wrapper */
	body, #container{background: #303450;}
	body{color: #FFF;}
	body.lock nav#menuBTN{visibility: hidden;}
	body.isDtl{overflow: hidden;}
	header, #sub{max-width: 1600px;}
	header{background: #303450; margin: 0 auto; padding: 30px 25px;}
	header h1{}
	footer{background: #1E223A; position: fixed; bottom: 0; z-index: -1;}
	#wrap{width: 100%; min-width: 320px; height: 100%; margin: 0 auto; padding: 0; overflow: auto; -webkit-overflow-scrolling: touch;}
	#wrap.isScroll footer{width: calc(100% - 17px);}
	#wrap:not(.isScroll) footer{width: 100%;}
	#container{margin-bottom: 300px;}
	#main{text-align: center; padding: 150px 15px 30px;}
	#main h1{}
	#sub{width: 100%; margin: 0 auto 300px; position: relative; z-index: 1;}
	#sub h1{}
	.subDtlPnl{background: #EFF2F8; color: #535454; position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; z-index: 999; display: none;}
	.templateWrap{padding: 1px 15px 50px;}
	.templateWrap>h4.titArea:first-of-type{margin-top: 35px;}
	.close+.templateWrap{margin-top: 45px;}

	/* common // title item */
	h2.titArea{width: calc(100% - 35vw); font-size: 1.75em; font-weight: 500; border-bottom: 1px solid #FFF; margin:0 0 .2rem; padding: 0 0 15px;}
	h2.titArea+.desc{font-size: 0.9em; letter-spacing: .1em; padding-top: 5px;}
	h3.titArea{font-weight: 700; line-height: 50px; letter-spacing: -1px; margin: 0; position: absolute; top: 2px; left: 15px; opacity: .1}
	h3.titArea+h4.titArea{margin-top: 70px;}
	h4.titArea{font-size: 15px; font-weight: 500; position: relative; margin: 50px 0 7px;}
	h4.titArea:before{content: ""; width: 1em; height: 2px; background: rgba(48, 52, 80,.2); display: inline-block; position: absolute; top: -2px; left: 0; background: #3B93B9; opacity: .3;}
	#sub .pageTitPanel{padding: 0 0 18px;}
	#sub .pageTitPanel .subject{width: 100%;}

	/* common // text item */
	.desc.fab{font-size: 12px; letter-spacing: -1px; opacity: .5;}
	.desc.fab:before{content: "\F299"; color: #000; opacity: .7; margin-right: 5px;}

	/* common // close button Ui */
	.subDtlPnl .close{width: 50px; height: 50px; text-align: center; line-height: 50px; position: absolute; top: 0; right: 0; z-index: 1;}
	.subDtlPnl .close:before{content: "\2715"; display: inline-block;}
	.subDtlPnl .close.dtl{font-size: 35px; opacity: .6;}

	/* common // Tabs Ui */
	.templateWrap .tabArea{margin: 30px 0 50px;}
	.templateWrap .tabArea li{width: calc(100% / 5); height: 30px; text-align: center; line-height: 30px; border: 0px solid rgba(255,255,255,.3); display: inline-block; float: left;}
	.templateWrap .tabArea li>a{width: 100%;}
	.templateWrap .tabArea li.active{background: rgba(50,80,108,.5);}
	.templateWrap .tabArea li:not(.active){background: rgba(50,80,108,.3);}
	.templateWrap .tabArea li:not(.active)>a{color: #FFF;}
	.templateWrap .tabArea li:not(:first-of-type):not(:nth-of-type(-n+5)){border-top-width: 1px; border-left-width: 1px;}
	.templateWrap .tabContainer{width: 600px; box-shadow: 1px 1px 10px rgba(0,0,0,.15); margin: 0 auto;}
	.templateWrap .tabContainer .popup .infoMsg{font-size: 12px; text-align: center; letter-spacing: -1px; opacity: .5;}

/* MAIN PAGE Design set ----------------------------------------------------------------------------------------- */
	#main .fa-igloo{opacity: .25; margin-bottom: 5px;}

/* SUB PAGE Design set ------------------------------------------------------------------------------------------ */
	/* SUB PAGE // Profile */
	#sub.profile article:not(:first-child){border: 1px solid rgba(255,255,255,.2); margin: 0 50px 3rem; padding: 2rem 3rem;}
	.introduce dt{color: #FFF; font-size: 18px; font-weight: 400; position: relative;}
	.introduce dt:before{content: ""; width: .5em; height: 2px; background: rgba(119,214,199,.75); position: absolute; left: 2px;}
	.introduce dd{color: rgba(255,255,255,.7); font-weight: 300;}
	.introduce dd>span{color: rgba(255,255,255,.4);}
	.introduce dl:not(.skill, .etcSkill) dt, .about dd{line-height: 50px;}
	.introduce dl:not(.skill) dt:before{ top: 10px;}
	.introduce dl:not(.about) dd{font-size: 14px;}
	.introduce .skill dt:before{top: 0;}
	.about dt, .about dd, .skill dt, .skill dd{display: inline-block; float: left;}
	.about dt:not(:first-of-type){clear: left;}
	.about dd{font-size: 12px;}
	.skill{margin-top: 15px;}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(odd){clear: left;}
	.skill dd:nth-of-type(-n+2){padding-top: 4px;}
	.tool, .etcSkill{display: inline-block; float: left; margin-top: 10px;}
	.tool dt, .etcSkill dt{float: left;}
	.tool dd, .etcSkill dd{line-height: 30px; float: right;}
	.tool dd:first-of-type, .etcSkill dd:first-of-type{padding-top: 11px;}
	.etcSkill{}
	.etcSkill dd{width: calc(100% - 200px);}
	.cheer h3{color: #FFF; font-size: 18px; font-weight: 400;}
	.cheer dl{margin: 1rem 0;}
	.cheer dl .corpName, .cheer dl .workPariod, .cheer dl .jobRole{color: #CCC; font-size: 13px; font-weight: 300;}
	.cheer dl .corpName{width: 45%; padding: 0 1.5rem;}
	.cheer dl .corpName:before{content: '\2713 \00A0 \00A0 \00A0 \321C'; color: inherit; font-size: inherit;}
	.cheer dl .corpName:after{content: ' '; background: rgba(255,255,255,.3); width: 1px; height: 1em; display: inline-block; margin: 0 2rem -2px 1rem;}
	.cheer dl .workPariod{width: 45%; text-align: right;}
	.cheer dl .workPariod>span{color: rgba(255,255,255,.4);}
	.cheer dl .jobRole{float: none; clear: both; padding: 0 3rem;}
	.eclipseDesign{background: #1E1E1E; font-size: 13px; border: 1px solid rgba(0,0,0,.35); padding: 1em 0; margin-top: 35px;} 
	.eclipseDesign ul{width: inherit; letter-spacing: 1px;}
	.eclipseDesign ul li{display: inline-block; padding: .3em .8em;}
	.eclipseDesign ul li:nth-child(1){width: 3em; color: #aaa; text-align: center; border-right: 1px solid #333;}
	.eclipseDesign .t_skyBlue01{color: #75A9FD;}
	.eclipseDesign .t_skyBlue02{color: #C1D6FD;}
	.eclipseDesign .t_orange{color: #F9C61A;}
	.button.protfolio{width: 100%; height: 82px; font-size: 20px; line-height: 80px; margin-top: 15px;}
	.button.protfolio:active{color: #FFF; border: 1px solid rgba(255,255,255,.6); text-decoration: none; border-radius: 50px;}

	/* SUB PAGE // 1 depth. Common */
	.boxBg1{background: #F2849E;}
	.boxBg2{background: #7ECAF6;}
	.boxBg3{background: #7BD0C1;}
	.boxBg4{background: #C75B9B;}
	.boxBg5{background: #AE85CA;}
	.boxBg6{background: #8078B5;}
	.boxBg7{background: #FF9C42;}
	.boxBg8{background: #C2DC8F;}
	.boxBg9{background: #FFBBB0;}
	.boxBg10{background: #8299D1;}
	.boxBg11{background: #72B9D2;}
	.boxBg12{background: #DB8981;}
	.boxListPnl .cntNo, .cellList .cntNo{display: none;}

	/* SUB PAGE // 1 depth. Card List */
	.cardWrap{position: absolute; top: 0px; z-index: 1;}
	.cardWrap .boxListPnl{margin: auto; position: relative;}
	.boxListPnl .card{
		background: rgba(239, 242, 248,.1);
		border-radius: 20px; transition: opacity 0.2s ease, box-shadow 0.2s ease; opacity: 1;
		display: inline-block; float: left; margin-bottom: 40px; position: relative; overflow: hidden;
	}
	/* 밝은 배경용
	.boxListPnl .card{box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);}
	.boxListPnl .card:hover{0px 0px 10px 0px rgba(0, 0, 0, 0.1)}
	*/
	.boxListPnl .card:not(.open) .frame{background: transparent; cursor: pointer;}
	.boxListPnl .card:not(.open) .frame .bannerTit{margin: 7px 0 10px;}
	.boxListPnl .card:not(.open) .frame .siteInfo, .boxListPnl .card:not(.open) .frame .siteUrl, .boxListPnl .card:not(.open) .frame .copyright~*{display: none;}
	.boxListPnl .card:not(.open) .frame .desc, .boxListPnl .card:not(.open) .frame .descNon{overflow: hidden; -webkit-line-clamp: 3;}
	.boxListPnl .card:not(.open) .frame .copyright{width: 100%;}
	.boxListPnl .card:not(.open) .frame .close{opacity: 0; visibility: hidden;}
	.boxListPnl .card.open .frame{background: #EFF2F8; color: #535454; border-radius: 0; z-index: 996;}
	.boxListPnl .card.open .frame .outter{overflow-y: auto;}
	.boxListPnl .card.open .frame .inner{background: #EFF2F8; letter-spacing: -.85px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
	.boxListPnl .card.open .frame .bannerTit{font-size: 28px; color: rgba(50,80,108,.6); margin: 10px 0 20px 0;}
	.boxListPnl .card.open .frame .desc, .boxListPnl .card.open .frame .descNon{line-height: 30px; padding: 0 0 25px;}
	.boxListPnl .card.open .frame .desc:before{content: '\F292'; font-weight: 600; margin-right: 3px;}
	.boxListPnl .card.open .frame .copyright{padding: 25px 2px 0;}
	.boxListPnl .card.open .frame .close{opacity: .9; visibility: visible; z-index: 1;}
	.boxListPnl .card .frame{
		width: 100%; height: 100%; max-width: 1177px;
		border-radius: 20px; transition: border-radius 0.15s ease;
		position: relative; top: auto; left: auto; right: auto; bottom: auto; overflow: hidden;
	}
	.boxListPnl .card .frame .bannerHolder{width: 100%; position: absolute; overflow: hidden;}
	.boxListPnl .card .frame .bannerHolder .picArea{
		width: 100%; background-color: transparent; background-size: cover; background-position: top -35px center; background-repeat: no-repeat;
		padding: 15px; position: relative; overflow: hidden; z-index: 1;
	}
	.boxListPnl .card .frame .outter{height: 100%; background-color: transparent; padding: 0; margin: 0 auto; position: relative; overflow: hidden; z-index: 1;}
 	.boxListPnl .card .frame .inner{padding: 20px; position: relative;}
	.boxListPnl .card .frame .bannerInfo{letter-spacing: -1px;}
	.boxListPnl .card .frame .bannerTit{font-family: "NanumSquare", sans-serif; width: 100%; font-size: 18px; font-weight: bold; position: relative;}
	.boxListPnl .card .frame .desc{font-size: 16px; opacity: .45;}
	.boxListPnl .card .frame .siteUrl{background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.02); border-radius: 30px; padding: 5px 15px;}
	.boxListPnl .card .frame .siteUrl:hover{}
	.boxListPnl .card .frame .siteUrl:active{}
	.boxListPnl .card .frame .siteUrl:not(.readyMsg):before{content: "사이트 바로가기 : "; font-weight: 500; margin-right: 3px;}
	.boxListPnl .card .frame .siteUrl.readyMsg{cursor: default;}
	.boxListPnl .card .frame .siteInfo{clear: both;}
	.boxListPnl .card .frame .siteInfo dt:not(:first-of-type){margin-top: 15px;}
	.boxListPnl .card .frame .siteInfo dt{font-size: 20px; font-weight: 500;}
	.boxListPnl .card .frame .siteInfo dt:before{content: "\F52D"; color: rgba(0,0,0,.3); font-weight: 900; margin-right: 10px;}
	.boxListPnl .card .frame .siteInfo dt.overview{}
	.boxListPnl .card .frame .siteInfo dt.overview+dd{color: rgba(50,80,108,.6)}
	.boxListPnl .card .frame .siteInfo dd{color: #0B90B6; font-size: 14px; letter-spacing: -.15px; padding-left: 30px;}
	.boxListPnl .card .frame .siteInfo dd .pointBrkt{color: #E45151; font-weight: 100;}
	.boxListPnl .card .frame .siteInfo dd .pointBrkt:before{content: "(";}
	.boxListPnl .card .frame .siteInfo dd .pointBrkt:after{content: ")"; margin-right: 12px;}
	.boxListPnl .card .frame .viewImgArea{width: calc(100% + 14px); margin-left: -7px;}
	.boxListPnl .card .frame .viewImg{width: auto; height: auto; vertical-align: top; border: 1px solid rgba(126,145,164,.3); margin: 7px;}
	.boxListPnl .card .frame .viewImg:not([src*="_m"]){max-width: calc(100% - 12px);}
	.boxListPnl .card .frame .viewImg[src*="_m"]{display: inline-block; float: left;}
	.boxListPnl .card .frame .aaaaaaaaaaaaa{}
	.boxListPnl .card .frame .aaaaaaaaaaaaa{}
	.boxListPnl .card .frame .aaaaaaaaaaaaa{}
	.boxListPnl .card .frame .close{width: 28px; height: 28px; color: #FFF; font-size: 30px; text-align: center; line-height: 27px; position: absolute; transition: all 0.15s ease-in-out; cursor: pointer;}
	.boxListPnl .card .frame .close:before{content: "\2715";}

	/* SUB PAGE // 1 depth. Tile List */
	.boxListPnl .tile{position: relative;}
	.boxListPnl .tile:hover .noLnkWrap{background: transparent;}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{width: 100%; text-align: center; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.15); opacity: .55;}
	.boxListPnl .tile .noLnkWrap{width: 100%; height: 100%; background: inherit;position: absolute; top: 0; left: 0; opacity: .5;}
	.boxListPnl .tile .noLnkWrap .lnk{min-width: 80px; background: rgba(0,0,0,.3); text-align: center; border: 1px solid rgba(0,0,0,.2); border-radius: 5px; padding: 5px 10px; position: absolute; bottom: 10px;}
	.boxListPnl .tile .noLnkWrap .zipFile{right: 12px;}
	.boxListPnl .tile .noLnkWrap .zipFile+.officialPage, .boxListPnl .tile .noLnkWrap .zipFile+.guidePage{right: 96px;}
	.boxListPnl .tile .noLnkWrap .officialPage{right: 180px;}
	.boxListPnl .tile .bannerTit{text-align: center; letter-spacing: .15rem; padding: 2rem;}
	.boxListPnl .tile .bannerTit>h2{width: 100%; color: #FFF; font-size: 1.75rem; font-weight: 600; margin: 0; padding: 0;}
	.boxListPnl .tile .bannerTit>.infoTxtArea{}
	.boxListPnl .tile .bannerTit>.infoTxtArea .verInfo, .boxListPnl .tile .bannerTit>.infoTxtArea .typeInfo{display: inline-block;}
	.boxListPnl .tile .bannerTit>.infoTxtArea .typeInfo{}
	.boxListPnl .tile .bannerTit>.infoTxtArea .verInfo{letter-spacing: -.1px;}
	.boxListPnl .tile .bannerTit>.copyright{letter-spacing: -.1px; margin-top: 10px;}
	.boxListPnl .tile .bannerTit>.copyright:before{content: "Copyright \24D2"; margin-right: 5px;}
	.boxListPnl .tile .bannerTit>.period{width: 100%;}
	.boxListPnl .tile .bannerTit>.period:before{content: '\e715 '; vertical-align: -.2rem; margin-right: .4rem;}
	.boxListPnl .tile .bannerTit>.desc{
		width: 100%; max-height: 7em; font-size: 0.9rem;
		/* only webkit support */
/*		display: -webkit-box;	*** 말줄임표 안 생겨서 삭제 // 2018-01-29 */
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}
	.boxListPnl .tile .bannerTit>.desc:before{content: '\FF03 '; font-size: 1.2rem; font-weight: 600; vertical-align: -.1rem;}
	.boxListPnl .tile .bannerTit>.licenceInfo{
		width: 100%; max-height: 3.3em;
		/* only webkit support */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.boxListPnl .tile .bannerTit>.licenceInfo:before{content: '\f242 '; vertical-align: -.2rem; margin-right: .2rem;}
	.boxListPnl .tile>a{width: 100%; height: 100%; background: inherit; opacity: .5; position: absolute; top: 0; left: 0;}

	/* SUB PAGE // 2 depth. Cell List */
	.cellList{width: 100%; height: 100%; margin-top: 50px;}
	.cellList .tile{position: relative;}
	.cellList .tile.empty{width: 100%; text-align: center; color: inherit; border: 1px solid rgba(255,255,255,.15); opacity: .55;}
	.cellList a{background: #F3F3F3; color: #787878; text-decoration: none; float: left; display: inline-block;}
	.cellList dl:hover{background: #E1E1E1;}
	.cellList dl:active{background: #CCC;}
	.cellList dl{background: #F3F3F3; border-left: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; float: left; display: inline-block;}
	.cellList dt{font-weight: bold;}
	.cellList dt, .cellList dd{color: #787878;}
	.cellList .axi-slack{font-size: 1.7rem; vertical-align: -5px;}
	.cellList .axi-slack:after{content: ' ';}
	.cellList .axi-slack:before{content: '\f1d5';}
	.cellList .axi-ion-load-c{font-size: 1.7rem; vertical-align: -4px;}
	.cellList .axi-ion-load-c:after{content: ' ';}
	.cellList .axi-ion-load-c:before{content: '\f29c';}
	.cellList .desc, .cellList .desc.comSoon{color: #999; font-size: 0.9rem;}
	.cellList .desc:before{content: '\f055'; color: #CCC; font-size: 1rem; font-weight: 100; vertical-align: -.1rem; padding-right: .5rem;}
	.cellList dl:hover .desc:before{content: '\f055 '; color: #AAA; font-size: 1rem; font-weight: 100; vertical-align: -.1rem;}
	.cellList .desc.comSoon:before{content: '\f071';}
	.cellList dl:hover .desc.comSoon:before{content: '\f071 '; color: #AAA; font-size: 1rem; font-weight: 100; vertical-align: -.1rem;}

/* SUB PAGE Design set ------------------------------------------------------------------------------------------ */
/* DETAIL PAGE Design set --------------------------------------------------------------------------------------- */
	/* SUB 01 // ㅇㅇㅇㅇㅇ */
	/**/

	/* SUB 02 // ㅇㅇㅇㅇㅇ */
	/**/

	/* SUB 03 // ㅇㅇㅇㅇㅇ */
	/**/

	/* SUB 04 > DETAIL PAGE 01 // Form Feild Design template */
	.formFeildDesign .checkBox:not(:first-of-type), .formFeildDesign .numberBox:not(:first-of-type){margin-left: 15px;}
	.formFeildDesign .radioBox{display: inline-block; float: left;}
	.formFeildDesign .textBox, .formFeildDesign .textareaBox, .formFeildDesign .selectBox{background: #FFF;}
	.formFeildDesign .textareaBox{width: 100%;}
	.formFeildDesign .textBox{height: 38px;}
	.formFeildDesign .textBox:not(:nth-of-type(-n+2)){margin-top: 7px;}
	.formFeildDesign .textBox label, .formFeildDesign .textBox input[type="text"], .formFeildDesign .textBox input[type="password"], .formFeildDesign .textareaBox label, .formFeildDesign .textareaBox textarea{padding: 1em .8em;}
	.formFeildDesign .selectBox{height: 38px;}
	.formFeildDesign .selectBox label, .selectBox select{line-height: 38px;}
	/* SUB 04 > DETAIL PAGE 02 // popup Design template */
	/* SUB 04 > DETAIL PAGE 03 // navi Design template */
	/* SUB 04 > DETAIL PAGE 04 // slide Design template */
	/* SUB 04 > DETAIL PAGE 05 // other Ui Design template */

	/* SUB 05 // ㅇㅇㅇㅇㅇ */
	/**/

/* MEDIA QUERY set  --------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1460px) and (min-width: 1201px){
	.boxListPnl .card:not(.open) .frame .copyright{display: none;}
}
@media screen and (min-width: 1201px){
	/* desktops & laptops & Tablet device */
	#main .fa-igloo{font-size: 45px;}
	#main .infoMsg{font-size: 25px;}
	.boxListPnl .tile:nth-of-type(-n+4), .boxListPnl .card:nth-of-type(-n+4){margin-top: 0;}
	.boxListPnl .tile:first-of-type, .boxListPnl .tile:nth-of-type(4n+1), .boxListPnl .card:first-of-type, .boxListPnl .card:nth-of-type(4n+1){margin-left: 0;}
	.boxListPnl .tile, .boxListPnl .card{width: calc(((100% + 15px) / 4 ) - 15px); height: 22vw; margin: 0 0 15px 15px;}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{font-size: 25px; line-height: 22vw;}
	.boxListPnl .card .frame .bannerHolder .picArea{height: 10vw;}
	.boxListPnl .card .frame .inner{top: 10vw;}
	.boxListPnl .card .frame .viewImg[src*="_m"]{width: calc((100% / 6) - 16px);}
	.boxListPnl .card:not(.open) .frame .desc, .boxListPnl .card:not(.open) .frame .descNon{height: 4.2vw; font-size: 14px;}
	.cellList .tile{width: calc(((100% + 15px) / 4 ) - 15px); height: 22vw; margin: 0 0 15px 15px;}
	.cellList .tile.empty{font-size: 25px; line-height: 22vw;}
	.cellList a{width: calc(100% / 4);}
	.cellList dl{width: 100%; height: 15rem; padding: 7px 15px;}
	.cellList dt{width: 100%; height: 3rem;}
	.cellList a:nth-child(1) dl, 
	.cellList a:nth-child(2) dl, 
	.cellList a:nth-child(3) dl, 
	.cellList a:nth-child(4) dl{border-top: 7px solid #A9B3B7;}
	.cellList a:nth-child(4n) dl{border-left: none;}
	.cellList a:nth-last-child(1) dl, 
	.cellList a:nth-last-child(2) dl, 
	.cellList a:nth-last-child(3) dl, 
	.cellList a:nth-last-child(4) dl{border-bottom: 3px solid #A9B3B7;}
	.cellList a:nth-last-child(4n) dl{border-left: none;}
	.introduce dl:not(.etcSkill) dt{width: 150px;}
	.about dd, .tool dd{width: calc(100% - 150px);}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(odd){width: calc(((100% / 2) - 150px) + 150px); padding-left: 150px;}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(even), .skill dd:first-of-type+dd{width: calc(50% - 150px);}
	.skill dd:first-of-type{width: calc(50% - 150px);}
}
@media screen and (max-width: 1200px) and (min-width: 992px){
	/* desktops & laptops & Tablet device */
	.boxListPnl{width: 100%;}
	.boxListPnl .tile:nth-of-type(-n+3), .boxListPnl .card:nth-of-type(-n+3){margin-top: 0;}
	.boxListPnl .tile:first-of-type, .boxListPnl .tile:nth-of-type(3n+1), .boxListPnl .card:first-of-type, .boxListPnl .card:nth-of-type(3n+1){margin-left: 0;}
	.boxListPnl .tile, .boxListPnl .card{width: calc(((99.9% + 15px) / 3 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.boxListPnl .card .frame .bannerHolder .picArea{height: 130px;}
	.boxListPnl .card .frame .inner{top: 130px;}
	.boxListPnl .card:not(.open) .frame .desc, .boxListPnl .card:not(.open) .frame .descNon{height: 50px; font-size: 15px;}
	.cellList .tile{width: calc(((99.9% + 15px) / 3 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.introduce dl:not(.etcSkill) dt{width: 150px;}
	.about dd, .tool dd{width: calc(100% - 150px);}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(odd){width: calc(((100% / 2) - 150px) + 150px); padding-left: 150px;}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(even), .skill dd:first-of-type+dd{width: calc(50% - 150px);}
	.skill dd:first-of-type{width: calc(50% - 150px);}
}
@media screen and (max-width: 1200px) and (min-width: 769px){
	/* desktops & laptops & Tablet device */
	#main .infoMsg{font-size: 17px;}
	.boxListPnl .card .frame .viewImg[src*="_m"]{width: calc((100% / 3) - 16px);}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{font-size: 2vw; line-height: 300px;}
	.cellList .tile.empty{font-size: 2vw; line-height: 300px;}
	.cellList a{width: calc(100% / 3);}
	.cellList dl{width: 100%; height: 15rem; padding: 7px 15px;}
	.cellList dt{width: 100%; height: 3rem;}
	.cellList a:nth-child(1) dl, 
	.cellList a:nth-child(2) dl, 
	.cellList a:nth-child(3) dl{border-top: 5px solid #A9B3B7;}
	.cellList a:nth-child(3n) dl{border-right: none;}
	.cellList a:nth-last-child(1) dl, 
	.cellList a:nth-last-child(2) dl, 
	.cellList a:nth-last-child(3) dl{border-bottom: 1px solid #A9B3B7;}
	.cellList a:nth-last-child(3n) dl{border-right: none;}
}
@media screen and (max-width: 991px) and (min-width: 769px){
	/* Tablet device support */
	.boxListPnl .tile:nth-of-type(-n+2), .boxListPnl .card:nth-of-type(-n+2){margin-top: 0;}
	.boxListPnl .tile:first-of-type, .boxListPnl .tile:nth-of-type(2n+1), .boxListPnl .card:first-of-type, .boxListPnl .card:nth-of-type(2n+1){margin-left: 0;}
	.boxListPnl .tile, .boxListPnl .card{width: calc(((100% + 15px) / 2 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.boxListPnl .card .frame .bannerHolder .picArea{height: 130px;}
	.boxListPnl .card .frame .inner{top: 130px;}
	.boxListPnl .card:not(.open) .frame .desc, .boxListPnl .card:not(.open) .frame .descNon{height: 50px;}
	.boxListPnl .card:not(.open) .frame .copyright~*{display: none;}
	.cellList .tile{width: calc(((100% + 15px) / 2 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.introduce dl:not(.etcSkill) dt{width: 100px;}
	.about dd, .tool dd{width: calc(100% - 100px);}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(odd){width: calc(((100% / 2) - 100px) + 100px); padding-left: 100px;}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(even), .skill dd:first-of-type+dd{width: calc(50% - 100px);}
	.skill dd:first-of-type{width: calc(50% - 100px);}
}
@media screen and (min-width: 769px){
	/* desktops & laptops & Tablet device */
	#container{min-height: calc(100% - 60px)}/*calc(100% - 84px)*/
	header{padding: 30px 25px;}
	#sub{padding: 0 25px 25px;}
	#main .fa-igloo{font-size: 7vw;}
	#main .infoMsg{font-size: 17px;}
	.loginPnl .closeArea .close{text-align: center;}
	.loginPnl .insrtGrp .loginTit{font-size: 25px;}
	.bannerPanel .widthStyle01, .bannerPanel .widthStyle02{height: 100%; padding: 4rem 3rem 2rem 3rem;}
	.bannerPanel .widthStyle01{width: 40%;}
	.bannerPanel .widthStyle02{width: 60%;}
	.bannerPanel:nth-child(1){height: 38rem; padding: 4rem 3rem 2rem 3rem;}
	.bannerPanel .bannerTit>h2{width: inherit; font-size: 1.75rem; letter-spacing: 2px; margin: 0 0 .5rem; padding: 0 0 5px;}
	.bannerPanel .bannerTit>h2:after{content: ''; width: calc(100% + 30px); height: 1px; background: #FFF; display: block; margin: 1.5rem 0 0;}
	.desc.vTop{width: 70vw; text-align: left; letter-spacing: .5rem; word-break: break-all;}
	.bannerPanel .goProfile{
		width: 32rem; height: 7.5rem; 
		background: transparent url(/_img/arr.png) no-repeat right 30px bottom 15px; 
		font-size: 1.5rem; 
		text-align: left; 
		line-height: 5rem; 
		border: 1px solid #FFF; 
		margin: 20px 0 0; padding: 1rem 3rem 1.2rem;
	}
	.bannerPanel:nth-child(2), .bannerPanel:nth-child(3), .bannerPanel:nth-child(4), .bannerPanel:nth-child(5), .bannerPanel:nth-child(6){width: inherit; height: 30rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:after,
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:after{font-size: 7rem; opacity: .3; position: absolute; bottom: 0; right: 3.5rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:hover:after{font-size: 7rem; opacity: 1; position: absolute; bottom: 0; right: 3.5rem;}
	.bannerPanel:nth-child(1) .bannerTit>h2:after{content: ' '; width: 6.5rem; height: 1px; background: #73819a; display: block; margin: 0.325em 0 0.5em 0;}
	.boxListPnl .card.open .frame .outter{max-width: 80%;}
	.boxListPnl .card .frame .desc{float: left;}
	.boxListPnl .card .frame .siteUrl{float: right;}
	.boxListPnl .card .frame .close{top: 30px; right: 25px;}
	#sub.profile article:not(:first-child){border: 1px solid rgba(255,255,255,.2); margin: 0 15px 3rem; padding: 2rem 3rem;}
	.introduce dl:not(.skill) dt, .about dd{line-height: 50px;}
	.skill dd:not(:nth-of-type(-n+2)){line-height: 30px;}
	.tool, .etcSkill{width: 50%;}
	.etcSkill dt{width: 200px;}
	.etcSkill dd{width: calc(100% - 200px);}
	.cheer dl{max-width: 70%; min-width: 36rem;}
}
@media screen and (max-width: 768px){
	/* all Moblie device support */
	#main .fa-igloo{font-size: 45px;}
	#main .infoMsg{font-size: 13px;}
	#sub{padding: 0 15px 15px;}
	.boxListPnl .card:not(.open) .frame .desc, .boxListPnl .card:not(.open) .frame .descNon{height: 4.2em;}
	.boxListPnl .card.open .frame .outter{max-width: 600px;}
	.boxListPnl .card .frame .viewImg[src*="_m"]{width: calc((100% / 2) - 16px);}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{font-size: 15px;}
	.cellList .tile.empty{font-size: 15px;}
}
@media screen and (max-width: 768px) and (min-width: 641px){
	/* wide Moblie device support */
	#container{min-height: calc(100% - (3.9vw * 2))}
	header{padding: 3.9vw 3.25vw;}
	.loginPnl .closeArea .close{text-align: right; padding-right: 5px;}
	.loginPnl .insrtGrp .loginTit{font-size: 25px;}
	.bannerPanel .widthStyle01, .bannerPanel .widthStyle02, .bannerPanel:nth-child(1){height: 100%; padding: 2rem 1.5rem;}
	.bannerPanel .widthStyle01, .bannerPanel .widthStyle02{width: 50%;}
	.bannerPanel:nth-child(1){height: 27rem;}
	.bannerPanel .bannerTit>h2{width: inherit; font-size: 1.75rem; letter-spacing: 2px; margin: 0 0 .5rem; padding: 0 0 5px;}
	.bannerPanel .bannerTit>h2:after{content: ''; width: calc(100% + 30px); height: 1px; background: #FFF; display: block; margin: 1.5rem 0 0;}
	.bannerPanel .majorPanel{width: 100%; margin: 0;}
	.desc.vTop{width: 70%; min-width: 34rem; letter-spacing: .5rem; word-break: break-all; display: inline-block; float: left;}
	.bannerPanel .goProfile{font-size: 1.5rem; text-align: center; border: 1px solid #FFF; display: inline-block; float: left; margin: 0 0 0 1.5rem; padding: 1rem 3rem 1.2rem;}
	.bannerPanel:nth-child(2), .bannerPanel:nth-child(3), .bannerPanel:nth-child(4), .bannerPanel:nth-child(5), .bannerPanel:nth-child(6){width: inherit; height: 25rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:after,
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:after{font-size: 5rem; opacity: .3; position: absolute; bottom: 0; right: 2.5rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:hover:after{font-size: 5rem; opacity: 1; position: absolute; bottom: 0; right: 2.5rem;}
	.bannerPanel:nth-child(1) .bannerTit>h2:after{content: ''; width: 5rem; height: 1px; background: #73819a; display: block; margin: 0.4rem 0 1.5rem 0;}
	.boxListPnl .tile:nth-of-type(-n+2), .boxListPnl .card:nth-of-type(-n+2){margin-top: 0;}
	.boxListPnl .tile:first-of-type, .boxListPnl .tile:nth-of-type(2n+1), .boxListPnl .card:first-of-type, .boxListPnl .card:nth-of-type(2n+1){margin-left: 0;}
	.boxListPnl .tile, .boxListPnl .card{width: calc(((100% + 15px) / 2 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{line-height: 300px;}
	.boxListPnl .card .frame .bannerHolder .picArea{height: 130px;}
	.boxListPnl .card .frame .inner{top: 130px;}
	.boxListPnl .card:not(.open) .frame .copyright~*{display: none;}
	.cellList .tile{width: calc(((100% + 15px) / 2 ) - 15px); height: 300px; margin: 15px 0 0 15px;}
	.cellList .tile.empty{line-height: 300px;}
	.cellList a{width: calc(100% / 2);}
	.cellList dl{width: 100%; height: 12rem; padding: 7px 15px;}
	.cellList dt{width: 100%; height: 3rem;}
	.cellList a:nth-child(1) dl, 
	.cellList a:nth-child(2) dl{border-top: 5px solid #A9B3B7;}
	.cellList a:nth-child(2n) dl{border-right: none;}
	.cellList a:nth-last-child(1) dl, 
	.cellList a:nth-last-child(2) dl{border-bottom: 1px solid #A9B3B7;}
	.cellList a:nth-last-child(2n) dl{border-right: none;}
	.boxListPnl .card .frame .desc{float: left;}
	.boxListPnl .card .frame .siteUrl{float: right;}
	.boxListPnl .card .frame .close{top: 3.9vw; right: 3.25vw;}
	#sub.profile article:not(:first-child){border: 1px solid rgba(255,255,255,.2); margin: 0 15px 3rem; padding: 2rem 3rem;}
	.introduce dl:not(.skill) dt, .about dd{line-height: 50px;}
	.introduce dl:not(.etcSkill) dt{width: 100px;}
	.about dd, .tool dd{width: calc(100% - 100px);}
	.skill dd:not(:nth-of-type(-n+2)):nth-of-type(odd){padding-left: 100px;}
	.skill dd:not(:nth-of-type(-n+2)){line-height: 30px;}
	.skill dd:not(:first-of-type){width: calc(((100% / 2) - 100px) + 100px); padding-left: 20px;}
	.skill dd:first-of-type{width: calc(50% - 100px);}
	.tool{width: calc(50% + 20px);}
	.etcSkill{width: calc(50% - 20px)}
	.etcSkill dt{width: 200px;}
	.etcSkill dd{width: calc(100% - 200px);}
	.cheer dl{max-width: 70%; min-width: 36rem;}
}
@media screen and (max-width: 640px){
	/* wide Moblie device support */
	#container{min-height: calc(100% - 64px);}
	header{padding: 20px 15px;}
	.loginPnl .layerPop{width: 100%; padding: 0;}
	.loginPnl .outer{width: 100%;}
	.loginPnl .closeArea .close{padding-right: 15px;}
	.loginPnl .insrtGrp{padding-left: 20px; padding-right: 20px;}
	.loginPnl .insrtGrp .loginTit{font-size: 4.7vw;}
	.loginPnl .insrtGrp .w60per, .loginPnl .insrtGrp .w40per{width: 100%; display: block; float: none;}
	.loginPnl .insrtGrp .w40per{margin: 20px 0 0;}
	.loginPnl .insrtGrp .textBox{margin: 0 0 5px;}
	.button.login:active{color: #FFF; border: 1px solid rgba(255,255,255,.6); text-decoration: none; border-radius: 50px;}
	.bannerPanel .widthStyle01, .bannerPanel .widthStyle02{width: 100%; height: 100%; padding: 2rem;}
	.bannerPanel:nth-child(1){height: 100%; padding: 2rem;}
	.bannerPanel .bannerTit>h2{width: inherit; font-size: 1.75rem; letter-spacing: 2px; margin: 0; padding: 0 0 5px;}
	.bannerPanel .bannerTit>h2:after{content: ''; width: calc(100% + 30px); height: 1px; background: #FFF; display: block; margin: 1rem 0 0;}
	.majorPanel{width: 100%; margin: 0;}
	.majorPanel .desc.vTop{width: 100%; letter-spacing: .5rem; word-break: break-all;}
	.majorPanel .goProfile{width: 100%; font-size: 1.5rem; text-align: center; border: 1px solid #FFF; margin: 1em 0; padding: 1rem 0 1.2rem;}
	.bannerPanel .bannerTit>.desc{font-size: 0.9rem;}
	.bannerPanel:nth-child(2), .bannerPanel:nth-child(3), .bannerPanel:nth-child(4), .bannerPanel:nth-child(5), .bannerPanel:nth-child(6){width: inherit; height: 20rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:after,
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:after{font-size: 5rem; opacity: .3; position: absolute; bottom: 0; right: 2.5rem;}
	.bannerPanel:nth-child(2) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(2) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(3) .tile:nth-child(2) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(1) a:hover:after, 
	.bannerPanel:nth-child(4) .tile:nth-child(2) a:hover:after{font-size: 5rem; opacity: 1; position: absolute; bottom: 0; right: 2.5rem;}
	.bannerPanel:nth-child(1) .bannerTit>h2:after{content: ''; width: 3.5rem; height: 1px; background: #73819a; display: block; margin: 0.4rem 0 1.5rem 0;}
	#sub .pageTitPanel{padding-bottom: 24px;}
	#sub .pageTitPanel .subject  h2{width: 100%; font-size: 1.75em; border-bottom: 1px solid #FFF; margin:0 0 .2rem; padding: 0 0 15px;}
	.boxListPnl .tile, .boxListPnl .card{width: 100%; height: 250px; position: relative; margin: 0 0 15px;}
	.boxListPnl .tile.empty, .boxListPnl .card.empty{line-height: 250px;}
	.boxListPnl .card .frame .bannerHolder .picArea{height: 110px;}
	.boxListPnl .card .frame .inner{top: 110px;}
	.boxListPnl .card.open .frame .desc, .boxListPnl .card.open .frame .siteUrl{float: none;}
	.boxListPnl .card.open .frame .desc{padding: 0;}
	.boxListPnl .card.open .frame .siteUrl{width: 100%; text-align: center; border-radius: 5px; margin: 12px 0 25px;}
	.boxListPnl .card .frame .close{top: 20px; right: 15px;}
	.boxListPnl .tile .bannerTit{text-align: center; letter-spacing: .15rem; padding: 2rem;}
	.boxListPnl .tile .bannerTit>h2{width: 100%; color: #FFF; font-size: 1.75rem; font-weight: 600; margin: 0; padding: 0;}
	.boxListPnl .tile .bannerTit>.period{width: 100%;}
	.boxListPnl .tile .bannerTit>.period:before{content: '\e715 '; vertical-align: -.2rem; margin-right: .4rem;}
	.boxListPnl .tile .bannerTit>.desc{
		width: 100%; max-height: 7em; font-size: 0.9rem;
		/* only webkit support */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}
	.boxListPnl .tile .bannerTit>.desc:before{content: '\FF03 '; font-size: 1.2rem; font-weight: 600; vertical-align: -.1rem;}
	.boxListPnl .tile .bannerTit>.licenceInfo{
		width: 100%; max-height: 3.3em;
		/* only webkit support */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.boxListPnl .tile .bannerTit>.licenceInfo:before{content: '\f242 ' vertical-align: -.2rem; margin-right: .2rem;}
	.boxListPnl .tile>a{width: 100%; height: 100%; background: inherit; opacity: .5; position: absolute; top: 0; left: 0;}
	.boxListPnl .tile a:hover{
		opacity: 0;
		transition: all 500ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 500ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 500ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 500ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 500ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	.boxListPnl .tile a:active{
		background: #000;
		opacity: .2;
		transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-webkit-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-moz-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-ms-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
		-o-transition: all 300ms cubic-bezier(0.420,0.000,0.580,1.000);
	}
	.cellList .tile{width: 100%; height: 250px; position: relative; margin: 0 0 15px;}
	.cellList .tile.empty{line-height: 250px;}
	.cellList a{width: 100%;}
	.cellList dl{width: 100%; min-height: 10rem; padding: 7px 15px;}
	.cellList dt{width: 100%; height: 2.5rem;}
	.cellList a:first-child dl{border-top: 5px solid #A9B3B7;}
	.cellList a:last-childdl{border-bottom: 1px solid #A9B3B7;}
	.cellList a dl{border-left: none;}
	#sub.profile article:not(:first-child){margin: 0 0 1.5rem; padding: .7rem 1.2rem;}
	.about dt:first-of-type, .cheer dt:first-of-type{margin: 0;}
/*	.introduce dt{width: 130px;}*/
	.introduce dl:not(.skill):not(.etcSkill) dt, .about dd{line-height: 50px;}
/*	.introduce dd{width: calc(100% - 130px);}*/
	.introduce dl:not(.about) dd:not(:nth-of-type(-n+2)){width: calc((100% - 130px) + 130px); padding-left: 130px;}
	.skill dd:not(:first-of-type){line-height: 30px;}
	.skill dd:nth-last-of-type(2){display: none;}
	.etcSkill dt{width: 130px; line-height: 22px; padding-top: 15px;}
	.cheer dl{margin: .5rem 0 1rem;}
	.cheer dl .corpName, .cheer dl .workPariod, .cheer dl .jobRole{width: 100%; text-align: left;}
	.cheer dl .corpName{padding: 0;}
	.cheer dl .workPariod, .cheer dl .jobRole{padding: 0 0 0 1.5rem;}
	.eclipseDesign ul li{padding: .3em .1em;}
	.eclipseDesign ul li:nth-child(1){width: 2rem;}
	.button.protfolio{width: 100%; height: 50px; font-size: 20px; line-height: 50px;}
}
@media screen and (min-width: 375px){
	/* All device support (not 4in iPhone(5/5s/SE)) */
	h3.titArea{font-size: 25px;}
	header .inner{width: 45vh;}
	nav#menu ul li:last-child>a{margin-bottom: 5vh;}
	nav#menu ul.link li>a{letter-spacing: .25rem; line-height: 5rem; border-bottom: 1px solid rgba(212,212,255,.1);}
	.formFeildDesign .checkBox:not(:first-of-type), .formFeildDesign .radioBox:not(:first-of-type), .formFeildDesign .numberBox:not(:first-of-type){margin-left: 15px;}
	.formFeildDesign .radioBox{display: inline-block; float: left;}
	.formFeildDesign .textBox:nth-of-type(even){margin-left: 10px;}
	.formFeildDesign .textBox, .formFeildDesign .selectBox{width: calc(((100% + 10px) / 2) - 10px);}
}
@media screen and (max-width: 374px){
	/* 4in iPhone(5/5s/SE) support */
	h3.titArea{font-size: 22px;}
	header .inner{width: 20rem;}
	nav#menu ul li a, nav#menu ul.close #closeBTN{font-size: .9rem;}
	nav#menu ul li>a{font-weight: 600; text-align: center; line-height: 4rem; display: block;}
	nav#menu ul li>a .fa-home:before{font-size: 2rem; font-weight: 600;}
	nav#menu ul li:last-child>a{margin-bottom: 3vh;}
	nav#menu ul.link li>a{letter-spacing: .25rem; line-height: 4rem; border-bottom: 1px solid rgba(212,212,255,.1);}
	.loginPnl .inner{background: transparent; border: none;}
	.loginPnl .insrtGrp{padding-left: 5px; padding-right: 5px;}
	.bannerPanel:nth-child(1){padding: 0 2rem 1.5rem;}
	.formFeildDesign .checkBox:not(:first-of-type), .formFeildDesign .numberBox:not(:first-of-type){margin-left: 15px;}
	.formFeildDesign .radioBox:not(:nth-of-type(-n+2)){margin-top: 12px;}
	.formFeildDesign .radioBox:nth-of-type(odd){clear: left;}
	.formFeildDesign .radioBox:nth-of-type(even){margin-left: 15px;}
	.formFeildDesign .textBox:nth-of-type(even){margin-left: 7px;}
	.formFeildDesign .textBox{width: calc(((100% + 7px) / 2) - 7px);}
	.formFeildDesign .selectBox{width: 100%;}
/**/.introduce dt{width: 100px; font-size: 14px;}
/**/.introduce dd{width: calc(100% - 100px);}
	.introduce dl:not(.about) dd{font-size: 12px;}
/*	.introduce dl:not(.about) dd:not(:nth-of-type(-n+2)){width: calc((100% - 100px) + 100px); padding-left: 100px;}*/
	.introduce dl:not(.about) dd:not(:first-of-type){width: calc((100% - 100px) + 100px); padding-left: 100px;}
	.etcSkill dt{padding-right: 20px;}
	.eclipseDesign{font-size: 12px;}
	.eclipseDesign ul{width: inherit; letter-spacing: 0;}
}
@media screen and (max-width: 320px){
	.boxListPnl .tile .noLnkWrap .lnk{width: calc(((100% + 16px) / 3) - 16px);
	.boxListPnl .tile .noLnkWrap .zipFile+.officialPage, .boxListPnl .tile .noLnkWrap .zipFile+.guidePage{right: 102px;}
	.boxListPnl .tile .noLnkWrap .officialPage{right: 192px;}
}
/* device screen exception custom Code */
@media screen and (max-width: 400px){
	/* profile 본문 내용 레이아웃을 위한 예외처리 */
/*	.introduce dt{font-size: 16px;}*/
/*	.introduce dl:not(.about) dd{font-size: 12px;}*/
	.tool, .etcSkill{margin-top: 5px;}
	.skill dd:not(:first-of-type){line-height: 30px;}
}
/**/
/**/
/**/
/* 아래 코드부터 삭제 예정 ***/
@media screen and (max-width: 700px) and (min-width: 640px){	
	/* go profile 버튼 호환성을 위한 예외처리 */
	.bannerPanel:nth-child(1){height: 30rem;}
	.desc.vTop{width: 100%; letter-spacing: .5rem; word-break: break-all; display: inline-block;}
	.bannerPanel .goProfile{width: 100%; font-size: 1.5rem; text-align: center; border: 1px solid #FFF; margin: 1em 0; padding: 1rem 0 1.2rem;}
}
@media screen and (max-width: 490px) and (min-width: 440px){
	/* 메인페이지 타이틀 폰트 정리를 위한 예외처리 */
	.bannerPanel:nth-child(1) .bannerTit>h2{padding-right: 8rem;}
}
@media screen and (max-width: 440px) and (min-width: 370px){
	/* 메인페이지 타이틀 폰트 정리를 위한 예외처리 */
	.bannerPanel:nth-child(1) .bannerTit>h2{padding-right: 10rem;}
}
@media screen and (max-width: 370px){
	/* 메인페이지 타이틀 폰트 정리를 위한 예외처리 */
	.bannerPanel:nth-child(1) .bannerTit>h2{padding-right: 5rem;}
}
/*** 삭제 예정 끝 */