@charset 'utf-8';
/*=================================================================================
 * Fonts
 =================================================================================*/
@font-face {
    font-family: 'notoBold';
	font-weight: normal;
    font-style: normal;
    src: url('../fonts/notokr-bold.eot');
    src: url('../fonts/notokr-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/notokr-bold.woff2') format('woff2'),
         url('../fonts/notokr-bold.woff') format('woff'),
         url('../fonts/notokr-bold.ttf') format('truetype'),
         url('../fonts/notokr-bold.svg#notokr-bold') format('svg');
}

@font-face {
    font-family: 'notoMedium';
	font-weight: normal;
    font-style: normal;
    src: url('../fonts/notokr-medium.eot');
    src: url('../fonts/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/notokr-medium.woff2') format('woff2'),
         url('../fonts/notokr-medium.woff') format('woff'),
         url('../fonts/notokr-medium.ttf') format('truetype'),
         url('../fonts/notokr-medium.svg#notokr-medium') format('svg');
}

@font-face {
    font-family: 'notoRegular';
	font-weight: normal;
    font-style: normal;
    src: url('../fonts/notokr-regular.eot');
    src: url('../fonts/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/notokr-regular.woff2') format('woff2'),
         url('../fonts/notokr-regular.woff') format('woff'),
         url('../fonts/notokr-regular.ttf') format('truetype'),
         url('../fonts/notokr-regular.svg#notokr-regular') format('svg');
}

 @font-face {
    font-family: 'notoDemLight';
	font-weight: normal;
    font-style: normal;
    src: url('../fonts/notokr-demilight.eot');
    src: url('../fonts/notokr-demilight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/notokr-demilight.woff2') format('woff2'),
         url('../fonts/notokr-demilight.woff') format('woff'),
         url('../fonts/notokr-demilight.ttf') format('truetype'),
         url('../fonts/notokr-demilight.svg#notokr-demilight') format('svg');
}

@font-face {
    font-family: 'notoLight';
	font-weight: normal;
    font-style: normal;
    src: url('../fonts/notokr-light.eot');
    src: url('../fonts/notokr-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/notokr-light.woff2') format('woff2'),
         url('../fonts/notokr-light.woff') format('woff'),
         url('../fonts/notokr-light.ttf') format('truetype'),
         url('../fonts/notokr-light.svg#notokr-light') format('svg');
}

/*=================================================================================
 * Default
 =================================================================================*/
/* Font */
body, select, input, textarea, h1, h2, h3, h4, h5, h6, dt, button, strong {font-family:'notoRegular';}

/* Common */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, em, img, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, tbody, tfoot, thead, tr, th, td, a, figure, i {margin:0; padding:0; border:0; box-sizing:border-box; /* transition:all 0.2s ease-in-out; */}
html {height:100%; -webkit-text-size-adjust:none; font-size:20px;}
body {font-size:0.9rem; line-height:1.25; color:#555; letter-spacing:-0.04em; height:100%;}
h1,h2,h3,h4,h5 {font-size:100%; font-weight:normal;}
ul,ol,li, figure {list-style-type:none;}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed;}
caption {position:absolute; left:-10000%; top:0; width:0; height:0; font-size:0; line-height:0; }
caption.cap {text-align:left; font-weight:bold; margin-bottom:5px; font-size:.7rem;}
em, address, i {font-style:normal;}
button {display:inline-block; padding:0; border:0; background:transparent; text-align:center; vertical-align:middle; cursor:pointer; white-space:nowrap;}
button::-moz-focus-inner {padding:0;border:0; border-radius:0; -webkit-appearance:none;}
button span {position:relative;}
.hid, .hidden, legend, hr {position:absolute; left:-10000%; top:0; overflow:hidden; width:0; height:0; font-size:0; line-height:0; text-indent:-10000px;}
a {text-decoration:none; color:#666; -webkit-tap-highlight-color:transparent; -webkit-user-select:none;}
a:hover {text-decoration:none; cursor:pointer; color:#666; }
section, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav {display:block; box-sizing:border-box;}
img {vertical-align:middle; border:0;}
:before, :after {box-sizing:border-box; /* transition:all 0.2s ease-in-out; */}

/*=================================================================================
 * Layout
 =================================================================================*/
body {background-color:#eaf1f7; background-image:url('../images/body_bg.jpg'); background-repeat:repeat-x; background-position:center top; background-size:cover;}
#wrap {background-image:url('../images/visual.png'); background-position:center top; background-repeat:no-repeat; background-size:1920px 949px, contain;}
#header {position:relative; max-width:1200px; margin:0 auto; height:799px; /* background-image:url('../images/visual_obj.png'); */ background-repeat:no-repeat; background-position:center top; background-size:contain;}
#header .logo {position:absolute; right:24px; top:56px; width:159px; height:67px; background-image:url('../images/logo_top.png'); background-size:contain; background-repeat:no-repeat; font-size:0; line-height:0; transition:all 0.2s ease-in-out;}
#header .title {position:absolute; top:16%; right:0; left:0; padding-top:22%; background-image:url('../images/visual_title.png'); background-size:contain; background-repeat:no-repeat; background-position:center; font-size:0; line-height:0; transition:all 0.2s ease-in-out;}
#header .banner {position:absolute; left:10px; top:387px; width:244px; height:244px; background-image:url('../images/down_banner.png'); background-size:contain; background-repeat:no-repeat; background-position:center; font-size:0; line-height:0; transition:all 0.2s ease-in-out;}
#header .banner2 {position:absolute; left:10px; top:387px; width:244px; height:244px; background-image:url('../images/down_banner2.png'); background-size:contain; background-repeat:no-repeat; background-position:center; font-size:0; line-height:0; transition:all 0.2s ease-in-out;}

#contanier {position:relative; margin-top:.75rem;}
#contanier .policy {max-width:1200px; margin:0 auto;}
#contanier .policy:after {content: ''; display: block; clear: both;}
#contanier .policy section {float:left; width:400px; }
#contanier .policy section:nth-child(2) {padding-top:2.65rem;}
#contanier .policy section article {display:block; padding:.25rem; }
#contanier .policy a {position:relative; display:block;  box-shadow:2px 2px 10px 0 rgba(0, 0, 0, .25); font-size:0; line-height:0;}
#contanier .policy a span {display:inline-block; z-index:2; }
#contanier .policy a em {position:absolute; left:1rem; top:1.4rem; border-radius:1.2rem; padding:.7rem .75rem .6rem .75rem; color:#fff; font-size:.75rem; font-family:'notoRegular'; background-color:rgba(0, 0, 0, 0.8); z-index:2; display:inline-block;}
#contanier .policy a span.txt {position:absolute; left:0; right:0; bottom:0; padding:0 1rem 1.5rem 1rem;}
#contanier .policy a span.txt strong {display:block; color:#fff; letter-spacing:-0.05em; font-family:'notoBold'; font-size:1.2rem; font-weight:normal; line-height:1.25; max-height:3rem; overflow:hidden; /* overflow:hidden; white-space:nowrap; text-overflow:ellipsis; */}
#contanier .policy a span.txt span {margin-top:.75rem; display:block; color:#fff; letter-spacing:-0.025em; font-family:'notoLight'; font-size:.85rem; line-height:1rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#contanier .policy a figure {position:relative; width:100%; height:410px; z-index:1; background-color:#a1a1a1; background-image:url('../images/logo_bottom.png'); background-repeat:no-repeat; background-position:center; background-size:50%; overflow:hidden;}
#contanier .policy a figure:before {content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-image:url('../images/policy_shadow.png'); background-size:contain; background-repeat:repeat-x; background-position:left bottom; z-index:2; font-size:0; line-height:0;}
#contanier .policy a figure i {position:absolute; left:0; top:0; right:0; bottom:0;}
#contanier .policy a figure img {width:100%; height:100%; transition:all 0.4s ease-in-out; /* object-fit:cover; */}
#contanier .policy a:hover figure img {transform: scale(1.1);}

#contanier .policy a.st1 em {color:#fff; background-color:rgba(72, 120, 160, 1);}
#contanier .policy a.st1 figure:before {display:none;}
#contanier .policy a.st2 figure:after {content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-image:url('../images/play.png'); background-size:3.1rem 3.1rem; background-repeat:no-repeat; background-position:center;}
#contanier .policy a.st3 figure:before {display:none;}

#contanier .result_list {position:relative; margin-top:4rem;}
#contanier .result_list .title {max-width:1200px; margin:0 auto 2.5rem auto;}
#contanier .result_list .title h2 {height:2.15rem; background-image:url('../images/title.png'); background-size:contain; background-repeat:no-repeat; background-position:center; font-size:0; line-height:0; }
#contanier .result_list .list {position: relative;}
#contanier .result_list .list:before {content:''; display: block; position: absolute; left:0; right:0; bottom:0; height: 267px; background-image:url('../images/list_bg.png'); background-repeat: repeat-x; background-size:cover; background-position: center bottom; z-index: 2;}
#contanier .result_list .list ul {position:relative; max-width:1200px; margin:0 auto; padding:20px 0;}
#contanier .result_list .list ul:before {content:''; position:absolute; top:0; bottom:0; left:50%; margin-left:-0.5px; width:1px; background-color:rgba(0, 0, 0, 0.15); transition:all 0.2s ease-in-out;}
#contanier .result_list .list ul:after {content: ''; display: block; clear: both;}
#contanier .result_list .list ul li {position:relative; float:left; margin:0 0 2% 0; clear:left; width:50%; padding:0 25px 0 10px; opacity:0;}
#contanier .result_list .list ul li:before {content:''; position:absolute; right:-2.5px; top:-2.5px; width:5px; height:5px; background-color:#5b586b; border-radius:5px;}
#contanier .result_list .list ul li:after {content:''; position:absolute; right:-6.5px; top:-6.5px; width:13px; height:13px; background-color:transparent; border-radius:13px; border:1px solid #5b586b; visibility:hidden; opacity:0;}
#contanier .result_list .list ul li a {position:relative; background-color:#fff; border:1px solid #9d99a7; display:block; padding:1.5rem; /* min-height:11.4rem; */}
#contanier .result_list .list ul li a:before {content:''; display:inline-block; position:absolute; top:-1px; right:-17px; border-bottom:17px solid transparent; border-left:17px solid #9d99a7;}
#contanier .result_list .list ul li a:after {content:''; display:inline-block; position:absolute; top:0px; right:-15px; border-bottom:18px solid transparent; border-left:18px solid #fff;}
#contanier .result_list .list ul li:nth-child(2n) {margin:2% 0 0 0; clear:right; padding:0 10px 0 25px;}
#contanier .result_list .list ul li:nth-child(2n):before {right:auto; left:-2.5px;}
#contanier .result_list .list ul li:nth-child(2n):after {right:auto; left:-6.5px;}
#contanier .result_list .list ul li:nth-child(2n) a:before {right:auto; left:-17px; border-right:17px solid #9d99a7; border-left:none;}
#contanier .result_list .list ul li:nth-child(2n) a:after {right:auto; left:-15px; border-right:18px solid #fff; border-left:none;}
#contanier .result_list .list ul li:hover:before {background-color:#2e528d;}
#contanier .result_list .list ul li:hover:after {border:1px solid #2e528d; visibility:visible; opacity:1;}
#contanier .result_list .list ul li:hover a {border:1px solid #2e528d; background-color:#f3f6fe; box-shadow:2px 2px 10px 0 rgba(0, 0, 0, .25);}
#contanier .result_list .list ul li:hover a:before {border-left:17px solid #2e528d;}
#contanier .result_list .list ul li:hover a:after {border-left:18px solid #f3f6fe;}
#contanier .result_list .list ul li:hover:nth-child(2n) a:before {right:auto; left:-17px; border-right:17px solid #2e528d; border-left:none;}
#contanier .result_list .list ul li:hover:nth-child(2n) a:after {right:auto; left:-15px; border-right:18px solid #f3f6fe; border-left:none;}
#contanier .result_list .list ul li:hover a em i:before {border-left:.4rem solid #f3f6fe;}
#contanier .result_list .list ul li:hover a em i:after {border-right:.4rem solid #f3f6fe;}
#contanier .result_list .list ul li:hover a > span i {background-color:#39393a; border:1px solid #252525; color:#fff;}

#contanier .result_list.none .list {padding:0 0 2.25rem 0;}
#contanier .result_list.none .list:before {display:none;}
#contanier .result_list.none > button {display:none;}

#contanier .result_list .list ul li.nodate {text-align:center; font-family:'notoMedium';}
#contanier .result_list .list ul li.nodate:after {visibility:visible; opacity:1;}
#contanier .result_list .list ul li.nodate div {position:relative; background-color:#fff; border:1px solid #9d99a7; display:block; padding:30px; min-height:228px; line-height:158px;}
#contanier .result_list .list ul li.nodate div:before {content:''; display:inline-block; position:absolute; top:-1px; right:-17px; border-bottom:17px solid transparent; border-left:17px solid #9d99a7;}
#contanier .result_list .list ul li.nodate div:after {content:''; display:inline-block; position:absolute; top:0px; right:-15px; border-bottom:18px solid transparent; border-left:18px solid #fff;}

#contanier .result_list .list ul li:before,
#contanier .result_list .list ul li:after,
#contanier .result_list .list ul li a,
#contanier .result_list .list ul li a:before,
#contanier .result_list .list ul li a:after,
#contanier .result_list .list ul li:nth-child(2n) a:before,
#contanier .result_list .list ul li:nth-child(2n) a:after,
#contanier .result_list .list ul li a em i:before,
#contanier .result_list .list ul li a em i:after,
#contanier .result_list .list ul li a > span i {transition:all 0.3s ease-in-out;}

#contanier .result_list .list ul li a em {display:block; margin-bottom:.4rem;}
#contanier .result_list .list ul li a em i {position:relative; font-size:.75rem; font-family:'notoLight'; letter-spacing:-.05rem; color:#fff; background-color:#173f81; padding:.419rem .65rem .29rem .65rem; line-height:.75rem; display:inline-block;}
#contanier .result_list .list ul li a em i:before {content:''; display:inline-block; position:absolute; top:-1px; left:-1px; border-bottom:8px solid transparent; border-left:8px solid #fff;}
#contanier .result_list .list ul li a em i:after {content:''; display:inline-block; position:absolute; bottom:-1px; right:-1px; border-top:8px solid transparent; border-right:8px solid #fff;}
#contanier .result_list .list ul li a figure {width:202px; height:133px; float:left; margin-right:17px; background-color:#a1a1a1; background-image:url('../images/logo_bottom.png'); background-repeat:no-repeat; background-position:center; background-size:50%; overflow:hidden;}
#contanier .result_list .list ul li a figure img {width:100%; height:100%; transition:all 0.4s ease-in-out;}
#contanier .result_list .list ul li:hover a figure img {transform: scale(1.1);}
#contanier .result_list .list ul li a > span {position:relative; overflow:hidden; display:block; min-height:6.65rem;}
#contanier .result_list .list ul li a > span strong {display:block; color:#222; letter-spacing:-.075rem; font-family:'notoMedium'; font-size:1.05rem; max-height:2.65rem; font-weight:normal; overflow:hidden;}
#contanier .result_list .list ul li a > span > span {display:block; font-family:'notoLight'; color:#444; letter-spacing:-.025rem; font-size:.75rem; line-height:1.05rem; max-height:2.1rem; margin-top:.5rem; overflow:hidden;}
#contanier .result_list .list ul li a > span i {font-family:'notoDemLight'; font-size:.6rem; line-height:.6rem; padding:.32rem .65rem .2rem .65rem;  border-radius:1.1rem; border:1px solid #d8d8d8; background-color:#fbfbfb; display:inline-block; margin-top:.4rem; margin-bottom:.1rem;}

#contanier .result_list > button {display:block; width:100%; position:absolute; bottom:2.8rem; text-align:center; height:1.9rem; background-image:url('../images/list_more.png'); background-repeat:no-repeat; background-size:contain; background-position:center; z-index:2; font-size:0; line-height:0;}

#contanier .banner {position:relative; width:100%; overflow:hidden;}
#contanier .banner ul {max-width:1200px; margin:0 auto;}
#contanier .banner ul:after {content: ''; display: block; clear: both;}
#contanier .banner ul li {position:relative; float:left; width:50%; height:0; padding-bottom:15.75%;}
#contanier .banner ul li a,
#contanier .banner ul li span {display:inline-block; position:absolute; top:0; bottom:0;}
#contanier .banner ul li:nth-child(1) a,
#contanier .banner ul li:nth-child(1) span{right:0; left:-60%;}
#contanier .banner ul li:nth-child(2) a,
#contanier .banner ul li:nth-child(2) span {left:0; right:-60%;}
#contanier .banner ul li img {max-width:100%;}

#footer {background-color:#252525; text-align:center; padding:2.75rem 0 2.75rem 0;}
#footer ul {padding:0 .5rem; text-align:center; font-size:0; line-height:0;}
#footer ul li {display:inline-block; padding:.5rem;}
#footer ul li a {display:inline-block; width:1.3rem; height:1.3rem; background-size:contain; background-repeat:no-repeat; background-position:center center;}
#footer ul li:nth-child(1) a {background-image:url('../images/sns_fb.png');}
#footer ul li:nth-child(2) a {background-image:url('../images/sns_tw.png');}
#footer ul li:nth-child(3) a {background-image:url('../images/sns_bl.png');}
#footer ul li:nth-child(4) a {background-image:url('../images/sns_ut.png');}
#footer address {padding:0 .5rem; text-align:center; font-family:'notoDemLight'; margin:1.25rem 0;}
#footer address span {display:block; color:#909091; font-size:.75rem;}
#footer address span i {position:relative; display:inline-block; margin:0 .25rem; color:#909091;}
#footer address span a {color:#909091;}
#footer address span i:before {content:''; position:absolute; left:-.25rem; top:50%; margin-top:-.275rem; height:.55rem; width:.05rem; background-color:#555;}
#footer address span i:first-child:before {display:none;}
#footer address span:nth-child(2) {font-size:.7rem; margin-top:.25rem;}
#footer > a {display:inline-block; width:5.1rem; height:2rem; background-image:url('../images/logo_bottom.png'); background-repeat:no-repeat; background-position:center; background-size:100%; font-size:0; line-height:0;}

/* Move Top */
.move_top {position:fixed; right:15px; bottom:10px; width:35px; height:35px; border:1px solid #d4d4d4; background-color:#fafafa; background-image:url('../images/go_top_arrow.png'); background-size:13px 13px; background-repeat:no-repeat; background-position:center center; z-index:45; border-radius:43px;}
.move_top i {font-size:0; line-height:0;}

/*=================================================================================
 * Meadia
 =================================================================================*/
/* Tablet */
@media only screen and (max-width:1199px) {
	html {font-size:19px;}
	#contanier .policy section {width:33.33%;}
	#contanier .policy a figure {padding-bottom:105.12%; height:0; overflow:hidden;}

	#contanier .result_list .title {padding:0 25%;}
}

@media only screen and (max-width:1128px) {
	#wrap {background-image:url('../images/visual_m.png'); background-size:contain;}
	#header {height:auto; padding-top:66.58%;}
	#header .inner {position:absolute; left:0; top:0; bottom:0; right:0;}
	#header .banner {top:44%; left:2%; width:18%; height:auto; padding-top:18%;}
	#header .banner2 {top:44%; left:2%; width:18%; height:auto; padding-top:18%;}
}

@media only screen and (max-width:1024px) {
	#header .logo {right:24px; top:30px; width:120px; height:51px;}
	#header .title {top:17%; right:0; left:0;}
}

@media only screen and (max-width:950px) {
	#contanier .policy a em {top:1rem;}
	#contanier .result_list .list ul li a > span {min-height:auto;}
	#contanier .result_list .list ul li a figure {position:relative; width:100%; height:0; float:none; padding-bottom:65.84%; margin-right:0; margin-bottom:.7rem;}
	#contanier .result_list .list ul li a figure img {position:absolute; left:0; top:0; bottom:0; right:0;}
}


@media only screen and (max-width:768px) {
	html {font-size:15px;}
	#header .logo {right:20px; top:20px; width:80px; height:34px;}
	#contanier .policy a em {left:1rem; top:1rem;}
}

/* Moblie */
@media only screen and (max-width:700px) {
	html {font-size:19px;}
	#header {padding-top:60%;}
	#header .logo {right:10px; top:15px; width:60px; height:25px;}
	#header .title {padding-top:25%; top:18%;}

	#contanier {margin-top:1.53rem;}
	#contanier .policy section {width:100%; padding:0 .25rem;}
	#contanier .policy section:nth-child(2) {padding-top:0;}
	#contanier .policy section article {float:left; width:50%;}
	#contanier .policy a em {font-size:.63rem;}
	#contanier .policy a span.txt {padding:0 .8rem .7rem .8rem;}
	#contanier .policy a span.txt strong {font-size:1.05rem;}
	#contanier .policy a span.txt span {margin-top:.26rem; font-size:.73rem;}

	#contanier .result_list {margin-top:1.84rem;}
	#contanier .result_list .title {padding:0 10%; margin:0 auto 1rem auto;}
	#contanier .result_list .list ul li a {padding:.75rem; min-height:auto;}

	#footer {padding:1.5rem 0 1.5rem 0;}
	#footer address span i:first-child {display:block; margin-bottom:.25rem;}
	#footer address span i:nth-child(2):before {display:none;}
}

@media only screen and (max-width:570px) {
	html {font-size:18px;}
}

@media only screen and (max-width:530px) {
	#contanier .result_list .title {/* margin:0 auto 0 auto; */}
	#contanier .result_list .list ul {padding:20px 20px;}
	#contanier .result_list .list ul:before {left:20px; margin-left:0;}
	#contanier .result_list .list ul li {width:100%; padding:0 10px 0 25px; margin:3% 0 0 0; clear:left;}
	#contanier .result_list .list ul li:first-child {margin:0;}
	#contanier .result_list .list ul li:before {left:-2.5px;}
	#contanier .result_list .list ul li:after {left:-6.5px;}
	#contanier .result_list .list ul li > a:before {right:auto; left:-17px; border-right:17px solid #9d99a7; border-left:none;}
	#contanier .result_list .list ul li > a:after {right:auto; left:-15px; border-right:18px solid #fff; border-left:none;}
	#contanier .result_list .list ul li:nth-child(2n) {margin:3% 0 0 0; clear:left;}
	#contanier .result_list .list ul li:hover > a:before {right:auto; left:-17px; border-right:17px solid #2e528d; border-left:none;}
	#contanier .result_list .list ul li:hover > a:after {right:auto; left:-15px; border-right:18px solid #f3f6fe; border-left:none;}

	#contanier .result_list .list ul li.nodate {width:100%; padding:0 10px 0 25px; margin:3% 0 0 0; clear:left;}
	#contanier .result_list .list ul li.nodate:first-child {margin:0;}
	#contanier .result_list .list ul li.nodate:before {left:-2.5px;}
	#contanier .result_list .list ul li.nodate:after {left:-6.5px;}
	#contanier .result_list .list ul li.nodate > div:before {right:auto; left:-17px; border-right:17px solid #9d99a7; border-left:none;}
	#contanier .result_list .list ul li.nodate > div:after {right:auto; left:-15px; border-right:18px solid #fff; border-left:none;}

	#contanier .banner ul li {width:100%; padding-bottom:31.5%;}
	#contanier .banner ul li:nth-child(1) img {position:relative; left:2.8%;}
	#contanier .banner ul li:nth-child(2) img {position:relative; left:-2%;}
	
}

@media only screen and (max-width:440px) {
	#contanier .policy a em {left:.5rem; top:.5rem;}
}

@media only screen and (max-width:320px) {
	html {font-size:12px;}
	#contanier .policy a em {left:.417rem; top:.417rem;}

}