@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('../fonts/Pretendard-Thin.eot');
    src: url('../fonts/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Thin.woff2') format('woff2'),
        url('../fonts/Pretendard-Thin.woff') format('woff'),
        url('../fonts/Pretendard-Thin.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('../fonts/Pretendard-ExtraLight.eot');
    src: url('../fonts/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-ExtraLight.woff2') format('woff2'),
        url('../fonts/Pretendard-ExtraLight.woff') format('woff'),
        url('../fonts/Pretendard-ExtraLight.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Pretendard-Light.eot');
    src: url('../fonts/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Light.woff2') format('woff2'),
        url('../fonts/Pretendard-Light.woff') format('woff'),
        url('../fonts/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Pretendard-Regular.eot');
    src: url('../fonts/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Regular.woff2') format('woff2'),
        url('../fonts/Pretendard-Regular.woff') format('woff'),
        url('../fonts/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Pretendard-Medium.eot');
    src: url('../fonts/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Medium.woff2') format('woff2'),
        url('../fonts/Pretendard-Medium.woff') format('woff'),
        url('../fonts/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Pretendard-SemiBold.eot');
    src: url('../fonts/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
        url('../fonts/Pretendard-SemiBold.woff') format('woff'),
        url('../fonts/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Pretendard-Bold.eot');
    src: url('../fonts/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Bold.woff2') format('woff2'),
        url('../fonts/Pretendard-Bold.woff') format('woff'),
        url('../fonts/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Pretendard-ExtraBold.eot');
    src: url('../fonts/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'),
        url('../fonts/Pretendard-ExtraBold.woff') format('woff'),
        url('../fonts/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('../fonts/Pretendard-Black.eot');
    src: url('../fonts/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Black.woff2') format('woff2'),
        url('../fonts/Pretendard-Black.woff') format('woff'),
        url('../fonts/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:10px;-webkit-font-smoothing:antialiased;}
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; font-weight: 300;}
body, th, td, input, select, textarea, button, p, span, a, strong{font-size:1.6rem;line-height:1;font-family: 'Noto Sans KR', sans-serif; color:#333333;letter-spacing: -0.1rem;}
div, th, td, input, select, textarea, button, p, span, a{font-weight: 400;}
fieldset, img{border:0 none;vertical-align:middle;}
dl, ul, ol, menu, li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
input, select, textarea, button{font-size:100%;vertical-align:middle;}
button{border:0 none;background-color:transparent;cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;width:100%;}
address, caption, cite, code, dfn, em, var{font-style:normal;}
body{overflow: auto;-webkit-text-size-adjust:none;}
a{display:inline-block;color:inherit;text-decoration:none;cursor: pointer;}
a:active, a:hover{text-decoration:none;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-ms-transition:.2s ease-in-out;-o-transition:.2s ease-in-out}
input{-webkit-appearance: none;-webkit-border-radius: 0;border-radius: 0;  border:0;letter-spacing: 0;}
input[type='checkbox']{-webkit-appearance:checkbox;}
input[type='radio']{-webkit-appearance:radio;}
input[type='number']{-webkit-appearance:none;}
input[type='search']{-webkit-appearance: none;}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none;}
caption{overflow:hidden;position:absolute;top:-1px;left:-1px;z-index:-1;width:1px;height:0px;line-height:0;white-space:nowrap;text-indent:-9999px;}
legend{visibility:hidden;position:absolute;top:-99999px;left:-99999px;margin-top:-99999px;margin-left:-99999px;}
.blind{overflow:hidden;position:absolute;top:-1px;left:-1px;z-index:-1;width:1px;height:0px;line-height:0;white-space:nowrap;text-indent:-9999px;}
body, html{height:100%;}
#section{width: 1920px; height: 947px; overflow: auto;}
input[type="file"]:focus{border:1px solid rgba(81, 203, 238, 1);}
figure{padding:0;margin:0;}
input[type=text]::-ms-clear,
input[type=email]::-ms-clear,
input[type=tel]::-ms-clear{display: none;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
br { font-family:dotum;}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

button:disabled,
button[disabled]{cursor: text;}

input:focus,
select:focus,
textarea:focus,
button:focus {outline: none;}
.skip-navi a{display: block;position: absolute;left: 0;top: 0;overflow: hidden;width: 1px;height: 1px;text-align: center;color: #fff;z-index: 101;}

::-webkit-input-placeholder{color: #666666;font-size: 1.4rem;}
::-moz-placeholder{color: #666666;font-size: 1.4rem;}
:-ms-input-placeholder{color: #666666 !important;font-size: 1.4rem;}
::-ms-input-placeholder{color: #666666 !important;font-size: 1.4rem;}
:-moz-placeholder{color: #666666;font-size: 1.4rem;}
textarea::placeholder{color: #666666;font-size: 1.4rem;}

.skip-navi a{display:block;position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px;text-align:center;color:#fff;z-index:101;}
.skip-navi a:focus, .skip-navi a:active{padding:0.8rem 0;width:100%;height:auto;background:#df1e36;}

/* button */
.btn {display: inline-block; cursor: pointer; text-align: center; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.btn.large {width: 100%; height: 82px; line-height: 80px; font-size: 2rem;}
.btn.medium {width: 150px; height: 42px; line-height: 40px; font-size: 1.4rem;}
.btn.x-small {width: 40px; height: 40px;}
.btn.type01 {background: #df1e36; color: #fff;}
.btn.type02 {background: #e6e6e6; color: #999;}
.btn.type03 {border: 1px solid #000; background: #fff;}
.btn.type04 {background: #ccc; color: #fff;}
.btn.type05 {background: #000; color: #fff;}
.btn-area {font-size: 0; text-align: center; margin-top: 4rem;}
.btn-area a + a {margin-left: 0.5rem;}
.btn-area.type02 {margin-top: 1.8rem;}
.btn-area.type03{overflow: hidden;}

/*tag*/
.tag{display: inline-block;}
.tag.medium{height: 36px;line-height: 36px;padding: 0 15px;font-size: 15px;}
.tag.type01{color: #545454;background-color: #f2f2f2;border-radius: 18px;-webkit-border-radius: 18px;}

.to-list{display: inline-block;padding-left: 2.8rem;font-size: 1.8rem;color: #df1e36;font-weight: bold;background: url('../images/common/ico_list.png') 0 2px no-repeat;}
.to-list:hover{text-decoration: underline;}

.declare-box {position: relative; float: right;}
.declare-box .btn-write {position: relative; width: 300px;height: 66px;}
.declare-box .btn-write a {position: absolute; width: 100%; height: 40px; text-align: right; z-index: 1;}
.declare-box .btn-write a span {display: inline-block; position: absolute; top: 8px; right: 20px; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.12rem; opacity: 1; }
.declare-box .btn-write::before {width: 38px; height: 33px; background: url('../images/common/ico_pen.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; left: 12px; top: -2px; opacity: 1;}
.declare-box .btn-write .img-ani{width: 0; height: 68px; display: inline-block; position: absolute;}
.declare-box .btn-write .img-ani img {width: 300px; height: 66px; max-width: none; position: absolute; left: 0; top: 0px; opacity: 1; }
.declare-box .btn-result {display: block; position: absolute; left: 0; bottom: -1rem; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.12rem; padding: 1rem 0; opacity: 1;}
.declare-box .btn-result::before {width: 4px; height: 5px; background: url('../images/common/ico_arrow_xs.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; top: 14px; right: -21px; cursor: default;}

.declare-box.ani .btn-write::before {left: 12px; opacity: 1;}
.declare-box.ani .btn-write::after {opacity: 1;}
.declare-box.ani .btn-write a span {right: 20px; opacity: 1;}
.declare-box.ani .btn-write .img-ani img {top: 0; opacity: 1;}
.declare-box.ani .btn-result {opacity: 1;}

/* input type custom */
.input-search{position: relative;}
.input-search::after {width: 60px; height: 60px; background: url('../images/sub/ico_speechbubble_tail.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; right: 0; bottom: -60px;}
.input-search h3 {font-size: 2rem; font-weight: 700; margin-bottom: 1.4rem;}
.input-search p {font-weight: 300; color: #000; margin-bottom: 1.4rem;}
.input-search .search-box {background: url('../images/common/ico_pen02.png') no-repeat 28px 30px;  border: 6px solid #df1e36; padding: 0 0 0 10rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
.input-search.simple .search-box{padding-left: 3.4rem;background: 0 none;}
.input-search.simple::after{display: none;}
.input-search input {float: left; width: 594px; height: 88px; border: 0; font-size: 2rem; font-weight: 300;}
.input-search input::placeholder{font-size: 2rem; font-weight: 300; color: #666;}
.input-search input::-ms-placeholder{font-size: 2rem; font-weight: 300; color: #666;}
.input-search input::-ms-clear{display: none;}
.input-search .btn-search {float: right; display: block; width: 194px; height: 88px; line-height: 8.8rem; background-color: #df1e36; font-size: 2.4rem; font-weight: 400; color: #fff; text-align: center;}

.agreement .input-agree {display: inline-block; position: relative; font-size: 1.4rem; color: #000;}
.agreement .input-agree + .input-agree {margin-left: 4.5rem;}
.agreement .input-agree label {display: inline-block; color: #000; cursor: pointer;}
.agreement .input-agree label:before {position: relative; content: ''; display: inline-block; width: 30px; height: 30px;margin-right: 1.3rem; background: #fff; border: 1px solid #000; vertical-align: middle; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; top: -2px;}
.agreement .input-agree input[type="radio"]:checked+label:before ,
.agreement .input-agree input[type="checkbox"]:checked+label:before {background: #fff url(../images/common/ico_check.gif) 0 0 no-repeat;}
.input-agree input[type="checkbox"],
.input-agree input[type="radio"] {opacity: 0; filter: alpha(opacity=0); position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); top: 0; left: 0; border: 0;}

.file-wrap {overflow:hidden;}
.file-upload {clear: both; position: relative; width: 100%;}
.file-upload .file-text{float: left; width: 100%; height: 60px; line-height: 6rem; font-size: 1.4rem;;}
.file-wrap .file-input {position: relative;}
.file-wrap .btn {position: absolute; right: 0; top:0; vertical-align: top;}
.file-hidden {position:absolute; right:0px; top:0px; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer;}

.select {position: relative;}
.select .label {width: 100%;}
.select .select-list {display: none;}
.select .select-list li a {display: block; background: #fff;}
.select .select-list.active {display: block;}

/* tab */
.tabs{box-sizing: border-box;text-align: center;}
.tabs:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.tabs li{float: left;position: relative;line-height: 1;}
.tabs.large li{height: 80px;}
.tabs.type01 li:first-child a{border-left: 1px solid #ccc;}
.tabs.type02 li:first-child a{border-left: 1px solid #ccc;}
.tabs.type01 li.active:first-child a{border-left: 1px solid #df1e36;}
.tabs.type02 li.active:first-child a{border-left: 1px solid #df1e36;}
.tabs.type01 li:last-child a{border-right: 1px solid #ccc;}
.tabs.type01 li.active:last-child a{border-right: 1px solid #df1e36;}
.tabs li:before{content: '';display: block;position: absolute;left: 0;top: 0;width: 1px;}
.tabs.type01 li:before{top: 1.6rem;height: 30px;background: #ccc;}
.tabs.type02 li:before{height: 100%;border-left: 1px solid #d2d2d2;}
.tabs li.active + li:before{display: none;}
.tabs li:first-child:before{display: none;}
.tabs li.active:before{display: none;}
.tabs li a{display: flex;justify-content: center;align-items: center;height: 100%;line-height: 1;font-weight: 300; box-sizing: border-box;}
.tabs.type01 li a{color: #666;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #fff;}
.tabs.type02 li a{color: #666;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #fff;}
.tabs.large li a{font-size: 1.6rem;line-height: 1.8rem;}
.tabs li:last-child a{border-left: 0 none;}
.tabs.type02 li:last-child a{border-right: 1px solid #ccc;}
.tabs.type02 li.active:last-child a{border-right: 1px solid #e0808c;}
.tabs.type01 li.active a{color: #fff;background-color: #df1e36;border-top: 1px solid #df1e36;border-bottom: 1px solid #df1e36;}
.tabs.type02 li.active a{color: #fff;background-color: #df1e36;border-top: 1px solid #df1e36;border-bottom: 1px solid #df1e36;}

.tab-content{display: none;}
.tab-content.active{display: block;}

.no-result{margin-top: 2.7rem;padding-top: 17.7rem;background: url('../images/common/no_result.png') 50% 0 no-repeat;}
.no-result p{font-size: 1.6rem;line-height: 2.6rem;color: #666;font-weight: 300;letter-spacing: -.1rem;text-align: center;}
.no-result p a{font-size: 1.6rem;line-height: 2.6rem;color: #666;font-weight: 300;letter-spacing: -.1rem;}
.no-result p strong{font-size: 1.6rem;line-height: 2.6rem;color: #df1e36;font-weight: 500;}
.no-result p .hypen{display: inline-block;padding: 0 .3rem;font-size: 1.6rem;line-height: 2.6rem;color: #666;font-weight: 300;letter-spacing: -.3rem;text-align: center;letter-spacing: 0;}

/* motion */
.triangle {position: relative;}
.triangle::before {width: 0; height: 0; content: ''; display: block; position: absolute; right: 0; bottom: 0; border-bottom: 56px solid #fff; border-left: 56px solid transparent; transform: translate(50%, 50%); -webkit-transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.1s; -o-transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.1s; transition: 1.2s cubic-bezier(0.33, 0.25, 0.04, 0.87) 0.1s; z-index: 1;}
.ani .triangle::before {transform: translate(0, 0); z-index: 3;}

.slideInner{ -webkit-transform: scale(0.97); -ms-transform: scale(0.97); -o-transform: scale(0.97); transform: scale(0.97); -webkit-transition: all .8s;transition: all .8s;}		
.scaleDown{-webkit-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07);
transform: scale(1.07); -webkit-transition: all .8s;transition: all .8s;}		
figure img{-webkit-transition: all .8s;transition: all .8s;}
.thumb_over{cursor:pointer;}

/* main */
#mainCon {min-width: 1280px; padding-top: 10rem;}
#mainCon .contents .inner {max-width: 1580px;}
#mainCon .full {max-width: 1920px; margin: 0 auto;}
#mainCon .inner {max-width: 1580px; margin: 0 auto;}
#mainCon .contents .inner {max-width: 1580px;}
#mainCon section h3 {font-size: 4rem; font-weight: 100; letter-spacing: -0.25rem;}
#mainCon .slick-slider .slick-arrow{text-indent: -9999px; overflow: hidden; display: block; width: 104px; height: 104px; background: url('../images/main/slider_arrow_disable.png') no-repeat 0 0; position: absolute; z-index: 1; cursor: pointer !important;}
#mainCon .slick-slider .slick-arrow:hover {background: url('../images/main/slider_arrow.png') no-repeat 0 0; cursor: default;}
#mainCon .slick-slider .slick-arrow.slick-next {background-position: left bottom; right: 34rem; bottom: -38px;}


#mainCon .visual .text-wrap {padding: 18rem 0 17rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mainCon .visual .text-wrap h2 {line-height: 8rem; letter-spacing: -0.5rem;}
#mainCon .visual .text-wrap > p {color: #999; padding: 3.8rem 0 1rem 0.4rem;}
#mainCon .visual .slider .triangle::before {border-bottom: 106px solid #fff; border-left: 106px solid transparent; z-index: 1; bottom: 24.3rem; right: 0;}
#mainCon .visual .slide1 {width: 100%; background: url('../images/main/bg_visual01.jpg') no-repeat center top; background-size: auto;}
#mainCon .visual .slide2 {width: 100%; background: url('../images/main/bg_visual02.jpg') no-repeat center top; background-size: auto;}
#mainCon .visual .slide3 {width: 100%; background: url('../images/main/bg_visual03.jpg') no-repeat center top; background-size: auto;}
#mainCon .visual .slide4 {width: 100%; background: url('../images/main/bg_visual04.jpg') no-repeat center top; background-size: auto;}
#mainCon .visual .slider-wrap  {position: relative;}
#mainCon .visual .slider-wrap .slick-dots {width: auto; text-align: center; font-size: 0; position: absolute; left: 26.4583333%; bottom: 305px; z-index: 10;}
#mainCon .visual .slider-wrap .slick-dots li {display: inline-block; margin: 0 4px;}
#mainCon .visual .slider-wrap .slick-dots button {text-indent: -9999px; overflow: hidden; display: block; width: 10px; height: 10px; border: 1px solid #df1e36; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
#mainCon .visual .slider-wrap .slick-dots .slick-active button {width: 52px; height: 10px; background: #d31e1e;}
#mainCon .visual .slick-slider .slick-next, 
#mainCon .visual .slick-slider .slick-arrow.slick-disabled.slick-next {top: 34rem; right: 4rem; bottom: auto;}
#mainCon .visual .slick-slider .slick-prev, 
#mainCon .visual .slick-slider .slick-arrow.slick-disabled.slick-prev {top: 34rem; left: 4rem; bottom: auto;}


#mainCon .visual .slider-wrap .inner {padding-top: 72.5rem;}
#mainCon .visual .slider-wrap .slideInner .inner {transform: scale(0.93);}
#mainCon .visual .slider-wrap .inner .text {position: relative; font-size: 4rem; font-weight: 100; color: #4c4c4c; line-height: 5.2rem; letter-spacing: -0.3rem; padding: 13rem 0 8rem 34rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mainCon .visual .slider-wrap .obj-box {position: absolute; width: 198px; height: 198px;}
#mainCon .visual .slider-wrap .obj-box > span {display: inline-block; background: #df1e36; position: absolute; opacity: 0;}
#mainCon .visual .slider-wrap .obj-box .line-top {width: 0; height: 1px; top: 0; left: 0;}
#mainCon .visual .slider-wrap .obj-box .line-right {width: 1px; height: 0; top: 0; right: 0;}
#mainCon .visual .slider-wrap .obj-box .line-bottom {width: 0; height: 1px; bottom: 0; right: 0;}
#mainCon .visual .slider-wrap .obj-box .line-left {width: 1px; height: 0; bottom: 0; left: 0;}
#mainCon .visual .slider-wrap .obj-box {float: left; opacity: 1; -webkit-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s;}
#mainCon .visual .slider-wrap.ani .obj-box > span {opacity: 1;}
#mainCon .visual .slider-wrap.ani .obj-box .line-top {width: 100%; -webkit-transition: width 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.15s; transition: width 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.15s; }
#mainCon .visual .slider-wrap.ani .obj-box .line-right {height: 100%; -webkit-transition: height 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.35s; transition: height 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.5s;}
#mainCon .visual .slider-wrap.ani .obj-box .line-bottom {width: 100%; -webkit-transition: width 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.85s; transition: width 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 0.85s;}
#mainCon .visual .slider-wrap.ani .obj-box .line-left {height: 100%; -webkit-transition: height 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 1.2s; transition: height 0.35s cubic-bezier(0.32, 0.27, 0.45, 1) 1.2s;}
#mainCon .visual .slider-wrap .obj-box p {font-size: 2.4rem; padding: 11.5rem 2rem 0; line-height: 2.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0;}
#mainCon .visual .slider-wrap.ani .obj-box p {opacity: 1; -webkit-animation: fadeInUp 1.4s ease-out; -mox-animation: fadeInUp 1.4s ease-out; -o-animation: fadeInUp 1.4s ease-out;}
#mainCon .visual .slider-wrap .slick-slide .inner .text::before {width: 13.3rem; height: 3.4rem; background: url('../images/main/visual_arrow_red.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; left: 34.5rem; bottom: 0; opacity: 0;}
#mainCon .visual .slider-wrap .slick-slide .inner .text::after {width: 13.3rem; height: 3.4rem; background: url('../images/main/visual_arrow_red.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; left: 34.5rem; bottom: 0; opacity: 0; display: none;}
#mainCon .visual .slider-wrap .slick-active .inner {opacity: 1;}
#mainCon .visual .slider-wrap .slick-active .inner .text::before {-webkit-animation: arrowIn 1.2s cubic-bezier(.2,.61,.85,.84); -moz-animation: arrowIn 1.2s cubic-bezier(.2,.61,.85,.84); -o-animation: arrowIn 1.2s cubic-bezier(.2,.61,.85,.84); animation: arrowIn 1.2s cubic-bezier(.2,.61,.85,.84); opacity: 1;}
#mainCon .visual .slider-wrap .slick-active .inner .text::after {display: block; opacity: 1; -webkit-animation: arrowOut 1.2s ease-out; -mox-animation: arrowOut 1.2s ease-out; -o-animation: arrowOut 1.2s ease-out; animation: arrowOut 1.2s ease-out; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;}

@-webkit-keyframes arrowIn {
    0% {left: 15.5rem; opacity: 0;}
    50% {left: 34.5rem;}
}
@-moz-keyframes arrowIn {
    0% {left: 15.5rem; opacity: 0;}
    50% {left: 34.5rem;}
}
@-o-keyframes arrowIn {
    0% {left: 15.5rem; opacity: 0;}
    50% {left: 34.5rem;}
}
@keyframes arrowIn {
    0% {left: 15.5rem; opacity: 0;}
    50% {left: 34.5rem;}
}

@-webkit-keyframes arrowOut {
    0% {left: 34.5rem;}
    40% {opacity: 0;}
    100% {left: 53.5rem; opacity: 0}
}
@-moz-keyframes arrowOut {
    0% {left: 34.5rem;}
    40% {opacity: 0;}
    100% {left: 53.5rem; opacity: 0}
}
@-o-keyframes arrowOut {
    0% {left: 34.5rem;}
    40% {opacity: 0;}
    100% {left: 53.5rem; opacity: 0}
}
@keyframes arrowOut {
    0% {left: 34.5rem;}
    40% {opacity: 0;}
    100% {left: 53.5rem; opacity: 0}
}

#mainCon section .text-wrap {padding: 11rem 16rem 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden;}
#mainCon section .text-wrap ul li {float: left; padding-left: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative;}
#mainCon section .text-wrap ul li::before {width: 29px; height: 10px; background: url('../images/main/arrow_line.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; left: 3rem; bottom: 10.7rem; -webkit-transition: 0.6s cubic-bezier(0.21, 0.41, 0.52, 0.94); -o-transition: 0.6s cubic-bezier(0.21, 0.41, 0.52, 0.94); transition: 0.6s cubic-bezier(0.21, 0.41, 0.52, 0.94);}
#mainCon section .text-wrap ul li a {width: 100%; height: 100%;overflow: hidden;}
#mainCon section .text-wrap ul li:nth-child(1)::before {left: 0;}
#mainCon section .text-wrap dl {overflow: hidden; padding-right: 11rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mainCon section .text-wrap ul li:nth-child(4)::before {background: url('../images/main/arrow_line_r.png') no-repeat 0 0;}
#mainCon section .text-wrap ul li:hover::before,
#mainCon section .text-wrap ul li:nth-child(1):hover::before {left: 2rem;}
#mainCon section .text-wrap ul li:nth-child(1) {padding-left: 0;}
#mainCon section .text-wrap ul li:nth-child(4) dl {padding-right: 0;}
#mainCon section .text-wrap dt {height: 50px; font-size: 2rem; font-weight: 500; color: #000; line-height: 2.5rem; margin-bottom: 1.5rem; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
#mainCon section .text-wrap ul li .red {font-size: 1.8rem; font-weight: 700;}
#mainCon section .text-wrap dd { font-size: 1.5rem; color: #757e85; line-height: 2.2rem; overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3; -webkit-box-orient: vertical;word-wrap: break-word;word-break:keep-all; text-overflow: ellipsis; height: 9.1rem;}

#mainCon .section1 {margin-top: 21.4rem; padding-bottom: 4rem; overflow:  hidden;}
#mainCon .section1 .full {position: relative; left: 17rem;}
#mainCon .section1 h3 {font-size: 2.4rem; font-weight: 300; letter-spacing: -0.1rem; margin-bottom: 3rem;}
#mainCon .section1 .slider .slick-slide {margin: 0 1rem;}
#mainCon .section1 .slider .slick-slide img {position: relative; z-index: 1;}
#mainCon .section1 .slider .slick-slide .triangle { -webkit-transition: 1s ease 0s; transition: 1s ease 0s;}
#mainCon .section1 .slider .slick-slide .triangle::before {border-bottom: 40px solid #fff; border-left: 40px solid transparent; z-index: 2;}
#mainCon .section1 .slider.ani .slick-active .triangle::before {z-index: 2; opacity: 1;}
#mainCon .section1 .slider .slick-slide .text-box {margin-top: 3.6rem; opacity: 0; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in;}
#mainCon .section1 .slider .slick-slide dl {position: relative; padding-bottom: 8rem;}
#mainCon .section1 .slider .slick-slide dl::before {width: 1px; height: 40px; background: #ccc; display: inline-block; content: ''; position: absolute; bottom: 20px; left: 50%;}
#mainCon .section1 .slider .slick-slide dt {font-size: 4rem; text-align: center; letter-spacing: -0.25rem;}
#mainCon .section1 .slider .slick-slide dd {color: #999; text-align: center; line-height: 2.8rem; padding-top: 2rem;}
#mainCon .section1 .slider .slick-slide .red {display: block; font-size: 1.7rem; font-weight: 900; text-align: center; letter-spacing: 0;}
#mainCon .section1 .slider .slick-active .text-box { -webkit-transition: all 0.5s ease-in 0.7s; -o-transition: all 0.5s ease-in 0.7s; transition: all 0.5s ease-in 0.7s; opacity: 1; }
#mainCon .section1 .slider .slick-prev,
#mainCon .section1 .slider .slick-arrow.slick-disabled.slick-prev {right: 34rem; bottom: 104px;}
#mainCon .section2 {margin-top: 14rem; position: relative;}
#mainCon .section2 .report-wrap {position: relative; width: 100%; height: 348px; z-index: 1;}
#mainCon .section2 .report-wrap .inner {height: 100%; background: #df1e36; position: relative;}
#mainCon .section2 .report-wrap .inner::before{width: 0;height: 0;content: '';display: block;position: absolute;right: 0;bottom: -8rem;border-top: 80px solid #df1e36;border-right: 80px solid transparent;z-index: 7;}

#mainCon .section2 .report-wrap .declare-box {float: none; width: 522px; height: 127px; padding-top: 12.5rem; margin: 0 auto; z-index: 1;}
#mainCon .section2 .report-wrap .declare-box .btn-write {width: 100%; height: 100%; position: relative; width: 522px; height: 127px; margin: 0 auto;}
#mainCon .section2 .report-wrap .declare-box .btn-write::before {width: 86px; left: 22px;top:4px; height: 79px; background: url('../images/common/ico_pen_w.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; opacity: 1;}
#mainCon .section2 .report-wrap .declare-box .btn-write a {width: 47.5rem; height: 6.5rem;  top: 1px; right: 25px;opacity:1;}
#mainCon .section2 .report-wrap .declare-box .btn-write a span {display: inline-block; font-size: 2.6rem; font-weight: 300; color: #fff; top: 12px; right: 55px; opacity: 1;}
#mainCon .section2 .report-wrap .declare-box .btn-result {color: #ccc; left: 14px; bottom: 12px; opacity: 1; }
#mainCon .section2 .report-wrap .declare-box .btn-result::before {width: 4px; height: 5px; background: url('../images/common/ico_arrow_xsw.png') no-repeat 0 0; display: inline-block; content: ''; position: absolute; top: 14px; right: -21px; cursor: default;}
#mainCon .section2 .report-wrap .declare-box .btn-write .img-ani img {top: 0px; opacity: 1;}


/* 로고 모션 */
/*
#mainCon .section2 .report-wrap .declare-box.ani .btn-write::before {left: 22px; top: 4px; opacity: 1;}
#mainCon .section2 .report-wrap .declare-box.ani .btn-write a {opacity: 1;}
#mainCon .section2 .report-wrap .declare-box.ani .btn-write a span {right: 30px; opacity: 1;}
#mainCon .section2 .report-wrap .declare-box.ani .btn-write .img-ani img {top: 0; opacity: 1; -webkit-transition: all cubic-bezier(0.09, 0.46, 0.39, 1.04) 0.6s; -o-transition: all cubic-bezier(0.09, 0.46, 0.39, 1.04) 0.6s; transition: all cubic-bezier(0.09, 0.46, 0.39, 1.04) 0.6s;}
#mainCon .section2 .report-wrap .declare-box.ani .btn-result {opacity: 1;}
*/

#mainCon .section2 .report-wrap .img-ani {width: 0; height: 127px; display: inline-block; position: absolute;}
#mainCon .section2 .report-wrap .img-ani img {width: 522px; height: 127px; max-width: none; position: absolute; left: 0; top: 0;  opacity: 1;}
#mainCon .section2 .qna-wrap {position: relative; z-index: 0; padding: 0;}
#mainCon .section2 .qna-wrap .inner {background: #f2f0f1; padding: 11rem 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mainCon .section2 .qna-wrap .inner-box {width: 1260px; margin: 0 auto;}
#mainCon .section2 .qna-wrap h3 {color: #666; margin-bottom: 9rem;}
#mainCon .section2 .qna-wrap ul {overflow: hidden;}
#mainCon .section2 .qna-wrap ul li {width: 372px; height: 304px; border-left: 1px solid #ccc;}
#mainCon .section2 .qna-wrap ul li:nth-child(1) {width: 338px;border-left: 0;}
#mainCon .section2 .qna-wrap ul li:nth-child(4) {width: 178px;}
#mainCon .section2 .qna-wrap ul li:hover::before {left: 5rem;}
#mainCon .section2 .qna-wrap dl {padding-bottom: 17.2rem;}
#mainCon .section2 .qna-wrap img {position: absolute; left: 7rem; bottom: 0;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
#mainCon .section2 .qna-wrap ul li:hover img {-webkit-transform: scale(1.1);transform: scale(1.1);}
#mainCon .section2 .qna-wrap ul li:nth-child(1) img {left: 3.3rem;}
#mainCon .section3 {margin-top: 24.8rem; overflow: hidden;}
#mainCon .section3 .triangle {float: left; position: relative; width: 50%;}
#mainCon .section3 .triangle img {position: absolute; top: 0; right: 0;}
#mainCon .section3 .triangle::before {bottom: -660px;}
#mainCon .section3 .bg {float: right; width: 50%; height: 98rem; background: #fafafa; padding-bottom: 32rem;}
#mainCon .section3 .partner-wrap {float: right; position: relative; width: 50%; height: 98rem; background: #fafafa; z-index: 4;}
#mainCon .section3 .partner-wrap > div {position: absolute; top: 20rem; left: 23rem;}
#mainCon .section3 .partner-wrap > div h3 {text-align: center;}
#mainCon .section3 .partner-wrap > div p {font-size: 1.8rem; font-weight: 300; color: #808080; text-align: center; letter-spacing: -0.12rem; line-height: 2.8rem; padding-top: 3.5rem;}
#mainCon .section3 .partner-wrap > div ul {text-align: center; margin-top: 18.5rem; overflow: hidden;}
#mainCon .section3 .partner-wrap > div ul li {margin-top: 3.4rem;}
#mainCon .section3 .partner-wrap > div ul li a {display: inline-block; width: 30rem; background: url('../images/common/ico_btnarrow.png') no-repeat 95% 0; background-size: 24px 24px; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.12rem; text-align: left; border-bottom: 1px solid #808080; padding: 0 1rem 1.8rem;}
#mainCon .section4 {margin-bottom: 4rem;}
#mainCon .section4 .full {width: 100%; position: relative; overflow: hidden;}
#mainCon .section4 .bg-img {width: 100%; height: 1080px; position: absolute; top: 0; left: 0;}
#mainCon .section4 .bg-img img {display: block; width: 100%; margin: 0 auto;}
#mainCon .section4 .inner {padding-top: 43.5rem;}
#mainCon .section4 .notice-wrap {width: 1260px; padding: 8rem 0 10.5rem; position: relative; margin: 0 auto; transition: 0.8s ease-out 0.8s; z-index: 1;}
#mainCon .section4 .notice-wrap h3 {color: #000; margin-bottom: 7rem;}
#mainCon .section4 .notice-wrap dl {padding-right: 0;}
#mainCon .section4 .notice-wrap .day {border-bottom: 1px solid #000; padding-bottom: 2.5rem; margin-bottom: 2.5rem;}
#mainCon .section4 .notice-wrap .day > span {display: block; font-family: 'Roboto', sans-serif; font-size: 5rem; font-weight: 300; color: #000; letter-spacing: -0.25rem; line-height: 4.4rem;}
#mainCon .section4 .notice-wrap ul li {width: 270px; height: 330px;  margin-left: 8rem; padding-left: 0;}
#mainCon .section4 .notice-wrap ul li:nth-child(1) {width: 270px; margin-left: 0;}
#mainCon .section4 .notice-wrap ul li:nth-child(4) {width: 210px;}
#mainCon .section4 .notice-wrap ul li::before {bottom: 0; left: 0;}
#mainCon .section4 .notice-wrap ul li:nth-child(4) a::before {width: 100%; height: 1px; background: #df1e36; display: inline-block; content: ''; position: absolute; top: 113px; left: 0;}
#mainCon .section4 .notice-wrap a {font-weight: 700;}
#mainCon .section4 .bg-white {width: 100%; height: 632px; background: #fff; position: absolute; bottom: 0; left: 8%; transition: 0.7s cubic-bezier(0,.72,.44,.99);}



.rules .cont-wrap h3 {font-size: 2.2rem; padding: 3rem 0 1.5rem; line-height: 1; font-weight: 500;}
.rules .cont-wrap li {margin: 0 3rem 2rem; position: relative;}
.rules .cont-wrap li::before {content: '';position: absolute;list-style: circle;font-size: 14px;display: inline-block;width: 5px;height: 5px;top: 3.7rem;left: -1.2rem;background: #000;border-radius: 50%; margin-top: 1px;}
.rules .cont-wrap li ,
.rules .cont-wrap p {font-size: 1.5rem; line-height: 3.2rem;}
.rules .policy .cont-wrap li {margin: 0 3rem;}
.rules .policy .cont-wrap li::before {width: 3px; height: 3px; top: 1.3rem; left: -1rem;}
.rules .policy .cont-wrap .title {font-weight: 500; margin: 0 0 1.5rem;}


/* popup */
.layer-popup {display: none;}
.layer-popup .bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.3;filter:alpha(opacity=30);z-index:1000;}
.layer-popup .popup-box {position:fixed;top:50%;left:50%;width:580px;background-color: #fff !important; padding: 7rem 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.2); box-shadow: 0px 3px 10px 1px rgba(0,0,0,0.2); z-index: 1002;}
.layer-popup .popup-box .btn-close {position: absolute; top: 2.5rem; right: 2.5rem; width: 27px; height: 27px; background: url('../../@resource/images/common/ico_close02.png') no-repeat 0 0; text-indent: -9999px;}
.layer-popup .popup-box .icon {display: block; margin: 0 auto 4rem;}
.layer-popup .popup-box h2 {font-size: 4rem; font-weight: 100; color: #000; text-align: center; letter-spacing: -0.3rem; margin-bottom: 2.2rem;}
.layer-popup .popup-box h2 .code {font-size: 4rem; font-weight: 400; letter-spacing: -0.15rem;}
.layer-popup .popup-box .time {display: block; text-align: center; font-size: 2rem; font-weight: 700; padding-bottom: 2.5rem;}
.layer-popup .popup-box .time * {display: inline-block; font-size: 2rem; font-weight: 700;}
.layer-popup .popup-box > p {font-size: 1.5rem; font-weight: 300; text-align: center; line-height: 2.2rem; color: #545454;}
.layer-popup .popup-box > p strong {font-size: 1.5rem; font-weight: 700;}
.layer-popup .popup-box > p strong.red {font-weight: 500;}
.layer-popup .popup-box > p span {display: block; font-weight: 500; color: #545454; padding-top: 1.5rem;}
.layer-popup#reportPopup01 .popup-box,
.layer-popup#reportPopup02 .popup-box {height:468px;margin:-234px 0 0 -290px;}
.layer-popup#logoutPopup01 .popup-box {height: 556px; margin: -278px 0 0 -290px;}
.layer-popup#logoutPopup02 .popup-box {height: 326px; margin: -163px 0 0 -290px;}
.layer-popup#filePopup01 {border: 1px solid #ededed;}
.layer-popup#filePopup01 .popup-box {padding: 8.5rem 0 7rem; margin: -100px 0 0 -290px;}
.layer-popup#filePopup01 .popup-box p {color: #000;}
.layer-popup#filePopup02 .popup-box {background: #df1e36 !important; padding: 8.5rem 0 7rem; margin: -107px 0 0 -290px;}
.layer-popup#filePopup02 .popup-box p ,
.layer-popup#filePopup02 .popup-box > p span {color: #fff; font-size: 1.5rem; font-weight: 300;}
.layer-popup#filePopup02 .popup-box .btn-close {background: url('../../@resource/images/common/ico_close01.png') no-repeat 0 0; z-index: -1;}
.layer-popup#filePopup02 .popup-box .file-hidden {width: 27px; height: 27px;top: 2.5rem; right: 2.5rem; z-index: 11; cursor: pointer}

/*PAGINATION*/
.pagination{padding-top: 6rem;text-align: center;border-top: 4px solid #000;}
.pagination .prev{width: 3.4rem;height: 3.4rem;margin-right: 2.8rem;margin-left: 0;border-radius: 50%;background: #df2d2d url('../images/common/page_prev.png') 11px 50% no-repeat; padding:0;}
.pagination .next{width: 3.4rem;height: 3.4rem;margin-left: 2.8rem;margin-right: 0;border-radius: 50%;background: #df2d2d url('../images/common/page_next.png') 13px 50% no-repeat; padding:0;}
.pagination a{display: inline-block;margin: 0 0.8rem;font-size: 1.6rem;font-family: 'Roboto', sans-serif;;line-height: 3.4rem;font-weight: 400; color: #8c8c8c;vertical-align: middle; padding: 0 0.5rem;}
.pagination a:hover{text-decoration: underline;}
.pagination strong{display: inline-block;margin: 0 1.3rem;font-size: 1.6rem;font-family: 'Roboto', sans-serif;;line-height: 3.4rem;font-weight: 400;color: #df1e36;vertical-align: middle;}

.primary-form .pagination .prev {width: 2.4rem; height: 2.4rem; margin-right: 1rem; background-size: 7px 14px; background-position: 8px center;}
.primary-form .pagination .next {width: 2.4rem; height: 2.4rem; margin-left: 1rem; background-size: 7px 14px; background-position: center;}
.primary-form .pagination a {font-size: 1.4rem; margin: 0 0.6rem;}
.primary-form .pagination strong {font-size: 1.4rem; margin: 0 1.1rem;}

@media only screen and (max-width:1980px){
    #mainCon .section1 .full {max-width: 1750px; left: 8.5rem;}
    #mainCon .section1 .slider .slick-next,
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-next {right: 17rem;}
    #mainCon .section1 .slider .slick-prev,
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-prev {right: 17rem;}
}

@media only screen and (max-width:1770px){
    #mainCon .section1 .full {max-width: 1580px; left: 0;}
    #mainCon .section1 .slider .slick-next,
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-next {right: 0rem;}
    #mainCon .section1 .slider .slick-prev,
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-prev {right: 0rem;}
}

@media only screen and (max-width:1720px){
    #mainCon .section1 .slider .slick-prev, 
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-prev {right: 5rem;}
    #mainCon .section1 .slider .slick-next, 
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-next {right: 5rem;}
    #mainCon .section4 .bg-white {left: 6%;}
}

@media only screen and (max-width:1580px){
    #mainCon .section1 .slider .slick-prev, 
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-prev {right: 2rem;}
    #mainCon .section1 .slider .slick-next, 
    #mainCon .section1 .slider .slick-arrow.slick-disabled.slick-next {right: 2rem;}
    #mainCon .section3 .partner-wrap > div {left: 20%;}
    #mainCon .section4 .bg-white {left: 4%;}
    #mainCon .section4 .notice-wrap {left: 4%;}
}

@media only screen and (max-width:1350px){
    #mainCon .section4 .notice-wrap {left: 7%;}
}