@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; width:10px; height:10px; margin:0 2px; background:transparent; border:2px solid #fff; border-radius:50%; opacity:0.5; vertical-align:middle;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#fff;}
.swiper-pagination-bullet-active{position:relative; width:14px; height:14px; margin:0 2px; background:#fff; border:none; opacity:1;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{background:#fff;}
.swiper-button-play, .swiper-button-pause{display:none; width:8px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:0.5; cursor:pointer;}
.swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:1;}
.swiper-button-play{background:url('../images/ico_play.png') no-repeat center;}
.swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;}
.swiper-button-play.active, .swiper-button-pause.active{display:inline-block;}
.swiper-button-next, .swiper-button-prev{display:block; position:relative; float:left; width:20px; height:28px; top:auto; left:auto; right:auto; margin-top:auto; background-size:auto;}
.swiper-button-prev{background:url('../images/ico_prev.png') no-repeat center;}
.swiper-button-next{background:url('../images/ico_next.png') no-repeat center;}
.moreBtn{transition:transform 0.2s;}
.moreBtn:focus, .moreBtn:hover, a:focus .moreBtn, a:hover .moreBtn{transform:rotate(90deg) !important;}

/* intro */
#intro{clear:both; position:relative; width:100%; height:100vh; min-height:960px; max-height:1080px;}
#intro .introHd{padding:30px 0;}
#intro .introHd .logo{display:inline-block; width:95px; vertical-align:top; z-index:99;}
#intro .introHd .logo h1{width:100%; max-width:95px;}
#intro .introHd .logo h1 a{}
#intro .introHd .logo h1 a img{width:100%;}
#intro .introHd .sitemap{display:inline-block; width:38px; height:38px; overflow:hidden;}
#intro .introHd .sitemap a{display:block; width:100%; height:100%; background:url('../images/ico_sitemap.png') no-repeat center; border:1px solid #fff; font-size:0;}
#intro .introCon{clear:both;}
#intro .introCon .area01{clear:both; display:inline-block; width:100%; padding:50px 0 80px;}
#intro .introCon .area01 .layoutLeft{}
#mainVisual{position:relative; width:100%; height:486px; margin:0 auto; background:transparent; border-radius:10px; overflow:hidden; box-shadow:5px 5px 5px rgba(0,0,0,0.1);}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .swiper-container{width:100%; max-width:680px; height:100%;}
#mainVisual .bgBox{position:absolute; top:20px; right:20px; cursor:default; z-index:2;}
#mainVisual .bgBox .pager{top:0; left:0; text-align:center;}
#intro .introCon .area01 .layoutRight{width:32%;}
#intro .introCon .area01 .slogan{display:block; margin:60px auto;}
#intro .introCon .area01 .slogan p{color:#fff; font-size:1.125rem; font-style:italic; letter-spacing:0.055em; opacity:0.9;}
#intro .introCon .area01 .slogan p.big{line-height:1.4; margin-bottom:30px; font-size:2.875rem; font-weight:500; font-style:normal; letter-spacing:-0.055em; opacity:1;}
#intro .introCon .area01 .slogan p.big strong{}
#intro .introCon .area01 .search{display:block; width:100%; margin:60px auto;}
#intro .introCon .area01 .search a{display:block; position:relative; width:100%; padding:25px 45px; border:1px solid #fff; color:#fff; font-size:1.75rem; font-weight:500; text-align:left;}
#intro .introCon .area01 .search a:after{content:''; display:block; position:absolute; width:26px; height:26px; top:50%; right:45px; margin-top:-13px; background:url('../images/ico_search.png') no-repeat center; background-size:100%;}
#intro .introCon .area01 .search a:focus, #intro .introCon .area01 .search a:hover{background:rgba(255,255,255,0.1);}
#intro .introCon .area02{clear:both; display:inline-block; width:100%;}
#intro .introCon .area02 .layoutLeft{width:40%;}
#intro .introCon .area02 .layoutRight{width:40%;}
#intro .introCon .area02 p.boardTitle{margin:0 auto 30px; color:#fff; font-size:1.75rem; font-weight:500; text-align:left;}
#intro .introCon .area02 p.boardTitle span.color{color:#a3f3ff;}
#intro .introCon .area02 a.moreBtn.white{display:block; position:absolute; width:22px; height:22px; padding:4px; top:4px; right:-4px; background:url('../images/ico_more_white.png') no-repeat center; font-size:0;}
#intro .introCon .area02 a.moreBtn.white:focus, #intro .introCon .area02 a.moreBtn.white:hover{}
#intro .introCon .area02 .news{position:relative;}
#intro .introCon .area02 .news .box{padding:20px; border:1px solid #fff;}
#intro .introCon .area02 .news .box p{display:inline-block; padding:0 0 2px; border-bottom:1px solid #fff; color:#fff; font-size:0.813rem; letter-spacing:0.055em; vertical-align:top;}
#intro .introCon .area02 .news .box .today{display:inline-block; width:21%; margin-top:-4px; text-align:center; vertical-align:top;}
#intro .introCon .area02 .news .box .today span{color:#fff; font-size:0.813rem; font-weight:500; letter-spacing:0;}
#intro .introCon .area02 .news .box .today span.day{display:block; font-size:2.5rem; font-weight:700;}
#intro .introCon .area02 .news .box ul.list{display:inline-block; width:67%;}
#intro .introCon .area02 .news .box ul.list li{position:relative; margin:0 0 14px; padding:0 0 0 8px;}
#intro .introCon .area02 .news .box ul.list li:last-child{margin:0;}
#intro .introCon .area02 .news .box ul.list.circle li:before{content:''; display:block; position:absolute; width:2px; height:2px; top:8px; left:0; background:#fff; border-radius:50%;}
#intro .introCon .area02 .news .box ul.list li a{display:block; width:100%; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#intro .introCon .area02 .news .box ul.list li a:focus, #intro .introCon .area02 .news .box ul.list li a:hover{text-decoration:underline;}
#intro .introCon .area02 .social{position:relative;}
#intro .introCon .area02 .social ul.sns{text-align:center;}
#intro .introCon .area02 .social ul.sns li{display:inline-block; margin:0 26px;}
#intro .introCon .area02 .social ul.sns li:last-child{margin:0 12px;}
#intro .introCon .area02 .social ul.sns li a{display:block; color:#fff; font-size:0.813rem; letter-spacing:0;}
#intro .introCon .area02 .social ul.sns li a img{display:block; margin:0 auto 14px; transition:transform 0.2s ease;}
#intro .introCon .area02 .social ul.sns li a span{}
#intro .introCon .area02 .social ul.sns li a:focus img, #intro .introCon .area02 .social ul.sns li a:hover img{transform:translate(0, -5px);}
#intro .background{position:fixed; width:100%; height:100%; top:0; left:0; background:#666; background-size:cover; z-index:-1;}
#intro .background:before{content:''; display:block; position:absolute; width:100%; height:100%; background:url('../images/pattern_01.png') repeat top left; opacity:0.5; z-index:99;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:#fff; z-index:1;}
#mainContents .area01{clear:both; width:100%; padding:40px 0;}
#mainContents .moreBtn{display:inline-block; width:22px; height:22px; padding:4px; font-size:0;}
#mainContents .moreBtn.black{background:url('../images/ico_more_black.png') no-repeat center;}
#mainContents .moreBtn.white{background:url('../images/ico_more_white.png') no-repeat center;}
#mainContents .area01 .moreBtn{position:absolute; bottom:28px; right:28px;}
#mainContents .area01 .ti{margin:0 0 20px; font-size:1.75rem; font-weight:500;}
#mainContents .area01 .ti strong{color:#3071cf; font-weight:500;}
#mainContents .area01 .imgW{float:left; position:relative; width:250px; padding:0 0 0 30px;}
#mainContents .area01 .imgW:before{content:''; display:block; position:absolute; width:calc(100% - 30px); height:100%; top:30px; left:0; z-index:-1;}
#mainContents .area01 .imgW img{width:100%; max-width:220px;}
#mainContents .area01 ul.list{float:right; text-align:right;}
#mainContents .area01 ul.list li{display:inline-block; position:relative; width:280px; height:130px; margin-left:20px; text-align:left; vertical-align:top; word-break:keep-all;}
#mainContents .area01 ul.list li:first-child{margin-left:0;}
#mainContents .area01 ul.list li.link01{}
#mainContents .area01 ul.list li.link02{}
#mainContents .area01 ul.list li.link03{}
#mainContents .area01 ul.list li a{display:block; position:relative; width:100%; height:100%; line-height:1.4; padding:26px 28px 30px; font-size:1.125rem; letter-spacing:-0.055em;}
#mainContents .area01 ul.list li a:focus, #mainContents .area01 ul.list li a:hover{background:rgba(0,0,0,0.2);}
#mainContents .area01 ul.list li a:after{content:''; display:block; position:absolute; width:100%; max-width:260px; height:20px; bottom:0; right:0; background:url('../images/main/overlay_01.png') no-repeat right center;}
#mainContents .area01 .journal, #mainContents .area01 .congresses, #mainContents .area01 .kormedicine, #mainContents .area01 .society{clear:both; display:inline-block; width:100%; padding:40px 0;}
#mainContents .area01 .journal{}
#mainContents .area01 .journal .imgW:before{background:#eee;}
#mainContents .area01 .journal ul.list li{background:#fff; border:1px solid #ddd;}
#mainContents .area01 .journal ul.list li a{color:#3071cf;}
#mainContents .area01 .journal ul.list li a:focus, #mainContents .area01 .journal ul.list li a:hover{background:rgba(180,180,180,0.1);}
#mainContents .area01 .journal ul.list li a:after{opacity:0.25;}
#mainContents .area01 .journal .moreBtn{opacity:0.3;}
#mainContents .area01 .congresses{}
#mainContents .area01 .congresses .imgW:before{background:#e6eaf4;}
#mainContents .area01 .congresses ul.list li{background:#0d2565;}
#mainContents .area01 .congresses ul.list li a{color:#fff;}
#mainContents .area01 .kormedicine{}
#mainContents .area01 .kormedicine .imgW:before{background:#eaf5fa;}
#mainContents .area01 .kormedicine ul.list li{background:#144693;}
#mainContents .area01 .kormedicine ul.list li a{color:#fff;}
#mainContents .area01 .society{}
#mainContents .area01 .society .imgW:before{background:#f4f2eb;}
#mainContents .area01 .society ul.list li{background:#f6bf0d;}
#mainContents .area01 .society ul.list li a:focus, #mainContents .area01 .society ul.list li a:hover{background:rgba(80,80,80,0.1);}
#mainContents .area01 .society ul.list li a:after{opacity:0.6;}

@media only screen and (min-width:1921px){
	#intro .background img{width:100%;}
}

@media only screen and (max-width:1279px){
	#mainVisual{height:auto;}
	#mainVisual .swiper-container{max-width:612px;}
	#mainVisual .swiper-container img{width:100%;}
	#intro .introCon .area01 .search a{padding:25px;}
	#intro .introCon .area01 .search a:after{right:25px;}
	#intro .introCon .area02 .news .box ul.list{width:64%;}
	#intro .introCon .area02 .layoutRight{width:44%;}
	#intro .introCon .area02 .social ul.sns li{margin:0 4%;}
	#intro .introCon .area02 .social ul.sns li:last-child{margin:0 1%;}
	#mainContents{min-width:960px;}
	#mainContents .area01 .imgW{width:210px;}
	#mainContents .area01 ul.list{width:calc(100% - 210px);}
	#mainContents .area01 ul.list li{width:30%; margin-left:10px;}
	#mainContents .area01 ul.list li:first-child{margin-left:0;}
	#mainContents .area01 ul.list li a{padding:20px 22px 22px;}
	#mainContents .area01 .moreBtn{bottom:22px; right:22px;}
}

@media only screen and (max-width:1023px){
	#intro{height:auto; min-height:initial; max-height:initial;}
	#intro .introHd{display:none;}
	#mainVisual{max-width:680px; height:auto; margin:0 auto;}
	#mainVisual .swiper-container{max-width:1023px;}
	#intro .introCon{text-align:center;}
	#intro .introCon .area01{padding:80px 0 20px;}
	#intro .introCon .area01 .layoutRight{width:100%;}
	#intro .introCon .area01 .slogan{max-width:680px; margin:20px auto 30px;}
	#intro .introCon .area01 .slogan p.big{margin-bottom:20px;}
	#intro .introCon .area01 .slogan p.big br{display:none;}
	#intro .introCon .area01 .search{max-width:680px; margin:40px auto;}
	#intro .introCon .area02{max-width:680px; margin:0 auto; padding:0 0 40px;}
	#intro .introCon .area02 .layoutLeft{float:left; width:48%;}
	#intro .introCon .area02 .news .box{padding:20px 16px;}
	#intro .introCon .area02 .news .box p{font-size:0.625rem;}
	#intro .introCon .area02 .news .box .today{width:20%;}
	#intro .introCon .area02 .layoutRight{float:right; width:48%;}
	#intro .introCon .area02 .social ul.sns li{margin:0 3%;}
	#intro .introCon .area02 .social ul.sns li:last-child{margin:0;}
	#intro .introCon .area02 .social ul.sns li a{font-size:0.75rem;}
	#intro .introCon .area02 .social ul.sns li a img{width:50px; margin:0 auto 10px;}
	#intro .background .swiper-container{height:100%;}
	#intro .background img{width:100%; height:100%;}
	#mainContents{min-width:100%;}
	#mainContents .area01 .imgW{width:180px;}
	#mainContents .area01 ul.list{width:calc(100% - 180px);}
	#mainContents .area01 ul.list li{margin-left:8px;}
	#mainContents .area01 ul.list li:first-child{margin-left:0;}
	#mainContents .area01 ul.list li a{padding:14px 18px 18px;}
	#mainContents .area01 .moreBtn{bottom:18px; right:18px;}
}

@media only screen and (max-width:768px){
	#mainContents .boardTitle{font-size:1.5rem;}
	#mainVisual .swiper-container{max-width:768px;}
	#intro .introCon{text-align:left;}
	#intro .introCon .area01{padding:60px 0 20px;}
	#intro .introCon .area01 .slogan{margin:30px 0 20px; text-align:center;}
	#intro .introCon .area01 .slogan p.big{margin-bottom:12px; font-size:2.25rem;}
	#intro .introCon .area01 .search{max-width:300px; margin:30px auto;}
	#intro .introCon .area01 .search a{padding:16px 20px; font-size:1.375rem;}
	#intro .introCon .area01 .search a:after{right:20px;}
	#intro .introCon .area02{display:block; padding:0 0 30px;}
	#intro .introCon .area02 p.boardTitle{margin:0 auto 20px; font-size:1.5rem;}
	#intro .introCon .area02 .layoutLeft{float:none; width:100%; margin:0 auto 30px;}
	#intro .introCon .area02 .news .box ul.list{width:70%;}
	#intro .introCon .area02 .layoutRight{float:none; width:100%;}
	#intro .introCon .area02 .social ul.sns li{width:24%; margin:0; vertical-align:top;}
	#mainContents .area01{padding:0;}
	#mainContents .area01 .ti{font-size:1.5rem;}
	#mainContents .area01 .imgW{float:none; width:100%; margin:0 auto 20px;}
	#mainContents .area01 .imgW:before{width:100%; top:15px;}
	#mainContents .area01 ul.list{float:none; width:100%;}
	#mainContents .area01 ul.list li{width:100%; height:auto; margin:0 auto 5px;}
	#mainContents .area01 ul.list li a{padding:12px 30px 16px 20px; font-size:1em;}
	#mainContents .area01 .journal, #mainContents .area01 .congresses, #mainContents .area01 .kormedicine, #mainContents .area01 .society{padding:0 0 40px;}
	#mainContents .area01 .moreBtn{bottom:50%; margin-bottom:-10px; right:20px;}
}

@media only screen and (max-width:540px){
	#mainVisual .swiper-container{max-width:540px;}
	#intro .introCon .area01 .slogan{margin:12px 0 0;}
	#intro .introCon .area01 .slogan p{font-size:0.938rem;}
	#intro .introCon .area01 .slogan p.big{margin-bottom:8px; font-size:1.563rem; word-break:keep-all;}
	#intro .introCon .area01 .search{max-width:250px; margin:20px auto;}
	#intro .introCon .area01 .search a{font-size:1.125rem;}
	#intro .introCon .area01 .search a:after{width:18px; height:18px; margin-top:-9px;}
	#intro .introCon .area02 .news .box p{display:none;}
	#intro .introCon .area02 .news .box ul.list{width:78%; padding:0 0 0 8px;}
	#intro .introCon .area02 .social ul.sns li a img{width:44px; margin:0 auto 8px;}
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}