@charset "utf-8";

.main_pg {background: white;padding-top: 80px}

.main_pg #vis{
    margin-bottom: 10px;
    width:100%
}
.main_pg #vis img {width:100%}

.main_pg article.grid,
.main_pg article.gridFix{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    margin-bottom: 10px;
}
.main_pg article.gridFix{
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    grid-gap: 0px;
}
.main_pg article.grid.notMargin,
.main_pg article.gridFix.notMargin{
    margin: 0;
}
.main_pg article.grid .swiper-slide img{
    width: 100%;
    height: 100%;
}
.main_pg .colFull{
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
}

.main_pg .rowFull-line1{
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    
    -ms-grid-column: 2;
    grid-column: 2 / 3;
    
    background-color: red;
    overflow: hidden;/* swiper가 gird fr을 인식 못하는 현상 발생..... 나름대로 대응책 */
}
.main_pg .rowFull-line1 > .swiper-container{
   height: 100%;
}
.main_pg .rowFull-line2{
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    grid-row: 3 / span 2;
    
    -ms-grid-column: 1 / 2;
    grid-column: 1 / 2;
    
    background-color: red;
    overflow: hidden;/* swiper가 gird fr을 인식 못하는 현상 발생..... 나름대로 대응책 */
}
.main_pg .rowFull-line2 > .swiper-container{
   height: 100%;
}
.main_pg article.grid > section > img,
.main_pg article.grid > section > a > img{
    width: 100%;
    height: auto;
}
.main_pg article.gridFix > section > img,
.main_pg article.gridFix > section > a > img{
    width: 100%;
    height: auto;
}
.main_pg article.gridFix > section.link{
    background-color: #333333;
}
.main_pg article.gridFix > section.link > a{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: auto;
}

.main_pg article ul.linkList{
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}
.main_pg article ul.linkList > li{
    flex: 1 1 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.3%;
    height: 70px;
}
.main_pg article ul.linkList > li > a{
    display: block;
    font-size: 100%;
}
.main_pg article ul.linkList > li.kakao{
    background-color: #ffeb00;
}
.main_pg article ul.linkList > li.kakao > a{
    color: #3c1e1e;
}
.main_pg article ul.linkList > li.naverBlog{
    background-color: #399b20;
}
.main_pg article ul.linkList > li.naverBlog > a{
    color: white;
}
.main_pg article ul.linkList > li.naverReserve{
    background-color: #3acc15;
}
.main_pg article ul.linkList > li.naverReserve > a{
    color: white;
}
.main_pg article ul.linkList > li > a > h3 > img{
    width: 40px;
    height: auto;
    margin-right: 10px;
}
.main_pg article.counselingArea{
	width: 100%;
	background-color: white;
	padding: 15px 15px 15px 15px;
}
.main_pg article.counselingArea > form > h3{
	position: relative;
	display: flex;
    align-items: center;
    height: 46px;
    font-weight: 600;
    font-size: 18px;
    color: #ff8400;
    border-bottom: solid #ff8400 1px;
    padding-left: 35px;
    margin-bottom: 10px;
}
.main_pg article.counselingArea > form > h3 > img{
    position: absolute;
    top: 5px;
    left: 0;
    width: 30px;
}
.main_pg article.counselingArea > form{
	display: flex;
    flex-direction: column;
}

.main_pg article.counselingArea > form > div.inputWrap{
	display: inline-flex;
	margin-bottom: 5px;
}
.main_pg article.counselingArea > form > div.inputWrap div.input{
	flex: 1 1 69.666%;
	width: 69.666%;
}
.main_pg article.counselingArea > form > div.inputWrap div.input > label{
	display: inline-flex;
	width: 100%;
    align-items: center;
    padding: 5px 0;
}
.main_pg article.counselingArea > form > div.inputWrap div.input > label > h3{
	flex: 0 0 36px;
	text-align:center;
	width: 36px;
	margin-right: 10px;
}
.main_pg article.counselingArea > form > div.inputWrap div.input input{
    flex: 2 2 100%;
    width: 100%;
    height: 35px;
    background-color: #ffffff;
    border: solid #747474 1px;
    border-radius: 0;
    padding-left: 5px;
    margin-right: 5px;
}
.main_pg article.counselingArea > form > div.inputWrap div.result{
	flex: 1 1 30.333%;
	width: 30.333%;
    padding: 5px 0;
}
.main_pg article.counselingArea > form > div.inputWrap div.result > button,
.main_pg article.counselingArea > form > div.inputWrap div.result > input[type='submit']{
	width: 100%;
	height: 100%;
	background-color: #ff8400;
	color: white;
	font-size: 15px;
	font-weight: 600;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
.main_pg article.counselingArea > form > div.checkBox{
	display: flex;
    flex-direction: column;
}
.main_pg article.counselingArea > form > div.checkBox > label.agree,
.main_pg article.counselingArea > form > div.checkBox > label.robot{
	display: flex;
    align-items: center;
	margin-bottom: 10px;
}
.main_pg article.counselingArea > form > div.checkBox > label.agree > input,
.main_pg article.counselingArea > form > div.checkBox > label.robot > input{
    margin-right: 5px;
}


.main_pg {padding-top: 70px;background-color:#ececec}
.main_pg .cont1 {font-size: 0;margin: 0 0 10px}
.main_pg .cont2 {font-size: 0}
.main_pg .cont2 .size1 {width: 66.666%}
.main_pg .cont2 .size2 {width: 33.333%}
.main_pg .cont3 {font-size: 0}
.main_pg .cont3 img {width: 33.333%}
.main_pg .cont4 {font-size: 0;margin: 0 0 20px}
.main_pg .cont5 {padding: 15px 10px;background: #fff;}
.main_pg .cont5 h2 {color: #222;font-size: 17px;font-weight: 900;margin: 0 0 13px}
.main_pg .cont5 h2 a {float: right}
.main_pg .cont5 h2 img {width: 13px}
.main_pg .cont5 ul {margin-bottom:5px}
.main_pg .cont5 ul li {position:relative;border-bottom: 1px solid #ddd;line-height: 35px;height: 35px}
.main_pg .cont5 ul li:first-child{border-top: 1px solid #ddd}
.main_pg .cont5 ul li a {font-size: 13px;color: #222}
.main_pg .cont5 span {display: inline-block;width: calc(100% - 90px);word-break: keep-all;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_pg .cont5 b {position: absolute;right: 10px;top: 0;font-weight: 400;}
.main_pg .cont6 {padding-bottom:20px;background-color: #fff;}