@charset "utf-8";



/* Font */



@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('contents.css');



/* Guide 

----------------------------------------------------------------------------------------------------------------------------------------------------------



▶사이즈

pc : 1200px

tablet : 980px ~

mobile : 767px ~ 320px



▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.



*/





/* Reset 

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



body,

div,

dl,

dt,

dd,

ul,

ol,

li,

h1,

h2,

h3,

h4,

h5,

h6,

pre,

code,

form,

fieldset,

legend,

textarea,

p,

blockquote,

th,

td,

input,

select,

textarea,

button {

    margin: 0;

    padding: 0;

}



body,

th,

td,

input,

select,

textarea,

button {

    font-size: 16px;

    color: #333;

	font-weight:300;

}



dl,

ul,

ol,

menu,

li {

    list-style: none;

}



*,

*:before,

*:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    line-height: 1.2;

    letter-spacing: -0.2px;

}



:focus {

    outline: 0 !important;

}



iframe {

    border: none;

    width: 100%;

}



a {

    color: inherit;

    -webkit-transition: all .2s ease-out;

    -moz-transition: all .2s ease-out;

    transition: all .2s ease-out;

}



a:hover,

a:focus,

a:active,

a:link {

    text-decoration: none;

    color: inherit;

}



img {

    max-width: 100%;

}



textarea {

    max-width: 100%;

    resize: none;

}



body {

    overflow-x: hidden;

}



@media only screen and (min-width: 320px) {

    body {

        overflow-x: hidden;

    }

}



.hidden {

    font-size: 0;

    line-height: 0;

    text-indent: -9999em;

    overflow: hidden;

}





/* Parallax

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



.parallax {

    background-position: 0 0;

    background-repeat: no-repeat;

    background-size: 100% auto;

    width: 100%;

    background-size: cover;

    background-attachment: fixed;

}





/* Preloader

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



.animationload {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fff;

    z-index: 999999;

}



.loader {

    width: 200px;

    height: 200px;

    font-size: 24px;

    text-align: center;

    position: absolute;

    left: 50%;

    top: 50%;

    background-image: url(/images/basic_resp/img/preloader.gif);

    background-repeat: no-repeat;

    background-position: center;

    margin: -100px 0 0 -100px;

}





/* Back to top (탑 버튼)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



.back-to-top {

    width: 40px;

    height: 40px;

    position: fixed;

    bottom: 20px;

    right: 20px;

    display: none;

    text-align: center;

    z-index: 10000;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    background: #282595;

}



.back-to-top i {

    color: #fff;

    font-size: 15px;

    display: block;

    line-height: 33px;

}





/* Layoyt (레이아웃)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



#wrapper {

    position: relative;

    width: 100%;

    min-width: 340px;

 	height: 100%; 

	/*height:100vh */

}



    .login-bar {

        text-align: center;
		display:none;
        z-index: 999;

        position: relative;

		float:right;

		top:24px;

    }

    .login-bar li {

        display: inline-block;

        position: relative;

        margin-left: 10px;

        border-left: 1px solid #ddd;

        height: 27px;

        border: 1px solid #525353;

        border-radius: 50px;

        margin-bottom: 10px;

    }

    .login-bar li a {

        font-size: 12px;

        line-height: 26px;

        padding: 0 12px;

        color: #525353;

        font-weight: 500;

    }

	.login-bar li a img{position:relative; top:1px; margin-right:5px;}

    .login-bar .material-icons {

        display: block;

        position: absolute;

        right: 6px;

        top: 2px;

        font-size: 18px;

        color: #fff;

    }

    .login-bar li:first-child {

        padding-right: 12px;

        background-color: #282595;

        border: 1px solid #282595;

    }

    .login-bar li:first-child a {

        display: block;

        width: 75px;

        color: #fff;

    }

    .login-bar li ul {

        position: absolute;

        left: -11px;

        top: 31px;

    }

    .login-bar li ul li {

        padding-right: 12px;

    }

    .login-bar li ul li a {

        display: block;

        margin-bottom: 38px;

        width: 75px;

    }

    .login-bar .lang_list {

        display: none;

        position: absolute;

        background-color: #000;

        width: 91px;

        left: -3px;

        border-radius: 10px;

        padding: 5px 0;

        top: -1px;

    }

    .login-bar .lang_list dd a {

        color: #fff;

        font-weight: 400;

        position: relative;

        line-height: 26px;

    }

    .login-bar .lang_list dd a i {

        color: #fff !important;

        right: -8px !important;

        top: 5px !important;

    }







/* Header

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.nav-btn {

        z-index: 999;

        display: block;

        position: absolute;

        top: 25px;

        right: 0px;

        width: 30px;

        height: 23px;

        cursor: pointer;

    }

    .nav-btn span {

        position: absolute;

        left: 50%;

        display: block;

        margin-left: -15px;

        width: 30px;

        height: 3px;

        background: #282595;

        transition: .2s all linear;

    }

    .nav-btn span:nth-child(1) {

        top: 0;

    }

    .nav-btn span:nth-child(2) {

        top: 10px;

    }

    .nav-btn span:nth-child(3) {

        top: 20px;

    }

    /*.nav-btn.nav-close {

        position: fixed;

    }*/

    .nav-btn.nav-close span:nth-child(1) {

        top: 50%;

        transform: rotate(45deg);

    }

    .nav-btn.nav-close span:nth-child(2) {

        margin-left: 0;

        width: 0;

    }

    .nav-btn.nav-close span:nth-child(3) {

        top: 50%;

        transform: rotate(-45deg);

    }

	

@media only screen and (min-width: 1200px) {

	.nav-btn{display:none;}

    #header {

        z-index: 999;

        width: 100%;

    	position:relative;

		transition:all 0.5s;

		border-bottom:1px solid #ddd;

		background:#fff;

    }

    #header:after {

		display:block;

		content:"";

		clear:both;

	}

	#header.scroll_on {background: #fff; transition:all 0.5s; border-top:1px solid #eaeaea;}

	#header.sub_page:after {content:''; display:block; width:100%; height:1px; background:#eaeaea; position:absolute; left:0;}

    #header > div {

        position: relative;

        margin: 0 auto;

        width: 1200px;

        height: 80px;

		text-align: center;

    }

	#L_SITE_LOGO {float: left;}

    #header h1 {

        float: left;

		padding-top:17px;

		position: absolute;

    }

    #header h1 a {

        display: block;

    }

    #header h1 a > img {

        vertical-align: baseline;

    } 



.lang_select { font-size:14px; float: right; position: absolute; right: 70px; top: 32px;}

.lang_select > li {float:left;line-height: 1; padding-right:12px; margin-left:12px; border-right:1px solid #666;}

.lang_select > li:last-child {padding-right:0px; border-right:none;}

.lang_select > li a {color:#666; line-height: 1;}

.lang_select > li a.active {color:#000; font-weight:400;}

    .nav-bg {

        z-index:-1;

        display: none;

        position: absolute;

        top: 80px;

        left: -500%;

        width: 1000%;

        height: 250px;

        background: #fff;

		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);

		/*border-bottom:1px solid #ededed;*/

    }

    #nav {

		display:inline-block;

		vertical-align: top;

		z-index: 999;

		float:right;

    }

	.navigation{float:left;}

    .navigation:after {

        content: "";

        display: block;

        clear: both;

    }

    .navigation > li {

        position: relative;

        float: left;

        width: 160px;

        text-align: center;

    }

	.navigation li.mo {display:none;}

    .navigation .main-menu {

        display: block;

        width: 100%;

        font-weight: 400;

        font-size: 18px;

        color: #1e1e1e;

       line-height: 80px;

    }



    .navigation .sub-menu {

        display: none;

        z-index: 999;

        position: absolute;

        top: 80px;

        left: 0;

        padding:15px 0;

        width: 160px;

        height: 250px;

    }



    .navigation .sub-menu a {

        display: block;

        text-align: center;

        font-size: 16px;

        color: #666;

		box-sizing:border-box;

		vertical-align:middle;

		line-height:40px;

		height:42px;

		font-weight:400;

    }

	

    .navigation .sub-menu .intro-menu {

        display: none;

    }

    .navigation .sub-menu a:hover {

		color:#fff;

    }

	

	.navigation > li:hover .main-menu{color:#282595;}

	.navigation > li:hover:before {content:'';  display:block; width:100%; height:3px; background:#282595; position: absolute; bottom: 0;}

	.navigation > li:hover .sub-menu a:hover {color:#282595;}

	.navigation > li:hover .sub-menu a:hover:after {content:'';  display:block; width:100%; height:1px; background:#282595; position: absolute; margin-bottom:-10px;}

	

}



@media only screen and (max-width: 1200px) {

    #header {

		position: fixed;

        z-index: 666;

        width: 100%;

        height: 65px;

        background: #fff;

		padding: 0px;

		border-bottom:1px solid #eaeaea;

    }

    #header > div {

        padding: 0;

    }

    #header h1 {

        float: left;

        padding: 13px 20px;

        height: 65px;

    }

    #header h1 a {

        display: block;

    }

    #header h1 img {

        width: auto;

        vertical-align: baseline

    }

    .login-bar {

        float: none;

		padding-top: 10px;

    }

    .login-bar li {

        border: 1px solid #ffffff;

	    margin-left: 0;

    }

	.login-bar li:first-child {

		border: 1px solid #fff;

	}

    .login-bar li a {

        color: #fff;

    }

    .login-bar .material-icons {

        color: #fff;

    }

   .nav-btn {

        right: 20px;

		top:20px;

    }

    .nav-bg {

        z-index: 777;

        display: none;

        top: 0;

		position:fixed;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.7);

    }

    #nav {

        z-index: 888;

        position: fixed;

        right: -100%;

        display: block;

        padding: 65px 0 20px;

        width: 70%;

        height: 100%;

        background: #fff;

    }

	.navigation > li {width: 100%;}

	.navigation .sub-menu {width: 100%;} 

    .navigation .main-menu {

        display: block;

        padding: 0 30px;

        width: 100%;

        line-height: 45px;

        font-weight: 400;

        font-size: 18px;

        color: #000;

        transition: none;

    }

	.navigation > li a:hover{color:#282595;}

    .navigation li.active .main-menu {

        background: #282595;

        color: #fff;

    }

    .navigation .sub-menu {

        display: none;

        padding: 10px 0;

        background: #f1f1f1;

    }

    .navigation .sub-menu a {

        display: block;

        padding: 0 30px;

        line-height: 38px;

        font-size: 16px;

        color: #555;

    }

	

    .navigation .sub-menu a:before {

        content: "";

        display: inline-block;

        margin: 0 5px 0 0;

        width: 4px;

        height: 1px;

        vertical-align: middle;

        background: #888;

    }

    .navigation .sub-menu a:hover {

        color: #282595;

    }

    .navigation .sub-menu a:hover:before {

        background: #282595;

    }

	.lang_select { font-size:14px; display:inline-block; padding-left:20px; margin-top: 30px; }

    .lang_select > li {float:left;line-height: 1; padding-right:12px; margin-left:12px; border-right:1px solid #b6b6b6;}

    .lang_select > li:last-child {padding-right:0px; border-right:none;}

    .lang_select > li a {color:#b6b6b6; line-height: 1;}

    .lang_select > li a.active {color:#046ab4;}

}



@media only screen and (max-width: 768px) {

    #header h1 {

        padding: 15px 10px;

    }

    #header h1 a > img {

        width: 140px;

    }

}







/* Button (공통 버튼)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



.btn {

    text-transform: uppercase;

    border-radius: 0;

    line-height: 24px;

}



.btn:focus,

.btn:active {

    outline: none;

    color: #fff;

}



.btn-custom {

    border-radius: 3px;

    padding: 0.8em 1.8em;

    -webkit-transition: all .2s ease-out;

    -moz-transition: all .2s ease-out;

    transition: all .2s ease-out;

    text-transform: uppercase;

    background-color: #509591;

    border-color: #509591;

    color: #fff;

}



.btn-custom:hover,

.btn-custom:focus {

    background-color: #447774;

    border-color: #447774;

    color: #fff;

}



.btn-custom-outline {

    border-radius: 3px;

    padding: 0.8em 1.8em;

    color: #fff;

    -webkit-transition: all .2s ease-out;

    transition: all .2s ease-out;

    text-transform: uppercase;

    background-color: transparent;

    border-color: #fff;

}



.btn-custom-outline:hover,

.btn-custom-outline:focus {

    color: #fff;

    background-color: rgba(255, 255, 255, .5);

}



.btn-bar a {

    margin-right: 10px;

}



.form-control {

    box-shadow: none;

    -webkit-box-shadow: none;

    border-radius: 3px;

    height: 38px;

}



.form-control:focus {

    outline: none;

    box-shadow: none;

    -webkit-box-shadow: none;

    border-color: #333;

}





/* Footer (하단메시지)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



#footer { width: 100%; background:#eee; padding:0 0 30px 0;}



#foot_top{ width:1200px;  margin: 0 auto; padding-top:35px; margin-bottom:10px; border-bottom:0px solid #4d5967;}



#foot_top:after {content: ''; display: block; clear: both;}

.foot_logo{float:left;}

.footer-menu { /* float:right;*/ clear:both; padding:20px 0; background:#fff; border-top:1px solid #d2d2d2; }

.footer-menu ul { width:1200px;  margin: 0 auto;padding: 10px 0;}

.footer-menu:after {content: ''; display: block; clear: both;}

.footer-menu li {display:inline-block;padding-left:10px; margin-left:15px;line-height:8px;color:#000; position:relative;}

.footer-menu li:after {content:''; display:inline-block; width:4px; height:4px; background:#eee; border-radius:50%; position: absolute; top:6px; left:0;}

.footer-menu li:first-child{margin-left:0;padding-left:0;border-left:0}

.footer-menu li:first-child:after {display:none;}



.foot_info{position:relative; width:1200px;  margin: 0 auto;}
.footer-sns { position:absolute; right:0; top:0;}
.footer-sns li { float:left; margin-left:10px;}


.address {color: #000; font-size: 14px; line-height: 24px; font-weight: 300;}

.address span{margin:0 5px; color:#586471; }

.address p{margin-top:10px;}



@media only screen and (max-width: 1200px) {

    #footer {/*padding:30px;*/}    	

    #foot_top {width:100%;}

	.foot_info{width:100%;}

	.address br{display:none;}
	.footer-menu ul  {width:100%;}

}

@media only screen and (max-width:768px) {

	 #foot_top{text-align:center; margin-bottom::20px;}

	.foot_logo{float:none;}

	.footer-menu{/*float:none;*/  padding-top:10px;}

	.footer-menu li {font-size: 13px;}

	.footer-menu li {padding-left:7px; margin-left:7px;}

	.footer-menu li:after {top:4px; width:3px; height:3px;}

	.address {font-size: 13px; line-height: 20px; text-align:center;}	

	.address span{margin:0 3px;}

}



@media only screen and (max-width:500px) {

     #footer {/*padding:20px 10px;*/}  



}









/* 메인 Slider 

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.slick-slider

{

    position: relative;



    display: block;

    box-sizing: border-box;



    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;



    -webkit-touch-callout: none;

    -khtml-user-select: none;

    -ms-touch-action: pan-y;

        touch-action: pan-y;

    -webkit-tap-highlight-color: transparent;

}



.slick-list

{

    position: relative;



    display: block;

    overflow: hidden;



    margin: 0;

    padding: 0;

}

.slick-list:focus

{

    outline: none;

}

.slick-list.dragging

{

    cursor: pointer;

    cursor: hand;

}



.slick-slider .slick-track,

.slick-slider .slick-list

{

    -webkit-transform: translate3d(0, 0, 0);

       -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

         -o-transform: translate3d(0, 0, 0);

            transform: translate3d(0, 0, 0);

}



.slick-track

{

    position: relative;

    top: 0;

    left: 0;



    display: block;

    margin-left: auto;

    margin-right: auto;

}

.slick-track:before,

.slick-track:after

{

    display: table;



    content: '';

}

.slick-track:after

{

    clear: both;

}

.slick-loading .slick-track

{

    visibility: hidden;

}



.slick-slide

{

    display: none;

    float: left;



    height: 100%;

    min-height: 1px;

}

[dir='rtl'] .slick-slide

{

    float: right;

}

.slick-slide img

{

    display: block;

}

.slick-slide.slick-loading img

{

    display: none;

}

.slick-slide.dragging img

{

    pointer-events: none;

}

.slick-initialized .slick-slide

{

    display: block;

}

.slick-loading .slick-slide

{

    visibility: hidden;

}

.slick-vertical .slick-slide

{

    display: block;



    height: auto;



    border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

    display: none;

}



@charset 'UTF-8';

/* Slider */

.slick-loading .slick-list

{

    background: #fff url('./ajax-loader.gif') center center no-repeat;

}



/* Icons */

@font-face

{

    font-family: 'slick';

    font-weight: normal;

    font-style: normal;



    src: url('./fonts/slick.eot');

    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');

}

/* Arrows */

.slick-prev,

.slick-next

{

    font-size: 0;

    line-height: 0;



    position: absolute;

    top: 50%;



    display: block;



    width: 20px;

    height: 20px;

    padding: 0;

    -webkit-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%);



    cursor: pointer;



    color: transparent;

    border: none;

    outline: none;

    background: transparent;

}

.slick-prev:hover,

.slick-prev:focus,

.slick-next:hover,

.slick-next:focus

{

    color: transparent;

    outline: none;

    background: transparent;

}

.slick-prev:hover:before,

.slick-prev:focus:before,

.slick-next:hover:before,

.slick-next:focus:before

{

    opacity: 1;

}

.slick-prev.slick-disabled:before,

.slick-next.slick-disabled:before

{

    opacity: .25;

}



.slick-prev:before,

.slick-next:before

{

    font-family: 'slick';

    font-size: 20px;

    line-height: 1;



    opacity: .75;

    color: white;



    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



.slick-prev

{

    left: -25px;

}

[dir='rtl'] .slick-prev

{

    right: -25px;

    left: auto;

}

.slick-prev:before

{

    content: '←';

}

[dir='rtl'] .slick-prev:before

{

    content: '→';

}



.slick-next

{

    right: -25px;

}

[dir='rtl'] .slick-next

{

    right: auto;

    left: -25px;

}

.slick-next:before

{

    content: '→';

}

[dir='rtl'] .slick-next:before

{

    content: '←';

}



/* Dots */

.slick-dotted.slick-slider

{

    margin-bottom: 30px;

}



.slick-dots

{

    position: absolute;

    bottom: -25px;



    display: block;



    width: 100%;

    padding: 0;

    margin: 0;





    list-style: none;



    text-align: center;

}

.slick-dots li

{

    position: relative;



    display: inline-block;



   /* width: 20px;

    height: 20px;

    margin: 0 5px;

    padding: 0;*/



    cursor: pointer;

}

.slick-dots li button

{

    font-size: 0;

    line-height: 0;



    display: block;



   /* width: 20px;

    height: 20px;

    padding: 5px;*/



    cursor: pointer;



    color: transparent;

    border: 0;

    outline: none;

    background: transparent;

}

.slick-dots li button:hover,

.slick-dots li button:focus

{

    outline: none;

}

.slick-dots li button:hover:before,

.slick-dots li button:focus:before

{

    opacity: 1;

}

.slick-dots li button:before

{

    font-family: 'slick';

    font-size: 6px;

    line-height: 20px;



    position: absolute;

    top: 0;

    left: 0;



    width: 20px;

    height: 20px;



    content: '•';

    text-align: center;



    opacity: .25;

    color: black;



    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.slick-dots li.slick-active button:before

{

    opacity: .75;

    color: black;

}



/* Main Visual (메인이미지)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.carousel-caption{position:relative; top:220px;  text-align: left; padding:0; bottom:auto; text-shadow:none; width: 1200px; margin: 0 auto;}

.carousel-caption .slogan p{line-height:1.4;}

.carousel-caption .slogan .main-title{color:#fff; font-weight:600; font-size:70px; margin-top:20px; margin-bottom:40px;  letter-spacing:-0.03em; line-height:110%;}

.carousel-caption .slogan .sub-title{font-size:26px; font-weight:400; color:#fff;}
.carousel-caption .slogan .sub-title-sub {font-size:20px; font-weight:400; color:#fff; font-weight: 700;}



.slick-slider {text-align:center;}

.slider-box{position:relative;width:100%; margin:0 auto;height:860px}

.slick-initialized .slick-slide {height:860px; background-repeat:no-repeat;background-position:center center;background-size:cover;}

.slick-initialized .slick-slide.slide01{position: relative;  background-image:url("/images/mtl01r-21-0083/main/main_visual.jpg");}

.slick-initialized .slick-slide.slide02{position: relative;  background-image:url("/images/mtl01r-21-0083/main/main_visual.jpg");}



.slick-arrow {position:absolute; display:block; width:50px; height:50px; top: 125px; z-index:9; border:0; background:none; color:rgba(0,0,0,0)}

.slick-arrow.slick-prev {left:0;}

.slick-arrow.slick-prev:before{content:"<"; color:#000; font-size:50px;}

.slick-arrow.slick-next {right:0;}

.slick-arrow.slick-next:after{content:">"; color:#000; font-size:50px;}

.slick-dots{display: inline-block !important; text-align:center; position:absolute; bottom:30px; width: 120px; left: 50%; margin-left: -60px;}

.slick-dots li{display: inline-block; margin:0 10px; }

.pro-bar{ position:absolute; bottom:0; left:0; width:0;  height:10px; background: #282595;}

.pro-ani{  animation: proBar 5s 1; }

.slick-dots li {margin:0 5px;}

.slick-dots li button { width:20px; height:20px; border-radius:20px;  background:rgba(255,255,255,0.5); text-indent: -9999px;}

.slick-dots li.slick-active button {width:40px; height: 20px; border-radius:20px; background:#fff;}

@keyframes proBar{

    0%{width:0;}

    100%{width:100%;}

    }



@media only screen and (max-width:1200px){

	.slider-box { height:600px;}

	.slick-initialized .slick-slide { height:600px;}

	.carousel-caption {width:100%; left: 5%;}

	.carousel-caption .slogan .main-title{font-size:32px;}

	.carousel-caption .slogan .main-title strong{font-size:62px;}

	.carousel-caption .slogan .sub-title{font-size:26px;}

}



@media only screen and (max-width:768px){

	.carousel-caption{top:40%; left:0;}

	.slider-box { height:640px;}

	.slick-initialized .slick-slide {height: 640px; background-position:center bottom}

	.slick-initialized .slick-slide.slide01{background-image:url("/images/mtl01r-21-0083/main/main_visual02.jpg");}

	.slick-initialized .slick-slide.slide02{background-image:url("/images/mtl01r-21-0083/main/main_visual02.jpg");}

	
	.carousel-caption .slogan .sub-title-sub {font-size: 16px;}
	.carousel-caption .slogan p{text-align:center; line-height:1.3;}

	.carousel-caption .slogan .main-title{font-size:28px; margin-bottom:10px;}

	.carousel-caption .slogan .main-title strong{font-size:42px;}

	.carousel-caption .slogan .sub-title{font-size:22px;}



}



@media only screen and (max-width:500px){

	.slider-box {height:530px; }

	.slick-initialized .slick-slide { height: 530px;}

	.carousel-caption .slogan .main-title{font-size:20px;}

	.carousel-caption .slogan .main-title strong{font-size:30px;}

	.carousel-caption .slogan .sub-title{font-size:16px;}

	/*.slick-initialized .slick-slide{background-position: -700px 140px; }*/



}









/* Main Contents (메인 컨텐츠)

---------------------------------------------------------------------------------------------------------------------------------------------------------- */



#mainContainer {z-index: 555;}



.main_section_title {position:relative; font-size:36px; color:#333; font-weight:600; margin-bottom: 50px; letter-spacing:-1px; word-break:keep-all; display:none;}

.main_section_title:after{content:''; display:inline; width:60px; height:1px;  background:#333; position:absolute; bottom:10px; margin-left:15px;}



@media only screen and (max-width: 1200px) {

    .main_section_title {font-size:30px;}

}



@media only screen and (max-width:768px) {

    .main_section_title {font-size:22px; margin-bottom:30px;}

	.main_section_title:after{width:30px; margin-left:10px; bottom:6px;}

}





/* main_section01

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.main_section01 {

display:none;

	width:100%;

    padding:100px 0px 120px 0;

	background-color:#f0f2f4;

    background-image: url('/images/mtl01r-21-0083/main/section01_left.png'), url('/images/mtl01r-21-0083/main/section01_right.png');

	background-repeat: no-repeat, no-repeat;

  	background-position: left bottom, right top;

}



.section01_inner {width: 1200px;margin: 0 auto;}

.section01_inner .main_big_title{position:relative; height:180px; text-align:center; font-size:40px; font-weight:600; color:#282595; }

.section01_inner .main_big_title:before {content:''; display:inline-block; width:1px; height:50px; background:#282595; position:absolute; top:70px; left: 50%;}

.section01_inner .main_big_title:after {content:''; display:inline-block; width:7px; height:7px;  background:#282595; border-radius: 50%; position: absolute; top: 120px; left: 50%; margin-left: -3px;}  



.slide-warp dl:after{content:""; display:block; clear:both;}

.slide-warp dt:after{content:""; display:block; clear:both;}



.slide-warp dt {float:left; width:25%;  padding: 10px; text-align: center; position:relative; margin-bottom:60px; }

.slide-warp dt span{width:216px; height:216px; background-size:cover; background-position:center center; background-repeat:no-repeat; border-radius:100%;  box-shadow: 5px 10px 10px rgba(0,0,0,.2); display:block; margin:0 auto; cursor:pointer;}

.slide-warp dt p{font-size:18px; color:#555; margin-top:30px;}

.slide-warp dt p br{display:none;}

.slide-warp dt.on p{font-weight:500; color:#282595;}



.slide-warp dd { display: none; width:100%; padding:0 60px;}

.slide-warp dd.on { display: block; }

.slide-warp dd h3{color:#282595; font-size:28px; font-weight:600; margin-bottom:20px;}

.slide-warp dd p{color:#333; font-size:22px; font-weight:400;}



.slide-warp dd .txt-area{float:left;}

.slide-warp dd .btn-area{float:right; padding-top:30px;}

.slide-warp dd .txt-area:after, .slide-warp dd .btn-area:after{content:""; display:block; clear:both;}

.slide-warp dd .btn-area a{text-align:center; font-weight:400; font-size:22px; display:inline; padding:18px 60px; vertical-align:middle; cursor:pointer;line-height:1; background:#282595; color:#fff; border-radius:50px;}

.slide-warp dd .btn-area a:hover{background:#00d0f6; border:0;}



@media only screen and (max-width: 1200px) {

    .main_section01 {width: 100%; padding:60px 20px 80px 20px;}

	.section01_inner {width:100%;}

	

	.section01_inner .main_big_title{height:150px; font-size:32px; }

	.section01_inner .main_big_title:before {top:55px; }

	.section01_inner .main_big_title:after {top:105px;}

	

	.slide-warp dt p{font-size:16px;}

	.slide-warp dd h3{font-size:24px;}

	.slide-warp dd p{font-size:18px;}

	.slide-warp dd .btn-area a{font-size:20px; padding:15px 45px;}

}



@media only screen and (max-width: 980px) {

	.slide-warp dt{margin-bottom:40px;}

	.slide-warp dt span{width:170px; height:170px;}

	.slide-warp dd{padding:0 20px;}

	.slide-warp dd .txt-area{float:none; width:100%; text-align:center;}

	.slide-warp dd .btn-area{float:none; width:100%; text-align:center;}

}



@media only screen and (max-width:768px) {

	.slide-warp dt span{width:142px; height:142px;}

	.slide-warp dt p{font-size:14px; margin-top:20px;}

	.slide-warp dd h3{font-size:20px;}

	.slide-warp dd p{font-size:16px;}

	.slide-warp dd .btn-area a{font-size:15px; padding:10px 35px;}

}



@media only screen and (min-width:501px) {

	.slide-warp dt:nth-child(1) span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon01.jpg')}

	.slide-warp dt:nth-child(2) span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon02.jpg')}

	.slide-warp dt:nth-child(3) span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon03.jpg')}

	.slide-warp dt:nth-child(4) span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon04.jpg')}

	

	.slide-warp dt:nth-child(1).on span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon01_on.jpg')}

	.slide-warp dt:nth-child(2).on span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon02_on.jpg')}

	.slide-warp dt:nth-child(3).on span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon03_on.jpg')}

	.slide-warp dt:nth-child(4).on span{background-image:url('/images/mtl01r-21-0083/main/sec01_icon04_on.jpg')}

}



@media only screen and (max-width: 500px) {

	.main_section01 {padding:50px 10px;}

	

	.section01_inner .main_big_title{height:90px; font-size:22px; }

	.section01_inner .main_big_title:before {height:30px; top:35px; }

	.section01_inner .main_big_title:after {top:65px;}

	.slide-warp dt {width:25%; margin-bottom:25px; padding:10px 5px; background:#fff; border:1px solid #ddd; border-right:0; }

	.slide-warp dt:nth-child(4){border-right:1px solid #ddd;}

	.slide-warp dt span{display:none;}

	.slide-warp dt.on {background-image:url('/images/mtl01r-21-0083/main/sec01_on_bg.jpg');}

	.slide-warp dt.on p{ font-weight:500; color: #fff;}

	.slide-warp dd h3{margin-bottom:10px;}

	.slide-warp dt p{letter-spacing:-1px; margin-top:0; font-size:13px;}

	.slide-warp dt p br{display:block;}	

}



/* main_section02

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.main_section02 {width:100%; padding:60px 0px;}

.section02_inner {width: 1200px;margin: 0 auto;}		

@media only screen and (max-width: 1200px) {

    .main_section02 {width: 100%; padding:40px 20px;}

	.section02_inner {width:100%;}

}



@media only screen and (max-width: 500px) {

	.main_section02 {padding:50px 20px 20px 20px;}

}





/* main_section03

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.main_section03 {width:100%; background: url('/images/mtl01r-21-0083/main/section03_bg.jpg') no-repeat right 20% center/cover}

.section03_inner { display:none; width: 1200px;margin: 0 auto; padding:120px 0px 180px 0;}	



.main_section03 h2{position:relative; margin-bottom:45px;}

.main_section03 h2:after{content:''; display:inline; width:60px; height:1px;  background:#486dd0; position:absolute; bottom:10px; margin-left:15px;}

.gradtext {

    background: #1bf3ff;

    background: -webkit-linear-gradient(top, #1bf3ff, #5955e3);

    background: -moz-linear-gradient(bottom, #1bf3ff, #5955e3);

    background: -o-linear-gradient(bottom, #1bf3ff, #5955e3);

    background: linear-gradient(to bottom, #1bf3ff, #5955e3);

    -webkit-background-clip: text;

            background-clip: text;

    color: transparent;

    font-size: 46px;

    font-weight:600;

}

.main_section03 p{font-size:28px; font-weight:400; color:#fff; line-height:1.5;}

.main_section03 .btn-area{margin-top:70px; }

.main_section03 .btn-area a{text-align:center; font-weight:400; font-size:22px; display:inline; padding:18px 60px; vertical-align:middle; cursor:pointer;line-height:1; background:#00d0f6; color:#fff; border-radius:50px;}

.main_section03 .btn-area a:hover{background:#282595; border:0;}





/* IE*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

	.gradtext {

		background:#none; 

		background: -webkit-linear-gradient(top, transparent, transparent);

		background: -moz-linear-gradient(bottom, transparent, transparent);

		background: -o-linear-gradient(bottom, transparent, transparent);

		background: linear-gradient(to bottom, transparent, transparent);

		color:#1bf3ff;}

}

		

@media only screen and (max-width: 1200px) {

    .main_section03 {width: 100%;}

	.section03_inner {width:100%;  padding:60px 40px 100px 80px;}

	.gradtext {font-size: 40px;}

	.main_section03 p{font-size:20px;}

	

	.main_section03 .btn-area{margin-top:50px; }

	.main_section03 .btn-area a{font-size:20px; padding:15px 45px;}

}



@media only screen and (max-width:768px) {

    .gradtext {font-size:24px; margin-bottom:30px;}

	.main_section03 h2{margin-bottom:20px;}

	.main_section03 h2:after{width:30px; margin-left:10px;}

	.main_section03 p{font-size:16px; line-height:1.3;}

	.gradtext {font-size:30px;}

	.main_section03 .btn-area{margin-top:30px; }

	.main_section03 .btn-area a{font-size:15px; padding:10px 35px;}

}

	

@media only screen and (max-width: 500px) {

	.main_section03 h2{text-align:center;}

	.main_section03 p{text-align:center;}

	.main_section03 .section03_inner{background:rgba(0,0,0,0.6); padding:60px 20px 70px 20px;}

	.main_section03 .btn-area{text-align:center;}

	.main_section03 h2:after{display:block; bottom:-8px; left:0; right:0; margin:0 auto;}

}





/* main_section04

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.main_section04 {display:none; width:100%; padding:120px 0px;}

.section04_inner {width: 1200px;margin: 0 auto;}		

@media only screen and (max-width: 1200px) {

    .main_section04 {width: 100%; padding:100px 20px;}

	.section04_inner {width:100%;}

}



@media only screen and (max-width: 500px) {

	.main_section04 {padding:50px 20px;}

}





/* main_section05

---------------------------------------------------------------------------------------------------------------------------------------------------------- */

.main_section05 {display:none; width:100%; padding:120px 0px 140px 0;  background: url('/images/mtl01r-21-0083/main/section05_bg.jpg') no-repeat center center/cover}

.section05_inner {width: 1200px;margin: 0 auto;}	

.section05_inner .main_big_title{position:relative; height:180px; text-align:center; font-size:40px; font-weight:600; color:#fff; }

.section05_inner .main_big_title:before {content:''; display:inline-block; width:1px; height:50px; background:#fff; position:absolute; top:70px; left: 50%;}

.section05_inner .main_big_title:after {content:''; display:inline-block; width:7px; height:7px;  background:#fff; border-radius: 50%; position: absolute; top: 120px; left: 50%; margin-left: -3px;} 



.section05_inner .list-box{width:100%;}

.section05_inner .list-box ul{margin:0 -10px;}

.section05_inner .list-box ul:after{content:""; display:block; clear:both;}

.section05_inner .list-box li{position:relative; float:left; height:414px; margin:0 10px; width:calc(25% - 20px); box-shadow: 5px 10px 10px rgba(0,0,0,.2); border-radius:20px 0 20px 0;}



.section05_inner .list-box li:nth-child(1){background:url('/images/mtl01r-21-0083/main/sec05_ban01.jpg') no-repeat center center/cover}

.section05_inner .list-box li:nth-child(2){background:url('/images/mtl01r-21-0083/main/sec05_ban02.jpg') no-repeat center center/cover}

.section05_inner .list-box li:nth-child(3){background:url('/images/mtl01r-21-0083/main/sec05_ban03.jpg') no-repeat center center/cover}

.section05_inner .list-box li:nth-child(4){background:url('/images/mtl01r-21-0083/main/sec05_ban04.jpg') no-repeat center center/cover}



.section05_inner .list-box li:before{z-index: 2; position: absolute;  top: 0; left: 0; width: 100%;  height: 100%; border-radius:20px 0 20px 0; content:''; background:url('/images/mtl01r-21-0083/main/sec05_txt_bg.png') no-repeat bottom center/cover}



.section05_inner .list-box .banner-frame{position:relative; top:60%; padding:0 20px; z-index:10; }

.section05_inner .list-box .banner-frame p{font-size:20px; color:#fff; letter-spacing:-0.03em; line-height:1.3; font-weight:400; word-break:keep-all; }

.section05_inner .list-box .banner-frame p strong{font-size:30px; font-weight:700; display:block; margin-bottom:15px;}



@media only screen and (max-width: 1200px) {

    .main_section05 {width: 100%; padding:80px 20px 100px 20px;}

	.section05_inner {width:100%;}	

	.section05_inner .main_big_title{height:150px; font-size:32px; }

	.section05_inner .main_big_title:before {top:55px; }

	.section05_inner .main_big_title:after {top:105px;}

	

	.section05_inner .list-box .banner-frame p{font-size:18px;}

	.section05_inner .list-box .banner-frame p strong{font-size:26px;}

}



@media only screen and (max-width:980px) {

	.section05_inner .list-box ul{margin:0 -5px;}

	.section05_inner .list-box li{height:360px; margin:0 5px; width:calc(25% - 10px);}
	
	.footer-menu { padding:20px;}
	#foot_top { padding-left:20px; padding-right:20px; box-sizing:border-box;}
	.foot_info { padding-left:20px; padding-right:20px; box-sizing:border-box;}
	
.footer-sns { position:absolute; right:0; top:35px;}
.footer-sns li img { width:55px;}

}





@media only screen and (max-width:768px) {

	.section05_inner .main_big_title{height:100px; font-size:26px; }

	.section05_inner .main_big_title:before {height:30px; top:40px; }

	.section05_inner .main_big_title:after {top:70px;}

	.section05_inner .list-box .banner-frame p{font-size:16px;}

	.section05_inner .list-box .banner-frame p strong{font-size:23px; margin-bottom:5px;}

	

	.section05_inner .list-box ul{margin:0 -10px;}

	.section05_inner .list-box li{height:250px; margin:0 10px; width:calc(50% - 20px); margin-bottom:20px;}
	.footer-sns { position:relative; display: inline-block;
    text-align: center;
    top: 10px;
    width: 100%;}
	.footer-sns li {display: contents;}

}



@media only screen and (max-width: 500px) {

	.main_section05 {padding:50px 20px 60px 20px;}

	.section05_inner .list-box ul{margin:0 -5px;}

	.section05_inner .list-box li{height:220px; margin:0 5px; width:calc(50% - 10px); margin-bottom:10px;}

	.section05_inner .list-box .banner-frame{top:50%; padding:0 10px;}

	.section05_inner .list-box li:before{background-size:auto;}

}