@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

@font-face { 
	font-family:'BarcodeFont';
	src:url("../font/Code39Azalea.woff") format('woff');
}


*	{ font-family: 'Noto Sans KR', NanumSquare, NanumGothic,"Malgun Gothic","맑은 고딕","돋움",Dotum,"굴림",Gulim,Helvetica,AppleGothic,Sans-serif; box-sizing: border-box; }
body	{ width: 100%; height: 100%; padding: 0; margin: 0; background: #e0ecfb; font-size: 18px; font-family: 'Noto Sans KR', NanumSquare, NanumGothic,"Malgun Gothic","맑은 고딕","돋움",Dotum,"굴림",Gulim,Helvetica,AppleGothic,Sans-serif; }
a { text-decoration: none; color: #242424; }

#body { background: linear-gradient(#efe1f2, #e0ecfb); }

header { max-width: 1420px; padding-top: 50px; padding-bottom: 19%; margin: 0 auto; background: url(../image/intro/intro_bg.png) no-repeat bottom center; background-size: 100%; }
header h1 { display: block; max-width: 240px; height: 75px; margin: 0 auto; overflow: hidden; text-indent: -999px; background: url(../image/intro/logo.png) no-repeat center center; background-size: 100%; }
header strong { display: block; max-width: 550px; margin: 15px auto 0 auto; font-size: 27px; text-align: center; letter-spacing: -1px; word-spacing: -1px; }

section { padding: 20px 10px 70px 10px; }
section .menu { max-width: 1350px; min-height: 295px; padding-bottom: 35px; margin: 0 auto; }
section .menu ul { width: 100%; list-style: none; margin: 0; padding: 0; }
section .menu ul li { float: left; width: calc((100% / 5) - 8px); margin-right: 10px; list-style: none; }
section .menu ul li:last-child { margin-right: 0; }
section .menu ul li a { display: block; width: 100%; padding: 30px 15px; border-radius: 15px; overflow: hidden; }
section .menu ul li a.i_m1 { background-color: #b6cefa; }
section .menu ul li a.i_m2 { background-color: #e8c0f2; }
section .menu ul li a.i_m3 { background-color: #daf2bd; }
section .menu ul li a.i_m4 { background-color: #f8d6a0; }
section .menu ul li a.i_m5 { background-color: #afe8df; }

section .menu ul li a strong { position: relative; display: block; padding-bottom: 150px; font-size: 1.4em; font-family: 'GmarketSansBold'; color: #242424; text-align: center; word-spacing: -2px; letter-spacing: -2px; }
section .menu ul li a strong::after { position: absolute; top: 45px; left: calc(50% - 50px); width: 100px; height: 100px; content: ""; }
section .menu ul li a.i_m1 strong::after { background: url(../image/intro/m_1.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m2 strong::after { background: url(../image/intro/m_2.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m3 strong::after { background: url(../image/intro/m_3.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m4 strong::after { background: url(../image/intro/m_4.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m5 strong::after { background: url(../image/intro/m_5.png) no-repeat center center; background-size: 100%; }

section .menu ul li a.i_m1:hover strong:after { background: url(../image/intro/m_h_1.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m2:hover strong::after { background: url(../image/intro/m_h_2.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m3:hover strong::after { background: url(../image/intro/m_h_3.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m4:hover strong::after { background: url(../image/intro/m_h_4.png) no-repeat center center; background-size: 100%; }
section .menu ul li a.i_m5:hover strong::after { background: url(../image/intro/m_h_5.png) no-repeat center center; background-size: 100%; }

section .menu ul li a span { position: relative; display: block; font-weight: 600; color: #242424; text-align: center; line-height: 20px; letter-spacing: -1px; }
section .menu ul li a span::after { content: url(../image/intro/link_icon.png); position: absolute; width: 17px; height: 17px; margin-top: 2px; margin-left: 5px; }

section .link { width: 340px; height: 70px; margin: 0 auto; }
section .link a { display: block; width: 100%; height: 100%; padding: 10px; background-color: #e65757; border-radius: 100px; overflow: hidden; color: #fff; text-align: center; word-spacing: -1px; }
section .link a span { position: relative; padding-left: 40px; font-size: 20px; line-height: 50px; letter-spacing: -1px; }
section .link a span::before { content: url(../image/intro/home_icon.png); position: absolute; top: -6px; left: 0; width: 30px; height: 30px; }





@media all and ( max-width: 1100px )
{
    section .menu { height: 570px; }
    section .menu ul li { width: calc((100% / 3) - 10px); margin-bottom: 10px; }
    section .menu ul li:nth-child(3) { margin-right: 0px; }
}

@media all and ( max-width: 710px )
{
    section .menu { height: 830px; }
    section .menu ul li { width: calc((100% / 2) - 10px); }
    section .menu ul li:nth-child(2) { margin-right: 0px; }
    section .menu ul li:nth-child(3) { margin-right: 10px; }
} 

@media all and ( max-width: 520px )
{
    header { background: url(../image/intro/intro_m_bg.png)no-repeat center bottom; background-size: auto 100%; padding-top: 25px; padding-bottom: 40%; }
    header strong { font-size: 20px; }
    section { padding-bottom: 40px;}
    section .menu { height: 800px; }
    section .menu ul li { width: 100%; }
    section .menu ul li a strong { padding-left: 160px; padding-bottom: 20px; font-size: 35px; text-align: left; }
    section .menu ul li a strong::after { width: 80px; height: 80px; }
    section .menu ul li a span { padding-left: 160px; font-size: 20px; text-align: left; }
    section .menu ul li a.i_m1 strong::after { top: -5px; left: 30px; }
    section .menu ul li a.i_m2 strong::after { top: -5px; left: 30px; }
    section .menu ul li a.i_m3 strong::after { top: -5px; left: 30px; }
    section .menu ul li a.i_m4 strong::after { top: -5px; left: 30px; }
    section .menu ul li a.i_m5 strong::after { top: -5px; left: 30px; }
}

@media all and ( max-width: 470px )
{
    section .menu { height: 670px; }
    section .menu ul li a { padding: 27px 15px; }
    section .menu ul li a strong { padding-left: 110px; padding-bottom: 15px; font-size: 25px; }
    
    section .menu ul li a span { padding-left: 110px; font-size: 17px; }
    section .menu ul li a.i_m1 strong::after { top: -7px; left: 10px; }
    section .menu ul li a.i_m2 strong::after { top: -7px; left: 10px; }
    section .menu ul li a.i_m3 strong::after { top: -7px; left: 10px; }
    section .menu ul li a.i_m4 strong::after { top: -7px; left: 10px; }
    section .menu ul li a.i_m5 strong::after { top: -7px; left: 10px; }

    section .link { width: 250px; height: 50px; }
    section .link a span { padding-left: 32px; font-size: 17px; line-height: 30px; }
    section .link a span::before { top: 0; width: 25px; height: 25px; }
}

@media all and ( max-width: 420px )
{
	header { padding-bottom: 35%; }
	header h1 { max-width: 200px; }
	header strong { margin-top: 5px; font-size: 17px; }
	section { padding-top: 10px; }
}

@media all and ( max-width: 360px )
{
	section .menu { height: 620px; }
	section .menu ul li a strong { padding-left: 105px; padding-bottom: 5px; font-size: 22px; }
	section .menu ul li a.i_m1 strong::after { top: -12px; }
	section .menu ul li a.i_m2 strong::after { top: -12px; }
	section .menu ul li a.i_m3 strong::after { top: -12px; }
	section .menu ul li a.i_m4 strong::after { top: -12px; }
	section .menu ul li a.i_m5 strong::after { top: -12px; }
	section .menu ul li a span { padding-left: 105px; font-size: 16px; }
}